/* Audax Media — shared design system. Extracted from the original single-file site,
   with retired components (AI agents, guarantee, comparison table) removed. */

  :root{
    /* Light theme. Brand cyan kept; text-cyan is the deeper shade so it passes contrast on white. */
    --bg:#F6F8FB;
    --bg-2:#EDF1F6;
    --card:#FFFFFF;
    --card-2:#F8FAFC;
    --border:#DDE4EC;
    --border-2:#C7D2DD;
    --accent:#16C2F5;        /* fills, icons, glows */
    --accent-2:#076A8C;      /* any cyan TEXT (AA on white) */
    --accent-deep:#05566F;
    --accent-display:#0B8AB4;/* the big headline line (large text) */
    --ink:#0F1B2A;           /* dark navy — headlines, primary button */
    --text:#0F1B2A;
    --text-dim:#4A5A6C;
    --text-faint:#5B6B7E;
    --green:#1F9D5B;
    --red:#E0263D;
    --ai-glow-1:#B25AFF;
    --ai-glow-2:#CE5AFF;
    --r:14px;
    --r-lg:22px;
    --max:1180px;
    --ease:cubic-bezier(.22,.61,.36,1);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    position:relative;
  }
  /* Fixed page backdrop: grid + radial glow */
  body::before{
    content:'';
    position:fixed;
    inset:0;
    z-index:-2;
    background:
      radial-gradient(1000px 600px at 50% -5%, rgba(22,194,245,0.16), transparent 60%),
      radial-gradient(800px 500px at 85% 12%, rgba(159,68,255,0.07), transparent 55%),
      var(--bg);
  }
  body::after{
    content:'';
    position:fixed;
    inset:0;
    z-index:-1;
    background-image:
      linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
    background-size:56px 56px;
    -webkit-mask-image:radial-gradient(circle at 50% 0%, #000 30%, transparent 80%);
    mask-image:radial-gradient(circle at 50% 0%, #000 30%, transparent 80%);
    pointer-events:none;
  }
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  svg{display:block;}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}

  /* ============ Buttons ============ */
  .btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:15px 26px;
    border-radius:10px;
    font-weight:700;
    font-size:15px;
    letter-spacing:-0.01em;
    cursor:pointer;
    border:1px solid transparent;
    transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
    white-space:nowrap;
    overflow:hidden;
  }
  .btn .arrow{
    display:inline-flex;
    transition:transform .3s var(--ease);
  }
  .btn:hover .arrow{transform:translateX(5px);}
  .btn-primary{
    background:linear-gradient(180deg, var(--accent-2), var(--accent));
    color:#04141C;
    box-shadow:0 8px 22px -8px rgba(22,194,245,0.6), inset 0 1px 0 rgba(255,255,255,0.25);
  }
  .btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 34px -8px rgba(22,194,245,0.7), inset 0 1px 0 rgba(255,255,255,0.3);
  }
  /* Shine sweep on primary */
  .btn-primary::before{
    content:'';
    position:absolute;
    top:0;left:-120%;
    width:60%;height:100%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
    transform:skewX(-18deg);
    transition:left .6s var(--ease);
  }
  .btn-primary:hover::before{left:150%;}
  .btn-secondary{
    background:rgba(255,255,255,0.02);
    color:var(--text);
    border:1px solid var(--border-2);
    backdrop-filter:blur(6px);
  }
  .btn-secondary:hover{
    border-color:var(--accent);
    color:var(--accent-2);
    transform:translateY(-2px);
  }
  .btn-small{padding:11px 18px;font-size:14px;}
  .btn:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;}

  /* ============ Hero Nav (pill, overlaid on video) ============ */
  .hx-nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    width:100%;
  }
  .hx-pill{
    display:flex;
    align-items:center;
    gap:2px;
    padding:6px 8px;
    border:1px solid var(--border-2);
    border-radius:100px;
    background:rgba(255,255,255,0.03);
    backdrop-filter:blur(12px) saturate(140%);
  }
  .hx-pill a{
    color:rgba(255,255,255,0.8);
    font-size:14px;
    font-weight:500;
    letter-spacing:-0.01em;
    padding:8px 14px;
    border-radius:100px;
    transition:color .2s var(--ease), background .2s var(--ease);
    white-space:nowrap;
  }
  .hx-pill a:hover{color:#fff;background:rgba(255,255,255,0.07);}
  .hx-pill a.contact{display:inline-flex;align-items:center;gap:6px;}
  .hx-pill a.contact svg{width:14px;height:14px;}
  .hx-hamburger{
    display:none;
    width:46px;height:46px;
    align-items:center;justify-content:center;
    border-radius:13px;
    border:1px solid var(--border-2);
    background:rgba(255,255,255,0.04);
    color:#fff;cursor:pointer;
    transition:background .2s var(--ease);
  }
  .hx-hamburger:hover{background:rgba(255,255,255,0.08);}
  .hx-hamburger svg{width:22px;height:22px;}
  /* Full-screen mobile menu (designed for phone, not a dropdown) */
  .hx-menu{
    position:fixed;
    inset:0;
    z-index:200;
    display:flex;
    flex-direction:column;
    padding:calc(18px + env(safe-area-inset-top)) 24px calc(26px + env(safe-area-inset-bottom));
    background:rgba(9,8,7,0.92);
    backdrop-filter:blur(22px) saturate(140%);
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .32s var(--ease), transform .32s var(--ease), visibility .32s;
  }
  .hx-menu.open{opacity:1;visibility:visible;transform:none;}
  .hx-menu-head{display:flex;align-items:center;justify-content:space-between;}
  .hx-close{
    width:46px;height:46px;
    border-radius:13px;
    border:1px solid var(--border-2);
    background:rgba(255,255,255,0.05);
    color:#fff;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
  .hx-close svg{width:22px;height:22px;}
  .hx-menu-links{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:2px;
  }
  .hx-menu-links a{
    display:flex;align-items:center;justify-content:space-between;
    font-size:clamp(24px,7vw,32px);
    font-weight:700;
    letter-spacing:-0.02em;
    color:#fff;
    padding:15px 2px;
    border-bottom:1px solid rgba(255,255,255,0.07);
    transition:color .2s var(--ease), padding-left .25s var(--ease);
  }
  .hx-menu-links a::after{
    content:'';width:8px;height:8px;border-right:2px solid var(--text-faint);border-top:2px solid var(--text-faint);
    transform:rotate(45deg);transition:border-color .2s var(--ease);
  }
  .hx-menu-links a:active{color:var(--accent-2);padding-left:10px;}
  .hx-menu-links a:active::after{border-color:var(--accent-2);}
  .hx-menu-cta{width:100%;justify-content:center;margin-top:22px;}
  @media (max-width:1024px){
    .hx-pill{display:none;}
    .hx-hamburger{display:inline-flex;}
  }
  @media (min-width:1025px){
    .hx-menu{display:none !important;}
  }
  .logo img{height:40px;width:auto;display:block;}
  .foot .logo img{height:44px;}
  .hx-menu-head .logo img{height:34px;}
  @media (max-width:768px){ .logo img{height:33px;} .foot .logo img{height:36px;} }
  .logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    font-size:18px;
    letter-spacing:-0.02em;
  }
  .logo .mark{
    width:30px;height:30px;
    border-radius:8px;
    background:linear-gradient(140deg, var(--accent-2), var(--accent-deep));
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 14px -4px rgba(22,194,245,0.6);
  }
  .logo .mark svg{width:17px;height:17px;}

  /* ============ Section scaffolding ============ */
  section{position:relative;}
  .section-pad{padding:78px 24px;}
  .section-head{text-align:center;max-width:720px;margin:0 auto 44px;}
  .tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--accent-2);
    font-weight:700;
    font-size:12.5px;
    text-transform:uppercase;
    letter-spacing:0.1em;
    margin-bottom:16px;
    padding:6px 13px;
    border:1px solid var(--border-2);
    border-radius:100px;
    background:rgba(22,194,245,0.06);
  }
  h2{
    font-size:clamp(29px,4.2vw,44px);
    font-weight:800;
    letter-spacing:-0.03em;
    line-height:1.12;
    margin-bottom:16px;
  }
  .section-desc{color:var(--text-dim);font-size:17px;line-height:1.6;}

  /* ============ Hero (video background) ============ */
  .hx-hero{
    position:relative;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:#000;
  }
  .hx-video{
    position:absolute;
    inset:0;
    width:100%;height:100%;
    object-fit:cover;
    z-index:0;
  }
  .hx-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:
      radial-gradient(1200px 700px at 50% 22%, rgba(22,194,245,0.14), transparent 60%),
      linear-gradient(180deg, rgba(11,10,9,0.62) 0%, rgba(11,10,9,0.32) 42%, rgba(11,10,9,0.88) 100%);
  }
  .hx-content{
    position:relative;
    z-index:10;
    display:flex;
    flex-direction:column;
    flex:1;
    width:100%;
    max-width:var(--max);
    margin:0 auto;
    padding:calc(20px + env(safe-area-inset-top)) 24px 52px;
  }
  .hx-center{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:24px;
    padding:44px 0;
  }
  .hx-lead{
    max-width:620px;
    color:rgba(255,255,255,0.8);
    font-size:clamp(15px,1.8vw,18px);
    line-height:1.6;
  }
  .hx-stat{
    font-size:14px;
    color:rgba(255,255,255,0.7);
    letter-spacing:0.01em;
  }
  .hx-stat b{color:#fff;font-weight:800;}
  .hx-substat{
    font-size:12.5px;
    color:rgba(255,255,255,0.5);
    letter-spacing:0.01em;
    margin-top:6px;
    max-width:520px;
  }
  .hx-kicker{
    text-transform:uppercase;
    letter-spacing:0.09em;
    color:rgba(255,255,255,0.8);
    font-size:13px;
    font-weight:600;
  }
  .hx-h1{
    font-weight:500;
    font-size:clamp(44px,12.5vw,150px);
    line-height:0.85;
    letter-spacing:-0.045em;
    color:#fff;
  }
  .hx-h1 .shine{display:block;font-weight:800;}
  .btn-round{border-radius:100px;padding:16px 32px;font-size:16px;}
  /* CSS-only shiny animated gradient (framer-motion equivalent) */
  .shine{
    background:linear-gradient(100deg, var(--accent) 0%, var(--accent) 38%, #ffffff 50%, var(--accent) 62%, var(--accent) 100%);
    background-size:200% auto;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
    animation:shine 3s linear infinite;
  }
  @keyframes shine{to{background-position:-200% center;}}
  @media (max-width:720px){
    .hx-center{padding:24px 0;gap:16px;}
    .hx-lead{line-height:1.5;}
    .hx-kicker{font-size:11.5px;letter-spacing:0.07em;}
    .hx-stat{font-size:13px;}
  }

  /* ============ Pain ============ */
  .pain-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
    gap:20px;
  }
  .pain-card{
    background:linear-gradient(180deg, var(--card), var(--bg-2));
    border:1px solid var(--border);
    border-radius:var(--r);
    padding:30px 28px;
    transition:transform .3s var(--ease), border-color .3s var(--ease);
  }
  .pain-card:hover{transform:translateY(-4px);border-color:var(--red);}
  .pain-ic{
    width:46px;height:46px;
    border-radius:11px;
    background:rgba(245,56,79,0.1);
    border:1px solid rgba(245,56,79,0.22);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:18px;
  }
  .pain-ic svg{width:22px;height:22px;color:var(--red);}
  .pain-card h3{font-size:17px;font-weight:700;margin-bottom:9px;letter-spacing:-0.01em;}
  .pain-card p{color:var(--text-dim);font-size:14.5px;line-height:1.6;}

  /* ============ How it works ============ */
  .steps{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;}
  .step{
    position:relative;
    background:linear-gradient(180deg, var(--card), var(--bg-2));
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    padding:34px 30px;
  }
  .step-top{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
  .step-num{
    flex-shrink:0;
    width:46px;height:46px;
    border-radius:12px;
    background:linear-gradient(140deg, var(--accent-2), var(--accent-deep));
    color:#04141C;font-weight:900;font-size:19px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 20px -8px rgba(22,194,245,0.6);
  }
  .step-ic{width:26px;height:26px;color:var(--accent-2);}
  .step h3{font-size:19px;font-weight:700;margin-bottom:10px;letter-spacing:-0.01em;}
  .step p{color:var(--text-dim);font-size:15px;line-height:1.62;}

  /* ============ Pricing ============ */
  .pricing-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:18px;align-items:stretch;
  }
  /* 4 tiers side-by-side on desktop — tighten cards so they fit cleanly */
  @media(min-width:1060px){
    .pricing-grid{grid-template-columns:repeat(4,1fr);}
    .pricing-grid .price{padding:30px 22px;}
    .pricing-grid .price-amt{font-size:34px;}
    .pricing-grid .price-feats li{font-size:13.5px;}
  }
  .price{
    display:flex;flex-direction:column;
    background:linear-gradient(180deg, var(--card), var(--bg-2));
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    padding:34px 28px;
  }
  .price.featured{
    border-color:rgba(22,194,245,0.55);
    background:
      radial-gradient(120% 80% at 50% 0%, rgba(22,194,245,0.14), transparent 60%),
      linear-gradient(180deg, var(--card-2), var(--bg-2));
    box-shadow:0 30px 70px -30px rgba(22,194,245,0.4);
  }
  @media(min-width:940px){
    .price.featured{transform:scale(1.045);}
    .anim .price.featured.is-in{transform:scale(1.045) !important;}
  }
  .price-badge{
    align-self:flex-start;
    background:linear-gradient(180deg,var(--accent-2),var(--accent));
    color:#04141C;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:0.05em;
    padding:6px 13px;border-radius:100px;margin-bottom:16px;
  }
  .price-tier{font-size:13px;font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:12px;}
  .price-amt{font-size:40px;font-weight:900;letter-spacing:-0.03em;line-height:1;margin-bottom:6px;}
  .price-amt span{font-size:15px;font-weight:600;color:var(--text-faint);letter-spacing:0;}
  .price-desc{color:var(--text-dim);font-size:14px;line-height:1.55;margin-bottom:24px;min-height:44px;}
  .price-feats{display:flex;flex-direction:column;gap:13px;margin-bottom:28px;flex-grow:1;}
  .price-feats li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.45;}
  .price-feats li svg{width:18px;height:18px;color:var(--accent);flex-shrink:0;margin-top:1px;}
  .price .btn{width:100%;justify-content:center;}
  .pricing-note{text-align:center;color:var(--text-faint);font-size:13.5px;margin-top:34px;}
  /* Sub-label under the Recommended badge */
  .price-badge-sub{
    font-size:12px;color:var(--accent-2);font-weight:600;
    margin-top:-10px;margin-bottom:14px;letter-spacing:0.01em;
  }
  /* Cross-sell notes — one per available add-on */
  .price-crosssell{
    font-size:12px;line-height:1.5;color:var(--text-dim);
    background:rgba(178,90,255,0.08);
    border:1px solid rgba(178,90,255,0.22);
    border-radius:10px;padding:9px 11px;margin-bottom:8px;
  }
  .price-crosssell:last-of-type{margin-bottom:16px;}
  .price-crosssell b{color:#C99BFF;font-weight:700;white-space:nowrap;}
  /* Premium — value of bundled agents */
  .price-includes{
    font-size:12.5px;line-height:1.5;font-weight:700;color:var(--accent-2);
    margin-top:-2px;margin-bottom:12px;
  }
  /* Per-tier guarantee line */
  .price-guarantee{
    display:flex;gap:8px;align-items:flex-start;
    font-size:12.5px;line-height:1.55;color:var(--text-dim);
    border-top:1px solid var(--border);
    padding-top:14px;margin-bottom:18px;
  }
  .price-guarantee svg{width:15px;height:15px;color:var(--accent);flex-shrink:0;margin-top:2px;}
  .price-guarantee b{color:#fff;font-weight:700;}
  .price-guarantee .fine{display:block;margin-top:4px;color:var(--text-faint);font-size:11.5px;}

  /* ============ About ============ */
  .about{
    display:grid;
    grid-template-columns:200px 1fr;
    gap:48px;align-items:center;
    max-width:920px;margin:0 auto;
  }
  .headshot{
    width:200px;height:200px;
    border-radius:50%;
    background:
      radial-gradient(circle at 50% 35%, #2A2118, #14110D);
    border:1px solid var(--border-2);
    display:flex;align-items:center;justify-content:center;
    position:relative;
    box-shadow:0 24px 60px -24px rgba(0,0,0,0.8);
  }
  .headshot::before{
    content:'';position:absolute;inset:-2px;border-radius:50%;
    background:conic-gradient(from 180deg, var(--accent), transparent 30%, transparent 70%, var(--accent-2));
    z-index:-1;opacity:.5;filter:blur(2px);
  }
  .headshot span{font-size:52px;font-weight:900;color:var(--accent-2);letter-spacing:-0.03em;}
  .headshot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;z-index:2;}
  .about-body .tag{margin-bottom:14px;}
  .about-body h2{text-align:left;font-size:clamp(26px,3.5vw,36px);margin-bottom:18px;}
  .about-body p{color:var(--text-dim);font-size:16.5px;line-height:1.75;margin-bottom:16px;}
  .about-body p strong{color:var(--text);}
  .about-sig{margin-top:20px;font-weight:800;color:var(--text);font-size:16px;}
  .about-sig span{display:block;font-weight:500;color:var(--text-faint);font-size:14px;margin-top:2px;}

  /* ============ FAQ ============ */
  .faq-list{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:13px;}
  .faq-item{
    background:linear-gradient(180deg, var(--card), var(--bg-2));
    border:1px solid var(--border);
    border-radius:14px;overflow:hidden;
    transition:border-color .25s var(--ease);
  }
  .faq-item.open{border-color:var(--border-2);}
  .faq-q{
    width:100%;text-align:left;
    padding:22px 24px;
    background:none;border:none;
    color:var(--text);font-size:16px;font-weight:600;font-family:inherit;
    cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
  }
  .faq-q:focus-visible{outline:2px solid var(--accent-2);outline-offset:-2px;}
  .faq-q .ic{
    flex-shrink:0;width:26px;height:26px;border-radius:8px;
    border:1px solid var(--border-2);
    display:flex;align-items:center;justify-content:center;
    color:var(--accent-2);transition:transform .3s var(--ease), background .25s var(--ease);
  }
  .faq-q .ic svg{width:15px;height:15px;}
  .faq-item.open .faq-q .ic{transform:rotate(45deg);background:rgba(22,194,245,0.12);}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease);}
  .faq-a-in{padding:0 24px 22px;color:var(--text-dim);font-size:15px;line-height:1.72;}

  /* ============ Final CTA + Footer ============ */
  .final{
    text-align:center;
    padding:120px 24px 90px;
    background:radial-gradient(700px 450px at 50% 120%, rgba(22,194,245,0.2), transparent 65%);
  }
  .final h2{max-width:760px;margin:0 auto 18px;font-size:clamp(30px,5vw,52px);}
  .final p{color:var(--text-dim);font-size:18px;margin-bottom:38px;}
  footer{border-top:1px solid var(--border);padding:38px 24px;}
  .foot{
    max-width:var(--max);margin:0 auto;
    display:flex;justify-content:space-between;align-items:center;
    flex-wrap:wrap;gap:20px;
  }
  .foot-links{display:flex;gap:18px;flex-wrap:wrap;align-items:center;}
  .foot-links a{color:var(--text-faint);font-size:14px;transition:color .2s var(--ease);display:inline-flex;align-items:center;min-height:44px;padding:0 2px;}
  .foot-links a:hover{color:var(--accent-2);}
  .foot-copy{color:var(--text-faint);font-size:13px;margin-top:22px;text-align:center;}

  /* ============ Responsive ============ */
  @media (max-width:820px){
    .about{grid-template-columns:1fr;text-align:center;gap:28px;}
    .headshot{margin:0 auto;}
    .about-body h2,.about-body{text-align:center;}
    .about-body .tag{margin-left:auto;margin-right:auto;}
  }
  @media (max-width:680px){
    .section-pad{padding:52px 20px;}
    /* Old Way vs Audax → one compact card per topic (was ~386px/row, now ~170px) */
    .compare-grid{gap:12px;}
    .compare-row{grid-template-columns:1fr;padding:16px 16px 14px;}
    .compare-mid{display:none;}
    .compare-col{padding:0;background:none;justify-content:flex-start;}
    .compare-col.before{
      border-bottom:1px solid var(--border);
      padding-bottom:11px;margin-bottom:11px;
    }
    /* Topic becomes the card title, shown once */
    .compare-col.before .compare-topic{
      order:-1;font-size:14.5px;color:var(--text);
      text-transform:none;letter-spacing:0;font-weight:800;margin-bottom:9px;
    }
    .compare-col.after .compare-topic{display:none;}
    .compare-label{font-size:10.5px;margin-bottom:4px;}
    .compare-col p{font-size:13px;line-height:1.5;}
    .foot{flex-direction:column;text-align:center;}
  }

  /* ============ Designed-for-mobile layer ============ */
  /* Sticky bottom CTA bar — phone only */
  .mobile-cta-bar{
    display:none;
    position:fixed;
    left:14px;right:14px;
    bottom:calc(14px + env(safe-area-inset-bottom));
    z-index:120;
    align-items:center;justify-content:center;gap:9px;
    padding:16px 22px;
    border-radius:100px;
    background:linear-gradient(180deg,var(--accent-2),var(--accent));
    color:#04141C;font-weight:800;font-size:16px;letter-spacing:-0.01em;
    box-shadow:0 16px 38px -10px rgba(22,194,245,0.75), inset 0 1px 0 rgba(255,255,255,0.3);
    transform:translateY(160%);
    transition:transform .42s var(--ease);
  }
  .mobile-cta-bar.show{transform:none;}
  .mobile-cta-bar:active{filter:brightness(0.94);}
  .mobile-cta-bar .arrow{transition:transform .3s var(--ease);}

  @media (max-width:768px){
    .mobile-cta-bar{display:flex;}

    /* Pricing → vertical stack, all plans visible at once, Core on top */
    .pricing-grid{
      display:flex;
      flex-direction:column;
      gap:16px;
    }
    .price.featured{order:-1;}

    /* AI-agent cards: single full-width column (fixes 340px min overflow) */
    .agents-grid{grid-template-columns:1fr;gap:16px;}
    .agent{padding:26px 20px;}
    .price{padding:26px 20px;}
    .pain-card{padding:24px 20px;}
    .pain-grid{gap:14px;}
    .guarantee{padding-top:64px;padding-bottom:64px;}
    .guarantee,.final{padding-left:20px;padding-right:20px;}
    .final{padding-bottom:78px;}  /* clear the sticky bar */

    /* Full-width primary CTAs with big touch targets */
    .hx-center .btn-round,
    .guarantee .btn,
    .final .btn{width:100%;justify-content:center;min-height:54px;}
  }

  /* Touch feedback — phones have no hover */
  @media (hover:none){
    .btn-primary:active{transform:scale(0.97);}
    .btn-secondary:active{border-color:var(--accent);color:var(--accent-2);}
    .pain-card:active,.step:active,.price:active{border-color:var(--accent);}
    .agent:active{border-color:rgba(178,90,255,0.5);}
    .faq-q:active{background:rgba(255,255,255,0.03);}
    .hx-pill a:active,.foot-links a:active{color:var(--accent-2);}
  }

  /* ============ Handcrafted micro-interactions ============ */
  /* Scroll reveal — subtle rise + blur-clear, staggered (gated by .anim to avoid FOUC) */
  .anim .section-head,
  .anim .segments > *,
  .anim .pillars > *,
  .anim .why-grid > *,
  .anim .platforms > *,
  .anim .cases > *,
  .anim .quotes > *,
  .anim .work-grid > *,
  .anim .pain-grid > *,
  .anim .compare-grid > *,
  .anim .steps > .step,
  .anim .agents-grid > *,
  .anim .pricing-grid > *,
  .anim .faq-list > *,
  .anim .about > *,
  .anim .guarantee > *,
  .anim .final .wrap > *{
    opacity:0;
    transform:translateY(18px);
    filter:blur(5px);
    transition:opacity .75s var(--ease), transform .75s var(--ease), filter .75s var(--ease);
  }
  .anim .is-in{opacity:1 !important;transform:none !important;filter:none !important;}

  /* Pointer-tracking spotlight on cards */
  .pain-card,.step,.agent,.price{position:relative;isolation:isolate;}
  .pain-card::before,.step::before,.price::before{
    content:'';position:absolute;inset:0;border-radius:inherit;
    background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(22,194,245,0.10), transparent 62%);
    opacity:0;transition:opacity .4s var(--ease);pointer-events:none;z-index:0;
  }
  .agent::before{
    content:'';position:absolute;inset:0;border-radius:inherit;
    background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(178,90,255,0.15), transparent 62%);
    opacity:0;transition:opacity .4s var(--ease);pointer-events:none;z-index:0;
  }
  .pain-card:hover::before,.step:hover::before,.price:hover::before,.agent:hover::before{opacity:1;}
  .pain-card > *,.step > *,.price > *{position:relative;z-index:1;}

  /* How It Works — connector line drawn on scroll */
  .steps-line{
    position:absolute;top:58px;left:9%;right:9%;height:2px;z-index:0;
    background:linear-gradient(90deg, transparent, rgba(22,194,245,0.55), transparent);
    transform:scaleX(0);transform-origin:left center;
    transition:transform 1.1s var(--ease);
  }
  .steps-line.is-in{transform:scaleX(1);}
  @media (max-width:900px){ .steps-line{display:none;} }

  /* Before / After — refined hover */
  .compare-row{transition:border-color .3s var(--ease);}
  .compare-row:hover{border-color:var(--border-2);}
  .compare-mid svg{transition:transform .35s var(--ease);}
  .compare-row:hover .compare-mid svg{transform:translateX(4px);}
  .compare-row:hover .compare-col.after{background:rgba(84,192,138,0.075);}

  /* FAQ — accent bar grows when open */
  .faq-item{position:relative;}
  .faq-item::before{
    content:'';position:absolute;left:0;top:12px;bottom:12px;width:2px;border-radius:2px;
    background:linear-gradient(180deg,var(--accent-2),var(--accent));
    transform:scaleY(0);transform-origin:top;
    transition:transform .4s var(--ease);
  }
  .faq-item.open::before{transform:scaleY(1);}

  /* ============ Reduced motion ============ */
  @media (prefers-reduced-motion:reduce){
    *{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
    .shine{-webkit-text-fill-color:var(--accent-2);color:var(--accent-2);}
  }
  /* ============ Trust strip ============ */
  .trust-strip {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 20px 24px;
    background: rgba(255,255,255,0.015);
  }
  .trust-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .trust-label {
    font-size: 11.5px;
    color: var(--text-faint);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    white-space: nowrap;
  }
  .trust-logos {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
  .trust-logo-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--text-faint);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: color .2s var(--ease), opacity .2s var(--ease);
    cursor: default;
  }
  a.trust-logo-link { cursor: pointer; }
  a.trust-logo-link:hover { color: var(--text-dim); opacity: 1; }
  .trust-logo {
    width: 26px;
    height: 26px;
    object-fit: contain;
    filter: brightness(0) invert(0.55);
    transition: filter .2s var(--ease);
  }
  a.trust-logo-link:hover .trust-logo { filter: brightness(0) invert(0.8); }
  .trust-logo-google-ads { filter: brightness(0) invert(0.55); }
  .trust-logo-google    { filter: brightness(0) invert(0.55); }
  .trust-logo-meta      { filter: brightness(0) invert(0.55); }
  .trust-badge-pill {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-2);
    border-radius: 100px;
    padding: 7px 16px;
    white-space: nowrap;
  }

  /* ============ Lead form ============ */
  .lead-form,.lead-success{max-width:560px;margin:0 auto;}
  .lead-form{
    display:flex;flex-direction:column;gap:18px;
    background:linear-gradient(180deg,var(--card),var(--bg-2));
    border:1px solid var(--border);border-radius:var(--r-lg);
    padding:34px 30px;
  }
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
  .form-row{display:flex;flex-direction:column;gap:8px;}
  .lead-form label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);}
  .lead-form input,.lead-form select,.lead-form textarea{
    width:100%;font-family:inherit;font-size:15px;color:var(--text);
    background:rgba(255,255,255,0.03);border:1px solid var(--border-2);border-radius:10px;
    padding:13px 14px;transition:border-color .2s var(--ease), background .2s var(--ease);
  }
  .lead-form input::placeholder,.lead-form textarea::placeholder{color:var(--text-faint);}
  .lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{
    outline:none;border-color:var(--accent);background:rgba(22,194,245,0.05);
  }
  .lead-form select{
    appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23847C6E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat:no-repeat;background-position:right 14px center;
  }
  .lead-form select:invalid{color:var(--text-faint);}
  .lead-form option{color:var(--text);background:var(--card);}
  .lead-form textarea{resize:vertical;min-height:110px;}
  .lf-submit{width:100%;justify-content:center;margin-top:4px;min-height:54px;}
  .lf-note{font-size:12.5px;color:var(--text-faint);text-align:center;margin-top:-4px;}
  .lead-success{
    text-align:center;background:linear-gradient(180deg,var(--card),var(--bg-2));
    border:1px solid var(--border);border-radius:var(--r-lg);padding:52px 30px;
  }
  .lead-success-ic{
    width:62px;height:62px;border-radius:50%;
    background:rgba(84,192,138,0.14);border:1px solid rgba(84,192,138,0.42);color:var(--green);
    display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
  }
  .lead-success-ic svg{width:30px;height:30px;}
  .lead-success h3{font-size:23px;font-weight:800;letter-spacing:-0.01em;margin-bottom:12px;}
  .lead-success p{color:var(--text-dim);font-size:16px;line-height:1.6;}
  .lead-success a{color:var(--accent-2);text-decoration:underline;text-underline-offset:3px;}
  @media (max-width:560px){ .form-grid{grid-template-columns:1fr;} }

  /* ============ NEW: Hero (two columns, no background video) ============ */
  .hx-hero{min-height:auto;}
  .hero-grid{
    display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
    padding:56px 0 72px;
  }
  .hero-copy .hx-kicker{display:inline-block;margin-bottom:18px;}
  .hero-h1{
    font-weight:800;letter-spacing:-0.035em;line-height:1.02;
    font-size:clamp(40px,5.4vw,72px);color:#fff;margin:0 0 20px;
  }
  .hero-h1 .shine{
    background:linear-gradient(90deg,var(--accent-2),#fff 45%,var(--accent-2));
    background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
    animation:shine 6s linear infinite;
  }
  .hero-lead{font-size:clamp(16px,1.6vw,19px);color:var(--text-dim);line-height:1.6;max-width:52ch;margin:0 0 30px;}
  .hero-ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
  .hero-note{margin-top:18px;font-size:13px;color:var(--text-faint);}
  .hero-note b{color:var(--text);font-weight:700;}

  /* ============ NEW: 9:16 reel ============ */
  .reel{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:end;}
  .reel .phone{
    aspect-ratio:9/16;border-radius:22px;overflow:hidden;
    background:linear-gradient(180deg,var(--card-2),var(--bg-2));
    border:1px solid var(--border-2);position:relative;
    box-shadow:0 30px 60px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.03) inset;
  }
  .reel .phone:nth-child(2){transform:translateY(-22px);}
  .reel .phone video,.reel .phone img{width:100%;height:100%;object-fit:cover;display:block;}
  /* Placeholder state — replace the inner markup with a <video> when a sample exists */
  .reel .phone.is-placeholder{
    border:1px dashed rgba(88,214,255,.45);
    background:
      radial-gradient(120% 70% at 50% 0%, rgba(22,194,245,.10), transparent 60%),
      linear-gradient(180deg,var(--card),var(--bg-2));
    display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;
  }
  .reel .ph-label{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);}
  .reel .ph-sub{display:block;margin-top:6px;font-size:11.5px;color:var(--text-faint);letter-spacing:.02em;}
  .reel .tag-pill{
    position:absolute;left:10px;top:10px;z-index:2;
    font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    background:rgba(11,10,9,.72);border:1px solid rgba(255,255,255,.12);color:#fff;
    padding:5px 8px;border-radius:100px;backdrop-filter:blur(6px);
  }

  /* ============ NEW: two segment doors ============ */
  .segments{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
  .seg{
    display:flex;flex-direction:column;gap:14px;
    background:linear-gradient(180deg, var(--card), var(--bg-2));
    border:1px solid var(--border);border-radius:var(--r-lg);padding:34px 30px;
    text-decoration:none;color:inherit;position:relative;isolation:isolate;
    transition:transform .3s var(--ease), border-color .3s var(--ease);
  }
  .seg:hover{transform:translateY(-4px);border-color:var(--accent);}
  .seg .seg-kicker{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);}
  .seg h3{font-size:24px;font-weight:800;letter-spacing:-0.02em;margin:0;}
  .seg p{color:var(--text-dim);font-size:15px;line-height:1.6;margin:0;}
  .seg ul{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;}
  .seg li{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--text-dim);}
  .seg li svg{width:16px;height:16px;color:var(--accent);flex-shrink:0;margin-top:2px;}
  .seg .seg-cta{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:8px;color:var(--accent-2);font-weight:700;font-size:14.5px;}
  .seg .seg-cta svg{width:16px;height:16px;transition:transform .3s var(--ease);}
  .seg:hover .seg-cta svg{transform:translateX(4px);}

  /* ============ NEW: three pillars ============ */
  .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .pillar{
    background:linear-gradient(180deg, var(--card), var(--bg-2));
    border:1px solid var(--border);border-radius:var(--r);padding:30px 26px;
    position:relative;isolation:isolate;
  }
  .pillar .num{
    display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;border-radius:11px;margin-bottom:16px;
    background:linear-gradient(140deg,var(--accent-2),var(--accent-deep));
    color:#04141C;font-weight:900;font-size:15px;
  }
  .pillar h3{font-size:20px;font-weight:800;letter-spacing:-0.015em;margin:0 0 10px;}
  .pillar p{color:var(--text-dim);font-size:14.5px;line-height:1.6;margin:0;}

  /* ============ NEW: work grid (portfolio) ============ */
  .work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:760px;margin:0 auto;}
  .work{
    aspect-ratio:9/16;border-radius:18px;overflow:hidden;position:relative;
    background:linear-gradient(180deg,var(--card-2),var(--bg-2));border:1px solid var(--border);
  }
  .work video,.work img{width:100%;height:100%;object-fit:cover;display:block;}
  .work .meta{
    position:absolute;left:0;right:0;bottom:0;padding:14px 14px 12px;
    background:linear-gradient(180deg,transparent,rgba(11,10,9,.92));
  }
  .work .meta b{display:block;font-size:13px;color:#fff;}
  .work .meta span{display:block;font-size:11.5px;color:var(--text-faint);margin-top:2px;}
  .work.is-placeholder{
    border:1px dashed rgba(88,214,255,.35);
    display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;
  }
  .work.is-placeholder .ph-label{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);}

  /* ============ NEW: pricing tweaks for the new tiers ============ */
  .price-meta{display:flex;gap:10px;flex-wrap:wrap;margin:-6px 0 18px;}
  .price-meta span{
    font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    color:var(--text-dim);background:rgba(255,255,255,.04);border:1px solid var(--border);
    padding:5px 9px;border-radius:100px;
  }
  .price-amt.is-placeholder{color:var(--accent-2);}
  .price-amt.is-placeholder small{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin-top:6px;}

  /* ============ NEW: responsive for the new components ============ */
  @media (max-width:960px){
    .hero-grid{grid-template-columns:1fr;gap:36px;padding:36px 0 56px;}
    .reel{grid-template-columns:repeat(3,1fr);max-width:520px;}
    .reel .phone:nth-child(2){transform:none;}
    .pillars{grid-template-columns:1fr;}
    .work-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:720px){
    .segments{grid-template-columns:1fr;}
    .reel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;max-width:none;
          margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px;-webkit-overflow-scrolling:touch;}
    .reel .phone{flex:0 0 62vw;max-width:260px;scroll-snap-align:center;}
    .hero-ctas .btn{width:100%;justify-content:center;}
  }


  /* =====================================================================
     LIGHT THEME OVERRIDES
     Everything above was written dark-first. Variables handle most of it;
     this block pins the rules that used hard-coded whites, blacks and glows.
     ===================================================================== */

  /* page ground: soft light, faint cyan bloom top-centre, no grid texture */
  body{background:var(--bg);color:var(--text);}
  body::before{
    background:
      radial-gradient(900px 480px at 50% -10%, rgba(22,194,245,.14), transparent 65%),
      radial-gradient(700px 400px at 90% 20%, rgba(178,90,255,.06), transparent 60%);
    -webkit-mask-image:none;mask-image:none;opacity:1;
  }

  /* buttons — dark primary (Admiral), white outlined secondary */
  .btn-primary{
    background:var(--ink);color:#fff;
    box-shadow:0 10px 24px -12px rgba(15,27,42,.55);
  }
  .btn-primary:hover{box-shadow:0 16px 34px -12px rgba(15,27,42,.6);}
  .btn-primary::before{background:linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);}
  .btn-secondary{background:#fff;color:var(--text);border-color:var(--border-2);backdrop-filter:none;}
  .btn-secondary:hover{border-color:var(--ink);color:var(--ink);}
  .btn .arrow{color:inherit;}

  /* hero shell */
  .hx-hero{background:transparent;}
  .hx-overlay{background:none;}
  .hx-content{padding-top:calc(16px + env(safe-area-inset-top));}

  /* nav pill — white glass, dark text */
  .hx-pill{background:rgba(255,255,255,.78);border-color:var(--border);backdrop-filter:blur(10px);
           box-shadow:0 10px 30px -18px rgba(15,27,42,.35);}
  .hx-pill a{color:var(--text-dim);}
  .hx-pill a:hover{color:var(--ink);background:rgba(15,27,42,.05);}
  .hx-pill a.contact{color:var(--ink);}
  .hx-pill a[aria-current]{color:var(--ink);font-weight:700;}
  .hx-hamburger{background:#fff;border-color:var(--border);color:var(--ink);box-shadow:0 8px 20px -14px rgba(15,27,42,.4);}
  .hx-hamburger:hover{background:var(--bg-2);}
  .hx-menu{background:var(--bg);}
  .hx-close{background:#fff;border-color:var(--border);color:var(--ink);}
  .hx-menu-links a{color:var(--text);border-bottom-color:var(--border);}
  .hx-menu-links a::after{border-color:var(--text-faint);}

  /* kicker pill (Admiral style) */
  .hx-kicker{
    display:inline-flex;align-items:center;gap:9px;
    padding:9px 16px 9px 13px;border-radius:100px;
    background:#fff;border:1px solid var(--border);
    box-shadow:0 8px 24px -16px rgba(15,27,42,.35);
    color:var(--text-dim);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  }
  .hx-kicker .spark{width:14px;height:14px;color:var(--accent-2);flex-shrink:0;}
  .hx-kicker b{color:var(--accent-2);font-weight:800;}

  /* headline — dark, last line in brand cyan (no gradient animation on light) */
  .hero-h1{color:var(--ink);font-weight:900;letter-spacing:-0.04em;font-size:clamp(42px,5.6vw,76px);}
  .hero-h1 .shine{background:none;-webkit-text-fill-color:initial;color:var(--accent-display);animation:none;}
  .hero-lead{color:var(--text-dim);}
  .hero-note{color:var(--text-faint);}
  .hero-note b{color:var(--text);}

  /* stats row under the lead (Admiral) */
  .hero-stats{display:flex;gap:0;margin:26px 0 30px;flex-wrap:wrap;}
  .hero-stats > div{padding:0 28px 0 0;margin-right:28px;border-right:1px solid var(--border-2);}
  .hero-stats > div:last-child{border-right:none;margin-right:0;padding-right:0;}
  .hero-stats .n{display:block;font-size:clamp(26px,2.6vw,32px);font-weight:900;letter-spacing:-0.03em;color:var(--ink);line-height:1.1;}
  .hero-stats .l{display:block;margin-top:5px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);}

  /* ===== masonry reel: 3 offset columns of 9:16 cards, bleeding off top & bottom ===== */
  .reel{display:none;}
  .masonry{
    position:relative;height:640px;overflow:hidden;
    display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  }
  .masonry .col{display:flex;flex-direction:column;gap:16px;}
  .masonry .col:nth-child(1){margin-top:-70px;}
  .masonry .col:nth-child(2){margin-top:40px;}
  .masonry .col:nth-child(3){margin-top:-30px;}
  .masonry .card{
    aspect-ratio:9/16;border-radius:18px;overflow:hidden;position:relative;
    background:#fff;border:1px solid var(--border);
    box-shadow:0 18px 40px -22px rgba(15,27,42,.35);
  }
  .masonry .card video,.masonry .card img{width:100%;height:100%;object-fit:cover;display:block;}
  .masonry .card .tag-pill{
    position:absolute;left:10px;top:10px;z-index:2;
    font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    background:rgba(15,27,42,.82);color:#fff;padding:5px 8px;border-radius:100px;
  }
  /* placeholder card — swap the inner markup for a <video> when a sample exists */
  .masonry .card.is-placeholder{
    border:1px dashed rgba(10,126,164,.45);
    background:
      radial-gradient(120% 70% at 50% 0%, rgba(22,194,245,.16), transparent 60%),
      linear-gradient(180deg,#fff,var(--bg-2));
    display:flex;align-items:center;justify-content:center;text-align:center;padding:14px;
  }
  .masonry .ph-label{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);}
  .masonry .ph-sub{display:block;margin-top:5px;font-size:11px;color:var(--text-faint);}
  /* gentle drift so the wall feels alive (disabled under reduced-motion via .anim gate) */

  /* trust strip — logos go dark on light */
  .trust-strip{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
  .trust-logo,.trust-logo-google-ads,.trust-logo-google,.trust-logo-meta{filter:brightness(0) opacity(.55);}
  a.trust-logo-link:hover .trust-logo{filter:brightness(0) opacity(.9);}
  .trust-badge-pill{background:var(--bg);border-color:var(--border);color:var(--text-dim);}

  /* cards & sections */
  .pain-card,.step,.price,.seg,.pillar,.faq-item{
    background:#fff;border-color:var(--border);
    box-shadow:0 14px 34px -24px rgba(15,27,42,.28);
  }
  .pain-card:hover{border-color:var(--red);}
  .pain-card::before,.step::before,.price::before,.seg::before,.pillar::before{
    background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(22,194,245,.12), transparent 62%);
  }
  .price.featured{
    border-color:rgba(12,156,203,.55);
    background:radial-gradient(120% 80% at 50% 0%, rgba(22,194,245,.12), transparent 60%),#fff;
    box-shadow:0 30px 70px -30px rgba(12,156,203,.35);
  }
  .price-badge{background:var(--ink);color:#fff;}
  .price-amt{color:var(--ink);}
  .price-guarantee b,.hx-stat b{color:var(--ink);}
  .price-meta span{background:var(--bg);border-color:var(--border);color:var(--text-dim);}
  .step-num,.pillar .num{color:#fff;background:var(--ink);}
  .steps-line{background:linear-gradient(90deg, transparent, rgba(12,156,203,.45), transparent);}
  .faq-q{color:var(--text);}
  .faq-q .ic{background:var(--bg);border-color:var(--border);color:var(--accent-2);}
  .faq-item.open .faq-q .ic{background:rgba(22,194,245,.12);}
  .faq-item::before{background:var(--accent);}

  /* about */
  .about{background:#fff;border-color:var(--border);}
  .headshot{box-shadow:0 20px 50px -22px rgba(15,27,42,.4);}
  .about-sig{color:var(--ink);}

  /* final CTA band + footer */
  .final{background:radial-gradient(820px 520px at 50% 118%, rgba(22,194,245,.18), transparent 66%);}
  .final h2{color:var(--ink);}
  footer{background:#fff;border-top-color:var(--border);}

  /* form */
  .lead-form{background:#fff;border-color:var(--border);box-shadow:0 20px 50px -30px rgba(15,27,42,.3);}
  .lead-form input,.lead-form select,.lead-form textarea{background:#fff;border-color:var(--border-2);color:var(--text);}
  .lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{border-color:var(--accent-2);box-shadow:0 0 0 3px rgba(22,194,245,.18);}
  .lead-form select{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237A8896' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  }
  .lead-form option{color:var(--text);background:#fff;}

  /* sticky mobile bar — dark like the primary button */
  .mobile-cta-bar{background:var(--ink);color:#fff;box-shadow:0 16px 38px -10px rgba(15,27,42,.5);}

  /* responsive for the masonry */
  @media (max-width:960px){
    .masonry{height:520px;max-width:560px;}
    .hero-stats > div{padding-right:18px;margin-right:18px;}
  }
  @media (max-width:720px){
    .masonry{height:auto;overflow:visible;display:flex;gap:12px;-webkit-mask-image:none;mask-image:none;
             overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;
             margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px;-webkit-overflow-scrolling:touch;}
    .masonry .col{flex-direction:row;gap:12px;margin-top:0 !important;animation:none !important;}
    .masonry .card{flex:0 0 58vw;max-width:240px;scroll-snap-align:center;}
    .hero-stats{gap:0;margin:22px 0 26px;}
    .hero-stats > div{flex:1 1 0;min-width:0;padding-right:12px;margin-right:12px;}
    .hero-stats .n{font-size:24px;}
    .hero-stats .l{font-size:9.5px;letter-spacing:.08em;}
  }


  /* =====================================================================
     DARK HEADER BAR (Admiral) — full-width, sticky, white logo, coloured CTA
     ===================================================================== */
  .site-header{
    position:sticky;top:0;z-index:150;
    background:var(--ink);
    border-bottom:1px solid rgba(255,255,255,.06);
    box-shadow:0 10px 30px -20px rgba(15,27,42,.6);
  }
  .site-header .wrap{display:flex;align-items:center;min-height:68px;}
  .site-header .hx-nav{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0;}
  .site-header .logo img{height:34px;width:auto;display:block;}
  /* links: plain, white, no pill */
  .site-header .hx-pill{
    background:none;border:0;box-shadow:none;backdrop-filter:none;padding:0;gap:6px;
    margin-left:auto;
  }
  .site-header .hx-pill a{color:rgba(255,255,255,.82);font-weight:600;font-size:14.5px;padding:9px 13px;border-radius:9px;}
  .site-header .hx-pill a:hover{color:#fff;background:rgba(255,255,255,.08);}
  .site-header .hx-pill a[aria-current]{color:#fff;font-weight:800;}
  .site-header .hdr-cta{
    display:inline-flex;align-items:center;gap:8px;margin-left:8px;
    background:var(--accent);color:#04141C !important;font-weight:800 !important;
    padding:11px 18px !important;border-radius:11px !important;
    box-shadow:0 10px 26px -12px rgba(22,194,245,.8);transition:transform .2s var(--ease), box-shadow .2s var(--ease);
  }
  .site-header .hdr-cta:hover{background:var(--accent) !important;transform:translateY(-1px);box-shadow:0 14px 30px -12px rgba(22,194,245,.9);}
  .site-header .hdr-cta svg{width:15px;height:15px;}
  .site-header .hx-hamburger{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff;box-shadow:none;}
  .site-header .hx-hamburger:hover{background:rgba(255,255,255,.14);}
  /* mobile menu goes dark to match */
  .hx-menu{background:var(--ink);}
  .hx-close{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff;}
  .hx-menu-links a{color:#fff;border-bottom-color:rgba(255,255,255,.08);}
  .hx-menu-links a::after{border-color:rgba(255,255,255,.45);}
  .hx-menu .hx-menu-cta{background:var(--accent);color:#04141C;}
  /* hero no longer hosts the nav */
  .hx-content{padding-top:12px;}
  .hero-grid{padding-top:44px;}
  @media (max-width:900px){ .site-header .hx-pill{display:none;} }

  /* =====================================================================
     VIDEO WALL — continuous vertical marquee (site.js clones each column
     once so the loop is seamless; -50% == exactly one set of cards)
     ===================================================================== */
  .masonry .col{will-change:transform;gap:0;} /* spacing lives in .set padding so -50% == one set exactly */
  .masonry .col .set{display:flex;flex-direction:column;gap:16px;padding-bottom:16px;}
  @keyframes wallUp  {from{transform:translateY(0)}    to{transform:translateY(-50%)}}
  @keyframes wallDown{from{transform:translateY(-50%)} to{transform:translateY(0)}}
  .anim .masonry .col:nth-child(1){animation:wallUp   14s linear infinite;}
  .anim .masonry .col:nth-child(2){animation:wallDown 17s linear infinite;}
  .anim .masonry .col:nth-child(3){animation:wallUp   15s linear infinite;}
  .anim .masonry:hover .col{animation-play-state:paused;}
  /* the offsets now come from the loop itself — reset the static ones */
  .masonry .col:nth-child(1),.masonry .col:nth-child(2),.masonry .col:nth-child(3){margin-top:0;}
  .masonry .col:nth-child(2){transform:translateY(-50%);} /* start position for the down column when motion is off */
  @media (max-width:720px){
    .masonry .col{animation:none !important;transform:none !important;}
    .masonry .col .set{flex-direction:row;padding-bottom:0;}
    .masonry .col .set + .set{display:none;} /* no clones needed when it's a swipe row */
  }


  /* =====================================================================
     NEW SECTIONS — why AI video · platforms · proof placeholders
     ===================================================================== */

  /* Why AI video — 4 arguments */
  .why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
  .why{
    background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:28px 24px;
    box-shadow:0 14px 34px -24px rgba(15,27,42,.28);position:relative;isolation:isolate;
  }
  .why .ic{
    width:42px;height:42px;border-radius:12px;margin-bottom:16px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(22,194,245,.12);color:var(--accent-2);
  }
  .why .ic svg{width:20px;height:20px;}
  /* reused (cyan icon chip) for the portfolio category cards */
  .pain-card > .ic{width:42px;height:42px;border-radius:12px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;background:rgba(22,194,245,.12);color:var(--accent-2);}
  .pain-card > .ic svg{width:20px;height:20px;}
  .why h3{font-size:18px;font-weight:800;letter-spacing:-0.015em;margin:0 0 8px;}
  .why p{color:var(--text-dim);font-size:14.5px;line-height:1.6;margin:0;}

  /* Platforms — two large cards */
  .platforms{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
  .platform{
    background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:34px 32px;
    box-shadow:0 14px 34px -24px rgba(15,27,42,.28);position:relative;isolation:isolate;
    display:flex;flex-direction:column;gap:14px;
  }
  .platform .head{display:flex;align-items:center;gap:14px;}
  .platform .mark{
    width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;
    background:var(--ink);color:#fff;flex-shrink:0;
  }
  .platform .mark svg{width:24px;height:24px;}
  .platform h3{font-size:22px;font-weight:800;letter-spacing:-0.02em;margin:0;}
  .platform .sub{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin-top:2px;}
  .platform p{color:var(--text-dim);font-size:15px;line-height:1.6;margin:0;}
  .platform ul{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;}
  .platform li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;color:var(--text);}
  .platform li svg{width:16px;height:16px;color:var(--accent);flex-shrink:0;margin-top:2px;}

  /* Client logos strip (hidden until real) */
  .logos-label{text-align:center;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);margin:0 0 22px;}
  .logos-row{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;align-items:center;}
  .logo-slot{
    height:64px;border-radius:12px;display:flex;align-items:center;justify-content:center;
    background:#fff;border:1px solid var(--border);
  }
  .logo-slot img{max-height:30px;max-width:80%;filter:grayscale(1) opacity(.7);}
  .logo-slot.is-placeholder{border-style:dashed;border-color:rgba(10,126,164,.4);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);}

  /* Case studies (hidden until real) */
  .cases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .case{
    background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:30px 28px;
    box-shadow:0 14px 34px -24px rgba(15,27,42,.28);display:flex;flex-direction:column;gap:10px;
  }
  .case .stat{font-size:clamp(34px,3.4vw,44px);font-weight:900;letter-spacing:-0.04em;color:var(--accent-2);line-height:1;}
  .case .what{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);}
  .case h3{font-size:18px;font-weight:800;margin:6px 0 0;letter-spacing:-0.015em;}
  .case p{color:var(--text-dim);font-size:14.5px;line-height:1.6;margin:0;}
  .case.is-placeholder{border-style:dashed;border-color:rgba(10,126,164,.4);}

  /* Testimonials (hidden until real) */
  .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .quote{
    background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:30px 28px;
    box-shadow:0 14px 34px -24px rgba(15,27,42,.28);display:flex;flex-direction:column;gap:16px;
  }
  .quote blockquote{margin:0;font-size:16px;line-height:1.65;color:var(--text);}
  .quote blockquote::before{content:'\201C';color:var(--accent);font-size:40px;line-height:0;vertical-align:-14px;margin-right:4px;font-weight:900;}
  .quote .who{display:flex;align-items:center;gap:12px;margin-top:auto;}
  .quote .who .avatar{width:40px;height:40px;border-radius:50%;background:var(--bg-2);border:1px solid var(--border);flex-shrink:0;}
  .quote .who b{display:block;font-size:14px;color:var(--ink);}
  .quote .who span{display:block;font-size:12.5px;color:var(--text-faint);}
  .quote.is-placeholder{border-style:dashed;border-color:rgba(10,126,164,.4);}

  @media (max-width:960px){
    .why-grid{grid-template-columns:1fr 1fr;}
    .cases,.quotes{grid-template-columns:1fr;}
    .logos-row{grid-template-columns:repeat(3,1fr);}
  }
  @media (max-width:720px){
    .why-grid,.platforms{grid-template-columns:1fr;}
    .logos-row{grid-template-columns:repeat(2,1fr);}
  }

  /* =====================================================================
     HERO RIBBON, SPECS, FORMAT LIBRARY, VENDOR COMPARISON
     Appended 2026-09-24. These are the last rules in the file, so they win
     the cascade over the earlier dark-theme and light-override blocks.
     Brand tokens in :root are untouched on purpose.
     ===================================================================== */

  /* --- hero: copy is now full width, the work sits under it --- */
  .hx-hero .hx-content > .hero-copy{
    max-width:860px;margin:0 auto;text-align:center;
    padding:52px 0 40px;
  }
  .hx-hero .hx-content > .hero-copy .hero-lead{margin-left:auto;margin-right:auto;max-width:660px;}
  .hx-hero .hx-content > .hero-copy .hero-stats{justify-content:center;}
  /* four stats now, so tighten the dividers to keep them on one line */
  .hx-hero .hx-content > .hero-copy .hero-stats > div{padding-right:20px;margin-right:20px;}
  .hx-hero .hx-content > .hero-copy .hero-stats > div:last-child{padding-right:0;margin-right:0;}
  .hx-hero .hx-content > .hero-copy .hero-ctas{justify-content:center;}
  .hx-hero .hx-content > .hero-copy .hero-note{max-width:560px;margin-left:auto;margin-right:auto;}

  /* --- the ribbon itself: one continuous horizontal marquee --- */
  .hero-ribbon{padding-bottom:64px;}
  .ribbon-label{
    text-align:center;margin:0 0 18px;
    font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);
  }
  .ribbon-viewport{
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  }
  .ribbon-track{display:flex;width:max-content;}
  .ribbon-set{display:flex;gap:16px;padding-right:16px;}
  @keyframes ribbonSlide{from{transform:translateX(0)} to{transform:translateX(-50%)}}
  .anim .ribbon-track{animation:ribbonSlide 64s linear infinite;}
  .anim .ribbon-viewport:hover .ribbon-track{animation-play-state:paused;}

  .rb{
    position:relative;margin:0;height:330px;flex:0 0 auto;
    border-radius:18px;overflow:hidden;background:#fff;
    border:1px solid var(--border);
    box-shadow:0 18px 40px -22px rgba(15,27,42,.35);
  }
  .rb.r-916{aspect-ratio:9/16;}
  .rb.r-34{aspect-ratio:3/4;}
  .rb.r-11{aspect-ratio:1/1;}
  .rb video,.rb img{width:100%;height:100%;object-fit:cover;display:block;}
  .rb figcaption{
    position:absolute;left:10px;bottom:10px;right:10px;z-index:2;
    display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  }
  .rb figcaption b,.rb figcaption span{
    font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    padding:5px 8px;border-radius:100px;line-height:1;
  }
  .rb figcaption b{background:rgba(15,27,42,.86);color:#fff;}
  .rb figcaption span{background:rgba(22,194,245,.92);color:#04141C;}

  /* --- "Live in two weeks" as the payoff of the four steps --- */
  .how-outcome{
    margin:36px auto 0;max-width:680px;text-align:center;
    font-size:16px;line-height:1.6;color:var(--text-dim);
  }
  .how-outcome b{color:var(--ink);font-weight:800;}

  /* --- demo / client label on each portfolio piece --- */
  .work{position:relative;}
  .work-pill{
    position:absolute;left:10px;top:10px;z-index:2;
    font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    background:rgba(15,27,42,.86);color:#fff;padding:5px 8px;border-radius:100px;
  }

  /* --- see-what-you-get disclosure above the plans --- */
  .specs{
    max-width:820px;margin:0 auto 34px;background:#fff;
    border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
    box-shadow:0 14px 34px -24px rgba(15,27,42,.28);
  }
  .specs-q{
    width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
    background:none;border:0;cursor:pointer;text-align:left;padding:22px 24px;
    font-family:inherit;font-size:15px;color:var(--text-dim);
  }
  .specs-q b{display:block;font-size:17px;font-weight:800;letter-spacing:-0.015em;color:var(--ink);margin-bottom:3px;}
  .specs-q .ic{
    width:30px;height:30px;border-radius:50%;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:var(--bg-2);border:1px solid var(--border);color:var(--accent-2);
    transition:transform .3s ease;
  }
  .specs-q .ic svg{width:15px;height:15px;}
  .specs.open .specs-q .ic{transform:rotate(45deg);}
  .specs-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
  .specs-a-in{padding:0 24px 24px;}
  .specs-list{margin:0;display:grid;gap:0;border-top:1px solid var(--border);}
  .specs-list > div{
    display:grid;grid-template-columns:180px 1fr;gap:18px;
    padding:14px 0;border-bottom:1px solid var(--border);
  }
  .specs-list dt{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);}
  .specs-list dd{margin:0;font-size:14.5px;line-height:1.6;color:var(--text);}
  .price-amt small{
    display:block;margin-top:8px;font-size:11.5px;font-weight:700;
    letter-spacing:.06em;text-transform:uppercase;color:var(--accent-2);
  }

  /* --- angle & format library --- */
  .fmt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
  .fmt{
    background:#fff;border:1px solid var(--border);border-radius:var(--r);
    padding:22px 20px;display:flex;flex-direction:column;gap:7px;
    box-shadow:0 14px 34px -26px rgba(15,27,42,.28);
  }
  .fmt.has-img{padding:0;overflow:hidden;}
  .fmt-thumb{aspect-ratio:4/5;background:var(--bg-2);border-bottom:1px solid var(--border);}
  /* text-only cards share a row with the illustrated ones, so centre them */
  .fmt:not(.has-img){justify-content:center;}
  .fmt-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .fmt.has-img .fmt-n{margin:20px 20px 0;}
  .fmt.has-img h3{margin-left:20px;margin-right:20px;}
  .fmt.has-img p{margin:0 20px 22px;}
  .fmt-n{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--accent-2);}
  .fmt h3{font-size:16.5px;font-weight:800;letter-spacing:-0.015em;margin:0;}
  .fmt p{color:var(--text-dim);font-size:14px;line-height:1.55;margin:0;}

  /* --- three vendors vs one team --- */
  .compare{
    max-width:920px;margin:0 auto;background:#fff;
    border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
    box-shadow:0 14px 34px -24px rgba(15,27,42,.28);
  }
  .compare-row{display:grid;grid-template-columns:1.15fr 1fr 1fr;align-items:center;}
  .compare-row + .compare-row{border-top:1px solid var(--border);}
  .compare-row > div{padding:16px 20px;font-size:14.5px;line-height:1.5;}
  .compare-row .dim{font-weight:700;color:var(--ink);}
  .compare-row .trad{color:var(--text-faint);}
  .compare-row .aud{color:var(--ink);font-weight:600;background:rgba(22,194,245,.07);}
  .compare-head > div{
    font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
    color:var(--text-faint);padding-top:18px;padding-bottom:18px;
  }
  .compare-head .aud{color:var(--accent-2);}

  @media (max-width:1000px){
    .fmt-grid{grid-template-columns:repeat(3,1fr);}
  }
  @media (max-width:820px){
    .hx-hero .hx-content > .hero-copy{padding:36px 0 30px;text-align:left;}
    .hx-hero .hx-content > .hero-copy .hero-stats,.hx-hero .hx-content > .hero-copy .hero-ctas{justify-content:flex-start;}
    .hx-hero .hx-content > .hero-copy .hero-lead,.hx-hero .hx-content > .hero-copy .hero-note{margin-left:0;}
    .fmt-grid{grid-template-columns:repeat(2,1fr);}
    .specs-list > div{grid-template-columns:1fr;gap:5px;}
    .rb{height:240px;}
    .hero-ribbon{padding-bottom:44px;}
    .compare-row{grid-template-columns:1fr;}
    .compare-row > div{padding:10px 18px;}
    .compare-row .dim{padding-top:16px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);}
    .compare-row .trad::before{content:"Usual: ";font-weight:700;color:var(--text-faint);}
    .compare-row .trad{color:var(--text);}
    .compare-row .aud::before{content:"Audax: ";font-weight:800;color:var(--accent-2);}
    .compare-row .aud{padding-bottom:16px;}
    .compare-head{display:none;}
  }
  @media (max-width:560px){
    .fmt-grid{grid-template-columns:1fr 1fr;}
    .fmt{padding:16px 14px;}
    .fmt.has-img .fmt-n{margin:14px 14px 0;}
    .fmt.has-img h3{margin-left:14px;margin-right:14px;}
    .fmt.has-img p{margin:0 14px 16px;}
  }

  /* reduced motion: the ribbon freezes and becomes a plain swipe row */
  @media (prefers-reduced-motion: reduce){
    .ribbon-track{animation:none !important;}
    .ribbon-viewport{overflow-x:auto;-webkit-overflow-scrolling:touch;}
    .ribbon-track .ribbon-set + .ribbon-set{display:none;}
  }

  /* four hero stats do not fit one phone row, so pair them 2x2 */
  @media (max-width:560px){
    .hx-hero .hx-content > .hero-copy .hero-stats{
      display:grid;grid-template-columns:1fr 1fr;gap:20px 0;margin:22px 0 26px;
    }
    .hx-hero .hx-content > .hero-copy .hero-stats > div{
      flex:none;min-width:0;padding:0 14px 0 0;margin:0;
      border-right:1px solid var(--border-2);
    }
    .hx-hero .hx-content > .hero-copy .hero-stats > div:nth-child(2n){border-right:none;padding-left:14px;}
    .hx-hero .hx-content > .hero-copy .hero-stats .n{font-size:21px;}
    .hx-hero .hx-content > .hero-copy .hero-stats .l{font-size:9.5px;letter-spacing:.07em;}
  }

  /* =====================================================================
     AUDAX VISUAL LANGUAGE — appended 2026-09-25, last block wins.
     The isotipo is built from hard diagonals and a chevron "x". None of that
     was expressed in the layout, which is what made the page read as a
     generic template: one soft white card repeated for every section.
     Four moves, all derived from the mark, none of them touching :root:
       1. chevron + diagonal corner notch as the recurring motif
       2. ONE dark editorial band in the body (the brand's real black)
       3. oversized tabular numerals, echoing the superscript in the mark
       4. asymmetric, left-anchored section heads on why / how / formats,
          so the centred rhythm is a deliberate contrast instead of the default
     ===================================================================== */

  /* --- 1. the chevron, straight off the isotipo, as the eyebrow mark --- */
  .tag::before{
    content:"";flex:0 0 auto;width:13px;height:10px;margin-right:2px;
    background:var(--accent);
    clip-path:polygon(0 0, 52% 0, 100% 50%, 52% 100%, 0 100%, 48% 50%);
  }
  /* the diagonal corner cut, same angle, on the surfaces that carry weight */
  .notch{position:relative;overflow:hidden;}
  .notch::before{
    content:"";position:absolute;top:0;right:0;width:34px;height:34px;z-index:3;
    background:var(--accent);
    clip-path:polygon(100% 0, 100% 100%, 0 0);
  }

  /* --- 2. the dark band --- */
  .band{
    background:var(--ink);
    padding:clamp(88px,9vw,132px) 24px;
    clip-path:polygon(0 2.6vw, 100% 0, 100% 100%, 0 calc(100% - 2.6vw));
  }
  .band .section-head h2{color:#fff;}
  .band .section-desc{color:rgba(255,255,255,.60);}
  .band .tag{color:var(--accent);}
  .band .pillar{
    background:rgba(255,255,255,.045);
    border-color:rgba(255,255,255,.13);
    box-shadow:none;
  }
  .band .pillar h3{color:#fff;}
  .band .pillar p{color:rgba(255,255,255,.64);}
  .band .pillar::after{
    content:"";position:absolute;left:0;top:0;width:100%;height:1px;
    background:linear-gradient(90deg,var(--accent),transparent 65%);opacity:.5;
  }

  /* --- 3. numerals as an index, not a chip --- */
  .pillar .num,
  .step-num{
    width:auto;height:auto;border-radius:0;background:none;box-shadow:none;
    display:block;margin:0 0 14px;padding:0;
    font-size:clamp(34px,3.4vw,44px);font-weight:900;line-height:.9;
    letter-spacing:-0.05em;font-variant-numeric:tabular-nums;
    color:transparent;-webkit-text-stroke:1.5px var(--accent-2);
  }
  .band .pillar .num{-webkit-text-stroke-color:var(--accent);}
  .step-top{align-items:flex-start;gap:16px;}
  .step-top .step-num{margin-bottom:0;}
  .step-ic{margin-left:auto;opacity:.5;}

  /* --- 4. left-anchored section heads, sticky while the content scrolls --- */
  .section-split > .wrap{
    display:grid;grid-template-columns:minmax(0,390px) minmax(0,1fr);
    gap:clamp(30px,4vw,60px);align-items:start;
  }
  .section-split .section-head{
    text-align:left;max-width:none;margin:0;
    position:sticky;top:104px;
  }
  .section-split .section-head h2{font-size:clamp(26px,2.5vw,35px);line-height:1.12;}
  .section-split .section-head .tag{justify-content:flex-start;}
  .section-split .why-grid{grid-template-columns:1fr 1fr;}
  .section-split .fmt-grid{grid-template-columns:repeat(3,1fr);}
  .section-split .steps{grid-template-columns:1fr 1fr;}
  .section-split .steps-line{display:none;}
  .section-split .how-outcome{margin-left:0;text-align:left;max-width:none;}
  .section-split .pricing-note{text-align:left;}

  @media (max-width:980px){
    .section-split > .wrap{grid-template-columns:1fr;gap:30px;}
    .section-split .section-head{position:static;margin-bottom:6px;}
    .section-split .fmt-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:720px){
    .band{clip-path:polygon(0 4.5vw, 100% 0, 100% 100%, 0 calc(100% - 4.5vw));}
    .section-split .why-grid,
    .section-split .steps{grid-template-columns:1fr;}
    .notch::before{width:26px;height:26px;}
  }
  @media (prefers-reduced-motion: reduce){
    .section-split .section-head{position:static;}
  }

  /* second pill on the video-wall cards (category + type), same system as the
     home ribbon so the two pages read as one site */
  .masonry .card .tag-type{
    position:absolute;right:10px;top:10px;z-index:2;
    font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    background:rgba(22,194,245,.92);color:#04141C;padding:5px 8px;border-radius:100px;
  }
  .wall-label{
    text-align:center;margin:0 0 14px;
    font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
    color:var(--text-faint);
  }

  /* subpage heroes keep the two-column grid, so their stat row has less width
     than the home page's. Tighten the dividers so three stats stay on one line. */
  .hero-grid .hero-stats > div{padding-right:18px;margin-right:18px;}
  .hero-grid .hero-stats > div:last-child{padding-right:0;margin-right:0;}
  /* home-services has no video wall (no real trade creative), so its hero is one column */
  .hero-grid.is-single{grid-template-columns:1fr;max-width:820px;}

  /* =====================================================================
     VOZ TIPOGRAFICA — 2026-09-25
     El sitio usaba Inter para todo, que es la fuente por defecto de
     cualquier plantilla. Estas son las mismas familias con las que el
     ad-studio produce los anuncios reales de Audax, asi que el sitio y
     las piezas hablan por fin con la misma voz.
       Archivo Black -> titulares y numerales (grotesca ancha y pesada)
       Inter            -> cuerpo, UI, todo lo que se lee largo
     Los tokens van en body, NO en :root, para no tocar la paleta.
     ===================================================================== */
  body{
    --f-display:'Archivo Black', 'Helvetica Neue', Impact, sans-serif;
    --f-ui:'Inter', system-ui, -apple-system, sans-serif;
  }

  /* titulares: Archivo Black trae un solo peso (400) y ya es pesada de por si,
     asi que no se toca el weight. Es ancha, por eso el tamano baja respecto de
     una condensada. El acento de la segunda linea es la misma familia en cyan. */
  .hero-h1,
  .section-head h2,
  .final h2,
  .about h2{
    font-family:var(--f-display);
    font-weight:400;
    letter-spacing:-0.005em;
    text-transform:none;
  }
  .hero-h1{
    font-size:clamp(38px,5.2vw,72px);
    line-height:1.02;
    letter-spacing:-0.03em;
  }
  .section-head h2{
    font-size:clamp(26px,3vw,42px);
    line-height:1.08;
    letter-spacing:-0.025em;
  }
  .section-split .section-head h2{font-size:clamp(24px,2.5vw,34px);line-height:1.1;}

  /* el acento del titular deja de ser "lo mismo en cyan" y pasa a ser
     un cambio de familia: serif italica. Es el golpe de caracter. */
  .hero-h1 .shine{
    font-family:inherit;
    font-weight:inherit;
    font-style:normal;
    letter-spacing:inherit;
    color:var(--accent-display);
    text-transform:none;
  }

  /* numerales en la misma display, tabulares, para que el indice se lea como indice */
  .pillar .num,
  .step-num,
  .hero-stats .n,
  .price-amt,
  .case .stat{
    font-family:var(--f-display);
    font-weight:400;
    letter-spacing:0;
  }
  .hero-stats .n{font-size:clamp(26px,2.5vw,33px);letter-spacing:-0.02em;}
  .pillar .num,.step-num{-webkit-text-stroke-width:1.2px;}

  /* el resto sigue en Inter, explicito para que nadie lo herede por error */
  body,.hero-lead,.section-desc,p,li,dd,dt,input,select,textarea,.btn,.tag,.faq-q{
    font-family:var(--f-ui);
  }

  /* =====================================================================
     HERO: TIRA DE TRABAJO — 2026-09-27
     Fila alineada con scroll continuo, al estilo de las galerias de producto
     del rubro: etiqueta de tipo arriba a la izquierda, categoria al pie, y
     las piezas de los extremos sangrando fuera de pantalla.
     ===================================================================== */
  .hx-hero{position:relative;overflow:hidden;}
  .hx-hero .hx-content{position:relative;z-index:2;}
  .hx-hero .hx-content > .hero-copy{padding:64px 0 46px;}

  .strip{padding-bottom:70px;}
  .strip-label{
    text-align:center;margin:0 0 20px;
    font-family:var(--f-ui);
    font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
    color:var(--text-faint);
  }
  .strip-viewport{
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  }
  .strip-track{display:flex;width:max-content;}
  .strip-set{display:flex;gap:14px;padding-right:14px;}
  @keyframes stripSlide{from{transform:translateX(0)} to{transform:translateX(-50%)}}
  .anim .strip-track{animation:stripSlide 68s linear infinite;}
  .anim .strip-viewport:hover .strip-track{animation-play-state:paused;}

  .sc{
    position:relative;margin:0;height:340px;flex:0 0 auto;
    border-radius:16px;overflow:hidden;background:#fff;
    border:1px solid var(--border);
    box-shadow:0 20px 44px -26px rgba(15,27,42,.4);
  }
  .sc.r-916{aspect-ratio:9/16;}
  .sc.r-34 {aspect-ratio:3/4;}
  .sc.r-11 {aspect-ratio:1/1;}
  .sc.r-169{aspect-ratio:16/9;}
  .sc video,.sc img{width:100%;height:100%;object-fit:cover;display:block;}

  /* etiqueta de tipo arriba a la izquierda, en monoespaciada */
  .sc-type{
    position:absolute;left:9px;top:9px;z-index:2;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:10px;font-weight:600;letter-spacing:.02em;
    background:rgba(15,27,42,.82);color:#fff;
    padding:4px 7px;border-radius:6px;
    backdrop-filter:blur(4px);
  }
  /* categoria al pie, sobre un degrade para que se lea sobre cualquier frame */
  .sc figcaption{
    position:absolute;left:0;right:0;bottom:0;z-index:2;
    padding:22px 11px 9px;
    font-family:var(--f-ui);
    font-size:11px;font-weight:700;letter-spacing:.04em;color:#fff;
    background:linear-gradient(180deg,transparent,rgba(15,27,42,.72));
  }

  @media (max-width:820px){
    .hx-hero .hx-content > .hero-copy{padding:36px 0 30px;}
    .sc{height:236px;}
    .strip{padding-bottom:44px;}
  }
  @media (prefers-reduced-motion: reduce){
    .strip-track{animation:none !important;}
    .strip-viewport{overflow-x:auto;-webkit-overflow-scrolling:touch;}
    .strip-track .strip-set + .strip-set{display:none;}
  }

  /* =====================================================================
     FAMILIAS DE ANGULO + STATS INTERACTIVOS — 2026-09-25
     La seccion de familias va como LISTA con reglas, no como tarjetas:
     el sitio ya tenia cinco grillas de tarjetas blancas identicas y esa
     repeticion era buena parte de la sensacion de plantilla.
     ===================================================================== */
  .fam-list{display:flex;flex-direction:column;border-top:1px solid var(--border);}
  .fam{
    display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);
    gap:clamp(16px,3vw,44px);align-items:baseline;
    padding:26px 0;border-bottom:1px solid var(--border);
    position:relative;
  }
  .fam::before{
    content:"";position:absolute;left:0;top:-1px;width:0;height:1px;
    background:var(--accent);transition:width .45s cubic-bezier(.2,.7,.3,1);
  }
  .fam:hover::before{width:100%;}
  .fam h3{
    font-family:var(--f-display);font-weight:400;
    font-size:clamp(19px,1.9vw,25px);line-height:1.05;letter-spacing:-0.025em;
    margin:0;color:var(--ink);
  }
  .fam p{margin:0;color:var(--text-dim);font-size:15px;line-height:1.62;}
  @media (max-width:640px){
    .fam{grid-template-columns:1fr;gap:8px;padding:20px 0;}
  }

  /* --- stats del hero: contador + detalle al hover --- */
  .hero-stats .stat{position:relative;cursor:default;}
  .hero-stats .stat .l{transition:opacity .22s ease;}
  .stat-detail{
    position:absolute;left:0;top:100%;margin-top:6px;z-index:5;
    font-family:var(--f-ui);
    font-size:11px;font-weight:600;line-height:1.35;color:var(--accent-2);
    opacity:0;transform:translateY(-3px);
    transition:opacity .22s ease, transform .22s ease;
    pointer-events:none;max-width:210px;
  }
  .hero-stats .stat:hover .stat-detail,
  .hero-stats .stat:focus-within .stat-detail{opacity:1;transform:translateY(0);}
  .hero-stats .stat:hover .l{opacity:.35;}
  /* el numero no debe saltar de ancho mientras cuenta */
  .hero-stats .n{font-variant-numeric:tabular-nums;}
  @media (max-width:820px){
    .stat-detail{display:none;}   /* en touch no hay hover, no tiene sentido */
  }

  /* =====================================================================
     FOUNDER — rehecho 2026-09-27
     Antes: la foto quedaba centrada verticalmente contra un bloque de texto
     mucho mas alto, asi que flotaba en el medio con un hueco vacio debajo, y
     el titular ocupaba cuatro lineas en display. Ahora la columna de la foto
     se alinea arriba y lleva la firma pegada, y el titular es corto.
     ===================================================================== */
  .about{
    grid-template-columns:minmax(0,220px) minmax(0,1fr);
    align-items:start;
    gap:clamp(24px,4vw,52px);
  }
  .about-media{display:flex;flex-direction:column;gap:16px;align-items:flex-start;}
  .about .headshot{width:100%;max-width:220px;height:auto;aspect-ratio:4/5;border-radius:16px;margin:0;}
  .about .headshot-img{width:100%;height:100%;object-fit:cover;object-position:center 22%;border-radius:16px;}
  .about .about-sig{margin-top:0;font-size:15px;}
  .about .about-sig span{font-size:13px;}

  .about-body h2{
    font-size:clamp(24px,2.8vw,38px);
    line-height:1.06;
    letter-spacing:-0.025em;
    margin-bottom:16px;
    max-width:17ch;
  }
  .about-body p{font-size:16px;line-height:1.72;}

  /* credenciales verificables: es la unica prueba real que hay hasta que
     exista un caso de cliente, asi que cierra la seccion en vez de la firma */
  .about-proof{
    list-style:none;margin:26px 0 0;padding:20px 0 0;
    border-top:1px solid var(--border);
    display:flex;flex-wrap:wrap;gap:0;
  }
  .about-proof li{
    padding-right:26px;margin-right:26px;
    border-right:1px solid var(--border);
  }
  .about-proof li:last-child{border-right:none;margin-right:0;padding-right:0;}
  .about-proof b{
    display:block;font-family:var(--f-display);font-weight:400;
    font-size:22px;letter-spacing:-0.02em;color:var(--ink);line-height:1;
  }
  .about-proof span{
    display:block;margin-top:5px;
    font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--text-faint);
  }

  @media (max-width:760px){
    .about{grid-template-columns:1fr;gap:22px;}
    .about-media{flex-direction:row;align-items:center;gap:14px;}
    .about .headshot{width:96px;max-width:96px;flex:0 0 96px;}
    .about-body h2{max-width:none;}
    .about-proof li{padding-right:18px;margin-right:18px;}
  }

  /* la etiqueta de la tira paso de arriba a abajo: ya no compite con el titular */
  .strip-label{margin:18px 0 0;}

  /* el titular del hero son tres lineas fijas con <br>: si la mas larga se parte
     se pierde el ritmo de tres tiempos, asi que la caja va mas ancha y el cuerpo
     un punto mas chico */
  .hx-hero .hx-content > .hero-copy{max-width:980px;}
  .hero-h1{font-size:clamp(34px,4.8vw,66px);}

  /* la fila de credenciales quedaba pegada al borde inferior de la tarjeta */
  .about{padding-bottom:clamp(34px,4vw,46px);}
  .about-proof{margin-bottom:0;}

  /* =====================================================================
     PULIDO DE LA MITAD DE ABAJO — 2026-09-27
     Tres problemas distintos:
       1. BUG de layout: en las secciones partidas, cualquier TERCER hijo del
          .wrap caia en la columna 1 de la fila 2 y quedaba huerfano abajo a
          la izquierda, con 94px de hueco. Pasa a la columna del contenido.
       2. Archivo Black se veia dura en tamanos chicos. Se reserva para los
          momentos grandes (h1, h2, numerales) y lo chico vuelve a Inter.
       3. Interlineado y cuerpo apretados para una pagina de 13.000px.
     ===================================================================== */

  /* --- 1. el huerfano --- */
  .section-split > .wrap > .how-outcome,
  .section-split > .wrap > .pricing-note{
    grid-column:2;
    margin-top:26px;
  }

  /* --- 2. Archivo Black solo en los momentos grandes --- */
  .fam h3{
    font-family:var(--f-ui);
    font-weight:800;
    font-size:clamp(17px,1.6vw,20px);
    letter-spacing:-0.015em;
    line-height:1.25;
  }
  .about-proof b{
    font-family:var(--f-ui);
    font-weight:800;
    font-size:20px;
    letter-spacing:-0.015em;
  }
  /* el tracking muy cerrado es parte de lo que la hace sentir dura */
  .section-head h2,
  .about-body h2{letter-spacing:-0.015em;}
  .hero-h1{letter-spacing:-0.02em;}

  /* --- 3. aire para leer --- */
  .section-desc{line-height:1.72;}
  .why p,
  .step p,
  .fam p,
  .platform p,
  .pillar p,
  .seg p{font-size:15.5px;line-height:1.72;}
  .work .meta span{line-height:1.5;}
  .specs-list dd{line-height:1.7;}
  .faq-a-in{line-height:1.75;}

  /* --- ritmo entre secciones: 78px era corto para una pagina tan larga --- */
  .section-pad{padding-top:94px;padding-bottom:94px;}
  .section-head{margin-bottom:52px;}
  .section-split .section-head{margin-bottom:0;}

  @media (max-width:980px){
    /* apilado: el huerfano vuelve a columna unica */
    .section-split > .wrap > .how-outcome,
    .section-split > .wrap > .pricing-note{grid-column:1;margin-top:20px;}
  }
  @media (max-width:720px){
    .section-pad{padding-top:64px;padding-bottom:64px;}
    .section-head{margin-bottom:36px;}
  }

  /* el row-gap del grid partido se sumaba al margen del pie de seccion y daba
     84px de separacion; el gap horizontal se mantiene, el vertical lo controla
     el propio elemento */
  .section-split > .wrap{row-gap:0;}
  .section-split > .wrap > .how-outcome,
  .section-split > .wrap > .pricing-note{margin-top:30px;}

  /* =====================================================================
     RITMO DE SECCION — 2026-09-27
     Alineado con como marcan y espacian las secciones pynk.studio,
     99ads.com y 225media.com. Los tres coinciden en tres cosas que este
     sitio no hacia: la etiqueta de seccion es texto pelado (sin pastilla,
     sin borde, sin icono), el tracking es mucho mas ancho, y respiran
     entre 100 y 140px por seccion contra los 94 de aca.
     ===================================================================== */

  /* --- A. la etiqueta deja de ser pastilla y pasa a ser texto --- */
  .tag{
    display:block;
    padding:0;
    border:0;
    border-radius:0;
    background:none;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:0.14em;      /* ~1.6px, el tracking de 225media */
    margin-bottom:14px;          /* C */
  }
  /* el chevron era un motivo propio, pero ninguna de las tres pone icono
     ahi y sumaba ruido repetido 15 veces. El motivo diagonal sigue vivo
     en la muesca de las tarjetas y en la banda oscura. */
  .tag::before{content:none;}
  .section-split .section-head .tag{justify-content:flex-start;}

  /* --- B. aire entre secciones: 94 -> 120 --- */
  .section-pad{padding-top:120px;padding-bottom:120px;}
  .band{padding-top:clamp(104px,10vw,140px);padding-bottom:clamp(104px,10vw,140px);}

  /* --- C. separacion etiqueta -> titular -> contenido --- */
  .section-head{margin-bottom:56px;}
  .section-split .section-head{margin-bottom:0;}
  .about-body .tag{margin-bottom:14px;}

  /* --- D. Archivo Black queda solo para el hero y los numerales --- */
  .section-head h2,
  .final h2,
  .about h2,
  .about-body h2{
    font-family:var(--f-ui);
    font-weight:800;
    letter-spacing:-0.03em;
  }
  .section-head h2{font-size:clamp(28px,3.2vw,44px);line-height:1.1;}
  .section-split .section-head h2{font-size:clamp(25px,2.6vw,36px);line-height:1.14;}
  .about-body h2{font-size:clamp(25px,2.9vw,38px);line-height:1.12;}
  /* el hero y los numerales NO cambian: siguen en Archivo Black */

  @media (max-width:720px){
    .section-pad{padding-top:64px;padding-bottom:64px;}
    .section-head{margin-bottom:34px;}
  }

  /* BUG preexistente: `.hero-copy .hx-kicker` fijaba display:inline-block con mas
     especificidad que el `.hx-kicker{display:inline-flex}` del bloque light, asi
     que la chispa y el texto se apilaban en dos renglones (53px de alto en vez
     de 33). Mismo selector, mas abajo, para ganar por orden. */
  .hero-copy .hx-kicker{display:inline-flex;align-items:center;}

  /* el <small> del precio heredaba Archivo Black a 11.5px: mismo problema de
     dureza en tamano chico que los subtitulos de familia */
  .price-amt small{font-family:var(--f-ui);font-weight:700;letter-spacing:.06em;}

  /* =====================================================================
     CTA POR SECCION + FUSIONES — 2026-09-29
     Patron tomado de madgicx.com: cada seccion grande cierra con su propia
     accion en verbo, en vez de dejar toda la conversion para el final.
     ===================================================================== */
  .section-cta{margin-top:44px;display:flex;justify-content:center;}
  .section-split > .wrap > .section-cta{grid-column:2;justify-content:flex-start;margin-top:34px;}
  .band .section-cta .btn-secondary{
    border-color:rgba(255,255,255,.28);color:#fff;background:transparent;
  }
  .band .section-cta .btn-secondary:hover{border-color:#fff;background:rgba(255,255,255,.06);}

  /* separador entre formato y familia de angulo dentro de #make */
  .make-split{
    margin:58px 0 26px;padding-top:34px;border-top:1px solid var(--border);
    display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 28px;
  }
  .make-sub{
    font-family:var(--f-ui);font-weight:800;font-size:clamp(19px,2vw,24px);
    letter-spacing:-0.02em;margin:0;color:var(--ink);
  }
  .make-note{margin:0;font-size:14.5px;line-height:1.6;color:var(--text-dim);flex:1 1 320px;}

  /* fila de cierre de la comparativa: es la conclusion, no una dimension mas */
  .compare-row.compare-bottom{
    border-top:2px solid var(--border-2);
    background:rgba(22,194,245,.04);
  }
  .compare-bottom > div{padding-top:20px;padding-bottom:20px;font-weight:600;}
  .compare-bottom .dim{font-weight:800;}
  .compare-bottom .aud{color:var(--accent-2);font-weight:800;}

  @media (max-width:820px){
    .section-cta,.section-split > .wrap > .section-cta{margin-top:30px;justify-content:stretch;}
    .section-cta .btn{width:100%;justify-content:center;}
    .make-split{margin:38px 0 20px;padding-top:26px;}
  }

  /* #work entraba en dos filas de 9:16 y solo eso costaba ~500px. En una fila
     se lee igual de bien y la seccion baja de 1565 a ~1050 */
  .work-grid{grid-template-columns:repeat(5,1fr);max-width:1080px;gap:14px;}
  @media (max-width:1100px){ .work-grid{grid-template-columns:repeat(3,1fr);max-width:760px;} }
  @media (max-width:720px){ .work-grid{grid-template-columns:repeat(2,1fr);} }

  /* dentro de #make las familias van en dos columnas: apiladas costaban ~520px
     y el contenido de cada una entra comodo en media fila */
  #make .fam-list{
    display:grid;grid-template-columns:1fr 1fr;
    column-gap:44px;border-top:1px solid var(--border);
  }
  #make .fam{grid-template-columns:1fr;gap:6px;padding:22px 0;}
  #make .fam:nth-child(-n+2){border-top:0;}
  @media (max-width:820px){
    #make .fam-list{grid-template-columns:1fr;}
    #make .fam:nth-child(2){border-top:1px solid var(--border);}
  }

  /* BUG propio: el CTA de las secciones partidas va en grid-column:2, pero en
     mobile el grid colapsa a una sola columna y esa segunda columna fantasma
     empujaba la pagina a 477px (102px de overflow, tapado por el overflow-x
     del body, asi que no se veia pero rompia el ancho del menu fijo). */
  @media (max-width:980px){
    .section-split > .wrap > .section-cta{grid-column:1;justify-content:center;}
  }