/* So'rah case study · Step 10 · The product
   Look taken from the case presentation (J0BOMDGJAoWS1368EwyjaR · 0:3111, sections 10–15):
   floating white UI cards with soft blue-grey shadows (#BCC8E0), pale green #EBF2EB / #D6FFC3 pills, the #159E17
   island panel, the frosted closing card. Pinned scenes get .is-pinned from ch-product.js (wide + tall screens,
   no reduced motion); everything else is a plain stacked layout. */

/* ---------- shared: browser frame (restaurant web app) ---------- */
.pr-browser { position: relative; border-radius: clamp(10px, calc(18 * var(--fx)), 18px); overflow: hidden; background: #fff; box-shadow: 0 40px 80px -40px rgba(7,30,4,.45), 0 0 0 1px rgba(24,24,24,.06); }
.pr-browser__bar { display: flex; align-items: center; gap: 7px; height: clamp(26px, calc(40 * var(--fx)), 40px); padding-inline: 14px; background: #F1F2F1; color: var(--s-grey); }
.pr-browser__bar > i { width: 10px; height: 10px; border-radius: 50%; background: #D5D8D5; flex: none; }
.pr-browser__t { margin-left: 10px; font: 600 var(--t-micro)/1 var(--font); color: var(--s-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-browser > img { width: 100%; height: auto; }

/* ---------- 0 · hero ---------- */
.pr-hero .ch-hero__title { max-width: 9ch; }
.pr-hero__media { aspect-ratio: 1.22; max-width: 860px; }
.ch-hero__media.pr-hero__media img { filter: none; }
.pr-hero__browser { position: absolute; right: 0; top: 6%; width: 84%; transform: rotate(1.5deg); box-shadow: 0 50px 90px -40px rgba(0,0,0,.75); }
.pr-hero__phone { position: absolute; left: 1%; bottom: 0; width: 30%; transform: rotate(-5deg); box-shadow: 0 0 0 clamp(4px, .45vw, 8px) #111, 0 40px 80px -24px rgba(0,0,0,.7); }
.pr-hero__tag { position: absolute; z-index: 3; }
.pr-hero__tag--a { left: 24%; top: 34%; }
.pr-hero__tag--b { right: 4%; top: -2%; }
.pr-hero .ch-hero__lead b { color: #fff; }
@media (max-width: 900px) { .pr-hero__media { margin-top: var(--s-5); } .pr-hero__tag--b { right: 34%; top: -4%; } }

/* ---------- 1 · This is what we got ---------- */
.got { padding-block: var(--s-7) var(--s-6); }
.got__pin { position: relative; }
.got__glow { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.got__glow i { position: absolute; width: 34%; aspect-ratio: 1; border-radius: 50%; filter: blur(clamp(50px, 7vw, 120px)); opacity: .22; }
.got__glow i:nth-child(1) { left: 6%; top: 8%; background: #159E17; }
.got__glow i:nth-child(2) { right: 4%; top: 2%; background: #24E2E6; }
.got__glow i:nth-child(3) { left: 34%; top: 26%; background: #DEA970; opacity: .18; }
.got__glow i:nth-child(4) { right: 22%; top: 34%; background: #ED6F9C; opacity: .14; }
.got__title { position: relative; z-index: 3; text-align: center; padding-inline: var(--gutter); font: 300 var(--t-display)/1 var(--font); letter-spacing: -.035em; }
.got__title em.g { font-weight: 600; }
.got__emo { font-style: normal; letter-spacing: 0; }
.got__scene { position: relative; z-index: 1; width: min(100% - 2 * var(--edge), 1560px); aspect-ratio: 1.7; margin: var(--s-4) auto 0; container-type: inline-size; }
.got__floor { position: absolute; left: 0; right: 0; bottom: 0; height: 36%; border-radius: var(--r-panel); background: #EBF2EB; }
.got__phones { position: absolute; left: 50%; top: 55%; width: 74%; translate: -50% -50%; z-index: 1; }
.got__phones img { width: 100%; height: auto; }
.got__tag { position: absolute; z-index: 4; }
.got__tag--a { left: 27%; top: 55%; }
.got__tag--b { left: 47%; top: 49%; }
.got__tag--c { left: 64%; top: 26%; }
.got__card { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); translate: -50% -50%; rotate: var(--r); z-index: 2; }
.got__fly { will-change: transform, opacity, filter; }
.got__par { transition: transform .9s var(--ease); }
.got__float { animation: got-bob 7s var(--ease-io) infinite alternate; animation-delay: calc(var(--i) * -.9s); }
.got__card img { width: 100%; height: auto; filter: drop-shadow(0 1.6cqw 1.8cqw rgba(140,160,205,.42)); }
@keyframes got-bob { from { transform: translateY(-.5cqw); } to { transform: translateY(.6cqw); } }
.got__cap { position: relative; z-index: 3; text-align: center; margin-top: var(--s-4); padding-inline: var(--gutter); }
/* pinned: the whole scene fits one screen */
.got.is-pinned { height: 100svh; padding: 0; }
.got.is-pinned .got__pin { height: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--bar-h) * .6); }
.got.is-pinned .got__title { font-size: min(var(--t-display), 8.4svh); }
.got.is-pinned .got__scene { width: min(100% - 2 * var(--edge), 1600px, (100svh - var(--bar-h) * .6 - 19svh) * 1.7); margin-top: 1svh; }
.got.is-pinned .got__cap { margin-top: 1.4svh; }
@media (max-width: 900px) {
  .got__scene { aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; padding-inline: var(--s-2); width: 100%; }
  .got__floor, .got__tag { display: none; }
  .got__phones { position: relative; left: auto; top: auto; translate: none; width: 116%; margin-left: -8%; grid-column: 1 / -1; }
  .got__card { position: relative; left: auto; top: auto; translate: none; rotate: none; width: auto; }
  .got__card img { filter: drop-shadow(0 10px 16px rgba(140,160,205,.4)); }
}

/* ---------- 2 · Personalized Homepage ---------- */
.hm { padding-block: var(--s-5); }
.hm__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: var(--gap); align-items: stretch; padding-inline: var(--s-4); }
.hm__dev { position: relative; border-radius: var(--r-panel); background: #EBF2EB; padding: var(--s-6) var(--s-5) var(--s-5); display: grid; justify-items: center; align-content: start; gap: var(--s-5); overflow: hidden; }
.hm__pill { justify-self: start; display: inline-flex; align-items: center; padding: .7em 1.6em; border-radius: 999px; background: #D6FFC3; font: 700 clamp(17px, calc(28 * var(--fx)), 28px)/1 var(--font); color: var(--s-ink); }
.hm__phone { width: min(84%, 400px); }
.hm__screen { position: relative; }
.hm__screen img { width: 100%; height: auto; }
.hm__spot { position: absolute; border-radius: 12px; pointer-events: none; opacity: 0; transition: opacity .45s var(--ease), box-shadow .45s var(--ease); box-shadow: 0 0 0 0 rgba(7,30,4,0); }
.hm__spot.is-on { opacity: 1; box-shadow: inset 0 0 0 3px var(--s-lime), 0 0 26px 4px rgba(141,219,29,.55), 0 0 0 200vmax rgba(7,30,4,.38); }
.hm__ptr { position: absolute; z-index: 3; pointer-events: none; opacity: 0; transform: translate(-6px, 8px) scale(.9); transition: opacity .35s, transform .5s var(--ease-back), left .5s var(--ease), top .5s var(--ease); }
.hm__ptr.is-on { opacity: 1; transform: none; }
.hm__ptr .ptr__label { font-size: clamp(11px, calc(15 * var(--fx)), 15px); white-space: normal; max-width: 15em; line-height: 1.2; }
.hm__col { display: grid; gap: var(--gap); align-content: stretch; }
.hm__copy, .hm__chat { border-radius: var(--r-panel); background: #F9F9F9; padding: var(--s-6) var(--s-6); }
.hm__tags .chip { background: #F0F0F0; box-shadow: inset 0 0 0 1.5px transparent; }
.hm__tags .chip:hover { box-shadow: inset 0 0 0 1.5px var(--s-ink); }
.hm__tags .chip[aria-pressed="true"] { background: var(--s-night); color: #fff; box-shadow: 0 0 0 4px rgba(141,219,29,.45); }
.hm__title { margin-top: var(--s-5); font: 700 var(--t-h3)/1.15 var(--font); letter-spacing: -.012em; }
.hm__body { margin-top: var(--s-3); font-size: var(--t-body); line-height: 1.5; color: #909090; max-width: 56ch; }
.hm__chat .sec-num { margin-bottom: var(--s-4); }
.chat { display: grid; gap: var(--s-3); }
.chat__b { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--s-3); width: 100%; text-align: left; border-radius: 22px; padding: 6px; transition: background .3s, box-shadow .3s; }
.chat__b:hover { box-shadow: inset 0 0 0 1.5px var(--line); }
.chat__b[aria-pressed="true"] { background: #fff; box-shadow: inset 0 0 0 1.5px var(--s-green), 0 14px 30px -18px rgba(21,158,23,.6); }
.chat__av { width: clamp(46px, calc(76 * var(--fx)), 76px); height: auto; flex: none; }
.chat__bubble { position: relative; display: block; padding: .85em 1.15em; border-radius: 20px 20px 20px 6px; background: #fff; box-shadow: 0 10px 24px -18px rgba(7,30,4,.4); }
.chat__bubble q { display: block; quotes: none; font: italic 500 clamp(16px, calc(26 * var(--fx)), 26px)/1.3 var(--font); color: var(--s-ink); }
.chat__typing { display: none; gap: 5px; padding: .3em 0; }
.chat__typing i { width: 8px; height: 8px; border-radius: 50%; background: #B9C6B9; animation: chat-dot 1s ease-in-out infinite; }
.chat__typing i:nth-child(2) { animation-delay: .15s; } .chat__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-4px); opacity: 1; } }
/* JS arms the chat: bubbles wait, then "type" in one by one */
.chat.is-armed .chat__m { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.chat.is-armed .chat__m.is-typing, .chat.is-armed .chat__m.is-said { opacity: 1; transform: none; }
.chat.is-armed .chat__m.is-typing .chat__typing { display: flex; }
.chat.is-armed .chat__m.is-typing q { display: none; }
.hm__hint { margin-top: var(--s-4); }
@media (max-width: 900px) {
  .hm__grid { grid-template-columns: 1fr; padding-inline: 0; }
  .hm__copy, .hm__chat { padding: var(--s-5) var(--s-4); }
  .hm__phone { width: min(78%, 340px); }
}

/* ---------- 3 · Dynamic Island ---------- */
.isl-sec { padding-block: var(--s-6); }
.isl-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: var(--gap); padding-inline: var(--s-4); }
.isl-copy { display: grid; gap: var(--gap); align-content: start; }
.isl-copy__t, .isl-copy__q, .isl-st { border-radius: var(--r-panel); background: #F9F9F9; padding: var(--s-5) var(--s-6); }
.isl-copy .chips .chip { background: #F0F0F0; }
.isl-copy__title { margin-top: var(--s-4); font: 700 var(--t-h3)/1.15 var(--font); }
.isl-copy__body { margin-top: var(--s-3); color: #909090; line-height: 1.5; max-width: 54ch; }
.isl-copy__q { display: grid; gap: var(--s-3); }
.isl-q p { font: italic 500 clamp(16px, calc(26 * var(--fx)), 26px)/1.3 var(--font); }
.isl-q .quote__av { background-color: #E6FFC4; }
.isl-st { padding-block: var(--s-4); }
.isl-st__pin { display: none; }
.isl-sec.is-pinned .isl-st__pin { display: inline; }
.isl-st__row { margin-top: var(--s-3); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.isl-st__b { display: grid; justify-items: start; gap: 8px; padding: .8em .9em; border-radius: 14px; text-align: left; font: 600 var(--t-micro)/1.2 var(--font); box-shadow: inset 0 0 0 1.5px var(--line); transition: background .3s, color .3s, box-shadow .3s; }
.isl-st__b:hover { box-shadow: inset 0 0 0 1.5px var(--s-ink); }
.isl-st__b i { width: 12px; height: 12px; border-radius: 50%; background: #C9C9C9; transition: background .3s, box-shadow .3s; }
.isl-st__b.is-done i { background: var(--s-green); }
.isl-st__b[aria-pressed="true"] { background: var(--s-night); color: #fff; box-shadow: none; }
.isl-st__b[aria-pressed="true"] i { background: var(--s-lime); box-shadow: 0 0 0 4px rgba(141,219,29,.35); }

.isl-stage { position: relative; border-radius: var(--r-panel); background: #159E17; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; padding: var(--s-5) var(--s-5) 0; min-height: clamp(520px, 48vw, 800px); }
.isl-pill { justify-self: start; display: inline-flex; align-items: center; gap: .6em; padding: .65em 1.4em .65em 1em; border-radius: 999px; background: #D6FFC3; color: var(--s-ink); font: 700 clamp(16px, calc(28 * var(--fx)), 28px)/1 var(--font); }
.isl-pill svg { width: 1.6em; height: 1.6em; }
.isl-dev { container-type: inline-size; width: min(80%, 640px); margin: auto auto 0; padding-top: var(--s-5); align-self: center; }
.isl-dev__body { padding: 3.4cqw 3.4cqw 0; border-radius: 16cqw 16cqw 0 0; background: linear-gradient(180deg, #4A4157, #1E1A24 40%); box-shadow: inset 0 0 0 .55cqw #6B6079, 0 -2cqw 8cqw -3cqw rgba(0,0,0,.35); }
.isl-dev__screen { position: relative; aspect-ratio: 1 / .9; border-radius: 13cqw 13cqw 0 0; overflow: hidden; container-type: inline-size;
  background: linear-gradient(180deg, #F8B6F3 0%, #EE93EC 4%, #B45BDD 20%, #5A20A6 40%, #200A57 60%, #08031A 80%, #000 100%); }
.isl { position: absolute; left: 50%; top: 3cqw; translate: -50% 0; width: 34cqw; height: 10cqw; border-radius: 6cqw; background: #000; color: #fff; overflow: hidden; text-align: left; cursor: pointer;
  transition: width .7s var(--ease-back), height .7s var(--ease-back), border-radius .7s var(--ease), box-shadow .4s; box-shadow: 0 1.4cqw 3cqw -1cqw rgba(0,0,0,.6); }
.isl.is-open { width: 94cqw; height: 61cqw; border-radius: 8.5cqw; }
.isl:focus-visible { outline: 3px solid var(--s-lime); outline-offset: 4px; }
.isl__cam { position: absolute; left: 60%; top: 2.6cqw; width: 4.2cqw; height: 4.2cqw; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #2A4C9A 0 18%, #0B1430 32%, #050608 62%); z-index: 2; transition: left .7s var(--ease-back), top .7s var(--ease-back); }
.isl:not(.is-open) .isl__cam { left: 82%; top: 2.9cqw; }
.isl__ico { display: inline-grid; place-items: center; color: #17B21A; flex: none; }
.isl__ico svg { width: 100%; height: 100%; }
.isl__compact { position: absolute; inset: 0; display: flex; align-items: center; gap: 2cqw; padding: 0 3cqw; opacity: 0; transition: opacity .25s; }
.isl__compact .isl__ico { width: 5.2cqw; height: 5.2cqw; }
.isl__cstate { font: 600 2.7cqw/1 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18cqw; }
.isl:not(.is-open) .isl__compact { opacity: 1; transition-delay: .25s; }
.isl__full { position: absolute; left: 0; top: 0; width: 94cqw; height: 61cqw; padding: 9.5cqw 6.4cqw 5cqw; display: grid; grid-template-rows: auto auto 1fr; opacity: 0; transform: scale(.92); transform-origin: 50% 0; transition: opacity .25s, transform .5s var(--ease); }
.isl.is-open .isl__full { opacity: 1; transform: none; transition-delay: .22s; }
.isl__top { display: flex; align-items: center; gap: 2.4cqw; }
.isl__top .isl__ico { width: 7.2cqw; height: 7.2cqw; }
.isl__dish { display: grid; gap: .4cqw; flex: 1; min-width: 0; }
.isl__dish small { font: 400 2.75cqw/1 var(--font); color: #8E8E93; }
.isl__dish b { font: 600 3.4cqw/1.05 var(--font); }
.isl__price { font: 600 4.5cqw/1 var(--font); letter-spacing: -.01em; }
.isl__track { position: relative; margin-top: 6.4cqw; }
.isl__line { position: absolute; left: 12.5%; right: 12.5%; top: 1.1cqw; height: .9cqw; border-radius: 1cqw; background: #4A4A4A; }
.isl__line i { position: absolute; inset: 0 auto 0 0; width: calc(var(--s, 0) / 3 * 100%); border-radius: inherit; background: #fff; transition: width .8s var(--ease); }
.isl__dots { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; }
.isl__dots i { width: 3.1cqw; height: 3.1cqw; border-radius: 50%; background: #5A5A5A; transition: background .4s, transform .5s var(--ease-back), box-shadow .4s; }
.isl__labels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 2.2cqw; text-align: center; font: 400 2.65cqw/1.1 var(--font); color: #8E8E93; }
.isl__labels span { transition: color .4s; }
.isl__eta { display: flex; align-items: center; gap: 2.8cqw; align-self: end; }
.isl__av { width: 12.4cqw; height: 12.4cqw; border-radius: 50%; object-fit: cover; background: #222; flex: none; }
.isl__who { display: grid; gap: .8cqw; flex: 1; }
.isl__who small { font: 400 2.7cqw/1 var(--font); }
.isl__who b { font: 600 5cqw/1 var(--font-mono); color: #17A31A; letter-spacing: -.02em; }
.isl__msg, .isl__call { display: grid; place-items: center; width: 12.4cqw; height: 12.4cqw; border-radius: 50%; flex: none; }
.isl__msg { box-shadow: inset 0 0 0 .4cqw #3A3A3A; color: #17A31A; }
.isl__call { background: #17A31A; color: #0b0b0b; }
.isl__msg svg, .isl__call svg { width: 5.4cqw; height: 5.4cqw; }
/* state classes (set by JS on the island: s0…s3) */
.isl[data-s="0"] .isl__dots i:nth-child(-n+1), .isl[data-s="1"] .isl__dots i:nth-child(-n+2), .isl[data-s="2"] .isl__dots i:nth-child(-n+3), .isl[data-s="3"] .isl__dots i:nth-child(-n+4) { background: #fff; }
.isl[data-s="0"] .isl__dots i:nth-child(1), .isl[data-s="1"] .isl__dots i:nth-child(2), .isl[data-s="2"] .isl__dots i:nth-child(3), .isl[data-s="3"] .isl__dots i:nth-child(4) { transform: scale(1.18); box-shadow: 0 0 0 1cqw rgba(255,255,255,.14); }
.isl[data-s="0"] .isl__labels span:nth-child(-n+1), .isl[data-s="1"] .isl__labels span:nth-child(-n+2), .isl[data-s="2"] .isl__labels span:nth-child(-n+3), .isl[data-s="3"] .isl__labels span:nth-child(-n+4) { color: #fff; }
.isl-orig { position: relative; border-radius: var(--r-panel); background: #F9F9F9; padding: var(--s-4) var(--s-5); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); min-height: 0; overflow: hidden; }
.isl-orig img { width: 100%; max-width: 340px; height: auto; border-radius: 14px; transform: rotate(-2deg); transition: transform .5s var(--ease); }
.isl-orig:hover img { transform: rotate(0) scale(1.02); }
.isl-orig figcaption { display: grid; gap: 10px; justify-items: start; max-width: 16ch; }
.isl-orig figcaption .ptr { margin-left: -6px; }
/* pinned */
.isl-sec.is-pinned { height: 100svh; padding: calc(var(--bar-h) * .55) 0 var(--s-3); }
.isl-sec.is-pinned .isl-grid { height: 100%; }
.isl-sec.is-pinned .isl-copy { grid-template-rows: auto auto auto minmax(0, 1fr); min-height: 0; }
.isl-sec.is-pinned .isl-orig { display: block; }
.isl-sec.is-pinned .isl-orig img { position: absolute; left: var(--s-5); top: 12px; width: auto; height: calc(100% - 24px); max-width: 58%; object-fit: contain; object-position: left center; transform: none; }
.isl-sec.is-pinned .isl-orig figcaption { position: absolute; right: var(--s-5); top: 50%; translate: 0 -50%; }
.isl-sec.is-pinned .isl-copy__t, .isl-sec.is-pinned .isl-copy__q, .isl-sec.is-pinned .isl-st { padding: max(14px, 2.6svh) var(--s-5); }

.isl-sec.is-pinned .isl-stage { min-height: 0; height: 100%; }
.isl-sec.is-pinned .isl-dev { width: min(94%, 820px, 84svh); }
@media (max-width: 900px) {
  .isl-grid { grid-template-columns: 1fr; padding-inline: 0; }
  .isl-copy__t, .isl-copy__q, .isl-st { padding: var(--s-4); }
  .isl-stage { min-height: 0; padding: var(--s-4) var(--s-3) 0; }
  .isl-dev { width: min(94%, 520px); }
  .isl-orig { padding: var(--s-4); }
  .isl-st__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 4 · UI components marquee ---------- */
.mq-sec { padding-bottom: var(--s-6); }
.mq-hd { margin-bottom: var(--s-5); }
.mq { --mq-g: clamp(14px, calc(30 * var(--fx)), 30px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--mq-g); height: min(96svh, 1080px); overflow: hidden; padding-inline: var(--s-3);
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
.mq__col { min-width: 0; }
.mq__track { display: grid; gap: var(--mq-g); animation: mq-up var(--dur, 40s) linear infinite; will-change: transform; }
.mq__col--down .mq__track { animation-direction: reverse; }
.mq__dup { display: contents; }
.mq:hover .mq__track, .mq:focus-within .mq__track { animation-play-state: paused; }
@keyframes mq-up { from { transform: translateY(0); } to { transform: translateY(calc((100% + var(--mq-g)) / -3)); } }
.mq__card img { width: 100%; height: auto; filter: drop-shadow(0 22px 26px rgba(188,200,224,.55)); transition: transform .5s var(--ease); }
.mq__card:hover img { transform: translateY(-4px) scale(1.02); }
.mq__card[data-mq-clone] img { cursor: zoom-in; }
.mq.is-static { height: auto; -webkit-mask: none; mask: none; }
.mq.is-static .mq__track { animation: none; }
.mq.is-static .mq__dup { display: none; }
@media (max-width: 900px) { .mq { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 64svh; height: auto; -webkit-mask: none; mask: none; } .mq__col { overflow: hidden; -webkit-mask: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); } }
@media (max-width: 560px) { .mq { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 70svh; } }

/* ---------- 5 · SO’RA App ---------- */
.sora { padding-block: var(--s-6); }
.sora__stage { position: relative; width: min(100%, 1500px); margin-inline: auto; aspect-ratio: 1600 / 1000; }
.sora__glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sora__glow i { position: absolute; border-radius: 50%; filter: blur(clamp(40px, 6vw, 110px)); }
.sora__glow i:nth-child(1) { width: 44%; aspect-ratio: 1; right: -8%; bottom: -18%; background: #3FD9D9; opacity: .55; }
.sora__glow i:nth-child(2) { width: 30%; aspect-ratio: 1; right: 22%; bottom: -24%; background: #8DDB1D; opacity: .35; }
.sora__glow i:nth-child(3) { width: 28%; aspect-ratio: 1; right: -12%; bottom: -10%; background: #E9A271; opacity: .3; }
.sora__wm { position: absolute; left: 10.3%; top: 9%; width: 77%; height: auto; z-index: 1; }
.sora__app { position: absolute; left: 9.6%; top: 47%; width: 52%; height: auto; z-index: 1; overflow: visible; }
.sora__app text { font: 700 400px var(--font); letter-spacing: -.01em; fill: none; stroke: #159E17; stroke-opacity: .5; stroke-width: 7; stroke-dasharray: 2600; stroke-dashoffset: var(--draw, 0); }
.sora__bowl { position: absolute; left: 20.5%; top: 25%; width: 31%; height: auto; z-index: 2; filter: drop-shadow(0 30px 40px rgba(0,0,0,.18)) drop-shadow(0 8px 12px rgba(0,0,0,.12)); will-change: transform; }

/* ---------- 6 · Tap through the app ---------- */
.app { padding-bottom: var(--s-7); }
.app .hd__aside { color: rgba(255,255,255,.72); }
.app .hd__title b { color: #fff; }
.pg { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); align-items: center; }
.pg__tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.pg__tab { display: inline-flex; align-items: center; gap: .55em; padding: .7em 1.1em; border-radius: 999px; font: 600 var(--t-small)/1 var(--font); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28); transition: background .25s, color .25s, box-shadow .25s, transform .35s var(--ease); }
.pg__tab small { font: 500 var(--t-micro)/1 var(--font-mono); opacity: .7; }
.pg__tab:hover { box-shadow: inset 0 0 0 1.5px #fff; transform: translateY(-2px); }
.pg__tab[aria-selected="true"] { background: var(--s-lime); color: var(--s-night); box-shadow: none; }
.pg__now { margin-top: var(--s-6); max-width: 34rem; }
.pg__count { font-size: var(--t-small); color: var(--s-lime); }
.pg__title { margin-top: var(--s-2); min-height: 2.5em; font: 300 var(--t-h3)/1.2 var(--font); letter-spacing: -.015em; color: #fff; }
.pg__note { margin-top: var(--s-3); display: grid; justify-items: start; gap: 10px; max-width: 46ch; font-size: var(--t-small); line-height: 1.45; color: rgba(255,255,255,.82); }
.pg__note .ptr { margin-left: -6px; }
.pg__nav { display: flex; gap: 10px; margin-top: var(--s-4); }
.pg__nav .ctrl { display: inline-flex; align-items: center; gap: .6em; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); font: 600 var(--t-small)/1 var(--font); padding: .85em 1.2em; }
.pg__nav .ctrl:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.pg__nav svg { width: 1.1em; }
.pg__keys { margin-top: var(--s-3); color: rgba(255,255,255,.55); }
.pg__device { justify-self: end; }
.pg__phone { position: relative; width: clamp(240px, min(26vw, (100svh - var(--bar-h) - 70px) * .4614), 380px); aspect-ratio: 430 / 932; background: #fff; box-shadow: 0 0 0 clamp(5px, .5vw, 9px) #171717, 0 0 0 calc(clamp(5px, .5vw, 9px) + 1.5px) rgba(255,255,255,.22), 0 40px 90px -30px rgba(0,0,0,.8); }
.pg__device { position: relative; }
.pg__device::before { content: ""; position: absolute; inset: -12% -30%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(141,219,29,.35), rgba(21,158,23,.12) 55%, transparent); pointer-events: none; }
.pg__screen { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; }
.pg__screen::-webkit-scrollbar { display: none; }
.pg__screen img { width: 100%; height: auto; transition: opacity .25s var(--ease), transform .45s var(--ease); }
.pg__screen img.is-out { opacity: 0; transform: translateX(var(--dir, 18px)); }
.pg__zone { position: absolute; top: 0; bottom: 0; width: 26%; z-index: 2; background: transparent; }
.pg__zone--prev { left: 0; } .pg__zone--next { right: 0; }
.pg__zone:hover { background: linear-gradient(90deg, rgba(7,30,4,.08), transparent); }
.pg__zone--next:hover { background: linear-gradient(270deg, rgba(7,30,4,.08), transparent); }
.pg__long { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; z-index: 3; padding: .45em .8em; border-radius: 999px; background: rgba(7,30,4,.82); color: #fff; font: 600 11px/1 var(--font); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .3s; }
.pg__long.is-on { opacity: 1; }
.pg-all { margin-top: var(--s-7); }
.pg-flow { margin-top: var(--s-5); }
.pg-flow__h { display: flex; align-items: baseline; gap: .6em; flex-wrap: wrap; font: 600 var(--t-h4)/1.2 var(--font); color: #fff; margin-bottom: var(--s-3); }
.pg-flow__h span { font-weight: 400; color: rgba(255,255,255,.7); }
.pg-flow__h small { font: 500 var(--t-micro)/1 var(--font-mono); color: var(--s-lime); }
.pg-flow.is-current .pg-flow__h::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--s-lime); align-self: center; box-shadow: 0 0 0 4px rgba(141,219,29,.25); }
.pg-rail { gap: clamp(10px, calc(18 * var(--fx)), 18px); }
.pg-t { width: clamp(124px, calc(176 * var(--fx)), 176px); display: grid; gap: 8px; align-content: start; }
.pg-t__b { display: block; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1.5px transparent; transition: transform .4s var(--ease), box-shadow .3s; }
.pg-t__b img { width: 100%; height: auto; aspect-ratio: 360 / 780; object-fit: cover; object-position: top; }
.pg-t__b:hover { transform: translateY(-4px); box-shadow: 0 0 0 1.5px rgba(255,255,255,.6); }
.pg-t__b[aria-current="true"] { box-shadow: 0 0 0 3px var(--s-lime), 0 16px 30px -16px rgba(141,219,29,.7); }
.pg-t__cap { font: 400 12px/1.35 var(--font); color: rgba(255,255,255,.72); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pg-t__cap small { display: block; font: 600 11px/1.3 var(--font-mono); color: var(--s-lime); }
.pg-t__ph { aspect-ratio: 360 / 780; border-radius: 16px; background: rgba(255,255,255,.07); padding: 14px; display: grid; align-content: center; gap: 8px; color: #fff; text-align: center; }
.pg-t__ph b { font: 600 var(--t-small)/1.2 var(--font); }
.pg-t__ph small { font-size: 11.5px; line-height: 1.4; color: rgba(255,255,255,.66); }
@media (max-width: 900px) {
  .pg { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .pg__device { justify-self: center; order: -1; }
  .pg__phone { width: min(66vw, 300px); }
  .pg__now { margin-top: var(--s-4); }
  .pg__tabs { flex-wrap: nowrap; overflow-x: auto; padding: 3px; margin-inline: -3px; scrollbar-width: none; }
  .pg__tab { flex: none; }
  .pg__title { min-height: 0; }
}

/* ---------- 7 · Restaurant app · dashboard tour ---------- */
.dt__bar { display: grid; gap: 12px; margin-bottom: var(--s-4); }
.dt__tabs, .dt__subs { display: flex; flex-wrap: wrap; gap: 8px; }
.dt__tab { display: inline-flex; align-items: center; gap: .5em; padding: .7em 1.05em; border-radius: 12px; font: 600 var(--t-small)/1 var(--font); color: var(--s-ink); box-shadow: inset 0 0 0 1.5px var(--line); background: #fff; transition: background .25s, color .25s, box-shadow .25s; }
.dt__tab small { font: 500 var(--t-micro)/1 var(--font-mono); color: var(--s-grey); }
.dt__tab:hover { box-shadow: inset 0 0 0 1.5px var(--s-ink); }
.dt__tab[aria-selected="true"] { background: #E3F8DA; color: var(--s-forest); box-shadow: inset 0 0 0 1.5px var(--s-green); }
.dt__tab[aria-selected="true"] small { color: var(--s-forest); }
.dt__subs:empty { display: none; }
.dt__subs button { padding: .5em .9em; border-radius: 999px; font: 500 var(--t-micro)/1 var(--font); box-shadow: inset 0 0 0 1.5px var(--line); }
.dt__subs button:hover { box-shadow: inset 0 0 0 1.5px var(--s-ink); }
.dt__subs button[aria-pressed="true"] { background: var(--s-ink); color: #fff; box-shadow: none; }
.dt__main { display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 22vw, 340px); gap: var(--s-4); align-items: start; }
.dt__view { aspect-ratio: 1440 / 1027; overflow-y: auto; overscroll-behavior: contain; background: #fff; scrollbar-width: thin; }
.dt__view img { width: 100%; height: auto; transition: opacity .25s; }
.dt__view img.is-out { opacity: 0; }
.dt__aside { display: grid; gap: var(--s-3); }
.dt__flowline { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dt__flowline svg { width: 18px; color: var(--s-green); }
.dt__note { position: relative; padding: var(--s-4); border-radius: 6px 6px 22px 6px; background: #FFC470; color: #3A2400; transform: rotate(-1.5deg); box-shadow: 0 18px 30px -20px rgba(120,70,0,.6); }
.dt__note .t-eyebrow { color: #7A4A00; margin-bottom: 8px; }
.dt__note p:last-of-type { font-size: var(--t-small); line-height: 1.45; }
.dt__note-by { position: absolute; right: 8px; bottom: -22px; }
.dt__all { margin-top: var(--s-6); }
.dt-rail { gap: var(--s-3); }
.dt-t { width: clamp(220px, calc(300 * var(--fx)), 300px); display: grid; gap: 8px; }
.dt-t__b { display: block; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 14px 30px -22px rgba(7,30,4,.5); transition: transform .4s var(--ease), box-shadow .3s; }
.dt-t__b img { width: 100%; aspect-ratio: 1440 / 1027; height: auto; object-fit: cover; object-position: top left; }
.dt-t__b:hover { transform: translateY(-4px); }
.dt-t__b[aria-current="true"] { box-shadow: 0 0 0 3px var(--s-green), 0 14px 30px -22px rgba(7,30,4,.5); }
.dt-t__cap { font: 500 var(--t-micro)/1.3 var(--font); }
.dt-t__cap small { display: block; font: 600 11px/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--s-grey); }
@media (max-width: 1000px) { .dt__main { grid-template-columns: 1fr; } .dt__aside { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .dt__aside { grid-template-columns: 1fr; } .dt__note { margin-bottom: 18px; } }

/* ---------- 8 · Order scenarios ---------- */
.sc__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s-3) var(--s-6); margin-bottom: var(--s-6); }
.sc__title { font: 300 var(--t-h1)/1.04 var(--font); letter-spacing: -.028em; max-width: 16ch; }
.sc__title b { font-weight: 700; }
.sc__aside { max-width: 46ch; }
.sc__pinhint { display: none; }
.sc.is-pinned .sc__pinhint { display: inline; }
.sc__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.sc__list { display: grid; gap: var(--s-6); }
.sc__name { display: flex; align-items: center; gap: .6em; font: 600 var(--t-h4)/1.2 var(--font); margin-bottom: var(--s-3); }
.sc__name i { width: 14px; height: 14px; border-radius: 4px; background: var(--sc); box-shadow: inset 0 0 0 1px rgba(24,24,24,.18); flex: none; }
.sc__name small { font: 500 var(--t-micro)/1 var(--font-mono); color: var(--s-grey); }
.sc__steps { display: grid; gap: var(--s-4); }
.sc__b { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 16px; background: #fff; transition: background .25s, box-shadow .25s; }
.sc__b:hover { box-shadow: inset 0 0 0 1.5px var(--line); }
.sc__n { font-size: var(--t-micro); color: var(--s-green); padding-top: .2em; }
.sc__t { font-size: var(--t-small); line-height: 1.45; color: var(--s-ink); }
.sc__t b { font-weight: 600; }
.sc__muted { color: var(--s-grey); font-size: .92em; }
.sc__act { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: .4em; margin-top: 4px; padding: .38em .75em; border-radius: 999px; background: #E3F8DA; color: var(--s-forest); font: 600 12px/1 var(--font); }
.sc__act svg { width: 12px; }
.sc__shot { margin-top: 12px; }
.sc__shot img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 20px 40px -28px rgba(7,30,4,.55); }
.sc__stage { display: none; }
/* pinned: steps beside one browser frame */
.sc.is-pinned { height: 100svh; padding: calc(var(--bar-h) * .9) 0 var(--s-4); display: flex; flex-direction: column; }
.sc.is-pinned .sc__head { margin-bottom: max(14px, 2.4svh); flex: none; flex-wrap: nowrap; align-items: flex-end; }
.sc.is-pinned .sc__aside { font-size: var(--t-micro); max-width: 52ch; }
.sc.is-pinned .sc__title { font-size: min(var(--t-h1), 6.2svh); max-width: none; }
.sc.is-pinned .sc__grid { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); align-items: center; }
.sc.is-pinned .sc__list { gap: 6px; align-content: center; }
.sc.is-pinned .sc__name { margin: 0; padding: 8px 10px; border-radius: 12px; font-size: var(--t-small); color: var(--s-grey); transition: color .3s, background .3s; }
.sc.is-pinned .sc__sc.is-on .sc__name { color: var(--s-ink); background: #fff; }
.sc.is-pinned .sc__steps { display: none; gap: 6px; padding: 6px 0 4px 10px; }
.sc.is-pinned .sc__sc.is-on .sc__steps { display: grid; }
.sc.is-pinned .sc__shot { display: none; }
.sc.is-pinned .sc__b { padding: 9px 12px; background: transparent; opacity: .55; }
.sc.is-pinned .sc__step.is-on .sc__b { opacity: 1; background: #fff; box-shadow: inset 3px 0 0 var(--s-green), 0 12px 24px -20px rgba(7,30,4,.5); }
.sc.is-pinned .sc__step.is-done .sc__b { opacity: .8; }
.sc.is-pinned .sc__t { font-size: clamp(13px, calc(16 * var(--fx)), 16px); }
.sc.is-pinned .sc__step:not(.is-on) .sc__t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc.is-pinned .sc__step:not(.is-on) .sc__act { display: none; }
.sc.is-pinned .sc__stage { display: block; align-self: center; width: min(100%, calc((100svh - var(--bar-h) - 21svh) * 1.36)); justify-self: end; }
.sc__browser .pr-browser__bar { justify-content: flex-start; }
.sc__count { margin-left: auto; font-size: var(--t-micro); color: var(--s-grey); }
.sc__view { position: relative; aspect-ratio: 1600 / 1178; background: #fff; cursor: zoom-in; }
.sc__view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s var(--ease); }
.sc__view img.is-on { opacity: 1; }
.sc__bar { margin-top: 12px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.sc__bar i { display: block; height: 100%; background: var(--grad-brand); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- 9 · Comps + Archives ---------- */
.cmp__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
.cmp__notes { grid-column: 1 / span 4; grid-row: 1; align-self: stretch; display: grid; grid-auto-rows: 1fr; gap: var(--s-3); }
.cmp-note { padding: var(--s-4); border-radius: var(--r-card); background: #E4E4E4; font: 400 clamp(20px, calc(34 * var(--fx)), 34px)/1.2 var(--font); letter-spacing: -.01em; }
.cmp__cards { grid-column: 5 / span 4; grid-row: 1; }
.cmp__cards-img { position: relative; border-radius: var(--r-card); overflow: hidden; background: #DADADA; }
.cmp__cards-img img { width: 100%; height: auto; }
.cmp__hl { position: absolute; left: 5.4%; width: 89%; border-radius: 8px; opacity: 0; transition: opacity .35s, box-shadow .35s; }
.cmp__cards.has-hl .cmp__hl.is-on { opacity: 1; box-shadow: inset 0 0 0 3px var(--s-green), 0 0 0 200vmax rgba(7,30,4,.32); }
.cmp__cards figcaption { margin-top: var(--s-3); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.cmp__alerts { grid-column: 1 / span 4; grid-row: 2; }
.cmp__alerts img { width: 100%; height: auto; border-radius: var(--r-card); background: #DADADA; }
.cmp__alerts figcaption { margin-top: 10px; }
.cmp__list { grid-column: 5 / span 4; grid-row: 2; }
.cmp__list .dot-list { margin-top: var(--s-3); }
.cmp__board { grid-column: 9 / span 4; grid-row: 1 / span 2; }
.cmp__board img { width: 100%; height: auto; border-radius: var(--r-card); background: #DADADA; }
.cmp__board figcaption { margin-top: 8px; }
.cmp__arch { margin-top: var(--s-7); }
.cmp__ar figcaption { margin-top: var(--s-3); font-size: var(--t-small); color: var(--fg-soft); }
.cmp__ar figcaption b { color: var(--fg); }
@media (max-width: 1100px) { .cmp__grid > * { grid-row: auto !important; } .cmp__notes, .cmp__cards, .cmp__alerts, .cmp__list { grid-column: span 6; } .cmp__board { grid-column: 1 / -1; max-width: 520px; } }
@media (max-width: 700px) { .cmp__grid > * { grid-column: 1 / -1 !important; } }

/* ---------- 10 · The solution ---------- */
.sol { padding: 0; min-height: 118svh; display: grid; align-content: start; }
.sol__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.sol__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; will-change: transform; }
.sol__card { position: relative; margin: var(--s-6) var(--s-6) 0; padding: var(--s-6) var(--s-7) var(--s-7); border-radius: clamp(26px, calc(50 * var(--fx)), 50px); background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.97)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 40px 80px -40px rgba(7,30,4,.45); }
.sol__text { font: 400 clamp(22px, calc(48 * var(--fx)), 48px)/1.32 var(--font); letter-spacing: -.012em; color: #3C3C3C; max-width: 46ch; }
.sol__a { display: block; color: #000; }
.sol__big { font: italic 600 clamp(40px, calc(112 * var(--fx)), 128px)/1.08 var(--font); letter-spacing: -.035em; color: var(--s-green); }
.sol__text b em { font-style: italic; font-weight: 700; color: #000; }
.sol__text .w { color: inherit; }
.sol__text em .w { color: var(--s-green); }
.sol__text b em .w { color: #000; }


@media (max-width: 900px) {
  .sol { min-height: 0; }
  .sol__bg { position: relative; inset: auto; z-index: 0; aspect-ratio: 4 / 3; order: 2; }
  .sol__card { margin: var(--s-3); padding: var(--s-5) var(--s-4); }
  .sol__text { max-width: none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .got__float, .mq__track { animation: none !important; }
  .mq { height: auto; -webkit-mask: none; mask: none; }
  .mq__dup { display: none; }
  .mq__col { -webkit-mask: none; mask: none; }
  @media (max-width: 900px) { .mq { grid-auto-rows: auto; } }
}
.mq.is-paused .mq__track { animation-play-state: paused; }