/* ==========================================================================
   The marketing pages
   --------------------------------------------------------------------------
   The board is a document: 1px borders, 3px radius, almost no shadow. The
   homepage is allowed a little more voice -- one gradient band at the top, one
   at the bottom, and colour drawn from the logo in between -- but it uses the
   same tokens, the same mono microtype and the same card component, because
   the point of the page is to show the actual product.

   Bands are full-bleed; .band__in carries the measure. Nothing here uses a
   style attribute or a script (CSP: style-src 'self', script-src 'self').
   ========================================================================== */

.band{width:100%}
.band__in{max-width:1120px;margin:0 auto;padding:56px 22px}
.band--tight .band__in{padding:34px 22px}
.band--alt{background:var(--surface);border-block:1px solid var(--line)}

/* ---------------------------------------------------------------- hero -- */

.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(1100px 420px at 12% -10%, color-mix(in srgb,var(--brand-blue) 16%, transparent), transparent 70%),
    radial-gradient(900px 380px at 88% 0%,   color-mix(in srgb,var(--brand-teal) 14%, transparent), transparent 68%),
    linear-gradient(180deg, var(--surface), var(--ground));
  border-bottom:1px solid var(--line);
}
.hero__in{
  max-width:1120px;margin:0 auto;padding:64px 22px 60px;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:44px;align-items:center;
}
.hero__copy{display:flex;flex-direction:column;gap:18px;min-width:0}
.hero h1{font-size:52px;line-height:1.04;letter-spacing:-.025em;max-width:15ch}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lede{font-size:17px;max-width:54ch;margin:0}
.hero__note{font-size:13px;color:var(--muted);margin:0}
.hero__points{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}

/* The hero photograph. Same frame language as the cards and panels elsewhere
   -- border, radius, lift -- so it reads as part of the page rather than as
   a stock image dropped onto it. */
.hero__photo{
  margin:0;min-width:0;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--surface-2);
  box-shadow:var(--shadow-lift);
  overflow:hidden;
}
.hero__photo picture{display:block}
.hero__photo--joined{border-bottom-left-radius:0;border-bottom-right-radius:0}
/* The intrinsic ratio is 3:2. Cropping to 4:3 gives the column the height it
   needs to sit level with the copy beside it, and object-fit does the
   cropping so no second set of files is needed. */
.hero__photo img{
  display:block;width:100%;height:auto;
  aspect-ratio:4 / 3;object-fit:cover;object-position:50% 42%;
}

/* The numbers under the hero photograph. Same frame as the photo so the two
   read as one column rather than as a picture with something stuck beneath
   it; the photo loses its bottom corners so they join. */
.hero__col{display:flex;flex-direction:column;min-width:0}
.hero__photo--joined + .hero__proof{
  margin-top:-1px;
  border-top-left-radius:0;border-top-right-radius:0;
}
.hero__proof{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--surface);
  box-shadow:var(--shadow-lift);
  padding:16px 18px 15px;
  display:flex;flex-direction:column;gap:10px;
}
.hero__proof-figs{display:flex;gap:28px;flex-wrap:wrap}
.hero__proof-n{
  margin:0;font-family:var(--sans);font-size:27px;line-height:1;
  font-weight:600;letter-spacing:-.02em;color:var(--ink);
}
.hero__proof-k{
  margin:4px 0 0;text-transform:uppercase;font-size:9.5px;
  letter-spacing:.1em;color:var(--muted);
}
.hero__proof-note{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}

.faq__more{margin:16px 0 0;font-size:14px;color:var(--muted)}

/* A worked example of the card, shown where the tiers are explained. */
.example{
  margin:22px 0 0;display:flex;flex-direction:column;gap:10px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:16px 16px 14px;
  box-shadow:var(--shadow-lift);
}
.example__label{
  text-transform:uppercase;font-size:9.5px;letter-spacing:.1em;
  color:var(--muted);margin:0;
}
.example .card{border-left-width:3px;border-left-color:var(--brand-blue)}
.example__foot{
  font-family:var(--mono);text-transform:uppercase;font-size:9.5px;letter-spacing:.1em;
  color:var(--muted);text-align:center;margin:0;
}

/* Stock photography is shot for white pages and glares against a dark one.
   Taking the brightness down and the contrast up a touch settles it into the
   surrounding surfaces instead of floating above them. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero__photo img{filter:brightness(.86) contrast(1.04)}
}
:root[data-theme="dark"] .hero__photo img{filter:brightness(.86) contrast(1.04)}

@media (max-width:900px){
  .hero__in{grid-template-columns:1fr;gap:34px;padding:44px 22px 48px}
  .hero h1{font-size:38px;max-width:18ch}
  /* Full width now, so a 4:3 crop would push the buttons off the fold. */
  .hero__photo img{aspect-ratio:16 / 9}
}
@media (max-width:640px){
  .hero h1{font-size:31px}
  .hero .lede{font-size:16px}
  .band__in{padding:40px 16px}
  .hero__in{padding:34px 16px 38px}
  .example{padding:12px 12px 10px}
}

/* --------------------------------------------------------------- steps -- */

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:14px}
.step{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 20px 22px;display:flex;flex-direction:column;gap:11px;
  position:relative;
}
.step::before{
  content:"";position:absolute;left:-1px;top:-1px;width:calc(100% + 2px);height:3px;
  border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(90deg,var(--brand-blue),var(--brand-teal));
  opacity:.85;
}
.step__icon{
  width:34px;height:34px;border-radius:var(--radius);
  background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.step__icon svg{width:19px;height:19px;display:block}
.step__icon--teal{background:var(--good-soft);color:var(--good)}
.step__n{color:var(--muted)}
.step h3{font-size:18px}
.step p{font-size:14.5px;color:var(--ink-2);margin:0}

/* --------------------------------------------------------------- tiers -- */

.tiercards{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px}
.tiercard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;
  border-top:3px solid var(--line-2);
}
.tiercard--1{border-top-color:var(--good)}
.tiercard--2{border-top-color:var(--brand-blue)}
.tiercard--3{border-top-color:var(--signal)}
.tiercard h3{font-size:17px}
.tiercard p{font-size:14px;color:var(--ink-2);margin:0}
.tiercard__k{color:var(--muted)}

/* ------------------------------------------------------------- pricing -- */

.pricing{
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  box-shadow:var(--shadow);
  padding:0;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.pricing__main{padding:32px 34px 34px;display:flex;flex-direction:column;gap:13px}
.pricing__price{display:flex;align-items:baseline;gap:9px}
.pricing__amount{font-family:var(--cond);font-weight:700;font-size:52px;line-height:1;letter-spacing:-.03em}
.pricing__per{font-family:var(--mono);text-transform:uppercase;font-size:11px;letter-spacing:.1em;color:var(--muted)}
.pricing__side{
  border-left:1px solid var(--line);background:var(--surface);
  padding:30px;display:flex;flex-direction:column;gap:14px;justify-content:center;
}
.checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.checklist li{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--ink-2)}
.checklist svg{width:15px;height:15px;flex:0 0 auto;margin-top:3px;color:var(--good)}
@media (max-width:760px){
  .pricing{grid-template-columns:1fr}
  .pricing__side{border-left:0;border-top:1px solid var(--line)}
  .pricing__main,.pricing__side{padding:24px}
}

/* ----------------------------------------------------------------- faq -- */

.faq{display:flex;flex-direction:column;gap:8px}
.faq details{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 18px;
}
.faq details[open]{border-color:var(--line-2)}
.faq summary{
  font-family:var(--cond);font-weight:600;font-size:16.5px;cursor:pointer;
  list-style:none;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-family:var(--mono);font-size:16px;line-height:1;color:var(--muted);
  flex:0 0 auto;margin-top:2px;
}
.faq details[open] summary::after{content:"\2212"}
.faq p{font-size:14.5px;color:var(--ink-2);margin:10px 0 0;max-width:74ch}

/* -------------------------------------------------------- closing band -- */

.cta{
  background:
    radial-gradient(760px 420px at 78% 118%, rgba(0,169,155,.55), transparent 68%),
    radial-gradient(620px 320px at 8% -20%, rgba(56,165,255,.45), transparent 66%),
    linear-gradient(118deg,#08308C 0%,#0A47C6 46%,#0A5CF5 100%);
  color:#fff;
}
.cta .band__in{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.cta h2{font-size:31px;color:#fff;max-width:20ch}
.cta p{color:rgba(255,255,255,.86);max-width:52ch;margin:0;font-size:15px}
.cta .btn{
  background:#fff;border-color:#fff;color:#0A3FB0;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.5);
}
.cta .btn:hover{opacity:1;transform:translateY(-1px)}
.cta__mark{height:56px;width:auto;margin-bottom:4px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.28))}

/* --------------------------------------------------------- coverage viz -- */

.coverage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px;align-items:center}
@media (max-width:820px){ .coverage{grid-template-columns:1fr} }