/* ═══════════════════════════════════════════════════════════════════
 * Continuity — continuity.bldtechco.com
 * Continuity's own identity, per the Sept blueprint Part 3:
 * Navy / White / Grey / Signal Blue, Inter.
 *
 * CONTRAST (WCAG AA, measured). Signal Blue #2D7FF9 is 3.81:1 on white —
 * fine for glows, borders, icons and focus rings, but it FAILS for small
 * text and for white text on a blue button. So the brand blue stays for
 * decoration, and text and button fills use deeper shades of the same hue:
 *   --blue-ink  #2465C7  small text on white        5.58
 *   --blue-btn  #1A66D8  white text on this fill    5.34   (hover #1557BD 6.71)
 *   --blue-nv   #7FB2FF  small text on navy         6.70
 *   --grey      #536273  on white 6.25 · on #F4F6F8 5.76
 *   --nav-link  #C8D4E0  on navy 9.62
 * New York leads the country in website-accessibility lawsuits; these
 * numbers are the reason the shades differ from the swatch.
 * ═══════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-400.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-500.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-600.woff2") format("woff2");}

:root{
  --navy:#0F2A4A; --navy-2:#153659; --white:#FFFFFF; --bg:#F4F6F8;
  --grey:#536273; --body:#172B42; --line:#DDE3EA;
  --blue:#2D7FF9; --blue-ink:#2465C7; --blue-btn:#1A66D8; --blue-btn-h:#1557BD; --blue-nv:#7FB2FF;
  --nav-link:#C8D4E0;
  --nav-h:72px; --r:12px; --rb:8px;
  /* Motion tokens — custom curves; the built-in easings are too weak.
     ease-out: entering, answering the user. ease-in-out: moving on screen.
     drawer: iOS's sheet curve. */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --ease:var(--ease-out);
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);-webkit-text-size-adjust:100%;}
body{margin:0;font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--body);background:var(--white);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
img,svg{display:block;max-width:100%;}
h1,h2,h3,p,figure,dl,dd,ol,ul{margin:0;}
ol,ul{padding:0;list-style:none;}
a{color:inherit;}
button,input,select{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px;}
.defs{position:absolute;width:0;height:0;overflow:hidden;}
.lock{overflow:hidden;}
.skip{position:absolute;left:16px;top:-60px;z-index:1000;background:var(--navy);color:#fff;padding:10px 16px;border-radius:var(--rb);font-weight:600;text-decoration:none;transition:top .2s;}
.skip:focus{top:12px;}

.wrap{width:min(100% - 48px,1248px);margin-inline:auto;}
.center{text-align:center;}

/* ── type ── */
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-ink);}
.eyebrow.sm{font-size:12px;}
.eyebrow.on-navy{color:var(--blue-nv);}
h1{font-size:clamp(36px,5.2vw,56px);line-height:1.1;font-weight:600;letter-spacing:-.025em;color:var(--navy);}
h2{font-size:clamp(26px,3vw,32px);line-height:1.2;font-weight:600;letter-spacing:-.018em;color:var(--navy);margin-top:12px;}
h2.center{margin-inline:auto;max-width:22em;}
.fine{font-size:13px;color:var(--grey);margin-top:20px;}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:var(--rb);
  font-weight:600;font-size:15px;text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background-color .12s ease,color .12s ease,border-color .12s ease,transform 160ms var(--ease-out),box-shadow .2s ease;}
.btn-sm{height:40px;padding:0 20px;font-size:14px;}
.btn-block{display:flex;width:100%;height:44px;}
.btn-blue{background:var(--blue-btn);color:#fff;}
.btn-blue:hover{background:var(--blue-btn-h);}
.btn-line{background:transparent;color:var(--navy);border-color:var(--navy);}
.btn-line:hover{background:var(--navy);color:#fff;}
.btn:active{transform:scale(.97);}

/* ═════════ 3.1 NAV ═════════ */
.nav{position:fixed;inset:0 0 auto;height:var(--nav-h);z-index:120;background:var(--navy);transition:box-shadow .25s;}
.nav.scrolled{box-shadow:0 1px 0 rgba(255,255,255,.08),0 8px 24px rgba(8,22,40,.18);}
.nav-in{height:100%;display:flex;align-items:center;gap:32px;}
.lockup{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-size:20px;font-weight:600;letter-spacing:-.01em;}
.mark{width:28px;height:auto;color:#fff;flex:none;}
.nav-links{display:flex;gap:32px;margin-left:auto;}
.nav-links a{font-size:15px;font-weight:500;color:var(--nav-link);text-decoration:none;transition:color .12s;}
.nav-links a:hover{color:#fff;}
.nav-cta{flex:none;}
.burger{display:none;margin-left:auto;width:40px;height:40px;border:0;background:transparent;cursor:pointer;padding:8px;position:relative;z-index:120;}
.burger span{display:block;width:24px;height:2px;background:#fff;border-radius:1px;transition:transform .28s var(--ease-out),opacity .2s ease;}
.burger:active{transform:scale(.92);}
.burger{transition:transform 160ms var(--ease-out);}
.burger span+span{margin-top:5px;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.panel{position:fixed;top:0;right:0;bottom:0;width:min(86vw,360px);z-index:110;background:var(--navy);
  padding:96px 32px 32px;transform:translateX(100%);transition:transform 280ms var(--ease-drawer);box-shadow:-16px 0 48px rgba(8,22,40,.3);}
.panel.open{transform:none;}
.panel nav{display:flex;flex-direction:column;gap:24px;}
.panel a{font-size:24px;font-weight:600;color:#fff;text-decoration:none;}
.panel a.panel-sub{font-size:16px;font-weight:500;color:var(--nav-link);margin-top:12px;}

@media (max-width:860px){
  .nav-links,.nav-cta{display:none;}
  .burger{display:block;}
  .nav-in{gap:16px;}
}

/* ═════════ 3.2 HERO ═════════ */
.hero{position:relative;overflow:hidden;background:var(--bg);padding:calc(var(--nav-h) + 96px) 0 80px;}
.hero-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;}
.hero h1{max-width:720px;margin-top:24px;}
.hero .sub{max-width:560px;margin-top:24px;font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--grey);}
.actions{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:40px;}
.status{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:13px;color:var(--grey);}
.dot{width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px rgba(45,127,249,.15);}

/* Atmospheric glow (blueprint 3.2 + 5.2 cursor follow). Navy at ~16% and
   blue at ~8%, bleeding off the upper right, behind everything. JS nudges
   the wrapper up to 24px toward the cursor. */
.glow{position:absolute;inset:0;z-index:0;pointer-events:none;will-change:transform;}
.glow span{position:absolute;border-radius:50%;}
.glow-navy{width:1400px;height:1400px;right:-560px;top:-700px;background:radial-gradient(closest-side,rgba(15,42,74,.15),rgba(15,42,74,.09) 30%,rgba(15,42,74,.035) 60%,rgba(15,42,74,.008) 82%,rgba(15,42,74,0));}
.glow-blue{width:820px;height:820px;right:-220px;top:-360px;background:radial-gradient(closest-side,rgba(45,127,249,.08),rgba(45,127,249,.045) 35%,rgba(45,127,249,.015) 65%,rgba(45,127,249,0));}

.float{margin-top:64px;width:100%;max-width:560px;animation:float 6s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(-4px);}50%{transform:translateY(4px);}}
.tilt{perspective:1200px;cursor:grab;touch-action:pan-y;}
.tilt.dragging{cursor:grabbing;}
.tilt .payapp{transform-style:preserve-3d;will-change:transform;}

/* ── the pay-application card (hero + how it works) ── */
.payapp{background:#fff;border:1px solid var(--line);border-radius:var(--r);text-align:left;padding:24px;
  box-shadow:0 1px 2px rgba(15,42,74,.06),0 24px 48px -12px rgba(15,42,74,.18);font-variant-numeric:tabular-nums;}
.pa-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;}
.pa-kicker{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-ink);}
.pa-title{font-size:17px;font-weight:600;color:var(--navy);margin-top:2px;}
.pa-status{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:12px;font-weight:600;color:var(--navy);
  background:#EAF2FF;border:1px solid #CFE0FB;border-radius:999px;padding:4px 10px;}
.pa-status i{width:6px;height:6px;border-radius:50%;background:var(--blue);}
.pa-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;padding:14px 0;border-block:1px solid var(--line);}
.pa-meta dt{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);}
.pa-meta dd{font-size:14px;font-weight:500;color:var(--body);margin-top:2px;}
.pa-progress{display:flex;align-items:center;gap:12px;margin-top:16px;}
.pa-bar{flex:1;height:6px;border-radius:3px;background:#E9EEF3;overflow:hidden;}
.pa-bar span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--navy),var(--blue));border-radius:3px;transform:scaleX(.65);transform-origin:left center;transition:transform 250ms var(--ease-out);}
.pa-progress p{font-size:13px;color:var(--grey);flex:none;}
.pa-progress b{color:var(--navy);}
.pa-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:14px;}
.pa-table th{text-align:left;font-weight:400;color:var(--grey);padding:8px 0;}
.pa-table td{text-align:right;font-weight:500;color:var(--body);padding:8px 0;white-space:nowrap;}
.pa-table tr+tr th,.pa-table tr+tr td{border-top:1px solid #EEF2F6;}
.pa-table .due th{color:var(--navy);font-weight:600;}
.pa-table .due td{color:var(--navy);font-weight:600;font-size:18px;}
.pa-table .due th,.pa-table .due td{border-top:1px solid var(--navy);padding-top:12px;}
.pa-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;font-size:12px;color:var(--grey);}
.pa-sample{font-weight:600;color:var(--navy);background:var(--bg);border-radius:4px;padding:1px 8px;}

/* ═════════ SECTIONS ═════════ */
.sec{position:relative;padding:96px 0;overflow:hidden;}
.sec-white{background:#fff;}
.sec-grey{background:var(--bg);}
.sec > .wrap{position:relative;z-index:1;}

/* Ambient gradient mesh (5.2): one soft blob of the section's accent at
   ~5%, drifting a slow figure-eight over 40s. Never consciously noticed. */
.mesh::before{content:"";position:absolute;z-index:0;width:900px;height:900px;left:50%;top:40%;margin:-450px 0 0 -450px;
  border-radius:50%;background:radial-gradient(closest-side,rgba(45,127,249,.05),rgba(45,127,249,.025) 40%,rgba(45,127,249,.006) 75%,rgba(45,127,249,0));
  animation:mesh 40s ease-in-out infinite;pointer-events:none;}
.mesh-dark::before{background:radial-gradient(closest-side,rgba(127,178,255,.07),rgba(127,178,255,0));}
@keyframes mesh{
  0%,100%{transform:translate(0,0);} 25%{transform:translate(220px,-90px);}
  50%{transform:translate(0,0);} 75%{transform:translate(-220px,90px);}
}

/* 3.3 dual scope + 3.6 who */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px;}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px;transition:transform 250ms var(--ease-out),box-shadow 250ms ease;}
@media (hover:hover) and (pointer:fine){.card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -18px rgba(15,42,74,.22);}}
.card h3{font-size:20px;font-weight:600;color:var(--navy);margin-top:10px;letter-spacing:-.01em;}
.card p:not(.eyebrow){margin-top:10px;color:var(--body);}
.more{display:inline-flex;gap:6px;margin-top:20px;font-weight:600;color:var(--navy);text-decoration:none;}
.more span{transition:transform .2s var(--ease);}
@media (hover:hover) and (pointer:fine){.more:hover span{transform:translateX(4px);}}
.ico{width:24px;height:24px;fill:none;stroke:var(--navy);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.card .ico+h3{margin-top:16px;}

/* 3.4 proof strip */
.proof{background:var(--bg);padding:64px 0;}
.proof-in{display:grid;grid-template-columns:repeat(3,1fr);}
.stat{text-align:center;padding:0 16px;}
.stat+.stat{border-left:1px solid var(--line);}
.num{font-size:32px;font-weight:600;color:var(--navy);line-height:1.1;font-variant-numeric:tabular-nums;}
.num.pop{animation:pop 1.2s var(--ease-out) both;}
@keyframes pop{from{opacity:0;transform:scale(.9);}to{opacity:1;transform:none;}}
.lbl{font-size:12px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--grey);margin-top:6px;}

/* 3.5 how it works */
.how{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-top:64px;}
.how + .how{margin-top:96px;padding-top:96px;border-top:1px solid var(--line);}
.how-label{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);}
.steps{margin-top:20px;}
.steps li{display:flex;gap:20px;padding:20px 0;border-top:1px solid var(--line);}
.steps li:last-child{border-bottom:1px solid var(--line);}
.steps .n{font-size:14px;font-weight:600;color:var(--blue-ink);min-width:28px;padding-top:2px;font-variant-numeric:tabular-nums;}
.steps h3{font-size:18px;font-weight:600;color:var(--navy);letter-spacing:-.01em;}
.steps p{font-size:15px;color:var(--grey);margin-top:4px;}

.mail{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:0 1px 2px rgba(15,42,74,.06),0 24px 48px -16px rgba(15,42,74,.16);}
.mail-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line);background:#FAFBFC;}
.mail-bar span{width:10px;height:10px;border-radius:50%;background:#DDE3EA;}
.mail-bar p{margin-left:auto;margin-right:auto;font-size:13px;font-weight:600;color:var(--navy);transform:translateX(-18px);}
.mail-fields{padding:0 20px;}
.mail-fields div{display:grid;grid-template-columns:72px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid #EEF2F6;}
.mail-fields dt{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);padding-top:2px;}
.mail-fields dd{font-size:14px;color:var(--body);}
.mail-body{padding:18px 20px 6px;font-size:15px;line-height:1.6;color:var(--body);}
.mail-body p+p{margin-top:10px;}
.mail-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 20px 18px;}
.chip{font-size:13px;font-weight:600;color:#fff;background:var(--navy);border-radius:var(--rb);padding:7px 12px;}
.auto{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--grey);}
.auto i{width:8px;height:8px;border-radius:50%;background:var(--blue);animation:pulse 2.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(45,127,249,.35);}50%{box-shadow:0 0 0 6px rgba(45,127,249,0);}}
.sample-note{font-size:12px;color:var(--grey);padding:10px 20px;border-top:1px solid var(--line);background:#FAFBFC;}

.calc{margin-top:28px;padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);}
.calc-title{font-size:13px;font-weight:600;color:var(--navy);margin-bottom:8px;}
.calc-row{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--body);margin-top:10px;}
.calc-row output{font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums;}
.calc input[type=range]{width:100%;margin:8px 0 4px;accent-color:var(--blue-btn);height:28px;}
.calc select{width:100%;height:40px;margin-top:6px;padding:0 12px;border:1px solid #C9D3DE;border-radius:var(--rb);background:#fff;color:var(--body);}
.calc-fine{font-size:12px;color:var(--grey);margin-top:12px;line-height:1.5;}

.callout{margin-top:96px;background:var(--bg);border-radius:var(--r);padding:24px 28px;display:grid;gap:4px;}
.callout-h{font-size:20px;font-weight:600;color:var(--navy);letter-spacing:-.01em;}
.callout-s{font-size:14px;color:var(--grey);}

/* 3.7 pricing */
.price{width:min(100%,480px);margin:48px auto 0;background:#fff;border:2px solid var(--blue);border-radius:var(--r);padding:40px;text-align:left;
  box-shadow:0 24px 48px -24px rgba(45,127,249,.35);}
.price-h{font-size:20px;font-weight:600;color:var(--navy);}
.price-b{font-size:16px;color:var(--grey);margin:8px 0 28px;}

/* 3.8 CTA */
.cta{position:relative;overflow:hidden;background:var(--navy);padding:96px 0;}
.cta > .wrap{position:relative;z-index:1;}
.cta h2{color:#fff;}
.cta-sub{font-size:16px;color:var(--nav-link);max-width:34em;margin:16px auto 32px;}

/* ═════════ FOOTER (1.8 pattern, recoloured navy) ═════════ */
.foot{background:var(--navy);color:var(--nav-link);padding:80px 0 0;border-top:1px solid rgba(255,255,255,.08);}
.foot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:48px;}
.foot-col{display:flex;flex-direction:column;align-items:flex-start;gap:12px;}
.foot-about{font-size:14px;line-height:1.6;margin-top:4px;max-width:24em;}
.foot-about a{color:#fff;}
.foot-h{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-nv);margin-bottom:4px;}
.foot-col a:not(.lockup),.linkish{font-size:14px;color:var(--nav-link);text-decoration:none;transition:color .12s;}
.foot-col a:not(.lockup):hover,.linkish:hover{color:#fff;}
.linkish{background:none;border:0;padding:0;cursor:pointer;text-align:left;}
.foot-base{margin-top:64px;border-top:1px solid rgba(200,212,224,.18);padding:32px 0 40px;text-align:center;}
.foot-base p{font-size:12px;color:var(--nav-link);}

/* ═════════ COOKIE BANNER ═════════ */
.cookie{position:fixed;left:16px;bottom:16px;z-index:200;width:min(420px,calc(100% - 32px));background:#fff;color:var(--body);
  border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:0 24px 64px -16px rgba(15,42,74,.35);
  opacity:0;transform:translateY(calc(100% + 16px));transition:opacity 400ms ease,transform 400ms ease;}
.cookie.show{opacity:1;transform:none;}
.cookie-h{font-weight:600;color:var(--navy);}
.cookie p{font-size:14px;line-height:1.55;}
.cookie p+p{margin-top:6px;}
.cookie a{color:var(--blue-ink);}
.cookie-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;}
.cookie-actions .btn{flex:1;}

/* ═════════ REVEALS ═════════
   Hidden only when JS is running (boot.js swaps no-js → js before first
   paint). With JS off, everything is simply visible. */
.js .rv{opacity:0;transform:translateY(12px);transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out);}
.js .rv.in{opacity:1;transform:none;}
.js [data-lines].split .ln{display:block;opacity:0;transform:translateY(12px);transition:opacity .4s var(--ease),transform .4s var(--ease);}
.js [data-lines].split.in .ln{opacity:1;transform:none;}

/* ═════════ RESPONSIVE ═════════ */
@media (max-width:960px){
  .how{grid-template-columns:1fr;gap:40px;}
}
@media (max-width:760px){
  .wrap{width:min(100% - 32px,1248px);}
  .hero{padding:calc(var(--nav-h) + 56px) 0 64px;}
  .sec{padding:72px 0;}
  .duo{grid-template-columns:1fr;}
  .proof-in{grid-template-columns:1fr;gap:28px;}
  .stat+.stat{border-left:0;border-top:1px solid var(--line);padding-top:28px;}
  .foot-grid{grid-template-columns:1fr;gap:40px;}
  .price{padding:28px;}
  .payapp{padding:18px;}
  .pa-meta{grid-template-columns:1fr;}
  .pa-table{font-size:13px;}
  .callout{margin-top:64px;}
  .how + .how{margin-top:64px;padding-top:64px;}
}

/* ═════════ REDUCED MOTION ═════════
   Fewer and gentler, not zero: travel, drift and loops stop; short
   opacity fades stay because they still explain a change. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .float,.mesh::before,.auto i,.num.pop{animation:none!important;}
  .js .rv,.js [data-lines].split .ln{transform:none!important;transition:opacity 200ms ease!important;}
  .panel{transform:none;opacity:0;visibility:hidden;transition:opacity 200ms ease,visibility 0s linear 200ms;}
  .panel.open{opacity:1;visibility:visible;transition:opacity 200ms ease;}
  .cookie{transform:none;transition:opacity 200ms ease;}
  .btn,.card,.more span,.pa-bar span{transition-property:opacity,background-color,color,border-color,box-shadow!important;}
}

/* ═════════ 404 ═════════ */
.nf-body{background:var(--navy);}
.nf{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:48px 0;text-align:center;position:relative;overflow:hidden;}
.nf::before{content:"";position:absolute;width:900px;height:900px;right:-300px;top:-420px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(45,127,249,.12),rgba(45,127,249,0));pointer-events:none;}
.nf-in{position:relative;width:min(100% - 32px,560px);}
.nf-mark{width:64px;height:auto;margin:0 auto 32px;color:#fff;}
.nf h1{font-size:32px;line-height:1.2;color:#fff;margin-top:12px;}
.nf-sub{color:var(--nav-link);margin-top:12px;}
.nf .actions{margin-top:32px;}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5);}
.btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff;}

/* ═════════ DRAFTING GRID ═════════
   Continuity's customers work from drawings, so the hero sits on a faint
   blueprint grid — minor lines every 24px, major every 120px — fading out
   toward the edges so it never competes with the copy. Static; it's
   texture, not motion. */
.draft{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(to right,rgba(15,42,74,.075) 1px,transparent 1px) 0 0/120px 120px,
    linear-gradient(to bottom,rgba(15,42,74,.075) 1px,transparent 1px) 0 0/120px 120px,
    linear-gradient(to right,rgba(15,42,74,.04) 1px,transparent 1px) 0 0/24px 24px,
    linear-gradient(to bottom,rgba(15,42,74,.04) 1px,transparent 1px) 0 0/24px 24px;
  background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 38%,#000 25%,rgba(0,0,0,.4) 60%,transparent 85%);
  mask-image:radial-gradient(ellipse 72% 70% at 50% 38%,#000 25%,rgba(0,0,0,.4) 60%,transparent 85%);}
.draft-dark{background:
    linear-gradient(to right,rgba(200,212,224,.07) 1px,transparent 1px) 0 0/120px 120px,
    linear-gradient(to bottom,rgba(200,212,224,.07) 1px,transparent 1px) 0 0/120px 120px,
    linear-gradient(to right,rgba(200,212,224,.035) 1px,transparent 1px) 0 0/24px 24px,
    linear-gradient(to bottom,rgba(200,212,224,.035) 1px,transparent 1px) 0 0/24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 60% 80% at 50% 50%,#000 20%,transparent 80%);
  mask-image:radial-gradient(ellipse 60% 80% at 50% 50%,#000 20%,transparent 80%);}