/* Montserrat — self-hosted, served from this origin so the brand face never
   depends on a third-party request, a preconnect or a render-blocking
   stylesheet on fonts.googleapis.com. Google serves one VARIABLE woff2 per
   subset covering the whole 100-900 axis, so two files cover 400/500/600/700.
   latin-ext only downloads when a page actually contains those characters. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/montserrat-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/montserrat-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* ==========================================================================
   TowerDesk marketing site — design system v2.0.0
   --------------------------------------------------------------------------
   Brand card is the law: Montserrat (Bold headlines / Regular body) and the
   four-colour palette #165c9c · #4fa8dd · #33a766 · #333333.

   Art direction: a residential building, drawn honestly. Deep harbour navy
   for structure, brand blue for action, sky blue for wayfinding, green for
   anything that is compliant, live or resolved. Flat surfaces, 8px radii,
   one hairline rule doing the work of a shadow. No glass, no glow.

   Legacy class names from the v1.0.9.x tree (.fg, .fg-item, .page-hero,
   .btn-p, .faq-block, .steps, .stat, .callout ...) are kept and restyled, so
   carried-over page bodies inherit the redesign without markup surgery.
   ========================================================================== */

:root{
    /* structure — dark bands, to sit under the building photography */
    --navy:#0C2842;
    --navy-2:#123B60;
    --navy-3:#1B4E7A;
    --navy-line:#27516F;
    --navy-text:#C6D8E6;
    --navy-dim:#8DA7BC;

    /* page */
    --paper:#FFFFFF;
    --paper-2:#F2F7FB;
    --paper-3:#E5EEF6;
    --card:#FFFFFF;

    /* ink */
    --ink:#333333;
    --ink-2:#5C6C7B;
    --ink-3:#64757F;
    --rule:#DCE6EF;
    --rule-2:#C2D3E1;

    /* brand — straight off the branding card */
    --brand:#165C9C;
    --brand-d:#10426F;
    --brand-soft:#E8F1F9;
    --sky:#4FA8DD;
    --sky-soft:#E6F4FC;
    --green:#33A766;
    --green-d:#236F44;
    --green-soft:#E7F5EE;
    --amber:#C77B12;
    --amber-soft:#FCF2E1;
    --fault:#C0483C;
    --fault-soft:#FBECEA;

    --shadow-sm:0 1px 2px rgba(12,40,66,.05);
    --shadow-md:0 2px 10px rgba(12,40,66,.07);
    --shadow-lg:0 20px 48px rgba(12,40,66,.13);

    --max:1180px;
    --r:8px;
    --r-lg:14px;

    --f:'Montserrat','Helvetica Neue',Arial,sans-serif;

    --ease:cubic-bezier(.22,.61,.36,1);
    --dur:.32s;
}

*{margin:0;padding:0;box-sizing:border-box}
/* scroll-padding keeps an anchored section clear of the sticky header;
   smooth scrolling is opt-out for anyone who has asked for less motion. */
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
    font-family:var(--f);
    font-size:16.5px;
    font-weight:400;
    line-height:1.66;
    letter-spacing:-.004em;
    background:var(--paper);
    color:var(--ink);
    overflow-x:hidden;
    overflow-wrap:break-word;
    -webkit-font-smoothing:antialiased;
    -webkit-tap-highlight-color:rgba(22,92,156,.15);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
svg{stroke:currentColor}
h1,h2,h3,h4,h5{font-family:var(--f);font-weight:700;letter-spacing:-.022em;line-height:1.16;color:var(--navy)}
b,strong{font-weight:600}
em{font-style:normal;color:var(--green-d);font-weight:700}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:3px}
::selection{background:var(--sky);color:#fff}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
/* viewport-fit=cover means the page runs under the notch and the home
   indicator on iOS; every full-bleed edge pads itself back out. */
@supports (padding:max(0px)){
    .wrap,.nav,.mobile-menu,.arrive-grid,.walk-grid,.walk-intro,.head-center,
    .duo,.ops-copy,.phero-inner,.page-hero-inner,.content-section,.legal{
        padding-left:max(24px,env(safe-area-inset-left));
        padding-right:max(24px,env(safe-area-inset-right));
    }
    .foot-bottom{padding-bottom:max(20px,env(safe-area-inset-bottom))}
}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;padding:12px 18px;border-radius:0 0 var(--r) 0}
.skip-link:focus{left:0}

/* ===== BACKDROP — a faint site plan behind the white page ================= */
.backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--paper)}
.backdrop::before{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(1200px 560px at 84% -12%, rgba(79,168,221,.13), transparent 70%),
      radial-gradient(860px 480px at 2% -6%, rgba(22,92,156,.07), transparent 68%);
}
.grid-lines{
    position:absolute;inset:0;
    background-image:
      linear-gradient(rgba(12,40,66,.035) 1px,transparent 1px),
      linear-gradient(90deg,rgba(12,40,66,.035) 1px,transparent 1px);
    background-size:46px 46px;
    mask-image:linear-gradient(#000 0,rgba(0,0,0,.5) 40vh,transparent 82vh);
    -webkit-mask-image:linear-gradient(#000 0,rgba(0,0,0,.5) 40vh,transparent 82vh);
}
main,header,footer{position:relative;z-index:1}

/* ===== BUTTONS ============================================================ */
.btn,.btn-p,.btn-g,.btn-w{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    font-family:var(--f);font-weight:600;font-size:15px;letter-spacing:-.004em;
    padding:12px 22px;border-radius:var(--r);border:1.5px solid transparent;
    cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
    min-height:44px;text-align:center;
}
.btn-primary,.btn-p{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-primary:hover,.btn-p:hover{background:var(--brand-d);border-color:var(--brand-d);transform:translateY(-1px)}
.btn-secondary{background:var(--green-d);color:#fff;border-color:var(--green-d)}
.btn-secondary:hover{background:#1A5835;border-color:#1A5835}
.btn-ghost,.btn-g{background:transparent;color:var(--brand);border-color:var(--rule-2)}
.btn-ghost:hover,.btn-g:hover{border-color:var(--brand);background:var(--brand-soft)}
.btn-w{background:#fff;color:var(--brand);border-color:#fff}
.btn-w:hover{background:var(--paper-2)}
.btn-lg{padding:15px 28px;font-size:16px;min-height:50px}
.on-dark .btn-ghost,.arrive .btn-ghost,.ops .btn-ghost,.foot-cta .btn-ghost,.phero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.42)}
.on-dark .btn-ghost:hover,.arrive .btn-ghost:hover,.ops .btn-ghost:hover,.foot-cta .btn-ghost:hover,.phero .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.hero-cta,.hero-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ===== HEADER ============================================================= */
header{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.9);backdrop-filter:saturate(150%) blur(12px);-webkit-backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid transparent;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
header.is-scrolled{border-bottom-color:var(--rule);box-shadow:0 1px 0 rgba(12,40,66,.04)}
.nav{max-width:var(--max);margin:0 auto;padding:0 24px;height:66px;display:flex;align-items:center;gap:22px}
.nav .brand{display:flex;align-items:center;flex:0 0 auto}
.nav .brand img{height:38px;width:auto}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-links a{padding:8px 13px;border-radius:6px;font-size:14.5px;font-weight:500;color:var(--ink-2);transition:color var(--dur) var(--ease),background var(--dur) var(--ease)}
.nav-links a:hover{color:var(--brand);background:var(--brand-soft)}
.nav-links a.current{color:#fff;background:var(--brand)}
.nav-actions{display:flex;align-items:center;gap:10px}
.nav-actions .signin{font-size:14.5px;font-weight:600;color:var(--brand);padding:8px 10px}
.nav-actions .signin:hover{text-decoration:underline}
.nav-actions .btn{padding:10px 18px;font-size:14.5px;min-height:42px}
.menu-toggle{display:none;background:none;border:1px solid var(--rule);border-radius:6px;width:44px;height:44px;align-items:center;justify-content:center;color:var(--navy);margin-left:auto}
.menu-toggle svg{width:22px;height:22px}
.mobile-menu{display:none;flex-direction:column;padding:8px 24px 20px;border-top:1px solid var(--rule);background:#fff}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:13px 2px;font-size:16px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--paper-3);min-height:48px;display:flex;align-items:center}
.mobile-menu a.btn{justify-content:center;margin-top:14px;border-bottom:none;color:#fff}

/* ===== ARRIVAL HERO ======================================================= */
.arrive{background:var(--navy);color:var(--navy-text);position:relative;overflow:hidden}
.arrive::before{content:"";position:absolute;inset:0;background:radial-gradient(760px 460px at 88% 6%,rgba(79,168,221,.26),transparent 68%)}
.arrive-grid{position:relative;max-width:var(--max);margin:0 auto;padding:64px 24px 0;display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:end}
.arrive-copy{padding-bottom:74px}
.eyebrow{display:inline-block;font-size:12.5px;font-weight:600;color:var(--sky);letter-spacing:.02em;padding-left:14px;border-left:3px solid var(--green);margin-bottom:20px}
.arrive h1{color:#fff;font-size:clamp(34px,5.1vw,57px);letter-spacing:-.03em;line-height:1.05}
.arrive .sub{margin-top:20px;font-size:17.5px;color:var(--navy-text);max-width:34em}
.arrive .sub b{color:#fff;font-weight:600}
.arrive-note{margin-top:24px;font-size:13.5px;color:var(--navy-dim);display:flex;align-items:center;gap:9px}
.arrive-note i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(51,167,102,.22);flex:0 0 auto}
.arrive-media{align-self:end}
.arrive-media img{width:100%;border-radius:var(--r-lg) var(--r-lg) 0 0;mask-image:linear-gradient(#000 78%,transparent);-webkit-mask-image:linear-gradient(#000 78%,transparent)}

/* ===== TRUST STRIP ======================================================== */
.trustbar{border-bottom:1px solid var(--rule);background:var(--paper-2)}
.trustbar .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 30px;padding-top:18px;padding-bottom:18px}
.trustbar .label{font-size:12.5px;font-weight:600;color:var(--ink-3);margin-right:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:12.5px;font-weight:600;color:var(--brand);background:var(--brand-soft);border:1px solid #CFE2F2;border-radius:100px;padding:5px 13px}
.chip.ok{color:var(--green-d);background:var(--green-soft);border-color:#C7E7D6}

/* ===== SECTIONS =========================================================== */
.section{padding:74px 0}
.section.tint{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.head-center{max-width:var(--max);margin:0 auto 40px;padding:0 24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:44px;row-gap:0;align-items:start}
.head-center > :first-child{grid-column:1}
.head-center .lede{grid-column:2;color:var(--ink-2);font-size:16.5px;align-self:center}
.kicker{font-size:12.5px;font-weight:600;color:var(--brand);letter-spacing:.02em;margin-bottom:12px;padding-left:12px;border-left:3px solid var(--sky)}
.section h2{font-size:clamp(25px,3.2vw,35px)}
.section > .wrap > p,.section .head-center p{color:var(--ink-2)}
.sig-rule{border:none;border-top:1px solid var(--rule);max-width:var(--max);margin:0 auto}

/* ===== THE WALK — scroll through the levels =============================== */
.walk{padding:74px 0 0}
.walk-intro{max-width:var(--max);margin:0 auto 34px;padding:0 24px;max-width:780px}
.walk-intro h2{font-size:clamp(25px,3.2vw,35px);margin-bottom:14px}
.walk-intro p{color:var(--ink-2)}
.walk-grid{max-width:var(--max);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.stage{position:sticky;top:92px}
.stage-media{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--rule);background:var(--navy);width:100%;max-width:100%;aspect-ratio:4/3}
/* Safari < 15 has no aspect-ratio; a padding box does the same job there.
   A min-height must NOT be used as the fallback — with aspect-ratio present
   WebKit derives the WIDTH from it and blows the grid track out. */
@supports not (aspect-ratio:4/3){.stage-media{height:0;padding-bottom:75%}}
.stage-media picture{position:absolute;inset:0;left:44px;opacity:0;transition:opacity .55s var(--ease)}
.stage-media picture.on{opacity:1}
/* the four frames are deliberately different shapes (a cutaway, a phone, a
   wide night entrance, a plant room). contain letterboxes them onto the navy
   ground rather than cropping the callouts off the edges. */
.stage-media img{width:100%;height:100%;object-fit:contain;object-position:center}
.rail{position:absolute;left:0;top:0;bottom:0;width:44px;display:flex;flex-direction:column;justify-content:center;gap:2px;background:rgba(12,40,66,.86);border-right:1px solid var(--navy-line);padding:0 0 0 8px;z-index:2}
.rail span{font-size:11px;font-weight:700;color:rgba(255,255,255,.5);padding:5px 4px;border-left:2px solid transparent;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.rail span.on{color:#fff;border-left-color:var(--green)}
.stage-bar{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin-top:10px;padding:10px 14px;border:1px solid var(--rule);border-radius:var(--r);background:var(--paper-2);font-size:12.5px;color:var(--ink-2)}
.stage-bar b{color:var(--navy);font-weight:600}
.stage-bar .st{display:inline-flex;align-items:center;gap:7px;margin-left:auto;color:var(--green-d);font-weight:600}
.stage-bar .st i{width:7px;height:7px;border-radius:50%;background:var(--green);flex:0 0 auto}
.walk-steps{display:flex;flex-direction:column;gap:12px}
.walk-step{padding:38px 0;border-bottom:1px solid var(--rule)}
.walk-step:last-child{border-bottom:none}
.walk-lvl{font-size:12px;font-weight:700;color:var(--sky);margin-bottom:8px}
.walk-step h3{font-size:23px;margin-bottom:12px}
.walk-step > p{color:var(--ink-2)}
.kit{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.kit span{font-size:12.5px;font-weight:500;color:var(--ink-2);background:var(--paper-2);border:1px solid var(--rule);border-radius:100px;padding:5px 12px}
.td-note{display:flex;gap:12px;margin-top:18px;padding:14px 16px;border:1px solid #CFE2F2;border-left:3px solid var(--brand);border-radius:0 var(--r) var(--r) 0;background:var(--brand-soft)}
.td-note p{margin:0;font-size:14.5px;color:#1B4468}
.td-note .oy{width:9px;height:9px;border-radius:50%;background:var(--brand);margin-top:8px;flex:0 0 auto}

/* ===== OPS / NIGHT BAND =================================================== */
.ops{position:relative;min-height:520px;display:flex;align-items:center;background:var(--navy);overflow:hidden;margin-top:74px}
.ops-media{position:absolute;inset:0}
.ops-media img{width:100%;height:100%;object-fit:cover;opacity:.38}
.ops::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(12,40,66,.97) 30%,rgba(12,40,66,.82) 66%,rgba(12,40,66,.62))}
.ops-copy{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:72px 24px;color:var(--navy-text);width:100%}
.ops-copy h2{color:#fff;font-size:clamp(25px,3.4vw,38px);max-width:16em}
.ops-copy > p{margin-top:18px;max-width:46em;color:var(--navy-text)}
.ops-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:32px;background:var(--navy-line);border:1px solid var(--navy-line);border-radius:var(--r);overflow:hidden}
.ops-stats div{background:rgba(12,40,66,.72);padding:16px 18px}
.ops-stats b{display:block;color:#fff;font-size:15px;font-weight:600;margin-bottom:3px}
.ops-stats span{font-size:13px;color:var(--navy-dim)}

/* ===== CARD GRIDS (legacy .fg / .fg-item kept) ============================ */
.cards,.fg{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:26px 0 0}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card-i,.fg-item{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:22px;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.card-i:hover,.fg-item:hover{border-color:var(--rule-2);box-shadow:var(--shadow-md)}
.card-i h3,.fg-item h3{font-size:17px;margin-bottom:8px;line-height:1.3}
.card-i p,.fg-item p{font-size:14.5px;color:var(--ink-2);margin:0}
.fg-item .icon,.card-i .icon{width:46px;height:46px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;margin-bottom:16px;background:var(--brand-soft);border:1px solid #CFE2F2}
.fg-item:nth-child(3n+2) .icon{background:var(--green-soft);border-color:#C7E7D6}
.fg-item:nth-child(3n) .icon{background:var(--sky-soft);border-color:#CCE9F7}
.pill-new{display:inline-block;font-size:10.5px;font-weight:700;color:#fff;background:var(--green-d);border-radius:100px;padding:2px 8px;margin-left:7px;vertical-align:middle;letter-spacing:.02em}

/* ===== STATS / STEPS / CALLOUTS (legacy) ================================== */
.statline{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:28px 0}
.stat{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:20px}
.stat b,.stat .num{display:block;font-size:29px;font-weight:700;color:var(--brand);letter-spacing:-.03em;line-height:1.1;font-family:var(--f)}
.stat span,.stat small{display:block;font-size:13.5px;color:var(--ink-2);margin-top:5px}
.steps{list-style:none;counter-reset:s;margin:28px 0;padding:0}
.steps li{position:relative;padding:0 0 28px 56px;counter-increment:s}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center}
.steps li::after{content:"";position:absolute;left:18px;top:44px;bottom:4px;width:2px;background:var(--rule)}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
.steps li h3{font-size:18px;margin:6px 0 6px}
.steps li p{margin:0;color:var(--ink-2)}
.callout,.keypoint,.guide-tldr{background:var(--brand-soft);border:1px solid #CFE2F2;border-left:3px solid var(--brand);border-radius:0 var(--r) var(--r) 0;padding:18px 22px;margin:26px 0;color:#1B4468}
.callout strong,.keypoint strong,.guide-tldr strong{color:var(--brand-d)}
.guide-meta{color:var(--ink-3);font-size:13px;margin:6px 0 0}
.ctt-row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:24px 0}
.ctt{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:18px}
.ctt-ck{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);margin:8px 0}
.ctt-ck::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--green);margin-top:8px;flex:0 0 auto}
.vs-before,.vs-after{border-radius:var(--r);padding:20px;border:1px solid var(--rule)}
.vs-before{background:var(--fault-soft);border-color:#F0CFCB}
.vs-after{background:var(--green-soft);border-color:#C7E7D6}
.vs-before h3,.vs-after h3{font-size:17px;margin-bottom:10px}
.cmp-wrap{overflow-x:auto;margin:26px 0;border:1px solid var(--rule);border-radius:var(--r)}
.cmp,table.data{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
.cmp th,.cmp td,table.data th,table.data td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--rule)}
.cmp th,table.data th{background:var(--paper-2);font-weight:600;color:var(--navy);font-size:13.5px}
.cmp tr:last-child td,table.data tr:last-child td{border-bottom:none}
.ss-wrap{margin:26px 0;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}

/* ===== FIGURES ============================================================ */
.figure{margin:30px 0;border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;background:var(--card)}
.figure img{width:100%}
.figure figcaption{padding:12px 18px;font-size:13.5px;color:var(--ink-2);border-top:1px solid var(--rule);background:var(--paper-2)}

/* ===== SPLIT / FEATURE DUO ================================================ */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;max-width:var(--max);margin:0 auto;padding:0 24px}
.duo.flip .duo-media{order:-1}
.duo h2{font-size:clamp(24px,3vw,33px);margin-bottom:16px}
.duo p{color:var(--ink-2)}
.duo-media{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--rule);background:var(--paper-2)}
.ticks{list-style:none;margin:20px 0 0;display:grid;gap:10px}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--ink-2)}
.ticks li::before{
    content:"";width:18px;height:18px;flex:0 0 auto;margin-top:4px;
    border-radius:5px;background:var(--green-soft);border:1px solid #A8DBC0;
    background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23236F44' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-size:12px 12px;background-position:center;background-repeat:no-repeat;
}

/* ===== PRICING ============================================================ */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.plan{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:22px;position:relative}
.plan.best{border-color:var(--green);border-width:2px}
.plan .tag{position:absolute;top:-11px;left:20px;background:var(--green-d);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:100px}
.plan h3{font-size:15.5px;color:var(--ink-2);font-weight:600;margin-bottom:10px}
.plan .amt{font-size:34px;font-weight:700;color:var(--navy);letter-spacing:-.035em;line-height:1}
.plan .amt small{font-size:14px;font-weight:500;color:var(--ink-3);letter-spacing:-.004em}
.plan .eg{margin-top:12px;font-size:13.5px;color:var(--ink-2);border-top:1px solid var(--rule);padding-top:12px}
.price-note{margin-top:22px;font-size:14px;color:var(--ink-2)}
.calc{margin-top:30px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--card);padding:24px;display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
.calc h3{font-size:19px;margin-bottom:8px}
.calc p{font-size:14.5px;color:var(--ink-2)}
.calc label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin:18px 0 8px}
.calc input[type=range]{width:100%;accent-color:var(--brand);height:32px}
.calc-tier{font-size:13.5px;color:var(--brand);font-weight:600;margin-top:4px}
.calc-out{background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r);padding:20px;text-align:center}
.calc-out .big{font-size:38px;font-weight:700;color:var(--navy);letter-spacing:-.035em;line-height:1.05}
.calc-out .big small{font-size:14px;font-weight:500;color:var(--ink-3);display:block;letter-spacing:-.004em;margin-top:4px}
.calc-out .row{border-top:1px solid var(--rule);margin-top:14px;padding-top:12px;font-size:14px;color:var(--ink-2)}

/* ===== FAQ ================================================================ */
.faq,.faq-block{max-width:820px;margin:26px auto 0}
.faq details,.faq-block details{border:1px solid var(--rule);border-radius:var(--r);background:var(--card);margin:10px 0;overflow:hidden}
.faq details[open],.faq-block details[open]{border-color:var(--rule-2)}
.faq summary,.faq-block summary{padding:16px 52px 16px 20px;cursor:pointer;font-weight:600;color:var(--navy);list-style:none;position:relative;min-height:52px;display:flex;align-items:center;font-size:15.5px}
.faq summary::-webkit-details-marker,.faq-block summary::-webkit-details-marker{display:none}
.faq summary::after,.faq-block summary::after{content:"";position:absolute;right:20px;top:50%;width:11px;height:11px;margin-top:-7px;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(45deg);transition:transform var(--dur) var(--ease)}
.faq details[open] summary::after,.faq-block details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq details p,.faq-block details p{padding:0 20px 18px;margin:0;color:var(--ink-2);font-size:15px}

/* ===== SECURITY / TRUST GRID ============================================== */
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.trust-card{border:1px solid var(--rule);border-radius:var(--r);padding:20px;background:var(--card)}
.trust-card h3{font-size:16px;margin-bottom:7px}
.trust-card p{font-size:14.5px;color:var(--ink-2)}
.trust-card .dot{width:9px;height:9px;border-radius:50%;background:var(--green);margin-bottom:14px}

/* ===== PAGE HERO (inner pages) ============================================ */
.phero,.page-hero{background:var(--navy);color:var(--navy-text);position:relative;overflow:hidden;padding:52px 0 54px}
.phero::before,.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 420px at 86% -10%,rgba(79,168,221,.25),transparent 70%)}
.phero-inner,.page-hero-inner{position:relative;max-width:var(--max);margin:0 auto;padding:0 24px;max-width:900px}
.phero h1,.page-hero h1{color:#fff;font-size:clamp(29px,4.2vw,46px);letter-spacing:-.03em;line-height:1.08}
.phero h1 em,.page-hero h1 em{color:var(--sky)}
.phero > .phero-inner > p,.page-hero-inner > p{margin-top:18px;font-size:17px;color:var(--navy-text);max-width:44em}
.page-hero .sl,.phero .sl{display:inline-block;font-size:12.5px;font-weight:600;color:var(--sky);letter-spacing:.02em;padding-left:14px;border-left:3px solid var(--green);margin-bottom:18px}
.breadcrumb{list-style:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--navy-dim);margin-bottom:20px;padding:0}
.breadcrumb a{color:var(--sky)}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb .sep{color:var(--navy-line)}
.page-hero-mascot{display:none}

/* ===== ARTICLE / CONTENT BODY ============================================= */
.content-section,.legal{max-width:900px;margin:0 auto;padding:56px 24px 24px}
.content-section h2,.legal h2{font-size:clamp(22px,2.7vw,30px);margin:40px 0 14px}
.content-section > h2:first-of-type{margin-top:0}
.content-section h3,.legal h3{font-size:19px;margin:26px 0 10px}
.content-section p,.legal p{margin:0 0 15px;color:#44515E}
.content-section ul,.content-section ol,.legal ul,.legal ol{margin:0 0 18px 22px;color:#44515E}
.content-section li,.legal li{margin:7px 0}
.content-section a,.legal a{color:var(--brand);font-weight:500;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.content-section a:hover,.legal a:hover{color:var(--brand-d)}
.content-section .fg a,.content-section .hero-acts a{text-decoration:none}
.legal .card{background:transparent}
.legal table,.meta-table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:14.5px}
.legal th,.legal td,.meta-table th,.meta-table td{padding:11px 14px;border:1px solid var(--rule);text-align:left;vertical-align:top}
.legal th,.meta-table th{background:var(--paper-2);font-weight:600;color:var(--navy);width:210px}
.version-tag{display:inline-block;font-size:12px;font-weight:600;color:var(--brand);background:var(--brand-soft);border:1px solid #CFE2F2;border-radius:100px;padding:3px 11px;margin-left:10px;vertical-align:middle;letter-spacing:0}
.legal .subhead{font-size:18px;color:var(--ink-2);margin:10px 0 6px;font-weight:600}
.legal .tagline,.legal .lead{color:var(--ink-2);margin-bottom:20px}

/* ===== RELATED / GUIDE CARDS ============================================== */
.gcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.gcard{display:block;border:1px solid var(--rule);border-radius:var(--r);padding:20px;background:var(--card);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.gcard:hover{border-color:var(--brand);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.gcard .gk{font-size:12px;font-weight:600;color:var(--sky);margin-bottom:9px}
.gcard h3{font-size:17px;margin-bottom:8px;line-height:1.32}
.gcard p{font-size:14.5px;color:var(--ink-2);margin:0}

/* ===== FORMS ============================================================== */
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.field input,.field select,.field textarea{
    font-family:var(--f);font-size:16px;color:var(--ink);
    padding:12px 14px;border:1px solid var(--rule-2);border-radius:var(--r);background:#fff;min-height:48px;
    transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.field textarea{min-height:140px;resize:vertical;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(22,92,156,.14)}
.form-note{font-size:13.5px;color:var(--ink-3);margin-top:12px}
.form-msg{margin-top:16px;padding:13px 16px;border-radius:var(--r);font-size:14.5px;display:none}
.form-msg.ok{display:block;background:var(--green-soft);border:1px solid #C7E7D6;color:#1A5835}
.form-msg.err{display:block;background:var(--fault-soft);border:1px solid #F0CFCB;color:var(--fault)}

/* ===== CTA BANNERS (legacy .cta-banner kept) ============================== */
.cta-banner,.cta-band{background:var(--navy);color:#fff;border-radius:var(--r-lg);margin:40px auto;max-width:var(--max);padding:40px 34px;text-align:center}
.cta-banner-inner h2,.cta-band h2{color:#fff;font-size:clamp(22px,2.7vw,30px);margin-bottom:12px}
.cta-banner-inner p,.cta-band p{color:var(--navy-text);margin-bottom:8px;max-width:46em;margin-left:auto;margin-right:auto}
.cta-banner .hero-acts,.cta-band .hero-acts{justify-content:center}
.cta-trust{margin-top:16px;font-size:13.5px;color:var(--navy-dim)}

/* ===== FOOTER ============================================================= */
footer{background:var(--navy);color:var(--navy-text);margin-top:0}
.foot-cta{border-bottom:1px solid var(--navy-line);background:linear-gradient(100deg,var(--brand-d),var(--brand) 58%,#1A6FB8)}
.foot-cta .wrap{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;padding-top:40px;padding-bottom:40px}
.foot-cta h2{color:#fff;font-size:clamp(21px,2.6vw,29px)}
.foot-cta p{color:rgba(255,255,255,.86);margin-top:8px;max-width:42em}
.foot-cta .hero-cta{margin-top:0}
.foot-cta .btn-primary{background:#fff;color:var(--brand-d);border-color:#fff}
.foot-cta .btn-primary:hover{background:var(--paper-2);border-color:var(--paper-2)}
.foot-main{padding:48px 0 26px}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:36px}
.foot-brand .fbrand{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.foot-brand .fbrand img{width:38px;height:38px}
.foot-brand .fbrand span{font-size:22px;font-weight:700;color:#fff;letter-spacing:-.025em}
.foot-brand .fbrand span i{font-style:normal;color:var(--green)}
.foot-brand p{font-size:14px;color:var(--navy-dim);max-width:34em}
.foot-sig{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:13px;color:var(--navy-dim)}
.foot-sig i{width:8px;height:8px;border-radius:50%;background:var(--green);flex:0 0 auto}
.foot-col h3{font-size:12.5px;font-weight:700;color:#fff;margin-bottom:14px;letter-spacing:.02em}
.foot-col a{display:block;font-size:14px;color:var(--navy-dim);padding:5px 0;transition:color var(--dur) var(--ease)}
.foot-col a:hover{color:#fff}
.foot-bottom{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;justify-content:space-between;border-top:1px solid var(--navy-line);margin-top:34px;padding-top:20px;font-size:13px;color:var(--navy-dim)}
.foot-bottom a{color:var(--navy-dim)}
.foot-bottom a:hover{color:#fff}
.foot-legal{display:flex;gap:18px}
.av-credit{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--navy-line);border-radius:100px;padding:6px 14px;min-height:34px}
.av-credit .te{font-size:11px;color:var(--navy-dim)}
.av-credit .tc{font-size:13px;font-weight:700;color:#fff}
.av-credit:hover{border-color:var(--sky)}

/* ===== REVEAL (site.js) — reserved: .rv .in .d1 .d2 .d3 =================== */
@media (prefers-reduced-motion:no-preference){
    .rv{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
    .rv.in{opacity:1;transform:none}
    .rv.d2{transition-delay:.07s}
    .rv.d3{transition-delay:.14s}
}

/* ===== RESPONSIVE ========================================================= */
@media (max-width:1040px){
    .cards,.fg,.gcards,.trust-grid{grid-template-columns:repeat(2,1fr)}
    .plans{grid-template-columns:repeat(2,1fr)}
    .statline{grid-template-columns:repeat(2,1fr)}
    .ops-stats{grid-template-columns:repeat(2,1fr)}
    .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
    .nav-links,.nav-actions{display:none}
    .menu-toggle{display:flex}
    .arrive-grid{grid-template-columns:1fr;gap:0;padding-top:46px}
    .arrive-copy{padding-bottom:34px}
    .arrive-media{max-width:460px;margin:0 auto}
    .walk-grid{grid-template-columns:1fr;gap:0}
    .stage{position:relative;top:0;margin-bottom:22px}
    .stage-media{aspect-ratio:4/3}
    .duo{grid-template-columns:1fr;gap:28px}
    .duo.flip .duo-media{order:0}
    .head-center{grid-template-columns:1fr;row-gap:14px}
    .head-center .lede{grid-column:1}
    .calc{grid-template-columns:1fr;gap:22px}
    .form-grid{grid-template-columns:1fr}
    .ctt-row{grid-template-columns:1fr}
}
@media (max-width:660px){
    body{font-size:16px}
    .section{padding:52px 0}
    .walk{padding-top:52px}
    .ops{margin-top:52px}
    .cards,.fg,.gcards,.trust-grid,.plans,.statline,.ops-stats{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr;gap:26px}
    .foot-cta .wrap{flex-direction:column;align-items:flex-start}
    .cta-banner,.cta-band{border-radius:0;padding:34px 22px}
    .content-section,.legal{padding:40px 20px 16px}
    .legal th,.meta-table th{width:auto}
    .foot-bottom{flex-direction:column;align-items:flex-start}
    .rail{width:38px}
    .stage-bar .st{margin-left:0}
}
@media (max-width:420px){
    .wrap,.nav,.arrive-grid,.walk-grid,.walk-intro,.head-center,.duo,.ops-copy,.phero-inner,.page-hero-inner{padding-left:18px;padding-right:18px}
}

/* ===== PRINT ============================================================== */
@media print{
    header,footer,.backdrop,.foot-cta,.cta-banner,.cta-band{display:none!important}
    body{font-size:11pt;color:#000}
    a{color:#000;text-decoration:none}
}

/* screen-reader only */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ===== MOBILE TAP FLOOR ===================================================
   44px minimum on tappable chrome, scoped to touch-size viewports only —
   applying it at desktop turns the footer into a column of tall flex rows. */
@media (max-width:700px){
    .foot-col a,.foot-bottom a,.breadcrumb a{min-height:44px;display:flex;align-items:center}
    .foot-legal{gap:10px;flex-wrap:wrap}
    .nav .brand{min-height:44px;display:flex;align-items:center}
    .av-credit{min-height:44px}
    .legal a.print-link,.content-section a.print-link{min-height:44px;display:inline-flex;align-items:center}
    .chip,.kit span{min-height:32px;display:inline-flex;align-items:center}
}
.print-link{display:inline-flex;align-items:center;gap:8px;font-weight:600}
@media (max-width:700px){
    .foot-legal a{min-width:64px;justify-content:center}
}

/* ===== NARROW-VIEWPORT TABLES ============================================
   Legal and About carry key/value tables. Below 560px they stop being
   tables and stack, rather than pushing the page sideways. */
@media (max-width:560px){
    .legal table,.legal tbody,.legal tr,.legal th,.legal td,
    .meta-table,.meta-table tbody,.meta-table tr,.meta-table th,.meta-table td,
    .content-section .meta-table,.content-section .meta-table tbody,
    .content-section .meta-table tr,.content-section .meta-table th,
    .content-section .meta-table td{display:block;width:auto}
    .legal th,.meta-table th{border-bottom:none;width:auto}
    .legal td,.meta-table td{border-top:none;margin-bottom:12px}
    .legal a,.meta-table a,.content-section a{word-break:break-word}
}

/* ===== GRID BLOWOUT GUARD ================================================
   Grid items default to min-width:auto, so one wide child (a chip row, a
   status bar, a table) can push a 1fr track past the viewport. WebKit is
   stricter about this than Blink — it showed up as 25px of sideways scroll
   on the home page at 390. Every grid child is allowed to shrink. */
.cards > *,.fg > *,.gcards > *,.trust-grid > *,.plans > *,.statline > *,
.ops-stats > *,.duo > *,.calc > *,.form-grid > *,.ctt-row > *,
.walk-grid > *,.foot-grid > *,.head-center > *{min-width:0}
.kit,.chips{max-width:100%}
.stage-bar{min-width:0;flex-wrap:wrap}

/* ===== FEATURE ICONS =====================================================
   Inline SVG on currentColor, so each tile's icon takes that tile's tint.
   Emoji were replaced because every platform draws them differently and
   none of them can be made to sit in the brand palette. */
.fg-item .icon svg,.card-i .icon svg{width:24px;height:24px;display:block;stroke-width:1.85}
.fg-item .icon,.card-i .icon{color:var(--brand)}
.fg-item:nth-child(3n+2) .icon,.card-i:nth-child(3n+2) .icon{color:var(--green-d)}
.fg-item:nth-child(3n) .icon,.card-i:nth-child(3n) .icon{color:#2C7FB8}
.card-i:nth-child(3n+2) .icon{background:var(--green-soft);border-color:#C7E7D6}
.card-i:nth-child(3n) .icon{background:var(--sky-soft);border-color:#CCE9F7}