:root{
    --orange:#FE3C00;
    --blue:#344BFD;
    --green:#00CD71;
    --cream:#F6F5F1;
    --ink:#303030;
    --ink-2:#303030;
    --muted:#5C5C5C;
    --label:#9A968B;
    --t-display:clamp(56px, 7vw, 96px);
    --t-h1:clamp(36px, 4vw, 48px);
    --t-h2:clamp(24px, 2.5vw, 32px);
    --t-h3:20px;
    --t-body:16px;
    --t-ui:14px;
    --t-micro:12px;
    --t-mono:11px;
    --white:#fff;
    --border:#E5E5E5;
    --font:'Inter', system-ui, sans-serif;
    --mono:'IBM Plex Mono', ui-monospace, monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
  /* clear the sticky nav when jumping to an anchor */
  #channels,#features,#storiesSection,#contact{scroll-margin-top:104px;}
  /* Type scale roles */
  body{font-size:var(--t-body);font-weight:400;line-height:1.55;letter-spacing:0;}
  h1{font-size:var(--t-h1);font-weight:600;line-height:1.05;letter-spacing:normal;}
  h2{font-size:var(--t-h2);font-weight:600;line-height:1.15;letter-spacing:normal;}
  h3{font-size:var(--t-h3);font-weight:600;line-height:1.25;letter-spacing:normal;}
  p{font-size:var(--t-body);line-height:1.55;}
  html,body{background:var(--cream);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;}
  body{min-height:100vh;overflow-x:hidden;zoom:0.9;}

  .page{
    position:relative;
    max-width:1440px;
    margin:0 auto;
    padding:0 88px 0;
  }

  /* ---------- Nav ---------- */
  nav.bar{
    position:sticky;
    top:0;
    z-index:50;
    /* Full-viewport-width strip.
       A backdrop-filter here forced a blur re-composite of the whole strip on
       every scroll frame; the page background is this exact cream, so a
       near-opaque tint reads the same without the per-frame cost. */
    width:calc(100vw / 0.9);
    margin-left:calc(50% - (50vw / 0.9));
    margin-right:calc(50% - (50vw / 0.9));
    background:rgba(246,245,241,.94);
    border-bottom:1px solid transparent;
    transition:border-color .25s ease, background .25s ease;
  }
  nav.bar.is-stuck{
    background:rgba(246,245,241,.985);
    border-bottom-color:rgba(48,48,48,.08);
  }
  /* Inner container — keeps content aligned to the page's max-width and
     gutter while the bg strip spans the viewport. */
  .bar-inner{
    max-width:1440px;
    margin:0 auto;
    padding:18px 88px;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:24px;
  }
  .logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;}
  .logo svg{height:26px;width:auto;display:block;}
  .logo .wordmark{
    font-family:var(--font);
    font-weight:600;
    font-size:22px;
    letter-spacing:normal;
    color:var(--ink);
    line-height:1;
  }

  .nav-center{
    display:flex;
    align-items:center;
    gap:6px;
  }
  .nav-center a{
    color:var(--ink);
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    padding:8px 14px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    gap:4px;
    transition:background .15s ease, color .15s ease;
  }
  .nav-center a:hover{background:rgba(17,18,18,.05);}
  .nav-center a.active{background:#EAF1FF;color:var(--blue);}
  .nav-center a svg.caret{opacity:.55;}

  .nav-right{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:18px;
  }
  .signin{
    background:none;border:0;
    color:var(--ink);
    font-family:var(--font);font-size:14px;font-weight:500;
    text-decoration:none;
    padding:8px 4px;
    cursor:pointer;
    transition:color .15s ease;
  }
  .signin:hover{color:var(--ink);}.nav-right .signin{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 22px;border:1.5px solid rgba(48,48,48,.25);border-radius:999px;transition:border-color .15s ease, background .15s ease;}.nav-right .signin:hover{border-color:rgba(48,48,48,.55);background:rgba(48,48,48,.04);}
  .cta-btn{
    display:inline-flex;align-items:center;justify-content:center;
    height:44px;
    padding:0 22px;
    background:#CFFF6D;
    color:var(--ink);
    border-radius:999px;
    font-family:var(--font);
    font-size:14px;
    font-weight:500;
    text-decoration:none;
    letter-spacing:normal;
    transition:transform .15s ease, filter .15s ease, background .15s ease;
  }
  .cta-btn:hover{transform:translateY(-1px);background:#C2F656;}

  /* ---------- Mobile hamburger + dropdown ---------- */
  .nav-toggle{
    display:none;
    align-items:center;justify-content:center;
    width:42px;height:42px;
    border:0;border-radius:12px;
    background:transparent;color:var(--ink);
    cursor:pointer;
    transition:background .15s ease;
  }
  .nav-toggle:hover{background:rgba(17,18,18,.05);}
  .nav-toggle:active{background:rgba(17,18,18,.08);}
  .nt-bars{position:relative;display:block;width:20px;height:14px;}
  .nt-bars i{
    position:absolute;left:0;right:0;height:1.8px;border-radius:2px;
    background:currentColor;display:block;
    transition:top .22s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1) .04s;
  }
  .nt-bars i:nth-child(1){top:3px;}
  .nt-bars i:nth-child(2){top:9.2px;}
  .nav-toggle[aria-expanded="true"] .nt-bars i{
    top:6.1px;
    transition:top .22s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1) .12s;
  }
  .nav-toggle[aria-expanded="true"] .nt-bars i:nth-child(1){transform:rotate(45deg);}
  .nav-toggle[aria-expanded="true"] .nt-bars i:nth-child(2){transform:rotate(-45deg);}
  .mobile-menu{
    display:none;
    flex-direction:column;
    gap:2px;
    padding:8px 20px 20px;
  }
  .mobile-menu a{
    font-family:var(--font);font-size:16px;font-weight:500;
    color:var(--ink);text-decoration:none;
    padding:12px 4px;
    border-bottom:1px solid rgba(48,48,48,.07);
  }
  .mobile-menu-actions{
    display:flex;gap:12px;
    margin-top:16px;border:0;
  }
  .mobile-menu-actions .signin,
  .mobile-menu-actions .cta-btn{
    flex:1;
    display:inline-flex;align-items:center;justify-content:center;
    height:46px;border-radius:999px;border-bottom:0;padding:0;
  }
  .mobile-menu-actions .signin{
    border:1.5px solid rgba(48,48,48,.2);
    color:var(--ink);
  }

  /* ---------- Headline block ---------- */
  .hero{
    margin-top:56px;
    position:relative;
  }

  .eyebrow-pill{
    display:inline-flex;
    white-space:nowrap;
    align-items:center;
    gap:10px;
    background:transparent;
    color:var(--ink);
    border:1px solid rgba(48,48,48,.22);
    border-radius:999px;
    padding:6px 14px 6px 14px;
    font-family:var(--mono);
    font-size:11px;
    font-weight:500;
    letter-spacing:0.08em;
    text-transform:uppercase;
    text-decoration:none;
    margin-bottom:28px;
    transition:border-color .2s ease, background .2s ease, transform .2s ease;
  }
  .eyebrow-pill:hover{border-color:#303030;background:rgba(48,48,48,.04);transform:translateY(-1px);}
  .eyebrow-pill .arr{
    width:12px;height:12px;display:inline-flex;align-items:center;justify-content:center;
    transition:transform .25s ease;
  }
  .eyebrow-pill:hover .arr{transform:translateX(3px);}
  h1.display{
    font-family:var(--font);
    font-weight:800;
    font-size:var(--t-display);
    line-height:1.0;
    letter-spacing:normal;
    color:var(--ink);
    max-width:18ch;
  }
  .sub{display:none;}

  /* ---------- Hero CTAs ---------- */
  .hero-ctas{
    margin-top:28px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  .hero-btn{
    position:relative;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    height:44px;
    padding:0 22px;
    border-radius:999px;
    font-family:var(--font);
    font-size:14px;
    font-weight:500;
    letter-spacing:normal;
    text-decoration:none;
    color:var(--ink);
    overflow:hidden;
    isolation:isolate;
    transition:transform .15s ease, background .25s ease;
  }
  .hero-btn:hover{transform:translateY(-1px);}

  /* Primary — lime, slide-fill on hover */
  .hero-btn.primary{
    background:#CFFF6D;
    color:var(--ink);
  }
  .hero-btn.primary::before{
    content:"";
    position:absolute;inset:0;
    background:#303030;
    border-radius:inherit;
    transform:translateY(101%);
    transition:transform .4s cubic-bezier(.7,0,.2,1);
    z-index:-1;
  }
  .hero-btn.primary .label, .hero-btn.primary .arrow{position:relative;z-index:1;}
  .hero-btn.primary .arrow{display:inline-flex;align-items:center;justify-content:center;line-height:0;}
  .hero-btn.primary .arrow svg{display:block;}
  .hero-btn.primary:hover{color:#fff;}
  .hero-btn.primary:hover::before{transform:translateY(0);}
  .hero-btn.primary .arrow{transition:transform .35s cubic-bezier(.4,0,.2,1);}
  .hero-btn.primary:hover .arrow{transform:translateX(3px) rotate(-45deg);}

  /* Secondary — cream pill, play icon flies to center */
  .hero-btn.secondary{
    background:#EDE9E0;
    color:var(--ink);
    padding:0 42px 0 20px; /* right padding leaves room for absolute play icon */
  }
  .hero-btn.secondary .label{
    position:relative;
    transition:opacity .25s ease, transform .35s cubic-bezier(.4,0,.2,1);
  }
  .hero-btn.secondary .play{
    position:absolute;
    top:50%;
    right:11px;
    width:24px;height:24px;
    display:inline-flex;align-items:center;justify-content:center;
    transform:translateY(-50%);
    transition:right .4s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.4,0,.2,1);
  }
  .hero-btn.secondary .play svg{width:24px;height:24px;}
  .hero-btn.secondary:hover .label{opacity:0;transform:translateX(-6px);}
  .hero-btn.secondary:hover .play{
    right:50%;
    transform:translate(50%,-50%) scale(1.35);
  }

  /* ---------- Auto-scrolling carousel ---------- */
  .carousel{
    margin-top:56px;
    position:relative;
    z-index:2;
    /* Break out of the page's max-width + padding to span the full viewport.
       Compensate for body zoom:0.9 so we still hit the real screen edges. */
    width:calc(100vw / 0.9);
    margin-left:calc(50% - (50vw / 0.9));
    margin-right:calc(50% - (50vw / 0.9));
  }
  .track{
    display:flex;
    gap:22px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    padding:40px 0;
    cursor:grab;
  }
  .track:active{cursor:grabbing;}
  .track::-webkit-scrollbar{display:none;}
  .c-card{
    flex:0 0 300px;
    height:420px;
    border-radius:28px;
    overflow:hidden;
    position:relative;
    background:#222;
    box-shadow:0 2px 10px rgba(0,0,0,.04);
    transition:transform .45s cubic-bezier(.2,.7,.3,1.1), box-shadow .45s ease, filter .45s ease;
    filter:saturate(.92);
    transform:scale(.92);
    transform-origin:center center;
  }
  .c-card.focused{
    transform:scale(1.06);
    box-shadow:0 14px 40px -14px rgba(0,0,0,.16);
    filter:saturate(1);
    z-index:3;
  }
  .c-card.photo img{width:100%;height:100%;object-fit:cover;display:block;}
  .c-card .card-head{
    position:absolute;top:18px;left:18px;right:18px;
    z-index:3;
    display:flex;align-items:center;justify-content:space-between;gap:8px;
  }
  .c-card .tag{
    min-width:0;max-width:100%;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    display:block;
    /* No backdrop-filter: these tags ride the marquee, which scrolls every
       animation frame — the blur was re-compositing continuously. */
    background:rgba(255,255,255,.95);
    color:var(--ink);
    font-family:var(--mono);font-size:10px;font-weight:600;
    letter-spacing:0.08em;text-transform:uppercase;
    padding:6px 10px;border-radius:999px;
  }
  .c-card .tag.dark{background:rgba(17,18,18,.78);color:#fff;}
  .c-card .tag .live-dot{width:6px;height:6px;border-radius:999px;background:var(--orange);box-shadow:0 0 0 3px rgba(254,60,0,.25);}
  .c-card .pill-followers{
    flex:none;white-space:nowrap;
    background:rgba(255,255,255,.92);
    font-family:var(--mono);font-size:11px;font-weight:600;
    color:var(--ink);padding:6px 10px;border-radius:999px;
  }
  .c-card .overlay-title{
    position:absolute;left:22px;right:22px;bottom:22px;
    color:#fff;
    font-family:var(--font);font-weight:600;font-size:var(--t-h2);
    letter-spacing:normal;line-height:1.05;
    text-shadow:0 2px 18px rgba(0,0,0,.45);
  }
  .c-card .overlay-title small{display:block;font-weight:400;color:rgba(255,255,255,.85);font-size:14px;margin-top:4px;letter-spacing:0;}

  /* solid content cards */
  .c-card.solid{
    display:flex;flex-direction:column;justify-content:space-between;
    padding:26px;
  }
  .c-card.solid.blue{background:var(--blue);color:#fff;}
  .c-card.solid.orange{background:var(--orange);color:#fff;}
  .c-card.solid.green{background:var(--green);color:var(--ink);}
  .c-card.solid.lime{background:#D0F59E;color:var(--ink);}
  .c-card.solid.cream{background:#fff;color:var(--ink);border:1.5px solid var(--border);}
  .c-card .eyebrow{
    font-family:var(--mono);font-size:var(--t-mono);font-weight:500;
    letter-spacing:0.08em;text-transform:uppercase;opacity:.85;
  }
  .c-card .stat-num{
    font-family:var(--font);font-weight:800;
    font-size:84px;letter-spacing:normal;line-height:.92;
  }
  .c-card .stat-cap{
    font-family:var(--font);font-weight:500;font-size:14px;
    line-height:1.35;opacity:.92;max-width:22ch;
  }
  .emoji-scale{
    display:flex;gap:6px;
    background:rgba(255,255,255,.18);
    padding:8px;border-radius:999px;
    width:fit-content;
  }
  .c-card.solid.cream .emoji-scale,
  .c-card.solid.green .emoji-scale,
  .c-card.solid.lime .emoji-scale{background:rgba(17,18,18,.07);}
  .emoji-scale span{
    width:32px;height:32px;border-radius:999px;
    display:grid;place-items:center;font-size:18px;
    background:rgba(255,255,255,.95);
  }
  .emoji-scale span.on{outline:2px solid var(--ink);outline-offset:1px;}
  .question{
    font-family:var(--font);font-weight:600;font-size:var(--t-h2);
    letter-spacing:normal;line-height:1.15;
  }
  .avatars{display:flex;}
  .avatars span{
    width:30px;height:30px;border-radius:999px;background:#ddd;
    border:2px solid currentColor;color:#fff;
    margin-left:-8px;
    background-size:cover;background-position:center;
  }
  .avatars span:first-child{margin-left:0;}
  .nps-chart{
    display:flex;align-items:flex-end;gap:6px;height:90px;
  }
  .nps-chart i{
    flex:1;background:var(--blue);border-radius:6px 6px 2px 2px;display:block;
  }
  .nps-chart i:nth-child(1){height:35%;}
  .nps-chart i:nth-child(2){height:55%;}
  .nps-chart i:nth-child(3){height:48%;}
  .nps-chart i:nth-child(4){height:72%;}
  .nps-chart i:nth-child(5){height:90%;background:var(--orange);}
  .nps-chart i:nth-child(6){height:65%;}
  .nps-chart i:nth-child(7){height:78%;}
  .stars{font-size:24px;letter-spacing:2px;color:#FFD800;}

  /* Customer Satisfaction Overview card */
  .cso{display:flex;flex-direction:column;gap:14px;height:100%;}
  .cso-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
  .cso-title{font-family:var(--font);font-weight:600;font-size:18px;color:var(--ink);letter-spacing:normal;line-height:1.2;}
  .cso-drop{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid rgba(48,48,48,.12);border-radius:10px;padding:7px 12px;font-family:var(--font);font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap;}
  .cso-drop svg{opacity:.5;}
  .cso-score-lbl{font-family:var(--font);font-size:13px;color:var(--muted);margin-bottom:4px;}
  .cso-score{display:flex;align-items:center;gap:12px;}
  .cso-score .num{font-family:var(--font);font-weight:700;font-size:34px;color:var(--ink);letter-spacing:normal;line-height:1;}
  .cso-badge{display:inline-flex;align-items:center;gap:3px;background:#DDF3E4;color:#0F8C50;font-family:var(--font);font-weight:600;font-size:12px;padding:4px 8px;border-radius:7px;}
  .cso-chart{position:relative;flex:1;min-height:130px;display:flex;align-items:flex-end;gap:2%;padding-top:30px;}
  .cso-gl{position:absolute;left:0;right:0;border-top:1px dashed rgba(48,48,48,.16);pointer-events:none;}
  .cso-col{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:10px;}
  .cso-bar{width:100%;max-width:38px;border-radius:9px;background:#EAEAE7;position:relative;overflow:hidden;}
  .cso-bar::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(45deg, rgba(48,48,48,.06) 0 6px, transparent 6px 13px);}
  .cso-bar.hi{background:linear-gradient(180deg,#3C3C3C 0%,#7C7C7C 100%);}
  .cso-bar.hi::after{background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.10) 0 6px, transparent 6px 13px);}
  .cso-mlabel{font-family:var(--font);font-size:13px;font-weight:500;color:var(--ink);}
  .cso-dot{position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:15px;height:15px;border-radius:50%;background:#fff;border:3px solid #2A2A2A;z-index:3;}
  .cso-tip{position:absolute;left:50%;transform:translateX(-50%);top:-70px;background:#1A1A1A;color:#fff;border-radius:11px;padding:9px 14px;text-align:center;white-space:nowrap;z-index:4;box-shadow:0 6px 18px rgba(0,0,0,.2);}
  .cso-tip .m{font-size:12px;color:rgba(255,255,255,.72);font-family:var(--font);}
  .cso-tip .v{font-size:15px;font-weight:600;font-family:var(--font);margin-top:1px;}
  .cso-tip::after{content:"";position:absolute;left:50%;bottom:-4px;transform:translateX(-50%) rotate(45deg);width:11px;height:11px;background:#1A1A1A;border-radius:2px;}

  /* progress dots */
  .dots{
    display:flex;justify-content:center;gap:8px;
    margin-top:8px;
  }
  .dots i{
    width:24px;height:3px;border-radius:2px;
    background:rgba(17,18,18,.18);transition:background .3s ease, width .3s ease;
  }
  .dots i.on{background:var(--ink);width:40px;}

  /* ---------- Brand ticker ---------- */
  .brands{
    margin-top:48px;
    padding-top:8px;
  }
  .brands-label{
    font-family:var(--mono);
    font-size:11px;
    font-weight:500;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:28px;
    display:flex;align-items:center;gap:10px;
  }
  .brands-label::after{
    content:"";flex:1;height:1px;
    background:linear-gradient(to right, rgba(17,18,18,.12), transparent 60%);
  }
  .brands-row{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    column-gap:10px;
    row-gap:52px;
    align-items:center;
  }
  .brand{
    flex:0 0 calc((100% - 4 * 10px) / 5);
    display:flex;align-items:center;justify-content:center;
    height:38px;
  }
  .brand img.b-30{height:26px;}
  .brand img.b-32{height:27px;}
  .brand img.b-36{height:31px;}
  .brand img{
    display:block;
    max-width:60%;max-height:100%;
    width:auto;height:auto;
    object-fit:contain;
  }
  .brand .b-mark{display:inline-flex;align-items:center;gap:8px;}
  /* legacy text-brand modifiers retained for reference */
  .brand .dot-mark{
    width:10px;height:10px;border-radius:999px;
    background:currentColor;display:inline-block;
  }
  .brand .sq-mark{
    width:10px;height:10px;background:currentColor;display:inline-block;
  }
  .brand .tri-mark{
    width:0;height:0;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-bottom:10px solid currentColor;
    display:inline-block;
  }
  .brand .star-mark{font-size:18px;line-height:1;}
  .brand.italic{font-style:italic;font-weight:500;letter-spacing:normal;}
  .brand.serif{font-family:'Times New Roman',serif;font-weight:500;letter-spacing:normal;font-size:22px;}
  .brand.mono{font-family:var(--mono);font-weight:500;font-size:16px;letter-spacing:0.04em;text-transform:uppercase;}
  .brand.tight{letter-spacing:normal;font-weight:600;}

  /* ---------- Section eyebrow pill ---------- */
  .section-pill{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:transparent;
    color:var(--ink);
    border:1px solid rgba(48,48,48,.22);
    border-radius:999px;
    padding:6px 14px;
    font-family:var(--mono);
    font-size:11px;
    font-weight:500;
    letter-spacing:0.08em;
    text-transform:uppercase;
    width:fit-content;
    margin-bottom:14px;
  }
  .section-pill-wrap{
    display:flex;
    justify-content:flex-start;
    margin-top:120px;
    margin-bottom:8px;
  }

  /* ---------- Connect dots section ---------- */
  .connect{
    margin-top:24px;
    display:grid;
    grid-template-columns: 1fr 1.15fr;
    gap:64px;
    align-items:center;
  }
  .connect-copy{max-width:480px;}
  .connect h2{
    font-family:var(--font);
    font-weight:500;
    font-size:var(--t-h1);
    line-height:1.05;
    letter-spacing:normal;
    color:var(--ink);
    margin-bottom:36px;
    max-width:9ch;
  }
  .connect h2 .it{
    font-style:italic;
    font-weight:400;
  }

  .feat{
    display:block;
    margin-bottom:24px;
  }
  .feat:last-child{margin-bottom:0;}
  .feat-head{
    display:inline-flex;align-items:center;gap:10px;
    margin-bottom:8px;
  }
  .feat-head .ic{
    width:18px;height:18px;
    display:inline-flex;align-items:center;justify-content:center;
    flex-shrink:0;
  }
  .feat-head .ic svg{display:block;width:100%;height:100%;}
  .feat-head h3{
    font-family:var(--font);
    font-weight:600;
    font-size:var(--t-ui);
    letter-spacing:normal;
    color:var(--ink);
  }
  .feat p{
    font-family:var(--font);
    font-size:14px;
    line-height:1.55;
    color:var(--muted);
    max-width:42ch;
  }
  .feat p strong{color:var(--ink);font-weight:600;}

  /* Right-hand illustration */
  .connect-art{
    position:relative;
    aspect-ratio:1.05/1;
    width:100%;
    max-width:560px;
    margin-left:auto;
  }
  /* Customer-story map (cream grid + draw-on line) */
  .connect-art.cs{aspect-ratio:1160/1140;max-width:760px;}
  .cs-canvas{
    position:relative;width:100%;height:100%;
    background:#F6F5F1;border:1px solid rgba(48,48,48,.08);
    border-radius:22px;overflow:hidden;
    background-image:
      linear-gradient(rgba(48,48,48,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(48,48,48,.05) 1px, transparent 1px);
    background-size:52px 52px;background-position:-1px -1px;
  }
  .cs-canvas svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;}
  .cs-thread{
    fill:none;stroke:#BDB7AB;stroke-width:1.5;
    stroke-dasharray:4600;stroke-dashoffset:4600;
    transition:stroke-dashoffset 4.2s cubic-bezier(.4,0,.2,1);
  }
  .connect.in .cs-thread{stroke-dashoffset:0;}
  .cs-card.show{opacity:1;transform:translateY(0) scale(1);}
  .cs-card{
    position:absolute;z-index:2;box-sizing:border-box;
    padding:12px 16px;border-radius:16px;
    background:#fff;border:1px solid rgba(48,48,48,.08);
    box-shadow:0 4px 16px rgba(48,48,48,.07);
    opacity:0;transform:translateY(8px) scale(.97);
    transition:opacity .45s ease, transform .55s cubic-bezier(.2,.7,.3,1.4);
  }
  .cs-card .k{
    font-family:var(--mono);font-size:10px;font-weight:600;
    letter-spacing:0.07em;text-transform:uppercase;color:var(--qc,#B0778E);
    display:block;margin-bottom:3px;line-height:1.2;
  }
  .cs-card .v{
    font-family:var(--font);font-size:15px;font-weight:600;
    letter-spacing:normal;line-height:1.2;color:var(--ink);
  }
  .connect-art svg{width:100%;height:100%;display:block;}
  .connect-art .num{
    font-family:var(--mono);
    font-size:11px;
    fill:#9A968B;
    letter-spacing:0.05em;
  }
  .connect-art .dot-label{
    font-family:var(--font);
    font-size:18px;
    font-weight:600;
    fill:#fff;
    letter-spacing:normal;
  }

  /* Draw-on animation for connecting lines */
  .connect-art .line{
    stroke-dasharray:400;
    stroke-dashoffset:400;
    transition:stroke-dashoffset 1.6s cubic-bezier(.5,.05,.2,1);
  }
  .connect-art .nd{
    opacity:0;
    transform-box:fill-box;
    transform-origin:center;
    transform:scale(.4);
    transition:opacity .5s ease, transform .65s cubic-bezier(.2,.7,.3,1.6);
  }
  .connect.in .connect-art .line{stroke-dashoffset:0;}
  .connect.in .connect-art .nd{opacity:1;transform:scale(1);}
  /* Stagger — slower cadence */
  .connect.in .connect-art .l1{transition-delay:.10s;}
  .connect.in .connect-art .l2{transition-delay:.32s;}
  .connect.in .connect-art .l3{transition-delay:.54s;}
  .connect.in .connect-art .l4{transition-delay:.76s;}
  .connect.in .connect-art .l5{transition-delay:.98s;}
  .connect.in .connect-art .l6{transition-delay:1.20s;}
  .connect.in .connect-art .l7{transition-delay:1.42s;}
  .connect.in .connect-art .l8{transition-delay:1.64s;}
  .connect.in .connect-art .l9{transition-delay:1.86s;}
  .connect.in .connect-art .d1{transition-delay:.18s;}
  .connect.in .connect-art .d2{transition-delay:.36s;}
  .connect.in .connect-art .d3{transition-delay:.54s;}
  .connect.in .connect-art .d4{transition-delay:.72s;}
  .connect.in .connect-art .d5{transition-delay:.90s;}
  .connect.in .connect-art .d6{transition-delay:1.08s;}
  .connect.in .connect-art .d7{transition-delay:1.26s;}
  .connect.in .connect-art .d8{transition-delay:1.44s;}
  .connect.in .connect-art .d9{transition-delay:1.62s;}
  .connect.in .connect-art .d10{transition-delay:1.80s;}
  .connect.in .connect-art .d11{transition-delay:1.98s;}
  .connect.in .connect-art .d12{transition-delay:2.16s;}

  /* ---------- Capture insights showcase ---------- */
  /* ---------- Capture insights showcase ---------- */
  .sc-head{margin:0 0 28px;}
  .sc-head .section-pill{margin-bottom:16px;}
  .sc-title{
    font-family:var(--font);font-weight:500;
    font-size:var(--t-h1);line-height:1.05;
    color:var(--ink);max-width:18ch;
  }
  .sc-title .it{font-style:italic;font-weight:400;}
  .showcase{
    margin-top:24px;
    position:relative;
  }
  .sc-frame{
    position:relative;
  }

  /* Floating pill tab nav */
  .sc-tabs{
    position:relative;
    z-index:2;
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin:0 0 30px;
    padding:0;
  }
  .sc-tab{
    position:relative;
    display:inline-flex;align-items:center;justify-content:center;
    height:34px;
    padding:6px 14px;
    border:0;
    background:transparent;
    border-radius:999px;
    color:var(--ink);
    font-family:var(--font);
    font-size:14px;
    font-weight:500;
    letter-spacing:normal;
    cursor:pointer;
    white-space:nowrap;
    transition:background .2s ease, color .2s ease;
  }
  .sc-tab:hover{background:rgba(17,18,18,.05);}
  .sc-tab.active{
    background:#EAF1FF;
    color:var(--blue);
  }
  .sc-tab.active:hover{background:#EAF1FF;}
  .sc-tab .ic{display:none;}

  /* Floating software window */
  .sc-stage{
    position:relative;
    z-index:2;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    max-width:1180px;
    margin:0 auto;
    box-shadow:
      0 10px 30px -18px rgba(35, 30, 50, .18),
      0 2px 8px -4px rgba(35, 30, 50, .08),
      0 0 0 1px rgba(35,30,50,.05);
  }
  .sc-window-bar{
    display:flex;
    align-items:center;
    gap:14px;
    height:32px;
    padding:0 16px;
    background:#FAFAF7;
    border-bottom:1px solid rgba(48,48,48,.06);
  }
  .traffic{display:flex;gap:7px;}
  .traffic span{width:11px;height:11px;border-radius:999px;display:inline-block;}
  .traffic .r{background:#FF6058;}
  .traffic .y{background:#FFBD2E;}
  .traffic .g{background:#28C940;}
  .sc-url{
    flex:1;
    display:flex;align-items:center;justify-content:center;gap:8px;
    height:28px;
    background:#fff;
    border:1px solid rgba(48,48,48,.07);
    border-radius:8px;
    color:var(--muted);
    font-family:var(--mono);
    font-size:12px;
    max-width:480px;
    margin:0 auto;
  }
  .sc-url .lock{width:11px;height:11px;}
  .sc-body{
    position:relative;
    aspect-ratio:16/9;
    background:#FAFAF7;
    overflow:hidden;
  }
  .sc-body img{
    width:100%;height:100%;
    object-fit:cover;
    object-position:top center;
    display:block;
    transition:opacity .3s ease;
  }

  @media (max-width:900px){
    .sc-frame{padding:0;}
    .sc-tabs{gap:4px;margin:0 0 22px;justify-content:flex-start;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
    .sc-tabs::-webkit-scrollbar{display:none;}
    .sc-tab{font-size:14px;height:32px;padding:6px 12px;border-radius:999px;}
  }

  /* ---------- Features section (ft-*) ---------- */
  .ft-section{
    margin-top:120px;
    position:relative;
  }
  .ft-inner{display:block;}
  .ft-head{margin-bottom:64px;}
  .ft-eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--mono);
    font-size:11px;
    font-weight:500;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink);
    border:1px solid rgba(48,48,48,.22);
    border-radius:999px;
    padding:6px 14px;
    margin-bottom:24px;
  }
  .ftdot{
    width:6px;height:6px;border-radius:999px;
    background:#FE3C00;
  }
  .ft-head h2{
    font-family:var(--font);
    font-weight:500;
    font-size:var(--t-h1);
    line-height:1.15;
    letter-spacing:normal;
    color:var(--ink);
    max-width:22ch;
  }
  .ft-head h2 .muted{color:var(--label);font-weight:500;font-size:27px;line-height:32px;display:block;margin-top:.3em;max-width:46ch;}
  @media (max-width:900px){ .ft-head h2 .muted{font-size:22px;line-height:28px;} }

  .ft-grid{
    display:grid;
    grid-template-columns:1.25fr 1fr;
    gap:64px;
    align-items:start;
  }

  /* Left: stage holding stacked mocks, one visible — no surrounding frame */
  .ft-stage{
    position:relative;
    background:transparent;
    border-radius:0;
    padding:0;
    min-height:560px;
    overflow:visible;
  }
  .ft-mock{
    position:absolute;
    inset:0;
    background:#ECECEA;
    border:1px solid rgba(48,48,48,.06);
    border-radius:18px;
    padding:24px;
    box-shadow:0 1px 2px rgba(0,0,0,.03);
    opacity:0;
    transform:translateY(12px);
    transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
    pointer-events:none;
    display:flex;flex-direction:column;gap:18px;
    overflow:hidden;
  }
  .ft-mock.is-active{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  .ft-mock .mh{
    display:flex;justify-content:space-between;align-items:flex-start;
  }
  .ft-mock .mh .ttl{
    font-family:var(--font);font-weight:600;font-size:16px;color:var(--ink);letter-spacing:normal;
  }
  .ft-mock .mh .sub{
    font-family:var(--font);font-size:12px;color:var(--label);margin-top:2px;
  }
  .ft-mock .mh .right{display:flex;align-items:center;gap:8px;}
  .ft-mock .mh .pill{
    background:#1A1A1A;color:#fff;
    height:26px;padding:0 12px;border-radius:999px;
    font-family:var(--font);font-size:11px;font-weight:500;
  }
  .ft-mock .mh .ghost{
    background:#fff;border:1px solid rgba(48,48,48,.08);
    height:26px;padding:0 12px;border-radius:999px;
    font-family:var(--font);font-size:11px;font-weight:500;color:var(--muted);
  }
  .ft-mock .mh .avs{display:flex;}
  .ft-mock .mh .avs span{
    width:22px;height:22px;border-radius:999px;border:2px solid #fff;
    margin-left:-6px;background-size:cover;background-position:center;
  }
  .ft-mock .mh .avs span:first-child{margin-left:0;}

  /* KPI strip */
  .kpi-strip{
    display:grid;grid-template-columns:repeat(4, 1fr);gap:10px;
  }
  .kpi{
    background:#FAFAF7;border:1px solid rgba(48,48,48,.06);
    border-radius:14px;
    padding:12px;
  }
  .kpi .kpi-label{
    font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--label);
  }
  .kpi .kpi-val{
    font-family:var(--font);font-weight:600;font-size:22px;letter-spacing:normal;color:var(--ink);margin-top:4px;
  }
  .kpi .kpi-delta{
    font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.04em;margin-top:2px;
  }
  .kpi .kpi-delta.up{color:#0F8C50;}
  .kpi .kpi-delta.dn{color:#A63A40;}

  /* Segment table */
  .seg-table{
    background:#FAFAF7;border:1px solid rgba(48,48,48,.06);
    border-radius:14px;
    overflow:hidden;
    flex:1;
  }
  .seg-row{
    display:grid;grid-template-columns:24px 1fr auto auto;
    align-items:center;gap:12px;
    padding:10px 14px;
    border-bottom:1px solid rgba(48,48,48,.06);
  }
  .seg-row:last-child{border-bottom:0;}
  .seg-row .av{width:22px;height:22px;border-radius:999px;background-size:cover;background-position:center;}
  .seg-row .name{font-family:var(--font);font-size:13px;font-weight:500;color:var(--ink);}
  .seg-row .meta{font-family:var(--mono);font-size:10px;color:var(--label);letter-spacing:.05em;}
  .seg-row .score{font-family:var(--font);font-weight:600;font-size:14px;color:var(--ink);width:28px;text-align:right;}
  .seg-row .tag{
    height:20px;padding:0 8px;border-radius:999px;
    font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.05em;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .seg-row .tag.pr{background:#E5F7EC;color:#0F8C50;}
  .seg-row .tag.ps{background:#FFF1EA;color:#B53C00;}
  .seg-row .tag.dr{background:#F6E9EA;color:#A63A40;}

  /* Line chart panel */
  .lc-wrap{
    flex:1;display:flex;flex-direction:column;gap:12px;
  }
  .lc-chart{
    position:relative;
    background:#FAFAF7;border:1px solid rgba(48,48,48,.06);
    border-radius:14px;padding:14px;
    flex:1;
    min-height:180px;
  }
  .lc-chart svg{width:100%;height:100%;display:block;}
  .lc-legend{
    display:flex;flex-wrap:wrap;gap:6px;
  }
  .lc-legend .item{
    display:inline-flex;align-items:center;gap:6px;
    padding:6px 10px;border-radius:999px;
    background:#FAFAF7;border:1px solid rgba(48,48,48,.06);
    font-family:var(--font);font-size:12px;color:var(--ink);font-weight:500;
  }
  .lc-legend .item .sw{width:8px;height:8px;border-radius:999px;background:#FE3C00;}

  /* Survey logic flow */
  .flow{
    flex:1;display:flex;flex-direction:column;gap:8px;
  }
  .flow-node{
    display:flex;align-items:center;gap:10px;
    padding:10px 14px;
    background:#fff;border:1px solid rgba(48,48,48,.07);
    border-radius:12px;
  }
  .flow-node.q{background:#1A1A1A;color:#fff;border-color:#1A1A1A;}
  .flow-node .nic{
    width:22px;height:22px;border-radius:6px;
    background:#EFECE3;color:var(--ink);
    display:flex;align-items:center;justify-content:center;
  }
  .flow-node.q .nic{background:rgba(255,255,255,.12);color:#fff;}
  .flow-node .nlabel{font-family:var(--font);font-size:13px;font-weight:500;flex:1;}
  .flow-node .nmeta{font-family:var(--mono);font-size:10px;color:var(--label);text-transform:uppercase;letter-spacing:.06em;}
  .flow-node.q .nmeta{color:rgba(255,255,255,.6);}
  .flow-edge{height:12px;margin-left:23px;border-left:1.5px dashed rgba(48,48,48,.22);}
  .flow-branch{display:flex;gap:8px;}
  .flow-branch > .flow-node{flex:1;}

  /* Audience rules */
  .rules{
    flex:1;display:flex;flex-direction:column;gap:10px;
  }
  .rule-card{
    background:#FAFAF7;border:1px solid rgba(48,48,48,.06);
    border-radius:14px;
    padding:14px;
    position:relative;
  }
  .rule-card::before{
    content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:999px;background:#FE3C00;
  }
  .rule-card.b::before{background:#344BFD;}
  .rule-card.g::before{background:#0F8C50;}
  .rule-card .rt{
    font-family:var(--font);font-weight:600;font-size:13px;color:var(--ink);padding-left:8px;margin-bottom:8px;
  }
  .rule-card .chips{display:flex;gap:6px;flex-wrap:wrap;padding-left:8px;align-items:center;}
  .rule-card .rchip{
    display:inline-flex;align-items:center;gap:6px;
    height:26px;padding:0 10px;border-radius:999px;
    background:#fff;border:1px solid rgba(48,48,48,.08);
    font-family:var(--font);font-size:11px;font-weight:500;color:var(--ink);
  }
  .rule-card .rchip.active{background:#1A1A1A;color:#fff;border-color:#1A1A1A;}
  .rule-card .rchip .v{color:var(--label);font-weight:400;}
  .rule-card .rchip.active .v{color:rgba(255,255,255,.6);}
  .rule-card .op{
    font-family:var(--mono);font-size:9px;color:var(--label);letter-spacing:.08em;text-transform:uppercase;
  }

  /* Precision survey targeting — animated If/else flow */
  .ft-mock.pst-mock{padding:0;overflow:hidden;}
  .pst{position:absolute;inset:0;}
  .pst-inner{
    position:absolute;inset:0;
    background:#ECECEA;
    background-image:radial-gradient(rgba(48,48,48,.13) 1.1px, transparent 1.1px);
    background-size:22px 22px;
    background-position:center;
  }
  .pst-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1;}
  .pst-wires path{
    fill:none;stroke:#BFBDB6;stroke-width:2;stroke-linecap:round;
  }
  .pst-if{
    position:absolute;left:6%;top:50%;transform:translateY(-50%) translateX(-12px);
    width:min(46%,232px);
    background:#fff;border-radius:18px;
    box-shadow:0 20px 46px rgba(20,20,20,.10), 0 2px 6px rgba(20,20,20,.05);
    padding:12px;z-index:2;
    opacity:0;transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
  }
  .pst.run .pst-if{opacity:1;transform:translateY(-50%) translateX(0);}
  .pst-if-head{display:flex;align-items:center;gap:9px;padding:2px 2px 10px;}
  .pst-if-ic{
    width:30px;height:30px;border-radius:9px;background:#FBD9A5;
    display:flex;align-items:center;justify-content:center;flex:none;
  }
  .pst-if-ttl{font-family:var(--font);font-weight:600;font-size:14px;color:#1A1A1A;letter-spacing:normal;}
  .pst-conds{display:flex;flex-direction:column;gap:8px;}
  .pst-cond{
    background:#F2F2F0;border-radius:11px;
    padding:10px 10px;text-align:center;
    opacity:0;transform:translateY(6px);
    transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1);
  }
  .pst.run .pst-cond{opacity:1;transform:none;}
  .pst.run .pst-cond[data-i="0"]{transition-delay:.45s;}
  .pst.run .pst-cond[data-i="1"]{transition-delay:.65s;}
  .pst.run .pst-cond[data-i="2"]{transition-delay:.85s;}
  .pst-cond .k{font-family:var(--font);font-weight:500;font-size:12px;color:#6B6B6B;}
  .pst-cond .v{font-family:var(--font);font-weight:500;font-size:11px;color:#8A8A8A;margin-top:5px;}
  .pst-target{
    position:absolute;right:7%;top:50%;transform:translateY(-50%) scale(.9);
    display:flex;align-items:center;gap:10px;
    background:#fff;border-radius:14px;
    box-shadow:0 18px 40px rgba(20,20,20,.10), 0 2px 6px rgba(20,20,20,.05);
    padding:10px 13px;z-index:2;white-space:nowrap;
    opacity:0;transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
  }
  .pst.run .pst-target{opacity:1;transform:translateY(-50%) scale(1);transition-delay:1.3s;}
  .pst-target-ic{
    width:32px;height:32px;border-radius:9px;background:#CDEBD3;
    display:flex;align-items:center;justify-content:center;flex:none;
  }
  .pst-target-ic svg{width:17px;height:17px;}
  .pst-target-ttl{font-family:var(--font);font-weight:600;font-size:14px;color:#1A1A1A;letter-spacing:normal;}
  .pst-target-sub{font-family:var(--font);font-weight:400;font-size:12px;color:#8A8A8A;margin-top:1px;}
  .pst-port{
    position:absolute;left:-6px;top:50%;transform:translateY(-50%);
    width:11px;height:11px;border-radius:999px;background:#fff;
    border:2px solid #D6D4CE;
  }
  .pst-badge{
    position:absolute;right:7%;top:50%;
    margin-top:40px;transform:translateY(0) scale(.9);
    background:#5BB073;color:#fff;
    font-family:var(--font);font-weight:600;font-size:12px;letter-spacing:normal;
    padding:7px 14px;border-radius:999px;z-index:2;
    opacity:0;transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1);
    box-shadow:0 8px 20px rgba(91,176,115,.3);
  }
  .pst.run .pst-badge{opacity:1;transform:translateY(0) scale(1);transition-delay:1.9s;}
  @media (max-width:900px){
    .pst-if{width:min(56%,220px);padding:12px;border-radius:16px;}
    .pst-if-head{gap:8px;padding:0 2px 10px;}
    .pst-if-ic{width:30px;height:30px;border-radius:9px;}
    .pst-if-ttl{font-size:14px;}
    .pst-cond{padding:9px 8px;border-radius:10px;}
    .pst-cond .k{font-size:11px;}
    .pst-cond .v{font-size:10px;margin-top:4px;}
    .pst-conds{gap:7px;}
    .pst-target{padding:9px 11px;gap:8px;border-radius:13px;right:5%;}
    .pst-target-ic{width:30px;height:30px;border-radius:9px;}
    .pst-target-ttl{font-size:13px;}
    .pst-target-sub{font-size:11px;}
    .pst-badge{font-size:11px;padding:6px 12px;margin-top:38px;right:5%;}
  }
  @media (max-width:620px){
    .pst-if{left:4%;width:min(52%,190px);padding:10px;border-radius:14px;transform:translateY(-50%) translateX(0);}
    .pst-if-ic{width:26px;height:26px;border-radius:8px;}
    .pst-if-ic svg{width:16px;height:16px;}
    .pst-if-ttl{font-size:13px;}
    .pst-cond{padding:8px 6px;}
    .pst-cond .k{font-size:10.5px;}
    .pst-cond .v{font-size:10px;margin-top:3px;}
    .pst-target{
      right:4%;left:auto;max-width:38%;
      white-space:normal;gap:7px;padding:8px 9px;border-radius:12px;
    }
    .pst-target-ic{width:26px;height:26px;border-radius:8px;}
    .pst-target-ic svg{width:15px;height:15px;}
    .pst-target-ttl{font-size:12px;line-height:1.25;}
    .pst-target-sub{font-size:10.5px;line-height:1.25;}
  }

  /* Channel attribution */
  .attr-grid{
    flex:1;display:grid;grid-template-columns:1fr 180px;gap:14px;
  }
  .globe-wrap{
    position:relative;border-radius:14px;
    background:#FAFAF7 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='420' viewBox='0 0 800 420'><g fill='%23E3DCC9'><path d='M50 120 q40-30 80-10 t90 10 50 40-20 60-70 30-90-10-60-40-10-50z'/><path d='M250 80 q40-20 80 0 t60 30 40 50 0 60-50 30-90 10-80-30-30-60 20-60z'/><path d='M430 60 q60-10 110 20 t70 60 30 70-30 60-60 30-110-10-90-50-40-80 20-80z'/><path d='M610 110 q40-10 70 20 t40 60 0 70-50 30-70-20-30-60 0-80z'/></g></svg>");
    background-size:cover;background-position:center;
    border:1px solid rgba(48,48,48,.06);
    min-height:200px;
  }
  .gpin{
    position:absolute;width:28px;height:28px;border-radius:999px;
    background:#FFFFFFE6;backdrop-filter:blur(6px);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font);font-size:10px;font-weight:600;color:var(--ink);
    box-shadow:0 4px 12px rgba(0,0,0,.08), 0 0 0 2px #FFF;
  }
  .gpin.hi{color:#0F8C50;}
  .gpin.lo{color:#A63A40;}
  .attr-legend{display:flex;flex-direction:column;gap:6px;}
  .attr-row{
    display:flex;align-items:center;gap:8px;
    padding:8px 10px;border-radius:10px;
    background:#FAFAF7;border:1px solid rgba(48,48,48,.06);
  }
  .attr-row .nm{font-family:var(--font);font-size:12px;font-weight:500;color:var(--ink);flex:1;}
  .attr-row .vl{font-family:var(--font);font-weight:600;font-size:13px;color:var(--ink);}
  .attr-row .bar{height:4px;border-radius:999px;background:#EFECE3;flex:1;overflow:hidden;margin:0 6px;}
  .attr-row .bar i{display:block;height:100%;background:#0F8C50;border-radius:999px;}

  /* Channel attribution — animated icon bar chart */
  .cattr{flex:1;display:flex;flex-direction:column;gap:16px;min-height:0;}
  .cattr-title{
    font-family:var(--font);font-weight:600;font-size:17px;color:var(--ink);
    letter-spacing:normal;line-height:1.25;
  }
  .cattr-plot{
    flex:1;display:flex;align-items:flex-end;justify-content:space-between;
    gap:10px;min-height:180px;
  }
  .cattr-col{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:10px;
    height:100%;justify-content:flex-end;min-width:0;
  }
  .cattr-bar{
    width:100%;max-width:52px;
    height:0;
    border-radius:14px;
    background:#FFFFFF;
    display:flex;justify-content:center;align-items:flex-start;
    padding-top:12px;
    transition:height 1.6s cubic-bezier(.16,.84,.28,1);
    position:relative;overflow:hidden;
  }
  .cattr-plot.grow .cattr-bar{height:var(--h);}
  .cattr-plot.no-anim .cattr-bar{transition:none !important;}
  .cattr-col:nth-child(1) .cattr-bar{transition-delay:0s;}
  .cattr-col:nth-child(2) .cattr-bar{transition-delay:.08s;}
  .cattr-col:nth-child(3) .cattr-bar{transition-delay:.16s;}
  .cattr-col:nth-child(4) .cattr-bar{transition-delay:.24s;}
  .cattr-col:nth-child(5) .cattr-bar{transition-delay:.32s;}
  .cattr-col:nth-child(6) .cattr-bar{transition-delay:.4s;}
  .cattr-col:nth-child(7) .cattr-bar{transition-delay:.48s;}
  .cattr-bar.hi{background:#EEF0FF;}
  .cattr-ic{
    width:28px;height:28px;flex:none;
    display:flex;align-items:center;justify-content:center;
    transition:opacity .5s ease .6s;opacity:0;
  }
  .cattr-ic svg{width:100%;height:100%;}
  .cattr-plot.grow .cattr-ic{opacity:1;}
  .cattr-lbl{
    font-family:var(--font);font-size:12px;color:var(--muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
  }
  .cattr-foot{
    display:flex;align-items:center;gap:12px;
    padding-top:14px;border-top:1px solid rgba(48,48,48,.08);
  }
  .cattr-foot-ic{flex:none;display:flex;}
  .cattr-foot-t{font-family:var(--font);font-weight:600;font-size:14px;color:var(--ink);}
  .cattr-foot-s{font-family:var(--font);font-size:12px;color:var(--muted);margin-top:2px;}
  @media (max-width:900px){
    .cattr-title{font-size:15px;}
    .cattr-ic{width:26px;height:26px;}
    .cattr-lbl{font-size:10px;}
    .cattr-plot{gap:6px;}
  }

  /* CSAT bars */
  .csat{
    flex:1;display:flex;flex-direction:column;gap:14px;
  }
  .csat-bars{
    flex:1;display:flex;align-items:flex-end;gap:6px;
    padding:14px;background:#FAFAF7;border:1px solid rgba(48,48,48,.06);
    border-radius:14px;min-height:200px;
  }
  .csat-bar{
    flex:1;border-radius:6px 6px 2px 2px;
    background:#E3DFD3;
    position:relative;
    transition:transform .35s cubic-bezier(.2,.7,.3,1);
  }
  .csat-bar.acc{background:#FE3C00;}
  .csat-bar.ng{background:#344BFD;}
  .csat-foot{
    display:flex;justify-content:space-between;
    font-family:var(--mono);font-size:10px;color:var(--label);letter-spacing:.06em;text-transform:uppercase;
  }

  /* Right column: list + progress + counter */
  .ft-list{
    list-style:none;margin:0;padding:0;
  }
  .ft-item{
    border-bottom:1px dashed rgba(48,48,48,.18);
    padding:22px 0;
    cursor:pointer;
  }
  .ft-item:first-child{padding-top:0;}
  .ft-item .ft-row{
    display:flex;align-items:center;gap:14px;
    color:var(--label);
    transition:color .25s ease;
  }
  .ft-item .ft-ic{
    width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;
    color:currentColor;flex-shrink:0;
  }
  .ft-item .ft-name{
    font-family:var(--font);font-weight:600;font-size:var(--t-h3);letter-spacing:normal;color:currentColor;
    flex:1;
  }
  .ft-tag{
    display:none;
    align-items:center;gap:4px;
    height:22px;padding:0 10px;
    background:#1A1A1A;color:#fff;
    border-radius:999px;
    font-family:var(--font);font-size:11px;font-weight:500;
  }
  .ft-tag .star{color:#CFFF6D;font-size:9px;}
  .ft-item.is-active .ft-tag{display:inline-flex;}
  .ft-item .ft-desc{
    overflow:hidden;
    max-height:0;opacity:0;
    transition:max-height .45s cubic-bezier(.5,.05,.2,1), opacity .35s ease, margin .35s ease;
    font-family:var(--font);
    font-size:15px;line-height:1.6;color:var(--muted);
    padding-left:34px;max-width:46ch;
  }
  .ft-item.is-active .ft-row{color:var(--ink);}
  .ft-item.is-active .ft-desc{max-height:180px;opacity:1;margin-top:12px;}
  .ft-item:hover .ft-row{color:var(--muted);}
  .ft-item.is-active:hover .ft-row{color:var(--ink);}
  .ft-flowimg{
    flex:1;min-height:0;
    display:flex;align-items:center;justify-content:center;
    padding:8px;
  }
  .ft-flowimg img,
  .ft-flowimg video{
    max-width:100%;max-height:min(100%,380px);width:auto;height:auto;
    object-fit:contain;display:block;border-radius:14px;
  }

  /* Smart survey logic — drag & drop reorder animation */
  .ft-mock.srl{background:#ECECEA;padding:24px;justify-content:center;}
  /* NPS trend chart */
  .npst{flex:0 1 auto;min-height:0;max-height:360px;margin-top:auto;margin-bottom:auto;background:#fff;border-radius:14px;padding:14px 10px 6px;display:flex;}
  .npst svg{width:100%;height:100%;display:block;}
  .nps-grid line{stroke:#EFEEEB;stroke-width:1;}
  .nps-axis text{fill:#9A968B;font-family:var(--font);font-size:12px;letter-spacing:normal;}
  .nps-line{fill:none;stroke:#344BFD;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:1;stroke-dashoffset:1;}
  .npsc.run .nps-line{transition:stroke-dashoffset 1.7s cubic-bezier(.4,0,.2,1);stroke-dashoffset:0;}
  .nps-marker{opacity:0;}
  .npsc.run .nps-marker{opacity:1;transition:opacity .45s ease 1.55s;}
  .srl-panel{
    background:#fff;border-radius:16px;
    box-shadow:0 18px 48px rgba(20,20,20,.09), 0 2px 5px rgba(20,20,20,.04);
    padding:20px 22px 22px;margin:32px;
    display:flex;flex-direction:column;gap:16px;
  }
  .srl-title{font-family:var(--font);font-weight:600;font-size:15px;letter-spacing:normal;color:#1A1A1A;}
  .srl-desc{font-family:var(--font);font-size:11px;line-height:1.45;color:#9A9A9A;margin-top:4px;max-width:60ch;}
  .srl-list{position:relative;height:196px;}
  .srl-row{
    position:absolute;left:0;right:0;top:0;height:60px;
    display:flex;align-items:center;gap:12px;
    background:#fff;border:1px solid rgba(48,48,48,.10);border-radius:11px;
    padding:0 14px;
    transform:translateY(0);
    transition:transform .5s cubic-bezier(.3,.8,.35,1), box-shadow .3s ease, border-color .3s ease;
    will-change:transform;
  }
  .srl-row.lift{
    z-index:6;border-color:rgba(48,48,48,.14);
    box-shadow:0 14px 30px rgba(20,20,20,.15), 0 2px 5px rgba(20,20,20,.06);
  }
  .srl-grip{display:grid;grid-template-columns:repeat(2,2.5px);grid-auto-rows:2.5px;gap:2.5px;flex:none;}
  .srl-grip i{width:2.5px;height:2.5px;border-radius:999px;background:#C4C4C4;display:block;}
  .srl-num{
    flex:none;width:30px;height:30px;border-radius:8px;background:#E9DEFB;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font);font-weight:600;font-size:13px;color:#1A1A1A;
  }
  .srl-info{flex:1;min-width:0;}
  .srl-name{font-family:var(--font);font-weight:600;font-size:13px;letter-spacing:normal;color:#1A1A1A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .srl-cond{font-family:var(--font);font-size:11px;color:#9A9A9A;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .srl-active{
    flex:none;display:inline-flex;align-items:center;gap:5px;
    background:#D4F3E0;color:#15794A;border-radius:999px;height:24px;padding:0 11px;
    font-family:var(--font);font-weight:600;font-size:11px;
  }
  .srl-active i{width:6px;height:6px;border-radius:999px;background:#1F9D57;display:block;}
  .srl-hand{
    position:absolute;left:10px;bottom:-12px;
    opacity:0;transform:scale(.7);transform-origin:top left;
    transition:opacity .25s ease, transform .25s ease;pointer-events:none;
  }
  .srl-hand svg{width:32px;height:32px;}
  .srl-row.lift .srl-hand{opacity:1;transform:scale(1);}
  .srl-drop{
    position:absolute;left:0;right:0;top:0;height:60px;
    border:2px dashed rgba(48,48,48,.26);border-radius:11px;background:rgba(48,48,48,.03);
    opacity:0;transition:opacity .3s ease;
  }
  .srl-drop.show{opacity:1;}
  @media (max-width:900px){
    .srl-panel{margin:16px;padding:16px 16px 18px;}
    .srl-title{font-size:14px;}
    .srl-list{height:188px;}
    .srl-row{height:56px;}
  }

  .ft-progress{
    margin-top:28px;
    height:2px;background:rgba(48,48,48,.10);border-radius:999px;
    overflow:hidden;
  }
  .ft-progress .pf{
    height:100%;width:0%;
    background:#1A1A1A;
    border-radius:999px;
  }
  .ft-counter{
    margin-top:12px;
    display:flex;justify-content:space-between;align-items:center;
    font-family:var(--mono);font-size:11px;color:var(--label);letter-spacing:.08em;text-transform:uppercase;
  }
  .ft-counter b{color:var(--ink);font-weight:600;font-family:var(--font);font-size:13px;letter-spacing:normal;}

  @media (max-width:1100px){
    .ft-grid{grid-template-columns:1fr;gap:40px;}
    .ft-stage{min-height:480px;}
  }

  /* ---------- Decorations ---------- */
  .deco{position:absolute;pointer-events:none;user-select:none;}

  .badge{
    position:absolute;
    inset:0;
    width:100%;height:100%;
    z-index:4;
    animation:spin 18s linear infinite;
  }
  .badge svg{width:100%;height:100%;display:block}
  @keyframes spin{to{transform:rotate(360deg)}}

  .badge-inner{
    position:absolute;
    inset:0;
    display:grid;place-items:center;
    font-family:var(--font);
    font-weight:800;
    font-size:38px;
    letter-spacing:normal;
    color:var(--ink);
  }
  .badge-wrap{position:absolute;top:350px;right:32px;width:140px;height:140px;z-index:4;}

  .emoji{
    font-size:44px;
    line-height:1;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.12));
    z-index:6;
  }
  .emoji-1{left:-18px;top:540px;transform:rotate(-12deg);}
  .emoji-2{left:-30px;top:610px;}
  .emoji-3{left:120px;top:700px;transform:rotate(8deg);}

  @media (max-width:1100px){
    .badge-wrap{top:80px;right:16px;width:110px;height:110px;}
    .c-card{flex:0 0 260px;height:380px;}
    .brand{flex:0 0 calc((100% - 2 * 10px) / 3);height:34px;}
    .connect{grid-template-columns:1fr;gap:40px;}
    .connect-art{margin-left:0;max-width:520px;}
    .connect-art.cs{max-width:none;aspect-ratio:auto;}
    .cs-canvas{position:relative;height:auto;display:flex;flex-direction:column;gap:22px;padding:28px 16px;}
    .cs-canvas svg{display:block;z-index:0;}
    .cs-card{position:relative !important;left:auto !important;top:auto !important;transform:none !important;width:fit-content !important;min-width:0;max-width:62%;padding:12px 15px;z-index:2;}
    .cs-card:nth-of-type(odd){align-self:flex-start;}
    .cs-card:nth-of-type(even){align-self:flex-end;}
    .cs-card .v{font-size:15px;}
    .cs-card .k{font-size:10px;}
  }
  @media (max-width:720px){
    .page{padding:0 20px 0}
    nav.bar{width:calc(100vw / 0.9);margin-left:calc(50% - (50vw / 0.9));margin-right:calc(50% - (50vw / 0.9));}
    .bar-inner{padding:14px 20px;display:flex;justify-content:space-between;align-items:center;}
    .nav-center{display:none;}
    .nav-right .signin, .nav-right .cta-btn{display:none;}
    .nav-toggle{display:inline-flex;}
    .mobile-menu{
      display:flex;
      overflow:hidden;
      max-height:0;opacity:0;
      padding-top:0;padding-bottom:0;
      transition:max-height .38s cubic-bezier(.4,0,.2,1), opacity .26s ease, padding .38s cubic-bezier(.4,0,.2,1);
    }
    .mobile-menu.open{max-height:80vh;opacity:1;padding-top:8px;padding-bottom:20px;}
    .mobile-menu > *{
      opacity:0;transform:translateY(-6px);
      transition:opacity .3s ease, transform .3s cubic-bezier(.4,0,.2,1);
    }
    .mobile-menu.open > *{opacity:1;transform:none;}
    .mobile-menu.open > *:nth-child(1){transition-delay:.08s;}
    .mobile-menu.open > *:nth-child(2){transition-delay:.13s;}
    .mobile-menu.open > *:nth-child(3){transition-delay:.18s;}
    .mobile-menu.open > *:nth-child(4){transition-delay:.23s;}
    .mobile-menu.open > *:nth-child(5){transition-delay:.28s;}
    .brands-row{column-gap:16px;}
    .brand{flex:0 0 calc((100% - 16px) / 2);height:30px;}
    .carousel{margin-left:-20px;margin-right:-20px;}
    .track{padding:30px 0;}
    .c-card{flex:0 0 230px;height:340px;}
    .c-card.solid{padding:20px;}
    .c-card .stat-num{font-size:52px;}
    .c-card .stat-num[style]{font-size:48px !important;}
    .c-card .eyebrow{font-size:10px;}
    .c-card .stat-cap{font-size:12px;}
    .c-card .question{font-size:20px;}
    .emoji-scale{gap:4px;padding:6px;}
    .emoji-scale span{width:26px;height:26px;font-size:15px;}
    .badge-wrap{display:none;}
  }
  /* ---------- Scroll-in reveal ---------- */
  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
    will-change:opacity, transform;
  }
  .reveal.in{opacity:1;transform:translateY(0);}

  /* Staggered children fade-up — Framer style */
  .stagger > *{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  }
  .stagger.in > *{opacity:1;transform:translateY(0);}
  .stagger.in > *:nth-child(1){transition-delay:.05s;}
  .stagger.in > *:nth-child(2){transition-delay:.18s;}
  .stagger.in > *:nth-child(3){transition-delay:.30s;}
  .stagger.in > *:nth-child(4){transition-delay:.42s;}
  .stagger.in > *:nth-child(5){transition-delay:.54s;}
  .stagger.in > *:nth-child(6){transition-delay:.66s;}
  .stagger.in > *:nth-child(7){transition-delay:.78s;}
  .stagger.in > *:nth-child(n+8){transition-delay:.90s;}

/* ---------- Customer Stories ---------- */
  .stories{margin-top:120px;position:relative;}
  .stories-head{
    display:flex;align-items:flex-end;justify-content:space-between;
    gap:32px;margin-bottom:32px;
  }
  .stories-head .heading-block{max-width:640px;}
  .stories-head .section-pill{margin-bottom:14px;}
  .stories-title{
    font-family:var(--font);font-weight:500;
    font-size:var(--t-h1);line-height:1.05;
    letter-spacing:normal;color:var(--ink);
    max-width:14ch;
  }
  .stories-title .it{font-style:italic;font-weight:400;}
  .stories-all{
    display:inline-flex;align-items:center;gap:6px;
    color:var(--ink);text-decoration:none;font-family:var(--font);
    font-size:13px;font-weight:500;
    padding:0 16px;height:36px;
    border:1px solid rgba(48,48,48,.18);border-radius:999px;
    background:transparent;
    transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
  }
  .stories-all:hover{background:#1A1A1A;color:#fff;border-color:#1A1A1A;transform:translateY(-1px);}
  .stories-all svg{transition:transform .2s ease;}
  .stories-all:hover svg{transform:translateX(2px);}

  .stories-grid{
    display:grid;grid-template-columns:1.3fr 1fr;gap:18px;align-items:stretch;
  }

  /* Card base — no white chrome */
  .story-card{
    background:transparent;border:none;
    cursor:pointer;position:relative;
    display:flex;flex-direction:column;
    -webkit-tap-highlight-color:transparent;
    transition:opacity .35s ease, transform .35s ease;
  }
  .story-card:focus-visible{outline:2px solid #344BFD;outline-offset:6px;border-radius:8px;}
  .story-card.is-source .story-thumb{opacity:0;}
  .stories.is-reading .story-card:not(.is-source){opacity:0;transform:translateY(8px);pointer-events:none;}

  /* Thumb */
  .story-thumb{
    border-radius:16px;overflow:hidden;
    position:relative;background:#EFECE3;
    transition:transform .3s ease,box-shadow .35s ease;
  }
  .story-card:not(.is-source):hover .story-thumb{
    transform:translateY(-3px);
    box-shadow:0 24px 48px -22px rgba(22,21,28,.18);
  }
  .story-thumb img,.doc-morph img{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;display:block;
    pointer-events:none;
  }
  /* Fallback gradients sit behind the <img> in case it's slow to load */
  .thumb-gold,.doc-morph.gold{background:linear-gradient(135deg,#F4D08F 0%,#C58936 55%,#7A4A1C 100%);}
  .thumb-green,.doc-morph.green{background:linear-gradient(135deg,#A8C99F 0%,#4A7A60 55%,#1F4A33 100%);}
  .thumb-coral,.doc-morph.coral{background:linear-gradient(135deg,#FFCDB8 0%,#F2735A 55%,#A03A33 100%);}
  .thumb-cobalt,.doc-morph.cobalt{background:linear-gradient(135deg,#B0B9FF 0%,#5867E8 55%,#2A2F8F 100%);}

  /* Featured: text TOP, thumb BOTTOM */
  .story-card.featured{min-height:460px;}
  .story-card.featured .story-thumb{flex:1;min-height:300px;}
  .story-card.featured .story-body{padding:18px 2px 4px;flex:0 0 auto;display:flex;flex-direction:column;gap:10px;}
  .story-card.featured .play-pill{
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:52px;height:52px;border-radius:999px;
    background:rgba(255,255,255,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.5);
    display:flex;align-items:center;justify-content:center;
    color:var(--ink);z-index:3;
    transition:transform .35s cubic-bezier(.2,.7,.3,1),background .25s ease;
  }
  .story-card.featured:hover .play-pill{transform:translate(-50%,-50%) scale(1.08);background:rgba(255,255,255,.85);}
  .story-card.featured .play-pill svg{width:14px;height:14px;}

  /* Mini row: thumb LEFT, text RIGHT */
  .stories-stack{display:grid;grid-template-rows:repeat(3,1fr);gap:18px;}
  .story-card.mini{
    display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;
    min-height:0;
  }
  .story-card.mini .story-body{
    padding:0;
    display:flex;flex-direction:column;justify-content:center;
    gap:10px;min-width:0;
  }
  .story-card.mini .story-thumb{
    width:120px;height:120px;border-radius:14px;flex-shrink:0;
  }

  /* Card text */
  .story-meta-row{
    display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;
    font-family:var(--mono);font-size:var(--t-mono);font-weight:500;
    letter-spacing:0.08em;text-transform:uppercase;color:var(--label);
  }
  .story-tag{
    display:inline-flex;align-items:center;
    border:1px solid rgba(48,48,48,.18);color:var(--ink);
    border-radius:999px;padding:3px 9px;font-size:10px;
    letter-spacing:.12em;
  }
  .story-card.featured h3{
    font-family:var(--font);font-weight:600;font-size:var(--t-h3);
    line-height:1.3;letter-spacing:normal;color:var(--ink);
    margin:0;max-width:30ch;
  }
  .story-card.mini h3{
    font-family:var(--font);font-weight:600;font-size:var(--t-ui);
    line-height:1.35;letter-spacing:normal;color:var(--ink);
    margin:0;max-width:32ch;
  }
  .learn-more{
    display:inline-flex;align-items:center;gap:0;white-space:nowrap;
    height:30px;padding:0 15px;
    background:transparent;color:var(--ink);border:1px solid rgba(48,48,48,.28);border-radius:999px;
    font-family:var(--font);font-size:11px;font-weight:500;
    width:fit-content;letter-spacing:normal;
    transition:border-color .2s ease,background .2s ease,gap .2s ease;
  }
  .story-card:hover .learn-more{border-color:var(--ink);background:rgba(48,48,48,.04);gap:6px;}
  .story-card.featured .learn-more{height:34px;padding:0 17px;font-size:12px;}
  .learn-more svg{width:0;height:10px;opacity:0;overflow:hidden;transition:width .2s ease,opacity .2s ease;}
  .story-card:hover .learn-more svg{width:10px;opacity:1;}

  @media (max-width:1000px){
    .stories-grid{grid-template-columns:1fr;}
    .story-card.featured{min-height:auto;}
    .story-card.featured .story-thumb{aspect-ratio:4/3;}
  }

  /* ============ STORY DETAIL OVERLAY ============ */
  .story-overlay{
    position:fixed;inset:0;z-index:1000;
    background:#F6F5F1;
    opacity:0;pointer-events:none;
    transition:opacity .35s ease .1s;
    overflow-y:auto;overscroll-behavior:contain;
    font-family:var(--font);
  }
  .story-overlay.is-open{opacity:1;pointer-events:auto;}
  /* During close: bg stays, but article + topbar + ESC pill fade out fast
     so the user sees the morph reverse cleanly against the bg. */
  .story-overlay.is-closing .doc-article{opacity:0;transform:translateY(8px);transition:opacity .22s ease,transform .22s ease;}
  .story-overlay.is-closing .doc-topbar{transform:translateY(-100%);transition:transform .25s ease;}

  .doc-topbar{
    position:fixed;top:0;left:0;right:0;z-index:1010;
    padding:16px 40px;
    display:flex;align-items:center;justify-content:space-between;
    /* Fixed bar over the scrolling case-study body — blur here repainted the
       strip on every frame of the doc scroll. */
    background:rgba(246,245,241,.96);
    border-bottom:1px solid rgba(48,48,48,.06);
    transform:translateY(-100%);
    transition:transform .35s ease .15s;
  }
  .story-overlay.is-open .doc-topbar{transform:translateY(0);}
  .doc-back{
    display:inline-flex;align-items:center;gap:8px;
    background:#fff;border:1px solid rgba(48,48,48,.10);
    color:var(--ink);border-radius:999px;
    height:36px;padding:0 16px 0 12px;cursor:pointer;
    font-family:var(--font);font-size:var(--t-ui);font-weight:500;
    transition:background .2s ease,color .2s ease,border-color .2s ease;
  }
  .doc-back:hover{background:#1A1A1A;color:#fff;border-color:#1A1A1A;}
  .doc-back svg{transition:transform .2s ease;}
  .doc-back:hover svg{transform:translateX(-2px);}
  .doc-trail{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--label);}
  .doc-trail b{color:var(--ink);font-weight:600;margin-right:6px;font-family:var(--mono);}

  /* Scroll progress bar */
  .doc-progress{
    position:absolute;left:0;right:0;bottom:0;height:2px;
    background:rgba(48,48,48,.06);
  }
  .doc-progress-fill{
    height:100%;width:0%;
    background:#2A1C5C;
    transition:width .08s linear;
  }

  /* The morph image — position:absolute inside the scrollable overlay so it
     scrolls WITH the article content. CSS-driven transition handles the morph. */
  .doc-morph{
    position:absolute;z-index:1020;
    overflow:hidden;
    will-change:left,top,width,height,border-radius;
    transition:left .6s cubic-bezier(.4,0,.2,1), top .6s cubic-bezier(.4,0,.2,1), width .6s cubic-bezier(.4,0,.2,1), height .6s cubic-bezier(.4,0,.2,1), border-radius .6s cubic-bezier(.4,0,.2,1);
    box-shadow:0 1px 2px rgba(22,21,28,.04),0 24px 60px rgba(22,21,28,.16);
    pointer-events:none;
    opacity:0;
  }
  .doc-morph.is-active{opacity:1;}

  .doc-article{
    max-width:760px;margin:0 auto;
    padding:120px 24px 80px;
    opacity:0;transform:translateY(12px);
    transition:opacity .4s ease .2s,transform .4s ease .2s;
  }
  .story-overlay.is-open .doc-article{opacity:1;transform:none;}

  .doc-meta{
    display:flex;align-items:center;gap:10px;
    font-family:var(--mono);font-size:11px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--label);
    margin-bottom:18px;flex-wrap:wrap;
  }
  .doc-meta .section-pill{margin-bottom:0;padding:4px 11px;font-size:10px;}
  .doc-meta .doc-meta-trail{color:var(--label);}
  .doc-title{
    font-family:var(--font);font-weight:600;
    font-size:var(--t-h1);line-height:1.08;
    letter-spacing:normal;color:var(--ink);
    max-width:22ch;margin:0 0 14px;
  }
  .doc-title em{font-style:italic;font-weight:500;color:#2A1C5C;}
  .doc-sub{
    font-family:var(--font);font-size:var(--t-body);line-height:1.55;
    color:var(--muted);max-width:58ch;margin:0 0 36px;
  }

  /* Spacer for the morph image to land on */
  .doc-spacer{
    width:100%;aspect-ratio:16/9;border-radius:18px;
    margin:0 0 28px;
  }

  /* Stats strip */
  .doc-stats{
    display:grid;grid-template-columns:repeat(3,1fr);
    border-top:1px solid rgba(48,48,48,.10);
    border-bottom:1px solid rgba(48,48,48,.10);
    padding:24px 0;
    margin:0 0 48px;
  }
  .doc-stat{padding:0 24px;position:relative;}
  .doc-stat + .doc-stat{border-left:1px solid rgba(48,48,48,.10);}
  .doc-stat-val{
    font-family:var(--font);font-weight:600;
    font-size:30px;letter-spacing:normal;
    color:var(--ink);line-height:1;
    font-feature-settings:"tnum";
  }
  .doc-stat-unit{
    color:#0F8C50;font-size:19px;margin-left:1px;font-weight:600;
  }
  .doc-stat-lbl{
    font-family:var(--mono);font-size:10px;letter-spacing:0.08em;
    text-transform:uppercase;color:var(--label);
    margin-top:8px;
  }

  /* Prose */
  .doc-prose{
    font-family:var(--font);font-size:var(--t-body);line-height:1.7;color:var(--ink);
  }
  .doc-prose h2{
    font-family:var(--font);font-weight:600;font-size:var(--t-h2);
    letter-spacing:normal;color:var(--ink);
    margin:48px 0 14px;
  }
  .doc-prose h2:first-child{margin-top:0;}
  .doc-prose p{margin:0 0 16px;}
  .doc-prose ul{margin:0 0 18px;padding:0;list-style:none;}
  .doc-prose li{position:relative;padding-left:22px;margin-bottom:9px;font-family:var(--font);font-size:var(--t-body);line-height:1.65;color:var(--ink);}
  .doc-prose li::before{content:"";position:absolute;left:3px;top:11px;width:6px;height:6px;border-radius:50%;background:rgba(48,48,48,.45);}
  .doc-prose strong{font-weight:600;color:var(--ink);}

  /* Pull quote */
  .doc-pullquote{
    margin:36px 0;padding:26px 30px;
    background:#fff;
    border:1px solid rgba(48,48,48,.06);
    border-left:3px solid #2A1C5C;
    border-radius:0 14px 14px 0;
  }
  .doc-pq-text{
    font-family:var(--font);font-style:italic;font-weight:600;
    font-size:var(--t-h3);line-height:1.4;color:var(--ink);
    letter-spacing:normal;margin:0 0 18px;
  }
  .doc-pq-attr{
    font-family:var(--mono);font-size:11px;letter-spacing:.05em;
    color:var(--label);
    display:flex;align-items:center;gap:10px;
  }
  .doc-avatar{
    width:28px;height:28px;border-radius:999px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#F4D08F,#7A4A1C);
    color:#fff;
    font-family:var(--font);font-style:italic;font-weight:500;font-size:14px;
  }
  .doc-avatar.gold{background:linear-gradient(135deg,#F4D08F,#7A4A1C);}
  .doc-avatar.green{background:linear-gradient(135deg,#A8C99F,#1F4A33);}
  .doc-avatar.coral{background:linear-gradient(135deg,#FFCDB8,#A03A33);}
  .doc-avatar.cobalt{background:linear-gradient(135deg,#B0B9FF,#2A2F8F);}

  /* In-article figure */
  .doc-figure{
    margin:36px 0;position:relative;
    aspect-ratio:16/9;
    border-radius:18px;overflow:hidden;
    background:#EFECE3;
  }
  .doc-figure img{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;display:block;
  }
  .doc-fig-cap{
    position:absolute;left:18px;bottom:14px;right:18px;
    color:#fff;
    font-family:var(--mono);font-size:11px;letter-spacing:.04em;
    text-shadow:0 1px 6px rgba(0,0,0,.45);
  }

  /* Footer */
  .doc-footer{
    margin-top:64px;padding-top:32px;
    border-top:1px solid rgba(48,48,48,.10);
    display:flex;align-items:center;justify-content:space-between;
    gap:24px;flex-wrap:wrap;
  }
  .doc-foot-meta{
    font-family:var(--mono);font-size:11px;letter-spacing:.06em;
    color:var(--label);
  }
  .doc-next{
    display:inline-flex;align-items:center;gap:8px;
    background:#1A1A1A;color:#fff;border:none;
    height:40px;padding:0 18px;border-radius:999px;
    font-family:var(--font);font-size:var(--t-ui);font-weight:500;
    cursor:pointer;letter-spacing:normal;
    transition:background .2s ease,transform .2s ease;
  }
  .doc-next:hover{background:#000;transform:translateY(-1px);}
  .doc-next svg{transition:transform .2s ease;}
  .doc-next:hover svg{transform:translateX(2px);}

  /* Floating ESC pill */
  .doc-esc{
    position:fixed;
    left:50%;bottom:24px;
    transform:translateX(-50%) translateY(8px);
    display:inline-flex;align-items:center;gap:8px;
    background:rgba(22,21,28,.88);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    color:#E5E2D9;
    font-family:var(--mono);font-size:11px;letter-spacing:.06em;
    padding:9px 14px;border-radius:999px;
    z-index:1015;
    opacity:0;pointer-events:none;
    transition:opacity .3s ease,transform .3s ease;
  }
  .story-overlay.is-open ~ .doc-esc,
  .doc-esc.is-visible{
    opacity:1;transform:translateX(-50%) translateY(0);
    transition:opacity .3s ease .8s,transform .3s ease .8s;
  }
  .doc-esc kbd{
    font-family:var(--mono);background:rgba(255,255,255,.14);
    border-radius:6px;padding:2px 7px;font-size:10px;color:#fff;
  }

  @media (max-width:720px){
    .doc-topbar{padding:14px 20px;}
    .doc-article{padding:90px 20px 60px;}
    .stories-stack{grid-template-rows:none;gap:34px;}
    .story-card.mini{gap:16px;}
    .story-card.mini .story-body{gap:12px;}
    .doc-stats{grid-template-columns:1fr;border-bottom:1px solid rgba(48,48,48,.10);}
    .doc-stat + .doc-stat{border-left:none;border-top:1px solid rgba(48,48,48,.10);padding-top:20px;margin-top:20px;}
    .doc-footer{justify-content:flex-start;}
  }

  /* ============ VIDEO TESTIMONIALS (sticky stack, white cards) ============ */
  .testimonials{
    margin-top:140px;
    position:relative;
  }
  .tt-head{
    display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
    margin-bottom:56px;
    max-width:1100px;margin-left:auto;margin-right:auto;
  }
  .tt-head .heading-block{max-width:640px;}
  .tt-head .section-pill{margin-bottom:14px;}
  .tt-title{
    font-family:var(--font);font-weight:500;
    font-size:var(--t-h1);line-height:1.05;
    letter-spacing:normal;color:var(--ink);
    max-width:14ch;
  }
  .tt-title .it{font-style:italic;font-weight:400;}
  .tt-sub{
    font-family:var(--font);font-size:14px;color:var(--muted);
    max-width:32ch;line-height:1.55;
  }

  /* Stack — each card is sticky with a small offset per index so they stack
     on top of each other. Large gap between cards means only ~1 visible at a
     time (the stacking is the reveal). */
  .tt-stack{
    --tt-card-h: 520px;
    --tt-stick-top: 120px;
    --tt-gap: 78vh;
    position:relative;
    max-width:1100px;margin:0 auto;
    display:flex;flex-direction:column;
    gap:var(--tt-gap);
    padding-bottom:4vh;
  }
  .tt-card{
    position:sticky;
    top:calc(var(--tt-stick-top) + var(--i) * 22px);
    height:var(--tt-card-h);
    background:#FFFFFF;
    border-radius:24px;
    box-shadow:
      0 1px 2px rgba(22,21,28,.04),
      0 22px 48px -18px rgba(22,21,28,.16),
      0 1px 0 rgba(255,255,255,.6) inset;
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr);
    gap:0;
    padding:18px;
    isolation:isolate;
    overflow:hidden;
    transform-origin:top center;
    will-change:transform;
    /* no transition — scale is driven by scroll position frame-by-frame */
  }

  /* Abstract gradient thumbs (no photos) — mesh-style backgrounds */
  .tt-thumb-abstract{
    position:absolute;inset:0;z-index:0;
  }
  .tt-thumb-abstract.warm{
    background:
      radial-gradient(110% 80% at 25% 110%, #FFB99D 0%, #FFB99D00 55%),
      radial-gradient(80% 70% at 80% 20%, #FFE7C4 0%, #FFE7C400 55%),
      radial-gradient(120% 90% at 110% 110%, #F2735A 0%, #F2735A00 60%),
      linear-gradient(160deg, #FFE0CC 0%, #F9C9AC 40%, #E59B7E 100%);
  }
  .tt-thumb-abstract.tan{
    background:
      radial-gradient(120% 60% at 20% 0%, #F0E2CF 0%, #F0E2CF00 55%),
      radial-gradient(90% 70% at 100% 100%, #BFA987 0%, #BFA98700 60%),
      radial-gradient(60% 50% at 60% 50%, #D8C7AE 0%, #D8C7AE00 70%),
      linear-gradient(170deg, #EFE2CB 0%, #C9B797 60%, #A98F6A 100%);
  }
  .tt-thumb-abstract.sage{
    background:
      radial-gradient(120% 70% at 25% 0%, #D5E4C7 0%, #D5E4C700 55%),
      radial-gradient(80% 80% at 100% 90%, #4E7256 0%, #4E725600 65%),
      radial-gradient(60% 50% at 35% 70%, #A8C99F 0%, #A8C99F00 70%),
      linear-gradient(165deg, #DDE9CD 0%, #97B193 55%, #4A6A4F 100%);
  }
  .tt-thumb-abstract.cobalt{
    background:
      radial-gradient(110% 70% at 20% 100%, #FF8B6E 0%, #FF8B6E00 55%),
      radial-gradient(80% 80% at 100% 0%, #B0B9FF 0%, #B0B9FF00 60%),
      radial-gradient(60% 50% at 55% 55%, #4F62F0 0%, #4F62F000 70%),
      linear-gradient(155deg, #5867E8 0%, #2A2F8F 60%, #1A1F70 100%);
  }
  /* Subtle film-like layers — a soft inner glow + grain */
  .tt-thumb-abstract::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(60% 50% at 50% 30%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 60%),
      radial-gradient(70% 60% at 50% 100%, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 60%);
  }
  .tt-thumb-abstract::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.12 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    mix-blend-mode:overlay;opacity:.6;
  }

  .tt-thumb{
    position:relative;border-radius:18px;overflow:hidden;
    background:#EFECE3;
    height:100%;
  }
  .tt-thumb img{display:none;}
  .tt-thumb::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.22) 100%);
    z-index:1;
  }
  .tt-thumb .tt-play{
    position:absolute;left:50%;top:50%;
    width:56px;height:56px;border-radius:999px;
    /* No backdrop-filter: .tt-card gets a scale() transform on every scroll
       frame, so anything blurred inside it repaints with it. */
    background:rgba(255,255,255,.96);
    border:1px solid rgba(255,255,255,.5);
    display:flex;align-items:center;justify-content:center;
    color:var(--ink);
    transform:translate(-50%,-50%);
    z-index:2;cursor:pointer;
    transition:transform .25s cubic-bezier(.2,.7,.3,1), background .25s ease;
  }
  .tt-card:hover .tt-thumb .tt-play{transform:translate(-50%,-50%) scale(1.08);background:#fff;}
  .tt-thumb .tt-play svg{width:16px;height:16px;}
  .tt-thumb .tt-duration{
    position:absolute;right:14px;bottom:14px;z-index:2;
    font-family:var(--mono);font-size:10px;letter-spacing:.06em;
    color:#fff;background:rgba(0,0,0,.62); /* was .42 + blur(8px) — see .tt-play */
    padding:5px 9px;border-radius:999px;
  }

  /* Right column — text content */
  .tt-content{
    display:flex;flex-direction:column;
    padding:24px 28px 22px 34px;
    min-width:0;
  }
  .tt-date{
    font-family:var(--font);font-size:14px;font-weight:400;
    color:var(--label);letter-spacing:normal;
    margin-bottom:18px;
  }
  .tt-quote{
    font-family:var(--font);font-weight:500;
    font-size:var(--t-h2);line-height:1.32;letter-spacing:normal;
    color:var(--ink);
    max-width:30ch;
    margin:0;
    flex:1;
  }
  .tt-author{
    margin-top:24px;
    display:flex;align-items:center;gap:12px;
  }
  .tt-avatar{
    width:36px;height:36px;border-radius:999px;
    background-size:cover;background-position:center;
    flex-shrink:0;
  }
  .tt-author-meta{display:flex;flex-direction:column;gap:1px;min-width:0;}
  .tt-author-name{
    font-family:var(--font);font-weight:500;font-size:14px;color:var(--ink);
    letter-spacing:normal;
  }
  .tt-author-role{
    font-family:var(--mono);font-size:10px;letter-spacing:.08em;
    color:var(--label);text-transform:uppercase;
  }

  .tt-card-foot{
    margin-top:auto;
    display:flex;align-items:center;justify-content:space-between;
    gap:12px;padding-top:18px;
  }
  .tt-pill{
    display:inline-flex;align-items:center;
    background:#EFECE3;color:var(--ink);
    font-family:var(--font);font-size:var(--t-ui);font-weight:500;
    letter-spacing:normal;
    padding:7px 14px;border-radius:999px;
  }
  .tt-plus{
    width:38px;height:38px;border-radius:999px;
    background:#1A1A1A;color:#fff;border:none;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    transition:background .2s ease,transform .2s ease;
  }
  .tt-plus:hover{background:#000;transform:translateY(-1px);}
  .tt-plus svg{width:14px;height:14px;}

  @media (max-width:880px){
    .tt-card{
      grid-template-columns:1fr;
      height:auto;
      gap:14px;
    }
    .tt-thumb{aspect-ratio:4/3;height:auto;}
    .tt-content{padding:6px 8px 4px;}
    .tt-quote{font-size:18px;}
    .tt-head{flex-direction:column;align-items:flex-start;gap:16px;}
    .tt-stack{--tt-gap:60vh;--tt-card-h:auto;}
  }
  /* ============ TOOLKIT — folder cards (horizontal scroll) ============ */
  .toolkit{margin-top:80px;position:relative;}
  .tk-head{
    display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
    margin-bottom:48px;
  }
  .tk-head .heading-block{max-width:640px;}
  .tk-head .section-pill{margin-bottom:14px;}
  .tk-title{
    font-family:var(--font);font-weight:500;
    font-size:var(--t-h1);line-height:1.05;
    letter-spacing:normal;color:var(--ink);
    max-width:14ch;
  }
  .tk-title .it{font-style:italic;font-weight:400;}
  .tk-sub{
    font-family:var(--font);font-size:14px;color:var(--muted);
    max-width:36ch;line-height:1.55;
  }

  /* Horizontal scroller — sits within the page padding so folders align
     with the section heading. */
  .tk-scroller-wrap{
    position:relative;
  }
  .tk-scroller{
    display:flex;
    gap:22px;
    overflow-x:auto;
    overflow-y:visible;
    padding:24px 0 32px;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    cursor:grab;
  }
  .tk-scroller:active{cursor:grabbing;}
  .tk-scroller::-webkit-scrollbar{display:none;}

  /* ----- Frosted-glass folder (macOS-style) ----- */
  .kit-folder{
    --tint:245, 242, 235;
    --accent:#9A968B;
    position:relative;
    flex:0 0 auto;
    width:170px;
    scroll-snap-align:start;
    background:transparent;
    border:none;
    padding:0 6px;
    cursor:pointer;
    overflow:visible;
    transition:transform .35s cubic-bezier(.2,.7,.3,1), opacity .35s ease;
    -webkit-tap-highlight-color:transparent;
    display:flex;flex-direction:column;align-items:center;
    gap:10px;
  }
  .kit-folder:focus-visible{outline:none;}
  .kit-folder:focus-visible .kit-body{
    box-shadow:
      0 0 0 3px rgba(52,75,253,.35),
      0 1px 0 rgba(255,255,255,.95) inset,
      0 12px 28px -16px rgba(22,21,28,.22);
  }
  .kit-folder:hover{transform:translateY(-4px);}
  /* Active folder = the one whose drawer is open */
  .kit-folder.is-active{transform:translateY(-6px);}
  .kit-folder.is-active .kit-name{
    font-weight:600;
    font-size:var(--t-ui);color:#000;}
  .tk-scroller.has-active .kit-folder:not(.is-active){opacity:.45;}

  /* The folder visual — native 150×128 size, clip-paths drawn at this scale */
  .kit-visual{
    position:relative;
    width:150px;
    height:128px;
    transition:transform .35s cubic-bezier(.2,.7,.3,1);
  }
  .kit-folder:hover .kit-visual{transform:translateY(-2px);}

  /* BACK panel — full folder shape (150×128) with a tab on the upper-left.
     Tinted with the kit's pastel color via --tint. */
  .kit-back{
    position:absolute;inset:0;z-index:1;
    background:linear-gradient(170deg,
      rgba(var(--tint), .95) 0%,
      rgba(var(--tint), .78) 55%,
      rgba(var(--tint), .92) 100%);
    backdrop-filter:blur(16px) saturate(1.05);
    -webkit-backdrop-filter:blur(16px) saturate(1.05);
    clip-path:path("M 0 27 Q 0 16 11 16 L 14 16 Q 19 16 19 12 L 19 9 Q 19 0 29 0 L 72 0 Q 82 0 86 8 L 89 16 Q 92 16 99 16 L 140 16 Q 150 16 150 27 L 150 117 Q 150 128 140 128 L 11 128 Q 0 128 0 117 Z");
  }
  .kit-back::before{
    content:"";
    position:absolute;
    left:8%;right:6%;
    top:16px;
    height:1px;
    background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.7) 50%, rgba(255,255,255,0));
    pointer-events:none;
  }
  .kit-back::after{
    content:"";
    position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(120% 60% at 50% 100%, rgba(0,0,0,.06), rgba(0,0,0,0) 60%),
      radial-gradient(80% 40% at 50% 0%, rgba(255,255,255,.45), rgba(255,255,255,0) 60%);
    clip-path:inherit;
  }

  /* Fanned WHITE papers with mock text lines — represent pages/blog stubs.
     Layered backgrounds = accent stripe + bold title bar + a few body lines. */
  .kit-papers{
    position:absolute;
    left:50%;top:22px;
    transform:translateX(-50%);
    width:124px;height:46px;
    z-index:2;
    pointer-events:none;
  }
  .kit-paper{
    position:absolute;
    top:0;left:50%;
    width:52px;height:62px;
    margin-left:-26px;
    border-radius:4px;
    background-color:#ffffff;
    background-repeat:no-repeat;
    background-image:
      /* accent stripe at top */
      linear-gradient(var(--accent) 0 0),
      /* title bar (darker) */
      linear-gradient(rgba(20,20,20,.78) 0 0),
      /* body lines (lighter) */
      linear-gradient(rgba(20,20,20,.16) 0 0),
      linear-gradient(rgba(20,20,20,.16) 0 0),
      linear-gradient(rgba(20,20,20,.16) 0 0),
      linear-gradient(rgba(20,20,20,.12) 0 0),
      linear-gradient(rgba(20,20,20,.12) 0 0),
      linear-gradient(rgba(20,20,20,.12) 0 0);
    background-position:
      6px 5px,    /* accent */
      6px 11px,   /* title */
      6px 22px,   /* line 1 */
      6px 28px,   /* line 2 */
      6px 34px,   /* line 3 */
      6px 42px,   /* line 4 */
      6px 48px,   /* line 5 */
      6px 54px;   /* line 6 */
    background-size:
      14px 1.5px,
      32px 3px,
      36px 1.5px,
      30px 1.5px,
      33px 1.5px,
      24px 1.5px,
      32px 1.5px,
      20px 1.5px;
    box-shadow:
      0 0 0 1px rgba(48,48,48,.06),
      0 1px 0 rgba(255,255,255,.5) inset,
      0 6px 12px -6px rgba(22,21,28,.28);
    transform-origin:bottom center;
    transition:transform .55s cubic-bezier(.2,.7,.3,1);
    overflow:hidden;
  }
  /* Vary the mock content slightly per paper so the fan reads as 3 distinct pages */
  .kit-paper.p1{
    transform:translateX(-50%) rotate(-9deg) translateY(1px);
  }
  .kit-paper.p2{
    transform:translateX(0%)   rotate(-1deg) translateY(-5px);
    background-size:
      18px 1.5px,
      36px 3px,
      32px 1.5px,
      36px 1.5px,
      28px 1.5px,
      30px 1.5px,
      22px 1.5px,
      34px 1.5px;
  }
  .kit-paper.p3{
    transform:translateX(50%)  rotate(9deg)  translateY(1px);
    background-size:
      12px 1.5px,
      28px 3px,
      34px 1.5px,
      26px 1.5px,
      36px 1.5px,
      22px 1.5px,
      30px 1.5px,
      16px 1.5px;
  }
  /* Soft sheen on each paper */
  .kit-paper::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(155deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 38%);
    pointer-events:none;
  }
  .kit-folder:hover .kit-paper.p1{transform:translateX(-65%) rotate(-14deg) translateY(-6px);}
  .kit-folder:hover .kit-paper.p2{transform:translateX(0%)   rotate(-1deg)  translateY(-12px);}
  .kit-folder:hover .kit-paper.p3{transform:translateX(65%)  rotate(14deg)  translateY(-6px);}

  /* FRONT pocket — same pastel tint, slightly lighter so it reads as glass */
  .kit-body{
    position:absolute;
    left:0;right:0;
    top:46px;
    bottom:0;
    z-index:3;
    background:linear-gradient(170deg,
      rgba(var(--tint), .80) 0%,
      rgba(var(--tint), .55) 50%,
      rgba(var(--tint), .85) 100%);
    backdrop-filter:blur(20px) saturate(1.1);
    -webkit-backdrop-filter:blur(20px) saturate(1.1);
    clip-path:path("M 11 0 L 45 0 Q 75 31 105 0 L 139 0 Q 150 0 150 11 L 150 70 Q 150 82 139 82 L 11 82 Q 0 82 0 70 L 0 11 Q 0 0 11 0 Z");
    transition:filter .35s ease;
  }
  .kit-body::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(80% 30% at 50% 0%, rgba(255,255,255,.60), rgba(255,255,255,0) 55%),
      radial-gradient(100% 70% at 50% 100%, rgba(0,0,0,.06), rgba(0,0,0,0) 60%);
    clip-path:inherit;
    pointer-events:none;
  }
  .kit-body::after{
    content:"";
    position:absolute;
    left:0;right:0;top:0;height:1px;
    background:linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.95) 14%,
      rgba(255,255,255,.95) 86%,
      rgba(255,255,255,0) 100%);
    clip-path:inherit;
    pointer-events:none;
  }

  /* Label below the folder */
  .kit-label{
    display:flex;flex-direction:column;align-items:center;gap:6px;
    text-align:center;
  }
  .kit-name{
    font-family:var(--font);
    font-weight:500;
    font-size:15px;
    letter-spacing:normal;
    color:var(--ink);
    line-height:1.2;
  }
  .kit-meta{
    font-family:var(--font);
    font-weight:500;
    font-size:11px;
    color:var(--label);
    background:rgba(22,21,28,.06);
    padding:3px 10px;
    border-radius:999px;
    letter-spacing:normal;
    white-space:nowrap;
  }
  .kit-menu{display:none;}

  /* Pastel tint + accent stripe color per kit. --tint is a RGB triplet
     consumed by kit-back/kit-body backgrounds; --accent colors the small
     stripe on each white page. */
  .kit-folder.c-rose   { --tint:253, 232, 234; --accent:#D38690; }
  .kit-folder.c-amber  { --tint:253, 244, 222; --accent:#C99A40; }
  .kit-folder.c-sky    { --tint:230, 244, 252; --accent:#5D90BD; }
  .kit-folder.c-violet { --tint:242, 238, 252; --accent:#7E6FD0; }
  .kit-folder.c-orange { --tint:254, 238, 224; --accent:#D27A3A; }
  .kit-folder.c-green  { --tint:232, 245, 234; --accent:#5A9970; }

  /* ---------- Open-folder drawer (pages inside) ---------- */
  .kit-drawer{
    max-height:0;
    opacity:0;
    overflow:hidden;
    margin:0 auto;
    transition:max-height .55s cubic-bezier(.2,.7,.3,1), opacity .35s ease .05s, margin .55s cubic-bezier(.2,.7,.3,1);
    will-change:max-height,opacity;
  }
  .kit-drawer.is-open{
    max-height:1200px;
    opacity:1;
    margin:24px auto 0;
  }
  .kit-drawer-inner{
    position:relative;
    background:#FFFFFF;
    border:1px solid rgba(48,48,48,.08);
    border-radius:22px;
    padding:26px 28px 28px;
  }
  .kit-drawer-head{
    display:flex;align-items:center;justify-content:space-between;
    gap:16px;margin-bottom:22px;
    flex-wrap:wrap;
  }
  .kit-drawer-titleblock{
    display:flex;flex-direction:column;gap:8px;
  }
  .kit-drawer-eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--mono);font-size:11px;font-weight:500;
    letter-spacing:0.08em;text-transform:uppercase;color:var(--label);
  }
  .kit-drawer-eyebrow .dot{
    width:6px;height:6px;border-radius:999px;background:var(--kit-accent,#FE3C00);
  }
  .kit-drawer-title{
    font-family:var(--font);font-weight:600;font-size:var(--t-h2);
    letter-spacing:normal;color:var(--ink);line-height:1.1;
  }
  .kit-drawer-close{
    width:34px;height:34px;border-radius:999px;
    background:#fff;border:1px solid rgba(48,48,48,.10);color:var(--ink);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:background .2s ease,color .2s ease,transform .2s ease;
  }
  .kit-drawer-close:hover{background:#1A1A1A;color:#fff;transform:rotate(90deg);}
  .kit-drawer-close svg{width:12px;height:12px;}

  .kit-drawer-pages{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:14px;
  }

  /* Each page is a paper card with a TEXT preview (not a blank gradient) */
  .kit-page{
    position:relative;
    background:transparent;border:none;padding:0;
    text-align:left;cursor:pointer;
    display:flex;flex-direction:column;gap:12px;
    -webkit-tap-highlight-color:transparent;
    transition:transform .35s cubic-bezier(.2,.7,.3,1);
  }
  .kit-page:hover{transform:translateY(-4px);}
  .kit-page:focus-visible{outline:none;}
  .kit-page:focus-visible .kit-page-paper{box-shadow:0 0 0 3px rgba(52,75,253,.35), 0 18px 36px -18px rgba(22,21,28,.20);}

  .kit-page-paper{
    position:relative;
    min-height:260px;
    background:linear-gradient(178deg, #FFFFFF 0%, #FCFAF5 100%);
    border-radius:14px;
    border:1px solid rgba(48,48,48,.06);
    padding:20px 20px 16px;
    overflow:hidden;
    display:flex;flex-direction:column;
    gap:10px;
    box-shadow:0 1px 2px rgba(22,21,28,.04), 0 14px 26px -16px rgba(22,21,28,.14);
    transition:box-shadow .35s ease, transform .35s ease;
  }
  .kit-page:hover .kit-page-paper{
    box-shadow:0 1px 2px rgba(22,21,28,.04), 0 22px 38px -18px rgba(22,21,28,.22);
  }
  /* Top-left accent stripe matches folder color */
  .kit-page-paper::before{
    content:"";
    position:absolute;
    top:0;left:0;
    width:42px;height:3px;
    background:var(--kit-accent,#FE3C00);
    border-radius:0 0 3px 0;
  }
  /* Mock body-paragraph lines — sit BEHIND the explicit content. Different
     widths so they read as real text rather than a loading skeleton. */
  .kit-page-mock{
    margin-top:6px;
    display:flex;flex-direction:column;gap:7px;
    flex:1;
    opacity:.7;
  }
  .kit-page-mock i{
    display:block;height:6px;border-radius:3px;
    background:rgba(48,48,48,.10);
  }
  .kit-page-mock i:nth-child(1){width:94%;}
  .kit-page-mock i:nth-child(2){width:78%;}
  .kit-page-mock i:nth-child(3){width:88%;}
  .kit-page-mock i:nth-child(4){width:64%; margin-bottom:8px;}
  .kit-page-mock i:nth-child(5){width:90%;}
  .kit-page-mock i:nth-child(6){width:72%;}

  .kit-page-eyebrow{
    font-family:var(--mono);font-size:var(--t-mono);font-weight:500;
    letter-spacing:0.08em;text-transform:uppercase;color:var(--label);
    display:inline-flex;align-items:center;gap:6px;
  }
  .kit-page-title{
    font-family:var(--font);font-weight:600;font-size:var(--t-h3);
    letter-spacing:normal;color:var(--ink);line-height:1.22;
    margin:0;
    /* clamp to 3 lines */
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .kit-page-excerpt{
    font-family:var(--font);font-size:12.5px;line-height:1.55;
    color:var(--muted);
    margin:0;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    position:relative;z-index:1;
  }
  .kit-page-foot{
    margin-top:auto;
    display:flex;align-items:center;justify-content:space-between;
    font-family:var(--mono);font-size:10px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--label);
    position:relative;z-index:1;
  }
  .kit-page-foot .read{
    display:inline-flex;align-items:center;gap:4px;
    color:var(--ink);font-weight:600;
  }
  .kit-page-foot .read svg{width:9px;height:9px;}
  /* Accent dot on the read indicator */
  .kit-page-foot .read::before{
    content:"";width:5px;height:5px;border-radius:999px;
    background:var(--kit-accent,#FE3C00);display:inline-block;margin-right:4px;
  }

  @media (max-width:600px){
    .kit-drawer-inner{padding:20px 18px 22px;border-radius:18px;}
    .kit-drawer-pages{grid-template-columns:1fr 1fr;gap:10px;}
    .kit-page-paper{padding:16px 14px 14px;}
    .kit-page-title{font-size:14px;-webkit-line-clamp:3;}
    .kit-page-excerpt{font-size:11.5px;-webkit-line-clamp:2;}
  }
  @media (max-width:380px){
    .kit-drawer-pages{grid-template-columns:1fr;}
  }

  /* Edge fades on the horizontal scroller */
  .tk-scroller-wrap::before,
  .tk-scroller-wrap::after{
    content:"";position:absolute;top:0;bottom:0;width:80px;
    pointer-events:none;z-index:2;
  }
  .tk-scroller-wrap::before{left:0;background:linear-gradient(90deg, #F6F5F1 0%, rgba(246,245,241,0) 100%);}
  .tk-scroller-wrap::after{right:0;background:linear-gradient(-90deg, #F6F5F1 0%, rgba(246,245,241,0) 100%);}

  @media (max-width:880px){
    .tk-head{flex-direction:column;align-items:flex-start;gap:16px;}
    .tk-scroller{padding:24px 0 32px;}
    .tk-scroller-wrap::before,.tk-scroller-wrap::after{display:none;}
  }

  @media (prefers-reduced-motion: reduce){
    .reveal,.stagger > *{opacity:1;transform:none;transition:none;}
  }

  /* ============ REACH-OUT: split grid + stacked cards ============ */
  .reach-section{
    margin-top:120px;
    padding-bottom:120px;
  }
  .reach-grid{
    display:grid;
    grid-template-columns:0.95fr 1fr;
    gap:80px;
    align-items:center;
    max-width:1100px;
    margin:0 auto;
  }
  /* Left: copy */
  .reach-copy{ max-width:520px; }
  .reach-copy .section-pill{ margin-bottom:18px; }
  .reach-copy h2{
    font-family:var(--font);
    font-weight:500;
    font-size:var(--t-h1);
    line-height:1.05;
    letter-spacing:normal;
    color:var(--ink);
    max-width:14ch;
    margin-bottom:22px;
  }
  .reach-copy h2 .it{
    font-style:italic;
    font-weight:400;
  }
  .reach-copy p{
    font-family:var(--font);
    font-size:var(--t-body);line-height:1.6;
    color:var(--muted);
    max-width:38ch;
    margin-bottom:32px;
  }
  .reach-bullets{
    display:flex;flex-direction:column;gap:14px;
    list-style:none;padding:0;margin:0 0 36px;
  }
  .reach-bullets li{
    display:flex;align-items:flex-start;gap:12px;
    font-family:var(--font);font-size:14px;
    line-height:1.5;color:var(--ink);
  }
  .reach-bullets .bt{
    width:18px;height:18px;border-radius:999px;
    background:#1A1A1A;color:#CFFF6D;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;margin-top:1px;
  }
  .reach-bullets .bt svg{ width:9px;height:9px; }
  .reach-foot{
    font-family:var(--mono);font-size:11px;
    letter-spacing:.1em;text-transform:uppercase;
    color:var(--label);
    display:flex;align-items:center;gap:10px;
  }
  .reach-foot .dot{ width:3px;height:3px;border-radius:999px;background:#9A968B;display:inline-block; }

  /* Right: stacked card stage */
  .reach-stage{
    position:relative;
    width:100%;
    max-width:520px;
    height:560px;
    margin:0 auto;
    perspective:1200px;
  }

  .reach-card{
    position:absolute;
    inset:0;
    background:#fff;
    border-radius:24px;
    padding:36px 38px 28px;
    display:flex;flex-direction:column;
    box-shadow:
      0 1px 2px rgba(22,21,28,.04),
      0 16px 40px -20px rgba(22,21,28,.18),
      0 4px 12px -6px rgba(22,21,28,.08);
    will-change:transform, opacity;
    transform-origin:50% 60%;
    transition:
      transform .6s cubic-bezier(.32,.72,.32,1),
      opacity .45s ease;
  }
  /* Stack positions: 0 = top/active, 1-4 fan back, 5+ hidden */
  .reach-card[data-pos="0"]{
    z-index:6;
    transform:translateY(0) translateX(0) rotate(0) scale(1);
    opacity:1;
  }
  .reach-card[data-pos="1"]{
    z-index:5;
    transform:translateY(14px) translateX(-7px) rotate(-2.4deg) scale(.97);
    opacity:.9;
  }
  .reach-card[data-pos="2"]{
    z-index:4;
    transform:translateY(26px) translateX(9px) rotate(2.6deg) scale(.945);
    opacity:.72;
  }
  .reach-card[data-pos="3"]{
    z-index:3;
    transform:translateY(36px) translateX(-5px) rotate(-1.6deg) scale(.92);
    opacity:.5;
  }
  .reach-card[data-pos="4"]{
    z-index:2;
    transform:translateY(44px) translateX(3px) rotate(1deg) scale(.9);
    opacity:.28;
  }
  .reach-card[data-pos="5"]{
    z-index:1;
    transform:translateY(50px) translateX(-2px) rotate(-.5deg) scale(.88);
    opacity:0;
    pointer-events:none;
  }
  /* Cards lower in the stack should not be interactive */
  .reach-card:not([data-pos="0"]){ pointer-events:none; }
  .reach-card[data-pos="0"]{ pointer-events:auto; }

  /* Card chrome */
  .rc-top{
    display:flex;align-items:center;gap:12px;
    margin-bottom:30px;
  }
  .rc-segs{
    display:flex;gap:6px;flex:1;
  }
  .rc-segs i{
    height:3px;flex:1;background:#E8E5DC;border-radius:2px;
    transition:background .35s ease;
  }
  .rc-segs i.on{ background:#1A1A1A; }
  .rc-close{
    width:28px;height:28px;border-radius:999px;
    background:#F2EFE7;border:none;color:var(--label);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;flex-shrink:0;
    transition:background .15s ease,color .15s ease;
  }
  .rc-close:hover{ background:#E8E5DC;color:var(--ink); }
  .rc-close svg{ width:10px;height:10px; }

  .rc-eyebrow{
    font-family:var(--mono);font-size:11px;font-weight:500;
    letter-spacing:0.08em;text-transform:uppercase;
    color:var(--label);
    margin-bottom:14px;
  }
  .rc-q{
    font-family:var(--font);font-weight:600;
    font-size:var(--t-h3);line-height:1.25;
    letter-spacing:normal;
    color:var(--ink);
    max-width:16ch;
    margin-bottom:26px;
  }
  .rc-helper{
    font-family:var(--mono);font-size:var(--t-mono);font-weight:500;
    letter-spacing:0.08em;text-transform:uppercase;
    color:var(--label);
    margin-bottom:14px;
  }
  .rc-opts{
    display:flex;flex-direction:column;
    gap:4px;flex:1;
  }
  .rc-opt{
    display:flex;align-items:center;gap:14px;
    padding:11px 4px;
    background:none;border:none;
    font-family:var(--font);font-size:16px;font-weight:500;
    color:var(--ink);
    text-align:left;cursor:pointer;
    border-radius:10px;
    transition:background .15s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .rc-opt:hover{ background:rgba(48,48,48,.04); }
  .rc-radio{
    width:18px;height:18px;border-radius:999px;
    border:1.5px solid rgba(48,48,48,.30);
    flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    transition:border-color .18s ease;
    position:relative;
  }
  .rc-radio::after{
    content:"";
    width:9px;height:9px;border-radius:999px;
    background:#1A1A1A;
    opacity:0;transform:scale(.4);
    transition:opacity .18s ease, transform .25s cubic-bezier(.2,.7,.3,1.6);
  }
  /* Multi-select uses a tiny square mark instead */
  .reach-card[data-q-type="multi"] .rc-radio{ border-radius:5px; }
  .reach-card[data-q-type="multi"] .rc-radio::after{ border-radius:3px; }
  .rc-opt.is-on .rc-radio{ border-color:#1A1A1A; }
  .rc-opt.is-on .rc-radio::after{ opacity:1;transform:scale(1); }

  /* Form fields */
  .rc-fields{
    display:flex;flex-direction:column;gap:14px;
    flex:1;
  }
  .rc-field{ display:flex;flex-direction:column;gap:6px; }
  .rc-field label{
    font-family:var(--mono);font-size:10px;font-weight:500;
    letter-spacing:0.08em;text-transform:uppercase;color:var(--label);
  }
  .rc-field input,
  .rc-field textarea{
    background:#FAFAF7;
    border:1.5px solid transparent;
    border-radius:12px;
    padding:14px 16px;
    font-family:var(--font);font-size:14px;color:var(--ink);
    outline:none;width:100%;
    transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
  }
  .rc-field input{ height:46px;padding:0 16px; }
  .rc-field textarea{ min-height:76px;resize:none; }
  .rc-field input::placeholder,
  .rc-field textarea::placeholder{ color:var(--label); }
  .rc-field input:focus,
  .rc-field textarea:focus{
    background:#fff;border-color:rgba(48,48,48,.18);
    box-shadow:0 0 0 3px rgba(48,48,48,.04);
  }
  .rc-field input.has-error,
  .rc-field textarea.has-error{ border-color:#D97B3A; }

  /* Nav row */
  .rc-nav{
    display:flex;align-items:center;justify-content:space-between;
    margin-top:auto;padding-top:16px;
  }
  .rc-back{
    background:none;border:none;
    font-family:var(--font);font-size:14px;font-weight:500;
    color:var(--label);cursor:pointer;
    padding:12px 4px;
    transition:color .15s ease;
  }
  .rc-back:hover{ color:var(--ink); }
  .rc-back:disabled{ opacity:.3;cursor:not-allowed; }
  .rc-next{
    display:inline-flex;align-items:center;gap:8px;
    height:44px;padding:0 22px;
    background:#CFFF6D;color:var(--ink);
    border:none;border-radius:999px;
    font-family:var(--font);font-size:14px;font-weight:500;
    letter-spacing:normal;
    cursor:pointer;
    transition:background .18s ease, transform .18s ease, color .18s ease;
  }
  .rc-next:hover{ background:#C2F656;transform:translateY(-1px); }
  .rc-next:disabled{
    background:#EFECE3;color:var(--label);cursor:not-allowed;transform:none;
  }
  .rc-next .arr{ transition:transform .25s ease; }
  .rc-next:hover:not(:disabled) .arr{ transform:translateX(2px); }

  /* Success card */
  .rc-success{
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    text-align:center;
    flex:1;gap:18px;
    padding:20px;
  }
  .rc-success-icon{
    width:64px;height:64px;border-radius:999px;
    background:#1A1A1A;
    display:flex;align-items:center;justify-content:center;
  }
  .rc-success-icon svg{ width:26px;height:26px;color:#CFFF6D; }
  .rc-success h3{
    font-family:var(--font);font-weight:600;
    font-size:var(--t-h2);letter-spacing:normal;line-height:1.15;
    color:var(--ink);margin:0;
  }
  .rc-success p{
    font-family:var(--font);font-size:14px;line-height:1.55;
    color:var(--muted);max-width:30ch;margin:0;
  }
  .rc-success .rc-next{ margin-top:8px; }

  @media (max-width:1080px){
    .reach-grid{ grid-template-columns:1fr;gap:48px; }
    .reach-copy{ max-width:none;text-align:left; }
    .reach-stage{ height:520px;max-width:480px; }
  }
  @media (max-width:640px){
    .reach-stage{ height:540px; }
    .reach-card{ padding:28px 26px 22px;border-radius:20px; }
    .rc-q{ font-size:19px; }
    .rc-opt{ font-size:15px; }
  }

  /* ============ FOOTER ============ */
  .footer{
    /* Frame stretched to 24px from viewport edges on all sides (with
       body zoom:0.9 compensation, mirroring the carousel pattern). */
    width:calc((100vw - 48px) / 0.9);
    margin-left:calc(50% - (50vw - 24px) / 0.9);
    margin-right:calc(50% - (50vw - 24px) / 0.9);
    margin-top:140px;
    margin-bottom:24px;
    padding:0;
    background:#FFFFFF;
    border-radius:28px;
    position:relative;
    overflow:hidden;
  }
  /* Inner wrapper — matches the top nav's bar-inner: max-width 1440 + 88px
     horizontal padding so footer content aligns vertically with the rest
     of the page (logo X-position matches top nav logo). */
  .footer-inner{
    max-width:1440px;
    margin:0 auto;
    padding:56px 88px 0;
  }
  .ft-mark{
    display:inline-block;
    margin-bottom:48px;
    line-height:0;
  }
  .ft-mark svg{
    width:auto;
    height:26px;
    display:block;
  }

  .footer-links{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:24px 48px;
    padding-bottom:40px;
  }
  .ft-col{display:flex;flex-direction:column;gap:18px;}
  .ft-col a{
    font-family:var(--font);
    font-weight:500;
    font-size:var(--t-ui);
    letter-spacing:normal;
    color:var(--muted);
    text-decoration:none;
    width:fit-content;
    transition:color .2s ease,transform .2s ease;
  }
  .ft-col a:hover{color:var(--ink);transform:translateX(2px);}

  .ft-divider{
    border:none;
    height:1px;
    background-image:radial-gradient(circle, rgba(48,48,48,.32) 1px, transparent 1.5px);
    background-size:8px 1px;
    background-repeat:repeat-x;
    margin:0;
  }

  .footer-bottom{
    padding:20px 0 16px;
    display:flex;align-items:center;justify-content:space-between;
    gap:32px;flex-wrap:wrap;
  }
  .ft-legal{
    display:flex;align-items:center;gap:32px;flex-wrap:wrap;
    font-family:var(--font);font-size:var(--t-ui);font-weight:500;
    letter-spacing:normal;color:var(--muted);
  }
  .ft-legal a{color:var(--muted);text-decoration:none;transition:color .2s ease;}
  .ft-legal a:hover{color:var(--ink);}

  .ft-connect{
    display:flex;align-items:center;gap:28px;flex-wrap:wrap;
    font-family:var(--font);font-size:var(--t-ui);font-weight:500;
    letter-spacing:normal;color:var(--muted);
  }
  .ft-connect .ft-connect-label{font-weight:600;}
  .ft-connect a{color:var(--muted);text-decoration:none;transition:color .2s ease;}
  .ft-connect a:hover{color:var(--ink);}

  /* ===== Falling, draggable pills — full-width inside footer ===== */
  .pill-yard{
    position:relative;
    height:160px;
    margin:8px 0 0;
    padding:0;
    overflow:hidden;
    user-select:none;
    touch-action:none;
  }
  .yard-pill{
    position:absolute;
    /* Matter.js drives left/top each frame — initial coords set in markup */
    display:inline-flex;align-items:center;gap:8px;
    height:32px;padding:0 14px 0 10px;
    border-radius:999px;
    background:var(--pill-bg,#EAF1FF);
    color:var(--pill-fg,#344BFD);
    font-family:var(--font);font-weight:500;font-size:var(--t-ui);
    letter-spacing:normal;
    box-shadow:
      0 1px 0 rgba(255,255,255,.6) inset,
      0 4px 10px -4px rgba(22,21,28,.10),
      0 12px 24px -16px rgba(22,21,28,.20);
    cursor:grab;
    white-space:nowrap;
    /* Transform origin is centre so Matter.js angle rotates around centroid */
    transform-origin:50% 50%;
    will-change:transform;
  }
  .yard-pill:active{cursor:grabbing;}
  .yard-pill.dragging{
    box-shadow:
      0 1px 0 rgba(255,255,255,.6) inset,
      0 8px 16px -6px rgba(22,21,28,.18),
      0 24px 44px -20px rgba(22,21,28,.30);
    z-index:5;
  }
  .yard-pill .ic{
    display:inline-flex;align-items:center;justify-content:center;
    width:18px;height:18px;font-size:13px;line-height:1;
  }

  /* Pill color variants */
  .yard-pill.v-blue{--pill-bg:#EAF1FF;--pill-fg:#344BFD;}
  .yard-pill.v-orange{--pill-bg:#FFE7DC;--pill-fg:#C23A07;}
  .yard-pill.v-lime{--pill-bg:#EAF8C5;--pill-fg:#4F6B0E;}
  .yard-pill.v-rose{--pill-bg:#FDE2E6;--pill-fg:#9C3F4A;}
  .yard-pill.v-violet{--pill-bg:#EFEBFB;--pill-fg:#5A4BC7;}
  .yard-pill.v-green{--pill-bg:#DCF1E0;--pill-fg:#2F6A48;}
  .yard-pill.v-amber{--pill-bg:#FDF1D2;--pill-fg:#8A5A1E;}
  .yard-pill.v-ink{--pill-bg:#1A1A1A;--pill-fg:#fff;}

  @media (max-width:900px){
    .footer-links{grid-template-columns:repeat(2,1fr);gap:32px;}
  }
  @media (max-width:640px){
    .footer{
      width:calc((100vw - 24px) / 0.9);
      margin-left:calc(50% - (50vw - 12px) / 0.9);
      margin-right:calc(50% - (50vw - 12px) / 0.9);
      margin-top:90px;margin-bottom:12px;
      border-radius:20px;
    }
    .footer-inner{padding:36px 24px 0;}
    .footer-bottom{flex-direction:column;align-items:flex-start;gap:18px;}
    .pill-yard{margin:8px 0 0;height:140px;}
  }