/* Animated Popups — self-contained RC sub-page (MKT-1880). Cut from the approved design canvas. */
  :root {
    --paper: #F7F5F1; --white: #FFFFFF;
    --ink: #23262A; --ink-600: #505763; --ink-500: #6B7280; --ink-400: #B9BEC6;
    --gray-300: #D5D8DD; --gray-200: #E3E5E8; --gray-100: #F1F2F4;
    --orange: #ED5A29; --orange-hover: #F17E58; --orange-ink: #B8410F; --orange-100: #FEEFEA; --orange-200: #F8CDBB;
    --green-100: #E6F4EC; --green-ink: #1F6B42;
    --dark: #23262A; --dark-panel: #1A1C1F; --dark-border: #3A3E44;
    --shadow: 0 1px 2px 0 rgba(16,24,40,.04), 0 1px 3px 0 rgba(16,24,40,.06);
    --shadow-md: 0 18px 40px -22px rgba(35,38,42,.38);
    --shadow-lg: 0 28px 66px -24px rgba(35,38,42,.40);
    --r-btn: 9px; --r-input: 12px; --r-card: 16px; --r-lg: 22px; --r-pill: 999px;
    --font: 'Funnel Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    --mono: 'Roboto Mono', ui-monospace, Menlo, monospace;
    --container: min(1160px, 100% - 48px);
    --h1-size: 40px; --h1-lh: 48px; --h2-size: 28px; --h2-lh: 36px;
    --lead-size: 16px; --lead-lh: 25px; --section-gap: 72px;
  }
  @media (min-width: 700px) { :root { --h1-size: 52px; --h1-lh: 60px; --h2-size: 34px; --h2-lh: 42px; --lead-size: 17px; --lead-lh: 27px; --section-gap: 100px; } }
  @media (min-width: 1280px) { :root { --container: min(1200px, 100% - 48px); --h1-size: 62px; --h1-lh: 70px; --h2-size: 40px; --h2-lh: 48px; --lead-size: 19px; --lead-lh: 29px; --section-gap: 128px; } }
  * { box-sizing: border-box; }
  body { margin: 0; font-family: var(--font); background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
  a { color: var(--orange-ink); text-decoration: none; }
  a:hover { color: var(--orange); }
  button { font-family: inherit; cursor: pointer; }
  img { display: block; max-width: 100%; }

  .container { width: var(--container); max-width: 100%; margin: 0 auto; padding: 0; position: relative; z-index: 1; }
  @media (min-width: 1440px) { :root { --container: min(1360px, 100% - 48px); --h1-size: 64px; --h1-lh: 72px; --lead-size: 20px; --lead-lh: 30px; --section-gap: 144px; } }
  @media (max-width: 767px) { :root { --container: min(1160px, 100% - 40px); } }
  .narrow { max-width: 740px; margin: 0 auto; text-align: center; }
  .section { padding: var(--section-gap) 0; position: relative; overflow: hidden; }
  .band { background: var(--white); }
  .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); margin: 0 0 16px; }
  .h1 { font-size: var(--h1-size); line-height: var(--h1-lh); font-weight: 700; margin: 0 0 22px; letter-spacing: -0.025em; }
  .h2 { font-size: var(--h2-size); line-height: var(--h2-lh); font-weight: 600; margin: 0 0 16px; letter-spacing: -0.015em; }
  .lead { font-size: var(--lead-size); line-height: var(--lead-lh); color: var(--ink-600); margin: 0; }
  .muted { font-size: 14px; color: var(--ink-500); margin: 0; }
  .accent { color: var(--orange); }
  .decor { position: absolute; pointer-events: none; z-index: 0; user-select: none; }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 24px; border-radius: var(--r-btn); font-size: 16px; font-weight: 600; border: 1px solid transparent; transition: background .15s ease, transform .15s ease, border-color .15s ease; }
  .btn-primary { background: var(--orange); color: #fff; box-shadow: 0 8px 20px -10px rgba(237,90,41,.7); }
  .btn-primary:hover { background: var(--orange-hover); color: #fff; transform: translateY(-1px); }
  .btn-ghost { background: var(--white); color: var(--ink); border-color: var(--gray-300); }
  .btn-ghost:hover { border-color: var(--ink-400); color: var(--ink); }
  .btn-link { background: transparent; color: var(--ink); padding: 10px 6px; border: none; }
  .btn-link:hover { color: var(--orange-ink); }
  .btn-sm { min-height: 44px; padding: 8px 18px; font-size: 15px; }

  /* reveal on scroll (homepage-rc pattern) */
  .rv { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
  .rv.in { opacity: 1; transform: none; }

  @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
  @keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
  @keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(237,90,41,.45); } 100% { box-shadow: 0 0 0 12px rgba(237,90,41,0); } }
  @keyframes popin { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes drift { 0%, 100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(10px,-14px) rotate(4deg); } }
  @keyframes flow { to { stroke-dashoffset: -24; } }
  @keyframes scan { 0% { top: -12%; } 100% { top: 100%; } }
  @keyframes type { 0% { width: 0; } 55%, 100% { width: 100%; } }
  @keyframes chipin { 0%, 15% { opacity: 0; transform: translateY(6px) scale(.92); } 25%, 100% { opacity: 1; transform: none; } }
  @keyframes fillbar { 0% { width: 8%; } 80%, 100% { width: 100%; } }
  @keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

  /* ===== header + nav (copied from homepage-rc) ===== */
  :root { --header-h: 80px; --ease: cubic-bezier(.16,1,.3,1); }
  .wrap { width: var(--container); max-width: 100%; margin: 0 auto; padding: 0; }
  .site-header button { border: 0; background: transparent; font-family: inherit; padding: 0; }
  .site-header .btn { min-height: 40px; padding: 8px 18px; font-size: 15px; font-weight: 500; box-shadow: none; }
  .site-header .btn-primary { font-weight: 600; }
  .btn-outline { background: var(--white); border: 1px solid var(--gray-200); color: var(--ink); }
  .btn-outline:hover { background: #FAFAFA; border-color: var(--gray-300); color: var(--ink); }

.site-header{position:sticky;top:0;z-index:50;height:var(--header-h);transition:background 220ms ease,box-shadow 220ms ease,border-color 220ms ease;border-bottom:1px solid transparent}
.site-header.is-stuck{background:rgba(247,245,241,.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:transparent}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
.nav-links{display:flex;align-items:center;gap:6px}
/* The panels are absolutely positioned against the header itself (the sticky header is the
   nearest positioned ancestor), so the items stay static and the panel can be centred on
   .wrap regardless of which trigger opened it. */
.nav-item{position:static;display:flex;align-items:center}
.nav-trigger{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:var(--r-btn);background:transparent;font-size:15px;font-weight:500;color:var(--ink-600);cursor:pointer;transition:background 140ms ease,color 140ms ease}
.nav-trigger:hover,.nav-item.is-open>.nav-trigger{background:var(--gray-100);color:var(--ink)}
.nav-trigger a,.nav-trigger button{color:inherit}
.nav-trigger-plain{color:var(--ink-600)}
.nav-trigger-split{padding:0}
.nav-trigger-label{display:flex;align-items:center;min-height:44px;padding:0 4px 0 14px}
.nav-caret{display:flex;align-items:center;min-height:44px;padding:0 14px 0 2px;cursor:pointer}
.nav-trigger svg{transition:transform 160ms ease}
.nav-item.is-open .nav-trigger svg{transform:rotate(180deg)}
.header-actions{display:flex;align-items:center;gap:10px}
.nav-burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:var(--r-btn);color:var(--ink);cursor:pointer}
.nav-burger-x{display:none}
.nav-burger[aria-expanded="true"] .nav-burger-bars{display:none}
.nav-burger[aria-expanded="true"] .nav-burger-x{display:block}

/* ===== header dropdowns (nav) =====
   "B" style from the approved artboards: bare 20px line icons (no tile), --ink-600 going
   --ink on hover, 500-weight titles, white panel on a 1px --gray-200 border. */
.nav-panel{position:absolute;top:100%;left:50%;z-index:2;width:min(var(--nav-w,1000px),var(--container));margin-top:9px;opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-4px);transition:opacity 160ms var(--ease),transform 160ms var(--ease),visibility 0s linear 160ms}
.nav-item.is-open>.nav-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition-delay:0s,0s,0s}
/* 9px, not 8: top:100% lands on the header's padding box, and the header's 1px bottom
   border sits outside it — this puts the panel exactly 8px under the visible header edge */
/* invisible bridge over the 8px gap, so the pointer can cross from the trigger into the
   panel without ever leaving .nav-item */
.nav-panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-panel-in{background:var(--white);border:1px solid var(--gray-200);border-radius:14px;box-shadow:0 8px 20px -10px rgba(35,38,42,.12),0 1px 2px rgba(35,38,42,.04);overflow:hidden}
.nav-panel-product{--nav-w:1000px}
.nav-panel-library{--nav-w:1020px}
.nav-panel-res{--nav-w:860px}
.nav-sec{display:flex;flex-direction:column;gap:12px}
.nav-sec-title{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-600);padding:0 12px}
.nav-sec-title-flush{padding:0}
.nav-col{display:flex;flex-direction:column;gap:12px;padding:28px 16px 20px}
.nav-col-side{background:var(--white);border-left:1px solid var(--gray-200)}
.nav-list{display:flex;flex-direction:column;gap:4px}
.nav-list-tight{display:flex;flex-direction:column;gap:2px}
/* rich row: icon + title (+ chip) + description, arrow revealed at the right edge on hover */
.nav-row{display:flex;gap:14px;padding:12px;border-radius:12px;color:var(--ink);transition:background 120ms ease}
.nav-row:hover{background:var(--gray-100);color:var(--ink)}
.nav-ico{width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--ink-600);transition:color 120ms ease}
.nav-row:hover .nav-ico,.nav-row-c:hover .nav-ico{color:var(--ink)}
.nav-row-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.nav-row-name{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500;line-height:22px}
.nav-row-desc{font-size:13px;line-height:19px;color:var(--ink-600)}
/* always in the box, only faded — revealing it must not reflow the row */
.nav-row-go{margin-left:auto;align-self:center;display:flex;color:var(--ink);opacity:0;transition:opacity 120ms ease}
.nav-row:hover .nav-row-go,.nav-row:focus-visible .nav-row-go{opacity:1}
/* compact one-line row (Popup Library columns) */
.nav-row-c{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 12px;border-radius:10px;font-size:15px;font-weight:500;color:var(--ink);transition:background 120ms ease}
.nav-row-c:hover{background:var(--gray-100);color:var(--ink)}
/* plain text row (Resources / Company) */
.nav-row-p{display:flex;align-items:center;min-height:40px;padding:8px 12px;border-radius:var(--r-btn);font-size:15px;font-weight:500;color:var(--ink);transition:background 120ms ease}
.nav-row-p:hover{background:var(--gray-100);color:var(--ink)}
.nav-chip{font-size:11px;font-weight:600;line-height:16px;padding:1px 8px;border-radius:var(--r-pill);background:var(--orange-100);color:#B23A12}
.nav-ai-logos{display:flex;align-items:center;gap:8px;margin-top:6px}
.nav-ai-logos img{width:16px;height:16px}
.nav-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 28px;border-top:1px solid var(--gray-200);background:var(--white)}
.nav-foot-center{justify-content:center}
.nav-foot-note{font-size:15px;color:var(--ink-600)}
.nav-foot-link,.nav-link-go{display:flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:600;color:var(--ink)}
.nav-link-go{min-height:40px}
.nav-foot-link:hover,.nav-link-go:hover{color:var(--ink);text-decoration:underline}
/* Product panel */
.nav-prod-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr)}
.nav-usecases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
/* Popup Library panel */
.nav-lib-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px}
.nav-lib-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:28px 20px 24px}
.nav-seasons{display:flex;flex-direction:column;gap:14px;padding:28px 24px 24px;border-left:1px solid var(--gray-200)}
.nav-season-body{display:flex;flex-direction:column;gap:12px}
.nav-season-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.nav-season-name{font-size:18px;font-weight:600;line-height:24px}
.nav-season-when{font-size:13px;line-height:19px;color:var(--ink-600);white-space:nowrap}
.nav-season-shot{display:block;padding:14px;border-radius:12px;background:var(--paper)}
.nav-season-shot img{width:100%;height:auto;border-radius:6px;box-shadow:0 6px 16px -8px rgba(35,38,42,.35)}
.nav-season-list{display:flex;flex-direction:column;border-top:1px solid var(--gray-200);padding-top:6px}
.nav-season-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:6px 0;font-size:15px;font-weight:500;color:var(--ink)}
.nav-season-row:hover{color:var(--ink);text-decoration:underline}
/* Resources panel: the artboard's per-column padding keeps the three columns optically even */
.nav-res-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 240px}
.nav-col-l{padding:28px 8px 24px 16px}
.nav-col-r{padding:28px 16px 24px 8px}
.nav-col-c{padding:28px 12px 24px}
/* the mobile sheet only exists under the nav breakpoint */
.mnav{display:none}
/* ===== responsive ===== */
@media (max-width:1059px){
  /* the seasons column needs its 380px; below this the two link columns get the panel */
  .nav-lib-grid{grid-template-columns:minmax(0,1fr)}
  .nav-seasons{display:none}
}
/* ===== tablet ===== */

@media (max-width:767px){
  :root{--header-h:64px}
  .nav-links,.header-signin{display:none}
  .nav-burger{display:flex}
  /* full-height sheet under the (sticky) header; z-index stays below the header's 50 */
  .mnav{position:fixed;left:0;right:0;top:var(--header-h);bottom:0;z-index:49;display:flex;flex-direction:column;background:var(--white);overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity 160ms var(--ease),transform 160ms var(--ease),visibility 0s linear 160ms}
  .mnav-nav{display:flex;flex-direction:column}
  .mnav-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;padding:0 20px;border-bottom:1px solid var(--gray-200);font-size:17px;font-weight:600;color:var(--ink);text-align:left;cursor:pointer}
  .mnav-row svg{flex-shrink:0;color:var(--ink-600)}
  .mnav-chev{transition:transform 160ms ease}
  .mnav-row[aria-expanded="true"] .mnav-chev{transform:rotate(180deg)}
  .mnav-sub{display:none;background:#FCFBF9;border-bottom:1px solid var(--gray-200);padding-bottom:10px}
  .mnav-sub.is-open{display:block}
  .mnav-sub-title{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-600);padding:14px 20px 4px}
  .mnav-link{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 20px;font-size:15px;font-weight:500;color:var(--ink)}
  .mnav-link:hover{color:var(--ink)}
  .mnav-ico{display:flex;color:var(--ink-600)}
  .mnav-arrow{padding:6px 20px 0}
  .mnav-foot{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding:16px 20px 24px;border-top:1px solid var(--gray-200)}
  .mnav-cta{font-size:16px}
    .mnav.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s,0s,0s}

}

  /* hero */
  .hero { padding: 56px 0 calc(var(--section-gap) * .55); position: relative; overflow: hidden; }
  .hero-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
  @media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: 44px; } }
  .hero-copy .lead { max-width: 500px; }
  .cta-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 30px 0 14px; }
  .device { position: relative; width: 100%; max-width: 720px; justify-self: end; }
  .device-screen { background: var(--white); border: 1px solid var(--gray-200); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lg); }
  .device-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: var(--gray-100); border-bottom: 1px solid var(--gray-200); }
  .device-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gray-300); }
  .device-url { margin-left: 12px; height: 22px; flex: 1; max-width: 260px; border-radius: var(--r-pill); background: var(--white); border: 1px solid var(--gray-200); }
  .media { position: relative; overflow: hidden; background: var(--gray-200); }
  .media > img { display: block; width: 100%; height: auto; }
  .media > video { display: block; width: 100%; height: 100%; object-fit: cover; }
  .media > video { position: absolute; inset: 0; }
  .np { position: relative; aspect-ratio: 1440 / 900; overflow: hidden; background: #1a1c1f; container-type: inline-size; }
  .np > img, .np > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .np-ui { position: absolute; inset: 0; z-index: 2; color: #fff; }
  .np-ui > * { position: absolute; left: 6.528cqw; margin: 0; }
  .np-logo { top: 4.097cqw; width: 7.153cqw; height: auto; }
  .np-h { top: 13.75cqw; font-family: 'Anton', Impact, sans-serif; font-weight: 400; font-size: 5.625cqw; line-height: 5.456cqw; letter-spacing: -0.12cqw; }
  .np-h span { display: block; }
  .np-p { top: 31.597cqw; width: 36.53cqw; font-family: 'Montserrat', Arial, sans-serif; font-size: 1.75cqw; line-height: 2.345cqw; letter-spacing: -0.045cqw; }
  .np-in, .np-btn, .np-no, .np-tc { width: 33.82cqw; box-sizing: border-box; font-family: 'Montserrat', Arial, sans-serif; }
  .np-in { top: 38.056cqw; height: 4.306cqw; display: flex; align-items: center; padding: 0 1.6cqw; background: rgba(17,17,17,.76); border: 1px solid #C3C3C3; font-size: 1.75cqw; color: rgba(255,255,255,.55); }
  .np-btn { top: 43.542cqw; height: 4.306cqw; display: flex; align-items: center; justify-content: center; background: #fff; color: #000; font-family: 'Anton', Impact, sans-serif; font-size: 1.531cqw; }
  .np-no { top: 49.236cqw; height: 2.361cqw; display: flex; align-items: center; justify-content: center; font-size: 1.25cqw; text-decoration: underline; }
  .np-tc { top: 53.264cqw; text-align: center; font-size: 1.0625cqw; line-height: 1.594cqw; color: #CCC; }
  .np-x { left: auto !important; right: 1.667cqw; top: 1.667cqw; width: 2.5cqw; height: 2.5cqw; border-radius: 50%; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; }
  .np-x svg { width: 42%; height: 42%; }
  .tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-pill); background: var(--orange-100); color: var(--orange-ink); font-size: 12.5px; font-weight: 600; }

  /* examples: static » prompt » animated */
  .ex-head { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, .78fr) 56px minmax(0, 1fr); margin: 56px 0 18px; }
  .ex-col-label { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-500); }
  .ex-col-label .live { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); animation: pulse 1.8s ease-in-out infinite; }
  .ex-list { display: flex; flex-direction: column; gap: 28px; }
  .ex-row { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, .78fr) 56px minmax(0, 1fr); align-items: center; }
  .ex-media { border-radius: 8px; border: 1px solid var(--gray-200); box-shadow: var(--shadow-md); }
  .ex-media-still > img { filter: saturate(.92); }
  .ex-media-anim { box-shadow: 0 26px 50px -24px rgba(237,90,41,.45), 0 0 0 1px var(--orange-200); border-color: transparent; }
  .ex-cell { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .ex-badge { display: none; align-self: flex-start; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; background: rgba(255,255,255,.92); color: var(--ink-600); box-shadow: var(--shadow); }
  .ex-badge-anim { background: var(--ink); color: #fff; }
  .ex-badge-anim .live { width: 6px; height: 6px; border-radius: 50%; background: var(--orange-hover); animation: pulse 1.6s ease-in-out infinite; }
  .ex-arrow { display: flex; justify-content: center; }
  .ex-arrow path { stroke-dasharray: 5 7; animation: flow 1s linear infinite; }
  .ex-prompt { position: relative; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-card); padding: 18px 18px 16px; box-shadow: var(--shadow); }
  .ex-prompt-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
  .ex-prompt-label { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--orange-ink); }
  .ex-brand { font-size: 12px; font-weight: 600; color: var(--ink-500); }
  .ex-prompt-text { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
  .ex-prompt-text .caret { display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -2px; background: var(--orange); animation: caret 1s step-end infinite; }
  .ex-more { display: flex; justify-content: center; margin-top: 36px; }
  .ex-note { text-align: center; margin-top: 18px; }
  @media (max-width: 900px) {
    .ex-head { display: none; }
    .ex-row { grid-template-columns: 1fr; gap: 10px; padding: 16px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-lg); }
    .ex-arrow svg { transform: rotate(90deg); }
    .ex-prompt { box-shadow: none; background: var(--paper); }
    .ex-badge { display: inline-flex; box-shadow: none; border: 1px solid var(--gray-200); }
  }


  /* non-fullscreen popups: a dimmed page with the popup centred on it */
  .pg { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: #FBFAF8; border: 1px solid var(--gray-200); box-shadow: var(--shadow-md); }
  .pg-sk { position: absolute; inset: 0; }
  .pg-sk-nav { display: flex; align-items: center; gap: 8px; padding: 3.2% 4%; }
  .pg-sk-nav i { display: block; height: 7px; border-radius: 3px; background: var(--gray-300); }
  .pg-sk-banner { margin: 0 4%; height: 40%; border-radius: 6px; background: linear-gradient(135deg, #E9E4DC, #D9D2C7); }
  .pg-sk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3%; padding: 4%; }
  .pg-sk-grid i { display: block; aspect-ratio: 1 / 1.1; border-radius: 5px; background: var(--gray-100); }
  .pg-dim { position: absolute; inset: 0; background: rgba(98,98,98,.84); }
  .pp { position: absolute; left: 50%; top: 50%; width: 84%; transform: translate(-50%, -50%); container-type: inline-size; overflow: hidden; box-shadow: 0 24px 48px -18px rgba(0,0,0,.55); }
  .pp > img.pp-bg, .pp > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .pp-ui { position: absolute; inset: 0; z-index: 2; }
  .pp-thumb { position: relative; width: var(--tw); max-width: 100%; aspect-ratio: 1212 / 792; overflow: hidden; margin: 0 auto; }
  .pp.pp-scaled { position: absolute; left: 0; top: 0; width: calc(var(--tw) * 4); transform: scale(0.25); transform-origin: 0 0; box-shadow: none; }
  .pg-thumb { position: relative; width: var(--tw); max-width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; box-shadow: var(--shadow-md); }
  .pg.pg-scaled { position: absolute; left: 0; top: 0; width: calc(var(--tw) * 4); transform: scale(0.25); transform-origin: 0 0; border-radius: 40px; border-width: 4px; box-shadow: none; }
  .ab-variant { --tw: 290px; }
  @media (max-width: 1279px) { .ab-variant { --tw: 250px; } }
  @media (max-width: 1000px) { .ab-variant { --tw: 290px; } }
  @media (max-width: 700px) { .ab-variant { --tw: 136px; } }
  .step-vis .chat-result .media { flex: 0 0 auto; background: transparent; }
  .step-vis .scan-media { width: fit-content; margin: 0 auto; background: transparent; }
  .step-vis .vcard { width: auto; }
  .step-vis .vcard .media { background: transparent; }
  .pp-ui > * { position: absolute; margin: 0; box-sizing: border-box; }
  /* BARK — canvas 1212 x 792, positions from the app preview (1cqw = 12.12px) */
  .pp-bark { aspect-ratio: 1212 / 792; }
  .bk { color: #142535; font-family: 'Roboto Condensed', Arial, sans-serif; text-align: center; }
  .bk-x { left: 94.47cqw; top: 1.98cqw; width: 2.475cqw; height: 2.475cqw; }
  .bk-logo { left: 64.52cqw; top: 2.89cqw; width: 22.85cqw; height: auto; }
  .bk-hs, .bk-h { font-family: 'Anton', Impact, sans-serif; font-weight: 400; color: #1A4E8A; }
  .bk-hs { left: 55.53cqw; top: 12.71cqw; width: 40.51cqw; font-size: 6.049cqw; line-height: 6.411cqw; }
  .bk-h { left: 57.01cqw; top: 18.98cqw; width: 37.95cqw; font-size: 7.048cqw; line-height: 7.471cqw; }
  .bk-sw { left: 65.02cqw; top: 26.65cqw; width: 24.5cqw; height: auto; }
  .bk-p { left: 58cqw; top: 30.03cqw; width: 36.96cqw; font-size: 2.799cqw; line-height: 3.023cqw; font-weight: 800; letter-spacing: -0.06cqw; }
  .bk-in { left: 58cqw; top: 38.12cqw; width: 36.8cqw; height: 5.528cqw; display: flex; align-items: center; padding: 0 1.3cqw; background: rgba(255,255,255,.9); border: 0.165cqw solid #AAAEB1; border-radius: 0.4cqw; font-size: 1.85cqw; color: #7B8288; text-align: left; }
  .bk-btn { left: 58cqw; top: 44.55cqw; width: 36.8cqw; height: 5.858cqw; display: flex; align-items: center; justify-content: center; background: #FBCA10; border: 1px solid #FFBC00; border-radius: 0.45cqw; font-family: 'Anton', Impact, sans-serif; font-size: 2.549cqw; letter-spacing: 0.064cqw; }
  .bk-paw { left: 61.14cqw; top: 52.15cqw; width: 3.383cqw; height: auto; }
  .bk-pups { left: 65.35cqw; top: 52.64cqw; font-size: 2.049cqw; font-weight: 600; white-space: nowrap; text-align: left; }
  .bk-div { left: 64.52cqw; top: 56.44cqw; width: 23.76cqw; border-top: 1px solid #AAA7A1; }
  .bk-no { left: 64.52cqw; top: 58cqw; width: 23.76cqw; font-size: 1.6cqw; text-decoration: underline; }


  /* Alani Nu — canvas 1263 x 776 (1cqw = 12.63px) */
  .pp-alani { aspect-ratio: 1263 / 776; }
  .an { font-family: 'Epilogue', Arial, sans-serif; color: #555762; }
  .an-x { left: 93.82cqw; top: 1.82cqw; width: 3.167cqw; height: 3.167cqw; }
  .an-logo { left: 64.13cqw; top: 2.85cqw; width: 18.69cqw; height: auto; }
  .an-h { left: 57.01cqw; top: 15.44cqw; width: 37.29cqw; font-family: 'Montserrat', Arial, sans-serif; font-weight: 800; font-size: 5.549cqw; line-height: 5.771cqw; letter-spacing: -0.12cqw; color: #343579; }
  .an-h span { display: block; font-size: 4.52cqw; line-height: 5.062cqw; letter-spacing: -0.16cqw; color: #43C5BF; }
  .an-p { left: 57.09cqw; top: 27.47cqw; width: 36.58cqw; font-size: 2.23cqw; line-height: 2.899cqw; letter-spacing: -0.06cqw; }
  .an-p b { font-weight: 700; }
  .an-in { left: 56.45cqw; top: 35.15cqw; width: 37.21cqw; height: 5.067cqw; display: flex; align-items: center; padding: 0 1.4cqw; background: rgba(255,255,255,.72); border: 1px solid #626575; border-radius: 2px; font-size: 1.76cqw; color: #7A7F8C; }
  .an-btn { left: 56.45cqw; top: 41.57cqw; width: 37.21cqw; height: 5.542cqw; display: flex; align-items: center; justify-content: center; background: #39386F; border-radius: 2px; color: #fff; font-size: 2.3cqw; font-weight: 700; letter-spacing: 0.06cqw; }
  .an-no { left: 56.45cqw; top: 48.93cqw; width: 37.21cqw; height: 3.009cqw; display: flex; align-items: center; justify-content: center; font-size: 1.48cqw; color: #8581A2; text-decoration: underline; }
  .an-heart { left: 62.31cqw; top: 55.42cqw; width: 1.98cqw; height: 1.98cqw; }
  .an-fam { left: 65.16cqw; top: 55.74cqw; font-size: 1.36cqw; letter-spacing: -0.025cqw; white-space: nowrap; }


  /* fullscreen popups: the popup is the whole window, so no dimmed page around it */
  .pf { position: relative; aspect-ratio: 1440 / 900; overflow: hidden; border-radius: 10px; border: 1px solid var(--gray-200); box-shadow: var(--shadow-md); container-type: inline-size; background: #111; }
  .pf > img.pp-bg, .pf > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  /* Converse — canvas 1440 x 900 (1cqw = 14.4px) */
  .cv { font-family: 'Inter', Arial, sans-serif; color: #fff; }
  .cv > * { left: 5.208cqw; }
  .cv-x { left: 93.96cqw !important; top: 2.5cqw; width: 3.056cqw; height: 3.056cqw; }
  .cv-logo { top: 5.208cqw; width: 17.29cqw; height: auto; }
  .cv-h { top: 11.667cqw; width: 40cqw; font-family: 'Bebas Neue', Impact, sans-serif; font-weight: 400; font-size: 8.531cqw; line-height: 7.337cqw; letter-spacing: -0.12cqw; }
  .cv-p { top: 27.708cqw; width: 33.33cqw; font-size: 1.953cqw; line-height: 2.5cqw; }
  .cv-in, .cv-btn, .cv-go { width: 33.33cqw; display: flex; align-items: center; }
  .cv-in { top: 34.722cqw; height: 4.375cqw; padding: 0 1.3cqw; background: rgba(0,0,0,.35); border: 1px solid #fff; font-size: 1.531cqw; color: rgba(255,255,255,.7); }
  .cv-btn { top: 40cqw; height: 4.375cqw; justify-content: center; background: #fff; color: #000; font-weight: 800; font-size: 1.781cqw; }
  .cv-go { top: 45.625cqw; height: 3.125cqw; justify-content: center; font-weight: 600; font-size: 1.125cqw; text-decoration: underline; }


  /* Crocs — canvas 1440 x 900 (1cqw = 14.4px) */
  .cr { font-family: 'Montserrat', Arial, sans-serif; color: #fff; }
  .cr-panel { left: 4.028cqw; top: 4.792cqw; width: 40.97cqw; height: 53.75cqw; border-radius: 2.6cqw; background: rgba(19,30,36,.83); }
  .cr-x { left: 93.96cqw; top: 1.875cqw; width: 3.056cqw; height: 3.056cqw; }
  .cr-logo { left: 7.361cqw; top: 7.708cqw; width: 18.47cqw; height: auto; }
  .cr-h { left: 7.361cqw; top: 15.347cqw; width: 34.31cqw; font-family: 'Nunito', Arial, sans-serif; font-weight: 900; font-size: 5.781cqw; line-height: 5.376cqw; letter-spacing: -0.18cqw; }
  .cr-h span { display: block; color: #83C342; }
  .cr-p { left: 7.361cqw; top: 27.361cqw; width: 34.31cqw; font-weight: 500; font-size: 2.094cqw; line-height: 2.722cqw; letter-spacing: -0.07cqw; }
  .cr-in, .cr-btn, .cr-go, .cr-fam { left: 7.361cqw; width: 34.31cqw; display: flex; align-items: center; }
  .cr-in { top: 35.069cqw; height: 4.375cqw; padding-left: 5.1cqw; border: 2px solid #fff; border-radius: 5cqw; font-size: 1.656cqw; color: rgba(255,255,255,.75); }
  .cr-mail { left: 9.028cqw; top: 36.319cqw; width: 2.222cqw; height: auto; }
  .cr-btn { top: 40.764cqw; height: 4.792cqw; justify-content: center; border-radius: 5cqw; background: #83C342; color: #090C04; font-weight: 800; font-size: 1.75cqw; }
  .cr-go { top: 46.736cqw; height: 3.194cqw; justify-content: center; font-size: 1.5625cqw; text-decoration: underline; }
  .cr-fam { top: 52.43cqw; height: 2.57cqw; justify-content: center; gap: 0.7cqw; font-size: 1.531cqw; }
  .cr-fam svg { width: 3.68cqw; height: auto; }


  /* Calvin Klein — canvas 1264 x 783 (1cqw = 12.64px) */
  .pp-ck { aspect-ratio: 1264 / 783; }
  .ck { font-family: 'Inter', Arial, sans-serif; color: #fff; text-align: center; }
  .ck-x { left: 93.83cqw; top: 2.136cqw; width: 3.165cqw; height: 3.165cqw; }
  .ck-logo { left: 3.797cqw; top: 6.962cqw; width: 17.41cqw; height: auto; }
  .ck-h { left: 58.54cqw; top: 3.323cqw; width: 30.85cqw; font-family: 'Jost', Arial, sans-serif; font-weight: 300; font-size: 4.449cqw; line-height: 4.627cqw; }
  .ck-p { left: 51.19cqw; top: 13.92cqw; width: 45.57cqw; font-size: 1.78cqw; line-height: 2.58cqw; color: #EAEAEA; }
  .ck-card { left: 60.68cqw; top: 18.67cqw; width: 26.74cqw; height: auto; border-radius: 1.2cqw; box-shadow: 0 1cqw 2.5cqw -1cqw rgba(0,0,0,.6); }
  .ck-s { left: 57.99cqw; top: 47.63cqw; width: 31.96cqw; height: 4.351cqw; display: flex; align-items: center; justify-content: center; font-size: 1.78cqw; }


  /* AG1 — canvas 1440 x 900 (1cqw = 14.4px) */
  .ag { font-family: 'Inter', Arial, sans-serif; color: #fff; }
  .ag > .ag-l { left: 4.931cqw; }
  .ag-x { left: 93.96cqw; top: 2.222cqw; width: 3.056cqw; height: 3.056cqw; }
  .ag-logo { top: 3.681cqw; width: 10.49cqw; height: auto; }
  .ag-h { top: 11.111cqw; width: 42.08cqw; font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 600; font-size: 5.375cqw; line-height: 5.617cqw; letter-spacing: -0.188cqw; }
  .ag-p { top: 23.958cqw; width: 42.08cqw; font-size: 1.95cqw; line-height: 2.515cqw; letter-spacing: -0.049cqw; color: #D1D5D3; }
  .ag-in { top: 33.75cqw; width: 42.08cqw; height: 4.444cqw; display: flex; align-items: center; padding: 0 1.4cqw; background: #FAFAFA; border: 1px solid #E1E4E2; border-radius: 0.656cqw; font-size: 1.656cqw; font-weight: 500; color: #8A9694; }
  .ag-btn { top: 39.375cqw; width: 42.08cqw; height: 5.278cqw; display: flex; align-items: center; justify-content: center; gap: 0.8cqw; background: #063F3D; border-radius: 0.6875cqw; font-size: 1.906cqw; font-weight: 500; }
  .ag-no { top: 45.625cqw; width: 10.76cqw; height: 2.847cqw; display: flex; align-items: center; justify-content: center; font-size: 1.531cqw; font-weight: 500; text-decoration: underline; }
  .ag-div { top: 50.278cqw; width: 45.69cqw; border-top: 1px solid rgba(255,255,255,.44); }
  .ag-ic { top: 52.5cqw; width: 3.611cqw; height: auto; }
  .ag-lb { top: 56.597cqw; font-size: 0.856cqw; line-height: 1.113cqw; text-align: center; }
  .ag-tag { left: 28.125cqw; top: 52.5cqw; width: 22.5cqw; font-size: 1.531cqw; line-height: 1.99cqw; }


  /* e.l.f. — canvas 1198 x 792 (1cqw = 11.98px) */
  .pp-elf { aspect-ratio: 1198 / 792; }
  .ef { font-family: 'Jost', Arial, sans-serif; color: #000; text-align: center; }
  .ef-x { left: 94.24cqw; top: 2.254cqw; width: 2.755cqw; height: 2.755cqw; }
  .ef-v { left: 3.172cqw; top: 13.19cqw; width: 8.765cqw; font-family: 'Montserrat', Arial, sans-serif; font-weight: 800; font-size: 2.249cqw; line-height: 2.857cqw; letter-spacing: 0.18cqw; color: #fff; text-align: left; }
  .ef-logo { left: 67.11cqw; top: 2.588cqw; width: 11.35cqw; height: auto; }
  .ef-h { left: 50.25cqw; top: 15.28cqw; width: 45.08cqw; font-weight: 800; font-size: 6.648cqw; line-height: 6.781cqw; letter-spacing: -0.166cqw; color: #5900C7; }
  .ef-h2 { left: 48.5cqw; top: 22.37cqw; width: 48.66cqw; font-weight: 800; font-size: 4.249cqw; line-height: 4.758cqw; }
  .ef-p { left: 50.25cqw; top: 28.38cqw; width: 45.08cqw; font-weight: 500; font-size: 2.299cqw; line-height: 2.874cqw; }
  .ef-in { left: 50.25cqw; top: 36.39cqw; width: 45.08cqw; height: 5.426cqw; display: flex; align-items: center; padding-left: 1.6cqw; border: 2px solid #AAA; border-radius: 0.25cqw; font-size: 1.9cqw; font-weight: 500; color: #777; text-align: left; }
  .ef-btn { left: 50.25cqw; top: 43.07cqw; width: 45.08cqw; height: 6.427cqw; display: flex; align-items: center; justify-content: center; background: #FF460F; border-radius: 0.25cqw; color: #fff; font-family: 'Montserrat', Arial, sans-serif; font-weight: 800; font-size: 2.349cqw; }
  .ef-no { left: 67.45cqw; top: 50.5cqw; width: 10.68cqw; height: 3.005cqw; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.649cqw; color: #621CD4; text-decoration: underline; }
  .ef-ic { top: 55.93cqw; width: 3.589cqw; height: auto; }
  .ef-lb { top: 60.02cqw; font-weight: 500; font-size: 1.5cqw; line-height: 1.8cqw; }
  .ef-tag { left: 74.37cqw; top: 55.93cqw; width: 20.95cqw; height: 5.927cqw; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 1.5cqw; line-height: 1.8cqw; }


  /* Solo Stove hero — canvas 1440 x 900 (1cqw = 14.4px) */
  .ss { font-family: 'Inter', Arial, sans-serif; color: #fff; }
  .ss > * { left: 4.306cqw; }
  .ss-logo { top: 3.403cqw; width: 11.875cqw; height: auto; }
  .ss-h1, .ss-h2 { font-family: 'Bebas Neue', Impact, sans-serif; font-weight: 400; margin: 0; white-space: nowrap; }
  .ss-h1 { top: 7.708cqw; font-size: 7.5cqw; line-height: 6.75cqw; letter-spacing: 0.0375cqw; }
  .ss-h2 { top: 14.722cqw; font-size: 8.125cqw; line-height: 7.3125cqw; letter-spacing: 0.04cqw; color: #F05323; }
  .ss-p { top: 23.194cqw; width: 37.01cqw; font-size: 1.875cqw; line-height: 2.4cqw; letter-spacing: -0.019cqw; }
  .ss-p b, .ss-fam b { font-weight: 400; color: #F05323; }
  .ss-in { top: 29.167cqw; width: 37.01cqw; height: 4.306cqw; display: flex; align-items: center; padding-left: 6cqw; background: rgba(10,7,4,.72); border: 1px solid rgba(255,255,255,.72); border-radius: 0.278cqw; font-size: 1.5625cqw; color: rgba(255,255,255,.7); }
  .ss-mail { left: 6.106cqw !important; top: 30.2cqw; width: 2.6cqw; height: auto; }
  .ss-btn { top: 34.653cqw; width: 37.01cqw; height: 4.931cqw; display: flex; align-items: center; justify-content: center; background: #F05323; border-radius: 0.278cqw; font-family: 'Bebas Neue', Impact, sans-serif; font-size: 2.5cqw; letter-spacing: 0.1cqw; }
  .ss-no { top: 40.833cqw; width: 23.26cqw; height: 4.931cqw; display: flex; align-items: center; justify-content: center; font-size: 2.5cqw; letter-spacing: 0.1cqw; text-decoration: underline; }
  .ss-ic { top: 57.917cqw; width: 3.333cqw; height: auto; }
  .ss-fam { left: 8.611cqw !important; top: 58.056cqw; font-size: 1.125cqw; line-height: 1.575cqw; }
  .ss-x { left: auto !important; right: 2.708cqw !important; top: 3.611cqw; width: 3.056cqw !important; height: 3.056cqw !important; background: transparent !important; }
  .ss-x svg { width: 70% !important; height: 70% !important; }


  /* New Era hero — canvas 1440 x 900 (1cqw = 14.4px) */
  .ne { font-family: 'Inter', Arial, sans-serif; color: #fff; }
  .ne > * { left: 5.764cqw; }
  .ne-grad { left: 0 !important; top: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0,0,0,.25), rgba(0,0,0,0) 65%); }
  .ne-logo { left: 16.32cqw !important; top: 6.25cqw; width: 9.028cqw; height: auto; }
  .ne-h { top: 15.625cqw; font-family: 'Bebas Neue', Impact, sans-serif; font-weight: 400; font-size: 6.375cqw; line-height: 5.674cqw; letter-spacing: -0.05cqw; white-space: nowrap; }
  .ne-h span { display: block; }
  .ne-h3 { top: 27.29cqw; color: #00C49A; }
  .ne-p { top: 34.44cqw; width: 33.75cqw; font-weight: 500; font-size: 1.625cqw; line-height: 2.21cqw; }
  .ne-in { top: 40.42cqw; width: 33.75cqw; height: 4.653cqw; display: flex; align-items: center; padding-left: 4.7cqw; background: #fff; border: 1px solid #DDD; border-radius: 0.25cqw; font-size: 1.594cqw; font-weight: 500; color: #8A8A8A; }
  .ne-mail { left: 7.3cqw !important; top: 41.85cqw; width: 1.8cqw; height: auto; }
  .ne-btn { top: 46.04cqw; width: 33.75cqw; height: 4.722cqw; display: flex; align-items: center; justify-content: center; background: #0000EE; border-radius: 0.25cqw; font-family: 'Bebas Neue', Impact, sans-serif; font-weight: 700; font-size: 2.125cqw; letter-spacing: 0.064cqw; }
  .ne-no { top: 52.08cqw; font-size: 1.25cqw; text-decoration: underline; white-space: nowrap; }
  .ne-fam { top: 56.46cqw; display: flex; align-items: center; gap: 0.7cqw; font-size: 1.3125cqw; line-height: 1.84cqw; white-space: nowrap; }
  .ne-fam svg { width: 2.222cqw; height: auto; }
  .ne-x { left: 94.93cqw !important; top: 1.875cqw; width: 2.083cqw; height: 2.083cqw; }


  /* hero: PlayStation modal — canvas 1224 x 717 (1cqw = 12.24px) */
  .pg.hero-pg { border: 0; border-radius: 0; box-shadow: none; }
  .pp-ps { aspect-ratio: 1224 / 717; border-radius: 1cqw; }
  .ps { font-family: 'Inter', Arial, sans-serif; color: #fff; }
  .ps > * { left: 59.64cqw; }
  .ps-x { left: 93.87cqw !important; top: 2.042cqw; width: 3.105cqw; height: 3.105cqw; }
  .ps-logo { top: 6.618cqw; width: 5.719cqw; height: auto; }
  .ps-k { top: 12.58cqw; font-size: 1.52cqw; line-height: 2.128cqw; letter-spacing: 0.36cqw; color: #E0E0E0; white-space: nowrap; }
  .ps-h { top: 15.93cqw; font-family: 'Anton', Impact, sans-serif; font-size: 6.35cqw; line-height: 6.858cqw; letter-spacing: -0.08cqw; white-space: nowrap; }
  .ps-a { left: 59.31cqw !important; top: 21.98cqw; font-family: 'Knewave', Impact, sans-serif; font-style: italic; font-size: 9.5cqw; line-height: 10.735cqw; letter-spacing: -0.5cqw; color: #FDCD4C; transform: rotate(-3deg); transform-origin: left center; white-space: nowrap; }
  .ps-p { top: 35.38cqw; width: 33.58cqw; font-size: 2.16cqw; line-height: 2.894cqw; color: #C6C6C8; }
  .ps-btn { top: 43.63cqw; width: 33.58cqw; height: 5.8cqw; display: flex; align-items: center; justify-content: center; background: #FDCD4C; border-radius: 1.1cqw; color: #141414; font-weight: 700; font-size: 2.17cqw; }
  .ps-no { left: 71.73cqw !important; top: 51.47cqw; width: 9.314cqw; height: 2.614cqw; display: flex; align-items: center; justify-content: center; font-size: 1.65cqw; color: #A2A2A8; text-decoration: underline; }

  /* how it works: four cards side by side */
  .steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
  @media (max-width: 1100px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 640px) { .steps { grid-template-columns: 1fr; } }
  .step { position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--gray-200); border-radius: var(--r-lg); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
  .step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .step-vis { position: relative; height: 216px; padding: 16px; display: flex; flex-direction: column; justify-content: center; gap: 10px; background: linear-gradient(180deg, #FBFAF8 0%, var(--gray-100) 100%); border-bottom: 1px solid var(--gray-200); overflow: hidden; }
  .step-body { padding: 20px 22px 24px; }
  .step-n { display: block; font-family: var(--mono); font-size: 12px; color: var(--orange-ink); margin-bottom: 8px; }
  .step-title { font-size: 18px; line-height: 1.3; font-weight: 600; margin: 0 0 8px; }
  .step-text { font-size: 15px; line-height: 1.6; color: var(--ink-600); margin: 0; }
  .steps .rv { transition-delay: calc(var(--i, 0) * 110ms); }
  .step-arrow { position: absolute; top: 108px; right: -17px; z-index: 4; width: 14px; height: 14px; color: var(--orange); }
  @media (max-width: 1100px) { .step-arrow { display: none; } }
  /* step visuals */
  .chat-bubble { align-self: flex-end; max-width: 92%; background: var(--ink); color: #fff; font-size: 12.5px; line-height: 1.45; padding: 9px 12px; border-radius: 12px 12px 4px 12px; }
  .chat-result { display: flex; gap: 10px; align-items: center; background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; padding: 8px; }
  .chat-result .media { flex: 0 0 50%; border-radius: 4px; }
  .chat-result p { margin: 0; font-size: 12px; line-height: 1.4; color: var(--ink-600); }
  .chat-input { display: flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; padding: 6px 7px 6px 10px; }
  .chat-typing { flex: 1; overflow: hidden; white-space: nowrap; font-size: 12px; color: var(--ink-600); }
  .chat-typing span { display: inline-block; overflow: hidden; vertical-align: bottom; animation: type 6s steps(30, end) infinite; border-right: 2px solid var(--orange); }
  .send { flex-shrink: 0; width: 24px; height: 24px; border-radius: 6px; background: var(--orange); display: flex; align-items: center; justify-content: center; }
  .scan-media { border-radius: 6px; box-shadow: var(--shadow-md); }
  .scan-line { position: absolute; left: 0; right: 0; height: 14%; z-index: 2; background: linear-gradient(180deg, rgba(237,90,41,0) 0%, rgba(237,90,41,.28) 85%, rgba(237,90,41,.9) 100%); animation: scan 3.2s cubic-bezier(.5,0,.5,1) infinite; }
  .scan-chips { display: flex; flex-wrap: wrap; gap: 5px; }
  .schip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; background: var(--white); border: 1px solid var(--gray-200); color: var(--ink); animation: chipin 3.2s ease infinite; }
  .schip-yes svg { color: var(--orange); }
  .schip-lock { color: var(--ink-500); }
  .idea-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px; padding: 13px; }
  .idea-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .idea-text { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--ink); }
  .idea-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .fake-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border-radius: 7px; font-size: 12px; font-weight: 600; }
  .fake-primary { background: var(--orange); color: #fff; animation: ring 1.8s ease-out infinite; }
  .fake-ghost { color: var(--ink); background: transparent; padding-left: 4px; }
  .timer { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-500); }
  .timer-bar { flex: 1; height: 4px; border-radius: 4px; background: var(--gray-200); overflow: hidden; }
  .timer-bar span { display: block; height: 100%; background: var(--orange); border-radius: 4px; animation: fillbar 4s ease-in-out infinite; }
  .mini-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(237,90,41,.25); border-top-color: var(--orange); animation: spin .8s linear infinite; }
  .vcard { position: absolute; width: 66%; background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; padding: 7px; box-shadow: var(--shadow-md); }
  .vcard-a { top: 16px; left: 14px; transform: rotate(-3deg); }
  .vcard-b { bottom: 16px; right: 14px; transform: rotate(2deg); animation: float 6s ease-in-out infinite; }
  .vcard-head { display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; font-weight: 600; color: var(--ink-600); margin-bottom: 5px; }
  .vcard .media { border-radius: 4px; }
  .kept-pill { position: absolute; left: 14px; bottom: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r-pill); background: var(--green-100); color: var(--green-ink); font-size: 11.5px; font-weight: 600; box-shadow: var(--shadow); }
  .credit-line { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 40px; font-size: 15px; color: var(--ink-600); flex-wrap: wrap; text-align: center; }

  /* A/B */
  .ab-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
  @media (max-width: 1000px) { .ab-grid { grid-template-columns: 1fr; gap: 40px; } }
  .ab-points { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
  .ab-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.55; color: var(--ink-600); }
  .ab-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-lg); }
  .ab-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .ab-variant { display: flex; flex-direction: column; gap: 10px; }
  .ab-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--ink-600); }
  .ab-media { border-radius: 6px; border: 1px solid var(--gray-200); }
  .ab-split { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--gray-200); }
  .split-bar { display: flex; height: 38px; border-radius: 10px; overflow: hidden; font-size: 13px; font-weight: 600; margin-top: 10px; }
  .split-a { background: var(--gray-100); color: var(--ink-600); display: flex; align-items: center; padding-left: 12px; transition: flex-basis .3s ease; }
  .split-b { background: var(--orange); color: #fff; display: flex; align-items: center; justify-content: flex-end; padding-right: 12px; transition: flex-basis .3s ease; }
  .split-range { width: 100%; margin-top: 12px; accent-color: var(--orange); min-height: 28px; }
  .split-labels { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-500); }

  /* dark: what moves — one annotated loop */
  .dark { background: var(--dark); color: var(--gray-200); }
  .dark .eyebrow { color: var(--orange-hover); }
  .dark .h2 { color: var(--white); }
  .dark .lead { color: var(--ink-400); }
  .moves-head { max-width: 640px; margin-bottom: 48px; }
  .moves-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); column-gap: 40px; row-gap: 18px; align-items: end; }
  .moves-grid .anno-cap { align-self: start; margin: 0; }
  @media (max-width: 1000px) { .moves-grid { grid-template-columns: 1fr; row-gap: 14px; } .moves-grid .anno-media { order: 0; } .cap-move { order: 1; margin-bottom: 34px !important; } .nope { order: 2; } .cap-still { order: 3; } }
  .anno-wrap { position: relative; }
  .anno-media { border-radius: 8px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); }
  .anno-cap { margin: 18px 0 0; font-size: 14px; color: var(--ink-400); }
  .anno-cap b { color: var(--white); font-weight: 600; }
  .nope { display: flex; flex-direction: column; gap: 14px; }
  .nope-media { border-radius: 8px; opacity: .9; }


  /* faq */
  .faq-item { border-bottom: 1px solid var(--gray-200); }
  .faq-item:first-child { border-top: 1px solid var(--gray-200); }
  .faq-q { width: 100%; background: transparent; border: none; text-align: left; padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--ink); min-height: 44px; }
  .faq-q-text { font-size: 17px; font-weight: 600; }
  .faq-icon { flex-shrink: 0; transition: transform .2s ease; }
  .faq-icon-open { transform: rotate(45deg); }
  .faq-a { padding: 0 0 22px; margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-600); max-width: 720px; animation: popin .25s ease both; }

  .cta-sec { position: relative; overflow: hidden; background: var(--paper); padding: var(--section-gap) 0 96px; }
  .motif-enso { position: absolute; right: -140px; top: -60px; width: 520px; height: auto; opacity: .9; pointer-events: none; animation: spin 120s linear infinite; }
  .motif-bamboo { position: absolute; right: -20px; bottom: -180px; width: 300px; height: auto; opacity: .85; pointer-events: none; }
  .cta-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .cta-monk { width: 260px; height: auto; animation: float 6s ease-in-out infinite; }
  .cta-h { font-size: 52px; line-height: 60px; font-weight: 700; letter-spacing: -0.02em; margin: 8px 0 0; }
  .btn-lg { min-height: 52px; padding: 13px 30px; font-size: 17px; }
  @media (max-width: 900px) { .motif-enso { width: 360px; right: -120px; opacity: .6; } .motif-bamboo { width: 200px; bottom: -100px; opacity: .6; } }
  @media (max-width: 640px) { .cta-h { font-size: 32px; line-height: 40px; } .cta-monk { width: 190px; } }
  .drift { animation: drift 12s ease-in-out infinite; }

  .site-footer { border-top: 1px solid var(--gray-200); position: relative; z-index: 1; background: var(--paper); }
  .foot-grid { padding: 56px 0 40px; display: grid; grid-template-columns: 320px repeat(4, minmax(0, 1fr)); gap: 40px; }
  .foot-brand { display: flex; flex-direction: column; gap: 12px; }
  .foot-brand img { height: 32px; width: auto; align-self: flex-start; }
  .foot-tag { font-size: 14px; color: var(--ink-600); }
  .foot-h { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
  .foot-link { display: block; font-size: 14px; color: var(--ink-600); line-height: 26px; }
  .foot-link:hover { color: var(--ink); }
  .foot-bottom { display: flex; justify-content: space-between; padding: 0 0 32px; font-size: 12px; color: var(--ink-500); gap: 16px; flex-wrap: wrap; }
  .foot-legal { display: flex; gap: 20px; }
  .foot-legal .foot-link { font-size: 12px; line-height: 16px; }
  @media (max-width: 1100px) { .foot-grid { grid-template-columns: 240px repeat(4, minmax(0, 1fr)); gap: 24px; } }
  @media (max-width: 760px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 40px 0 28px; } .foot-brand { grid-column: 1 / -1; } .foot-bottom { padding: 0 0 28px; flex-direction: column; gap: 10px; } }

  @media (prefers-reduced-motion: reduce) {
    .rv { opacity: 1; transform: none; transition: none; }
    .device, .drift, .vcard-b, .fake-primary, .scan-line, .schip, .chat-typing span, .timer-bar span, .ex-arrow path { animation: none; }
    .motif-enso, .cta-monk { animation: none; }
  }
  [hidden] { display: none !important; }