/* =====================================================================
   Plat. — landing page
   Copyright (c) 2026 Bridgers Wealth Strategies, LLC. All rights reserved.

   Palette and type are lifted from the tool's own stylesheet so the site
   and the product read as one thing. System fonts only — same rule as the
   tool: no webfonts, no CDN, nothing loaded from a third party.
   ===================================================================== */

:root{
  --ink:        #1d2330;
  --ink-soft:   #4a5568;
  --ink-faint:  #8a93a3;
  --line:       #c7ced9;
  --line-soft:  #e3e8ef;
  --bg:         #eef1f5;
  --paper:      #ffffff;

  --brand:      #2f6f4f;
  --brand-deep: #1f4d37;
  --brand-tint: #eaf3ee;
  --gold:       #b9912f;
  --blue:       #3a6ea5;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 2px 6px rgba(20,30,50,.10), 0 8px 24px rgba(20,30,50,.08);
  --shadow-lg: 0 18px 50px rgba(15,25,40,.18), 0 4px 12px rgba(15,25,40,.10);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;

  --wrap: 1180px;
  --gap: clamp(28px, 5vw, 64px);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--paper);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ line-height:1.14; letter-spacing:-0.02em; margin:0 0 .5em; font-weight:650; }
/* Sized for the seven-word slogan, not a short one — at the old 4.1rem it broke into three
   stubby lines and shoved the hero board into a sea of dead space. */
h1{ font-size:clamp(2.05rem, 4vw, 3rem); letter-spacing:-0.032em; }
h2{ font-size:clamp(1.85rem, 3.4vw, 2.6rem); }
h3{ font-size:1.14rem; letter-spacing:-0.01em; }
p{ margin:0 0 1.05em; }
a{ color:var(--brand-deep); }

code{
  font-family:var(--mono); font-size:.88em;
  background:var(--brand-tint); color:var(--brand-deep);
  padding:.1em .38em; border-radius:5px;
}

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--brand); color:#fff; padding:10px 16px; border-radius:0 0 var(--radius-sm) 0;
}
.skip:focus{ left:0; }

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid var(--gold); outline-offset:2px; border-radius:4px;
}

/* ---------- wordmark ----------
   Text only, no icon — the period is the mark and carries the accent color. */
.wm{
  font-weight:600; letter-spacing:-0.015em; line-height:1;
  font-size:1.42rem; text-decoration:none; user-select:none;
}
.wm .wm-name{ color:var(--ink); }
.wm .wm-dot{ color:var(--brand); }
.nav .wm .wm-name, .foot .wm .wm-name{ color:#fff; }
.nav .wm .wm-dot,  .foot .wm .wm-dot{ color:#6fbf93; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:inherit; font-size:.95rem; font-weight:600; letter-spacing:-0.005em;
  padding:10px 18px; border-radius:var(--radius-sm); border:1px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .14s, border-color .14s, color .14s, transform .14s;
}
.btn-lg{ padding:13px 24px; font-size:1rem; }
.btn-block{ width:100%; }
.btn-primary{ background:var(--brand); color:#fff; border-color:var(--brand); }
.btn-primary:hover{ background:var(--brand-deep); border-color:var(--brand-deep); }
.btn-ghost-dark{ background:transparent; color:#dfe9e3; border-color:rgba(255,255,255,.28); }
.btn-ghost-dark:hover{ border-color:rgba(255,255,255,.6); color:#fff; }
@media (prefers-reduced-motion: no-preference){
  .btn:active{ transform:translateY(1px); }
}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:40;
  background:var(--brand-deep);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.nav-in{ display:flex; align-items:center; gap:24px; height:64px; }
.nav-links{ display:flex; gap:22px; margin-left:8px; flex:1; }
.nav-links a{
  color:#c9dcd2; text-decoration:none; font-size:.94rem; font-weight:500;
}
.nav-links a:hover{ color:#fff; }
.nav-cta{ display:flex; gap:10px; align-items:center; }

@media (max-width: 860px){
  .nav-links{ display:none; }
  .nav-cta .btn-ghost-dark{ display:none; }
}

/* ---------- hero ---------- */
.hero{
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(111,191,147,.16), transparent 62%),
    linear-gradient(180deg, var(--brand-deep) 0%, #17392a 100%);
  color:#e8efeb;
  padding:clamp(52px, 7vw, 92px) 0 clamp(36px, 4vw, 56px);
}
.hero-in{
  display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap:var(--gap); align-items:center;
}
.hero h1{
  color:#fff; margin-bottom:.34em;
  /* backstop for the narrow layout, where the manual breaks are switched off */
  text-wrap: balance;
}
/* the sentence's full stop doubles as the "Plat." mark, in the lighter green the wordmark
   uses on dark backgrounds */
.h1-dot{ color:#6fbf93; }
/* The slogan cannot fit two lines at any size a hero can carry, so break it on phrase
   boundaries rather than letting it wrap mid-thought ("Plans Start with" / "an Estate Plat.").
   Off below 940px, where the hero stacks and the column is full width. */
@media (max-width: 940px){
  .h1-br{ display:none; }
}
.eyebrow{
  text-transform:uppercase; letter-spacing:.14em; font-size:.74rem; font-weight:650;
  color:#7fc9a1; margin:0 0 1.1em;
}
.lede{ font-size:1.13rem; color:#cddcd4; max-width:34em; }
.lede-sm{ font-size:1.01rem; color:#a8bfb4; }
.lede code{ background:rgba(255,255,255,.10); color:#a9e3c4; }

/* two doors */
.doors{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:32px; }
.door{
  display:flex; flex-direction:column; gap:7px;
  padding:20px 20px 18px; border-radius:var(--radius);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  text-decoration:none; color:inherit;
  transition:background .15s, border-color .15s, transform .15s;
}
.door:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.34); }
@media (prefers-reduced-motion: no-preference){
  .door:hover{ transform:translateY(-2px); }
}
.door-k{ font-weight:650; font-size:1.02rem; color:#fff; letter-spacing:-0.01em; }
.door-d{ font-size:.9rem; line-height:1.5; color:#a8bfb4; }
.door-go{ margin-top:5px; font-size:.88rem; font-weight:650; color:#7fc9a1; }
.door-alt{ background:rgba(185,145,47,.12); border-color:rgba(185,145,47,.34); }
.door-alt:hover{ background:rgba(185,145,47,.19); border-color:rgba(185,145,47,.55); }
.door-alt .door-go{ color:#e0bb63; }

/* at-a-glance strip */
.strip{
  display:flex; flex-wrap:wrap; gap:10px 30px;
  list-style:none; margin:clamp(34px,5vw,58px) 0 0; padding:20px 0 0;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:.9rem; color:#9fb8ab;
}
.strip li{ display:flex; align-items:center; gap:9px; }
.strip li::before{
  content:""; width:6px; height:6px; border-radius:50%; background:#6fbf93; flex:0 0 auto;
}
.strip code{ background:rgba(255,255,255,.10); color:#a9e3c4; }

@media (max-width: 940px){
  .hero-in{ grid-template-columns:1fr; }
  .doors{ grid-template-columns:1fr; }
}

/* ---------- the "screen" frame around a board ----------
   The board itself is a real render of the tool inside an inert iframe. The iframe is a fixed
   1920x1080 and is scaled down to whatever width the frame happens to be: cqw does it with no
   JS at all, and site.js re-asserts the same number as a fallback for older engines. */
.screen{
  margin:0;
  background:#20262f;
  border-radius:var(--radius);
  padding:8px;
  box-shadow:var(--shadow-lg);
}
.screen-bar{ display:flex; gap:6px; padding:4px 6px 9px; }
.screen-bar span{ width:9px; height:9px; border-radius:50%; background:#454e5c; }
.shot{
  container-type: inline-size;
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;
  overflow:hidden;
  border-radius:7px;
  background:#dfe3ea;
}
/* Dividing a length by a length yields the unitless number scale() needs. If an engine can't
   resolve it the custom property goes invalid, so site.js measures the result and re-sets
   --shot-scale inline whenever the rendered width doesn't match the frame. */
.shot{ --shot-scale: calc(100cqw / 1920px); }
.shot iframe{
  position:absolute; top:0; left:0;
  width:1920px; height:1080px; border:0;
  transform-origin: 0 0;
  transform: scale(var(--shot-scale));
  pointer-events:none;
}
.screen figcaption{
  margin-top:11px; padding:0 4px;
  font-size:.83rem; color:#98a2b1; line-height:1.45;
}
.screen-dark figcaption{ color:#8fa79b; }
/* Boards are legible on a laptop; on a phone the still is a thumbnail, so always offer the
   1920x1080 original. It is a real page, so it opens and zooms like any other. */
.shot-full{
  color:#b8c8d6; text-decoration:underline; text-underline-offset:2px; white-space:nowrap;
}
.shot-full:hover{ color:#fff; }
.screen-dark .shot-full{ color:#a9cbb9; }
.screen-wide{ margin-top:26px; }

/* ---------- generic bands ---------- */
.band{ padding:clamp(58px, 8vw, 104px) 0; }
.band-tint{ background:var(--bg); }
.band-ink{
  background:linear-gradient(180deg, #17392a 0%, var(--brand-deep) 100%);
  color:#cddcd4;
}
.kicker{
  text-transform:uppercase; letter-spacing:.14em; font-size:.74rem; font-weight:650;
  color:var(--brand); margin:0 0 .85em;
}
.kicker-light{ color:#7fc9a1; }
.band-h{ max-width:16em; }
.band-h-light{ color:#fff; }
.band-sub{ font-size:1.1rem; color:#a8bfb4; max-width:44em; }
.band-sub-dark{ color:var(--ink-soft); }
/* inline link on a dark band */
.link-light{ color:#7fc9a1; text-decoration:underline; text-underline-offset:2px; }
.link-light:hover{ color:#a9e3c4; }
/* "State of Estates" is a publication title, so it is italicised wherever it appears —
   including inside a button, where the surrounding weight would otherwise flatten it. */
.btn i{ font-style:italic; }

/* ---------- pillars ---------- */
.pillars{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:clamp(20px, 3vw, 34px); margin-top:clamp(28px, 4vw, 46px);
}
.pillar{
  border-top:3px solid var(--brand);
  padding-top:20px;
}
.pillar:nth-child(2){ border-top-color:var(--blue); }
.pillar:nth-child(3){ border-top-color:var(--gold); }
.pillar:nth-child(4){ border-top-color:#6a4c93; }
.pillar h3{ display:flex; align-items:baseline; gap:11px; font-size:1.22rem; margin-bottom:.55em; }
.p-num{
  font-size:.76rem; font-weight:700; letter-spacing:.06em;
  color:var(--ink-faint); font-variant-numeric:tabular-nums;
}
.pillar p{ color:var(--ink-soft); font-size:.98rem; margin:0; }

/* ---------- alternating feature rows ---------- */
.feature{ padding:clamp(58px, 8vw, 104px) 0; }
.feature-in{
  display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap:var(--gap); align-items:center;
}
.feature-copy p{ color:var(--ink-soft); }
.feature-dark{
  background:linear-gradient(180deg, #1a3d2d 0%, #122c20 100%);
  color:#cddcd4;
}
.feature-dark .ticks li{ color:#b6cbc0; }

.ticks{ list-style:none; margin:1.4em 0 0; padding:0; display:grid; gap:11px; }
.ticks li{
  position:relative; padding-left:29px; color:var(--ink-soft); font-size:.97rem; line-height:1.5;
}
.ticks li::before{
  content:""; position:absolute; left:2px; top:.52em;
  width:11px; height:6px; border-left:2.5px solid var(--brand); border-bottom:2.5px solid var(--brand);
  transform:rotate(-45deg);
}
.feature-dark .ticks li::before{ border-color:#6fbf93; }

@media (max-width: 940px){
  .feature-in{ grid-template-columns:1fr; }
}

/* ---------- funding ---------- */
.fund-grid{
  display:grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap:var(--gap); align-items:start; margin-top:clamp(28px, 4vw, 46px);
}
.fund-steps{ display:grid; gap:26px; }
.step h3{ color:#fff; margin-bottom:.4em; }
.step p{ color:#a8bfb4; font-size:.97rem; margin:0; }
@media (max-width: 940px){
  .fund-grid{ grid-template-columns:1fr; }
}

/* ---------- .plat file section ---------- */
.file-in{
  display:grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap:var(--gap); align-items:center;
}
.file-in p{ color:var(--ink-soft); }
.fineprint{ font-size:.87rem; color:var(--ink-faint); margin-bottom:0; }
.fineprint-light{ color:#8fa79b; }
.filecard{
  background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
}
.filecard-top{
  display:flex; align-items:center; gap:12px;
  padding:16px 20px; background:var(--brand-tint); border-bottom:1px solid #d3e4d9;
}
.fc-ext{
  font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.05em;
  background:var(--brand); color:#fff; padding:4px 8px; border-radius:5px;
}
.fc-name{ font-weight:650; color:var(--brand-deep); }
.fc-list{ list-style:none; margin:0; padding:6px 20px 16px; }
.fc-list li{
  display:flex; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--line-soft); font-size:.92rem;
}
.fc-list li:last-child{ border-bottom:0; }
.fc-list span{ color:var(--ink-faint); }
.fc-list b{ color:var(--ink); font-weight:600; text-align:right; }
@media (max-width: 940px){
  .file-in{ grid-template-columns:1fr; }
}

/* ---------- roadmap ---------- */
.roadmap{
  list-style:none; counter-reset:rm; margin:clamp(28px,4vw,46px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:18px;
}
.roadmap li{
  background:var(--bg); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:22px 22px 20px;
}
.roadmap li.rm-now{ background:var(--brand-tint); border-color:#c6dfd0; }
.rm-tag{
  display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:12px;
}
.rm-now .rm-tag{ color:var(--brand); }
.roadmap h3{ font-size:1.06rem; margin-bottom:.45em; }
.roadmap p{ margin:0; font-size:.92rem; color:var(--ink-soft); }

/* Closing line under the roadmap. The rhyme (SLAT / CRAT / GRAT / Plat.) only lands if the
   line gets room to be read as a line, so it is centered and set larger than body copy. */
.roadmap-tag{
  margin:clamp(30px,4vw,46px) auto 0;
  max-width:30em; text-align:center;
  font-size:clamp(1.1rem, 1.9vw, 1.4rem); line-height:1.45;
  letter-spacing:-0.012em; color:var(--ink);
}

/* Which tiers get the plats above. Deliberately quieter than .roadmap-tag — it is a
   qualification on the promise, and it should not outshout the promise itself. */
.roadmap-note{
  margin:18px auto 0; max-width:44em; text-align:center;
  font-size:.88rem; line-height:1.6; color:var(--ink-faint);
}
.roadmap-note b{ color:var(--ink-soft); }
.rt-dot{ color:var(--brand); }

/* ---------- access ---------- */
.access-in{ max-width:780px; }
.steps-num{
  list-style:none; counter-reset:s; margin:1.6em 0 0; padding:0; display:grid; gap:15px;
}
.steps-num li{
  counter-increment:s; position:relative; padding-left:44px;
  color:#b6cbc0; font-size:.99rem; line-height:1.55;
}
.steps-num li::before{
  content:counter(s);
  position:absolute; left:0; top:0;
  width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
  color:#7fc9a1; font-size:.8rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.steps-num b{ color:#fff; font-weight:650; }
/* ---------- the two access routes ----------
   One is live and one is not, and the difference has to survive a skim: the live route keeps
   the green accent the rest of the site uses for "available", the forthcoming one is muted so
   nobody reads it as something they can use today. */
.routes-h{
  margin:34px 0 14px; font-size:.74rem; font-weight:650;
  text-transform:uppercase; letter-spacing:.14em; color:#7fc9a1;
}
/* 205px, not 260px: .access-in caps the column at 780px, which leaves ~732px here — enough
   for three tracks only below about 230px each. At 260px the third route wrapped onto its
   own row, which wrecks the comparison the .route-inc lines exist to make. Widening
   .access-in instead would stretch the prose above it past a comfortable measure. */
.routes{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(205px, 1fr)); gap:14px;
}
.route{
  display:flex; flex-direction:column; gap:7px;
  padding:18px 19px; border-radius:var(--radius);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
}
.route-tag{
  font-size:.66rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:#8fa79b;
}
.route-tag.is-open{ color:#7fc9a1; }
.route-k{ font-weight:650; color:#fff; font-size:1rem; letter-spacing:-0.01em; }
.route-d{ font-size:.9rem; line-height:1.5; color:#a8bfb4; }
.route-soon{ background:rgba(255,255,255,.035); border-style:dashed; }
.route-soon .route-k{ color:#cddcd4; }

/* What each route actually gets you. Pushed to the bottom of the card with margin-top:auto
   so the three lines sit level with each other even though the descriptions above them run
   to different lengths — the comparison is the point, and a ragged row breaks it. */
.route-inc{
  margin-top:auto; padding-top:11px; border-top:1px solid rgba(255,255,255,.13);
  font-size:.82rem; font-weight:650; color:#7fc9a1;
}
.route-soon .route-inc{ color:#9dbcac; }

/* The training offer. Sits between the route cards and the CTA, so it reads as something
   a subscription gets you rather than a fourth way in. */
.route-train{
  margin:18px 0 0; padding:15px 17px; border-radius:var(--radius);
  background:rgba(127,201,161,.09); border:1px solid rgba(127,201,161,.26);
  font-size:.9rem; line-height:1.55; color:#cddcd4;
}
.route-train b{ color:#fff; }

.access-cta{ display:flex; flex-wrap:wrap; gap:12px; margin:32px 0 20px; }

/* ---------- lead form ---------- */
.engage-in{
  display:grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap:var(--gap); align-items:start;
}
.engage-copy p{ color:var(--ink-soft); }
/* Training is a subscriber benefit sitting inside the "have it built for you" section, so
   it needs to read as a different offer from the paid build above it — hence the rule and
   the tint rather than another paragraph. */
.engage-note{
  margin:18px 0 0; padding:14px 16px; border-radius:var(--radius);
  background:rgba(47,111,79,.06); border-left:3px solid var(--brand);
  font-size:.9rem; line-height:1.55; color:var(--ink-soft);
}
.engage-note b{ color:var(--ink); }

.lead{
  background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:26px;
}
.lead h3{ font-size:1.2rem; margin-bottom:1em; }
.lead label{
  display:block; margin-bottom:14px;
  font-size:.83rem; font-weight:600; color:var(--ink-soft); letter-spacing:.005em;
}
.lead .req{ color:#b23a48; margin-left:2px; }
.lead input, .lead select, .lead textarea{
  display:block; width:100%; margin-top:5px;
  font:inherit; font-size:.95rem; font-weight:400; color:var(--ink);
  padding:9px 11px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:#fff;
}
.lead textarea{ resize:vertical; min-height:92px; }
.lead input:focus, .lead select:focus, .lead textarea:focus{ border-color:var(--brand); }
.lead .row2{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.lead-note{ font-size:.81rem; color:var(--ink-faint); margin:2px 0 18px; line-height:1.45; }
.lead-status{ margin:14px 0 0; font-size:.89rem; min-height:1.3em; }
.lead-status.ok{ color:var(--brand-deep); font-weight:600; }
.lead-status.err{ color:#b23a48; font-weight:600; }
.lead .field-bad input, .lead .field-bad textarea{ border-color:#b23a48; }

/* ---------- honeypot ----------
   Off-screen rather than display:none. A bot that skips hidden fields is
   looking for display:none and visibility:hidden; absolute positioning reads as
   visible to a naive DOM parser, which is the whole point. Humans are kept out
   by aria-hidden and tabindex="-1" on the markup, not by this rule. */
.hp{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

/* ---------- captcha row ----------
   Deliberately quiet. It is a status line, not a challenge — there is nothing
   to click, so anything that draws the eye is drawing it away from the button
   underneath. */
/* display:flex would otherwise win over the hidden attribute, which site.js
   sets when there is no endpoint to verify against. */
.captcha[hidden]{ display:none; }
.captcha{
  display:flex; align-items:center; gap:8px;
  margin:0 0 14px; font-size:.81rem; line-height:1.4;
  color:var(--ink-faint);
  /* holds the row open while idle is blank, so revealing the status does not shove the
     Send button down under the reader's cursor */
  min-height:1.4em;
}
/* Idle shows nothing at all — not even the dot, which on its own beside empty text reads
   as something half-loaded. Hidden with opacity so the row keeps its width and height. */
.captcha[data-state="idle"] .captcha-dot{ opacity:0; }
.captcha-dot{
  flex:none; width:9px; height:9px; border-radius:50%;
  background:var(--line); transition:background .25s ease;
}
.captcha[data-state="working"] .captcha-dot{
  background:var(--gold);
  animation:captcha-pulse 1s ease-in-out infinite;
}
.captcha[data-state="ready"] .captcha-dot{ background:var(--brand); }
.captcha[data-state="ready"] .captcha-text{ color:var(--brand-deep); font-weight:600; }
.captcha[data-state="failed"] .captcha-dot{ background:#b23a48; }
.captcha[data-state="failed"] .captcha-text{ color:#b23a48; }

@keyframes captcha-pulse{ 50%{ opacity:.35; } }

/* Someone who has asked for less motion still gets the color change. */
@media (prefers-reduced-motion: reduce){
  .captcha-dot{ animation:none !important; transition:none; }
}

@media (max-width: 940px){
  .engage-in{ grid-template-columns:1fr; }
}
@media (max-width: 520px){
  .lead .row2{ grid-template-columns:1fr; }
}

/* ---------- FAQ ---------- */
.faq{ margin-top:clamp(24px,3.5vw,40px); max-width:820px; }
.faq details{
  border-bottom:1px solid var(--line-soft);
}
.faq summary{
  cursor:pointer; list-style:none;
  padding:19px 34px 19px 0; position:relative;
  font-weight:600; font-size:1.02rem; color:var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:6px; top:calc(50% - 4px);
  width:9px; height:9px; border-right:2px solid var(--ink-faint); border-bottom:2px solid var(--ink-faint);
  transform:rotate(45deg) translateY(-2px); transition:transform .15s;
}
.faq details[open] summary::after{ transform:rotate(-135deg) translateY(-2px); }
.faq details p{
  margin:0 0 20px; color:var(--ink-soft); font-size:.97rem; max-width:62em;
}

/* ---------- footer ---------- */
.foot{
  background:var(--ink); color:#98a2b1;
  padding:clamp(44px,6vw,68px) 0 32px; font-size:.92rem;
}
.foot-in{
  display:flex; flex-wrap:wrap; gap:28px 48px; justify-content:space-between;
  padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,.10);
}
.wm-foot{ font-size:1.3rem; }
.foot-brand p{ margin:.7em 0 0; max-width:26em; }
.foot-links{ display:flex; flex-wrap:wrap; gap:10px 26px; align-content:flex-start; }
.foot-links a{ color:#b8c1cd; text-decoration:none; }
.foot-links a:hover{ color:#fff; }
.foot-legal{ padding-top:24px; font-size:.83rem; color:#6b7484; }
.foot-legal p{ margin:0 0 .7em; max-width:70em; }
.foot-legal p:last-child{ margin-bottom:0; }