:root{
        --ink:#090A0B;
        --paper:#FFFFFF;
        --brand:#FF7D00;        /* replaces --blue-2 */
        --brand-deep:#E66E00;   /* replaces --blue   */
        --brand-soft:#FF9633;   /* replaces --blue-3 */
        --line:rgba(9,10,11,.07);
        --line-2:rgba(9,10,11,.05);
        --muted:rgba(9,10,11,.45);
        --muted-2:rgba(9,10,11,.55);
        --muted-3:rgba(9,10,11,.35);
        --font-sans:'Geist','Inter',ui-sans-serif,system-ui,sans-serif;
        --font-serif:'Instrument Serif',ui-serif,serif;
        --font-mono:'Geist Mono',ui-monospace,monospace;
      }
      *{box-sizing:border-box}
      html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
      body{overflow-x:hidden}
      a{color:inherit;text-decoration:none}
      button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
      img{display:block;max-width:100%}


      .nav{
        position:fixed;left:50%;top:clamp(20px,2.5vw,32px);transform:translateX(-50%);
        width:clamp(680px,65vw,985px);max-width:calc(100vw - 48px);height:clamp(44px,3.8vw,55px);
        border-radius:12px;
        display:flex;align-items:center;justify-content:space-between;
        padding:0 8px 0 20px;
        z-index:200;
        transition:background-color .4s ease, box-shadow .4s ease, color .4s ease;
      }
      .nav .brand{display:flex;align-items:center;gap:8px;color:#fff}
      .nav .brand svg.mark{height:24px;width:24px;transition:color .4s ease}
      .brand-word{height:17px;width:auto;color:inherit;display:block;flex-shrink:0}
      .nav .links{display:flex;gap:clamp(20px,2.8vw,42px);align-items:center}
      .nav .links a{font-size:clamp(12px,0.95vw,14px);letter-spacing:-0.02em;font-weight:500;color:rgba(254,254,254,.75);transition:color .4s ease;white-space:nowrap}
      .nav .right{display:flex;align-items:center;gap:clamp(12px,1.4vw,20px)}
      .nav .signin{font-size:clamp(12px,0.95vw,14px);letter-spacing:-0.02em;font-weight:500;color:rgba(254,254,254,.85);transition:color .4s ease;white-space:nowrap}
      .nav .cta{
        position:relative;overflow:hidden;
        height:clamp(32px,2.7vw,39px);padding:0 clamp(10px,1.1vw,16px);border-radius:clamp(8px,0.7vw,10px);
        background:#FF7D00;border:1px solid rgba(255,255,255,.2);
        color:#FEFEFE;font-size:clamp(12px,0.95vw,14px);font-weight:500;letter-spacing:-0.02em;white-space:nowrap;
        box-shadow:inset 0 0 14.1px 2px rgba(255,255,255,.2),
                   0 2px 5px rgba(255,125,0,.2),0 9px 9px rgba(255,125,0,.17),0 19px 12px rgba(255,125,0,.1);
      }
      .nav.dark{
        background:rgba(0,0,0,.04);
        backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);
      }
      .nav.dark .brand,
      .nav.dark .links a,
      .nav.dark .signin{color:var(--ink)}
      .nav.dark .links a{color:rgba(9,10,11,.65)}
      .nav.glass{
        position:relative;
        background:rgba(0,0,0,.25);
        box-shadow:inset 0 -4px 22.3px rgba(255,255,255,.15);
        border:1px solid rgba(255,255,255,.08);
        overflow:hidden;
      }
      .nav.glass::before,
      .nav.glass::after{
        content:'';
        position:absolute;
        pointer-events:none;
        z-index:10;
        background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
        width:10%;height:1px;
        filter:blur(0.6px);
        opacity:0;
      }
      .nav.glass::before{top:0;left:-10%}
      .nav.glass::after{bottom:0;right:-10%}
      .nav.glass.nav-lines-go::before{animation:none}
      .nav.glass.nav-lines-go::after{animation:none}
      @keyframes navLineTop{
        0%  {left:-10%;opacity:0}
        5%  {opacity:1}
        90% {opacity:.5}
        98% {opacity:0}
        100%{left:110%;opacity:0}
      }
      @keyframes navLineBottom{
        0%  {right:-10%;opacity:0}
        5%  {opacity:1}
        90% {opacity:.5}
        98% {opacity:0}
        100%{right:110%;opacity:0}
      }


      .curtain-spacer{display:none}


      html.fp-enabled, html.fp-enabled body{height:100%;overflow:hidden}
      #fullpage .section{height:100vh;overflow:hidden;position:relative}
      #fullpage .section.fp-curtain{background:transparent}
      #fullpage .section.fp-footer{height:100vh;display:flex;align-items:stretch;background:var(--ink)}
      #fullpage .section.fp-footer footer{width:100%;min-height:100vh}
      #fullpage .section > .sect{height:100%}

      .curtain{
        position:fixed;left:0;top:0;
        width:100%;height:100vh;
        overflow:hidden;color:#fff;perspective:2000px;
        z-index:50;
        will-change:transform;
        background-color:#0B0C0E;
        box-shadow:0 24px 60px rgba(0,0,0,.35);
      }
      .curtain__bg{
        position:absolute;inset:0;z-index:0;
        background-image:
          radial-gradient(60% 80% at 50% 30%, rgba(255,166,77,.45) 0%, rgba(11,12,14,0) 70%),
          url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='100' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' x2='1' y1='0' y2='0'><stop offset='0' stop-color='%230A0908'/><stop offset='0.20' stop-color='%2315110D'/><stop offset='0.40' stop-color='%234A2C12'/><stop offset='0.50' stop-color='%238A4F1E'/><stop offset='0.60' stop-color='%234A2C12'/><stop offset='0.80' stop-color='%2315110D'/><stop offset='1' stop-color='%230A0908'/></linearGradient></defs><rect width='60' height='100' fill='url(%23g)'/></svg>");
        background-size: auto, 30px 100%;
        background-repeat: no-repeat, repeat;
      }
      .curtain__video{
        position:absolute;inset:0;width:100%;height:100%;
        object-fit:cover;object-position:center;
        pointer-events:none;
        z-index:1;
        /* sepia chain warms the glass video to the termbase palette */
        filter: sepia(1) saturate(2.4) hue-rotate(-8deg) brightness(1.08) contrast(1.05);
        opacity:.61; /* lets the dark curtain base darken the clip */
      }
      .curtain__tint{
        position:absolute;inset:0;z-index:2;pointer-events:none;
        background:
          radial-gradient(60% 70% at 50% 30%, rgba(255,125,0,.2) 0%, rgba(11,12,14,0) 65%);
        mix-blend-mode:screen;
      }
      .curtain__overlay{
        position:absolute;inset:0;
        background:
          radial-gradient(120% 70% at 50% 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,.25) 100%),
          linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(10,8,6,.55) 100%);
        pointer-events:none;
      }

      @keyframes scrollDown{
        0%{transform:translate(-50%,0);opacity:1}
        70%{transform:translate(-50%,14px);opacity:0}
        100%{transform:translate(-50%,14px);opacity:0}
      }
      .curtain__edge{
        position:absolute;left:0;right:0;bottom:-2px;height:14px;
        background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 100%);
        pointer-events:none;
      }

      .curtain__overlay{z-index:3}

      .hero{
        position:absolute;left:0;right:0;top:0;
        display:flex;flex-direction:column;align-items:center;
        text-align:center;
        padding-top:160px;
        color:#fff;
        z-index:6;
      }
      .hero .pill{
        display:inline-flex;align-items:center;gap:clamp(4px,0.4vw,6px);
        padding:clamp(4px,0.4vw,6px) clamp(10px,1vw,14px) clamp(4px,0.4vw,6px) clamp(4px,0.4vw,6px);border-radius:100px;
        background:rgba(255,255,255,.01);
        border:1px solid rgba(255,255,255,.15);
        box-shadow:inset 0 0 11.9px rgba(255,255,255,.3);
        position:relative;overflow:hidden;
      }
      .hero .pill::before,
      .hero .pill::after{
        content:'';
        position:absolute;pointer-events:none;
        background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%);
        height:1px;width:10%;
        filter:blur(0.5px);opacity:0;
      }
      .hero .pill::before{top:0;left:-10%}
      .hero .pill::after{bottom:0;right:-10%}
      .hero .pill.intro-pill-in{
        animation:introBounceIn .55s cubic-bezier(.22,.61,.36,1) forwards;
      }
      .hero .pill.intro-pill-in::before{animation:none}
      .hero .pill.intro-pill-in::after{animation:none}
      @keyframes pillShimmerTop{
        0%  {left:-10%;opacity:0}
        5%  {opacity:.9}
        90% {opacity:.5}
        97% {opacity:0}
        100%{left:110%;opacity:0}
      }
      @keyframes pillShimmerBottom{
        0%  {right:-10%;opacity:0}
        5%  {opacity:.9}
        90% {opacity:.5}
        97% {opacity:0}
        100%{right:110%;opacity:0}
      }
      @keyframes pillBorderGlow{
        0%, 100% {
          border-color: rgba(255,255,255,.15);
          box-shadow: inset 0 0 11.9px rgba(255,255,255,.3), 0 0 0 0 rgba(255,255,255,0);
        }
        50% {
          border-color: rgba(255,255,255,.5);
          box-shadow: inset 0 0 16px rgba(255,255,255,.45), 0 0 28px 4px rgba(255,166,77,.2);
        }
      }
      .hero .pill .new{
        display:flex;justify-content:center;align-items:center;gap:clamp(6px,0.7vw,10px);
        padding:clamp(4px,0.4vw,6px) clamp(6px,0.55vw,8px);border-radius:100px;background:#FF7D00;
        color:rgba(254,254,254,.9);font-size:clamp(8px,0.7vw,10px);letter-spacing:.2em;font-weight:700;
      }
      .hero .pill .label{font-size:clamp(11px,0.95vw,14px);letter-spacing:-0.03em;color:rgba(255,255,255,.8);font-weight:500}
      .hero h1{
        margin:clamp(-30px,-2.8vw,-40px) auto 0;
        text-align:center;
        font-size:clamp(48px,5.8vw,82px);
        letter-spacing:-0.055em;line-height:1.05;font-weight:500;
        color:#fff;
        text-align:center;
        width:fit-content;
      }
      .hero h1 .line{display:block;white-space:nowrap;text-align:center}
      .hero h1 .it{
        font-family:var(--font-serif);font-style:italic;font-weight:400;
        letter-spacing:-0.02em;
      }
      .hero p.sub{
        margin:clamp(-35px,-3.2vw,-47px) auto 0;
        width:min(576px,88vw);max-width:min(576px,88vw);
        color:rgba(255,255,255,.90);
        text-align:center;
        font-family:"Geist",ui-sans-serif,sans-serif;
        font-size:clamp(13px,1.2vw,17px);
        font-style:normal;
        font-weight:500;
        line-height:135%;
        letter-spacing:-0.03em;
        color:rgba(255,255,255,.9);
      }
      .hero .ctas{display:flex;gap:clamp(12px,1.4vw,20px);margin-top:clamp(12px,1.4vw,20px);justify-content:center;align-items:center}
      .hero .ctas .btn{
        height:clamp(36px,3.2vw,46px);padding:0 clamp(10px,1.1vw,16px);border-radius:clamp(10px,1vw,14px);font-size:clamp(13px,1.1vw,16px);font-weight:500;letter-spacing:-0.04em;
        display:inline-flex;align-items:center;justify-content:center;gap:10px;
        color:rgb(254,254,254);
        cursor:pointer;
        transform:scale(0);
        transform-origin:center center;
        will-change:transform;
      }
      .hero .ctas .btn.primary{
        width:clamp(170px,15.5vw,223px);
        background:rgb(255,125,0);border:1px solid rgba(255,255,255,.3);
        box-shadow:inset 0 0 8px 6px rgba(255,255,255,.2),
                   0 2px 5px rgba(255,125,0,.2),0 9px 9px rgba(255,125,0,.17),0 19px 12px rgba(255,125,0,.1);
      }
      .hero .ctas .btn.ghost{
        width:clamp(120px,11vw,160px);
        background:rgba(255,255,255,.2);
        border:1px solid rgba(255,255,255,.15);
      }


      .browser{
        position:absolute;left:50%;bottom:clamp(-168px,-15vh,-108px);transform:translateX(-50%);
        width:min(1120px, calc(100vw - 128px)) !important;height:clamp(430px,48vh,500px);
        border-radius:28px;
        background:linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.15));
        backdrop-filter:blur(24px);
        -webkit-backdrop-filter:blur(24px);
        overflow:hidden;
        z-index:4;
        box-shadow:0 34px 80px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.24);
      }
      .browser__chrome{
        height:50px;padding:0 16px;
        display:flex;align-items:center;gap:18px;color:rgba(255,255,255,.9);
      }
      .browser__dots{display:flex;gap:8px}
      .browser__dots i{width:12px;height:12px;border-radius:50%}
      .browser__dots i:nth-child(1){background:#FE5F58}
      .browser__dots i:nth-child(2){background:#FCBC2D}
      .browser__dots i:nth-child(3){background:#27C941}
      .browser__nav{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.65)}
      .browser__nav svg{width:14px;height:14px}
      .browser__url{
        flex:1;height:26px;border-radius:6px;background:rgba(255,255,255,.15);
        position:relative;display:flex;align-items:center;justify-content:center;gap:6px;
        font-size:12px;color:#fff;letter-spacing:-0.01em;
      }
      .browser__url .lock{width:8px;height:9px;border-radius:1px;background:#fff;display:inline-block}
      .browser__icons{display:flex;align-items:center;gap:18px;color:rgba(255,255,255,.7)}
      .browser__icons svg{width:16px;height:16px}

      .dashboard{
        position:absolute;left:8px;right:8px;top:50px;bottom:8px;
        background:#fff;border-radius:20px;display:flex;overflow:hidden;
        box-shadow:0 4px 10px rgba(117,117,117,.1),0 39px 23px rgba(117,117,117,.05);
      }
      .sidebar{
        width:250px;background:rgba(9,10,11,.03);border-right:1px solid rgba(9,10,11,.06);
        padding:16px;
      }
      .agency{
        background:rgba(9,10,11,.04);border-radius:16px;padding:10px;
        display:flex;align-items:center;gap:10px;
      }
      .agency__logo{
        width:36px;height:36px;border-radius:8px;background:#fff;
        display:grid;place-items:center;color:var(--ink);
      }
      .agency__logo svg{width:22px;height:22px}
      .agency__meta .k{font-size:9px;letter-spacing:.1em;font-weight:700;color:rgba(9,10,11,.4)}
      .agency__meta .n{font-size:16px;font-weight:500;letter-spacing:-0.04em;color:var(--ink);margin-top:3px}
      .agency__unfold{margin-left:auto;color:rgba(9,10,11,.35);font-size:18px;line-height:1}
      .sidebar h6{font-size:9px;letter-spacing:.1em;font-weight:700;color:rgba(9,10,11,.75);margin:28px 0 12px}
      .menu{display:flex;flex-direction:column;gap:6px}
      .menu a{
        display:flex;align-items:center;gap:10px;
        padding:9px 10px;border-radius:10px;
        font-size:14px;letter-spacing:-0.02em;color:rgba(9,10,11,.65);
      }
      .menu a.active{background:rgba(9,10,11,.05);color:var(--ink);font-weight:500}
      .menu a .ic{width:14px;height:14px;display:inline-block}
      .main{flex:1;display:flex;flex-direction:column}
      .breadcrumbs{
        display:flex;align-items:center;gap:6px;
        padding:16px 24px;border-bottom:1px solid rgba(9,10,11,.07);
        font-size:13px;letter-spacing:-0.02em;
      }
      .breadcrumbs span{color:rgba(9,10,11,.35)}
      .breadcrumbs strong{font-weight:500;color:var(--ink)}
      .welcome{padding:20px 22px 0;font-size:26px;letter-spacing:-0.04em;color:rgba(9,10,11,.85);font-weight:500}
      .kpis{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;padding:16px 22px 20px}
      .kpi{
        border:1px solid var(--line);border-radius:14px;padding:4px 4px 10px 4px;background:rgba(9,10,11,.03);
        display:flex;flex-direction:column;gap:0;
      }
      .kpi .inner{
        background:#fff;border-radius:12px;padding:12px 14px;
        display:flex;justify-content:space-between;align-items:flex-start;
      }
      .kpi .label{font-size:9px;letter-spacing:.1em;font-weight:700;color:rgba(9,10,11,.4)}
      .kpi .row{display:flex;justify-content:space-between;align-items:flex-end}
      .kpi .val{font-family:var(--font-mono);font-size:25px;letter-spacing:-0.05em;color:var(--ink);line-height:1}
      .kpi .label{font-size:11px;letter-spacing:.1em;font-weight:700;color:rgba(9,10,11,.4)}
      .kpi .desc{font-size:13px;color:rgba(9,10,11,.35);letter-spacing:-0.02em;margin-top:4px}
      .kpi .mom{font-size:12px;letter-spacing:-0.03em;font-weight:500}
      .kpi .mom .val{color:#090A0B;font-family:var(--font-sans);font-size:12px;font-style:normal;font-weight:500;line-height:110%;letter-spacing:-0.36px}
      .kpi .mom .lbl{color:#090A0B73}
      .kpi .foot{display:flex;justify-content:space-between;align-items:center;padding:0 6px;margin-top:8px}
      .kpi .qmark{width:14px;height:14px;display:inline-block;vertical-align:middle}


      .spacer{height:100vh}
      main.below{position:relative;z-index:1;background:var(--paper)}


      .sect{
        position:relative;width:100%;
        background:var(--paper);
        overflow:hidden;
      }
      .sect-inner{
        max-width:1264px;margin:0 auto;padding:160px 64px 100px;
        position:relative;
      }
      .eyebrow{
        display:inline-flex;align-items:center;gap:8px;
        font-size:10px;letter-spacing:.1em;font-weight:700;color:rgba(9,10,11,.55);
      }
      .eyebrow .sq{width:8px;height:8px;border-radius:2px;background:#FF7D00}

      .s2{padding-top:140px;padding-bottom:0;display:flex;flex-direction:column;justify-content:center;overflow:hidden;background:var(--paper)}
      .s2-inner{
        max-width:1264px;margin:0 auto;padding:clamp(60px,8vh,100px) clamp(32px,5vw,64px) clamp(40px,6vh,80px);
        position:relative;
        height:calc(100vh - 80px);
        display:flex;flex-direction:column;justify-content:center;
      }
      .s2 .grid{display:grid;grid-template-columns:clamp(80px,16vw,200px) 1fr clamp(80px,16vw,200px);gap:clamp(20px,4vw,48px);align-items:start;position:relative}
      .s2 .reveal{will-change:filter,opacity}
      .s2 h2{
        font-size:clamp(28px,2.8vw,42px);letter-spacing:-0.05em;font-weight:500;line-height:1.05;
        margin:0;color:var(--ink);
      }
      .s2 .lede{
        font-size:clamp(18px,1.8vw,24px);letter-spacing:-0.04em;line-height:1.15;font-weight:700;
        color:rgba(9,10,11,.45);margin:36px 0 0;max-width:582px;
      }
      .s2 .ovals{
        position:absolute;left:0;right:0;top:clamp(120px,20vh,200px);height:clamp(160px,22vh,260px);
        pointer-events:none;display:flex;justify-content:center;gap:0;
      }
      .s2 .ovals .o{
        width:clamp(260px,35vw,470px);height:clamp(140px,18vw,255px);border-radius:300px;border:1.5px solid rgba(9,10,11,.05);
        margin-left:clamp(-150px,-10vw,-80px);
      }
      .s2 .ovals .o:first-child{margin-left:clamp(-220px,-15vw,-120px)}
      .s2 .ovals .o:nth-child(2){border-radius:0;border:1.5px solid rgba(9,10,11,.05);}
      .s2 .bottom{
        margin-top:clamp(40px,10vh,120px);display:grid;grid-template-columns:clamp(80px,16vw,200px) 1fr auto;gap:clamp(20px,4vw,48px);align-items:end;
      }
      .s2 .bottom .left{max-width:330px;grid-column:2}
      .s2 .bottom .left p{font-size:clamp(12px,1vw,14px);line-height:1.15;letter-spacing:-0.02em;color:rgba(9,10,11,.85);margin:0 0 16px}
      .s2 .meet{
        display:inline-flex;align-items:center;gap:8px;height:clamp(38px,4vw,46px);padding:0 clamp(10px,1.5vw,16px);
        border-radius:14px;background:rgba(0,0,0,.07);color:var(--ink);font-size:clamp(13px,1.2vw,16px);letter-spacing:-0.03em;font-weight:500;
      }
      .s2 .meet svg{width:clamp(14px,1.4vw,18px);height:clamp(14px,1.4vw,18px)}
      .s2 .stats{display:flex;gap:clamp(6px,.8vw,10px);margin-right:clamp(-300px,calc((100vw - 1264px) / -2),0px);justify-self:end}
      .s2 .stats .stat{
        width:clamp(80px,9vw,120px);height:clamp(80px,9vw,120px);border-radius:clamp(16px,2vw,24px);padding:clamp(8px,1vw,14px);display:flex;flex-direction:column;justify-content:space-between;
      }
      .s2 .stats .stat.violet{background:rgba(255,125,0,.02);border:1px solid rgba(255,125,0,.25);box-shadow:inset 0 0 11.2px 5px rgba(255,125,0,.04)}
      .s2 .stats .stat.blue{background:rgba(9,10,11,.02);border:1px solid rgba(9,10,11,.15);box-shadow:inset 0 0 11.2px 5px rgba(9,10,11,.04)}
      .s2 .stats .v{font-family:var(--font-mono);font-size:clamp(18px,1.8vw,24px);letter-spacing:-0.06em;line-height:1}
      .s2 .stats .l{font-size:clamp(8px,.8vw,10px);letter-spacing:.1em;font-weight:700;line-height:1.2}
      .s2 .stats .violet .v{color:#FF7D00}
      .s2 .stats .violet .l{color:rgba(255,125,0,.75)}
      .s2 .stats .blue .v{color:#090A0B}
      .s2 .stats .blue .l{color:rgba(9,10,11,.6)}


      .s2 .grid > div:first-child .eyebrow,
      .s2 .bottom .left p,
      .s2 .bottom .left .meet,
      .s2 .stats .stat{
        opacity:0;transform:translateY(22px);will-change:transform,opacity;
      }
      .s2 .bottom .left .meet,
      .s2 .stats .stat{transform:scale(0);transform-origin:center center}
      .s2-in .grid > div:first-child .eyebrow{animation:s2FadeUp .7s cubic-bezier(.22,.61,.36,1) .05s forwards}

      .s2 .grid h2 .ch{
        display:inline-block;opacity:0;
        transform:translateY(.9em) rotateX(-70deg) scale(.9);
        transform-origin:50% 100%;
        filter:blur(14px);
        will-change:transform,opacity,filter;
      }
      .s2 .grid h2 .ch.sp{width:.28em}
      .s2 .grid h2{opacity:0}
      .s2-in .grid h2{opacity:1}
      .s2-in .grid h2 .ch{
        animation:introLetterUp .9s cubic-bezier(.22,.61,.36,1) both;
        animation-delay:calc(.1s + var(--i, 0) * 38ms);
      }
      .s2 .lede .sub-line{display:block;opacity:0;transform:translateY(18px);will-change:transform,opacity}
      .s2-in .lede .sub-line.in{animation:introSubLine .7s cubic-bezier(.22,.61,.36,1) forwards}
      .s2-in .bottom .left p{animation:s2FadeUp .7s cubic-bezier(.22,.61,.36,1) .85s forwards}
      .s2-in .bottom .left .meet{animation:s2MeetPop 1.1s cubic-bezier(.22,.61,.36,1) 1.15s forwards}
      .s2-in .stats .stat.violet{animation:s2BtnPop 1.1s cubic-bezier(.22,.61,.36,1) 1.35s forwards}
      .s2-in .stats .stat.blue{animation:s2BtnPop 1.1s cubic-bezier(.22,.61,.36,1) 1.65s forwards}
      @keyframes s2FadeUp{
        0%  {opacity:0;transform:translateY(22px)}
        100%{opacity:1;transform:translateY(0)}
      }
      @keyframes s2BtnPop{
        0%  {opacity:0;transform:translateY(14px)}
        100%{opacity:1;transform:translateY(0)}
      }
      @keyframes s2MeetPop{
        0%  {opacity:0;transform:translateY(12px)}
        100%{opacity:1;transform:translateY(0)}
      }


      .stripes{
        position:relative;width:100%;height:80px;overflow:hidden;
        background:linear-gradient(90deg,#B34E00 0%, #E66E00 40%, #FF7D00 75%, #FF9633 100%);
      }
      .stripes::before{
        content:"";position:absolute;inset:0;
        background:repeating-linear-gradient(90deg,
          rgba(0,0,0,0) 0,
          rgba(0,0,0,0) 12px,
          rgba(0,0,0,.32) 14px,
          rgba(0,0,0,.32) 18px,
          rgba(255,255,255,.18) 19px,
          rgba(255,255,255,.18) 20px,
          rgba(0,0,0,0) 22px,
          rgba(0,0,0,0) 28px
        );
      }


      .s3{position:relative;background:var(--paper);overflow:hidden}
      .s3-grid-lines{
        position:absolute;left:50%;top:0;transform:translateX(-50%);
        width:1064px;height:100%;display:flex;justify-content:space-between;pointer-events:none;
      }
      .s3-grid-lines i{width:1px;background:repeating-linear-gradient(180deg, rgba(9,10,11,.12) 0 4px, transparent 4px 8px);height:100%}
      .s3-inner{max-width:1500px;margin:0 auto;padding:clamp(96px,16.8vh,176px) clamp(20px,3vw,40px) 0;position:relative}
      .s3-head{text-align:center;max-width:626px;margin:0 auto clamp(12px,1.8vh,20px);position:relative}
      .s3-head .eyebrow{justify-content:center;margin-bottom:clamp(10px,2.3vh,24px)}
      .s3-head h2{
        font-size:clamp(36px,3.8vw,56px);letter-spacing:-0.06em;line-height:1;font-weight:500;margin:0 0 clamp(8px,1.5vh,16px);color:var(--ink);text-wrap:pretty;
      }
      .s3-head h2 .it{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-0.02em}
      .s3-head p{font-size:clamp(14px,1.05vw,16.5px);line-height:1.4;letter-spacing:-0.02em;color:rgba(9,10,11,.7);margin:0 auto;max-width:500px}


      .s3 .s3-head h2{opacity:0;filter:blur(18px);transform:scale(0.96)}
      .s3 .s3-head p .sub-line{display:block;opacity:0;transform:translateY(18px);will-change:transform,opacity}
      .s3-in .s3-head h2{opacity:1 !important;filter:none !important;transform:none !important;animation:none !important}
      .s3 .s3-head h2 .ch{
        opacity:0;display:inline-block;transform:translateY(.9em) rotateX(-70deg) scale(.9);
        filter:blur(14px);transform-origin:center bottom;will-change:transform,opacity,filter;
      }
      .s3 .s3-head h2 .ch.sp{width:.28em}
      .s3-in .s3-head h2 .ch{
        animation:introLetterUp .45s cubic-bezier(.22,.61,.36,1) both;
        animation-delay:calc(.05s + var(--i, 0) * 19ms);
      }
      .s3-in .s3-head p .sub-line.in{animation:introSubLine .35s cubic-bezier(.22,.61,.36,1) forwards}
      .s3-head .corner{
        position:absolute;top:90px;font-size:10px;letter-spacing:.1em;font-weight:700;color:rgba(9,10,11,.2);
      }
      .s3-head .corner.l{left:-180px;text-align:left}
      .s3-head .corner.r{right:-180px;text-align:left}


      .s3 .s3-head .corner.l .ch{
        display:inline-block;opacity:0;transform:translateX(10px);
      }
      .s3 .s3-head .corner.l .ch.sp{width:.3em}
      .s3-in .s3-head .corner.l .ch{
        animation:cornerLetterIn .35s cubic-bezier(.22,.61,.36,1) both;
        animation-delay:calc(var(--i, 0) * 120ms);
      }
      .s3 .s3-head .corner.r .ch{
        display:inline-block;opacity:0;transform:translateX(-10px);
      }
      .s3 .s3-head .corner.r .ch.sp{width:.3em}
      .s3-in .s3-head .corner.r .ch{
        animation:cornerLetterInL .35s cubic-bezier(.22,.61,.36,1) both;
        animation-delay:calc(var(--i, 0) * 120ms);
      }
      @keyframes cornerLetterIn{
        from{opacity:0;transform:translateX(10px)}
        to{opacity:1;transform:translateX(0)}
      }
      @keyframes cornerLetterInL{
        from{opacity:0;transform:translateX(-10px)}
        to{opacity:1;transform:translateX(0)}
      }


      .card3{
        opacity:0;
        transform:translateY(60px);
        will-change:transform,opacity;
      }
      @keyframes s3CardUp{
        0%  {opacity:0;transform:translateY(60px)}
        100%{opacity:1;transform:translateY(0)}
      }
      .s3-cards-in .card3.a{animation:s3CardUp .8s cubic-bezier(.22,.61,.36,1) 0s forwards}
      .s3-cards-in .card3.b{animation:s3CardUp .8s cubic-bezier(.22,.61,.36,1) .25s forwards}
      @keyframes s3CardUpPop{
        0%  {opacity:0;transform:translateY(60px)}
        100%{opacity:1;transform:translateY(0)}
      }
      .s3-cards-in .card3.c{animation:s3CardUpPop 1s cubic-bezier(.22,.61,.36,1) .5s forwards}


      .s3 .card3.a .conn{
        opacity:0;transform:scale(0);border-radius:50%;
        will-change:transform,opacity,border-radius;
      }

      .s3 .card3.a .stamp,
      .s3 .card3.b .stamp{
        opacity:0;transform:translateY(20px);
        will-change:transform,opacity;
      }

      .s3 #insightCard{
        opacity:0;transform:scale(0);border-radius:50%;
        will-change:transform,opacity,border-radius;
      }

      .s3 .card3.b .saving{
        opacity:0;transform:translateY(20px);
        will-change:transform,opacity;
      }
      @keyframes s3CircleReveal{
        0%  {opacity:0;transform:translateY(14px);filter:blur(10px);border-radius:24px}
        100%{opacity:1;transform:translateY(0);filter:blur(0);border-radius:24px}
      }
      @keyframes s3ConnReveal{
        0%  {opacity:0;transform:translateY(14px);filter:blur(10px);border-radius:24px}
        100%{opacity:1;transform:translateY(0);filter:blur(0);border-radius:24px}
      }
      @keyframes s3StampUp{
        0%  {opacity:0;transform:translateY(20px)}
        100%{opacity:1;transform:translateY(0)}
      }
      @keyframes s3SavingUp{
        0%  {opacity:0;transform:translateY(20px)}
        100%{opacity:1;transform:translateY(0)}
      }
      .conn.s3-reveal{animation:s3ConnReveal .8s cubic-bezier(.22,.61,.36,1) forwards}
      .stamp.s3-reveal{animation:s3StampUp .5s cubic-bezier(.22,.61,.36,1) forwards}
      #insightCard.s3-reveal{animation:s3ConnReveal .85s cubic-bezier(.22,.61,.36,1) forwards}
      .saving.s3-reveal{animation:s3SavingUp .5s cubic-bezier(.22,.61,.36,1) forwards}


      .s3 .card3.c .runway{
        opacity:0;transform:scale(0);border-radius:50%;
        transform-origin:center center;
        will-change:transform,opacity,border-radius;
      }
      .s3 .card3.c .runway.s3-reveal{animation:s3ConnReveal .85s cubic-bezier(.22,.61,.36,1) forwards}

      .s3 .card3.c .stamp{
        opacity:0;transform:translateY(20px);
        will-change:transform,opacity;
      }

      .s3 .chart .badge{opacity:0;transform:translateX(-50%)}
      .s3 .chart-dot{
        position:absolute;
        width:10px;height:10px;
        border-radius:50%;
        background:#fff;
        box-shadow:0 0 6px rgba(255,255,255,.5);
        opacity:0;
        z-index:2;
        transform:translate(-50%,-50%);
        pointer-events:none;
      }

      .cards3{
        display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(10px,1.5vh,16px);
        zoom:1;
      }
      .card3{
        position:relative;height:552px;border-radius:16px;overflow:hidden;color:#fff;
        display:flex;flex-direction:column;justify-content:flex-start;
        padding:134px 74px 0;
      }
      .card3.a,.card3.b,.card3.c{padding-top:59px}
      .card3.a .conn-list{margin-top:auto;margin-bottom:auto}
      .card3 .stamp{
        position:absolute;left:0;right:0;bottom:24px;text-align:center;
        font-size:10px;letter-spacing:.1em;font-weight:700;color:rgba(255,255,255,.75);
      }
      .card3.a{background:url('/assets/card-a-bg.png') center/cover}
      .card3.b{background:url('/assets/card-b-bg.png') center/cover}
      .card3.c{background:url('/assets/card-c-bg.png') center/cover}
      /* filtered copy warms the card art to the termbase palette */
      .card3::before{content:"";position:absolute;inset:0;background:inherit;
        filter:sepia(1) saturate(2.4) hue-rotate(-8deg) brightness(1.1);}
      .card3.c::before{filter:sepia(1) saturate(2.8) hue-rotate(-6deg) brightness(.78) contrast(1.08)}
      .card3 > *{position:relative;z-index:1}


      .conn-list{display:flex;flex-direction:column;gap:10px}
      .conn{
        border-radius:24px;background:rgba(255,255,255,.14);
        height:88px;padding:10px 20px 10px 10px;
        display:flex;align-items:center;gap:16px;
        position:relative;
        isolation:isolate;
      }
      .conn .badge{
        width:68px;height:68px;border-radius:16px;flex-shrink:0;
        display:grid;place-items:center;overflow:hidden;
        color:#fff;font-weight:700;font-size:16px;letter-spacing:-0.03em;
      }
      .conn .badge.deepl{background:#0F2B46}
      .conn .badge.gpt{background:#0D0D0D;font-size:12px;letter-spacing:-0.02em}
      .conn .badge.claude{background:#CC785C;font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:17px}
      .conn .meta{flex:1;min-width:0}
      .conn .kicker{font-size:13px;letter-spacing:-0.02em;color:rgba(255,255,255,.85);margin-bottom:4px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      .conn .name{font-size:20px;letter-spacing:-0.04em;font-weight:500;line-height:1.1;color:#fff;white-space:nowrap}
      .conn .live-pill{font-size:11px;letter-spacing:.1em;font-weight:700;padding:6px 8px;border-radius:100px;background:rgb(255,125,0);color:rgba(254,254,254,.95);white-space:nowrap;flex-shrink:0}


      .insight-card{
        border-radius:24px;background:rgba(255,255,255,.14);
        padding:12px;display:flex;flex-direction:column;gap:12px;
        flex:0 0 378px;
        position:relative;
        isolation:isolate;
      }

      .bb-wrap{
        pointer-events:none;
        position:absolute;inset:0;
        border-radius:inherit;
        padding:var(--bb-ring, 2px);
        box-sizing:border-box;
        -webkit-mask:
          linear-gradient(#000 0 0) content-box,
          linear-gradient(#000 0 0);
                mask:
          linear-gradient(#000 0 0) content-box,
          linear-gradient(#000 0 0);
        -webkit-mask-composite:xor;
                mask-composite:exclude;
        z-index:0;
      }
      .bb-beam{
        position:absolute;
        aspect-ratio:1;
        width:var(--bb-size, 140px);
        background:radial-gradient(circle at center,
          rgba(255,255,255,1)  0%,
          rgba(255,255,255,.7) 6%,
          rgba(255,255,255,.3) 18%,
          rgba(255,255,255,.1) 32%,
          rgba(255,255,255,0)  50%);
        filter:blur(0.6px);
        offset-path:rect(0 auto auto 0 round var(--bb-radius, 24px));
        offset-distance:0%;
        offset-rotate:0deg;
        animation:bb-travel 6s linear infinite;
      }
      .bb-beam-2{animation-delay:-3s}


      .conn .bb-beam{opacity:.5}
      .conn-list .conn:nth-child(1) .bb-beam-1{animation-delay:-0.5s}
      .conn-list .conn:nth-child(1) .bb-beam-2{animation-delay:-3.5s}
      .conn-list .conn:nth-child(2) .bb-beam-1{animation-delay:-2.5s}
      .conn-list .conn:nth-child(2) .bb-beam-2{animation-delay:-5.5s}
      .conn-list .conn:nth-child(3) .bb-beam-1{animation-delay:-4.5s}
      .conn-list .conn:nth-child(3) .bb-beam-2{animation-delay:-1.5s}
      :where(.insight-card, .conn, .runway, .nav, .nav .cta, .hero .ctas .btn, .hero .pill) > *:not(.bb-wrap){position:relative;z-index:1}
      .browser > .bb-wrap{position:absolute;inset:0;z-index:0}
      .browser > .browser__chrome{position:relative;z-index:2}
      .browser > .dashboard{z-index:1}


      .nav            { --bb-radius: 12px;  --bb-size: 100px; --bb-ring: 1px; isolation:isolate; }
      .nav .cta       { --bb-radius: 10px;  --bb-size: 60px;  --bb-ring: 1px; isolation:isolate; }
      .hero .ctas .btn{ --bb-radius: 14px;  --bb-size: 80px;  --bb-ring: 1px; isolation:isolate; position:relative; overflow:hidden; }
      .hero .pill     { --bb-radius: 100px; --bb-size: 80px;  --bb-ring: 1px; isolation:isolate; }
      .browser        { --bb-radius: 24px;  --bb-size: 300px; --bb-ring: 1px; isolation:isolate; }
      .insight-card   { --bb-size: 300px; }
      .runway         { --bb-size: 300px; }
      .conn           { --bb-size: 200px; }
      @keyframes bb-travel{
        to{offset-distance:100%}
      }
      .insight-head{display:flex;align-items:center;gap:10px}
      .insight-head .ic{width:42px;height:42px;border-radius:10px;background:#fff;display:grid;place-items:center;color:#FF7D00}
      .insight-head .ic svg{width:24px;height:24px}
      .insight-head .k{font-size:10px;letter-spacing:.1em;font-weight:700;color:rgba(255,255,255,.75)}
      .insight-head .t{font-size:17px;letter-spacing:-0.04em;font-weight:500;color:#fff;margin-top:4px}
      .insight-msg{font-size:24px;letter-spacing:-0.05em;line-height:1.1;font-weight:500;color:rgba(255,255,255,.95);text-wrap:pretty;padding:6px 4px 0}
      .anomaly{
        align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
        padding:6px 14px 6px 6px;border-radius:100px;background:#FF7D00;color:#fff;
      }
      .anomaly i{width:22px;height:22px;border-radius:50%;background:#fff;color:#FF7D00;display:grid;place-items:center}
      .anomaly i svg{width:12px;height:12px}
      .anomaly span{font-size:14px;letter-spacing:-0.03em;font-weight:500}
      .saving{
        border-radius:24px;background:rgba(255,255,255,.2);
        padding:14px;
      }
      .saving .lbl{font-size:14px;color:rgba(255,255,255,.85);letter-spacing:-0.02em;font-weight:500}
      .saving .v{font-family:var(--font-mono);font-size:32px;letter-spacing:-0.06em;color:#fff;line-height:1;margin-top:6px}
      .saving .v em{font-family:var(--font-sans);font-style:normal;font-weight:500;color:#fff;font-size:16px}


      .runway{
        border-radius:24px;background:rgba(255,255,255,.14);
        padding:12px;display:flex;flex-direction:column;gap:12px;
        flex:0 0 378px;
        position:relative;
        isolation:isolate;
      }
      .runway-head{display:flex;align-items:center;gap:10px}
      .runway-head .ic{width:42px;height:42px;border-radius:10px;background:#fff;display:grid;place-items:center}
      .runway-head .ic svg{width:24px;height:24px;color:#FF7D00}
      .runway-head .ic img{color:#FF7D00}
      .chart{position:relative;height:148px;margin:6px 0 0}
      .chart svg{width:100%;height:100%;display:block}
      .chart .badge{
        position:absolute;left:30%;top:0;background:#fff;color:rgba(9,10,11,.75);
        border-radius:32px;padding:6px 12px;font-size:9px;font-weight:700;letter-spacing:.06em;
        box-shadow:0 4px 12px rgba(0,0,0,.18);
        white-space:nowrap;
      }
      .chart .badge::after{
        display:none;
      }
      .chart .axis{display:flex;justify-content:space-between;gap:6px;font-size:9px;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.75);margin-top:6px}
      .chart .axis span{white-space:nowrap}
      .runway-foot{border-radius:24px;background:rgba(255,255,255,.2);padding:14px}
      .runway-foot .v{font-size:28px;letter-spacing:-0.05em;font-weight:500;color:#fff}
      .runway-foot .d{font-size:14px;letter-spacing:-0.02em;color:rgba(255,255,255,.85);margin-top:4px}


      .s4 .tile.brandtile{ opacity:0; transform: scale(0) translateY(30px); }
      .s4 .brandtile-label .n,
      .s4 .brandtile-label .k{ opacity:0; transform: translateY(20px); }


      .s4 .s4-bottom .eyebrow{opacity:0;transform:translateY(20px);will-change:opacity,transform}
      .s4 .sync-stamp{opacity:0;transform:translateX(-50%) translateY(20px);will-change:opacity,transform}
      .s4 .s4-bottom h2 .ch{
        opacity:0;display:inline-block;transform:translateY(.9em) rotateX(-70deg) scale(.9);
        filter:blur(14px);transform-origin:center bottom;will-change:transform,opacity,filter;
      }
      .s4 .s4-bottom h2 .ch.sp{width:.28em}
      .s4 .int-pill{opacity:0;transform:scale(0);will-change:opacity,transform}
      .s4 .filter-list{opacity:0;transform:translateX(120%);will-change:opacity,transform}
      @keyframes s4PillPop{
        0%  {opacity:0;transform:translateY(10px)}
        100%{opacity:1;transform:translateY(0)}
      }


      .s4{position:relative;background:var(--paper);overflow:hidden;min-height:100vh}
      .s4-inner{max-width:1440px;margin:0 auto;padding:clamp(90px,13vh,140px) clamp(24px,3vw,40px) clamp(36px,5.5vh,80px);position:relative;height:100%;min-height:min(980px,calc(100vh - 10px))}
      .s4-grid-lines{
        position:absolute;left:50%;top:0;transform:translateX(-50%);
        width:1064px;height:100%;display:flex;justify-content:space-between;pointer-events:none;
      }
      .s4-grid-lines i{width:1px;background:repeating-linear-gradient(180deg, rgba(9,10,11,.08) 0 4px, transparent 4px 8px);height:100%}
      .s4-horiz{
        position:absolute;left:0;right:0;top:50%;height:1px;
        background:repeating-linear-gradient(90deg, rgba(9,10,11,.12) 0 6px, transparent 6px 10px);
      }
      .orbit{
        position:relative;
        width:min(680px, 82vw, calc(100vh - 260px));
        aspect-ratio:1/1;height:auto;margin:clamp(12px,2.5vh,30px) auto 0;
        --tile-w: clamp(72px, min(16.3vw, calc((100vh - 260px) * 0.2), 135.485px), 135.485px);
        --tile-h: clamp(84px, min(19vw,  calc((100vh - 260px) * 0.232), 158px), 158px);
        --brandtile: clamp(72px, min(14vw, calc((100vh - 260px) * 0.2), 158px), 158px);
      }
      .orbit-ring{
        position:absolute;inset:0;
        transform-origin:50% 50%;
      }
      .tile{
        width:var(--tile-w);height:var(--tile-h);
        border-radius:calc(var(--tile-w) * 0.31);
        display:grid;place-items:center;color:#fff;font-weight:700;letter-spacing:-0.04em;
        font-size:calc(var(--tile-w) * 0.18);
        box-shadow:0 18px 38px rgba(0,0,0,.10), inset 0 -10px 30px rgba(0,0,0,.08);
        border:1px solid rgba(9,10,11,.13);
      }
      .orbit-ring .tile{
        position:absolute;top:50%;left:50%;
        margin:calc(var(--tile-h) / -2) 0 0 calc(var(--tile-w) / -2);
        --rot:0deg;
        transform-origin:50% 50%;
        will-change:transform;
      }

      .orbit-ring .tile > *{
        display:inline-flex;align-items:center;justify-content:center;
        transform:rotate(calc(var(--rot) * -1));
        transform-origin:50% 50%;
      }
      .tile.empty{
        background:#fff;border:1px solid rgba(9,10,11,.08);
        box-shadow:0 6px 14px rgba(9,10,11,.04);
      }
      .tile.brandtile{
        position:absolute;top:50%;left:50%;
        width:var(--brandtile);height:var(--brandtile);
        margin:calc(var(--brandtile) / -2) 0 0 calc(var(--brandtile) / -2);
        border-radius:clamp(20px,3.4vw,32px);
        padding:clamp(24px, calc(var(--brandtile) * 0.24), 38px) clamp(22px, calc(var(--brandtile) * 0.23), 36px);box-sizing:border-box;
        gap:10px;flex-direction:column;
        background:linear-gradient(145deg, #FFFFFF 0%, #FFF1E0 45%, #FFD9AD 100%);
        box-shadow:inset 0 0 13.3px rgba(255,255,255,.6), 0 24px 44px rgba(0,0,0,.20);
        border:1px solid rgba(9,10,11,.04);
        display:flex;align-items:center;justify-content:center;color:#fff;
        z-index:3;
      }

      .orbit-ring .tile svg{
        width:calc(var(--tile-w) * 0.33);
        height:auto;
        max-width:100%;
      }
      .tile.brandtile svg{width:min(74px, calc(var(--brandtile) * 0.54));height:auto;color:#001524}
      .brandtile-label{
        position:absolute;left:50%;top:50%;
        transform:translate(-50%, calc(var(--brandtile)/2 + 18px));
        text-align:center;color:var(--ink);
        z-index:3;pointer-events:none;
      }
      .brandtile-label .n{font-size:clamp(18px,1.7vw,24px);letter-spacing:-0.05em;font-weight:500}
      .brandtile-label .k{font-size:clamp(8px,0.7vw,10px);letter-spacing:.1em;font-weight:700;color:rgba(9,10,11,.4);margin-top:clamp(4px,0.6vw,8px)}


      .orbit-ring .g1{ --rot: -45.659deg }
      .orbit-ring .g2{ --rot: -0.991deg }
      .orbit-ring .g3{ --rot: 43.025deg }
      .orbit-ring .g4{ --rot: 90.926deg }
      .orbit-ring .g6{ --rot: 134.422deg }
      .orbit-ring .g7{ --rot: -137.702deg }
      .orbit-ring .g8{ --rot: -0.991deg }
      .orbit-ring .g9{ --rot: 87.815deg }

      .s4-bottom{
        position:absolute;left:clamp(24px,3vw,40px);bottom:clamp(28px,5vh,60px);max-width:587px;
      }
      .s4-bottom .eyebrow{margin-bottom:clamp(14px,1.8vw,24px)}
      .s4-bottom h2{
        font-size:clamp(42px,4vw,66px);letter-spacing:-0.05em;line-height:1;font-weight:500;margin:0;color:var(--ink);text-wrap:pretty;
      }
      .s4-bottom h2 .it{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-0.02em}

      .filter-list{
        position:absolute;right:clamp(6px,1vw,10px);top:clamp(120px,18vh,220px);width:clamp(140px,13vw,180px);height:clamp(200px,28vh,280px);
        padding:0;overflow:hidden;pointer-events:auto;
        cursor:pointer;
        mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.05) 8%, #000 25%, #000 75%, rgba(0,0,0,.05) 92%, transparent 100%);
        -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.05) 8%, #000 25%, #000 75%, rgba(0,0,0,.05) 92%, transparent 100%);
      }
      .filter-list button{
        position:absolute;right:0;top:0;
        padding:clamp(6px,0.7vw,10px) clamp(12px,1.2vw,18px);border-radius:clamp(8px,0.85vw,12px);background:rgba(9,10,11,.03);border:1px solid rgba(9,10,11,.06);
        font-size:clamp(12px,1.05vw,15px);letter-spacing:-0.025em;font-weight:500;
        white-space:nowrap;
        transform-origin:right center;
        will-change:transform,opacity,color,background;
      }
      .filter-list button.active{background:#fff;color:rgb(9,10,11);box-shadow:0 6px 18px rgba(9,10,11,.08);border-color:rgba(9,10,11,.12)}

      .int-pill{
        position:absolute;right:clamp(24px,3vw,40px);bottom:clamp(28px,5vh,60px);
        background:rgba(9,10,11,.04);backdrop-filter:blur(3px);
        border-radius:100px;padding:clamp(3px,0.3vw,4px) clamp(10px,1.1vw,16px) clamp(3px,0.3vw,4px) clamp(3px,0.3vw,4px);height:clamp(40px,3.5vw,50px);
        display:flex;align-items:center;gap:clamp(6px,0.7vw,10px);
      }
      .int-pill .av{display:flex;gap:clamp(3px,0.3vw,4px)}
      .int-pill .av i{width:clamp(32px,2.9vw,42px);height:clamp(32px,2.9vw,42px);border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--ink)}
      .int-pill .av i svg{width:clamp(14px,1.2vw,18px);height:clamp(14px,1.2vw,18px)}
      .int-pill .meta .t{font-size:clamp(12px,1.05vw,15px);letter-spacing:-0.03em;color:var(--ink);font-weight:500;line-height:1}
      .int-pill .meta .s{font-size:clamp(7px,0.65vw,9px);letter-spacing:.1em;font-weight:700;color:rgba(9,10,11,.4);margin-top:clamp(3px,0.4vw,6px)}

      .sync-stamp{
        position:absolute;left:50%;bottom:clamp(14px,2.5vh,30px);transform:translateX(-50%);
        font-size:clamp(8px,0.7vw,10px);letter-spacing:.1em;font-weight:700;color:rgba(9,10,11,.35);
      }


      footer{
        background:
          radial-gradient(56rem 36rem at 20% 8%, rgba(255,125,0,.16), transparent 62%),
          radial-gradient(44rem 32rem at 88% 18%, rgba(255,255,255,.055), transparent 68%),
          var(--ink);
        color:#fff;padding:clamp(72px,10vh,120px) 40px 32px;
        position:relative;overflow:hidden;
        display:flex;flex-direction:column;justify-content:center;
      }
      footer::before{
        content:"";position:absolute;left:40px;right:40px;top:32px;height:1px;
        background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
      }
      footer .inner{width:100%;max-width:1264px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,.74fr);gap:clamp(48px,8vw,120px);align-items:start}
      footer .footer-lead{max-width:650px}
      footer h3{font-size:clamp(36px,4.6vw,72px);letter-spacing:-0.065em;font-weight:500;line-height:.95;margin:0;max-width:660px;text-wrap:balance}
      footer h3 .it{font-family:var(--font-serif);font-style:italic;font-weight:400}
      footer .columns{
        display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));gap:16px;
        padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:24px;
        background:rgba(255,255,255,.035);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
      }
      footer .columns > div{
        min-height:180px;padding:20px;border-radius:16px;background:rgba(255,255,255,.035);
      }
      footer .columns .fcolh{font-size:10px;letter-spacing:.1em;font-weight:700;color:rgba(255,255,255,.62);margin:0 0 16px;text-transform:uppercase}
      footer .columns a{display:block;padding:7px 0;color:rgba(255,255,255,.72);font-size:14px;letter-spacing:-0.02em;transition:color .2s ease, transform .2s ease}
      footer .columns a:hover{color:#fff;transform:translateX(2px)}
      footer .bottom{
        width:100%;max-width:1264px;margin:clamp(48px,8vh,90px) auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);
        display:flex;justify-content:space-between;align-items:center;font-size:12px;color:rgba(255,255,255,.5);
      }
      footer .bottom a{
        color:inherit;
        transition:color .2s ease;
      }
      footer .bottom a:hover{color:#fff}


      #nav{opacity:0}
      .curtain__hero-logo{
        position:absolute;top:28px;left:50%;transform:translateX(-50%);
        z-index:10;display:flex;align-items:center;gap:8px;
        background:rgba(9,10,11,.55);border-radius:12px;
        padding:10px 18px;
        opacity:0;pointer-events:none;
        color:#fff;
      }
      .curtain__hero-logo svg.mark{height:24px;width:24px}
      .curtain__hero-logo .brand-word{height:26px}
      .hero .pill{opacity:0}
      .hero h1{opacity:0;filter:blur(18px);transform:scale(0.96)}
      .hero p.sub{opacity:1}
      .hero p.sub .sub-line{display:block;opacity:0;transform:translateY(18px);will-change:transform,opacity}
      .hero p.sub .sub-line.in{animation:introSubLine .25s cubic-bezier(.22,.61,.36,1) forwards}
      .hero .ctas{opacity:0;transform:translateY(12px)}
      .browser{opacity:0;transform:translateX(-50%) translateY(-150px) rotateX(85deg);transform-origin:bottom center;}


      .browser__chrome,
      .sidebar,
      .breadcrumbs,
      .welcome,
      .kpis > .kpi{
        opacity:0;
        transform:translateY(8px);
        filter:blur(4px);
        will-change:opacity,transform,filter;
      }
      .browser.intro-browser-in .browser__chrome{animation:browserChildIn .7s cubic-bezier(.25,.8,.25,1) 0.45s forwards}
      .browser.intro-browser-in .sidebar       {animation:browserChildIn .7s cubic-bezier(.25,.8,.25,1) 0.75s forwards}
      .browser.intro-browser-in .breadcrumbs   {animation:browserChildIn .6s cubic-bezier(.25,.8,.25,1) 1.05s forwards}
      .browser.intro-browser-in .welcome       {animation:browserChildIn .6s cubic-bezier(.25,.8,.25,1) 1.20s forwards}
      .browser.intro-browser-in .kpis > .kpi:nth-child(1){animation:browserChildIn .65s cubic-bezier(.25,.8,.25,1) 1.40s forwards}
      .browser.intro-browser-in .kpis > .kpi:nth-child(2){animation:browserChildIn .65s cubic-bezier(.25,.8,.25,1) 1.55s forwards}
      .browser.intro-browser-in .kpis > .kpi:nth-child(3){animation:browserChildIn .65s cubic-bezier(.25,.8,.25,1) 1.70s forwards}
      @keyframes browserChildIn{
        0%  {opacity:0;transform:translateY(8px);filter:blur(4px)}
        100%{opacity:1;transform:translateY(0);   filter:blur(0)}
      }


      .nav .links{overflow:hidden;padding:2px 0}
      .nav .links a{opacity:0;transform:translateY(14px);display:inline-block}
      .nav .right .signin{opacity:0;transform:translateX(24px)}
      .nav .right .cta{opacity:0;transform-origin:center center}
      .nav .brand{opacity:0}


      .intro-logo-in{animation:introLogoIn .48s cubic-bezier(.25,.8,.25,1) forwards}
      .intro-logo-out{animation:introLogoOut .32s ease-in forwards}
      .intro-nav-in{animation:introNavIn .55s cubic-bezier(.4,0,.2,1) forwards}
      .intro-brand-in{animation:introBrandUp .38s cubic-bezier(.4,0,.2,1) forwards}

      .intro-link-in{animation:introLinkUp .32s cubic-bezier(.4,0,.2,1) forwards}

      .intro-signin-in{animation:introSignIn .38s cubic-bezier(.4,0,.2,1) forwards}

      .intro-cta-expand{animation:introCtaExpand .7s cubic-bezier(.4,0,.2,1) forwards}
      .intro-pill-in{animation:introBounceIn .55s cubic-bezier(.22,.61,.36,1) forwards}

      .hero h1 .ch{
        display:inline-block;
        opacity:0;
        transform:translateY(.9em) rotateX(-70deg) scale(.9);
        transform-origin:50% 100%;
        filter:blur(14px);
        will-change:transform,opacity,filter;
      }
      .hero h1 .ch.sp{width:.28em}
      .intro-h1-in{opacity:1 !important;filter:none !important;transform:none !important;animation:none !important}
      .intro-h1-in .ch{
        animation:introLetterUp .3s cubic-bezier(.22,.61,.36,1) both;
        animation-delay:calc(var(--i, 0) * 11ms);
      }
      @keyframes introLetterUp{
        0%  {opacity:0;filter:blur(6px);transform:translateY(.3em)}
        100%{opacity:1;filter:blur(0);transform:translateY(0)}
      }
      @keyframes introSubLine{
        0%  {opacity:0;transform:translateY(18px)}
        100%{opacity:1;transform:translateY(0)}
      }
      .intro-btns-in{opacity:1 !important;transform:none !important}
      .intro-btns-in .btn.primary{
        animation:introBtnPop .35s cubic-bezier(.22,.61,.36,1) forwards;
      }
      .intro-btns-in .btn.ghost{
        animation:introBounceIn .55s cubic-bezier(.22,.61,.36,1) .08s forwards;
      }
      @keyframes introBounceIn{
        0%  {opacity:0;transform:translateY(8px)}
        100%{opacity:1;transform:translateY(0)}
      }
      @keyframes introBtnPop{
        0%  {opacity:0;transform:translateY(8px)}
        100%{opacity:1;transform:translateY(0)}
      }
      .intro-browser-in{animation:introBrowser 2.2s cubic-bezier(.50,1,.3,1) forwards}

      @keyframes introLogoIn{
        0%{opacity:0;transform:translateX(-50%) scale(.75)}
        100%{opacity:1;transform:translateX(-50%) scale(1)}
      }
      @keyframes introLogoOut{
        0%{opacity:1;transform:translateX(-50%) scale(1)}
        100%{opacity:0;transform:translateX(-50%) scale(.92)}
      }
      @keyframes introNavIn{
        0%{opacity:0;clip-path:inset(0 47% 0 47% round 12px)}
        40%{opacity:1}
        100%{opacity:1;clip-path:inset(0 0% 0 0% round 12px)}
      }
      @keyframes introBrandUp{
        0%{opacity:0;transform:translateY(8px)}
        100%{opacity:1;transform:translateY(0)}
      }
      @keyframes introLinkUp{
        0%{opacity:0;transform:translateY(14px)}
        100%{opacity:1;transform:translateY(0)}
      }
      @keyframes introSignIn{
        0%{opacity:0;transform:translateX(24px)}
        100%{opacity:1;transform:translateX(0)}
      }
      @keyframes introCtaExpand{
        0%  {opacity:0;transform:translateY(6px)}
        100%{opacity:1;transform:translateY(0)}
      }
      @keyframes introFadeUp{
        0%{opacity:0;transform:translateY(8px)}
        100%{opacity:1;transform:translateY(0)}
      }
      @keyframes introH1{
        0%  {opacity:0;filter:blur(28px);transform:scale(.96) translateX(-24px) skewX(-6deg);letter-spacing:.12em}
        25% {opacity:.45;filter:blur(18px);transform:scale(.975) translateX(-14px) skewX(-4deg);letter-spacing:.08em}
        55% {opacity:.85;filter:blur(8px);transform:scale(.99) translateX(-4px) skewX(-1.5deg);letter-spacing:.03em}
        80% {opacity:1;filter:blur(2px);transform:scale(1) translateX(0) skewX(0);letter-spacing:0}
        100%{opacity:1;filter:blur(0);transform:scale(1) translateX(0) skewX(0);letter-spacing:normal}
      }
      @keyframes introSub{
        0%  {opacity:0;filter:blur(22px);transform:translateY(8px) scale(.97) skewX(-5deg)}
        30% {opacity:.4;filter:blur(14px);transform:translateY(5px) scale(.98) skewX(-3deg)}
        65% {opacity:.85;filter:blur(5px);transform:translateY(2px) scale(.995) skewX(-1deg)}
        100%{opacity:1;filter:blur(0);transform:translateY(0) scale(1) skewX(0)}
      }
      @keyframes introBrowser{
        0%  {opacity:0;transform:translateX(-50%) translateY(-150px) rotateX(85deg)}
        15% {opacity:1}
        100%{opacity:1;transform:translateX(-50%) translateY(0) rotateX(0deg)}
      }


      #nav.intro-done{opacity:1}
      #nav.intro-done .brand{opacity:1}
      #nav.intro-done .links a{opacity:1;transform:none}
      #nav.intro-done .right .signin{opacity:1;transform:none}
      #nav.intro-done .right .cta{opacity:1;transform:none}


      .hero{padding-top:clamp(100px,13vh,160px)}
      .hero h1{font-size:clamp(42px,5.5vw,82px)}
      .hero p.sub{width:min(576px,88vw);max-width:min(576px,88vw)}


      


      @media (max-width:1400px){
        .browser{width:min(1000px,calc(100vw - 64px)) !important;bottom:-160px}
        .sidebar{width:230px}
      }


      @media (max-width:1200px){
        .browser{width:min(900px,calc(100vw - 48px)) !important;bottom:-140px}
        .s2-inner{padding:clamp(40px,6vh,80px) clamp(24px,4vw,48px) clamp(30px,4vh,60px)}
        .s4-bottom{position:static;margin-top:40px}
        .filter-list,.int-pill,.sync-stamp{display:none}
        .s3-head .corner{
          position:static;display:inline-block;top:auto;left:auto;right:auto;
          text-align:center;white-space:normal;vertical-align:middle;
        }
        .s3-head .corner.l::after{content:"·";margin:0 .4em;opacity:.55}
        .s3 .s3-head .corner .ch{opacity:1 !important;transform:none !important;animation:none !important}
        .s3-head .eyebrow{display:flex;margin-top:14px}
      }


      @media (max-height: 940px)  { .browser{ zoom: 0.9 } }
      @media (max-height: 860px)  { .browser{ zoom: 0.8 } }
      @media (max-height: 800px)  { .browser{ zoom: 0.72 } }
      @media (max-height: 740px)  { .browser{ zoom: 0.64 } }
      @media (max-height: 680px)  { .browser{ zoom: 0.56 } }


      @media (max-width: 1400px) { .cards3{ zoom: 0.92 } }
      @media (max-width: 1200px) { .cards3{ zoom: 0.82 } }
      @media (max-width: 1100px) { .cards3{ zoom: 0.76 } }


      @media (max-height: 800px) {
        .s3-inner{ padding-top: clamp(90px, 12.5vh, 100px) }
      }


      @media (max-height: 1000px) { .cards3{ zoom: 0.95 } }
      @media (max-height: 940px)  { .cards3{ zoom: 0.9 } }
      @media (max-height: 860px)  { .cards3{ zoom: 0.85 } }
      @media (max-height: 800px)  { .cards3{ zoom: 0.78 } }
      @media (max-height: 760px)  { .cards3{ zoom: 0.72 } }
      @media (max-height: 720px)  { .cards3{ zoom: 0.65 } }
      @media (max-height: 680px)  { .cards3{ zoom: 0.59 } }
      @media (max-height: 640px)  { .cards3{ zoom: 0.54 } }




      /* ============================================================
         language picker — compact dropdown (details/summary)
         ============================================================ */
      details.lang{position:relative;flex-shrink:0}
      details.lang summary{
        list-style:none;cursor:pointer;user-select:none;
        display:inline-flex;align-items:center;gap:7px;
        padding:7px 11px;border-radius:9px;
        font-size:11px;font-weight:700;letter-spacing:.08em;
        color:rgba(254,254,254,.85);
        border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);
        transition:background .3s ease,color .3s ease,border-color .3s ease;
      }
      details.lang summary::-webkit-details-marker{display:none}
      details.lang summary::after{
        content:"";width:6px;height:6px;flex-shrink:0;
        border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
        transform:rotate(45deg) translateY(-1px);transition:transform .25s ease;
      }
      details.lang[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
      details.lang summary:hover{background:rgba(255,255,255,.16)}
      .nav.dark details.lang summary{
        color:rgba(9,10,11,.7);border-color:rgba(9,10,11,.12);background:rgba(9,10,11,.04);
      }
      .nav.dark details.lang summary:hover{background:rgba(9,10,11,.08);color:var(--ink)}
      details.lang .menu{
        position:absolute;right:0;top:calc(100% + 10px);min-width:160px;
        background:#fff;border:1px solid rgba(9,10,11,.08);border-radius:14px;
        box-shadow:0 18px 44px rgba(9,10,11,.16);padding:6px;z-index:500;
        animation:langIn .22s cubic-bezier(.22,.61,.36,1);
      }
      @keyframes langIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
      details.lang .menu a{
        display:flex;justify-content:space-between;align-items:center;gap:14px;
        padding:9px 11px;border-radius:9px;
        font-size:13px;font-weight:500;letter-spacing:-0.01em;color:rgba(9,10,11,.7);
      }
      details.lang .menu a:hover{background:rgba(9,10,11,.05);color:var(--ink)}
      details.lang .menu a.on{color:var(--ink);font-weight:600}
      details.lang .menu a.on::after{content:"";width:6px;height:6px;border-radius:50%;background:#FF7D00;flex-shrink:0}

      /* ============================================================
         mobile nav — burger + full-screen drawer
         ============================================================ */
      .nav__burger{
        display:none;flex-direction:column;justify-content:center;gap:4px;
        width:38px;height:38px;align-items:center;border-radius:9px;
      }
      .nav__burger span{width:17px;height:2px;border-radius:2px;background:#fff;transition:background .3s ease}
      .nav.dark .nav__burger span{background:var(--ink)}
      .nav__drawer{
        position:fixed;inset:0;z-index:600;
        background:rgba(9,10,11,.97);
        display:flex;flex-direction:column;gap:4px;
        padding:96px 36px 40px;
        transform:translateX(100%);
        transition:transform .38s cubic-bezier(.2,.7,.2,1);
      }
      .nav__drawer.open{transform:translateX(0)}
      .nav__drawer a{
        color:#fff;font-size:26px;font-weight:500;letter-spacing:-0.04em;
        padding:11px 0;border-bottom:1px solid rgba(255,255,255,.07);
      }
      .drawer-lang{
        display:none;
        margin:-18px 0 18px;
        padding:0 0 22px;
        border-bottom:1px solid rgba(255,255,255,.1);
      }
      .drawer-lang > span{
        display:block;
        margin-bottom:12px;
        font-size:10px;
        letter-spacing:.12em;
        font-weight:700;
        text-transform:uppercase;
        color:rgba(255,255,255,.42);
      }
      .drawer-lang > div{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px;
      }
      .nav__drawer .drawer-lang a{
        display:flex;
        align-items:center;
        justify-content:space-between;
        min-height:44px;
        padding:0 12px;
        border:1px solid rgba(255,255,255,.1);
        border-radius:12px;
        background:rgba(255,255,255,.045);
        font-size:14px;
        letter-spacing:-0.02em;
      }
      .nav__drawer .drawer-lang a.on{
        color:#fff;
        border-color:rgba(255,125,0,.42);
        background:rgba(255,125,0,.13);
      }
      .nav__drawer .drawer-lang a.on::after{
        content:"";
        width:6px;
        height:6px;
        border-radius:50%;
        background:#FF7D00;
      }
      .drawer-close{
        position:absolute;top:22px;right:22px;width:42px;height:42px;
        display:grid;place-items:center;border-radius:50%;
        background:rgba(255,255,255,.1);color:#fff;font-size:18px;
      }

      /* ============================================================
         responsive — landing
         ============================================================ */
      @media (max-width:900px){
        .nav{width:calc(100vw - 24px);padding:0 8px 0 16px}
        .nav .links{display:none}
        .nav .signin{display:none}
        .nav details.lang{display:none}
        .nav__burger{display:flex}
        .drawer-lang{display:block}
      }
      @media (max-width:560px){
        .nav .cta{display:none}
      }
      @media (max-width:900px){
        /* fullpage hijack off (script.js gates the JS side) */
        .curtain{position:relative;height:100svh;min-height:640px}
        #fullpage .section{height:auto;min-height:0;overflow:visible}
        #fullpage .section.fp-curtain{display:none}
        .hero{padding-top:max(96px, 14svh)}
        .hero h1 .line{white-space:normal;width:auto !important}
        .hero h1{font-size:clamp(34px,10vw,48px);padding:0 18px !important}
        .hero p.sub{margin-top:18px}
        .hero .ctas{flex-wrap:wrap;padding:0 16px}
        .browser{width:1060px !important;zoom:0.34;bottom:-150px}
        .s2-inner{height:auto;min-height:0;padding:84px 22px 64px}
        .s2 .grid{grid-template-columns:1fr;gap:18px}
        .s2 .ovals{display:none}
        .s2 .lede{margin-top:20px}
        .s2 .bottom{grid-template-columns:1fr;gap:28px;margin-top:48px}
        .s2 .bottom .left{grid-column:1}
        .s2 .stats{justify-self:start;margin-right:0}
        .s3-inner{padding-top:84px}
        .cards3{grid-template-columns:1fr;zoom:1}
        .card3{height:auto;min-height:460px;padding:64px 28px 64px}
        .card3.b,.card3.c{padding-top:40px}
        .s4-inner{min-height:0;padding-top:84px}
        .orbit{margin-top:24px}
        .brandtile-label{transform:translate(-50%, calc(var(--brandtile)/2 + 10px))}
        footer{padding:64px 24px 28px;min-height:auto}
        footer .inner{grid-template-columns:1fr;gap:40px}
        footer .columns{grid-template-columns:1fr 1fr;gap:12px}
        footer .columns > div{min-height:0;padding:18px}
        footer .bottom{flex-direction:column;gap:10px;align-items:flex-start;margin-top:48px}
      }
      @media (max-width:620px){
        footer .columns{grid-template-columns:1fr}
      }
      @media (max-width:480px){
        .hero .pill .label{white-space:normal;text-align:left;line-height:1.3}
        .browser{zoom:0.3;bottom:-130px}
      }


      /* word grouping for letter-split headlines — no mid-word line breaks */
      .wd{display:inline-block;white-space:nowrap}
      /* the language dropdown must escape the nav box */
      .nav.glass{overflow:visible}

      /* intro keeps clip-path via fill-mode "forwards" — release it so the
         language dropdown can render outside the nav box */
      #nav.intro-done{animation:none;clip-path:none}


      /* ============================================================
         polish round 2
         ============================================================ */

      /* .nav.glass must not override the fixed base nav on mobile (natural
         scroll), otherwise the curtain is pushed down and a white band shows */
      .nav.glass{position:fixed}

      /* desktop fullpage: scale the WHOLE evidence section to the viewport
         height (head + cards + stamps), instead of zooming only the cards —
         nothing gets clipped at the bottom anymore */
      @media (min-width:901px) and (max-height:1000px){ .cards3{zoom:1} .s3-inner{zoom:.96} }
      @media (min-width:901px) and (max-height:940px) { .cards3{zoom:1} .s3-inner{zoom:.91} }
      @media (min-width:901px) and (max-height:880px) { .cards3{zoom:1} .s3-inner{zoom:.86} }
      @media (min-width:901px) and (max-height:820px) { .cards3{zoom:1} .s3-inner{zoom:.80} }
      @media (min-width:901px) and (max-height:770px) { .cards3{zoom:1} .s3-inner{zoom:.75} }
      @media (min-width:901px) and (max-height:710px) { .cards3{zoom:1} .s3-inner{zoom:.69} }
      @media (min-width:901px) and (max-height:650px) { .cards3{zoom:1} .s3-inner{zoom:.63} }

      /* breathing room between confidence value and glossary tag */
      .saving .v em{margin-left:6px}

      /* long DE/ES/FR words: hyphenate instead of overflowing or breaking weird */
      html[lang="de"] :is(p, li, .b, .lede, .teaser, .bio, .body),
      html[lang="es"] :is(p, li, .b, .lede, .teaser, .bio, .body),
      html[lang="fr"] :is(p, li, .b, .lede, .teaser, .bio, .body){
        -webkit-hyphens:auto;hyphens:auto;
      }


      /* ============================================================
         polish round 3 — mobile hero: real flow instead of absolute
         stacking; template inline font-size must be overridden
         ============================================================ */
      @media (max-width:900px){
        /* inline style="font-size:60px" on the h1 needs !important */
        .hero h1{font-size:clamp(28px,8.6vw,40px) !important}
        /* curtain grows with its content; hero + mockup stack in flow */
        .curtain{height:auto;min-height:100svh;display:flex;flex-direction:column;padding-bottom:44px}
        .hero{position:relative;inset:auto;padding-top:104px}
        .browser{
          position:relative;left:auto;bottom:auto;
          width:1060px !important;
          margin:30px auto 0;
          transform:none !important;opacity:1 !important;animation:none !important;
        }
        .curtain__edge{display:none}
      }
      @media (max-width:480px){
        .hero h1{font-size:clamp(26px,8.2vw,34px) !important}
      }
      /* German/Spanish/French headlines that are NOT letter-split may hyphenate */
      html[lang="de"] :is(h2,h3):not(.split),
      html[lang="es"] :is(h2,h3):not(.split),
      html[lang="fr"] :is(h2,h3):not(.split){-webkit-hyphens:auto;hyphens:auto}


      /* nav cta as anchor */
      .nav .cta{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}


      /* ============================================================
         polish round 5 — mobile text flow + reduced motion
         ============================================================ */
      @media (max-width:900px){
        /* hard-coded desktop line splits flow naturally as a paragraph
           (works in every language; transforms are ignored on inline,
           so the reveal degrades to a clean fade) */
        .sub-line,
        .hero p.sub .sub-line,
        .s2 .lede .sub-line,
        .s3 .s3-head p .sub-line{display:inline}
        .sub-line::after{content:" "}
        /* s4 shrinks to its content; no dead space, nothing clipped */
        .s4{min-height:0}
        .s4-inner{min-height:0;height:auto}
        .s2 .bottom{margin-top:36px}
      }

      /* accessibility + robustness: static page when the user prefers
         reduced motion — nothing stays hidden behind an animation */
      @media (prefers-reduced-motion: reduce){
        *, *::before, *::after{
          animation:none !important;
          transition:none !important;
        }
        #nav, .nav .brand, .nav .links a, .nav .right .signin, .nav .right .cta,
        .hero .pill, .hero h1, .hero h1 .ch, .hero p.sub .sub-line, .hero .ctas,
        .hero .ctas .btn, .browser, .browser__chrome, .sidebar, .breadcrumbs,
        .welcome, .kpis > .kpi, .s2 .grid h2, .s2 .grid h2 .ch,
        .s2 .grid > div:first-child .eyebrow, .s2 .lede .sub-line,
        .s2 .bottom .left p, .s2 .bottom .left .meet, .s2 .stats .stat,
        .s3-head h2, .s3-head h2 .ch, .s3-head p .sub-line, .s3-head .corner .ch,
        .card3, .conn, #insightCard, .runway, .saving, .stamp,
        .s4 .tile.brandtile, .s4 .brandtile-label .n, .s4 .brandtile-label .k,
        .s4 .s4-bottom .eyebrow, .s4 .s4-bottom h2 .ch, .s4 .int-pill,
        .s4 .filter-list, .s4 .sync-stamp,
        .rv, .split, .split .ch, .wcard .glass, .wcard .stamp, .metric,
        .hero-band .pill, .hero-band .sub, .hero-band .note, .hero-band .ctas{
          opacity:1 !important;
          transform:none !important;
          filter:none !important;
        }
        .hero-band__video, .curtain__video{
          filter:sepia(1) saturate(2.4) hue-rotate(-8deg) brightness(1.08) !important;
        }
      }


      /* footer brand (landing loads styles.css only) */
      footer .it{font-family:var(--font-serif);font-style:italic;font-weight:400}
      footer .foot-brand{display:flex;align-items:center;gap:8px;margin-bottom:22px;color:#fff}
      footer .foot-brand svg{height:22px;width:22px;flex-shrink:0}
      footer .foot-brand .foot-word{height:13px;width:auto}
      footer .foot-brand span{font-size:15px;font-weight:600;letter-spacing:-0.03em}


      /* ============================================================
         screen 05 — proof (customer stories, trust, final CTA)
         ============================================================ */
      .s5{position:relative;background:var(--paper);overflow:hidden}
      .s5::before{
        content:"";position:absolute;inset:0;pointer-events:none;
        background:
          radial-gradient(38rem 24rem at 50% 14%, rgba(255,125,0,.075), transparent 68%),
          linear-gradient(180deg, rgba(9,10,11,.018), transparent 34%);
      }
      .s5-inner{
        max-width:1180px;margin:0 auto;text-align:center;position:relative;
        padding:clamp(96px,16.8vh,176px) clamp(24px,4vw,48px) clamp(40px,6vh,72px);
      }
      .s5 h2{
        font-size:clamp(36px,4vw,62px);letter-spacing:-0.06em;line-height:1;
        font-weight:500;color:var(--ink);margin:18px 0 0;text-wrap:balance;
      }
      .s5 h2 .it{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-0.02em}
      .s5 .stories{
        display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
        margin-top:clamp(30px,4.6vh,48px);text-align:left;
      }
      .s5 .story{
        position:relative;margin:0;min-height:260px;
        border:1px solid rgba(9,10,11,.08);border-radius:28px;
        background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(250,250,250,.82));
        padding:clamp(26px,2.8vw,38px);
        box-shadow:0 20px 60px rgba(9,10,11,.06), inset 0 1px 0 rgba(255,255,255,.9);
        overflow:hidden;
        display:flex;flex-direction:column;justify-content:flex-start;
      }
      .s5 .story::after{
        content:"";position:absolute;inset:auto -20% -45% 40%;height:220px;
        background:radial-gradient(circle, rgba(255,125,0,.12), transparent 68%);
        pointer-events:none;
      }
      .s5 .story-2{transform:translateY(24px)}
      .s5 .quote-mark{
        position:absolute;right:26px;top:12px;
        font-family:var(--font-serif);font-size:108px;line-height:1;color:rgba(255,125,0,.14);
      }
      .s5 .story blockquote{
        position:relative;margin:0;z-index:1;
        font-size:clamp(18px,1.65vw,24px);letter-spacing:-0.04em;line-height:1.22;
        color:var(--ink);font-weight:560;text-wrap:pretty;
      }
      .s5 .story figcaption{
        position:relative;z-index:1;margin-top:28px;padding-top:18px;
        border-top:1px solid rgba(9,10,11,.08);
        display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"avatar person" "avatar role";
        column-gap:12px;row-gap:4px;align-items:center;
      }
      .s5 .story .avatar{
        grid-area:avatar;width:38px;height:38px;border-radius:12px;
        display:grid;place-items:center;background:#090A0B;color:#fff;
        font-size:12px;font-weight:700;letter-spacing:-0.02em;
      }
      .s5 .story .person{grid-area:person;display:flex;align-items:baseline;gap:8px;min-width:0}
      .s5 .story .person b{color:#090A0B;font-size:14px;font-weight:700;letter-spacing:-0.03em;white-space:nowrap}
      .s5 .story .person span{color:#FF7D00;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      .s5 .story .role{grid-area:role;font-size:12px;line-height:1.35;color:rgba(9,10,11,.48);letter-spacing:-0.02em}
      .s5 .trust-panel{
        margin:clamp(42px,7vh,72px) auto 0;max-width:920px;
        padding:18px;border-radius:26px;border:1px solid rgba(9,10,11,.08);
        background:rgba(255,255,255,.68);box-shadow:0 18px 50px rgba(9,10,11,.045);
      }
      .s5 .trust-cap{
        margin:0 auto;font-size:11px;letter-spacing:.06em;
        font-weight:700;color:rgba(9,10,11,.45);max-width:620px;text-transform:uppercase;
      }
      .s5 .brands{
        margin:16px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
      }
      .s5 .brands span{border:1px solid rgba(9,10,11,.08);border-radius:100px;background:#fff;padding:8px 14px;font-size:13px;letter-spacing:-0.02em;font-weight:650;color:rgba(9,10,11,.72)}
      .s5 .badges-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
      .s5 .badge-pill{
        font-size:10px;letter-spacing:.08em;font-weight:700;padding:7px 13px;border-radius:100px;
        border:1px solid rgba(255,125,0,.22);background:rgba(255,125,0,.045);color:rgba(9,10,11,.58);white-space:nowrap;
      }
      .s5 .cta-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:clamp(28px,5vh,46px)}
      .btn-l{
        height:46px;padding:0 24px;border-radius:14px;
        display:inline-flex;align-items:center;justify-content:center;
        font-size:15px;font-weight:500;letter-spacing:-0.04em;text-decoration:none;
        transition:transform .18s ease, filter .18s ease;
      }
      .btn-l:hover{transform:translateY(-1px);filter:brightness(1.04)}
      .btn-l.primary{
        background:#FF7D00;color:#fff;border:1px solid rgba(255,255,255,.3);
        box-shadow:inset 0 0 8px 6px rgba(255,255,255,.18),
                   0 2px 5px rgba(255,125,0,.2),0 9px 9px rgba(255,125,0,.15);
      }
      .btn-l.ghost{background:rgba(9,10,11,.05);color:var(--ink);border:1px solid rgba(9,10,11,.08)}
      @media (max-width:900px){
        .s5 .stories{grid-template-columns:1fr}
        .s5 .story-2{transform:none}
        .s5 .story{min-height:0}
        .s5 .story .person{flex-wrap:wrap}
        .s5 .trust-panel{padding:14px}
      }

      /* ============================================================
         mobile hero — headline flows as one balanced block
         ============================================================ */
      @media (max-width:900px){
        .hero h1 .line{display:inline;white-space:normal;width:auto !important}
        .hero h1 .line + .line::before{content:" "}
        .hero h1{margin:26px auto 0 !important;line-height:1.14 !important;letter-spacing:-0.04em;max-width:92vw}
        .hero p.sub{margin:18px auto 0}
        .hero .ctas{margin-top:26px}
        .hero .pill{max-width:90vw}
      }

      /* ============================================================
         senior refinement — minimal SaaS instead of boxed ornamentation
         ============================================================ */

      .cards3{
        gap:clamp(22px,2.4vw,34px);
        margin-top:clamp(28px,4vh,48px);
      }
      .card3{
        min-width:0;
        height:clamp(430px,48vh,520px);
        padding:clamp(30px,3.2vw,46px) clamp(20px,2.8vw,40px) 58px;
        border-radius:0;
        border-top:1px solid rgba(9,10,11,.12);
        border-bottom:1px solid rgba(9,10,11,.08);
        background:
          linear-gradient(180deg, rgba(255,125,0,.035), transparent 24%),
          var(--paper) !important;
        color:var(--ink);
        overflow:visible;
      }
      .card3.b,
      .card3.c{padding-top:clamp(30px,3.2vw,46px)}
      .card3::before{display:none}
      .card3 .stamp{
        bottom:20px;text-align:left;
        color:rgba(9,10,11,.34);
      }
      .conn-list{gap:0}
      .conn{
        height:auto;min-height:104px;
        padding:18px 0;
        border-radius:0;
        background:transparent;
        border-bottom:1px solid rgba(9,10,11,.08);
        color:var(--ink);
      }
      .conn:first-child{border-top:1px solid rgba(9,10,11,.08)}
      .conn .bb-wrap,
      .insight-card > .bb-wrap,
      .runway > .bb-wrap{display:none}
      .conn .badge{
        width:54px;height:54px;border-radius:14px;
        box-shadow:0 1px 0 rgba(255,255,255,.6), 0 10px 24px rgba(9,10,11,.08);
      }
      .conn .kicker{
        color:rgba(9,10,11,.48);
        font-size:12px;
      }
      .conn .name{
        color:var(--ink);
        font-size:clamp(22px,1.9vw,28px);
        letter-spacing:-0.055em;
      }
      .conn .live-pill{
        background:transparent;
        color:#FF7D00;
        border:1px solid rgba(255,125,0,.22);
        padding:6px 9px;
      }
      .insight-card,
      .runway{
        flex:1 1 auto;
        border-radius:0;
        background:transparent;
        padding:0;
        gap:clamp(18px,2.5vh,28px);
        color:var(--ink);
      }
      .insight-head .ic,
      .runway-head .ic{
        width:38px;height:38px;border-radius:12px;
        background:rgba(255,125,0,.08);
        color:#FF7D00;
        border:1px solid rgba(255,125,0,.16);
      }
      .insight-head .k,
      .runway-head .k,
      .runway-head div[style*="letter-spacing"]{
        color:rgba(9,10,11,.42) !important;
      }
      .insight-head .t,
      .runway-head .t,
      .runway-head div[style*="font-size:17px"]{
        color:var(--ink) !important;
        font-size:18px !important;
      }
      .insight-msg{
        padding:clamp(18px,4vh,46px) 0 0 !important;
        color:var(--ink);
        font-size:clamp(28px,2.6vw,42px);
        line-height:1.02;
        letter-spacing:-0.07em;
        max-width:10.5em;
      }
      .anomaly{
        background:rgba(255,125,0,.08);
        color:#D96500;
        padding:8px 14px 8px 8px;
        border:1px solid rgba(255,125,0,.16);
      }
      .anomaly i{background:#FF7D00;color:#fff}
      .saving,
      .runway-foot{
        border-radius:0;
        background:transparent;
        padding:18px 0 0;
        border-top:1px solid rgba(9,10,11,.08);
      }
      .saving .lbl{color:rgba(9,10,11,.48)}
      .saving .v,
      .runway-foot .v{
        color:var(--ink);
        font-size:clamp(34px,3.2vw,48px);
        letter-spacing:-0.075em;
      }
      .saving .v em{
        color:rgba(9,10,11,.42);
        font-size:15px;
      }
      .chart{height:clamp(150px,19vh,190px);margin-top:8px}
      .chart .badge{
        left:50%;
        background:var(--ink);
        color:#fff;
        box-shadow:none;
      }
      .chart svg{filter:invert(1);opacity:.78}
      .chart .axis{color:rgba(9,10,11,.42)}
      .runway-foot .d{color:rgba(9,10,11,.55)}

      .s5::before{display:none}
      .s5-inner{max-width:1180px}
      .s5 .stories{
        grid-template-columns:repeat(3,1fr);
        gap:clamp(24px,3vw,44px);
        margin-top:clamp(42px,6vh,72px);
      }
      .s5 .story{
        min-height:0;
        padding:28px 0 0;
        border:0;
        border-top:1px solid rgba(9,10,11,.12);
        border-radius:0;
        background:transparent;
        box-shadow:none;
        overflow:visible;
      }
      .s5 .story::after{display:none}
      .s5 .story-2{transform:none}
      .s5 .quote-mark{
        position:static;
        display:block;
        font-size:42px;
        line-height:.7;
        color:#FF7D00;
        margin-bottom:12px;
      }
      .s5 .story blockquote{
        font-size:clamp(22px,2vw,31px);
        line-height:1.12;
        letter-spacing:-0.055em;
        font-weight:520;
      }
      .s5 .story:not(:has(figcaption)){
        justify-content:flex-start;
      }
      .s5 .story figcaption{
        margin-top:28px;
        padding-top:0;
        border-top:0;
        grid-template-columns:minmax(0,1fr);
        grid-template-areas:"person" "role";
      }
      .s5 .story .avatar{display:none}
      .s5 .story .person{display:block}
      .s5 .story .person b{
        display:block;
        font-size:14px;
      }
      .s5 .story .person span{
        display:block;
        margin-top:4px;
        color:rgba(9,10,11,.42);
      }
      .s5 .story .role{
        margin-top:6px;
        color:rgba(9,10,11,.48);
      }
      .s5 .trust-panel{
        margin-top:clamp(42px,7vh,70px);
        max-width:none;
        padding:24px 0 0;
        border:0;
        border-top:1px solid rgba(9,10,11,.1);
        border-radius:0;
        background:transparent;
        box-shadow:none;
      }
      .s5 .brands span{
        border:0;
        background:transparent;
        padding:0 10px;
        color:rgba(9,10,11,.58);
      }
      .s5 .badge-pill{
        border:0;
        background:transparent;
        padding:0 9px;
        color:rgba(9,10,11,.38);
      }

      footer{
        background:var(--ink);
      }
      footer::before{display:none}
      footer .inner{
        grid-template-columns:minmax(0,1fr) minmax(360px,.62fr);
        align-items:start;
      }
      footer .columns{
        padding:0;
        border:0;
        border-radius:0;
        background:transparent;
        box-shadow:none;
        gap:clamp(28px,4vw,56px);
      }
      footer .columns > div{
        min-height:0;
        padding:0;
        border-radius:0;
        background:transparent;
      }
      footer .columns a{
        padding:5px 0;
      }
      @media (max-width:900px){
        .cards3{grid-template-columns:1fr;gap:28px}
        .card3{height:auto;min-height:0;padding:32px 0 56px}
        .s5 .stories{grid-template-columns:1fr}
        footer .inner{grid-template-columns:1fr}
      }

      /* readable nav on dark sections */
      .nav.on-dark{
        background:rgba(0,0,0,.25);
        border-color:rgba(255,255,255,.1);
        box-shadow:inset 0 -4px 22.3px rgba(255,255,255,.15);
      }
      .nav.on-dark .brand,
      .nav.on-dark .links a,
      .nav.on-dark .signin{color:#fff}
      .nav.on-dark .links a{color:rgba(255,255,255,.76)}
      .nav.on-dark details.lang summary{
        color:rgba(255,255,255,.88);
        border-color:rgba(255,255,255,.18);
        background:rgba(255,255,255,.08);
      }
      .nav.on-dark .nav__burger span{background:#fff}

      /* mobile hero and preview: no zoomed/cropped desktop mockup */
      @media (max-width:900px){
        .curtain{
          min-height:100svh;
          padding-bottom:48px;
        }
        .hero{
          padding-top:clamp(118px,16svh,152px);
          padding-inline:20px;
        }
        .hero .pill{
          max-width:min(92vw,430px);
        }
        .hero h1{
          max-width:20ch;
          margin-top:28px !important;
          font-size:clamp(31px,8.4vw,39px) !important;
          line-height:1.04 !important;
          letter-spacing:-0.055em !important;
          text-wrap:balance;
        }
        .hero h1 .line{
          display:inline;
          white-space:normal;
        }
        .hero h1 .line + .line::before{content:" "}
        .hero p.sub{
          max-width:34ch;
          font-size:clamp(16px,4.3vw,20px);
          line-height:1.22;
          text-wrap:pretty;
        }
        .hero .ctas{
          gap:12px;
          margin-top:28px;
        }
        .hero .ctas .btn{
          width:auto;
          min-width:150px;
        }
        .browser{
          position:relative;
          left:auto;
          bottom:auto;
          width:calc(100vw - 28px) !important;
          max-width:520px;
          height:260px;
          zoom:1 !important;
          margin:32px auto 0 !important;
          transform:none !important;
          opacity:1 !important;
          animation:none !important;
          border-radius:18px;
        }
        .hero .pill,
        .hero h1,
        .hero h1 .ch,
        .hero p.sub .sub-line,
        .hero .ctas,
        .hero .ctas .btn,
        .browser__chrome,
        .sidebar,
        .breadcrumbs,
        .welcome,
        .kpis > .kpi{
          opacity:1 !important;
          transform:none !important;
          filter:none !important;
          animation:none !important;
        }
        .browser__chrome{
          height:34px;
          padding:0 8px;
          gap:8px;
        }
        .browser__nav,
        .browser__icons{width:44px;overflow:hidden;gap:6px}
        .browser__url{
          height:18px;
          font-size:8px;
        }
        .dashboard{
          left:5px;right:5px;top:34px;bottom:5px;
          border-radius:13px;
        }
        .sidebar{
          width:116px !important;
          padding:8px !important;
        }
        .agency{
          padding:6px;
          gap:6px;
          border-radius:10px;
        }
        .agency__logo{
          width:24px !important;
          height:24px !important;
          border-radius:6px !important;
        }
        .agency__logo svg{width:17px !important;height:17px !important}
        .agency__meta .k{font-size:6px}
        .agency__meta .n{font-size:9px;letter-spacing:-0.04em}
        .agency__unfold{display:none}
        .sidebar h6{font-size:6px;margin:14px 0 7px}
        .menu{gap:3px}
        .menu a{
          gap:6px;
          padding:6px;
          border-radius:7px;
          font-size:8px;
        }
        .menu a img{width:9px !important;height:9px !important}
        .breadcrumbs{
          padding:8px 10px;
          font-size:7px;
        }
        .welcome{
          padding:12px 10px 0;
          font-size:15px;
        }
        .kpis{
          gap:6px;
          padding:10px;
        }
        .kpi{
          padding:3px;
          border-radius:9px;
        }
        .kpi .inner{
          padding:8px;
          border-radius:8px;
        }
        .kpi svg{display:none}
        .kpi .label{font-size:6px}
        .kpi .val{font-size:15px}
        .kpi .desc{font-size:7px}
        .kpi .foot{display:none}
      }
      @media (max-width:480px){
        .hero h1{
          font-size:clamp(29px,8vw,34px) !important;
        }
        .hero .ctas .btn{
          min-width:min(100%,160px);
        }
      }

      /* mobile hero typography lockup: deliberate lines, no dangling italic */
      @media (max-width:900px){
        .hero{
          padding-inline:clamp(22px,6vw,34px);
        }
        .hero h1{
          max-width:11.2em !important;
          margin:30px auto 0 !important;
          padding:0 !important;
          font-size:clamp(36px,8.9vw,44px) !important;
          line-height:1.08 !important;
          letter-spacing:-0.052em !important;
          text-align:center;
          text-wrap:balance;
        }
        .hero h1 .line{
          display:block !important;
          width:auto !important;
          white-space:normal !important;
          text-align:center;
        }
        .hero h1 .line + .line::before{
          content:none !important;
        }
        .hero h1 .line2 .it{
          display:block;
          margin-top:.04em;
          line-height:.98;
          letter-spacing:-0.018em;
        }
        .hero p.sub{
          max-width:31ch;
          margin-top:30px;
          font-size:clamp(18px,4.3vw,21px);
          line-height:1.24;
          letter-spacing:-0.035em;
          text-align:center;
        }
      }
      @media (max-width:430px){
        .hero h1{
          font-size:clamp(34px,9.2vw,39px) !important;
          max-width:10.8em !important;
        }
      }

      /* evidence repair — minimal cards, but structurally intact */
      .cards3{
        align-items:stretch;
        gap:clamp(18px,2vw,28px);
      }
      .card3{
        height:clamp(500px,54vh,590px);
        min-height:500px;
        overflow:hidden;
        border-radius:18px;
        border:1px solid rgba(9,10,11,.09);
        background:
          linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.9)),
          radial-gradient(circle at 76% 0%, rgba(255,125,0,.11), transparent 36%) !important;
        box-shadow:0 22px 55px rgba(9,10,11,.055);
        padding:clamp(36px,3.2vw,52px) clamp(26px,3vw,46px) 64px;
        color:var(--ink);
      }
      .card3.b,
      .card3.c{
        padding-top:clamp(36px,3.2vw,52px);
      }
      .card3 .stamp{
        left:clamp(26px,3vw,46px);
        right:clamp(26px,3vw,46px);
        bottom:24px;
        text-align:left;
        color:rgba(9,10,11,.34);
      }
      .conn-list{
        height:100%;
        display:flex;
        justify-content:center;
        gap:14px;
      }
      .conn{
        min-height:0;
        height:96px;
        padding:14px;
        border:1px solid rgba(9,10,11,.075);
        border-radius:18px;
        background:rgba(255,255,255,.72);
        box-shadow:0 12px 30px rgba(9,10,11,.035);
      }
      .conn:first-child{border-top:1px solid rgba(9,10,11,.075)}
      .conn .badge{
        width:58px;
        height:58px;
        border-radius:14px;
      }
      .conn .kicker{
        font-size:12px;
        line-height:1.2;
        white-space:normal;
      }
      .conn .name{
        font-size:clamp(20px,1.65vw,25px);
      }
      .conn .live-pill{
        flex-shrink:0;
        font-size:10px;
        background:rgba(255,125,0,.07);
      }
      .insight-card,
      .runway{
        height:100%;
        min-height:0;
        display:flex;
        flex-direction:column;
        background:transparent;
        border-radius:0;
        padding:0;
        gap:18px;
      }
      .insight-head,
      .runway-head{
        flex:0 0 auto;
      }
      .insight-msg{
        flex:1 1 auto;
        min-height:0;
        padding:clamp(20px,3.6vh,40px) 0 0 !important;
        max-width:11.5em;
        font-size:clamp(28px,2.35vw,38px);
        line-height:1.05;
        letter-spacing:-0.066em;
      }
      .anomaly{
        flex:0 0 auto;
        margin-top:auto;
        max-width:100%;
      }
      .saving{
        flex:0 0 auto;
        margin-top:0;
        padding:16px 0 0;
      }
      .saving .v{
        display:flex;
        align-items:baseline;
        gap:12px;
        min-width:0;
        font-size:clamp(34px,2.8vw,45px);
      }
      .saving .v em{
        min-width:0;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        letter-spacing:-0.035em;
      }
      .chart{
        flex:1 1 auto;
        min-height:0;
        height:auto;
        margin-top:12px;
      }
      .chart .badge{
        top:8px;
      }
      .runway-foot{
        flex:0 0 auto;
        margin:0 !important;
        padding:18px 0 0;
      }
      .runway-foot .v{
        font-size:clamp(34px,2.8vw,46px);
      }

      @media (max-width:1100px){
        .card3{
          padding-inline:24px;
        }
        .insight-msg{
          font-size:clamp(25px,2.5vw,32px);
        }
        .saving .v,
        .runway-foot .v{
          font-size:34px;
        }
      }
      @media (max-width:900px){
        .s3{
          overflow:hidden;
        }
        .s3-inner{
          padding-bottom:clamp(42px,7vh,64px);
        }
        .s4-inner{
          padding-top:clamp(42px,7vh,64px);
        }
        .card3{
          height:auto;
          min-height:0;
          overflow:hidden;
          padding:30px 22px 58px;
        }
        .conn-list{
          justify-content:flex-start;
        }
        .insight-msg{
          max-width:none;
        }
        .chart{
          min-height:180px;
        }
      }

      .s3 .card3.a .conn,
      .s3 #insightCard,
      .s3 .card3.c .runway{
        opacity:1;
        transform:none;
        border-radius:inherit;
      }
      .s3 .card3.a .stamp,
      .s3 .card3.b .stamp,
      .s3 .card3.c .stamp,
      .s3 .card3.b .saving{
        opacity:1;
        transform:none;
      }
      .conn.s3-reveal,
      #insightCard.s3-reveal,
      .s3 .card3.c .runway.s3-reveal{
        animation:s3SoftReveal .55s cubic-bezier(.22,.61,.36,1) both;
      }
      .stamp.s3-reveal,
      .saving.s3-reveal{
        animation:s3SoftReveal .45s cubic-bezier(.22,.61,.36,1) both;
      }
      @keyframes s3SoftReveal{
        from{opacity:0;transform:translateY(14px);filter:blur(8px)}
        to{opacity:1;transform:translateY(0);filter:blur(0)}
      }


      /* corp story avatar: brand mark instead of person initials */
      .s5 .story .avatar.corp{background:#FFF4E6;display:inline-flex;align-items:center;justify-content:center}
      .s5 .story .avatar.corp svg{display:block}


      /* ============================================================
         polish round 6 — evidence reveal glitch, widescreen pill,
         two-option stack toggle
         ============================================================ */

      /* flat editorial cards: the old circle-reveal keyframes
         animated border-radius (24px end, 50% hidden base) and visibly
         warped the flat rows during the stagger. Dedicated soft reveal
         without any radius animation: */
      @keyframes s3SoftIn{
        0%  {opacity:0;transform:translateY(14px);filter:blur(8px)}
        100%{opacity:1;transform:translateY(0);filter:blur(0)}
      }
      .s3 .card3.a .conn,
      .s3 #insightCard,
      .s3 .card3.c .runway{border-radius:0;transform:translateY(14px)}
      .conn.s3-reveal,
      #insightCard.s3-reveal,
      .s3 .card3.c .runway.s3-reveal{
        animation-name:s3SoftIn;
      }

      /* widescreen: cards grow with their content instead of letting the
         big insight message run over the flag pill */
      .card3{height:auto;min-height:552px}
      .insight-msg{font-size:clamp(26px,1.9vw,34px)}
      .anomaly{margin-top:18px}

      /* stack toggle: just two purposeful options — no carousel */
      .filter-list{
        height:auto;mask-image:none;-webkit-mask-image:none;
        display:flex;flex-direction:column;gap:8px;align-items:flex-end;
        overflow:visible;cursor:default;top:50%;transform:translateY(-50%) translateX(120%);
      }
      .filter-list button{
        position:static;
        background:rgba(9,10,11,.03);border:1px solid rgba(9,10,11,.08);
        color:rgba(9,10,11,.55);
        transition:background .3s ease,color .3s ease,box-shadow .3s ease;
        cursor:pointer;
      }
      .filter-list button:hover{color:var(--ink)}
      .filter-list button.active{
        background:#fff;color:var(--ink);
        box-shadow:0 6px 18px rgba(9,10,11,.08);border-color:rgba(9,10,11,.12);
      }

      /* ============================================================
         restored content sections — pillars, paths, drift cards, badges
         (curtain look) — round 7
         ============================================================ */

      /* generic reveal for the new fullpage screens */
      .land-rv{opacity:0;transform:translateY(20px);filter:blur(6px);
        transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1), filter .7s cubic-bezier(.22,.61,.36,1);}
      .section-in .land-rv{opacity:1;transform:none;filter:none}
      .section-in .pillar:nth-child(2),.section-in .path-card:nth-child(2){transition-delay:.1s}
      .section-in .pillar:nth-child(3),.section-in .path-card:nth-child(3){transition-delay:.2s}
      .section-in .phead h2{transition-delay:.05s}
      .section-in .phead p{transition-delay:.12s}

      /* hero trust badges — slim row under the CTAs */
      .hero-badges{
        display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
        margin-top:clamp(18px,2.4vh,26px);opacity:0;
        animation:introSubLine .5s cubic-bezier(.22,.61,.36,1) 1.4s forwards;
      }
      .hero-badge{
        font-size:11px;letter-spacing:.02em;font-weight:600;
        padding:7px 13px;border-radius:100px;white-space:nowrap;
        color:rgba(255,255,255,.82);
        background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
        backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
      }
      @media (max-width:600px){.hero-badge{font-size:10px;padding:6px 10px}}

      /* drift / debt definition cards in the observation screen */
      .s2 .grid{align-items:stretch}
      .drift-col{display:flex;flex-direction:column;gap:12px;justify-content:center}
      .drift-card{
        border:1px solid rgba(9,10,11,.1);border-radius:18px;
        background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(250,250,250,.78));
        padding:18px 20px;box-shadow:0 14px 40px rgba(9,10,11,.05);
      }
      .drift-card .term{
        font-size:13px;font-weight:700;letter-spacing:-0.01em;color:#FF7D00;
        margin-bottom:8px;
      }
      .drift-card p{font-size:12.5px;line-height:1.5;letter-spacing:-0.01em;color:rgba(9,10,11,.62);margin:0}
      @media (max-width:1100px){
        .drift-col{display:none}  /* observation is dense on mobile; cards live on subpages */
      }

      /* PILLARS screen */
      .s-pillars{position:relative;background:var(--paper);overflow:hidden}
      .s-pillars-inner{
        max-width:1264px;margin:0 auto;position:relative;
        padding:clamp(90px,15vh,150px) clamp(24px,4vw,48px) clamp(40px,6vh,72px);
      }
      .s-pillars .grid-lines{position:absolute;left:50%;top:0;transform:translateX(-50%);width:1064px;height:100%;display:flex;justify-content:space-between;pointer-events:none}
      .s-pillars .grid-lines i{width:1px;background:repeating-linear-gradient(180deg, rgba(9,10,11,.08) 0 4px, transparent 4px 8px);height:100%}
      .phead{text-align:center;max-width:680px;margin:0 auto clamp(34px,5vh,52px);position:relative}
      .phead .eyebrow{justify-content:center;margin-bottom:18px}
      .phead h2{font-size:clamp(32px,3.4vw,52px);letter-spacing:-0.06em;line-height:1.02;font-weight:500;color:var(--ink);margin:0 0 14px;text-wrap:balance}
      .phead h2 .it{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-0.02em}
      .phead p{font-size:14px;line-height:1.5;letter-spacing:-0.02em;color:rgba(9,10,11,.6);max-width:500px;margin:0 auto}
      .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;position:relative}
      .pillar{
        border:1px solid rgba(9,10,11,.08);border-radius:24px;
        background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(250,250,250,.8));
        padding:clamp(24px,2.4vw,32px);box-shadow:0 20px 60px rgba(9,10,11,.05);
        display:flex;flex-direction:column;
      }
      .pillar .idx{font-family:var(--font-mono);font-size:13px;color:rgba(255,125,0,.85);font-weight:500}
      .pillar h3{font-size:clamp(22px,2vw,28px);letter-spacing:-0.05em;font-weight:500;color:var(--ink);margin:14px 0 0}
      .pillar .tag{font-size:14px;font-weight:600;letter-spacing:-0.02em;color:rgba(9,10,11,.5);margin:6px 0 0}
      .pillar .body{font-size:13.5px;line-height:1.55;letter-spacing:-0.015em;color:rgba(9,10,11,.62);margin:14px 0 0}
      .pillar ul{list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid rgba(9,10,11,.08);display:flex;flex-direction:column;gap:9px}
      .pillar ul li{font-size:12.5px;letter-spacing:-0.01em;color:rgba(9,10,11,.7);line-height:1.4;display:flex;gap:9px;align-items:flex-start}
      .pillar ul li::before{content:"";width:6px;height:6px;border-radius:2px;background:#FF7D00;margin-top:5px;flex-shrink:0}
      @media (max-width:980px){.pillars{grid-template-columns:1fr}}

      /* PATHS screen */
      .s-paths{position:relative;background:var(--paper);overflow:hidden}
      .s-paths-inner{
        max-width:1264px;margin:0 auto;position:relative;
        padding:clamp(90px,15vh,150px) clamp(24px,4vw,48px) clamp(40px,6vh,72px);
      }
      .s-paths .phead h2{font-size:clamp(34px,3.8vw,58px)}
      .s-paths .phead h2 .it{font-family:var(--font-serif);font-style:italic;font-weight:400}
      .paths{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
      .path-card{
        border:1px solid rgba(9,10,11,.08);border-radius:24px;
        background:#fff;padding:clamp(26px,2.6vw,34px);
        box-shadow:0 20px 60px rgba(9,10,11,.05);
        display:flex;flex-direction:column;text-decoration:none;
        transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
      }
      .path-card:hover{transform:translateY(-3px);box-shadow:0 28px 70px rgba(9,10,11,.09);border-color:rgba(255,125,0,.3)}
      .path-card .aud{font-size:11px;letter-spacing:.1em;font-weight:700;color:#FF7D00;text-transform:uppercase}
      .path-card h3{font-size:clamp(20px,1.7vw,25px);letter-spacing:-0.04em;font-weight:500;color:var(--ink);line-height:1.12;margin:14px 0 0}
      .path-card p{font-size:13.5px;line-height:1.55;letter-spacing:-0.015em;color:rgba(9,10,11,.6);margin:12px 0 0;flex:1}
      .path-card .go{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:14px;font-weight:500;letter-spacing:-0.03em;color:var(--ink)}
      .path-card .go svg{width:17px;height:17px;transition:transform .25s ease}
      .path-card:hover .go svg{transform:translateX(3px)}
      @media (max-width:980px){.paths{grid-template-columns:1fr}}

      @media (max-width:900px){
        .s-pillars-inner,.s-paths-inner{padding:72px 22px 56px}
      }

      /* stat tiles: grow with content so long DE/ES/FR compound words
         ("BEARBEITUNGSZEIT", "NACHVOLLZIEHBAR") never overflow the box */
      .s2 .stats .stat{
        width:auto;min-width:clamp(104px,10vw,132px);
        height:auto;min-height:clamp(84px,9vw,120px);
      }
      .s2 .stats .l{
        font-size:9px;line-height:1.3;
        overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;
      }

      /* ============================================================
         mobile: scrolled nav must be opaque so headings passing
         under it are cleanly covered, not blurred-through ("behind hero")
         ============================================================ */
      @media (max-width:900px){
        .nav.dark{
          background:rgba(255,255,255,.9);
          backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
          box-shadow:0 6px 24px rgba(9,10,11,.07);
          border:1px solid rgba(9,10,11,.05);
        }
        .nav.dark .brand,.nav.dark .links a,.nav.dark .signin{color:var(--ink)}
        /* a touch more clearance so section headings rest clear of the bar */
        .s-pillars-inner,.s-paths-inner{padding-top:clamp(96px,16vh,120px)}
        .s2-inner{padding-top:clamp(96px,14vh,120px)}
        .s3-inner{padding-top:clamp(96px,14vh,120px)}
      }


      /* ChatGPT is longer than GPT — keep the connect badge legible & contained */
      .conn .badge.gpt{font-size:12px !important;letter-spacing:-0.02em}

      /* ============================================================
         observation lede — flow naturally on desktop so long German
         compounds don't create orphan lines on large (1920) screens.
         The hardcoded sub-line splits become spaces; the browser wraps
         at word boundaries with balanced, orphan-free typography.
         ============================================================ */
      @media (min-width:901px){
        .s2 .lede{max-width:600px;text-wrap:pretty}
        .s2 .lede .sub-line{display:inline}
        .s2 .lede .sub-line::after{content:" "}
      }
      /* DE/ES/FR: hyphenate the lede as a last resort for very long words */
      html[lang="de"] .s2 .lede,
      html[lang="es"] .s2 .lede,
      html[lang="fr"] .s2 .lede{-webkit-hyphens:auto;hyphens:auto}



      /* links inside legal pages (e.g. studio credit in the imprint) */
      .legal-item a{color:#E66E00;border-bottom:1px solid rgba(255,125,0,.4);transition:color .25s ease}
      .legal-item a:hover{color:#FF7D00}


/* --- WCAG AA contrast: darken borderline grays on light backgrounds --- */
section.sect .s5-inner .eyebrow{color:rgba(9,10,11,.64)!important}
.stories .story .person span,.s5 .story .person span{color:rgba(9,10,11,.66)!important}
.stories .story .role,.s5 .story .role{color:rgba(9,10,11,.64)!important}
.agency__meta .k{color:rgba(9,10,11,.66)!important}
.kpi .label{color:rgba(9,10,11,.66)!important}
.kpi .desc{color:rgba(9,10,11,.66)!important}
.breadcrumbs span{color:rgba(9,10,11,.66)!important}