/* Frontline Systems — landing page.
   One page, no build step, no framework. It is linked from an Instagram bio, so it
   has to be fast and correct inside the Instagram and Facebook in-app webviews.

   The look is a night job site: deep charcoal, navy as structure, and hi-vis as
   the one thing that acts. That palette is this audience's own vernacular, and it
   keeps the page away from both the light-grey B2B default and the near-black
   plus one-bright-accent look that every dark landing page arrives at. */

/* ----------------------------------------------------------------- fonts --
   Self-hosted, latin subset, both variable so one file covers every weight the
   page uses. Hosting them here rather than calling Google Fonts removes two
   third-party DNS lookups and two round trips from the critical path, which
   matters most in the Instagram in-app browser on a cold 4G connection. */
@font-face {
  font-family: Archivo;
  src: url(/assets/fonts/archivo.woff2) format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url(/assets/fonts/source-sans-3.woff2) format('woff2-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* Charcoal, warm and neutral rather than blue-black — it is the logo's own
     family, and it is a long way from Imperium Detailing's #050608. */
  --bg: #141517;
  --bg-raise: #1c1e21;     /* panels and cards lift off the page */
  --bg-deep: #0f1012;      /* wells: the inside of the log, the device screen */

  --navy: #1f3470;         /* brand navy, used as structure and as fills */
  --navy-deep: #16264f;
  --navy-lit: #7e9bee;     /* links on dark: 6.9:1. Brand navy would be 3.1:1 */

  /* The one thing on this page that acts. Black type on it reads 11.3:1, and on
     charcoal it reads 11.3:1 too — it is legible in sunlight through a cracked
     screen, which is where this page is actually read. */
  --hivis: #f2c511;
  --hivis-deep: #d4aa06;

  --ink: #eff0ec;          /* headings and anything that must land hard: 16.5:1 */
  --body: #c9ccc6;         /* running text, softened so a long read is comfortable: 11.5:1 */
  --muted: #a0a49f;        /* captions and asides: 7.4:1 — still AA, never grey-for-mood */

  --line: rgba(239, 240, 236, 0.10);
  --line-2: rgba(239, 240, 236, 0.20);

  --gutter: 18px;
  --measure: 34rem;

  /* Major third, trimmed for a 390px phone. 17px body is the practical floor on
     a cracked screen in sunlight. */
  --t-micro: 13px;
  --t-small: 15px;
  --t-body: 17px;
  --t-3: 21px;
  --t-2: 28px;
  --t-1: 38px;

  --sans: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: Archivo, var(--sans);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 600px) {
  :root { --t-1: 52px; --t-2: 34px; --gutter: 28px; }
}

/* ----------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-bottom: 96px;   /* the sticky bar must never cover an anchor */
  background: var(--bg);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font: 400 var(--t-body)/1.62 var(--sans);
  padding-bottom: 92px;          /* room for the sticky bar */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; color: var(--ink); font-family: var(--display); font-weight: 700; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--navy-lit); text-underline-offset: 3px; }
a:hover { color: #a7bcf5; }

:focus-visible { outline: 3px solid var(--hivis); outline-offset: 3px; border-radius: 2px; }

.tnum { font-variant-numeric: tabular-nums lining-nums; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
a.sr-only:focus-visible {
  position: fixed; top: 10px; left: 10px; z-index: 60;
  width: auto; height: auto; margin: 0; padding: 12px 18px; clip: auto;
  background: var(--hivis); color: #101114; font-weight: 700;
  text-decoration: none; border-radius: 8px;
}

/* ------------------------------------------------------------- the light --
   Two fixed layers sit under everything and never scroll: a soft navy key light
   at the top of the frame, and a fine grain. The grain is what stops a dark page
   reading as flat charcoal — it is the difference between a screenshot of a dark
   theme and something that looks lit. Both are pointer-events:none and neither
   costs a repaint on scroll. */
body::before {
  content: "";
  position: fixed;
  inset: -20vh -20vw auto;
  height: 120vh;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58vw 46vh at 76% 4%, rgba(46, 78, 176, 0.30), transparent 68%),
    radial-gradient(72vw 40vh at 8% 24%, rgba(31, 52, 112, 0.22), transparent 70%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, header, footer, .sticky { position: relative; z-index: 2; }

/* ---------------------------------------------------------------- layout -- */
.wrap {
  width: 100%;
  max-width: calc(var(--measure) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { padding-block: 56px; position: relative; }

/* Section dividers fade out at both ends rather than ruling hard across the
   frame, so the page reads as one continuous surface being lit in places. */
section + section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 22%, var(--line-2) 78%, transparent);
}

h2 {
  font-size: var(--t-2);
  line-height: 1.12;
  letter-spacing: -0.022em;
  margin-bottom: 0.62em;
  text-wrap: balance;
}
h3 {
  font-size: var(--t-3);
  line-height: 1.3;
  font-weight: 600;
  margin-bottom: 0.4em;
}

.small { font-size: var(--t-small); }
.micro { font-size: var(--t-micro); line-height: 1.5; color: var(--muted); }
.quiet { color: var(--muted); }

/* --------------------------------------------------------------- buttons --
   One primary action, worded and styled identically everywhere it appears. It is
   the only hi-vis surface on the page, so it is impossible to miss and equally
   impossible to confuse with anything else. */
.btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 58px;
  padding: 12px 22px;
  border: 0;
  border-radius: 10px;
  background: var(--hivis);
  color: #101114;
  font: 700 var(--t-body)/1.25 var(--sans);
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 10px 30px -12px rgba(242, 197, 17, 0.55);
  transition: background 160ms var(--ease), transform 120ms var(--ease);
}
.btn:hover { background: #ffd524; color: #101114; }
.btn:active { transform: translateY(1px); }

.btn-2 {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 5px;
}
.btn-2:hover { color: var(--ink); text-decoration-color: var(--hivis); }

/* Inside the pricing block the three tiers would otherwise be three hi-vis slabs
   in a row, which drains the colour of its meaning. Only the recommended tier
   keeps the solid button; the other two carry the same words at a lower weight,
   so the hierarchy on the page matches the recommendation in the copy. */
.btn.ghost {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--ink);
  box-shadow: none;
}
.btn.ghost:hover { background: rgba(239, 240, 236, 0.06); color: #fff; border-color: var(--line-2); }

.cta-block { margin-top: 24px; }
.cta-note { margin-top: 12px; font-size: var(--t-small); color: var(--muted); }

/* -------------------------------------------------------------- masthead -- */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 16px 4px;
}
.masthead img {
  width: 38px;
  border-radius: 9px;
  /* The mark is a charcoal square, which all but vanishes on a charcoal page.
     A hairline gives it an edge without altering the logo itself. */
  box-shadow: 0 0 0 1px var(--line-2);
}
.masthead .place {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ------------------------------------------------------------------ hero -- */
.hero { padding-top: 22px; padding-bottom: 34px; }

.hero h1 {
  font-size: var(--t-1);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin-bottom: 22px;
}
/* The breaks are the design: four lines, with the two timestamps landing in the
   same column. It must never reflow to three lines or five. */
.hero h1 .ln { display: block; }
.hero h1 .ln.tnum { color: #fff; }

.hero .sub { margin-bottom: 6px; color: var(--body); }
.hero .anchor { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------- the phone --
   The hero's proof is the product happening: a handset with the notification
   arriving on it. Built in CSS rather than shipped as an image so it stays sharp
   on any screen, costs nothing to download, and can animate. */
.phone {
  position: relative;
  width: 268px;
  margin: 30px auto 0;
  aspect-ratio: 268 / 545;
  border-radius: 40px;
  padding: 9px;
  background: linear-gradient(160deg, #55585e, #232529 32%, #16171a 70%, #3a3d43);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 40px 70px -30px rgba(0, 0, 0, 0.9),
    0 0 90px -30px rgba(46, 78, 176, 0.55);
}
.phone .screen {
  position: relative;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 0%, #23304f 0%, #141924 46%, var(--bg-deep) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 12px 16px;
}
.phone .notch {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 84px; height: 22px;
  border-radius: 999px;
  background: #08090b;
}
.phone .lock-time {
  margin-top: 34px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 58px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
  font-variant-numeric: tabular-nums lining-nums;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}
.phone .lock-date {
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.62);
}

/* The notification itself. Frosted, like the real thing, and it is the only
   element on the page allowed a blur. */
.note-card {
  width: 100%;
  margin-top: auto;
  padding: 11px 13px;
  border-radius: 16px;
  background: rgba(233, 236, 242, 0.92);
  backdrop-filter: blur(12px);
  color: #16171a;
  text-align: left;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.7);
}
.note-card .top {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #4a4e55;
}
.note-card .top .dot {
  width: 15px; height: 15px;
  border-radius: 4px;
  background: var(--navy);
  flex: none;
}
.note-card .top .at { margin-left: auto; font-weight: 600; }
.note-card .msg { font-size: 13.5px; line-height: 1.4; font-weight: 600; }
.note-card .msg span { font-weight: 400; color: #3d4149; }

.phone .hint {
  margin-top: 12px;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.42);
}

/* The one orchestrated moment on the page: the headline rises, then the handset
   lights, then the notification drops in and the phone kicks once. It plays on
   load and never again. */
@media (prefers-reduced-motion: no-preference) {
  .anim .hero h1 .ln { opacity: 0; transform: translateY(14px); animation: rise 620ms var(--ease) forwards; }
  .anim .hero h1 .ln:nth-child(1) { animation-delay: 60ms; }
  .anim .hero h1 .ln:nth-child(2) { animation-delay: 150ms; }
  .anim .hero h1 .ln:nth-child(3) { animation-delay: 260ms; }
  .anim .hero h1 .ln:nth-child(4) { animation-delay: 350ms; }
  .anim .hero .sub,
  .anim .hero .anchor,
  .anim .hero .cta-block { opacity: 0; animation: rise 620ms var(--ease) 470ms forwards; }
  .anim .phone { opacity: 0; animation: rise 700ms var(--ease) 620ms forwards; }
  .anim .note-card { opacity: 0; animation: drop 520ms var(--ease) 1320ms forwards; }
  .anim .phone.kick { opacity: 1; animation: kick 420ms var(--ease) both; }

  @keyframes rise { to { opacity: 1; transform: none; } }
  @keyframes drop { from { opacity: 0; transform: translateY(-16px) scale(0.96); } to { opacity: 1; transform: none; } }
  @keyframes kick {
    0%, 100% { transform: translateX(0) }
    18% { transform: translateX(-3px) }
    38% { transform: translateX(3px) }
    58% { transform: translateX(-2px) }
    78% { transform: translateX(1px) }
  }
}

/* -------------------------------------------------------- document panel -- */
.doc {
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

/* ---------------------------------------------------------- the 60s log -- */
/* The first section is tightened at the top so the log panel is cut by the fold
   rather than sitting entirely below it. Seeing it half-arrive is what tells a
   cold visitor the page keeps going. */
#how { padding-top: 40px; }

.log {
  margin-top: 22px;
  background: var(--bg-deep);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.95);
}
.log::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--hivis), var(--hivis-deep) 62%, transparent);
}

.log .pick-note {
  margin: 0;
  padding: 13px 16px 11px;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 0 10px 12px;
}
.tiers button {
  min-height: 56px;
  padding: 8px 4px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: 600 var(--t-small)/1.2 var(--sans);
  cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.tiers button .amt {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  font-variant-numeric: tabular-nums lining-nums;
}
.tiers button:hover { color: var(--ink); border-color: var(--line-2); }
.tiers button[aria-pressed="true"] {
  background: var(--navy);
  border-color: #3c5bb0;
  color: #fff;
  box-shadow: 0 0 26px -10px rgba(62, 99, 208, 0.9);
}

.log ol { border-top: 1px solid var(--line); }
.log li {
  display: grid;
  grid-template-columns: 3px 1fr;
  gap: 14px;
  padding: 15px 16px 15px 13px;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-small);
  line-height: 1.5;
  transition: opacity 260ms var(--ease), background 260ms var(--ease);
}
.log li:last-child { border-bottom: 0; }
.log li .mark { border-radius: 2px; }
.log li .when {
  display: block;
  margin-bottom: 2px;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 700;
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--muted);
}
.log li .who { color: var(--ink); font-weight: 600; }

/* Tier scope is always stated in words, never signalled by colour alone. */
.log li .scope {
  display: block;
  margin-top: 5px;
  font-size: var(--t-micro);
  color: var(--muted);
}
.log li[data-live="false"] { opacity: 0.34; }
.log li[data-live="false"] .when { font-weight: 400; }

/* The single flash of colour inside the log, on the one row the whole business
   rests on. */
.log li[data-alert] {
  background: linear-gradient(90deg, rgba(242, 197, 17, 0.07), transparent 60%);
}
.log li[data-alert] .mark { background: var(--hivis); box-shadow: 0 0 14px rgba(242, 197, 17, 0.6); }
.log li[data-alert] .when { color: var(--hivis); }

.log .foot { padding: 15px 16px; font-size: var(--t-micro); color: var(--muted); }
.log .foot p { margin-bottom: 0.7em; }

.replay {
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--hivis);
  font: 700 var(--t-small) var(--sans);
  letter-spacing: 0.04em;
  cursor: pointer;
}

/* One orchestrated reveal, the first time the panel is reached. */
@media (prefers-reduced-motion: no-preference) {
  .log[data-animate] li[data-live="true"] { opacity: 0; transform: translateY(10px); }
  .log[data-playing] li[data-live="true"] {
    animation: logrow 340ms var(--ease) forwards;
    animation-delay: calc(var(--i) * 400ms);
  }
  @keyframes logrow { to { opacity: 1; transform: none; } }
}

/* --------------------------------------------------------- the navy band --
   The page's structural beat: charcoal, then navy, then charcoal. It marks the
   section that carries the actual differentiator. */
.band { background: linear-gradient(180deg, var(--navy-deep), #12203f); }
.band::before { display: none; }
.band h2, .band h3 { color: #fff; }
.band a { color: #b6c8ff; }
.band .quiet { color: #9fb0d6; }

/* ----------------------------------------------------------------- table -- */
.rows { border-top: 1px solid var(--line-2); }
.rows li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 3px 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: var(--t-small);
}
.rows li b { color: var(--ink); font-weight: 600; }
.rows li .val { color: var(--muted); font-variant-numeric: tabular-nums lining-nums; }
.band .rows li b { color: #fff; }
.band .rows li .val { color: #9fb0d6; }

/* The row the eye should land on, after five rows of the same answer. */
.rows li.last { padding-block: 18px; font-size: var(--t-3); }
.rows li.last b { font-family: var(--display); font-weight: 700; }
.rows li.last .val {
  font-family: var(--display);
  font-weight: 700;
  color: var(--hivis);
}

/* ------------------------------------------------------------ step lists -- */
.steps { counter-reset: step; margin-top: 22px; }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 1.9em 1fr;
  gap: 12px;
  padding: 11px 0;
  font-size: var(--t-small);
}
.steps li::before {
  content: counter(step);
  font-family: var(--display);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 700;
  color: var(--hivis);
  opacity: 0.85;
}

.ticks li, .crosses li {
  display: grid;
  grid-template-columns: 1.35em 1fr;
  gap: 10px;
  padding: 8px 0;
  font-size: var(--t-small);
}
.ticks li::before { content: "\2713"; color: var(--hivis); font-weight: 700; }
.crosses li::before { content: "\2717"; color: var(--muted); }
.band .ticks li::before { color: var(--hivis); }

/* --------------------------------------------------------------- pricing -- */
.summary { margin-bottom: 30px; border-top: 1px solid var(--line); }
.summary li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.summary li .amt {
  min-width: 3.7em;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-3);
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}

.tier {
  padding: 26px 20px;
  margin-bottom: 20px;
  background: linear-gradient(180deg, var(--bg-raise), #191b1e);
}
.tier .amt {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.035em;
}
.tier .name {
  display: block;
  margin: 8px 0 14px;
  font-size: var(--t-3);
  font-weight: 600;
  color: var(--ink);
}
/* The recommended tier is lifted by light, not by a louder border. */
.tier.pick {
  border-color: rgba(242, 197, 17, 0.34);
  box-shadow: 0 0 0 1px rgba(242, 197, 17, 0.14), 0 30px 60px -40px rgba(242, 197, 17, 0.4);
}
.tier .flag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 13px;
  border-radius: 999px;
  background: var(--hivis);
  color: #101114;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.tier .terms {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: var(--t-small);
  color: var(--ink);
}
.tier h4 {
  margin: 18px 0 2px;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* -------------------------------------------------------------- imperium -- */
.url {
  display: inline-block;
  min-height: 48px;
  font-family: var(--display);
  font-size: var(--t-2);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--hivis);
  text-decoration-thickness: 3px;
  text-underline-offset: 7px;
  word-break: break-word;
}
.url:hover { color: #fff; }

/* A second handset, this one running the real site: a full-length screenshot
   scrolling inside the screen. It is the only way to show a 32-page site on a
   phone without asking anyone to leave the page. */
.device {
  position: relative;
  width: 246px;
  margin: 28px auto 10px;
  aspect-ratio: 246 / 500;
  border-radius: 36px;
  padding: 8px;
  background: linear-gradient(160deg, #55585e, #232529 32%, #16171a 70%, #3a3d43);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 40px 70px -32px rgba(0, 0, 0, 0.9),
    0 0 80px -28px rgba(46, 78, 176, 0.45);
}
.device .screen {
  position: relative;
  height: 100%;
  border-radius: 29px;
  overflow: hidden;
  background: #050608;
}
.device .reel {
  width: 100%;
  display: block;
  will-change: transform;
}
.device .glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(200deg, rgba(255, 255, 255, 0.10), transparent 34%);
}
.device .notch {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 76px; height: 20px;
  border-radius: 999px;
  background: #08090b;
  z-index: 2;
}

.specs { margin: 22px 0; border-top: 1px solid var(--line); }
.specs li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-small);
}
.specs li b {
  font-family: var(--display);
  font-size: var(--t-3);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

/* -------------------------------------------------------------- two lists -- */
.split + .split { margin-top: 30px; }

/* -------------------------------------------------------------- the line -- */
.pull {
  margin: 0 0 20px;
  padding-left: 16px;
  border-left: 3px solid var(--hivis);
  font-family: var(--display);
  font-size: var(--t-3);
  font-weight: 600;
  line-height: 1.28;
  color: var(--ink);
}

/* ------------------------------------------------------------------- FAQ -- */
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 14px 0;
  font-family: var(--display);
  font-size: var(--t-3);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  font-size: 18px;
  font-weight: 400;
  color: var(--hivis);
}
.faq details[open] summary::after { content: "\2212"; }
.faq .a { padding-bottom: 20px; font-size: var(--t-small); }

/* ------------------------------------------------------------------ form -- */
.field { margin-bottom: 20px; }
.field label {
  display: block;
  margin-bottom: 7px;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink);
}
.field .hint { display: block; font-weight: 400; color: var(--muted); }

.field input, .field select, .field textarea {
  width: 100%;
  min-height: 54px;
  padding: 13px 15px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--bg-deep);
  color: var(--ink);
  /* 16px minimum or iOS Safari zooms the whole page on focus. */
  font: 400 var(--t-body)/1.4 var(--sans);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--hivis);
  box-shadow: 0 0 0 3px rgba(242, 197, 17, 0.18);
}
.field textarea { min-height: 112px; resize: vertical; }
.field select {
  appearance: none;
  padding-right: 42px;
  /* appearance:none strips the native arrow, and without a replacement the
     control reads as a text input with a word already typed in it. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23a0a49f' d='M0 1.4 1.4 0 6 4.6 10.6 0 12 1.4 6 8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px 8px;
}

.field .err {
  display: none;
  margin-top: 7px;
  font-size: var(--t-small);
  font-weight: 600;
  color: #ff9d95;              /* 8.0:1 on the field background */
}
.field[data-invalid] .err { display: block; }
.field[data-invalid] input,
.field[data-invalid] select,
.field[data-invalid] textarea { border-color: #ff9d95; }

.form-note { margin-top: 16px; font-size: var(--t-micro); color: var(--muted); }

.sent {
  padding: 26px 22px;
  border: 1px solid rgba(242, 197, 17, 0.3);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(242, 197, 17, 0.07), transparent);
}
.sent h3 { margin-bottom: 0.3em; }

/* --------------------------------------------------------------- sticky --
   Repeats the primary action once the hero has gone, and gets out of the way
   while the form is on screen so it can never cover the last field with the
   keyboard up. */
.sticky {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  padding: 11px var(--gutter) calc(11px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(20, 21, 23, 0.82), var(--bg) 46%);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-2);
  transform: translateY(115%);
  transition: transform 240ms var(--ease);
}
.sticky[data-show] { transform: none; }
.sticky .inner { max-width: var(--measure); margin-inline: auto; }
@media (prefers-reduced-motion: reduce) { .sticky { transition: none; } }

/* -------------------------------------------------------------- footer -- */
.footer { padding-block: 40px 30px; font-size: var(--t-small); color: var(--muted); }
.footer p { margin-bottom: 0.75em; }
.footer .name {
  color: var(--ink);
  font-family: var(--display);
  font-size: var(--t-3);
  font-weight: 700;
}

/* ------------------------------------------------------------ wider ---- */
@media (min-width: 620px) {
  .phone { width: 300px; }
  .device { width: 276px; }
  .tier { padding: 32px 28px; }
  .tier .amt { font-size: 54px; }
}