:root{
    --navy:#0b2545; --navy-deep:#071a33; --navy-lift:#12325c;
    --mint:#64c6c2; --mint-bright:#7ad6d2; --teal:#09768d;
    --coral:#eb5448; --gold:#e9c36a; --slate:#4b4a5d;

    --paper:#f4f7fa; --paper-2:#ffffff;
    --ink:#0e1f33; --ink-2:#41556e; --ink-3:#6b7f96;
    --on-dark:#f2f6fb; --on-dark-2:#b8c9dd; --on-dark-3:#8ba2bd;
    --rule-d:rgba(255,255,255,.13); --rule-l:#dfe7ef;

    --display:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
    --text:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
    --page:78rem; --gut:clamp(1.25rem,4vw,2.5rem);
    --sec:clamp(4rem,9vw,7rem);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth; scroll-padding-top:4.5rem}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important; animation:none!important}}
  body{margin:0; background:var(--paper); color:var(--ink);
       font-family:var(--text); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased}
  img,svg{max-width:100%}
  a{color:var(--teal)}

  .wrap{max-width:var(--page); margin:0 auto; padding-inline:var(--gut)}
  .sec{padding-block:var(--sec)}
  .sec--dark{background:var(--navy); color:var(--on-dark)}
  .sec--deep{background:var(--navy-deep); color:var(--on-dark)}
  .sec--white{background:var(--paper-2)}

  .eyebrow{font-family:var(--display); font-weight:600; font-size:.74rem;
           letter-spacing:.16em; text-transform:uppercase; color:var(--teal); margin:0 0 .9rem}
  .sec--dark .eyebrow,.sec--deep .eyebrow{color:var(--mint)}
  h2{font-family:var(--display); font-weight:700; font-size:clamp(1.95rem,4.4vw,2.9rem);
     line-height:1.1; letter-spacing:-.02em; margin:0 0 1rem; max-width:22ch}
  h3{font-family:var(--display); font-weight:600; font-size:1.06rem; line-height:1.3;
     letter-spacing:-.005em; margin:0 0 .45rem}
  .sub{font-size:1.06rem; color:var(--ink-2); max-width:56ch; margin:0 0 2.75rem}
  .sec--dark .sub,.sec--deep .sub{color:var(--on-dark-2)}

  .top{position:sticky; top:0; z-index:60; background:rgba(11,37,69,.92);
       backdrop-filter:blur(10px); border-bottom:1px solid var(--rule-d)}
  .top .wrap{display:flex; align-items:center; gap:1.5rem; height:4.5rem}
  .brand{display:flex; align-items:center; flex:0 0 auto}
  .nav{display:flex; gap:1.6rem; margin-left:auto; align-items:center}
  .nav a{font-family:var(--display); font-weight:500; font-size:.86rem; color:var(--on-dark-2);
         text-decoration:none; white-space:nowrap}
  .nav a:hover{color:#fff}
  .btn{display:inline-flex; align-items:center; gap:.55rem; font-family:var(--display);
       font-weight:600; font-size:.92rem; text-decoration:none; border-radius:3px;
       padding:.72rem 1.25rem; border:1px solid transparent; cursor:pointer;
       transition:background .15s ease, color .15s ease, transform .15s ease}
  .btn--pri{background:var(--mint); color:#06263a}
  .btn--pri:hover{background:var(--mint-bright); transform:translateY(-1px)}
  .btn--ghost{background:transparent; color:var(--on-dark); border-color:rgba(255,255,255,.3)}
  .btn--ghost:hover{border-color:#fff; background:rgba(255,255,255,.07)}
  .btn--dark{background:var(--navy); color:#fff}
  .btn--dark:hover{background:var(--navy-lift); transform:translateY(-1px)}
  .btn:focus-visible,.nav a:focus-visible{outline:2px solid var(--mint); outline-offset:3px}
  .navtoggle{display:none; margin-left:auto; background:none; border:1px solid rgba(255,255,255,.3);
             color:#fff; border-radius:3px; padding:.5rem .7rem; font-size:.8rem; cursor:pointer}
  @media (max-width:60rem){
    .nav{display:none; position:absolute; top:4.5rem; left:0; right:0; background:var(--navy);
         flex-direction:column; align-items:stretch; gap:0; padding:.5rem var(--gut) 1.25rem;
         border-bottom:1px solid var(--rule-d)}
    .nav.open{display:flex}
    .nav a{padding:.8rem 0; border-bottom:1px solid var(--rule-d); font-size:1rem}
    .nav .btn{margin-top:1rem; justify-content:center}
    .navtoggle{display:block}
  }

  .hero{background:var(--navy); color:var(--on-dark); position:relative; overflow:hidden;
        padding-block:clamp(3.5rem,9vw,6.5rem) clamp(3.5rem,8vw,5.5rem)}
  .hero::before{content:""; position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(48rem 34rem at 82% -10%, rgba(100,198,194,.20), transparent 62%),
      radial-gradient(38rem 30rem at 4% 106%, rgba(9,118,141,.28), transparent 66%)}
  .hero .wrap{position:relative}
  .hero__strap{font-family:var(--display); font-weight:600; font-size:.8rem; letter-spacing:.18em;
                text-transform:uppercase; color:var(--mint); margin:0 0 1.1rem}
  .hero h1{font-family:var(--display); font-weight:700; margin:0 0 1.35rem;
           font-size:clamp(2.5rem,7.2vw,4.6rem); line-height:1.02; letter-spacing:-.025em; max-width:16ch}
  .hero h1 em{font-style:normal; color:var(--mint)}
  .hero__lede{font-size:clamp(1.05rem,1.9vw,1.22rem); color:var(--on-dark-2); max-width:50ch; margin:0 0 2.25rem}
  .hero__meta{display:flex; flex-wrap:wrap; gap:0 2.75rem; margin:0 0 2.5rem; padding:1.5rem 0 0;
              border-top:1px solid var(--rule-d); list-style:none}
  .hero__meta div{padding:.4rem 0}
  .hero__meta .k{font-family:var(--display); font-weight:500; font-size:.7rem;
      letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-3); margin-bottom:.3rem}
  .hero__meta .v{font-size:1.08rem; color:#fff; font-weight:500}
  .hero__cta{display:flex; flex-wrap:wrap; gap:.85rem}

  .grid{display:grid; gap:1.15rem}
  .g2{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(4,1fr)}
  @media (max-width:62rem){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:40rem){.g2,.g3,.g4{grid-template-columns:1fr}}

  .card{background:var(--paper-2); border:1px solid var(--rule-l); border-radius:5px;
        padding:1.6rem 1.5rem}
  .sec--white .card{background:var(--paper)}
  .card p{margin:0; color:var(--ink-2); font-size:.95rem}
  .card--dark{background:var(--navy); border-color:transparent; color:var(--on-dark)}
  .card--dark h3{color:#fff}
  .card--dark p{color:var(--on-dark-2)}
  .sec--dark .card,.sec--deep .card{background:rgba(255,255,255,.045); border-color:var(--rule-d); color:var(--on-dark)}
  .sec--dark .card h3,.sec--deep .card h3{color:#fff}
  .sec--dark .card p,.sec--deep .card p{color:var(--on-dark-2)}
  .card .num{font-family:var(--display); font-weight:700; font-size:.78rem; letter-spacing:.1em;
             color:var(--teal); display:block; margin-bottom:.55rem}
  .sec--dark .card .num,.sec--deep .card .num,.card--dark .num{color:var(--mint)}

  .stat{padding:1.5rem 1.4rem}
  .stat b{display:block; font-family:var(--display); font-weight:700; letter-spacing:-.02em;
          font-size:clamp(1.85rem,3.6vw,2.5rem); line-height:1.05; color:var(--mint); margin-bottom:.45rem}
  .stat span{display:block; font-size:.94rem; color:#fff; font-weight:500; margin-bottom:.5rem}
  .stat cite{display:block; font-style:normal; font-size:.74rem; color:var(--on-dark-3); line-height:1.45}

  .pull{background:var(--navy); color:#fff; border-radius:5px; padding:2rem;
        border-left:3px solid var(--mint); margin-top:2.25rem}
  .pull .eyebrow{color:var(--mint); margin-bottom:.65rem}
  .pull p{margin:0; font-family:var(--display); font-weight:600; font-size:clamp(1.1rem,2.2vw,1.45rem);
          line-height:1.35; letter-spacing:-.012em}
  .sec--dark .pull,.sec--deep .pull{background:rgba(255,255,255,.05)}

  .taglist{list-style:none; margin:.9rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem}
  .taglist li{font-size:.84rem; color:var(--ink-2); background:var(--paper);
              border:1px solid var(--rule-l); border-radius:999px; padding:.28rem .72rem}
  .sec--white .taglist li{background:var(--paper-2)}
  .sec--dark .taglist li,.sec--deep .taglist li{background:rgba(255,255,255,.06);
              border-color:var(--rule-d); color:var(--on-dark-2)}

  .checks{list-style:none; margin:.9rem 0 0; padding:0}
  .checks li{position:relative; padding-left:1.4rem; margin-bottom:.42rem; font-size:.93rem; color:var(--ink-2)}
  .checks li::before{content:""; position:absolute; left:0; top:.62em; width:.44rem; height:.44rem;
                     border-radius:50%; background:var(--mint)}
  .card--dark .checks li,.sec--dark .checks li,.sec--deep .checks li{color:var(--on-dark-2)}
  /* ---------- programme ---------- */
  .prog{display:grid; grid-template-columns:repeat(2,1fr); gap:1.15rem}
  @media (max-width:52rem){.prog{grid-template-columns:1fr}}
  .day{background:var(--paper-2); border:1px solid var(--rule-l); border-radius:5px; overflow:hidden}
  .sec--white .day{background:var(--paper)}
  .day__hd{padding:1.25rem 1.5rem; border-bottom:1px solid var(--rule-l); background:var(--navy); color:#fff}
  .day__hd b{display:block; font-family:var(--display); font-weight:700; font-size:1.25rem; letter-spacing:-.01em}
  .day__hd span{font-size:.86rem; color:var(--on-dark-2)}
  .day ol{list-style:none; margin:0; padding:.6rem 1.5rem 1.35rem}
  .day li{display:flex; gap:1rem; padding:.5rem 0; border-bottom:1px solid var(--rule-l); align-items:baseline}
  .day li:last-child{border-bottom:0}
  .day time{flex:0 0 3.6rem; font-family:var(--display); font-weight:600; font-size:.84rem; color:var(--teal)}
  .day li span{font-size:.94rem; color:var(--ink-2)}

  /* ---------- packages ---------- */
  .pkg{display:flex; flex-direction:column; padding:0; overflow:hidden}
  .pkg__top{height:6px; background:var(--navy)}
  .pkg--hero .pkg__top{background:var(--mint)}
  .pkg__body{padding:1.5rem; display:flex; flex-direction:column; flex:1}
  .pkg h3{margin-bottom:.1rem}
  .pkg .role{font-size:.82rem; color:#54687f; margin:0 0 1.1rem;
             font-family:var(--display); font-weight:500; letter-spacing:.02em}
  .pkg .size{font-family:var(--display); font-weight:700; letter-spacing:-.02em;
             font-size:2.3rem; line-height:1; color:var(--navy); margin-bottom:.15rem}
  .pkg--hero .size{color:var(--teal)}
  .pkg .size small{font-size:.95rem; font-weight:500; color:var(--ink-3); margin-left:.25rem}
  .pkg .desc{font-size:.92rem; color:var(--ink-2); margin:.9rem 0 0; flex:1}
  .pkg .tag{margin-top:1.1rem; font-size:.78rem; font-style:italic; color:var(--ink-3)}

  .pricenote{margin-top:1.5rem; background:var(--paper-2); border:1px solid var(--rule-l);
             border-left:3px solid var(--gold); border-radius:5px; padding:1.15rem 1.35rem}
  .sec--white .pricenote{background:var(--paper)}
  .pricenote p{margin:0; font-size:.94rem; color:var(--ink-2)}
  .pricenote b{color:var(--ink)}

  /* ---------- matching diagram ---------- */
  .match{display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; gap:1rem; margin-bottom:1.15rem}
  @media (max-width:52rem){.match{grid-template-columns:1fr; gap:.55rem}}
  .match .node{background:rgba(255,255,255,.045); border:1px solid var(--rule-d);
               border-radius:5px; padding:1.5rem 1.35rem; text-align:center;
               display:flex; flex-direction:column; justify-content:center}
  .match .node--mid{background:var(--navy-deep); border-color:var(--mint)}
  .match .node b{display:block; font-family:var(--display); font-weight:600; font-size:1.06rem; color:#fff; margin-bottom:.3rem}
  .match .node span{font-size:.88rem; color:var(--on-dark-2)}
  .match .node--mid span{color:var(--mint)}
  .match .link{color:var(--mint); font-size:1.3rem; letter-spacing:.1em; text-align:center;
               align-self:center; line-height:1}
  @media (max-width:52rem){.match .link{transform:rotate(90deg); font-size:1rem}}

  /* ---------- forms ---------- */
  .act{display:grid; grid-template-columns:1fr 1fr; gap:1.15rem}
  @media (max-width:52rem){.act{grid-template-columns:1fr}}
  .act__panel{background:rgba(255,255,255,.05); border:1px solid var(--rule-d);
              border-radius:5px; padding:1.85rem 1.7rem}
  .act__panel h3{color:#fff; font-size:1.2rem; margin-bottom:.5rem}
  .act__panel p{color:var(--on-dark-2); font-size:.95rem; margin:0 0 1.35rem}
  .field{display:block; margin-bottom:.85rem}
  .field span{display:block; font-family:var(--display); font-weight:500; font-size:.72rem;
              letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-3); margin-bottom:.35rem}
  .field input,.field select,.field textarea{
    width:100%; font-family:var(--text); font-size:.96rem; color:#fff;
    background:rgba(255,255,255,.07); border:1px solid var(--rule-d); border-radius:3px;
    padding:.68rem .8rem}
  .field textarea{min-height:5.5rem; resize:vertical}
  .field input::placeholder,.field textarea::placeholder{color:#93aac6}
  .field input:focus,.field select:focus,.field textarea:focus{
    outline:none; border-color:var(--mint); background:rgba(255,255,255,.1)}
  .field select option{background:var(--navy); color:#fff}
  .formnote{font-size:.78rem; color:var(--on-dark-3); margin:.9rem 0 0; line-height:1.5}
  .act__panel .btn{width:100%; justify-content:center}

  /* ---------- brands ---------- */
  .brands{display:flex; flex-wrap:wrap; gap:.5rem; margin:1.1rem 0 0; padding:0; list-style:none}
  .brands li{font-family:var(--display); font-weight:500; font-size:.92rem; color:var(--on-dark-2);
             background:rgba(255,255,255,.06); border:1px solid var(--rule-d);
             border-radius:3px; padding:.5rem .95rem}

  /* ---------- footer ---------- */
  footer{background:var(--navy-deep); color:var(--on-dark-2); padding-block:3.5rem 2.5rem;
         font-size:.92rem}
  footer .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; padding-bottom:2.25rem;
               border-bottom:1px solid var(--rule-d)}
  @media (max-width:52rem){footer .cols{grid-template-columns:1fr; gap:1.75rem}}
  footer h4{font-family:var(--display); font-weight:600; font-size:.74rem; letter-spacing:.14em;
            text-transform:uppercase; color:var(--on-dark-3); margin:0 0 .8rem}
  footer ul{list-style:none; margin:0; padding:0}
  footer li{margin-bottom:.45rem}
  footer a{color:var(--on-dark-2); text-decoration:none}
  footer a:hover{color:#fff; text-decoration:underline}
  .legal{padding-top:1.5rem; font-size:.82rem; color:var(--on-dark-3); line-height:1.6}
  .legal b{color:var(--on-dark-2); font-weight:500}

  .skip{position:absolute; left:-9999px}
  .skip:focus{left:1rem; top:1rem; z-index:99; background:var(--mint); color:#06263a;
              padding:.6rem 1rem; border-radius:3px}

  /* ---------- logo ---------- */
  .logomark{display:block; height:auto}
  .brand{color:#fff}
  .brand .logomark{width:104px}
  footer .logomark{width:118px; margin-bottom:1rem}
  footer{color:var(--on-dark-2)}
  footer .cols > div:first-child{color:#fff}

  /* .nav a beats .btn--pri on specificity — restore the button's own colours */
  .nav a.btn--pri{color:#06263a}
  .nav a.btn--pri:hover{color:#06263a}
  .nav a.btn--ghost{color:var(--on-dark)}

  .act--solo{grid-template-columns:1fr; max-width:44rem}

  /* ---------- hero: two columns, with the gateway drawn ---------- */
  .hero__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
              gap:clamp(2rem,5vw,4rem); align-items:center}
  .hero__copy{min-width:0}
  .hero__rz{margin:1.4rem 0 0; font-size:.86rem; color:var(--on-dark-3); max-width:38ch}

  .hero__art{margin:0; position:relative}
  .heroart{display:block; width:100%; height:auto; overflow:visible}
  .heroart circle{transform-box:fill-box; transform-origin:center}
  .hero__art figcaption{display:grid; grid-template-columns:repeat(2,auto);
      gap:.3rem 1.1rem; justify-content:start; margin-top:1.1rem}
  .hero__art figcaption span{font-family:var(--display); font-weight:500; font-size:.7rem;
      letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-3);
      display:flex; align-items:center; gap:.45rem}
  .hero__art figcaption span::before{content:""; width:.5rem; height:.5rem; border-radius:50%}
  .k0::before{background:var(--mint)}
  .k1::before{background:var(--mint); opacity:.75}
  .k2::before{background:var(--teal)}
  .k3::before{background:var(--mint); opacity:.45}

  @media (max-width:64rem){
    .hero__grid{grid-template-columns:1fr}
    .hero__art{max-width:22rem; margin-top:.5rem}
  }
  @media (max-width:40rem){ .hero__art{display:none} }

  /* ---------- sticky conversion bar ---------- */
  .stickycta{position:fixed; left:0; right:0; bottom:0; z-index:70;
    display:flex; align-items:center; gap:1rem;
    padding:.7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));
    background:rgba(7,26,51,.96); backdrop-filter:blur(10px);
    border-top:1px solid var(--rule-d)}
  .stickycta div{min-width:0; line-height:1.25}
  .stickycta b{display:block; font-family:var(--display); font-weight:600;
               font-size:.88rem; color:#fff}
  .stickycta span{display:block; font-size:.76rem; color:var(--on-dark-3)}
  .stickycta .btn{margin-left:auto; flex:0 0 auto; padding:.6rem 1.05rem; font-size:.86rem}
  /* display:flex above outranks the UA's [hidden]{display:none} — restore it */
  .stickycta[hidden]{display:none}
  @media (min-width:60rem){ .stickycta{display:none} }

  /* meta sits in a tidy 2x2 now the hero copy shares the row with the artwork */
  .hero__grid .hero__meta{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
                          gap:.9rem 2rem}
  @media (max-width:22rem){.hero__grid .hero__meta{grid-template-columns:1fr}}

  /* ---------- packages: commercial hierarchy made visual ---------- */
  .pkgs{display:grid; gap:1.15rem}
  .pkg-feature{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
               gap:clamp(1.5rem,3vw,2.75rem); align-items:center;
               background:var(--navy); color:var(--on-dark); border:0; border-radius:5px;
               padding:clamp(1.75rem,3vw,2.5rem); position:relative; overflow:hidden}
  .pkg-feature::after{content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(30rem 20rem at 88% -30%, rgba(100,198,194,.20), transparent 65%)}
  .pkg-feature > *{position:relative}
  .pkg-feature .flag{display:inline-block; font-family:var(--display); font-weight:600;
    font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:#06263a;
    background:var(--mint); border-radius:999px; padding:.24rem .7rem; margin-bottom:.9rem}
  .pkg-feature h3{color:#fff; font-size:clamp(1.5rem,3vw,2rem); letter-spacing:-.02em; margin-bottom:.3rem}
  .pkg-feature .role{color:var(--mint); font-size:.86rem; margin:0 0 1rem;
                     font-family:var(--display); font-weight:500}
  .pkg-feature .summary{color:var(--on-dark-2); font-size:1rem; margin:0 0 1.4rem; max-width:42ch}
  .pkg-feature .size{font-family:var(--display); font-weight:700; letter-spacing:-.03em;
    font-size:clamp(3rem,7vw,4.5rem); line-height:.92; color:#fff}
  .pkg-feature .size small{font-size:1.05rem; font-weight:500; color:var(--on-dark-3); margin-left:.35rem}
  .pkg-feature .checks li{color:var(--on-dark-2)}
  .pkg-feature .tag{color:var(--on-dark-3); font-size:.8rem; font-style:italic; margin:1.1rem 0 0}

  .pkg .checks{margin-top:.85rem}
  .pkg .checks li{font-size:.89rem; margin-bottom:.34rem}
  .pkg .btn{margin-top:1.25rem; width:100%; justify-content:center}
  .pkg-feature .btn{margin-top:1.5rem}
  @media (max-width:56rem){ .pkg-feature{grid-template-columns:1fr; gap:1.5rem} }

  /* the bullet list absorbs the slack so every card's button sits on one line */
  .pkg .desc{flex:none}
  .pkg .checks{flex:1}

  /* ---------- process flow: a different shape from the card grids ---------- */
  .flow{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-bottom:2.5rem;
        counter-reset:step}
  .flow__step{position:relative; padding:2.4rem 1.35rem 0 0}
  .flow__step::before{content:""; position:absolute; top:.62rem; left:0; right:0; height:1px;
                      background:var(--rule-l)}
  .flow__step::after{content:""; position:absolute; top:.25rem; left:0; width:.78rem; height:.78rem;
                     border-radius:50%; background:var(--mint);
                     box-shadow:0 0 0 4px var(--paper)}
  .sec--white .flow__step::after{box-shadow:0 0 0 4px var(--paper-2)}
  .flow__step:last-child::before{right:1.35rem}
  .flow__n{font-family:var(--display); font-weight:700; font-size:.74rem; letter-spacing:.12em;
           color:var(--teal); display:block; margin-bottom:.5rem}
  .flow__step h3{margin-bottom:.4rem}
  .flow__step p{margin:0; font-size:.92rem; color:var(--ink-2)}
  @media (max-width:62rem){
    .flow{grid-template-columns:repeat(2,1fr); gap:1.5rem 0}
    .flow__step:nth-child(2)::before{right:1.35rem}
  }
  @media (max-width:40rem){
    .flow{grid-template-columns:1fr; gap:0}
    .flow__step{padding:0 0 1.5rem 1.75rem}
    .flow__step::before{top:.4rem; bottom:-1rem; left:.36rem; right:auto; width:1px; height:auto}
    .flow__step:last-child::before{display:none}
    .flow__step::after{top:.2rem; left:0}
  }

  /* ---------- two doors ---------- */
  .twodoor{display:grid; grid-template-columns:repeat(2,1fr); gap:1.15rem}
  @media (max-width:52rem){.twodoor{grid-template-columns:1fr}}
  .door{background:var(--navy); color:var(--on-dark); border-radius:5px;
        padding:1.85rem 1.7rem; display:flex; flex-direction:column}
  .door .eyebrow{color:var(--mint)}
  .door h3{color:#fff; font-size:1.3rem; margin-bottom:.55rem}
  .door p{color:var(--on-dark-2); font-size:.95rem; margin:0 0 1.4rem; flex:1}
  .door .btn{align-self:flex-start}
  .door:first-child{background:var(--navy-deep); outline:1px solid rgba(100,198,194,.35);
                    outline-offset:-1px}

  /* Eight nav items plus a CTA overflow between the mobile breakpoint and ~1200px,
     which pushed the whole document into horizontal scroll. Tighten before it bites. */
  @media (max-width:80rem) and (min-width:60.001rem){
    .nav{gap:1.05rem}
    .nav a{font-size:.82rem}
    .nav a.btn{padding:.62rem 1rem; font-size:.84rem}
    .brand .logomark{width:92px}
  }

  /* ---------- split: artwork beside prose ---------- */
  .split{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
         gap:clamp(1.75rem,4vw,3.5rem); align-items:center; margin-bottom:2.5rem}
  .split--rev .split__art{order:2}
  .split--rev .split__body{order:1}
  .split__art{margin:0}
  .split__art svg{display:block; width:100%; height:auto}
  .split__art--dark{background:var(--navy-deep); border:1px solid var(--rule-d);
                    border-radius:5px; padding:clamp(1rem,2.5vw,1.75rem)}
  .sec--white .split__art--dark,.sec:not(.sec--dark):not(.sec--deep) .split__art--dark{
                    background:var(--navy); border-color:transparent}
  .split__body p{color:var(--ink-2); font-size:.98rem; margin:0 0 1rem}
  .sec--dark .split__body p,.sec--deep .split__body p{color:var(--on-dark-2)}
  .split__h{font-size:1.25rem; margin-bottom:.6rem}
  @media (max-width:56rem){
    .split{grid-template-columns:1fr; gap:1.75rem}
    .split--rev .split__art{order:0}
    .split--rev .split__body{order:1}
    .split__art{max-width:26rem}
  }

  .checks--lg li{font-size:.98rem; margin-bottom:.7rem; padding-left:1.5rem}
  .checks--lg li::before{top:.66em; width:.5rem; height:.5rem}
  .checks--lg b{font-weight:500; color:#fff}
  .sec:not(.sec--dark):not(.sec--deep) .checks--lg b{color:var(--ink)}
  .split .pull{margin-top:1.75rem}

  /* ---------- focus: one visible ring everywhere, not just on buttons ---------- */
  :focus-visible{outline:2px solid var(--teal); outline-offset:3px; border-radius:2px}
  .top :focus-visible,.hero :focus-visible,footer :focus-visible,
  .sec--dark :focus-visible,.sec--deep :focus-visible,
  .door :focus-visible,.pkg-feature :focus-visible,.act__panel :focus-visible{
    outline-color:var(--mint)}

  /* ---------- touch targets: 44px minimum on the controls that matter ---------- */
  .navtoggle{min-height:44px; min-width:56px; padding:.6rem .85rem; font-size:.86rem}
  footer li{margin-bottom:0}
  footer li a{display:inline-block; padding:.45rem 0; min-height:44px;
              line-height:1.55; display:flex; align-items:center}
  footer .cols > div:last-child li{padding:.2rem 0}
  .formnote a{display:inline-block; padding:.15rem 0}
  @media (min-width:60rem){
    footer li a{min-height:0; padding:.18rem 0}
    footer li{margin-bottom:.35rem}
  }

  /* ---------- language switch ---------- */
  .langswitch{font-family:var(--display); font-weight:600; font-size:.84rem;
              letter-spacing:.04em; color:var(--on-dark-2); text-decoration:none;
              border:1px solid rgba(255,255,255,.28); border-radius:3px;
              padding:.4rem .7rem; line-height:1; white-space:nowrap}
  .langswitch:hover{color:#fff; border-color:#fff}
  @media (max-width:60rem){
    .nav a.langswitch{display:inline-flex; align-items:center; justify-content:center;
                      align-self:flex-start; margin-top:1rem; border-bottom:1px solid rgba(255,255,255,.28)}
  }

  /* ---------- CJK line breaking ---------- */
  /* CJK breaks between any two characters, so a highlighted phrase can be split
     mid-word (汇 | 聚亚洲). Keep short accented phrases whole. */
  :lang(zh-Hans) .hero h1 em{white-space:nowrap}
  :lang(zh-Hans) h1,:lang(zh-Hans) h2,:lang(zh-Hans) h3{word-break:keep-all; overflow-wrap:break-word}
  :lang(zh-Hans) .hero__meta .v,:lang(zh-Hans) .day li span,
  :lang(zh-Hans) .stat span,:lang(zh-Hans) .node b{word-break:keep-all}