/* ---------------------------------------------------------------------------
   A Framer design, rebuilt.

   Ported from https://getachilles.framer.ai/ on 2026-08-25 by the workflow in
   docs/FRAMER-PORT.md: `scripts/framer-extract.py` read the design decisions off
   the published page, `scripts/sv-selfhost-font.sh` brought the two typefaces in
   at build time, and the layout was rebuilt here as block patterns.

   NOT a copy of the output. Framer publishes 478KB of hashed class names that
   nobody can edit and that dies on the next republish, and it loads images,
   fonts and JavaScript from framerusercontent.com, fonts.gstatic.com and
   events.framer.com — all US-owned, all forbidden in the serving path. What
   transfers is the design: the palette, the type, the spacing, the shapes.

   EVERY RULE IS SCOPED UNDER .sv-port. The live marketing pages share this
   theme, and a ported design must not be able to restyle them by existing. The
   stylesheet and its fonts are enqueued only on a page that actually contains
   the wrapper — see functions.php — so the live pages do not pay 244KB of
   webfont for a design they do not use.

   Values are the extractor's, not an eyeball's: #00ff88 was 162 uses on the
   source page, #f0f0f0 133, #080808 101, #1a1a1a 84, #888 46.
   --------------------------------------------------------------------------- */

.sv-port {
  /* The palette, as measured. */
  --p-ground:    #080808;
  --p-surface:   #1a1a1a;
  --p-raised:    #111111;
  --p-line:      rgba(255, 255, 255, 0.08);
  --p-line-lit:  rgba(0, 255, 136, 0.16);   /* #00ff8829, the source's own */
  --p-text:      #f0f0f0;
  --p-muted:     #888888;
  --p-accent:    #00ff88;
  --p-accent-in: #041b10;                   /* text on an accent fill */

  /* The type scale, as measured: 40 / 36 / 32 / 20 / 16 / 14 / 12. The two
     display sizes are given a clamp so the design holds on a phone — the
     source's own breakpoints are not recoverable from published output, so
     this is the one place the port is a judgement rather than a measurement. */
  --p-display: clamp(2.25rem, 6vw, 3.5rem);
  --p-h2:      clamp(1.75rem, 3.6vw, 2.25rem);
  --p-h3:      1.25rem;
  --p-body:    1rem;
  --p-small:   0.875rem;
  --p-tiny:    0.75rem;

  --p-sans: Inter, ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --p-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --p-radius: 14px;
  --p-gap: 20px;

  background: var(--p-ground);
  color: var(--p-text);
  font-family: var(--p-sans);
  font-size: var(--p-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.sv-port * { box-sizing: border-box; }

.sv-port .sv-port-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Sections carry their own rhythm rather than per-block margins, so a block
   added in the editor lands in the flow instead of doubling a margin. */
.sv-port .sv-port-section {
  padding: 96px 0;
  border-top: 1px solid var(--p-line);
}
.sv-port .sv-port-section:first-child { border-top: 0; }
.sv-port .sv-port-stack { display: flex; flex-direction: column; gap: 20px; }
.sv-port .sv-port-stack.is-tight { gap: 10px; }
.sv-port .sv-port-center { text-align: center; align-items: center; }
.sv-port .sv-port-measure { max-width: 62ch; }
.sv-port .sv-port-center .sv-port-measure { margin-left: auto; margin-right: auto; }

/* --- type ---------------------------------------------------------------- */
/* These three collide with `port-global.css`, which since the port went live
   also styles bare headings — and it WINS, because `html.sv-port-on h1` is one
   element more specific than `.sv-port h1`. Checked rather than assumed, and
   left alone: the clamps over there were derived from these tokens and are the
   same values, so the two rules agree and the cascade picks either. If the
   scales are ever meant to diverge, that is the moment this needs a real fix —
   raising specificity here, not reordering the enqueues, since specificity beats
   load order. */
.sv-port h1, .sv-port h2, .sv-port h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--p-text);
}
.sv-port h1 { font-size: var(--p-display); line-height: 1.04; letter-spacing: -0.04em; }
.sv-port h2 { font-size: var(--p-h2);      line-height: 1.12; }
.sv-port h3 { font-size: var(--p-h3);      line-height: 1.3; letter-spacing: -0.015em; }
.sv-port p  { margin: 0; }
.sv-port .sv-port-lede { font-size: 1.125rem; color: var(--p-muted); line-height: 1.55; }
.sv-port .sv-port-dim  { color: var(--p-muted); }
.sv-port .sv-port-small { font-size: var(--p-small); color: var(--p-muted); }

/* The mono face does the labelling, which is most of what it was doing on the
   source page: eyebrows, badges, figures, table headers. */
.sv-port .sv-port-eyebrow {
  font-family: var(--p-mono);
  font-size: var(--p-tiny);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--p-accent);
  margin: 0;
}
.sv-port .sv-port-eyebrow.is-dim { color: var(--p-muted); }
.sv-port .sv-port-accent { color: var(--p-accent); }

/* --- the accent pill ----------------------------------------------------- */
.sv-port .sv-port-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--p-mono);
  font-size: var(--p-tiny);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--p-accent);
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid var(--p-line-lit);
  border-radius: 999px;
  padding: 6px 14px;
}
.sv-port .sv-port-badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--p-accent);
}

/* --- buttons ------------------------------------------------------------- */
.sv-port .sv-port-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.sv-port .sv-port-center .sv-port-actions { justify-content: center; }
.sv-port .sv-port-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 13px 26px;
  font-size: var(--p-small);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease;
}
.sv-port .sv-port-btn--solid { background: var(--p-accent); color: var(--p-accent-in); }
.sv-port .sv-port-btn--ghost { border-color: var(--p-line); color: var(--p-text); }
.sv-port .sv-port-btn:hover  { transform: translateY(-1px); }
.sv-port .sv-port-btn--solid:hover { background: #4dffab; }
.sv-port .sv-port-btn--ghost:hover { border-color: var(--p-line-lit); color: var(--p-accent); }
.sv-port .sv-port-btn:focus-visible {
  outline: 2px solid var(--p-accent);
  outline-offset: 3px;
}

/* --- cards and grids ----------------------------------------------------- */
.sv-port .sv-port-grid {
  display: grid;
  gap: var(--p-gap);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 44px;
}
.sv-port .sv-port-grid.is-two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.sv-port .sv-port-card {
  background: var(--p-surface);
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sv-port .sv-port-card.is-lit {
  border-color: var(--p-line-lit);
  background: linear-gradient(180deg, rgba(0, 255, 136, 0.05), var(--p-surface) 60%);
}
.sv-port .sv-port-card .sv-port-num {
  font-family: var(--p-mono);
  font-size: var(--p-tiny);
  letter-spacing: 0.14em;
  color: var(--p-accent);
}

/* --- the figures row ----------------------------------------------------- */
.sv-port .sv-port-figures {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  background: var(--p-line);
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  overflow: hidden;
  margin-top: 44px;
}
.sv-port .sv-port-figure {
  background: var(--p-raised);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sv-port .sv-port-figure b {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--p-accent);
  font-variant-numeric: tabular-nums;
}
.sv-port .sv-port-figure span {
  font-family: var(--p-mono);
  font-size: var(--p-tiny);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--p-muted);
}

/* --- the proof block, in the reference's testimonials slot ---------------- */
/* PARKED, and kept on purpose. The owner's call, 2026-08-26: the section comes
   back when there are customers to put in it, so the markup is one `git show`
   away and the styling is already here for it. This file only loads on a page
   built out of a `port-*` pattern, so the unused rules cost the live site
   nothing at all — deleting them would buy nothing and make the return a
   rewrite rather than a paste.

   The graphic is authored rather than borrowed: an inline SVG, no file, no
   host, nothing that could ever appear on a removal list. */
.sv-port .sv-port-proof {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: 44px;
  align-items: start;
  margin-top: 44px;
}
.sv-port .sv-port-cycle {
  width: 100%;
  height: auto;
  /* One slow rotation. The ring is a picture of things running on timers, and
     a still ring says the opposite of what the section is about. */
  animation: sv-port-spin 90s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes sv-port-spin { to { transform: rotate(360deg); } }

.sv-port .sv-port-proof-list { display: flex; flex-direction: column; gap: 0; }
.sv-port .sv-port-proof-row {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--p-line);
  align-items: baseline;
}
.sv-port .sv-port-proof-row:last-child { border-bottom: 0; }
.sv-port .sv-port-proof-row b {
  display: block;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}
.sv-port .sv-port-proof-row p { font-size: var(--p-small); }

@media (max-width: 780px) {
  .sv-port .sv-port-proof { grid-template-columns: 1fr; gap: 28px; }
  .sv-port .sv-port-cycle { max-width: 180px; margin: 0 auto; }
  .sv-port .sv-port-proof-row { grid-template-columns: 1fr; gap: 6px; }
}

/* --- pricing ------------------------------------------------------------- */
.sv-port .sv-port-price {
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.sv-port .sv-port-price small {
  font-family: var(--p-mono);
  font-size: var(--p-tiny);
  letter-spacing: 0.1em;
  color: var(--p-muted);
  font-weight: 400;
}
.sv-port .sv-port-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sv-port .sv-port-list li {
  position: relative;
  padding-left: 24px;
  font-size: var(--p-small);
  color: var(--p-muted);
}
.sv-port .sv-port-list li::before {
  content: "";
  position: absolute;
  left: 4px; top: 0.55em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--p-accent);
  opacity: 0.75;
}

/* --- FAQ ----------------------------------------------------------------- */
.sv-port .sv-port-faq { margin-top: 40px; display: flex; flex-direction: column; gap: 0; }
.sv-port .sv-port-faq details {
  border-bottom: 1px solid var(--p-line);
  padding: 20px 0;
}
.sv-port .sv-port-faq summary {
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 500;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: baseline;
}
.sv-port .sv-port-faq summary::-webkit-details-marker { display: none; }
.sv-port .sv-port-faq summary::after {
  content: "+";
  font-family: var(--p-mono);
  color: var(--p-accent);
  flex: none;
}
.sv-port .sv-port-faq details[open] summary::after { content: "\2212"; }
.sv-port .sv-port-faq summary:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 4px; }
.sv-port .sv-port-faq p { margin-top: 12px; color: var(--p-muted); max-width: 68ch; }

/* --- closing panel ------------------------------------------------------- */
.sv-port .sv-port-closer {
  border: 1px solid var(--p-line-lit);
  border-radius: 20px;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(0, 255, 136, 0.10), transparent 62%),
    var(--p-surface);
  padding: 64px 32px;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .sv-port .sv-port-btn { transition: none; }
  .sv-port .sv-port-btn:hover { transform: none; }
  .sv-port .sv-port-cycle { animation: none; }
}

@media (max-width: 640px) {
  .sv-port .sv-port-section { padding: 64px 0; }
  .sv-port .sv-port-closer { padding: 44px 20px; }
}