/* ============================================================
   public/css/glass.css: clear liquid glass, shared by the pages built on it.
   Hardly any tint and hardly any blur, so the backdrop stays in charge and the bend shows at
   the rim. That only reads over something bright (ink text stays legible with no white behind it)
   with crisp edges to bend, hence the ring art.
   Every piece of glass sits directly on the backdrop. Glass never sits on glass.
   Nothing with opacity, filter or mask may wrap a piece: it would cut the piece off from its backdrop,
   so data-reveal goes on the piece itself, never on a parent.
   ============================================================ */
.nav-links a[aria-current="page"]{color:var(--ink); background:rgba(13,27,42,.06)}
.kick{font-size:.9375rem; font-weight:600; color:var(--ink)}

/* ---------- the material ---------- */
@property --t{syntax:"<number>"; inherits:true; initial-value:.14}
.lq{position:relative; isolation:isolate; overflow:hidden; color:var(--ink);
  --lift:0 1px 2px rgba(13,27,42,.05), 0 10px 26px -14px rgba(13,27,42,.28);
  background:linear-gradient(155deg,rgba(255,255,255,calc(var(--t) + .14)),rgba(255,255,255,var(--t)) 42%,rgba(255,255,255,calc(var(--t) + .05)));
  -webkit-backdrop-filter:blur(1.5px) saturate(150%); backdrop-filter:blur(1.5px) saturate(150%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.8), inset 0 -1px 1px rgba(255,255,255,.3), inset 0 0 16px rgba(255,255,255,.14), var(--lift)}
/* the rim catching light: brightest on the top left and the bottom right, like a real edge */
.lq::before{content:""; position:absolute; inset:0; z-index:-1; padding:1px; border-radius:inherit; pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.95),rgba(255,255,255,.3) 32%,rgba(255,255,255,.12) 58%,rgba(255,255,255,.75));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* a soft light under the pointer, moved with transform only */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .lq::after{content:""; position:absolute; left:0; top:0; z-index:-1; width:260px; height:260px; margin:-130px 0 0 -130px; border-radius:50%; pointer-events:none;
    background:radial-gradient(closest-side,rgba(255,255,255,.48),rgba(255,255,255,0));
    opacity:0; transform:translate3d(var(--px,0),var(--py,0),0); transition:opacity .3s ease}
  .lq:hover::after{opacity:1}
}
.lq:has(a:focus-visible){--lift:0 0 0 3px var(--ink)}
.lq a:focus-visible{outline:0}
/* a button keeps its own ring: the piece around it clips anything drawn outside */
.lq .btn:focus-visible{outline:3px solid var(--ink); outline-offset:-5px; box-shadow:inset 0 0 0 2px #fff}
/* over a dark photo the same glass goes the other way: a dark tint with white on it */
.lq-dark{--t:.4; --ink:#fff; --ink-2:rgba(255,255,255,.88); --line:rgba(255,255,255,.22); color:#fff;
  background:linear-gradient(155deg,rgba(13,27,42,calc(var(--t) + .06)),rgba(13,27,42,var(--t)) 42%,rgba(13,27,42,calc(var(--t) + .1)))}
/* something inside this piece animates all the time, and a filter would repaint with it on every frame. Too much for a phone */
@media (max-width:767px){ .lq-desk{-webkit-backdrop-filter:none; backdrop-filter:none} }
/* a phone that stuttered on scroll (glass.js) drops the filters and stays see-through */
.lq-lite .lq{-webkit-backdrop-filter:none !important; backdrop-filter:none !important}

/* ---------- the ring art, from the tokens in site.css ---------- */
/* amber and sky stay apart (they'd mix to grey where they meet); white rings fill the corners between them.
   Secondary text and hairlines darken here, because the art behind them isn't white. */
.rings{--r:clamp(900px,84vw,1280px); --ink-2:#1F2E3D; --line:rgba(13,27,42,.13);
  background-color:#EEF3F6;
  background-image:var(--rings-amber),var(--rings-sky),var(--rings-white),var(--rings-white),linear-gradient(135deg,#E1EEFB,#FAF3E4);
  background-repeat:no-repeat;
  background-size:var(--r) var(--r),var(--r) var(--r),var(--r) var(--r),var(--r) var(--r),100% 100%;
  background-position:right calc(var(--r)/-2) top calc(var(--r)/-2),left calc(var(--r)/-2) bottom calc(var(--r)/-2),left calc(var(--r)/-2) top calc(var(--r)/-2),right calc(var(--r)/-2) bottom calc(var(--r)/-2),0 0}
.rings-2{--r:clamp(560px,84vw,1280px); background-position:left calc(var(--r)/-2) bottom calc(var(--r)/-2),right calc(var(--r)/-2) top calc(var(--r)/-2),left calc(var(--r)/-2) top calc(var(--r)/-2),right calc(var(--r)/-2) bottom calc(var(--r)/-2),0 0}
.rings-3{--r:clamp(1000px,92vw,1400px); background-image:var(--rings-amber),linear-gradient(135deg,#FDF4E1,#FBEACB); background-size:var(--r) var(--r),100% 100%; background-position:center,0 0}
.rings-4{--r:clamp(1000px,92vw,1400px); background-image:var(--rings-sky),linear-gradient(135deg,#EDF5FC,#DCEBFA); background-size:var(--r) var(--r),100% 100%; background-position:center,0 0}
@media (max-width:767px){ .rings-3,.rings-4{--r:820px} }

/* ---------- the page frame: one rounded stage to a section ---------- */
:root{--tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2 6.8-7.2' fill='none' stroke='%2314592F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.gl-tick{flex:none; color:#14592F}
.gl-sec{padding-block:clamp(14px,2vw,24px) 0}
.gl-last{padding-bottom:clamp(56px,7vw,96px)}
.gl-stage{padding:clamp(28px,4.4vw,64px) clamp(14px,3.4vw,48px) clamp(18px,4vw,56px); border-radius:clamp(26px,3vw,40px); box-shadow:var(--shadow-lg)}
.gl-stage .sec-head{margin-bottom:clamp(24px,3.4vw,40px)}
.gl-stage .lede{color:var(--ink); font-weight:450}
.gl-top-wrap{padding-top:clamp(84px,7vw,96px)}
.gl-top{padding:clamp(28px,4.4vw,60px) clamp(12px,2.6vw,36px) clamp(24px,3vw,40px); border-radius:clamp(26px,3vw,40px); box-shadow:var(--shadow-lg)}
.gl-hero{text-align:center}
.gl-hero h1{margin-top:18px}
.gl-hero .hero-sub{color:var(--ink); font-weight:450}

/* ---------- pieces more than one page uses ---------- */
.pill{display:inline-flex; align-items:center; gap:9px; min-height:38px; padding:0 16px 0 14px; border-radius:999px; font-size:.9375rem; font-weight:500}
.pill i{flex:none; width:8px; height:8px; border-radius:50%; background:var(--green)}
.ic-chip{flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:15px; background:rgba(255,255,255,.42); color:var(--ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}

.tick-list{display:grid; gap:9px}
.tick-list li{position:relative; padding-left:28px; line-height:1.4}
.tick-list li::before{content:""; position:absolute; left:0; top:2px; width:20px; height:20px; background:var(--tick) center/20px no-repeat}

.segs{--n:2; position:relative; display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); max-width:520px; margin:0 auto 22px; padding:5px; border-radius:22px}
.segs-thumb{position:absolute; left:5px; top:5px; bottom:5px; width:calc((100% - 10px)/var(--n)); border-radius:18px; background:#fff; box-shadow:0 1px 2px rgba(13,27,42,.08), 0 8px 18px -10px rgba(13,27,42,.26); transform:translate3d(calc(var(--i)*100%),0,0); transition:transform var(--t-spring) var(--spring)}
.seg{position:relative; z-index:1; display:grid; align-content:center; justify-items:center; min-height:50px; padding:8px 6px; border-radius:18px; font-weight:600; color:var(--ink-2); transition:color .2s ease}
.seg[aria-selected="true"]{color:var(--ink)}
.seg:focus-visible{outline-offset:-3px}

.faq-glass{display:grid; gap:10px; border-top:0}
.faq-glass .faq-item{--t:.16; padding-inline:clamp(16px,2vw,24px); border-bottom:0; border-radius:24px}
.faq-glass .faq-q{min-height:72px; outline-offset:-2px}
.faq-glass .faq-i{background:rgba(255,255,255,.42); box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.faq-glass .faq-q[aria-expanded="true"] .faq-i{background:var(--amber)}
.faq-glass .faq-a p{color:var(--ink); font-weight:450}
.faq-glass .faq-a a{font-weight:600}

.cta-stage{padding:clamp(28px,6vw,92px) clamp(14px,5vw,72px); border-radius:clamp(26px,3vw,40px); box-shadow:var(--shadow-lg)}
.cta-panel{--t:.12; display:grid; justify-items:center; gap:12px; max-width:760px; margin-inline:auto; padding:clamp(28px,5vw,60px) clamp(20px,4vw,52px); border-radius:36px; text-align:center}
.cta-panel h2{font-size:clamp(2.25rem,1.5rem + 2.8vw,3.75rem)}
.cta-panel p{font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem); font-weight:450}
.cta-panel .btn{margin-top:10px}
.cta-panel .hero-cta{margin-top:10px}
.cta-panel .hero-cta .btn{margin-top:0}
.cta-panel .lede,.cta-panel .hero-note{color:var(--ink); max-width:600px}
.cta-panel .hero-note{margin-top:4px; font-size:.9375rem}

/* ---------- when clear glass isn't wanted ---------- */
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  .lq{background:#fff; -webkit-backdrop-filter:none !important; backdrop-filter:none !important}
  .lq-dark{background:#0D1B2A}
}
@media (prefers-contrast:more){
  .lq{box-shadow:inset 0 0 0 1px var(--ink), var(--lift)}
  .lq-dark{box-shadow:inset 0 0 0 1px #fff, var(--lift)}
  .lq::before,.lq::after{display:none}
}
@media (forced-colors:active){ .lq{border:1px solid CanvasText} .lq::before,.lq::after{display:none} }