/* Same palette, type and components as /about: ink background, green fills with white text,
   the app's own sans, square buttons. Static page, no script. */
:root{
  --ink:#060510; --raised:#161522; --card:#0d0b1c;
  --line:rgba(203,208,235,.10); --line-hi:rgba(203,208,235,.18);
  --w:#f8f8f8; --soft:#c9c9d1; --muted:#9899a3;
  --g:#21c95e; --g-soft:rgba(33,201,94,.16); --g-line:rgba(33,201,94,.45);
  --p:#8b58e4;
  --sans:-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --gut:28px;
  color-scheme:dark;
}
@media (max-width:699.98px){ :root{ --gut:16px; } }
*{ box-sizing:border-box; }
html{ background:var(--ink); -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; background:var(--ink); color:var(--w); font:15px/1.5 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:clip; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--p); outline-offset:3px; }
img{ max-width:100%; height:auto; }
.wrap{ width:100%; max-width:1120px; margin:0 auto; padding:0 var(--gut); }

/* ---- the bar ---- */
.bar{ padding:max(14px, env(safe-area-inset-top)) 0 0; }
.bar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.mark{ display:inline-block; padding:8px 10px; margin-left:-10px; border-radius:8px; line-height:0; }
.mark .wm{ display:block; height:20px; width:auto; }

/* ---- the button: green fill, white text, double chevron, square ---- */
.lfg{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--sans); font-size:20px; font-weight:700;
  letter-spacing:.02em; line-height:1; color:#fff; background:var(--g); border:none; border-radius:0; padding:18px 34px; text-decoration:none; cursor:pointer;
  box-shadow:0 8px 30px rgba(33,201,94,.35); transition:transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.lfg:hover{ transform:translateY(-1px); box-shadow:0 12px 40px rgba(33,201,94,.5); filter:brightness(1.07); }
.lfg:active{ transform:translateY(0); }
.lfg svg{ width:1.05em; height:1.05em; flex:none; }
@media (max-width:520px){ .lfg{ width:100%; } }

/* ---- hero ---- */
.hero{ position:relative; isolation:isolate; overflow:hidden; padding:56px 0 72px; }
.hero::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 70% at 85% 0%, rgba(33,201,94,.16), transparent 70%), radial-gradient(50% 60% at 0% 100%, rgba(139,88,228,.12), transparent 70%); }
.eyebrow{ margin:0 0 14px; font:500 clamp(16px, 1.8vw, 22px)/1.1 var(--sans); letter-spacing:-.01em; color:var(--g); }
h1{ margin:0; font:800 clamp(36px, 6.4vw, 76px)/1.02 var(--sans); letter-spacing:-.03em; max-width:13em; }
h1 .ac{ color:var(--g); }
.lede{ margin:24px 0 0; max-width:36em; font:500 clamp(16px, 1.7vw, 21px)/1.5 var(--sans); color:var(--soft); }
.cta{ margin-top:34px; display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.fine{ margin:0; max-width:34em; font:500 13px/1.5 var(--sans); color:var(--muted); }
.fine a{ color:var(--soft); }
.hero .shot{ margin-top:48px; }

/* ---- blocks ---- */
.blk{ padding:80px 0; border-top:1px solid var(--line); }
.feat-label{ margin:0 0 10px; font:500 clamp(16px, 1.8vw, 22px)/1.1 var(--sans); letter-spacing:-.01em; color:var(--g); }
h2{ margin:0; font:800 clamp(26px, 3.8vw, 46px)/1.08 var(--sans); letter-spacing:-.025em; max-width:18em; }
.sub{ margin:18px 0 0; max-width:40em; font:500 clamp(15px, 1.4vw, 18px)/1.55 var(--sans); color:var(--soft); }
.sub a, .note a, .card a, .steps a{ color:var(--w); text-decoration-color:var(--g-line); text-underline-offset:3px; }

.steps{ list-style:none; margin:40px 0 0; padding:0; counter-reset:s; display:grid; gap:14px; grid-template-columns:minmax(0,1fr); }
@media (min-width:1000px){ .steps.cols{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .steps.cols li:last-child:nth-child(odd){ grid-column:1 / -1; } }
.steps li{ counter-increment:s; position:relative; padding:22px 22px 22px 70px; background:var(--card); border:1px solid var(--line); border-radius:14px; }
.steps li::before{ content:counter(s); position:absolute; left:20px; top:20px; width:34px; height:34px; display:grid; place-items:center;
  font:700 16px/1 var(--sans); color:#fff; background:var(--g); border-radius:50%; }
.steps h3{ margin:0 0 6px; font:700 clamp(17px, 1.7vw, 20px)/1.3 var(--sans); letter-spacing:-.01em; }
.steps p{ margin:0; font:500 15px/1.6 var(--sans); color:var(--soft); max-width:46em; }
.steps p + p{ margin-top:8px; }

.cards{ margin:40px 0 0; display:grid; gap:14px; grid-template-columns:minmax(0,1fr); }
@media (min-width:700px){ .cards{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.card{ padding:24px; background:var(--card); border:1px solid var(--line); border-radius:14px; }
.card h3{ margin:0 0 8px; font:700 clamp(17px, 1.7vw, 20px)/1.3 var(--sans); letter-spacing:-.01em; }
.card h3::before{ content:""; display:inline-block; width:8px; height:8px; margin:0 10px 1px 0; border-radius:50%; background:var(--g); }
.card p{ margin:0; font:500 15px/1.6 var(--sans); color:var(--soft); }

.shot{ margin:40px 0 0; border:1px solid var(--line-hi); border-radius:16px; overflow:hidden; background:var(--card); }
.shot img{ display:block; width:100%; height:auto; }
.shot figcaption{ padding:12px 16px; font:500 13px/1.4 var(--sans); color:var(--muted); border-top:1px solid var(--line); }

.split{ display:grid; gap:32px; grid-template-columns:minmax(0,1fr); align-items:center; }
@media (min-width:900px){ .split{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:56px; } }
.split .shot{ margin:0; }
.shot.phone img{ aspect-ratio:4 / 5; object-fit:cover; object-position:50% 50%; }
.points{ margin:28px 0 0; padding:0; list-style:none; display:grid; gap:14px; }
.points li{ position:relative; padding-left:26px; font:500 15px/1.6 var(--sans); color:var(--soft); max-width:42em; }
.points li::before{ content:""; position:absolute; left:2px; top:.6em; width:8px; height:8px; border-radius:50%; background:var(--g); }
.points b{ color:var(--w); font-weight:700; }

.note{ margin:28px 0 0; padding:18px 20px; max-width:46em; border:1px solid var(--g-line); background:var(--g-soft); border-radius:12px; font:500 15px/1.6 var(--sans); color:var(--w); }
.more{ margin:28px 0 0; font:600 15px/1.5 var(--sans); }
.more a{ color:var(--g); text-underline-offset:3px; }

/* ---- questions, as on /about ---- */
.faq-list{ margin-top:36px; max-width:52em; }
.qa{ border-top:1px solid var(--line); }
.qa:last-child{ border-bottom:1px solid var(--line); }
.qa summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 0; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{ content:"+"; flex:none; font:600 22px/1 var(--sans); color:var(--g); }
.qa[open] summary::after{ content:"\2212"; }
.qa summary:focus-visible{ outline:2px solid var(--g); outline-offset:4px; border-radius:4px; }
.qa h3{ margin:0; font:500 clamp(17px, 1.8vw, 22px)/1.3 var(--sans); letter-spacing:-.01em; color:var(--w); }
.qa p{ margin:0 0 22px; max-width:46em; font:500 clamp(14px, 1.3vw, 16px)/1.6 var(--sans); color:var(--soft); }
.qa p a{ color:var(--w); text-underline-offset:3px; }

/* ---- last call and footer ---- */
.final{ text-align:left; }
.final h2{ max-width:14em; }
.final .cta{ margin-top:30px; }
/* the footer is the About page's footer, link for link (tests/landing-pages.test.mjs holds the two together) */
.foot{ border-top:1px solid var(--line); font:500 14px/1.45 var(--sans); color:var(--muted); }
.foot-main{ display:grid; grid-template-columns:minmax(0,1fr); gap:36px; padding:48px 0 44px; }
@media (min-width:1000px){ .foot-main{ grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:48px; } }
.foot-logo{ display:inline-block; border-radius:6px; }
.foot-logo .wm{ display:block; height:24px; width:auto; }
.foot-brand p{ margin:16px 0 20px; max-width:24em; font:600 15px/1.5 var(--sans); color:var(--soft); }
.foot-social{ display:flex; gap:10px; }
.foot-social a{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--line-hi);
  color:var(--soft); transition:color .15s, border-color .15s, background-color .15s; }
.foot-social a:hover, .foot-social a:focus-visible{ color:#fff; border-color:var(--g-line); background:var(--g-soft); }
.foot-social svg{ width:17px; height:17px; fill:currentColor; }
.foot-links{ display:flex; flex-wrap:wrap; gap:28px 32px; } /* five groups: they wrap where the column runs out */
.foot-links div{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.foot-links b{ margin-bottom:4px; font:600 12px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--g); }
.foot-links a{ font:600 15px/1.3 var(--sans); color:var(--soft); text-decoration:none; transition:color .15s; }
.foot-links a:hover, .foot-links a:focus-visible{ color:#fff; }
.foot-fine{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 24px;
  padding:20px 0 max(28px, calc(env(safe-area-inset-bottom) + 16px)); border-top:1px solid var(--line); font-size:12px; }
.foot-powered{ display:inline-flex; align-items:center; gap:7px; font:600 10px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:rgba(248,248,248,.62); text-decoration:none; transition:color .2s; }
.foot-powered img{ display:block; height:13px; width:auto; }
.foot-powered:hover, .foot-powered:focus-visible{ color:#fff; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .lfg, .foot-social a, .foot-links a, .foot-powered{ transition:none; }
}
@media (max-width:699.98px){
  .hero{ padding:36px 0 56px; }
  .blk{ padding:56px 0; }
  .steps li{ padding:18px 16px 18px 60px; }
  .steps li::before{ left:14px; top:16px; }
  .foot-main{ gap:28px; padding:36px 0 32px; }
  .foot-links{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px 16px; }
  .foot-links a{ font-size:14px; }
}