:root{
    /* ── accent ── */
    --accent:#BC13FE; --accent-rgb:188,19,254; --accent-hover:#A810E0; --accent-bright:#CF00FF;
    --accent-05:rgba(188,19,254,.05); --accent-06:rgba(188,19,254,.06); --accent-10:rgba(188,19,254,.10);
    --accent-12:rgba(188,19,254,.12); --accent-20:rgba(188,19,254,.20); --accent-30:rgba(188,19,254,.30);
    --accent-wash:#FAF7FD;
    --canvas-grid-line:var(--accent-10);
    /* ── ink ── */
    --ink:#1A1A1A; --ink-strong:#000; --ink-900:#111; --ink-700:#374151; --ink-muted:#6B7280;
    --ink-soft:#888; --ink-faint:#9CA3AF;
    /* ── surfaces ── */
    --surface:#fff; --surface-canvas:#FAFAFA; --surface-subtle:#F9FAFB; --surface-ios:#F2F2F7; --surface-key:#F4F4F5;
    /* ── borders ── */
    --border:#E5E7EB; --border-strong:#D9D9D9; --border-soft:#E5E5E5;
    /* ── type ── */
    --font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    --font-display:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --font-ui:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --font-mono:'SF Mono','SFMono-Regular',Menlo,Monaco,Consolas,monospace;
    --font-display-weight-hero:800; --font-display-weight-feature:700; --font-display-weight-cta:700;
    --display-sm:28px; --display-md:40px; --display-lg:56px; --display-xl:72px;
    --display-hero:46px;
    --tracking-tight:-0.03em;
    /* ── radii ── */
    --radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-2xl:24px; --radius-pill:999px;
    /* ── shadow ── */
    --shadow-xs:0 1px 3px rgba(0,0,0,.08); --shadow-md:0 2px 8px rgba(0,0,0,.14);
    --shadow-xl:0 12px 32px rgba(0,0,0,.10); --shadow-2xl:0 24px 64px rgba(0,0,0,.14);
    /* ── layout ── */
    --container-max:1416px;
    /* Hero browser reference width — cursors and tips share one unit derived from it. */
    --demo-browser-w:744px;
    --demo-u:calc(var(--demo-browser-w) / 593);
    color-scheme:light;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0;font-family:var(--font-sans);color:var(--ink);background:var(--surface);-webkit-font-smoothing:antialiased;}
  a{color:var(--accent);text-decoration:none;transition:color .15s ease;}
  a:hover{color:var(--accent-hover);}
  ::selection{background:var(--accent-20);color:var(--ink-strong);}

  /* buttons (flattened from the design-system Button component) */
  .btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;
    letter-spacing:-0.01em;border-radius:var(--radius-md);cursor:pointer;border:1px solid transparent;
    transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease;white-space:nowrap;text-decoration:none;gap:8px;}
  .btn-md{height:40px;padding:0 18px;font-size:15px;}
  .btn-lg{height:52px;padding:0 26px;font-size:17px;}
  .btn-accent{background:var(--accent);color:#fff;box-shadow:0 4px 16px rgba(188,19,254,.20);}
  .btn-accent:hover{background:var(--accent-hover);color:#fff;}
  .btn-ghost{background:transparent;color:var(--ink-700);border-color:var(--border);}
  .btn-ghost:hover{background:var(--surface-subtle);color:var(--ink-strong);}
  .btn-md img{width:18px;height:18px;display:block;flex:0 0 auto;}
  .btn-lg img{width:20px;height:20px;display:block;flex:0 0 auto;}

  /* All three feature headings share one size. Row A's column is the narrowest, so
     30px is the ceiling that keeps its single-line heading from wrapping. Set it here
     only — do not reintroduce a font-size on the individual h2 elements. */
  .feature-h2{font-size:clamp(24px,3.1vw,30px);}
  /* Sits directly above each row's heading, inside the same 14px-gap box, so the space
     between label and heading is the parent's rather than a margin of its own. */
  .feature-label{font-family:var(--font-sans);font-size:13px;font-weight:700;
    letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);margin:0;}

  .rowD-chrome{display:flex;align-items:center;gap:calc(6 / var(--rowD-basis) * 100cqh);width:100%;height:calc(50 / var(--rowD-basis) * 100cqh);flex-shrink:0;
    padding:calc(10 / var(--rowD-basis) * 100cqh) calc(18 / var(--rowD-basis) * 100cqh) calc(10 / var(--rowD-basis) * 100cqh) 0;}
  .rowD-urlbar{display:flex;align-items:center;flex:1;height:calc(30 / var(--rowD-basis) * 100cqh);min-width:0;align-self:center;
    background:var(--surface);border:1px solid var(--border);border-left:0;border-radius:0 calc(70 / var(--rowD-basis) * 100cqh) calc(70 / var(--rowD-basis) * 100cqh) 0;}
  .rowD-urlbar-line{flex:1;height:calc(3.5 / var(--rowD-basis) * 100cqh);border-radius:calc(10 / var(--rowD-basis) * 100cqh);background:var(--border);min-width:0;}
  .rowD-urlbar-star{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0;
    height:calc(30 / var(--rowD-basis) * 100cqh);padding-left:calc(12 / var(--rowD-basis) * 100cqh);padding-right:calc(16 / var(--rowD-basis) * 100cqh);}
  .rowD-urlbar-star-icon{width:calc(15 / var(--rowD-basis) * 100cqh);height:calc(15 / var(--rowD-basis) * 100cqh);display:block;flex-shrink:0;}
  .rowD-profile{display:flex;align-items:center;justify-content:flex-end;gap:calc(13 / var(--rowD-basis) * 100cqh);
    height:100%;flex-shrink:0;}
  .rowD-profile-pill{display:flex;align-items:center;gap:calc(2 / var(--rowD-basis) * 100cqh);height:calc(30 / var(--rowD-basis) * 100cqh);
    border:0.5px solid var(--border-strong);border-radius:calc(30 / var(--rowD-basis) * 100cqh);overflow:hidden;flex-shrink:0;}
  .rowD-profile-logo{display:flex;align-items:center;justify-content:center;width:calc(30 / var(--rowD-basis) * 100cqh);height:calc(30 / var(--rowD-basis) * 100cqh);
    background:var(--surface);border-radius:calc(20 / var(--rowD-basis) * 100cqh);padding:0 calc(5 / var(--rowD-basis) * 100cqh) calc(1 / var(--rowD-basis) * 100cqh);flex-shrink:0;}
  .rowD-profile-logo img{width:calc(20 / var(--rowD-basis) * 100cqh);height:auto;object-fit:contain;display:block;}
  .rowD-profile-ext{display:flex;align-items:center;justify-content:center;width:calc(30 / var(--rowD-basis) * 100cqh);height:calc(30 / var(--rowD-basis) * 100cqh);
    padding:0 calc(6 / var(--rowD-basis) * 100cqh) calc(1 / var(--rowD-basis) * 100cqh);flex-shrink:0;}
  .rowD-profile-ext-icon{width:calc(16 / var(--rowD-basis) * 100cqh);height:calc(16 / var(--rowD-basis) * 100cqh);display:block;}
  .rowD-profile-sep{width:calc(1 / var(--rowD-basis) * 100cqh);height:calc(20 / var(--rowD-basis) * 100cqh);background:var(--border-strong);flex-shrink:0;}
  .rowD-profile-avatar{width:calc(20 / var(--rowD-basis) * 100cqh);height:calc(20 / var(--rowD-basis) * 100cqh);aspect-ratio:1/1;border-radius:50%;overflow:hidden;flex-shrink:0;
    border:0.3px solid rgba(115,122,136,.3);}
  .rowD-profile-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;}
  .rowA-step-kbd{font-family:inherit;font-size:inherit;font-weight:700;
    letter-spacing:.01em;color:inherit;}

  /* ── HERO — copy over browser, canvas beside ── */
  .hero-figure.hero-camera{position:relative;display:grid;
    grid-template-columns:minmax(0,744px) minmax(0,1fr);gap:48px;overflow:hidden;
    --hero-u:calc(744px / 593);}
  .hero-left{display:flex;flex-direction:column;gap:24px;min-width:0;
    container-type:inline-size;}
  .hero-canvas-cta{display:none;}
  .hero-cta-row{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px;}
  .hero-sub-break{display:none;}
  @media (min-width:821px){
    .hero-sub-break{display:none !important;}
  }
  .hero-text{display:flex;flex-direction:column;align-items:flex-start;gap:24px;
    text-align:left;}
  .hero-browser-slot{min-width:0;width:100%;aspect-ratio:593/434;position:relative;z-index:2;}
  .hero-mockup-wrap{position:absolute;inset:0;z-index:2;
    container-type:inline-size;
    border-radius:calc(12 * 100cqw / 593);box-shadow:var(--shadow-xl);}
  .hero-canvas{align-self:stretch;min-width:0;min-height:0;position:relative;z-index:1;
    display:flex;flex-direction:column;
    container-type:inline-size;--hero-u:calc(100cqw / 593);
    border:1px solid #E6E7EB;}
  .hero-canvas-body,
  .rowA-canvas-body{position:relative;flex:1;min-height:0;width:100%;}
  .hero-canvas-body{--canvas-u:var(--hero-u);}
  .hero-canvas-bleed,
  .rowA-canvas-bleed{position:absolute;inset:-10%;
    -webkit-mask-image:
      linear-gradient(to right,transparent 0%,#000 10%),
      linear-gradient(to left,transparent 0%,#000 10%),
      linear-gradient(to bottom,transparent 0%,#000 10%),
      linear-gradient(to top,transparent 0%,#000 10%);
    -webkit-mask-composite:source-in;
    mask-image:
      linear-gradient(to right,transparent 0%,#000 10%),
      linear-gradient(to left,transparent 0%,#000 10%),
      linear-gradient(to bottom,transparent 0%,#000 10%),
      linear-gradient(to top,transparent 0%,#000 10%);
    mask-composite:intersect;}
  .hero-canvas-bleed::before,
  .rowA-canvas-bleed::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background-color:var(--surface);
    background-image:
      linear-gradient(var(--canvas-grid-line) 1px,transparent 1px),
      linear-gradient(90deg,var(--canvas-grid-line) 1px,transparent 1px);
    background-size:calc(16 * var(--canvas-u)) calc(16 * var(--canvas-u));}
  /* Centred by computed left/top rather than translate(-50%,-50%): the cursor's next
     move reads this element's offsetLeft, which ignores transforms. */
  .hero-canvas-pan{position:absolute;inset:0;z-index:1;}
  .hero-paste{position:absolute;left:0;top:0;display:none;object-fit:contain;}
  .hero-paste--in{display:block;}
  /* The unit is the browser column's width over the Figma frame's 593. .hero-chrome is
     not a container so cqw resolves against .hero-mockup-wrap. */
  .hero-chrome{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;
    --hero-u:calc(100cqw / 593);
    /* 1.7 is no longer the camera scale — the zoom is gone. It is the ratio the overlay
       controls were drawn at on the zoomed frame; the divisor stays so they keep that size. */
    --hero-btn-u:calc(var(--hero-u) / 1.7);
    background:#DFDFDF;
    border-radius:calc(12 * var(--hero-u));box-shadow:0 0 calc(4 * var(--hero-u)) 0 rgba(0,0,0,.25);}
  .hero-header{display:flex;align-items:center;gap:calc(4.5 * var(--hero-u));width:100%;
    height:calc(22 * var(--hero-u));flex-shrink:0;
    padding:calc(4.5 * var(--hero-u)) calc(13 * var(--hero-u)) calc(4.5 * var(--hero-u)) calc(7.5 * var(--hero-u));}
  .hero-header .browser-traffic{height:calc(13 * var(--hero-u));gap:calc(3.5 * var(--hero-u));
    padding:0 calc(4.5 * var(--hero-u)) 0 0;border-radius:0 0 calc(3 * var(--hero-u)) 0;}
  .hero-header .browser-dot{width:calc(6 * var(--hero-u));height:calc(6 * var(--hero-u));}
  .hero-urlbar{display:flex;align-items:center;flex:1;min-width:0;height:100%;
    padding:0 calc(17 * var(--hero-u)) 0 calc(7.5 * var(--hero-u));
    background:#FEFEFE;border:1px solid #E6E7EB;border-radius:calc(70 * var(--hero-u));}
  .hero-urlbar-line{flex:1;min-width:0;height:calc(2 * var(--hero-u));
    border-radius:calc(10 * var(--hero-u));background:#DEE1E6;}
  .hero-profile-logo{display:flex;align-items:center;justify-content:center;flex-shrink:0;
    width:calc(13 * var(--hero-u));height:calc(13 * var(--hero-u));
    padding:calc(1.5 * var(--hero-u)) 0;background:#E1E1E2;border-radius:calc(20 * var(--hero-u));}
  .hero-profile-logo img{width:100%;height:auto;display:block;object-fit:contain;}
  /* Bottom corners match the window's own 12; the top two stay at 4 because they meet
     the header and never show a curve. Without this the window's rounded corner clipped
     at 15.9px while the body stopped at 5.3px, and the overlay's dark fill showed in the
     wedge between them. */
  .hero-body{position:relative;display:flex;flex-direction:row;flex:1;min-height:0;overflow:hidden;
    margin:0 1px 1px;
    background:var(--surface);
    border-radius:calc(4 * var(--hero-u)) calc(4 * var(--hero-u)) calc(12 * var(--hero-u)) calc(12 * var(--hero-u));}
  .hero-body-main{position:relative;display:flex;flex-direction:row;flex:1 1 0;min-width:0;min-height:0;
    overflow:hidden;
    transition:width .75s cubic-bezier(.4,0,.2,1),flex-basis .75s cubic-bezier(.4,0,.2,1);}
  .hero-sidebar{display:flex;flex-direction:column;align-items:center;flex-shrink:0;
    width:calc(30 * var(--hero-u));gap:calc(24 * var(--hero-u));
    padding-top:calc(16 * var(--hero-u));border-right:0.5px solid #C8C8C0;}
  .hero-sidebar-item{display:flex;align-items:center;justify-content:center;width:100%;opacity:.5;}
  .hero-sidebar-icon{display:block;object-fit:contain;}
  .hero-sidebar-icon--home{width:calc(10 * var(--hero-u));height:calc(11 * var(--hero-u));}
  .hero-sidebar-icon--category{width:calc(11 * var(--hero-u));height:calc(11 * var(--hero-u));}
  .hero-sidebar-icon--add{width:calc(10 * var(--hero-u));height:calc(10 * var(--hero-u));}
  .hero-sidebar-icon--notification{width:calc(10 * var(--hero-u));height:calc(11 * var(--hero-u));}
  .hero-sidebar-icon--message{width:calc(12 * var(--hero-u));height:calc(12 * var(--hero-u));}
  /* No height and align-self:start, so the rows take the tiles' own size and the
     gallery grows past the window rather than compressing to fit. .hero-body's
     overflow:hidden does the cutting. With height:100% the six rows were squeezed to
     75px each while the tiles stayed 98px and overlapped. */
  .hero-gallery{display:grid;grid-template-columns:repeat(4,1fr);align-content:start;
    align-self:start;transition:transform .9s cubic-bezier(.4,0,.2,1);
    container-type:inline-size;
    gap:calc(100% * 10 / 563);padding:calc(100% * 10 / 563);flex:1;min-width:0;
    background:var(--surface);border-radius:0 calc(100% * 14 / 563) 0 0;}
  /* Row D side panel — closed at width 0 everywhere; open only under Row D (below). */
  .hero-side-panel{flex:0 0 auto;width:0;min-width:0;max-width:none;align-self:stretch;
    overflow:hidden;background:var(--surface);box-sizing:border-box;
    margin-left:0;padding:0;
    container-type:inline-size;
    display:flex;flex-direction:column;min-height:0;
    transition:width .75s cubic-bezier(.4,0,.2,1);}
  /* Side panel interior — extension layout scaled from 320px basis (100cqw on panel). */
  .hero-sp-dashboard{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;width:100%;
    padding-left:3px;gap:calc(100cqw * 6 / 320);overflow:hidden;}
  .hero-sp-brand{display:flex;align-items:center;flex-shrink:0;box-sizing:border-box;
    min-height:calc(100cqw * 36 / 320);
    padding:calc(100cqw * 6 / 320) calc(100cqw * 8 / 320);
    gap:calc(100cqw * 6 / 320);}
  .hero-sp-brand-logo{width:calc(100cqw * 20 / 320);height:calc(100cqw * 20 / 320);
    display:block;flex-shrink:0;border-radius:calc(100cqw * 5 / 320);}
  .hero-sp-brand-name{font-family:var(--font-display);font-weight:700;line-height:1;
    font-size:calc(100cqw * 14 / 320);letter-spacing:-0.02em;color:var(--ink-strong);
    white-space:nowrap;}
  .hero-sp-header{display:flex;align-items:center;justify-content:flex-start;flex-shrink:0;
    min-height:calc(100cqw * 44 / 320);padding:calc(100cqw * 6 / 320) calc(100cqw * 8 / 320);
    box-sizing:border-box;}
  .hero-sp-avatar{width:calc(100cqw * 26 / 320);height:calc(100cqw * 26 / 320);border-radius:50%;
    object-fit:cover;display:block;flex-shrink:0;}
  .hero-sp-setting-row{--hero-sp-control-inline-size:calc(100cqw * 118.37 / 320);
    display:flex;align-items:center;gap:calc(100cqw * 8 / 320);flex-shrink:0;
    min-height:calc(100cqw * 44 / 320);margin:0 calc(100cqw * 8 / 320);
    padding:calc(100cqw * 6 / 320) calc(100cqw * 8 / 320);box-sizing:border-box;
    border:max(0.5px,1px) solid rgba(0,0,0,.1);background:#F7F7F7;
    border-radius:calc(100cqw * 8 / 320);}
  .hero-sp-setting-label{margin-right:auto;flex-shrink:0;min-width:0;
    font-family:var(--font-sans);font-size:calc(100cqw * 12 / 320);font-weight:500;line-height:1.2;
    color:#6b7280;white-space:nowrap;}
  .hero-sp-chip{flex:0 0 auto;width:calc(var(--hero-sp-control-inline-size) / 2);align-self:stretch;
    display:flex;align-items:center;justify-content:center;box-sizing:border-box;
    border:max(0.5px,1px) solid var(--border);border-radius:calc(100cqw * 6 / 320);
    font-family:var(--font-sans);font-size:calc(100cqw * 12 / 320);font-weight:600;color:#6b7280;}
  .hero-sp-switch{position:relative;display:flex;align-items:center;flex:0 0 auto;
    width:var(--hero-sp-control-inline-size);align-self:stretch;box-sizing:border-box;
    padding:calc(100cqw * 2 / 320);background:var(--accent);
    border:max(0.5px,1px) solid var(--border);border-radius:calc(100cqw * 6 / 320);
    box-shadow:inset 0 calc(100cqw * 1 / 320) calc(100cqw * 2 / 320) rgba(0,0,0,.35);}
  .hero-sp-pill{position:absolute;top:calc(100cqw * 2 / 320);bottom:calc(100cqw * 2 / 320);
    left:calc(100cqw * 2 / 320);width:calc(50% - calc(100cqw * 2 / 320));
    background:#fff;border-radius:calc(100cqw * 4 / 320);pointer-events:none;
    box-shadow:0 calc(100cqw * 1 / 320) calc(100cqw * 4 / 320) rgba(0,0,0,.14);}
  .hero-sp-switch[data-mode="editor"] .hero-sp-pill{transform:translateX(100%);}
  .hero-sp-switch-tab{position:relative;z-index:1;flex:1 1 0;min-width:0;border:none;background:transparent;
    font-family:var(--font-sans);font-size:calc(100cqw * 11 / 320);font-weight:500;line-height:1;
    padding:calc(100cqw * 3.5 / 320) calc(100cqw * 8 / 320);border-radius:calc(100cqw * 4 / 320);
    color:rgba(255,255,255,.7);white-space:nowrap;text-align:center;}
  .hero-sp-switch-tab[aria-selected="true"]{color:#6b7280;}
  .hero-sp-dir{display:flex;align-items:stretch;gap:calc(100cqw * 8 / 320);flex-shrink:0;
    min-height:calc(100cqw * 44 / 320);margin:0 calc(100cqw * 8 / 320);box-sizing:border-box;}
  .hero-sp-dir-folder{flex:1;min-width:0;display:flex;align-items:center;gap:calc(100cqw * 6 / 320);
    padding:calc(100cqw * 6 / 320) calc(100cqw * 10 / 320);box-sizing:border-box;
    background:#F7F7F7;border:max(0.5px,1px) solid rgba(0,0,0,.1);border-radius:calc(100cqw * 6 / 320);}
  .hero-sp-dir-folder svg{width:calc(100cqw * 16 / 320);height:calc(100cqw * 16 / 320);flex-shrink:0;color:#6b7280;}
  .hero-sp-dir-label{flex:1;min-width:0;font-family:var(--font-sans);
    font-size:calc(100cqw * 13 / 320);font-weight:400;line-height:1.2;color:#6b7280;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .hero-sp-list-wrap{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
  .hero-sp-clear-bar{flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;
    gap:calc(100cqw * 8 / 320);padding:calc(100cqw * 2 / 320) calc(100cqw * 8 / 320);
    box-sizing:border-box;}
  .hero-sp-clear-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
    width:calc(100cqw * 28 / 320);height:calc(100cqw * 28 / 320);padding:calc(100cqw * 4 / 320);
    border:none;border-radius:calc(100cqw * 4 / 320);background:transparent;
    color:rgba(0,0,0,.337);box-sizing:border-box;}
  .hero-sp-clear-icon-trash{width:calc(100cqw * 18 / 320);height:calc(100cqw * 18 / 320);display:block;}
  .hero-sp-list-wrap:not(.hero-sp-list-wrap--has-cards) .hero-sp-divider{display:none;}
  .hero-sp-divider{flex-shrink:0;width:100%;display:flex;align-items:center;
    gap:calc(100cqw * 8 / 320);padding:0 calc(100cqw * 12 / 320) calc(100cqw * 4 / 320) calc(100cqw * 12 / 320);
    box-sizing:border-box;}
  .hero-sp-divider::before,.hero-sp-divider::after{content:'';flex:1;height:max(0.5px,calc(100cqw * 1 / 320));
    background:rgba(0,0,0,.149);}
  .hero-sp-divider-label{font-family:var(--font-ui);font-size:calc(100cqw * 9 / 320);font-weight:600;
    color:rgba(0,0,0,.2);letter-spacing:.05em;white-space:nowrap;flex-shrink:0;line-height:1;}
  .hero-sp-list{flex:1;min-height:0;display:flex;flex-wrap:wrap;align-content:flex-start;
    gap:calc(100cqw * 3 / 320);padding:calc(100cqw * 3 / 320) calc(100cqw * 8 / 320);
    box-sizing:border-box;overflow:hidden;}
  .hero-sp-card{width:calc(33.333% - calc(100cqw * 2 / 320));flex-shrink:0;box-sizing:border-box;
    border-radius:calc(100cqw * 4 / 320);overflow:hidden;
    box-shadow:0 calc(100cqw * 1 / 320) calc(100cqw * 3 / 320) rgba(0,0,0,.08);}
  .hero-sp-card--enter{overflow:hidden;}
  .hero-sp-card--enter .hero-sp-card-inner{transform-origin:top center;}
  .hero-sp-card-inner{display:block;width:100%;background:#fff;
    aspect-ratio:350 / 390;overflow:hidden;}
  .hero-sp-card-inner img{width:100%;height:100%;object-fit:cover;display:block;}
  .rowD-mockup-wrap .hero-body--side-panel-closed .hero-side-panel{
    flex:0 0 auto;width:0;min-width:0;max-width:none;margin-left:0;}
  .rowD-mockup-wrap .hero-body--side-panel-open .hero-side-panel{
    width:calc((100% - calc(30 * var(--hero-u))) / 4);margin-left:auto;}
  .rowD-mockup-wrap .hero-body--side-panel-open .hero-body-main{
    border:max(0.5px,1px) solid var(--border);
    border-radius:calc(4 * var(--hero-u)) calc(4 * var(--hero-u)) calc(4 * var(--hero-u)) calc(12 * var(--hero-u));
    box-shadow:calc(2 * var(--hero-u)) 0 calc(3 * var(--hero-u)) rgba(0,0,0,.14);}
  .hero-tile{position:relative;border-radius:calc(100cqw * 8 / 563);overflow:hidden;
    aspect-ratio:174.333/121.333;
    background:var(--surface-key);transition:box-shadow .25s ease,opacity .25s ease;}
  .hero-tile img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
  .hero-tile--tall{grid-row:span 2;aspect-ratio:174.333/252.667;}
  .hero-tile--hot{opacity:1;box-shadow:0 0 calc(100cqw * 13 / 563) 0 var(--accent-bright);}
  @media (min-width:821px){
    .hero-browser-slot .hero-gallery .hero-tile,
    .rowA-browser .hero-gallery .hero-tile{cursor:pointer;}
    .hero-body:has(.hero-overlay.hero-overlay--on) .hero-gallery .hero-tile{cursor:default;}
  }
  .hero-cursor{position:absolute;left:0;top:0;z-index:5;pointer-events:none;
    width:calc(26 * var(--demo-u));height:calc(26 * var(--demo-u));opacity:0;
    transition:transform .75s cubic-bezier(.4,0,.2,1),opacity .25s ease;}
  .hero-cursor--on{opacity:1;}
  .hero-cursor img{width:100%;height:100%;display:block;}
  .hero-tip{position:absolute;left:calc(18 * var(--demo-u));top:calc(-20 * var(--demo-u));
    display:inline-flex;align-items:center;white-space:nowrap;
    padding:calc(4 * var(--demo-u)) calc(8 * var(--demo-u));
    background:var(--accent-bright);border-radius:calc(5 * var(--demo-u));
    font-family:var(--font-sans);font-weight:700;line-height:1;color:#fff;
    font-size:calc(11 * var(--demo-u));
    opacity:0;transition:opacity .3s ease;}
  .hero-tip--in{opacity:1;transition:none;}
  /* Colours below are read from browser-extension/chromium/eraseOverlay.js rather than
     matched by eye: backdrop L91, tools L444-454, hint L369, checkerboard L139-142,
     spinner ring L173. */
  .hero-overlay{position:absolute;inset:0;z-index:2;display:flex;align-items:center;
    justify-content:center;background:rgba(0,0,0,0.82);
    opacity:0;pointer-events:none;transition:opacity .3s ease;}
  .hero-overlay--on{opacity:1;}
  /* Fixed 2000×1333 frame; the picture wrapper carries the image ratio and fits inside.
     Letterbox gaps stay on the figure background rgb(51,51,51). */
  .hero-overlay-figure{position:relative;display:flex;align-items:center;justify-content:center;
    margin:0;width:62%;height:auto;max-height:64%;aspect-ratio:2000/1333;background:rgb(51,51,51);
    -webkit-user-select:none;user-select:none;}
  .hero-overlay-picture{position:relative;flex:0 0 auto;width:auto;height:auto;
    max-width:100%;max-height:100%;min-width:0;min-height:0;--hero-split:1;}
  .hero-overlay-figure img{-webkit-user-drag:none;user-drag:none;pointer-events:none;}
  .hero-overlay-img{display:block;width:100%;height:auto;object-fit:contain;}
  .hero-overlay-after{position:absolute;left:0;top:0;width:100%;height:100%;display:block;
    object-fit:contain;z-index:2;
    clip-path:inset(0 0 0 calc(var(--hero-split)*100%));
    -webkit-clip-path:inset(0 0 0 calc(var(--hero-split)*100%));}
  .hero-overlay-after--alpha{background-color:#ffffff;
    background-image:
      linear-gradient(45deg,#d8d8d8 25%,transparent 25%,transparent 75%,#d8d8d8 75%),
      linear-gradient(45deg,#d8d8d8 25%,transparent 25%,transparent 75%,#d8d8d8 75%);
    background-size:calc(10 * var(--hero-u)) calc(10 * var(--hero-u));
    background-position:0 0,calc(5 * var(--hero-u)) calc(5 * var(--hero-u));}
  .hero-overlay-btn-group{position:absolute;right:0;bottom:calc(100% + 12 * var(--hero-btn-u));
    display:inline-flex;align-items:center;gap:calc(8 * var(--hero-btn-u));}
  .hero-overlay-btn{display:inline-flex;align-items:center;gap:calc(5 * var(--hero-btn-u));
    padding:calc(6 * var(--hero-btn-u)) calc(11 * var(--hero-btn-u));
    background:#7C1FA8;border:1px solid #BC13FE;border-radius:calc(6 * var(--hero-btn-u));
    font-family:var(--font-sans);font-weight:600;line-height:1.4;
    font-size:calc(11 * var(--hero-btn-u));color:#f0f0f0;white-space:nowrap;
    transition:background .15s ease,border-color .15s ease;}
  .hero-overlay-btn--hidden{visibility:hidden;}
  .hero-overlay-btn img{width:calc(11 * var(--hero-btn-u));height:calc(11 * var(--hero-btn-u));display:block;
    filter:brightness(0) invert(1);}
  .hero-overlay-btn--hover{background:#BC13FE;border-color:transparent;}
  /* --press must sit after --hover: the cursor is still on the button while it is
     held down, so both classes are present and the later rule has to win.
     border-color rather than border:none, so the box does not shrink by 2px on press.
     The extension has NO pressed state — it disables with opacity 0.45 instead. This
     grey is kept deliberately, because a demo needs the click to be legible. */
  .hero-overlay-btn--press{background:#8A8A8E;border-color:transparent;}
    /* The extension dims the whole stage while a model runs and captions the ring, so the
       pause explains itself. The overlay covers the figure rather than the image, which is
       the same box here. */
    .hero-busy{position:absolute;inset:0;z-index:3;display:none;
      flex-direction:column;align-items:center;justify-content:center;
      gap:calc(14 * var(--hero-u));
      background:rgba(0,0,0,0.45);pointer-events:none;}
    .hero-busy--on{display:flex;}
    .hero-busy-ring{width:calc(28 * var(--hero-btn-u));height:calc(28 * var(--hero-btn-u));
      border:calc(3 * var(--hero-btn-u)) solid rgba(255,255,255,0.2);
      border-top-color:#BC13FE;border-radius:50%;flex:0 0 auto;
      animation:heroSpin .8s linear infinite;}
    .hero-busy-text{font-family:var(--font-sans);font-weight:600;line-height:1.4;
      font-size:calc(14 * var(--hero-btn-u));color:#ffffff;white-space:nowrap;}
    @property --hero-split{syntax:"<number>";inherits:true;initial-value:0;}
    .hero-slider-clip{position:absolute;inset:0;z-index:3;display:none;
      overflow:hidden;pointer-events:none;container-type:inline-size;}
    .hero-slider-handle{position:absolute;top:0;bottom:0;left:0;
      width:calc(2 * var(--hero-u));background:var(--accent-bright);
      transform:translateX(calc(var(--hero-split,0) * 100cqw - 50%));display:flex;pointer-events:none;
      align-items:center;justify-content:center;
      box-shadow:0 0 0 1px rgba(255,255,255,.5);}
    .hero-slider-knob{flex-shrink:0;display:flex;align-items:center;justify-content:center;
      width:calc(30 * var(--hero-u));height:calc(30 * var(--hero-u));border-radius:50%;
      background:#fff;border:calc(1.5 * var(--hero-u)) solid var(--accent-bright);
      box-shadow:0 calc(3 * var(--hero-u)) calc(12 * var(--hero-u)) rgba(207,0,255,.28);
      color:var(--accent-bright);}
    .hero-slider-knob svg{width:calc(13 * var(--hero-u));height:calc(13 * var(--hero-u));display:block;}
    .hero-slider-knob svg + svg{margin-left:calc(-6 * var(--hero-u));}
    .hero-chrome--live{cursor:url("/assets/landing/icons/hero/icon_cursor_24.svg") 2 1, auto;}
    .hero-overlay--live{pointer-events:auto;}
    .hero-overlay--live .hero-overlay-figure{cursor:ew-resize;touch-action:none;}
    .hero-overlay--live .hero-overlay-btn,
    .hero-overlay--live .hero-overlay-act{cursor:url("/assets/landing/icons/hero/icon_cursor_24.svg") 2 1, auto;}
    .hero-overlay--live .hero-overlay-picture{transition:none;}
    .hero-overlay--live .hero-overlay-after{will-change:clip-path;}
    .hero-overlay--live .hero-slider-clip{display:block;}
    .hero-slider-clip--wipe{display:block;}
    .hero-overlay-picture:has(.hero-slider-clip--wipe){transition:--hero-split 1.4s ease;}
    .hero-slider-clip--wipe .hero-slider-knob{display:none;}
    .hero-slider-clip--wipe .hero-slider-handle{
      width:calc(3 * var(--hero-u));background:#BC13FE;
      box-shadow:0 0 calc(12 * var(--hero-u)) rgba(188,19,254,0.9);
      will-change:transform;}
  @keyframes heroSpin{to{transform:rotate(360deg);}}
    /* The extension's editor puts four buttons on one row under the image: Back and
       Refresh at the left, Upscale beside Clip at the right. The bar spans the figure so
       the two groups sit at its edges, and Clip stays where it always was — which is why
       the cursor still finds it by measuring rather than by a fixed number. */
    .hero-overlay-bar{position:absolute;top:calc(100% + 12 * var(--hero-btn-u));
      left:0;right:0;display:flex;align-items:center;justify-content:space-between;}
    .hero-overlay-bar-left,
    .hero-overlay-bar-right{display:inline-flex;align-items:center;
      gap:calc(8 * var(--hero-btn-u));}

    .hero-overlay-act{position:static;
      display:inline-flex;align-items:center;gap:calc(5 * var(--hero-btn-u));
      padding:calc(6 * var(--hero-btn-u)) calc(11 * var(--hero-btn-u));
      background:#7C1FA8;border:1px solid #BC13FE;border-radius:calc(6 * var(--hero-btn-u));
      font-family:var(--font-sans);font-weight:600;line-height:1.4;
      font-size:calc(11 * var(--hero-btn-u));color:#f0f0f0;white-space:nowrap;
      opacity:1;transition:opacity .35s ease;}
    /* Back, Refresh and Upscale are shown but not used by the demo. The extension greys
       a button it cannot act on rather than hiding it, so the row keeps its shape. */
    .hero-overlay-act--ghost{background:#333333;border-color:#555555;opacity:.55;}
    /* Every bottom-bar icon is white, ghost or not — the extension's Clip icon is white
       too. The landing SVGs ship at #E200FF for the Row B cards, which are unfiltered;
       here the filter overrides that. */
    .hero-overlay-act img{width:calc(11 * var(--hero-btn-u));
      height:calc(11 * var(--hero-btn-u));display:block;filter:brightness(0) invert(1);}
    /* Back and Refresh are only meaningful once something has been done to the image:
       the extension shows them when there is history. They start hidden and fade in when
       the wipe lands. visibility rather than display, so the bar's layout — and Clip's
       position, which the cursor measures — never moves. */
    .hero-overlay-act--late{opacity:0;visibility:hidden;
      transition:opacity .35s ease,visibility 0s linear .35s;}
    .hero-overlay-act--late.hero-overlay-act--in{opacity:.55;visibility:visible;
      transition:opacity .35s ease,visibility 0s;}
  /* Sits opposite the action button, on the same line above the image. The two share
     the 12-unit offset so they stay level however the buttons are scaled. */
  .hero-overlay-tools{position:absolute;left:0;bottom:calc(100% + 12 * var(--hero-btn-u));
    display:inline-flex;align-items:center;gap:calc(5 * var(--hero-btn-u));}
  .hero-tool{display:inline-flex;align-items:center;justify-content:center;
    width:calc(27 * var(--hero-btn-u));height:calc(27 * var(--hero-btn-u));
    background:#333333;border:1px solid #555555;border-radius:calc(6 * var(--hero-btn-u));
    transition:background .15s ease,border-color .15s ease;}
  /* The filter is on the base rule, not just the active one: it forces any source SVG
     to white, so the icon shows whatever colours the file happens to carry. On a white
     button a light-stroked icon was invisible. */
  .hero-tool img{width:calc(12 * var(--hero-btn-u));height:calc(12 * var(--hero-btn-u));
    display:block;filter:brightness(0) invert(1);}
  .hero-tool--on{background:#BC13FE;border-color:transparent;}
  .hero-hint{margin-left:calc(6 * var(--hero-btn-u));
    font-family:var(--font-sans);font-weight:600;line-height:1.4;
    font-size:calc(11 * var(--hero-btn-u));color:#ffffff;white-space:nowrap;}
  .hero-hint--off{display:none;}
  .hero-overlay-act--hover{background:#BC13FE;border-color:transparent;}
  .hero-overlay-act--press{background:#8A8A8E;border-color:transparent;}
  .hero-toast{position:absolute;z-index:4;
    top:calc(10 * var(--hero-btn-u));right:calc(10 * var(--hero-btn-u));
    display:inline-flex;align-items:center;gap:calc(5 * var(--hero-btn-u));
    padding:calc(6 * var(--hero-btn-u)) calc(11 * var(--hero-btn-u));
    background:#BC13FE;border:1px solid #BC13FE;border-radius:999px;
    font-family:var(--font-sans);font-weight:600;line-height:1.4;
    font-size:calc(11 * var(--hero-btn-u));color:#f0f0f0;white-space:nowrap;
    opacity:0;pointer-events:none;transition:opacity .3s ease;}
  .hero-toast img{width:calc(11 * var(--hero-btn-u));height:calc(11 * var(--hero-btn-u));display:block;
    filter:brightness(0) invert(1);}
  .hero-toast--in{opacity:1;}
  .hero-body-main .rowD-toast-stack{
    position:absolute;z-index:4;
    top:calc(10 * var(--hero-btn-u));right:calc(10 * var(--hero-btn-u));
    display:flex;flex-direction:column;align-items:flex-end;
    gap:calc(8 * var(--hero-btn-u));pointer-events:none;}
  .hero-body-main .rowD-toast-stack .hero-toast{
    position:relative;top:auto;right:auto;
    max-height:calc(40 * var(--hero-btn-u));
    transition:opacity .3s ease,max-height .3s ease,padding .3s ease,margin .3s ease;}
  .hero-body-main .rowD-toast-stack .hero-toast.hero-toast--leaving{
    opacity:0;max-height:0;
    padding-top:0;padding-bottom:0;
    margin:0;overflow:hidden;pointer-events:none;}
  .hero-marquee{position:absolute;left:0;top:0;width:0;height:0;display:none;z-index:1;
    border:1px solid #BC13FE;background:rgba(188,19,254,.18);pointer-events:none;}
  .hero-marquee--on{display:block;}

  /* ── Row B — step cards + an empty mockup slot ──
     The card rules are the ones Row A used before its rebuild, renamed to rowB-*. */
  .rowB-cards{display:flex;flex-direction:column;gap:4px;width:100%;}
  .rowB-card{display:flex;align-items:flex-start;gap:14px;width:100%;
    padding:16px 18px;border-radius:12px;background:transparent;
    border:none;border-left:3px solid transparent;
    text-align:left;font:inherit;cursor:pointer;outline:none;
    -webkit-appearance:none;appearance:none;
    transition:background .15s ease,border-color .15s ease;}
  .rowB-card--active{background:var(--accent-06);border-left-color:#BC13FE;}
  .rowB-card-icon{flex-shrink:0;width:40px;height:40px;border-radius:10px;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--surface-subtle);border:1px solid var(--border);
    transition:background .15s ease,border-color .15s ease;}
  .rowB-card--active .rowB-card-icon{background:var(--accent-10);border-color:var(--accent-20);}
  .rowB-card-icon img{width:22px;height:22px;display:block;object-fit:contain;}
  .rowB-card-text{display:flex;flex-direction:column;gap:3px;min-width:0;}
  .rowB-card-title-short{display:none;}
  .rowB-card-title{font-family:var(--font-display);font-weight:700;font-size:18px;
    letter-spacing:-0.01em;color:var(--ink-strong);}
  .rowB-card-desc{font-size:14.5px;line-height:1.45;color:var(--ink-muted);}
  /* Row D's cards. Row B's shape without the button: nothing here is clickable, so the
     active rule, the pointer cursor, the transitions and the 3px left border that marked
     the active card are all gone. Plain pixels, as Row B's are — --rowD-basis lives
     inside the sidepanel window and does not reach this column. */
  /* Percentages, not cqw: border-radius belongs to this element, so its own container
     units resolve against an ancestor instead — the corner came out 17px on mobile and
     61 on desktop. The pair is horizontal / vertical and each resolves against its own
     axis, so both come from dividing the 12px they had on desktop: 12/195 across and
     12/220 down. Written the other way round they made an ellipse. */
  .rowD-clip-card{border-radius:6.15% / 5.45%;}
  .rowD-cards{display:flex;flex-direction:column;gap:10px;width:100%;}
  .rowD-card{display:flex;align-items:center;gap:14px;width:100%;
    padding:16px 0;border-radius:12px;background:transparent;text-align:left;}
  .rowD-card-icon{flex-shrink:0;width:40px;height:40px;border-radius:10px;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--surface-subtle);border:1px solid var(--border);}
  .rowD-card-icon img{width:22px;height:22px;display:block;object-fit:contain;}
  .rowD-card-text{min-width:0;}
  .rowD-card-title{font-family:var(--font-display);font-weight:700;font-size:18px;
    letter-spacing:-0.01em;color:var(--ink-strong);}
  .rowD-card-desc{font-size:18px;line-height:1.45;color:var(--ink-muted);}
  .grrab-inspire-grid .rowC-item-icon{flex-shrink:0;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;}
  #inspireList svg{width:28px;height:28px;display:block;}
  /* Row C — one column everywhere: copy and list, then 16:9 mockup. */
  .rowC-scale-wrap{height:auto;max-width:100%;}
  .grrab-inspire-grid .rowC-intro{min-width:0;max-width:100%;}
  .grrab-inspire-grid{grid-template-columns:1fr;align-items:start;gap:24px;}
  .grrab-inspire-grid > div:nth-child(2){min-height:auto;height:auto;}
  /* Source switcher — height from heading (--rowC-heading-h, JS) capped by four-up width. */
  .grrab-inspire-grid .rowC-list{flex-direction:row;justify-content:center;align-items:stretch;gap:4px;
    height:var(--rowC-list-h,auto);min-width:0;max-width:100%;}
  .grrab-inspire-grid .rowC-item{flex:0 0 auto !important;height:100% !important;
    width:calc(var(--rowC-list-h) / 0.7) !important;min-width:0 !important;box-sizing:border-box;
    flex-direction:column !important;align-items:center !important;justify-content:center !important;
    gap:6px !important;padding:10px 4px !important;}
  .grrab-inspire-grid .rowC-item-text{font-size:13px !important;text-align:center !important;
    line-height:1.2 !important;}
  .grrab-inspire-grid .rowC-item-title{display:block;font-weight:700;color:inherit;}
  /* Bleed envelope: horizontal pad matches gutter (319); shadow blur matches that pad (333d). */
  .rowC-browser-bleed{position:relative;box-sizing:content-box;width:100%;
    --rowC-page-gutter:32px; --rowC-shadow-x:min(64px,var(--rowC-page-gutter));
    --rowC-window-shadow:0 24px 32px rgba(0,0,0,.14);
    --rowC-pad-top:40px; --rowC-pad-bottom:88px;
    --rowC-fade-frac:0.22;
    padding:var(--rowC-pad-top) var(--rowC-shadow-x) var(--rowC-pad-bottom);
    margin:calc(-1 * var(--rowC-pad-top)) calc(-1 * var(--rowC-shadow-x)) calc(-1 * var(--rowC-pad-bottom));
    -webkit-mask-image:linear-gradient(to top,transparent 0,transparent var(--rowC-pad-bottom),
      #000 calc(var(--rowC-pad-bottom) + var(--rowC-fade-frac) * (100% - var(--rowC-pad-top) - var(--rowC-pad-bottom))));
    mask-image:linear-gradient(to top,transparent 0,transparent var(--rowC-pad-bottom),
      #000 calc(var(--rowC-pad-bottom) + var(--rowC-fade-frac) * (100% - var(--rowC-pad-top) - var(--rowC-pad-bottom))));}
  .rowC-browser-window{box-shadow:var(--rowC-window-shadow) !important;}
  /* CTA band — bleed holds shadow + top fade (mirror of Row C bottom fade, 333d/334c). */
  .grrab-cta-bleed{position:relative;box-sizing:content-box;width:100%;
    --cta-page-gutter:32px; --cta-shadow-x:min(64px,var(--cta-page-gutter));
    --cta-fade-frac:0.22; --cta-pad-top:40px; --cta-pad-bottom:60px;
    --cta-window-shadow:0 24px 32px rgba(0,0,0,.14);
    padding:var(--cta-pad-top) var(--cta-shadow-x) var(--cta-pad-bottom);
    margin:calc(-1 * var(--cta-pad-top)) calc(-1 * var(--cta-shadow-x)) calc(-1 * var(--cta-pad-bottom));
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent var(--cta-pad-top),
      #000 calc(var(--cta-pad-top) + var(--cta-fade-frac) * (100% - var(--cta-pad-top) - var(--cta-pad-bottom))));
    mask-image:linear-gradient(to bottom,transparent 0,transparent var(--cta-pad-top),
      #000 calc(var(--cta-pad-top) + var(--cta-fade-frac) * (100% - var(--cta-pad-top) - var(--cta-pad-bottom))));}
  .grrab-cta-inner{position:relative;border-radius:0 0 var(--radius-md) var(--radius-md);
    box-shadow:var(--cta-window-shadow);overflow:hidden;
    --cta-grid-u:var(--demo-u);}
  .grrab-cta-inner::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    border-radius:inherit;
    background-image:
      linear-gradient(var(--canvas-grid-line) 1px,transparent 1px),
      linear-gradient(90deg,var(--canvas-grid-line) 1px,transparent 1px);
    background-size:calc(16 * var(--cta-grid-u)) calc(16 * var(--cta-grid-u));
    background-position:calc(8 * var(--cta-grid-u)) calc(8 * var(--cta-grid-u));
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 100%);
    mask-image:linear-gradient(to bottom,transparent 0%,#000 100%);}
  .grrab-cta-inner > *{position:relative;z-index:1;}
  #inspirePanes{position:relative;width:100%;aspect-ratio:1920/1030;overflow:hidden;
    container-type:inline-size;}
  #inspirePanes .browser-frame{position:absolute;top:0;left:0;width:100%;height:100%;
    display:flex;flex-direction:column;align-items:flex-start;container-type:normal;}
  #inspirePanes .rowC-body-scale{width:645px;flex:0 0 auto;min-height:0;display:flex;flex-direction:column;
    height:calc((100% - calc(22 * var(--demo-u))) / var(--rowC-mock-scale,1));overflow:hidden;
    transform-origin:top left;transform:scale(var(--rowC-mock-scale,1));}
  #inspirePanes .rowC-body-scale > *{width:645px;flex:1;min-height:0;
    container-type:inline-size;container-name:ytmock;--hero-u:calc(100cqw / 593);}
  /* 591/440 rather than the Figma frame's 593/434: at --container-max the 1.25fr column
     is 591px and Row A stands 440 tall, so this makes the two rows match exactly at any
     viewport of 1200px or more, where the container is capped. Below that Row A's height
     comes from its text wrapping and cannot be tracked by a ratio; the rows diverge until
     820px, where everything stacks. The extra ~7px over the Figma height goes to the
     gallery, which is flex:1, and its 1fr rows pass it to the tiles. --rowB-u stays
     width-based, so the header, sidebar and icons keep their size. */
  .rowB-mockup-wrap{min-width:0;width:100%;aspect-ratio:593/434;position:relative;z-index:2;}
  .rowB-browser-copy{display:none;}
  .grrab-rowB > .rowB-mockup-wrap{order:-1;}
  .rowB-cursor{position:absolute;left:0;top:0;z-index:3;pointer-events:none;
    width:calc(26 * var(--demo-u));height:calc(26 * var(--demo-u));opacity:0;
    transition:transform .75s cubic-bezier(.4,0,.2,1),opacity .25s ease;}
  .rowB-cursor--on{opacity:1;}
  .rowB-cursor img{width:100%;height:100%;display:block;}
  .rowB-tip{position:absolute;left:calc(18 * var(--demo-u));top:calc(-20 * var(--demo-u));
    display:inline-flex;align-items:center;white-space:nowrap;
    padding:calc(4 * var(--demo-u)) calc(8 * var(--demo-u));
    background:var(--accent-bright);border-radius:calc(5 * var(--demo-u));
    font-family:var(--font-sans);font-weight:700;line-height:1;color:#fff;
    font-size:calc(11 * var(--demo-u));
    opacity:0;transition:opacity .3s ease;}
  .rowB-tip--in{opacity:1;transition:none;}

  /* ── Copy demo — Instant figure (#firstCopyDemo), between Row A and Row B ── */
  .rowA-figure{position:relative;display:grid;grid-template-columns:minmax(0,1.329fr) minmax(0,1fr);gap:48px;align-items:stretch;margin-bottom:24px;}
  .rowA-side{display:flex;flex-direction:column;gap:24px;min-height:0;align-self:stretch;}
  .rowA-text{display:flex;flex-direction:column;gap:14px;flex-shrink:0;}
  .rowA-text .feature-sub{font-size:22px;}
  .rowA-browser{min-width:0;width:100%;aspect-ratio:593/434;position:relative;z-index:2;}
  .rowA-browser-copy{display:none;}
  .rowA-canvas{min-width:0;width:100%;position:relative;flex:1;min-height:0;border:1px solid var(--border);}
  .rowA-cursor{position:absolute;left:0;top:0;z-index:5;pointer-events:none;
    width:calc(26 * var(--demo-u));height:calc(26 * var(--demo-u));opacity:0;
    transition:transform 1s cubic-bezier(.4,0,.2,1),opacity .25s ease;}
  .rowA-cursor--on{opacity:1;}
  .rowA-cursor img{width:100%;height:100%;display:block;}
  .rowA-tip{position:absolute;left:calc(18 * var(--demo-u));top:calc(-20 * var(--demo-u));
    display:inline-flex;align-items:center;white-space:nowrap;
    padding:calc(4 * var(--demo-u)) calc(8 * var(--demo-u));
    background:var(--accent-bright);border-radius:calc(5 * var(--demo-u));
    font-family:var(--font-sans);font-weight:700;line-height:1;color:#fff;
    font-size:calc(11 * var(--demo-u));
    opacity:0;transition:opacity .3s ease;}
  .rowA-tip--in{opacity:1;transition:none;}
  .rowA-canvas{display:flex;flex-direction:column;position:relative;z-index:1;
    container-type:inline-size;--rowA-u:calc(100cqw / 593);}
  .rowA-canvas-body{--canvas-u:var(--rowA-u);}
  .rowA-canvas-pan{position:absolute;inset:0;z-index:1;}
  .rowA-paste{position:absolute;left:0;top:0;display:none;object-fit:contain;}
  .rowA-paste--in{display:block;}

  /* ── Row C — sidepanel mockup (responsive; cqw basis = Figma 1× frame 520px) ── */
  /* No order: the DOM already puts the mockup first, so removing it is what moves the
     mockup to the left. 545px rather than 100% keeps the panel the size it is now — the
     column grew from 545 to 591 and the mockup would otherwise have grown with it. The
     46px left over sits to its right, which suits a panel whose shadow reaches left. */
  /* Same 593/434 landing slot as Row A/B; the flying browser fills the column. */
  .rowD-media{min-width:0;width:100%;}
  .rowD-mockup-wrap{min-width:0;width:100%;aspect-ratio:593/434;position:relative;z-index:2;}
  .rowD-cursor{position:absolute;left:0;top:0;z-index:3;pointer-events:none;
    width:calc(26 * var(--demo-u));height:calc(26 * var(--demo-u));opacity:0;
    transition:transform 1s cubic-bezier(.4,0,.2,1),opacity .25s ease;}
  .rowD-cursor--on{opacity:1;}
  .rowD-cursor img{width:100%;height:100%;display:block;}
  .rowD-tip{position:absolute;left:calc(18 * var(--demo-u));top:calc(-20 * var(--demo-u));
    display:inline-flex;align-items:center;white-space:nowrap;
    padding:calc(4 * var(--demo-u)) calc(8 * var(--demo-u));
    background:var(--accent-bright);border-radius:calc(5 * var(--demo-u));
    font-family:var(--font-sans);font-weight:700;line-height:1;color:#fff;
    font-size:calc(11 * var(--demo-u));
    opacity:0;transition:opacity .3s ease;}
  .rowD-tip--in{opacity:1;transition:none;}
  .rowD-browser-copy{display:none;}
  .grrab-rowD > .rowD-media{order:-1;}

  /* ── Row B — browser mockup shell (responsive; cqw basis = Figma 1× frame 645px) ── */
  /* Hovering a mockup hands control to the visitor: the built-in active tile and its
     pointer step aside, and the frame takes the same cursor the hero's live mode uses.
     Both the glow and the pointer are addressed by class rather than removed from the
     DOM, so leaving restores them with nothing to rebuild. */
  #inspirePanes.inspire-hover{cursor:url("/assets/landing/icons/hero/icon_cursor_24.svg") 2 1, auto;}
  #inspirePanes.inspire-hover .mock-pointer{display:none;}
  /* :not(:hover) on the tile that OWNS the glow, not on the glowing element itself: in
     YouTube and Instagram the glow sits on a child, so the hover has to be tested on the
     card. Without this the id in #inspirePanes outweighed the hover rule below and the
     authored active tile stayed dark when you pointed at it. */
  #inspirePanes.inspire-hover .yt-video-card:not(:hover) .yt-thumb--glow,
  #inspirePanes.inspire-hover .yt-short-card:not(:hover) .yt-thumb--glow,
  #inspirePanes.inspire-hover .ig-feed-card:not(:hover) .ig-feed-thumb--glow,
  #inspirePanes.inspire-hover .gpt-gen-image--glow:not(:hover),
  #inspirePanes.inspire-hover .pin-feed-card--glow:not(:hover),
  #inspirePanes.inspire-hover .goog-result:not(:hover) .goog-result-thumb--glow,
  #inspirePanes.inspire-hover .vid-screen-video--glow:not(:hover){box-shadow:none;}

  /* Per-tile hover — glow only. Nothing is faded any more, here or at rest: the mockups
     are meant to read as a real browser, and a real feed does not dim the tiles you are
     not pointing at. The four sources still need separate selectors because their tiles
     and glow targets are named differently, and in YouTube and Instagram the glow sits
     on a CHILD of the tile that receives the hover. */
  .inspire-hover .yt-video-card:hover .yt-thumb,
  .inspire-hover .yt-short-card:hover .yt-thumb{box-shadow:0 0 calc(13 * 2 / 3 / 645 * 100cqw) 0 color-mix(in srgb, var(--accent-bright) 66.67%, transparent);}
  .inspire-hover .ig-feed-card:hover .ig-feed-thumb{box-shadow:0 0 calc(20 * 2 / 3 / 645 * 100cqw) 0 rgba(188, 19, 254, 0.667);}
  .inspire-hover .pin-feed-card:hover{box-shadow:0 0 calc(22 * 2 / 3 / 645 * 100cqw) 0 rgba(207, 0, 255, 0.667);}
  .inspire-hover .goog-result:hover .goog-result-thumb{box-shadow:0 0 calc(22 * 2 / 3 / 645 * 100cqw) 0 color-mix(in srgb, var(--accent-bright) 66.67%, transparent);}
  .inspire-hover .vid-screen-video:hover{box-shadow:0 0 calc(22 * 2 / 3 / 645 * 100cqw) 0 color-mix(in srgb, var(--accent-bright) 66.67%, transparent);}
  .inspire-hover .gpt-gen-image:hover{box-shadow:0 0 calc(22 * 2 / 3 / 645 * 100cqw) 0 color-mix(in srgb, var(--accent-bright) 66.67%, transparent);}
  .browser-mockup-wrap{width:100%;height:100%;overflow:hidden;background:var(--surface);position:relative;align-self:stretch;}
  .browser-frame{display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;background:#DFDFDF;font-family:var(--font-sans);container-type:inline-size;container-name:ytmock;}
  /* rowC-header — fixed hero chrome (--demo-u); not inside the 645→pane scale (see
     #inspirePanes .browser-frame > *:not(.rowC-header)). */
  #inspirePanes .rowC-header{display:flex;align-items:center;gap:calc(4.5 * var(--demo-u));width:100%;
    height:calc(22 * var(--demo-u));min-height:calc(22 * var(--demo-u));flex-shrink:0;
    padding:calc(4.5 * var(--demo-u)) calc(13 * var(--demo-u)) calc(4.5 * var(--demo-u)) calc(7.5 * var(--demo-u));}
  #inspirePanes .rowC-header .browser-traffic{height:calc(13 * var(--demo-u));gap:calc(3.5 * var(--demo-u));
    padding:0 calc(4.5 * var(--demo-u)) 0 0;border-radius:0 0 calc(3 * var(--demo-u)) 0;
    background:#DEE1E6;}
  #inspirePanes .rowC-header .browser-dot{width:calc(6 * var(--demo-u));height:calc(6 * var(--demo-u));}
  #inspirePanes .rowC-urlbar{display:flex;align-items:center;flex:1;min-width:0;height:100%;
    padding:0 calc(17 * var(--demo-u)) 0 calc(7.5 * var(--demo-u));
    background:#FEFEFE;border:1px solid #E6E7EB;border-radius:calc(70 * var(--demo-u));}
  #inspirePanes .rowC-profile-logo{display:flex;align-items:center;justify-content:center;flex-shrink:0;
    width:calc(13 * var(--demo-u));height:calc(13 * var(--demo-u));
    padding:calc(1.5 * var(--demo-u)) 0;background:#E1E1E2;border-radius:calc(20 * var(--demo-u));}
  #inspirePanes .rowC-profile-logo img{width:100%;height:auto;display:block;object-fit:contain;}
  #inspirePanes .rowC-urlbar .browser-tab-label{font-size:calc(8 * var(--demo-u));color:#5F6267;line-height:1;}
  .browser-traffic{display:flex;align-items:center;justify-content:center;gap:3px;height:13px;padding:0 4px;background:#DEE1E6;border-radius:0 0 4px 0;flex-shrink:0;}
  .browser-dot{width:4.5px;height:4.5px;border-radius:50%;flex-shrink:0;}
  .browser-dot--red{background:#FF5F57;}
  .browser-dot--yellow{background:#FEBC2E;}
  .browser-dot--green{background:#28C840;}
  .browser-tab-platform{display:flex;flex-direction:row;align-items:center;gap:2.5px;flex-shrink:0;}
  .browser-tab-label{font-family:var(--font-sans);font-size:5px;font-weight:500;color:#000;line-height:1.2;white-space:nowrap;}
  .yt-slot-img{display:block;width:100%;height:100%;object-fit:contain;}
  .yt-body{display:flex;flex:1;min-height:0;background:var(--surface);overflow:hidden;
    border-radius:calc(4 * var(--demo-u) / var(--rowC-mock-scale,1)) calc(4 * var(--demo-u) / var(--rowC-mock-scale,1)) 0 0;}
  .yt-sidebar{width:25px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 0 8px;}
  .yt-sidebar-menu{width:100%;height:19px;display:flex;align-items:center;justify-content:center;}
  .yt-sidebar-menu-icon{width:6px;height:5px;display:block;flex-shrink:0;}
  .yt-sidebar-nav{display:flex;flex-direction:column;align-items:center;gap:11px;width:100%;}
  .yt-sidebar-item{display:flex;flex-direction:column;align-items:center;gap:4px;}
  .yt-sidebar-icon{width:8px;height:8px;opacity:.85;display:block;flex-shrink:0;}
  .yt-sidebar-icon.yt-sidebar-icon--shorts{height:9px;}
  .yt-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(4 / 645 * 100cqw);}
  .yt-topbar{display:flex;align-items:center;padding:calc(4 / 645 * 100cqw);gap:0;flex-shrink:0;width:100%;}
  .yt-logo{width:calc(35 / 645 * 100cqw);height:calc(15 / 645 * 100cqw);flex-shrink:0;display:block;}
  .yt-logo .yt-slot-img{object-position:left center;}
  .yt-search-wrap{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;padding-inline:calc(10 / 645 * 100cqw);}
  .yt-search{display:flex;align-items:stretch;width:100%;max-width:calc(211 / 645 * 100cqw);height:calc(14 / 645 * 100cqw);margin-inline:auto;border:max(1px,calc(0.3 / 645 * 100cqw)) solid #D3D3D3;border-radius:calc(9 / 645 * 100cqw);overflow:hidden;flex-shrink:0;}
  .yt-search-input{flex:1;display:flex;align-items:center;padding:0 calc(6 / 645 * 100cqw);min-width:0;}
  .yt-search-input span{font-size:clamp(8px,calc(6 / 645 * 100cqw),12px);color:#757575;letter-spacing:calc(-0.258 / 645 * 100cqw);white-space:nowrap;}
  .yt-search-btn{width:calc(22 / 645 * 100cqw);background:#F8F8F8;border-left:max(1px,calc(0.3 / 645 * 100cqw)) solid #D3D3D3;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .yt-search-btn svg{width:calc(7 / 645 * 100cqw);height:calc(7 / 645 * 100cqw);stroke:#333;fill:none;stroke-width:2;}
  .yt-topbar-right{width:calc(80 / 645 * 100cqw);flex-shrink:0;}
  .yt-feed{flex:1;min-height:0;display:flex;flex-direction:column;gap:calc(12 / 645 * 100cqw);padding:calc(12 / 645 * 100cqw) calc(8 / 645 * 100cqw);overflow:hidden;}
  .yt-videos{display:flex;gap:calc(6 / 645 * 100cqw);flex-shrink:0;width:100%;}
  .yt-video-card{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(4 / 645 * 100cqw);aspect-ratio:197.33/131;}

  .yt-thumb{position:relative;background:linear-gradient(145deg,#E4E5EA 0%,#D0D2D8 55%,#C4C6CE 100%);border-radius:calc(5 / 645 * 100cqw);flex:1;min-height:0;overflow:hidden;}
  .yt-thumb--glow{box-shadow:0 0 calc(13 * 2 / 3 / 645 * 100cqw) 0 color-mix(in srgb, var(--accent-bright) 66.67%, transparent);}
  .yt-thumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
  .yt-thumb--short{flex-shrink:0;aspect-ratio:116/182.29;border-radius:calc(3 / 645 * 100cqw);}
  .yt-meta{display:flex;gap:calc(3 / 645 * 100cqw);align-items:flex-start;opacity:.5;flex-shrink:0;min-height:calc(16 / 645 * 100cqw);}
  .yt-meta-avatar{width:calc(13 / 645 * 100cqw);aspect-ratio:1/1;border-radius:50%;background:#2D1A61;flex-shrink:0;}
  .yt-meta-lines{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(3 / 645 * 100cqw);padding:calc(2 / 645 * 100cqw) 0;justify-content:center;}
  .yt-meta-line{height:calc(5 / 645 * 100cqw);border-radius:calc(10 / 645 * 100cqw);background:#D7D8DD;}
  .yt-meta-line--short{width:calc(45 / 645 * 100cqw);height:calc(4 / 645 * 100cqw);}
  .yt-shorts-section{display:flex;flex-direction:column;gap:calc(6 / 645 * 100cqw);flex-shrink:0;width:100%;}
  .yt-shorts-label{display:flex;align-items:center;gap:calc(2 / 645 * 100cqw);font-size:clamp(8px,calc(5 / 645 * 100cqw),11px);font-weight:700;color:var(--ink-strong);}
  .yt-shorts-icon{width:calc(5 / 645 * 100cqw);height:calc(7 / 645 * 100cqw);flex-shrink:0;object-fit:contain;}
  .yt-shorts{display:flex;gap:calc(6 / 645 * 100cqw);width:100%;}
  .yt-short-card{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(4 / 645 * 100cqw);aspect-ratio:82/143;}

  /* ── Row B — Instagram-in-browser mockup body (responsive content; fixed sidebar rail) ── */
  .ig-slot-img{display:block;width:100%;height:100%;object-fit:contain;}
  .ig-body{display:flex;flex:1;min-height:0;align-items:center;background:#FFFFFF;overflow:hidden;
    border-radius:calc(4 * var(--demo-u) / var(--rowC-mock-scale,1)) calc(4 * var(--demo-u) / var(--rowC-mock-scale,1)) 0 0;}
  .ig-sidebar{width:25px;flex-shrink:0;display:flex;flex-direction:column;align-items:stretch;gap:9px;height:100%;}
  .ig-logo{width:100%;height:25px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .ig-logo .ig-slot-img{height:50%;width:auto;display:block;}
  .ig-sidebar-nav{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;width:100%;}
  .ig-sidebar-item{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:11px;}
  .ig-sidebar-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .ig-sidebar-icon--home{width:11px;height:9px;}
  .ig-sidebar-icon--shorts{width:11px;height:9px;}
  .ig-sidebar-icon--message{width:11px;height:8px;}
  .ig-sidebar-icon--search{width:11px;height:9px;}
  .ig-sidebar-icon--favorite{width:11px;height:8.59px;}
  .ig-sidebar-icon--add{width:11px;height:9px;}
  .ig-sidebar-icon--hamburgerbar{width:11px;height:9.67px;}
  .ig-sidebar-icon--category{width:11px;height:9px;}
  .ig-profile-avatar{width:10px;height:10px;aspect-ratio:1/1;border:1px solid rgba(217,217,217,.5);border-radius:20px;overflow:hidden;flex-shrink:0;}
  .ig-profile-avatar .ig-slot-img{width:100%;height:100%;object-fit:cover;border-radius:20px;}
  .ig-sidebar-footer{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:15px;padding-bottom:20px;opacity:.5;width:100%;flex-shrink:0;}
  .ig-main{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;min-height:0;overflow:hidden;}
  .ig-feed-card{display:flex;flex-direction:column;width:100%;max-width:223px;aspect-ratio:225/326.063;gap:calc(10 / 645 * 100cqw);padding:calc(6 / 645 * 100cqw) calc(12 / 645 * 100cqw);background:#FFFFFF;flex-shrink:0;box-sizing:border-box;}

  .ig-feed{display:flex;flex-direction:column;align-items:flex-start;gap:calc(12 / 645 * 100cqw);width:100%;flex:1;min-height:0;}
  .ig-feed-header{display:flex;align-items:center;gap:calc(10 / 645 * 100cqw);padding:0 calc(1 / 645 * 100cqw);width:100%;box-sizing:border-box;flex-shrink:0;}
  .ig-feed-profile{display:flex;align-items:center;gap:calc(4 / 645 * 100cqw);flex:1;min-width:0;}
  .ig-feed-profile-avatar{width:18px;height:18px;aspect-ratio:1/1;background:#000000;border-radius:50%;flex-shrink:0;}
  .ig-feed-profile-lines{display:flex;flex-direction:column;align-items:flex-start;gap:calc(2 / 645 * 100cqw);flex:1;min-width:0;height:calc(16 / 645 * 100cqw);}
  .ig-feed-profile-line{width:100%;max-width:calc(94 / 645 * 100cqw);height:calc(4 / 645 * 100cqw);background:#D7D8DD;border-radius:calc(10 / 645 * 100cqw);flex-shrink:0;}
  .ig-feed-profile-sub{font-family:var(--font-sans);font-size:clamp(6px,calc(6 / 645 * 100cqw),8px);font-weight:400;color:#000000;line-height:1;width:100%;}
  .ig-feed-btn{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-shrink:0;overflow:hidden;}
  .ig-feed-follow{display:flex;align-items:center;justify-content:center;padding:6px 10px;background:#F1F2F5;border-radius:4px;flex-shrink:0;}
  .ig-feed-follow span{font-family:var(--font-sans);font-size:clamp(6px,calc(7 / 645 * 100cqw),9px);font-weight:600;color:#000000;line-height:1;white-space:nowrap;}
  .ig-feed-menubar{width:5px;height:1px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .ig-feed-menubar .ig-slot-img{width:5px;height:1px;object-fit:contain;}
  .ig-feed-thumb{position:relative;width:100%;aspect-ratio:269/336;border-radius:calc(4 / 645 * 100cqw);background:linear-gradient(145deg,#E4E5EA 0%,#D0D2D8 55%,#C4C6CE 100%);flex-shrink:0;overflow:hidden;}
  .ig-feed-thumb--glow{box-shadow:0 0 calc(20 * 2 / 3 / 645 * 100cqw) 0 rgba(188, 19, 254, 0.667);}
  .ig-feed-thumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
  .ig-meta{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:calc(6 / 645 * 100cqw);padding:0 calc(1 / 645 * 100cqw);width:100%;opacity:.3;box-sizing:border-box;flex-shrink:0;}

  .ig-chips-wrap{display:flex;align-items:center;justify-content:space-between;padding:0 calc(1 / 645 * 100cqw);width:100%;box-sizing:border-box;}
  .ig-chips-left{display:flex;align-items:center;gap:calc(8 / 645 * 100cqw);flex-shrink:0;}
  .ig-chips-right{display:flex;align-items:center;justify-content:flex-end;flex:1;min-width:0;}
  .ig-chip{display:flex;align-items:center;gap:calc(4 / 645 * 100cqw);flex-shrink:0;}
  .ig-chip-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .ig-chip-icon--likes{width:calc(9 / 645 * 100cqw);height:calc(8 / 645 * 100cqw);}
  .ig-chip-icon--reply{width:calc(8 / 645 * 100cqw);height:calc(8 / 645 * 100cqw);}
  .ig-chip-icon--retweet{width:calc(6 / 645 * 100cqw);height:calc(8 / 645 * 100cqw);}
  .ig-chip-icon--send{width:calc(9 / 645 * 100cqw);height:calc(8 / 645 * 100cqw);}
  .ig-chip-icon--save{width:calc(7 / 645 * 100cqw);height:calc(8 / 645 * 100cqw);}
  .ig-chip-count{font-family:var(--font-sans);font-size:clamp(6px,calc(7 / 645 * 100cqw),9px);font-weight:600;color:#000000;letter-spacing:calc(0.3 / 645 * 100cqw);line-height:1;white-space:nowrap;}
  .ig-meta-lines{display:flex;align-items:center;gap:calc(4 / 645 * 100cqw);height:calc(8 / 645 * 100cqw);width:100%;flex-shrink:0;}
  .ig-meta-line{width:calc(46 / 645 * 100cqw);height:calc(4 / 645 * 100cqw);background:#D7D8DD;border-radius:calc(10 / 645 * 100cqw);flex-shrink:0;}
  .ig-meta-line--short{flex:1;min-width:0;max-width:calc(46 / 645 * 100cqw);height:calc(3 / 645 * 100cqw);background:#D7D8DD;border-radius:calc(10 / 645 * 100cqw);}

  /* ── Row B — Pinterest-in-browser mockup body (responsive content; fixed sidebar + topbar heights) ── */
  .pin-slot-img{display:block;width:100%;height:100%;object-fit:contain;}
  .pin-body{display:flex;flex:1;min-height:0;overflow:hidden;background:#FFFFFF;
    border-radius:calc(4 * var(--demo-u) / var(--rowC-mock-scale,1)) calc(4 * var(--demo-u) / var(--rowC-mock-scale,1)) 0 0;
    box-shadow:calc(4 / 645 * 100cqw) calc(4 / 645 * 100cqw) calc(4 / 645 * 100cqw) rgba(0,0,0,.25);}
  .pin-sidebar{width:25px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:9px;height:100%;box-sizing:border-box;}
  .pin-logo{width:100%;height:25px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .pin-logo .pin-slot-img{height:50%;width:auto;display:block;}
  .pin-sidebar-nav{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;gap:21px;width:100%;opacity:.5;}
  .pin-sidebar-item{width:100%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .pin-sidebar-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .pin-sidebar-icon--home{width:9px;height:10px;}
  .pin-sidebar-icon--category{width:10px;height:10px;}
  .pin-sidebar-icon--add{width:9px;height:9px;}
  .pin-sidebar-icon--notification{width:9px;height:10px;}
  .pin-sidebar-icon--message{width:11px;height:11px;}
  .pin-main{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;min-height:0;overflow:hidden;}
  .pin-topbar{display:flex;align-items:center;width:100%;padding:calc(4 / 645 * 100cqw) calc(6 / 645 * 100cqw);flex-shrink:0;box-sizing:border-box;}
  .pin-search{display:flex;align-items:center;gap:calc(4 / 645 * 100cqw);flex:1;height:15px;padding:calc(4 / 645 * 100cqw) calc(7 / 645 * 100cqw);background:#E5E5E1;border-radius:calc(3 / 645 * 100cqw);overflow:hidden;box-sizing:border-box;}
  .pin-search-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .pin-search-icon--search{height:100%;width:auto;aspect-ratio:61/62.5;}
  .pin-search-icon--search .pin-slot-img{height:100%;width:auto;object-fit:contain;}
  .pin-search-icon--close{width:calc(6 / 645 * 100cqw);height:calc(6 / 645 * 100cqw);}
  .pin-search-input{display:flex;align-items:center;flex:1;min-width:0;height:100%;}
  .pin-search-skeleton{width:100%;max-width:187px;height:calc(2 / 645 * 100cqw);background:rgba(98,98,90,.5);opacity:.3;border-radius:calc(10 / 645 * 100cqw);flex-shrink:0;}
  .pin-feed{display:flex;flex-direction:row;align-items:flex-start;gap:calc(5 / 645 * 100cqw);padding:calc(4 / 645 * 100cqw);width:100%;flex-shrink:0;box-sizing:border-box;}
  .pin-feed-col{display:flex;flex-direction:column;align-items:stretch;gap:calc(5 / 645 * 100cqw);flex:1;min-width:0;}

  .pin-feed-card{position:relative;width:100%;border-radius:calc(8 / 645 * 100cqw);background:linear-gradient(145deg,#E4E5EA 0%,#D0D2D8 55%,#C4C6CE 100%);flex-shrink:0;overflow:hidden;}
  .pin-feed-card--glow{box-shadow:0 0 calc(22 * 2 / 3 / 645 * 100cqw) 0 rgba(207, 0, 255, 0.667);}
  .pin-feed-card img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}

  /* ── Row C — Google Images mockup (645 cqw basis, light UI) ── */
  .goog-slot-img{display:block;width:100%;height:100%;object-fit:contain;}
  .goog-body{display:flex;flex:1;min-height:0;width:100%;background:#FFFFFF;overflow:hidden;
    border-radius:calc(4 * var(--demo-u) / var(--rowC-mock-scale,1)) calc(4 * var(--demo-u) / var(--rowC-mock-scale,1)) 0 0;}
  .goog-main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0;gap:calc(4 / 645 * 100cqw);}
  .goog-topbar{display:flex;align-items:center;gap:calc(12 / 645 * 100cqw);padding:calc(6 / 645 * 100cqw) calc(10 / 645 * 100cqw);flex-shrink:0;width:100%;box-sizing:border-box;}
  .goog-logo{padding-left:calc(12 / 645 * 100cqw);width:calc(40 / 645 * 100cqw);height:calc(20 / 645 * 100cqw);flex-shrink:0;display:block;box-sizing:border-box;}
  .goog-search-wrap{flex:1;min-width:0;display:flex;justify-content:flex-start;}
  .goog-search{display:flex;align-items:stretch;width:100%;max-width:calc(280 / 645 * 100cqw);height:calc(16 / 645 * 100cqw);
    border:max(1px,calc(0.3 / 645 * 100cqw)) solid #DFE1E5;border-radius:calc(18 / 645 * 100cqw);overflow:hidden;flex-shrink:0;
    box-shadow:0 calc(1 / 645 * 100cqw) calc(2 / 645 * 100cqw) rgba(60,64,67,.08);}
  .goog-search-input{flex:1;display:flex;align-items:center;padding:0 calc(10 / 645 * 100cqw);min-width:0;}
  .goog-search-input .goog-search-query-line{width:58%;flex-shrink:0;}
  .goog-search-btn{width:calc(24 / 645 * 100cqw);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .goog-search-btn svg{width:calc(8 / 645 * 100cqw);height:calc(8 / 645 * 100cqw);stroke:rgba(71, 71, 71, 1);fill:none;stroke-width:2;}
  .goog-tabs{display:flex;align-items:flex-start;gap:calc(10 / 645 * 100cqw);padding:0 calc(70 / 645 * 100cqw);
    border-bottom:max(1px,calc(0.3 / 645 * 100cqw)) solid #EBEBEB;flex-shrink:0;overflow:hidden;}
  .goog-tab{font-size:clamp(6px,calc(6 / 645 * 100cqw),10px);color:#70757A;line-height:1.2;white-space:nowrap;flex-shrink:0;}
  .goog-tab--active{color:rgba(71, 71, 71, 1);font-weight:600;padding-bottom:3px;border-bottom:1px solid rgba(71, 71, 71, 1);}
  .goog-grid{display:flex;flex-direction:row;align-items:flex-start;gap:calc(2 / 645 * 100cqw);padding:calc(6 / 645 * 100cqw) calc(8 / 645 * 100cqw);
    flex:1;min-height:0;overflow:hidden;width:100%;box-sizing:border-box;}
  .goog-grid-col{display:flex;flex-direction:column;align-items:stretch;gap:calc(2 / 645 * 100cqw);flex:1;min-width:0;}
  .goog-result{display:flex;flex-direction:column;gap:calc(2 / 645 * 100cqw);width:100%;flex-shrink:0;}
  .goog-result-thumb{position:relative;width:100%;border-radius:calc(4 / 645 * 100cqw);
    background:linear-gradient(145deg,#E4E5EA 0%,#D0D2D8 55%,#C4C6CE 100%);overflow:hidden;flex-shrink:0;}
  .goog-result-thumb--glow{box-shadow:0 0 calc(22 * 2 / 3 / 645 * 100cqw) 0 color-mix(in srgb, var(--accent-bright) 66.67%, transparent);}
  .goog-result-thumb--glow .mock-pointer{left:48%;top:38%;}
  .goog-result-thumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
  .goog-result-thumb img.goog-result-img--failed{display:none;}
  .goog-result-meta{display:flex;flex-direction:column;gap:calc(1 / 645 * 100cqw);opacity:.55;flex-shrink:0;padding-bottom:calc(1 / 645 * 100cqw);}
  .goog-result-line{height:calc(3 / 645 * 100cqw);border-radius:calc(10 / 645 * 100cqw);background:#D7D8DD;width:100%;}
  .goog-result-line--short{width:72%;height:calc(2.5 / 645 * 100cqw);}

  /* ── Row B — Video mockup (Figma .browser-frame 645x442, body 645x414) ── */
  .vid-body{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;background:#FFFFFF;overflow:hidden;
    border-radius:calc(4 * var(--demo-u) / var(--rowC-mock-scale,1)) calc(4 * var(--demo-u) / var(--rowC-mock-scale,1)) 0 0;}
  /* Fixed to the frame's own scale rather than height:100%. With 100% it swallowed the
     whole body, so the row's extra height went to .vid-screen and stretched the video;
     .vid-bottom was left at 5px. 334 is the measured 336 converted to the 645 basis the
     rest of this mockup uses, so .vid-bottom now takes the remainder. */
  .vid-main{display:flex;flex-direction:column;width:100%;height:calc(334 / 645 * 100cqw);flex-shrink:0;background:#0F0F0F;overflow:hidden;}
  .vid-bottom{display:flex;flex-direction:row;align-items:flex-start;flex:1;min-height:0;width:100%;gap:calc(10 / 645 * 100cqw);padding:calc(5 / 645 * 100cqw) calc(10 / 645 * 100cqw) 0;box-sizing:border-box;overflow:hidden;}
  .vid-topbar{display:flex;flex-direction:row;align-items:center;width:100%;height:calc(27 / 645 * 100cqw);padding:calc(4 / 645 * 100cqw);flex-shrink:0;gap:calc(4 / 645 * 100cqw);}
  .vid-sidebar-menu{width:calc(19 / 645 * 100cqw);height:calc(19 / 645 * 100cqw);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
  .vid-sidebar-menu img{width:calc(6 / 645 * 100cqw);height:calc(5 / 645 * 100cqw);display:block;}
  .vid-logo{width:calc(36 / 645 * 100cqw);height:calc(8 / 645 * 100cqw);flex-shrink:0;display:block;}
  .vid-logo img{width:100%;height:100%;display:block;}
  .vid-search-wrap{display:flex;flex-direction:column;flex:1;min-width:0;align-items:center;padding-inline:calc(10 / 645 * 100cqw);}
  .vid-search{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%;max-width:calc(211 / 645 * 100cqw);height:calc(14 / 645 * 100cqw);border-radius:calc(9 / 645 * 100cqw);border:max(0.5px,calc(0.3 / 645 * 100cqw)) solid rgba(255,255,255,.1);overflow:hidden;box-sizing:border-box;flex-shrink:0;}
  .vid-search-input{display:flex;flex-direction:row;align-items:center;padding:0 calc(6 / 645 * 100cqw);flex:1;min-width:0;}
  .vid-search-text{font-family:var(--font-ui);font-size:calc(6 / 645 * 100cqw);line-height:1;color:#757575;white-space:nowrap;}
  .vid-search-btn{display:flex;flex-direction:row;align-items:center;justify-content:center;width:calc(22 / 645 * 100cqw);height:100%;background:rgba(255,255,255,.1);flex-shrink:0;border-left:max(0.5px,calc(0.3 / 645 * 100cqw)) solid rgba(255,255,255,.1);}
  .vid-search-btn img{width:calc(7 / 645 * 100cqw);height:calc(7 / 645 * 100cqw);display:block;}
  .vid-topbar-right{width:calc(80 / 645 * 100cqw);height:calc(16 / 645 * 100cqw);flex-shrink:0;}
  .vid-screen{position:relative;flex:1;min-height:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;}
  .vid-screen-video{position:relative;width:calc(606.222 / 645 * 100cqw);height:100%;flex-shrink:0;overflow:hidden;}
  .vid-screen-video img{width:100%;height:100%;object-fit:cover;display:block;}
  .vid-screen-controller{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;height:calc(19 / 645 * 100cqw);padding:0 calc(3 / 645 * 100cqw);box-sizing:border-box;z-index:2;}
  .vid-control-playbar{display:flex;flex-direction:row;align-items:center;width:100%;height:calc(2 / 645 * 100cqw);background:#544E4B;border-radius:calc(6 / 645 * 100cqw);flex-shrink:0;}
  .vid-playbar-played{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;position:relative;width:15.8%;height:100%;background:#FF0025;border-radius:calc(6 / 645 * 100cqw);}
  .vid-playbar-point{width:calc(5 / 645 * 100cqw);height:calc(5 / 645 * 100cqw);border-radius:50%;background:#FFFFFF;flex-shrink:0;margin-right:calc(-2.5 / 645 * 100cqw);}
  .vid-control-container{display:flex;flex-direction:row;align-items:center;gap:calc(3 / 645 * 100cqw);flex:1;min-height:0;padding:calc(2 / 645 * 100cqw) calc(5 / 645 * 100cqw);box-sizing:border-box;}
  .vid-control-left{display:flex;flex-direction:row;align-items:center;gap:calc(3 / 645 * 100cqw);flex-shrink:0;}
  .vid-control-playbtn{width:calc(7 / 645 * 100cqw);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
  .vid-control-playbtn img{width:calc(7 / 645 * 100cqw);height:calc(7 / 645 * 100cqw);display:block;}
  .vid-control-etc{display:flex;flex-direction:row;align-items:center;gap:calc(10 / 645 * 100cqw);padding:0 calc(5 / 645 * 100cqw);background:rgba(0,0,0,.3);border-radius:calc(8 / 645 * 100cqw);height:calc(13 / 645 * 100cqw);box-sizing:border-box;flex-shrink:0;}
  .vid-icon-volume{width:calc(8 / 645 * 100cqw);height:calc(6 / 645 * 100cqw);display:block;flex-shrink:0;}
  .vid-control-time{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:calc(22 / 645 * 100cqw);font-family:var(--font-ui);font-size:calc(4 / 645 * 100cqw);line-height:1;color:#FFFFFF;flex-shrink:0;}
  .vid-control-chapter{display:flex;flex-direction:row;align-items:center;gap:calc(3 / 645 * 100cqw);padding:0 calc(5 / 645 * 100cqw);background:rgba(0,0,0,.3);border-radius:calc(8 / 645 * 100cqw);height:calc(13 / 645 * 100cqw);box-sizing:border-box;flex-shrink:0;}
  .vid-chapter-label{font-family:var(--font-ui);font-size:calc(5 / 645 * 100cqw);line-height:1;color:#FFFFFF;white-space:nowrap;}
  .vid-icon-chapter{width:calc(2 / 645 * 100cqw);height:calc(3.5 / 645 * 100cqw);display:block;flex-shrink:0;}
  .vid-control-right{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;flex:1;min-width:0;}
  .vid-control-setting{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:calc(79 / 645 * 100cqw);height:calc(13 / 645 * 100cqw);padding:calc(3 / 645 * 100cqw) calc(4 / 645 * 100cqw);background:rgba(0,0,0,.3);border-radius:calc(8 / 645 * 100cqw);box-sizing:border-box;flex-shrink:0;}
  .vid-setting-relay{display:inline-flex;align-items:center;justify-content:flex-end;width:calc(10 / 645 * 100cqw);height:calc(7 / 645 * 100cqw);padding:calc(1 / 645 * 100cqw) calc(0.3 / 645 * 100cqw);box-sizing:border-box;background:#FFFFFF;border-radius:calc(8 / 645 * 100cqw);flex-shrink:0;overflow:hidden;}
  .vid-setting-relay img{height:100%;width:auto;aspect-ratio:1;display:block;flex-shrink:0;}
  .vid-icon-transcription{width:calc(8.556 / 645 * 100cqw);height:calc(7 / 645 * 100cqw);display:block;flex-shrink:0;}
  .vid-icon-setting{width:calc(6.822 / 645 * 100cqw);height:calc(7 / 645 * 100cqw);display:block;flex-shrink:0;}
  .vid-icon-view{width:calc(8.522 / 645 * 100cqw);height:calc(7 / 645 * 100cqw);display:block;flex-shrink:0;}
  .vid-icon-size{width:calc(6.968 / 645 * 100cqw);height:calc(7 / 645 * 100cqw);display:block;flex-shrink:0;}
  .vid-screen-video--glow{box-shadow:0 0 calc(22 * 2 / 3 / 645 * 100cqw) 0 color-mix(in srgb, var(--accent-bright) 66.67%, transparent);}

  /* ── Row C — ChatGPT-in-browser mockup (645 cqw basis, light UI) ── */
  .gpt-slot-img{display:block;width:100%;height:100%;object-fit:contain;}
  .gpt-body{display:flex;flex:1;min-height:0;width:100%;background:#FFFFFF;overflow:hidden;
    border-radius:calc(4 * var(--demo-u) / var(--rowC-mock-scale,1)) calc(4 * var(--demo-u) / var(--rowC-mock-scale,1)) 0 0;}
  .gpt-sidebar{width:calc(72 / 645 * 100cqw);flex-shrink:0;display:flex;flex-direction:column;gap:calc(8 / 645 * 100cqw);
    padding:calc(8 / 645 * 100cqw) calc(6 / 645 * 100cqw);background:#F9F9F9;border-right:max(1px,calc(0.5 / 645 * 100cqw)) solid #ECECEC;box-sizing:border-box;}
  .gpt-sidebar-new{display:flex;align-items:center;justify-content:center;width:100%;height:calc(18 / 645 * 100cqw);
    border:max(1px,calc(0.5 / 645 * 100cqw)) solid #D9D9D9;border-radius:calc(6 / 645 * 100cqw);flex-shrink:0;background:#FFFFFF;}
  .gpt-sidebar-new-icon{font-size:calc(10 / 645 * 100cqw);line-height:1;color:#5F6267;font-weight:400;}
  .gpt-sidebar-list{display:flex;flex-direction:column;gap:calc(6 / 645 * 100cqw);width:100%;flex:1;min-height:0;opacity:.55;padding-top:calc(4 / 645 * 100cqw);}
  .gpt-line{display:block;border-radius:calc(10 / 645 * 100cqw);background:#D7D8DD;flex-shrink:0;max-width:100%;}
  .gpt-main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0;background:#FFFFFF;}
  .gpt-thread{flex:1;min-height:0;display:flex;flex-direction:column;gap:calc(10 / 645 * 100cqw);
    padding:calc(10 / 645 * 100cqw) calc(50 / 645 * 100cqw);overflow:hidden;box-sizing:border-box;}
  .gpt-msg{display:flex;width:100%;flex-shrink:0;}
  .gpt-msg--user{justify-content:flex-end;}
  .gpt-msg--assistant{flex-direction:column;align-items:flex-start;gap:calc(8 / 645 * 100cqw);}
  .gpt-user-bubble{max-width:72%;width:max-content;height:calc(17 / 645 * 100cqw);
    padding:0 calc(5.75 / 645 * 100cqw);background:#F4F4F4;border-radius:calc(6 / 645 * 100cqw);box-sizing:border-box;
    display:flex;align-items:center;}
  .gpt-user-text{font-family:var(--font-sans);font-size:clamp(3.5px,calc(5.75 / 645 * 100cqw),7px);font-weight:400;
    line-height:calc(9.25 / 645 * 100cqw);color:#0D0D0D;}
  .gpt-assist-text{display:flex;flex-direction:column;gap:calc(4 / 645 * 100cqw);width:100%;max-width:calc(380 / 645 * 100cqw);opacity:.85;}
  .gpt-gen-image{position:relative;width:100%;max-width:calc(220 / 645 * 100cqw);aspect-ratio:4/3;border-radius:calc(8 / 645 * 100cqw);
    background:linear-gradient(145deg,#E4E5EA 0%,#D0D2D8 55%,#C4C6CE 100%);overflow:hidden;flex-shrink:0;}
  .gpt-gen-image--glow{box-shadow:0 0 calc(22 * 2 / 3 / 645 * 100cqw) 0 color-mix(in srgb, var(--accent-bright) 66.67%, transparent);}
  .gpt-gen-image img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
  .gpt-composer{display:flex;align-items:center;gap:calc(6 / 645 * 100cqw);margin:calc(6 / 645 * 100cqw) calc(50 / 645 * 100cqw) calc(10 / 645 * 100cqw);
    padding:calc(6 / 645 * 100cqw) calc(8 / 645 * 100cqw);border:max(1px,calc(0.5 / 645 * 100cqw)) solid #D9D9D9;border-radius:calc(14 / 645 * 100cqw);
    flex-shrink:0;box-sizing:border-box;background:#FFFFFF;}
  .gpt-composer-field{flex:1;min-width:0;display:flex;align-items:center;min-height:calc(14 / 645 * 100cqw);}
  .gpt-composer-placeholder{font-family:var(--font-sans);font-size:clamp(6px,calc(6.5 / 645 * 100cqw),10px);color:#8E8E8E;line-height:1;white-space:nowrap;}
  .gpt-composer-send{width:calc(16 / 645 * 100cqw);height:calc(16 / 645 * 100cqw);border-radius:50%;flex-shrink:0;
    background:#0D0D0D;opacity:.85;}

  /* Same rendered 26×--demo-u as the hero cursor; --rowC-mock-scale is a unitless ratio
     (pane width / 645) set on #inspirePanes by JS so cqw does not re-resolve on the body. */
  .mock-pointer{position:absolute;
    width:calc(26 * var(--demo-u) / var(--rowC-mock-scale,1));
    height:calc(26 * var(--demo-u) / var(--rowC-mock-scale,1));
    z-index:3;pointer-events:none;}
  .mock-pointer img{width:100%;height:100%;display:block;}
  .vid-meta{display:flex;flex-direction:column;width:100%;}
  .vid-meta-title{display:flex;flex-direction:column;justify-content:center;width:calc(187 / 645 * 100cqw);height:calc(19 / 645 * 100cqw);padding:calc(6 / 645 * 100cqw) 0;box-sizing:border-box;}
  .vid-meta-title-bar{width:100%;height:calc(7 / 645 * 100cqw);background:#D7D8DD;border-radius:calc(10 / 645 * 100cqw);display:block;}
  .vid-meta-info{display:flex;flex-direction:row;align-items:flex-start;gap:calc(10 / 645 * 100cqw);width:100%;height:calc(17 / 645 * 100cqw);}
  .vid-meta-profile{display:flex;flex-direction:row;align-items:flex-start;gap:calc(3 / 645 * 100cqw);width:auto;opacity:.5;flex-shrink:0;}
  .vid-profile-avatar{width:calc(17 / 645 * 100cqw);height:calc(17 / 645 * 100cqw);border-radius:50%;background:#2D1A61;flex-shrink:0;display:block;}
  .vid-profile-lines{display:flex;flex-direction:column;justify-content:center;width:calc(85 / 645 * 100cqw);height:calc(17 / 645 * 100cqw);padding:calc(1 / 645 * 100cqw) 0;box-sizing:border-box;}
  .vid-profile-line{display:flex;flex-direction:row;align-items:center;width:100%;height:calc(7.5 / 645 * 100cqw);}
  .vid-profile-line-bar{width:calc(50 / 645 * 100cqw);height:calc(5.5 / 645 * 100cqw);background:#D7D8DD;border-radius:calc(10 / 645 * 100cqw);display:block;}
  .vid-profile-line-bar--long{width:100%;height:calc(4.5 / 645 * 100cqw);}
  .vid-meta-action{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:calc(2 / 645 * 100cqw);flex:1;min-width:0;align-self:stretch;}
  .vid-action-react{display:flex;flex-direction:row;align-items:center;height:calc(12 / 645 * 100cqw);padding:calc(2 / 645 * 100cqw) calc(3 / 645 * 100cqw);background:#F2F2F2;border-radius:calc(8 / 645 * 100cqw);box-sizing:border-box;flex-shrink:0;}
  .vid-react-good,.vid-react-bad{display:inline-flex;align-items:center;justify-content:center;width:calc(16.85 / 645 * 100cqw);height:calc(8 / 645 * 100cqw);flex-shrink:0;}
  .vid-react-good img{width:calc(7 / 645 * 100cqw);height:calc(8 / 645 * 100cqw);display:block;}
  .vid-react-bad img{width:calc(7 / 645 * 100cqw);height:calc(8 / 645 * 100cqw);display:block;}
  .vid-react-separator{width:max(0.5px,calc(0.3 / 645 * 100cqw));height:calc(8 / 645 * 100cqw);background:rgba(0,0,0,.15);flex-shrink:0;display:block;}
  .vid-action-share,.vid-action-save{display:flex;flex-direction:row;align-items:center;gap:calc(2 / 645 * 100cqw);height:calc(12 / 645 * 100cqw);padding:calc(2 / 645 * 100cqw) calc(3 / 645 * 100cqw);background:#F2F2F2;border-radius:calc(8 / 645 * 100cqw);box-sizing:border-box;flex-shrink:0;}
  .vid-action-share img{width:calc(7 / 645 * 100cqw);height:calc(7 / 645 * 100cqw);display:block;}
  .vid-action-save img{width:calc(6 / 645 * 100cqw);height:calc(7 / 645 * 100cqw);display:block;}
  .vid-action-label{font-family:var(--font-ui);font-size:calc(5 / 645 * 100cqw);font-weight:600;line-height:1;color:#000000;white-space:nowrap;}
  .vid-action-more{display:inline-flex;align-items:center;justify-content:center;width:calc(12 / 645 * 100cqw);height:calc(12 / 645 * 100cqw);flex-shrink:0;}
  .vid-action-more img{width:calc(5.5 / 645 * 100cqw);height:calc(1.5 / 645 * 100cqw);display:block;}
  .vid-addition{display:flex;flex-direction:column;gap:calc(6 / 645 * 100cqw);width:calc(194 / 645 * 100cqw);padding-top:calc(6 / 645 * 100cqw);flex-shrink:0;box-sizing:border-box;overflow:hidden;}
  .vid-addition-chips{display:flex;flex-direction:row;gap:calc(4 / 645 * 100cqw);width:100%;}
  .vid-addition-chip{display:inline-flex;align-items:center;justify-content:center;height:calc(11 / 645 * 100cqw);padding:calc(3 / 645 * 100cqw) calc(4 / 645 * 100cqw);border-radius:calc(2.5 / 645 * 100cqw);font-family:var(--font-ui);font-size:calc(4.5 / 645 * 100cqw);font-weight:600;line-height:1;white-space:nowrap;box-sizing:border-box;flex-shrink:0;}
  .vid-addition-chip--active{background:#000000;color:#FFFFFF;}
  .vid-addition-chip--idle{background:#EAEAEA;color:#000000;}
  .vid-addition-card{display:flex;flex-direction:row;gap:calc(4 / 645 * 100cqw);width:100%;}

  .vid-card-thumb{width:calc(96 / 645 * 100cqw);aspect-ratio:197.333 / 111;border-radius:calc(5 / 645 * 100cqw);overflow:hidden;flex-shrink:0;}
  .vid-card-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .vid-card-meta-lines{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0;height:calc(16 / 645 * 100cqw);padding:calc(1 / 645 * 100cqw) 0;box-sizing:border-box;}
  .vid-card-meta-line{display:flex;flex-direction:row;align-items:center;width:100%;height:calc(7 / 645 * 100cqw);}
  .vid-card-meta-line-bar{width:100%;height:calc(5 / 645 * 100cqw);background:#D7D8DD;border-radius:calc(10 / 645 * 100cqw);display:block;}
  .vid-card-meta-line-bar--short{width:calc(45 / 645 * 100cqw);height:calc(4 / 645 * 100cqw);}
  .vid-info{display:flex;flex-direction:column;flex:1;min-width:0;gap:calc(10 / 645 * 100cqw);align-items:flex-start;}
  .vid-addition-list{display:flex;flex-direction:column;gap:calc(6 / 645 * 100cqw);width:100%;}
  .vid-description{display:flex;flex-direction:column;width:100%;gap:calc(6 / 645 * 100cqw);padding:calc(10 / 645 * 100cqw);box-sizing:border-box;background:#F2F2F2;border-radius:calc(8 / 645 * 100cqw);flex-shrink:0;}
  .vid-desc-lines{display:flex;flex-direction:column;width:100%;gap:calc(3 / 645 * 100cqw);padding:calc(1.5 / 645 * 100cqw) 0;box-sizing:border-box;}
  .vid-desc-line{display:flex;flex-direction:row;align-items:center;width:100%;box-sizing:border-box;}
  .vid-desc-line-bar{width:100%;background:#D7D8DD;border-radius:calc(10 / 645 * 100cqw);display:block;}
  .vid-comments{display:flex;flex-direction:column;width:100%;gap:calc(6 / 645 * 100cqw);flex-shrink:0;}
  .vid-comments-label{font-family:var(--font-ui);font-size:calc(8 / 645 * 100cqw);font-weight:600;line-height:1;color:#5F6267;display:block;}
  .vid-comments-list{display:flex;flex-direction:column;width:100%;gap:calc(6 / 645 * 100cqw);}
  .vid-comment-box{display:flex;flex-direction:row;align-items:flex-start;width:100%;gap:calc(3 / 645 * 100cqw);height:calc(17 / 645 * 100cqw);opacity:.5;}
  .vid-comment-avatar{width:calc(17 / 645 * 100cqw);height:calc(17 / 645 * 100cqw);border-radius:50%;flex-shrink:0;display:block;}
  .vid-comment-lines{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0;height:calc(17 / 645 * 100cqw);padding:calc(1 / 645 * 100cqw) 0;box-sizing:border-box;}
  .vid-comment-line{display:flex;flex-direction:row;align-items:center;width:100%;height:calc(7.5 / 645 * 100cqw);}
  .vid-comment-line-bar{width:calc(50 / 645 * 100cqw);height:calc(5.5 / 645 * 100cqw);background:#D7D8DD;border-radius:calc(10 / 645 * 100cqw);display:block;}
  .vid-comment-line-bar--long{width:calc(85 / 645 * 100cqw);height:calc(4.5 / 645 * 100cqw);}

  @keyframes gfloatA{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(-1.6deg)}}
  @keyframes gfloatB{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(1.3deg)}}
  @keyframes gfloatC{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-18px) rotate(.9deg)}}

  /* Below the capped container Row B is drawn at its full width and scaled down whole,
     so the heading, the cards and the mockup shrink together. Everything else on the
     page still reflows the usual way — this is a trial on one row. */
  @media (max-width:1199px) and (min-width:821px){
    /* Same 1352 reference width and scale as Rows A and B so columns line up. */
    .rowD-scale-wrap{
      height:calc(551px * (100vw - 64px) / 1352);
      overflow:hidden;
    }
    .grrab-rowD{
      width:1352px !important;
      transform-origin:top left;
      transform:scale(calc((100vw - 64px) / 1352px));
    }
    /* The ratio is written out in both places rather than held in a custom property.
       An unregistered variable substitutes as untyped tokens, so scale(var(--x)) and
       calc(470px * var(--x)) were both invalid and silently dropped — only the width,
       which did not use it, applied. The mobile block below does it the same way. */
    .hero-scale-wrap{
      height:calc(821.7px * (100vw - 64px) / 1352);
      overflow:hidden;
    }
    .hero-figure.hero-camera{
      width:1352px !important;
      transform-origin:top left;
      transform:scale(calc((100vw - 64px) / 1352px));
    }
    .rowB-scale-wrap{
      height:calc(559px * (100vw - 64px) / 1352);
      overflow:hidden;
    }
    .grrab-rowB{
      width:1352px !important;
      transform-origin:top left;
      /* 1352px, not 1352: scale() takes a unitless number, and a length divided by a
         plain number is still a length. Dividing by a length cancels the unit. The
         height rule above divides by a bare 1352 for the opposite reason — it needs a
         length out. */
      transform:scale(calc((100vw - 64px) / 1352px));
    }
    .rowA-scale-wrap{
      height:calc(544.7px * (100vw - 64px) / 1352);
      overflow:hidden;
    }
    .rowA-figure{
      width:1352px !important;
      transform-origin:top left;
      transform:scale(calc((100vw - 64px) / 1352px));
    }
  }

  @media (max-width:820px){
    :root{--page-pad-inline:20px; --demo-browser-w:calc(100vw - 2 * var(--page-pad-inline));}
    /* header + hero + section chrome */
    header > div{ padding:14px 20px !important; gap:12px !important; }
    header > div > a.btn{ display:none !important; }
    .hero-canvas-cta.btn{
      display:inline-flex !important; margin-left:0 !important; flex-shrink:0 !important;
      height:36px !important; padding:0 12px !important; font-size:14px !important; }
    .rowC-browser-bleed{
      --rowC-page-gutter:var(--page-pad-inline);
      --rowC-shadow-x:min(64px,var(--rowC-page-gutter));
      --rowC-window-shadow:0 20px 20px rgba(0,0,0,.14); }
    #top{ padding:0 20px 40px !important;
      align-items:flex-start !important; text-align:left !important; }
    .hero-h1{ font-size:34px !important; }
    /* CTA title matches hero lead size (335/336b); weight matches hero (800). */
    .cta-h2{ font-size:calc(28px * 343 / 427) !important; font-weight:800 !important; }
    #cta .cta-sub{ display:none !important; }
    .grrab-cta-inner{ --cta-grid-u:calc((100vw - 40px) / 593); }
    .hero-sub{ font-size:20px !important; }
    /* The rows' subtitles read as the hero's below 820. Their desktop sizes differ from
       each other — 22px in Rows A and B, 20 in C and D — and stay that way; it is only
       here they converge. The weight moves too: they are 500 inline and the hero is 600. */
    .feature-sub{ font-size:20px !important; font-weight:600 !important; }
    #how{ padding:56px 20px !important; gap:104px !important; }
    /* The hero mockup's section had no mobile rule and kept its 32px sides, giving up
       16% of a 400px viewport. 20px matches #top, #how and the header — and the
       .browser-frame rules below compute from 100vw - 40px on the same assumption. */
    section#top{ padding:0 20px 48px !important; }
    .feature-h2{ font-size:28px !important; }
    /* Rows A, B, D — one-line titles on phone (335a); Row C keeps .feature-h2 above. */
    .rowA-text .feature-h2,
    .grrab-rowB .feature-h2,
    .grrab-rowD .feature-h2{
      font-size:calc(28px * 343 / 427) !important; }
    .nav-links{ display:none !important; }

    /* Hero — canvas first, browser below; headline centred on the canvas */
    .hero-scale-wrap{ height:auto !important; overflow:visible !important; }
    .hero-figure.hero-camera{
      display:grid !important; grid-template-columns:1fr !important;
      row-gap:0 !important;
      width:100% !important; transform:none !important;
      overflow:visible !important;
      position:relative !important;
      --hero-u:calc((100vw - 40px) / 593) !important; }
    .hero-left{ display:contents !important; }
    .hero-canvas{
      grid-column:1 !important; grid-row:1 !important;
      width:100% !important;
      aspect-ratio:593/434 !important;
      position:relative !important;
      margin-top:0 !important;
      margin-bottom:calc(434 / 593 * 10%) !important;
      min-height:0 !important;
      border:none !important; }
    /* Bleed stays full inset on desktop; on phone only top/bottom extend — horizontal
       -10% was widening the page (figure overflow:visible, L881). Bottom fade unchanged. */
    .hero-canvas-bleed{
      inset:-10% 0 !important;
      -webkit-mask-image:
        linear-gradient(to bottom,transparent 0%,#000 10%),
        linear-gradient(to top,transparent 0%,#000 10%);
      -webkit-mask-composite:source-in;
      mask-image:
        linear-gradient(to bottom,transparent 0%,#000 10%),
        linear-gradient(to top,transparent 0%,#000 10%);
      mask-composite:intersect; }
    .hero-canvas-bleed::before{
      background-position:calc(8 * var(--canvas-u)) calc(8 * var(--canvas-u)); }
    .hero-text{
      grid-column:1 / -1 !important; grid-row:1 !important;
      position:absolute !important; top:0 !important; left:0 !important;
      width:100% !important; aspect-ratio:593/434 !important;
      margin:0 !important; z-index:6 !important;
      display:flex !important; flex-direction:column !important;
      align-items:center !important; justify-content:center !important;
      text-align:center !important;
      pointer-events:none !important; }
    .hero-title-anchor{
      position:relative !important; width:100% !important; max-width:36ch !important; }
    .hero-text .hero-h1{
      text-align:center !important; max-width:36ch !important;
      font-size:28px !important;
      text-shadow:0 0 6px rgba(255,255,255,.95),0 0 12px rgba(255,255,255,.85),
        1px 0 2px rgba(255,255,255,.9),-1px 0 2px rgba(255,255,255,.9),
        0 1px 2px rgba(255,255,255,.9),0 -1px 2px rgba(255,255,255,.9) !important; }
    /* Line 1 must match line 2's width at 28px (247); scale lead by measured ratio. */
    .hero-text .hero-h1 .hero-h1-tail{ font-size:28px !important; }
    .hero-text .hero-h1 .hero-h1-lead{
      font-size:calc(28px * 343 / 427) !important; }
    .hero-canvas-cta{
      display:inline-flex !important;
      position:absolute !important; top:calc(100% + 12px) !important; left:50% !important;
      transform:translateX(-50%) !important;
      pointer-events:auto !important; white-space:nowrap !important; }
    .hero-cta-row{ display:none !important; }
    .hero-sub-break{ display:inline !important; }
    .hero-sub{
      grid-column:1 / -1 !important; grid-row:4 !important;
      margin:0 !important;
      padding:14px 0 0 !important;
      text-align:center !important;
      max-width:52ch !important;
      width:100% !important;
      justify-self:center !important; }
    .hero-browser-slot{
      grid-column:1 !important; grid-row:2 !important;
      width:100% !important;
      aspect-ratio:593/434 !important;
      position:relative !important;
      margin-top:0 !important; }
    .hero-cursor{
      grid-column:1 !important; grid-row:1 !important;
      z-index:5 !important; }

    .rowA-scale-wrap{ height:auto !important; overflow:visible !important; }
    .rowA-figure{
      display:grid !important; grid-template-columns:1fr !important;
      row-gap:0 !important;
      width:100% !important; transform:none !important; }
    .rowA-side{ display:contents !important; }
    .rowA-text{ grid-column:1 / -1 !important; }
    .rowA-browser{
      grid-column:1 !important; grid-row:2 !important;
      width:100% !important;
      aspect-ratio:593/434 !important;
      position:relative !important;
      margin-top:24px !important; }
    .rowA-browser-copy{ display:block !important; }
    .rowA-canvas{ display:none !important; }
    .rowA-cursor{ z-index:5 !important; }
    .rowA-toast-stack{
      position:absolute;z-index:4;
      top:calc(10 * var(--hero-btn-u));right:calc(10 * var(--hero-btn-u));
      display:flex;flex-direction:column;align-items:flex-end;
      gap:calc(8 * var(--hero-btn-u));pointer-events:none;}
    .rowA-toast-stack .hero-toast{
      position:relative;top:auto;right:auto;
      max-height:calc(40 * var(--hero-btn-u));
      transition:opacity .3s ease,max-height .3s ease,padding .3s ease,margin .3s ease;}
    .rowA-toast-stack .hero-toast.hero-toast--leaving{
      opacity:0;max-height:0;
      padding-top:0;padding-bottom:0;
      margin:0;overflow:hidden;pointer-events:none;}

    .rowB-scale-wrap{ height:auto !important; overflow:visible !important; }
    .grrab-rowB{ width:100% !important; transform:none !important; }
    .grrab-rowB{ grid-template-columns:1fr !important; gap:24px !important; }
    .grrab-rowB > div:first-child{ order:1 !important; gap:14px !important; min-width:0 !important; }
    .grrab-rowB > .rowB-mockup-wrap{ order:2 !important; }
    .rowB-cards{ gap:8px !important; }
    .rowB-card{ padding:14px 14px !important; gap:12px !important; }
    .rowB-card-icon{ width:34px !important; height:34px !important; }
    .rowB-card-icon img{ width:19px !important; height:19px !important; }
    .rowB-card-title{ font-size:16px !important; }
    .rowB-card-desc{ font-size:13.5px !important; }
    /* The desktop pins this to 470px so Rows A, B and C stand level. Below 820 the row
       stacks and there is nothing to level against, but the height stayed while the width
       fell to 368 — the window ended up upright. 591/470 is the shape the desktop
       renders; --rowB-u is width-based, so the contents follow on their own. */
    .rowB-mockup-wrap{ aspect-ratio:593/434 !important; height:auto !important; }
    .rowB-browser-copy{ display:block !important; }
    /* Side by side, so the marker moves from the left edge to the bottom. The left border
       has to be zeroed as well as the bottom given a width — the base rule sets
       border-left:3px and leaving it would keep reserving that space. */
    .rowB-cards{ flex-direction:row !important; }
    .rowB-card{ flex:1 !important; min-width:0 !important;
      flex-direction:column !important; align-items:center !important;
      justify-content:center !important; gap:8px !important;
      padding:12px 6px !important;
      border-left-width:0 !important;
      border-bottom:3px solid transparent !important;
      border-radius:12px 12px 0 0 !important; }
    .rowB-card-text{ align-items:center !important; }
    .rowB-card-title{ font-size:10px !important; }
    .rowD-card-title{ font-size:12px !important; }
    .rowD-card-desc{ font-size:11px !important; }
    .rowB-card-title,
    .rowD-card-title{ line-height:1.2 !important; }
    .rowB-card-title{ text-align:center !important; white-space:nowrap !important; }
    .rowB-card-title-full{ display:none !important; }
    .rowB-card-title-short{ display:inline !important; }
    .rowB-card--active{ border-left-color:transparent !important;
      border-bottom-color:#BC13FE !important; }
    .rowB-card-desc{ display:none !important; }
    .grrab-inspire-grid .rowC-item{ justify-content:center !important; }
    .grrab-inspire-grid .rowC-item-text{
      position:absolute !important;width:1px !important;height:1px !important;
      padding:0 !important;margin:-1px !important;overflow:hidden !important;
      clip:rect(0,0,0,0) !important;clip-path:inset(50%) !important;
      white-space:nowrap !important;border:0 !important; }
    .rowD-card{ padding:0 !important; }
    .grrab-rowD{ grid-template-columns:1fr !important; gap:24px !important; }
    .grrab-rowD > div:last-child{ gap:14px !important; }
    /* That selector used to find the fanned card stack, which is gone; it now finds
       .rowD-cards and was hiding the three cards entirely. The box's height is released
       here too — 551px is a desktop figure and the contents scale down on mobile. */
    /* The whole media box scales as one piece: 591 x 551 is what it measures on desktop,
       so holding that ratio keeps the panel and its cards in the same relationship at any
       width. The gap goes to a percentage of the same 591 for the same reason. */
    .rowD-media{ order:2 !important; }
    .rowD-mockup-wrap{ aspect-ratio:593/434 !important; height:auto !important; }
    .rowD-browser-copy{ display:block !important; }

    /* FINAL CTA + footer: match #how horizontal padding */
    #cta{ padding:0 20px 104px !important; }
    .grrab-cta-bleed{--cta-page-gutter:var(--page-pad-inline);--cta-window-shadow:0 20px 20px rgba(0,0,0,.14);}
    #cta .grrab-cta-inner{ padding:54px 0 !important; }
    footer > div{ padding:36px 20px !important; }
  }
  @media (max-width:480px){
    :root{--page-pad-inline:16px; --demo-browser-w:calc((100vw - 2 * var(--page-pad-inline)) * 0.7);}
    .rowC-browser-bleed{
      --rowC-page-gutter:var(--page-pad-inline);
      --rowC-shadow-x:min(64px,var(--rowC-page-gutter));
      --rowC-window-shadow:0 16px 16px rgba(0,0,0,.14); }
    header > div{ padding:12px 16px !important; }
    #top{ padding:0 16px 32px !important; }
    .hero-h1{ font-size:28px !important; }
    .hero-sub{ font-size:18px !important; }
    .feature-sub{ font-size:18px !important; }
    #how{ padding:44px 16px !important; gap:76px !important; }
    .feature-h2{ font-size:24px !important; }

    /* side padding now 16px each → 100vw-32px in the mockup scale math */

    /* FINAL CTA + footer horizontal padding → 16px; CTA button shrink/wrap */
    #cta{ padding:0 16px 104px !important; }
    .grrab-cta-bleed{--cta-window-shadow:0 16px 16px rgba(0,0,0,.14);}
    #cta .grrab-cta-inner{ padding:44px 0 !important; }
    section#top{ padding:0 16px 40px !important; }
    footer > div{ padding:32px 16px !important; }
    #cta .btn-lg{ height:auto !important; min-height:48px;
      padding:12px 20px !important; font-size:15px !important; white-space:normal !important;
      max-width:100%; text-align:center; }
  }