/* Concept storefronts, drawn in HTML, CSS and SVG. Everything inside a .stage or .iph is sized in container units,
   so each screen scales as one picture. Four brands, four type and layout systems, one shared product illustration sprite. */

.stage { container-type: inline-size; width: 100%; max-width: 840px; position: relative; }
.bw { background: #fff; border-radius: 1.4cqw 1.4cqw 0 0; overflow: hidden; box-shadow: 0 2cqw 5cqw -2cqw rgba(0, 0, 0, 0.45); }
.bar2 { display: flex; align-items: center; gap: 0.7cqw; padding: 1cqw 1.6cqw; background: #eceef2; }
.bar2 i { width: 1cqw; height: 1cqw; border-radius: 50%; background: #cdd1d9; display: block; }
.bar2 span { margin-left: 1.4cqw; background: #fff; border-radius: 0.8cqw; padding: 0.35cqw 1.6cqw; font-size: 1cqw; color: #5c6272; }
.site { aspect-ratio: 16 / 9.2; position: relative; overflow: hidden; font-family: var(--sans); font-stretch: 100%; }
.pimg { display: block; width: 100%; height: 100%; overflow: visible; }
/* ---------- Maren: candles. Serif, warm neutrals, a storefront home page ---------- */
.mh { background: #fbf8f3; color: #1d1b18; height: 100%; display: flex; flex-direction: column; font-family: var(--sans); font-stretch: 100%; }
.mh-ann { height: 3cqw; background: #1d1b18; color: #f4eee3; font-size: 1cqw; display: grid; place-items: center; letter-spacing: 0.06cqw; flex: none; }
.mh-nav { height: 5cqw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 3cqw; font-size: 1.05cqw; font-weight: 500; flex: none; }
.mh-nav .l, .mh-nav .r { display: flex; gap: 2cqw; }
.mh-nav .r { justify-content: flex-end; }
.mh-nav b { font-family: var(--serif); font-weight: 500; font-size: 2.1cqw; letter-spacing: 0.45cqw; }
.mh-hero { height: 24cqw; display: grid; grid-template-columns: 1fr 1.05fr; padding: 0 3cqw; gap: 2cqw; align-items: center; flex: none; }
.mh-copy h4 { font-family: var(--serif); font-weight: 400; font-size: 4.5cqw; line-height: 1.02; letter-spacing: -0.14cqw; margin: 0 0 1.2cqw; font-stretch: 100%; }
.mh-copy p { font-size: 1.15cqw; line-height: 1.5; color: #5b564e; max-width: 27cqw; margin: 0 0 1.6cqw; }
.btns { display: flex; gap: 1cqw; }
.mb { display: inline-block; font-size: 1.05cqw; font-weight: 600; padding: 1cqw 2.1cqw; border-radius: 0.3cqw; background: #1d1b18; color: #fbf8f3; }
.mb.o { background: transparent; color: #1d1b18; box-shadow: inset 0 0 0 0.18cqw #1d1b18; }
.mh-rate { margin-top: 1.5cqw; font-size: 1cqw; color: #6c655a; }
.mh-art { height: 21.6cqw; background: #e8dfd0; border-radius: 0.7cqw; position: relative; overflow: hidden; }
.mh-art::before { content: ""; position: absolute; left: 12cqw; top: -1cqw; width: 24cqw; height: 24cqw; border-radius: 50%; background: #f0e5d1; }
.mh-art .pimg { position: absolute; }
.mh-art .a1 { left: 3.5cqw; bottom: 0.6cqw; width: 17cqw; height: 17cqw; }
.mh-art .a2 { left: 15.5cqw; bottom: -1.2cqw; width: 22cqw; height: 22cqw; }
.mh-art .a3 { right: 3.5cqw; bottom: 0.4cqw; width: 12cqw; height: 12cqw; }
.mh-sec { display: flex; justify-content: space-between; align-items: baseline; padding: 0 3cqw; height: 3.4cqw; margin-top: 1.4cqw; flex: none; }
.mh-sec b { font-family: var(--serif); font-weight: 500; font-size: 1.9cqw; }
.mh-sec span { font-size: 1cqw; text-decoration: underline; }
.mh-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqw; padding: 0 3cqw; flex: none; }
.pc .t { position: relative; height: 13cqw; border-radius: 0.6cqw; display: grid; place-items: center; }
.pc .t .pimg { width: 66%; height: 92%; }
.pc .badge { position: absolute; left: 0.8cqw; top: 0.8cqw; background: #1d1b18; color: #fbf8f3; font-size: 0.85cqw; font-weight: 600; padding: 0.25cqw 0.8cqw; border-radius: 2cqw; }
.pc .nm { font-size: 1.1cqw; font-weight: 600; margin-top: 0.7cqw; }
.pc .rt { font-size: 0.9cqw; color: #6c6150; }
.pc .pr { font-size: 1.05cqw; display: flex; justify-content: space-between; align-items: center; margin-top: 0.2cqw; }
.pc .add { font-size: 0.9cqw; font-weight: 600; background: #1d1b18; color: #fbf8f3; padding: 0.3cqw 1cqw; border-radius: 2cqw; }

/* ---------- Ora: ceramics. Clean sans, a product page ---------- */
.op { background: #fff; color: #16181d; height: 100%; font-family: var(--sans); font-stretch: 100%; }
.op-nav { height: 5cqw; display: flex; align-items: center; gap: 2.4cqw; padding: 0 3cqw; font-size: 1.05cqw; font-weight: 500; }
.op-nav b { font-size: 2cqw; font-weight: 800; letter-spacing: 0.5cqw; margin-right: auto; }
.op-bc { font-size: 0.95cqw; color: #5d626b; padding: 0 3cqw; height: 2.6cqw; display: flex; align-items: center; }
.op-main { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3cqw; padding: 0 3cqw; }
.op-gal .big { height: 34cqw; background: #dfe3d6; border-radius: 1cqw; display: grid; place-items: center; position: relative; }
.op-gal .big .pimg { width: 70%; height: 88%; }
.op-gal .th { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1cqw; margin-top: 1cqw; }
.op-gal .th i { display: grid; place-items: center; height: 7cqw; border-radius: 0.7cqw; }
.op-gal .th i .pimg { width: 80%; height: 86%; }
.op-gal .th i.on { box-shadow: inset 0 0 0 0.2cqw #16181d; }
.op-info h4 { font-size: 3.1cqw; font-weight: 800; letter-spacing: -0.12cqw; margin: 0 0 0.4cqw; line-height: 1.05; font-stretch: 100%; }
.op-sub { font-size: 1.1cqw; color: #5a606a; margin-bottom: 0.9cqw; }
.op-rate { font-size: 1cqw; margin-bottom: 1.2cqw; }
.op-price { font-size: 2.8cqw; font-weight: 700; margin-bottom: 1cqw; }
.op-lab { font-size: 1cqw; font-weight: 700; margin: 1.1cqw 0 0.6cqw; }
.sw { display: flex; gap: 0.8cqw; }
.sw i { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; display: block; }
.sw i.on { box-shadow: 0 0 0 0.3cqw #fff, 0 0 0 0.5cqw #16181d; }
.opz { display: flex; gap: 0.8cqw; }
.opz span { font-size: 1cqw; padding: 0.7cqw 1.5cqw; border-radius: 2cqw; box-shadow: inset 0 0 0 0.15cqw #cfd3da; }
.opz span.on { background: #16181d; color: #fff; box-shadow: none; }
.op-buy { display: flex; gap: 1cqw; margin-top: 1.6cqw; }
.op-qty { display: flex; align-items: center; gap: 1.6cqw; box-shadow: inset 0 0 0 0.15cqw #cfd3da; border-radius: 2cqw; padding: 0 1.6cqw; font-size: 1.1cqw; }
.op-add { flex: 1; background: #16181d; color: #fff; border-radius: 2cqw; text-align: center; padding: 1.1cqw; font-size: 1.15cqw; font-weight: 700; }
.op-ship { margin-top: 1.2cqw; background: #f1f4ea; border-radius: 0.8cqw; padding: 1cqw 1.2cqw; font-size: 1cqw; line-height: 1.5; color: #3d433a; }
.op-acc { margin-top: 1cqw; font-size: 1.05cqw; }
.op-acc div { display: flex; justify-content: space-between; padding: 0.85cqw 0; box-shadow: inset 0 -0.12cqw #e4e6ea; }

/* ---------- Kohi: coffee. Deep green, heavy condensed type, a subscription page ---------- */
.kh { background: #1c3a2f; color: #f3ead8; height: 100%; font-family: var(--sans); font-stretch: 100%; }
.kh-nav { height: 5cqw; display: flex; align-items: center; gap: 2.4cqw; padding: 0 3cqw; font-size: 1.05cqw; font-weight: 500; }
.kh-nav b { font-size: 2.8cqw; font-weight: 800; font-stretch: 62%; letter-spacing: 0.1cqw; margin-right: auto; }
.kh-hero { display: grid; grid-template-columns: 1.1fr 1fr; padding: 0.5cqw 3cqw 0; gap: 2cqw; height: 43cqw; }
.kh-hero h4 { font-size: 7.4cqw; font-weight: 800; font-stretch: 62%; line-height: 0.86; letter-spacing: -0.25cqw; margin: 0.8cqw 0 1.2cqw; color: #f3ead8; }
.kh-hero p { font-size: 1.2cqw; line-height: 1.5; color: #c9d8cf; max-width: 30cqw; margin: 0 0 1.6cqw; }
.kh-box { background: #f3ead8; color: #1c3a2f; border-radius: 1.2cqw; padding: 1.5cqw; max-width: 37cqw; }
.kh-tog { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6cqw; background: #e3d8c0; padding: 0.4cqw; border-radius: 2cqw; font-size: 1.05cqw; font-weight: 600; text-align: center; }
.kh-tog span { padding: 0.8cqw; border-radius: 2cqw; }
.kh-tog span.on { background: #1c3a2f; color: #f3ead8; }
.kh-row { display: flex; justify-content: space-between; font-size: 1.05cqw; margin-top: 1cqw; font-weight: 600; }
.kh-chips { display: flex; gap: 0.7cqw; margin-top: 0.7cqw; }
.kh-chips span { font-size: 1cqw; padding: 0.55cqw 1.2cqw; border-radius: 2cqw; box-shadow: inset 0 0 0 0.15cqw rgba(28, 58, 47, 0.4); }
.kh-chips span.on { background: #ff7a3d; color: #fff; box-shadow: none; }
.kh-cta { margin-top: 1.3cqw; background: #ff7a3d; color: #fff; border-radius: 2cqw; text-align: center; padding: 1.05cqw; font-size: 1.2cqw; font-weight: 800; }
.kh-art { position: relative; }
.kh-art .ring { position: absolute; left: 6cqw; top: 3cqw; width: 33cqw; height: 33cqw; border-radius: 50%; background: #2c5a47; }
.kh-art .pimg { position: absolute; }
.kh-art .b1 { left: 4cqw; top: 6cqw; width: 26cqw; height: 32cqw; }
.kh-art .b2 { left: 21cqw; top: 14cqw; width: 22cqw; height: 27cqw; }
.kh-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; padding: 0 3cqw; font-size: 1.05cqw; font-weight: 600; margin-top: 1cqw; }
.kh-strip span { border-top: 0.2cqw solid rgba(243, 234, 216, 0.5); padding-top: 0.8cqw; }

/* ---------- Northline: trade supplier. System type, dark, a quick-order table ---------- */
.nl { background: #0f1626; color: #e9eefc; height: 100%; font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif; position: relative; }
.nl-nav { display: flex; gap: 2cqw; padding: 1.3cqw 3cqw; font-size: 1cqw; align-items: center; background: #0a101d; }
.nl-nav b { font-size: 1.7cqw; font-weight: 800; letter-spacing: 0.12cqw; margin-right: auto; }
.nl-nav em { font-style: normal; background: #2a4bff; padding: 0.55cqw 1.4cqw; border-radius: 0.5cqw; font-weight: 600; }
.nl-body { display: grid; grid-template-columns: 14cqw 1fr; gap: 2cqw; padding: 1.8cqw 3cqw; }
.nl-filters { font-size: 1cqw; display: grid; gap: 1cqw; align-content: start; }
.nl-filters h5 { margin: 0 0 0.2cqw; font-size: 1cqw; color: #8d9ac2; font-weight: 700; }
.nl-filters div { display: flex; align-items: center; gap: 0.8cqw; }
.nl-filters i { width: 1.2cqw; height: 1.2cqw; border-radius: 0.3cqw; box-shadow: inset 0 0 0 0.15cqw #5a6a98; display: block; }
.nl-filters i.on { background: #2a4bff; box-shadow: none; }
.nl-main h4 { font-size: 2.8cqw; font-weight: 800; letter-spacing: -0.1cqw; margin: 0 0 0.9cqw; }
.nl-search { background: #151e33; border-radius: 0.7cqw; padding: 0.9cqw 1.4cqw; font-size: 1cqw; color: #8d9ac2; margin-bottom: 0.9cqw; }
.nl-table { background: #151e33; border-radius: 0.8cqw; overflow: hidden; font-size: 1cqw; }
.nl-table .tr { display: grid; grid-template-columns: 5cqw 2.4fr 1fr 1fr 1.1fr 0.9fr; gap: 1cqw; padding: 0.65cqw 1.4cqw; align-items: center; border-top: 0.1cqw solid #243152; }
.nl-table .tr.h { border-top: 0; background: #111a2e; color: #8d9ac2; font-weight: 600; padding: 0.8cqw 1.4cqw; }
.nl-table .th { height: 4.2cqw; border-radius: 0.5cqw; background: #1f2b48; display: block; }
.stock { font-size: 0.85cqw; padding: 0.25cqw 0.8cqw; border-radius: 2cqw; width: max-content; }
.stock.ok { background: #173d2e; color: #7ff0b4; } .stock.lo { background: #4a3a14; color: #ffd166; }
.qty { display: inline-flex; gap: 0.8cqw; background: #0f1626; border-radius: 0.5cqw; padding: 0.3cqw 0.9cqw; width: max-content; }
.nl-bar { position: absolute; left: 3cqw; right: 3cqw; bottom: 1.6cqw; background: #d8ff3d; color: #0b0d14; border-radius: 0.8cqw; padding: 1cqw 1.6cqw; display: flex; justify-content: space-between; font-size: 1.1cqw; font-weight: 800; }

/* ---------- full phone screens: product, bag, checkout ---------- */
.phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 4vw, 64px); align-items: start; }
.pcase { margin: 0; }
.pcase:nth-child(2) { margin-top: clamp(0px, 4vw, 56px); }
.pcase figcaption { margin-top: 18px; font-weight: 700; font-size: 1.1rem; }
.pcase figcaption span { display: block; font-weight: 400; font-size: 0.95rem; opacity: 0.85; }
.pscr { height: 100%; background: #fbf8f3; color: #1d1b18; font-family: var(--sans); font-stretch: 100%; display: flex; flex-direction: column; }
.p-nav { height: 10cqw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 5cqw; font-size: 3.4cqw; flex: none; }
.p-nav b { font-family: var(--serif); font-weight: 500; font-size: 5.6cqw; letter-spacing: 1.2cqw; }
.p-nav span:last-child { text-align: right; }
.p-pad { padding: 0 5cqw; }
.p-tile { height: 66cqw; border-radius: 4cqw; background: #e8dfd0; display: grid; place-items: center; position: relative; margin-top: 1cqw; }
.p-tile .pimg { width: 70%; height: 92%; }
.p-dots { display: flex; justify-content: center; gap: 1.6cqw; margin: 3cqw 0; }
.p-dots i { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #cfc4b0; display: block; } .p-dots i:first-child { background: #1d1b18; }
.p-h { font-family: var(--serif); font-weight: 500; font-size: 7cqw; line-height: 1.05; margin: 0; }
.p-rate { font-size: 3.2cqw; color: #665b49; margin: 1cqw 0 1.4cqw; }
.p-price { font-size: 6cqw; font-weight: 700; }
.p-chips { display: flex; gap: 2cqw; margin: 3cqw 0; flex-wrap: wrap; }
.p-chips span { font-size: 3.1cqw; padding: 1.6cqw 3.4cqw; border-radius: 6cqw; box-shadow: inset 0 0 0 0.5cqw #d4c9b6; }
.p-chips span.on { background: #1d1b18; color: #fbf8f3; box-shadow: none; }
.p-btn { background: #1d1b18; color: #fbf8f3; border-radius: 6cqw; text-align: center; padding: 4cqw; font-size: 4cqw; font-weight: 700; margin-top: 2cqw; }
.p-btn.alt { background: transparent; color: #1d1b18; box-shadow: inset 0 0 0 0.6cqw #1d1b18; }
.p-note { font-size: 3cqw; color: #6c655a; text-align: center; margin-top: 2.4cqw; }
.p-sub { font-size: 3.2cqw; color: #6c655a; }
.p-head { display: flex; justify-content: space-between; align-items: baseline; padding: 2cqw 5cqw 0; }
.p-head b { font-family: var(--serif); font-weight: 500; font-size: 6.4cqw; }
.p-prog { margin: 3cqw 5cqw 4cqw; font-size: 3.1cqw; }
.p-prog i { display: block; height: 2cqw; border-radius: 2cqw; background: #e4dbc8; margin-top: 1.6cqw; overflow: hidden; }
.p-line { display: grid; grid-template-columns: 24cqw 1fr auto; gap: 3.4cqw; padding: 3cqw 5cqw; align-items: center; }
.p-line .th { height: 24cqw; border-radius: 3cqw; display: block; position: relative; }
.p-line .th .pimg { position: absolute; left: 8%; top: 5%; width: 84%; height: 90%; }
.p-line b { display: block; font-size: 3.6cqw; line-height: 1.2; }
.p-line small { display: block; font-size: 3cqw; color: #665b49; margin: 0.6cqw 0 1.6cqw; }
.p-line .q { display: inline-flex; gap: 3cqw; box-shadow: inset 0 0 0 0.5cqw #d4c9b6; border-radius: 4cqw; padding: 0.8cqw 3cqw; font-size: 3.2cqw; }
.p-line .pr { font-size: 3.6cqw; font-weight: 700; align-self: start; }
.p-sum { margin: 2cqw 5cqw 0; font-size: 3.4cqw; display: grid; gap: 1.8cqw; }
.p-sum div { display: flex; justify-content: space-between; }
.p-sum .tot { font-size: 4.4cqw; font-weight: 700; padding-top: 2cqw; box-shadow: inset 0 0.5cqw #e4dbc8; }
.p-field { margin: 2cqw 5cqw 0; box-shadow: inset 0 0 0 0.5cqw #d4c9b6; border-radius: 3cqw; padding: 3cqw 3.6cqw; font-size: 3.3cqw; color: #5c5240; }
.p-field small { display: block; font-size: 2.8cqw; color: #6c6150; }
.p-secs { margin: 4cqw 5cqw 1.4cqw; font-weight: 700; font-size: 3.6cqw; }
.p-opt { margin: 1.6cqw 5cqw 0; display: grid; grid-template-columns: auto 1fr auto; gap: 3cqw; align-items: center; box-shadow: inset 0 0 0 0.5cqw #d4c9b6; border-radius: 3cqw; padding: 3cqw 3.6cqw; font-size: 3.3cqw; }
.p-opt i { width: 4.6cqw; height: 4.6cqw; border-radius: 50%; box-shadow: inset 0 0 0 0.6cqw #1d1b18; display: block; }
.p-opt.on { background: #f1ebde; box-shadow: inset 0 0 0 0.7cqw #1d1b18; }
.p-opt.on i { background: radial-gradient(#1d1b18 38%, transparent 42%); }
.p-express { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; margin: 2cqw 5cqw 0; }
.p-express span { background: #1d1b18; color: #fff; text-align: center; padding: 3.4cqw; border-radius: 3cqw; font-size: 3.4cqw; font-weight: 700; }
.p-express span:last-child { background: #f4b942; color: #1d1b18; }
.p-or { text-align: center; font-size: 3cqw; color: #6c6150; margin: 3cqw 0 1cqw; }
.p-spacer { flex: 1; }
.p-foot { padding: 3cqw 5cqw 9cqw; }

@media (max-width: 1000px) { .phones { grid-template-columns: 1fr; } .pcase:nth-child(2) { margin-top: 0; } .iph { max-width: 300px; } }
@media (prefers-reduced-motion: reduce) { .pimg { transition: none; } }

/* ---------- iPhone: titanium ring, bezel, Dynamic Island, real status bar, side buttons, home indicator ----------
   The screen keeps the real 1179 by 2556 ratio. .iph is the container, so every cqw inside is a share of the phone's width. */
.iph { container-type: inline-size; width: 100%; max-width: 330px; margin-inline: auto; }
.iph-body { position: relative; background: #4a4c52; border-radius: 16.5cqw; padding: 0.7cqw; box-shadow: 0 5cqw 10cqw -4cqw rgba(0, 0, 0, 0.55); }
.iph-bezel { background: #000; border-radius: 15.8cqw; padding: 2.4cqw; }
.iph-screen { position: relative; border-radius: 13.4cqw; overflow: hidden; aspect-ratio: 1179 / 2556; background: #fbf8f3; }
.iph-island { position: absolute; top: 2.8cqw; left: 50%; width: 29cqw; height: 8.6cqw; margin-left: -14.5cqw; background: #000; border-radius: 5cqw; z-index: 6; }
.iph-home { position: absolute; bottom: 2.4cqw; left: 50%; width: 33cqw; height: 1.5cqw; margin-left: -16.5cqw; border-radius: 1cqw; background: currentColor; opacity: 0.85; z-index: 6; color: #111; }
.iph-body .bt { position: absolute; width: 0.8cqw; background: #4a4c52; }
.iph-body .bt.a { left: -0.7cqw; top: 15%; height: 3.2%; border-radius: 0.5cqw 0 0 0.5cqw; }
.iph-body .bt.v1 { left: -0.7cqw; top: 21%; height: 6%; border-radius: 0.5cqw 0 0 0.5cqw; }
.iph-body .bt.v2 { left: -0.7cqw; top: 29%; height: 6%; border-radius: 0.5cqw 0 0 0.5cqw; }
.iph-body .bt.pw { right: -0.7cqw; top: 25%; height: 9.5%; border-radius: 0 0.5cqw 0.5cqw 0; }
.p-status { height: 13.5cqw; display: flex; justify-content: space-between; align-items: center; padding: 1.5cqw 8.5cqw 0 9.5cqw; flex: none; color: inherit; }
.p-status .tm { font: 600 4.3cqw system-ui, -apple-system, "SF Pro Text", "Segoe UI", sans-serif; }
.sb-ic { width: 19cqw; height: auto; display: block; }
.pclip { position: absolute; right: -1.5%; bottom: 0; width: 21%; height: 30cqw; overflow: hidden; }
.pclip .iph { max-width: none; }
/* mini screen on the overlapping phone, sized in phone-width units */
.ms { height: 100%; padding: 0 6cqw; background: var(--ms-bg, #fbf8f3); color: var(--ms-ink, #1d1b18); font-family: var(--sans); font-stretch: 100%; }
.ms .p-status { padding: 1.5cqw 3cqw 0 4cqw; }
.ms .top { display: flex; justify-content: space-between; align-items: center; font-size: 4.2cqw; font-weight: 700; margin: 2cqw 0 5cqw; letter-spacing: 0.5cqw; }
.ms .tile { height: 62cqw; border-radius: 5cqw; background: var(--ms-tile, #e8dfd0); display: grid; place-items: center; }
.ms .tile .pimg { width: 74%; height: 92%; }
.ms .nm { display: block; font-size: 5.6cqw; font-weight: 700; margin: 4cqw 0 1cqw; line-height: 1.15; }
.ms .pr { font-size: 5.4cqw; font-weight: 700; }
.ms .st { font-size: 4cqw; color: #6c6150; margin: 1.4cqw 0 3.4cqw; }
.ms .go { background: var(--ms-btn, #1d1b18); color: var(--ms-btn-ink, #fff); font-size: 4.4cqw; font-weight: 700; text-align: center; padding: 3.4cqw; border-radius: 9cqw; margin-top: 3cqw; }

/* ---------- interactive Maren flow ---------- */
.pscr { position: relative; }
.p-prog i u { display: block; height: 100%; width: 98%; background: #1d1b18; border-radius: 2cqw; transition: width 0.3s ease; text-decoration: none; }
button.p-btn { display: block; width: calc(100% - 0px); border: 0; font-family: inherit; cursor: pointer; }
.p-pad button.p-btn { width: 100%; }
.p-foot button.p-btn + button.p-btn { margin-top: 2cqw; }
.p-line .q button { all: unset; cursor: pointer; padding: 0 1.4cqw; line-height: 1.2; border-radius: 1cqw; }
.p-line .q button:hover { background: #ece4d4; }
.p-line .q button:focus-visible, button.p-btn:focus-visible, label.p-opt:has(input:focus-visible) { outline: 0.8cqw solid #1f3bff; outline-offset: 0.6cqw; }
.p-line.gone { opacity: 0.35; }
label.p-opt { cursor: pointer; }
.vh { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.p-done { position: absolute; inset: 0; background: #fbf8f3; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3.4cqw; padding: 10cqw; text-align: center; }
.p-done[hidden] { display: none; }
.p-done .ck { width: 22cqw; height: 22cqw; border-radius: 50%; background: #d8ff3d; position: relative; }
.p-done .ck::after { content: ""; position: absolute; left: 7.6cqw; top: 3.6cqw; width: 6cqw; height: 11.4cqw; border: solid #111; border-width: 0 1.7cqw 1.7cqw 0; transform: rotate(45deg); }
.p-done .dn { font-family: var(--serif); font-size: 8cqw; }
.p-done p { font-size: 3.6cqw; color: #665b49; margin: 0 0 2cqw; max-width: 60cqw; }
.pcase.pulse .iph-body { animation: devpulse 0.9s ease; }
@keyframes devpulse { 40% { transform: scale(1.035); } }
@media (prefers-reduced-motion: reduce) { .pcase.pulse .iph-body { animation: none; } .p-prog i u { transition: none; } }