/* =========================================================================
   Hyvelox — "ledger terminal"

   The buyer for this page spends their working day inside Ads Manager and
   billing tables. The product is a financial instrument: ad spend goes in,
   marked-up client invoices come out. So the page is built from that world
   rather than from the standard bright SaaS brochure — which also stops the
   dark dashboard screenshots in #demo from looking pasted onto a white page.

   Colour carries meaning here and is not decoration:
     amber  (--signal) = money leaving you. Rent, spend, outflow. Used almost
                         nowhere except the ledger, so it keeps its force.
     ivory  (--own)    = what you keep. Owned software, and the primary CTA,
                         because clicking it is the move toward owning.
     blue   (--link)   = interactive text only, never decoration.
   ========================================================================= */

/* --- Typefaces ----------------------------------------------------------
   Bricolage Grotesque for display: engineered and slightly odd, with none of
   the neutrality that makes a headline forgettable. Instrument Sans for body
   — quiet, a touch narrow, so long paragraphs stay dense without shouting.
   IBM Plex Mono for every figure on the page: money here is tabular data and
   is set as tabular data. */
@font-face {
  font-family: "Bricolage";
  src: url("/assets/fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bricolage";
  src: url("/assets/fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --void: #0a0d13;
  --panel: #121722;
  --panel-2: #171f2c;
  --rule: #222b3c;
  --rule-soft: #19202d;

  --ink: #e9edf4;
  --ink-dim: #949eb1;
  --ink-faint: #626c7e;

  --signal: #ff9a3c;
  --signal-deep: #4a2f14;
  --own: #f0e7d6;
  --link: #86a9ff;

  --display: "Bricolage", "Instrument Sans", system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --maxw: 74rem;
  --rail: 11rem;
  --gap: 3.5rem;
  --pad: clamp(1.25rem, 4vw, 3rem);
}

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

html {
  /* A sticky header and in-page anchors cannot coexist without this: every
     #book link would otherwise land with the heading tucked underneath it. */
  scroll-padding-top: 5.5rem;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Bare element selector at specificity (0,0,1) on purpose: it must lose to
   .cta and .wordmark, which set their own colour. Do NOT rewrite this as
   a:not(.cta) — that raises specificity above both and turns the wordmark and
   every button blue. */
a { color: var(--link); text-underline-offset: 0.2em; }
a:hover { color: var(--ink); }

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

img { max-width: 100%; }

/* --- Type scale ---------------------------------------------------------
   Tracking is a function of size, so each level sets its own: display sizes
   need to be pulled in hard, small labels need to be opened up. */
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.08; margin: 0 0 0.5em; }
h1 {
  font-size: clamp(2.5rem, 6.2vw, 4.75rem);
  font-weight: 800;
  letter-spacing: -0.038em;
  text-wrap: balance;
}
h2 {
  font-size: clamp(1.875rem, 3.6vw, 2.875rem);
  letter-spacing: -0.028em;
  text-wrap: balance;
}
h3 { font-size: 1.25rem; letter-spacing: -0.015em; line-height: 1.25; }
p { margin: 0 0 1.15em; max-width: 38em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; color: var(--own); }

/* Figures inside prose read as data, not as words. */
.num { font-family: var(--mono); font-weight: 500; font-feature-settings: "tnum" 1; }

/* --- Header -------------------------------------------------------------
   Translucent over the page rather than opaque, so content passing beneath it
   stays faintly visible — the page reads as one surface instead of two. */
.site-head {
  position: sticky; top: 0; z-index: 20;
  padding: 0.9rem var(--pad);
  background: color-mix(in srgb, var(--void) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--rule-soft);
}
.site-head__inner {
  max-width: var(--maxw); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.wordmark {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--display); font-weight: 800; font-size: 1.15rem;
  letter-spacing: -0.03em; color: var(--ink); text-decoration: none;
}
.wordmark svg { width: 22px; height: 22px; display: block; flex: none; }
.wordmark:hover { color: var(--own); }

/* --- Section band + rail ------------------------------------------------
   The band owns the background and the padding; the inner grid owns the
   column widths. Keeping those two jobs in separate rules is what allows a
   section to change surface without every section becoming the same island.

   The rail is the left gutter: a mono label that names the section and stays
   pinned while that section scrolls past, the way a column header behaves in
   the tables this audience works in all day. */
.block { padding: clamp(4rem, 9vw, 7.5rem) var(--pad); }
.block__inner {
  max-width: var(--maxw); margin-inline: auto;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 0 var(--gap);
  align-items: start;
}
.block__body { min-width: 0; }

.rail {
  position: sticky; top: 6.5rem;
  font-family: var(--mono); font-size: 0.75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-faint);
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  max-width: none;
}
/* The second line is metadata, not decoration: it says something true about the
   section it labels — how many steps, how many questions, how long the call is —
   the way a column header carries a count. */
.rail span {
  display: block;
  color: var(--ink-dim);
  text-transform: none;
  letter-spacing: 0.02em;
  margin-top: 0.3rem;
}

.block--alt { background: var(--panel); }
.block--hero { padding-top: clamp(3rem, 7vw, 5.5rem); }

@media (max-width: 60rem) {
  .block__inner { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .rail { position: static; }
}

/* --- Hero ---------------------------------------------------------------- */
.hero-sub {
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 34em;
  margin-bottom: 1.5rem;
}
.hero-for {
  display: inline-block; max-width: none; margin: 0 0 2.5rem;
  font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.01em;
  color: var(--ink-dim);
  border-left: 2px solid var(--signal);
  padding: 0.15rem 0 0.15rem 0.85rem;
}

/* --- THE SIGNATURE: the rent ledger --------------------------------------
   The whole offer in the form the buyer already trusts — a reconciliation
   that doesn't reconcile. Two rows: what three years of renting costs, and
   what you hold at the end of it. The second row is the argument, and it is
   set in the same type as the first so it reads as arithmetic rather than as
   a claim. Every figure here is the competitor's own published pricing.

   This is the one loud element on the page. Everything around it is kept
   deliberately quiet so it stays the thing you remember. */
.ledger {
  margin: 0 0 2.5rem;
  max-width: 34rem;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}
.ledger__cap {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ink-faint);
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--rule);
  background: rgba(0, 0, 0, 0.25);
}
.ledger__rows { margin: 0; padding: 0.35rem 0; }
.ledger__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; padding: 0.85rem 1.25rem;
}
.ledger__row + .ledger__row { border-top: 1px solid var(--rule-soft); }
.ledger__row dt {
  font-size: 0.9375rem; color: var(--ink-dim); line-height: 1.35;
}
.ledger__row dd {
  margin: 0; flex: none;
  font-family: var(--mono); font-weight: 500;
  font-feature-settings: "tnum" 1;
  font-size: clamp(1.375rem, 3.2vw, 1.875rem);
  letter-spacing: -0.02em;
  /* The digits change width as the counter runs; a fixed minimum stops the
     row from twitching sideways on every frame. */
  min-width: 6.5ch; text-align: right;
}
.ledger__out { color: var(--signal); }
.ledger__zero { color: var(--own); }
.ledger__foot {
  margin: 0; padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--rule);
  background: rgba(0, 0, 0, 0.25);
  font-size: 0.8125rem; color: var(--ink-faint); max-width: none;
}

/* --- Buttons ------------------------------------------------------------
   Ivory, not amber. Amber is the colour of money leaving on this page, and
   the button is the opposite move. */
.cta {
  display: inline-block;
  font-family: var(--body); font-weight: 600; font-size: 1.0625rem;
  line-height: 1.2;
  color: var(--void); background: var(--own);
  border: 1px solid var(--own); border-radius: 3px;
  padding: 0.95rem 1.75rem;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.cta:hover {
  color: var(--void); background: #fff; border-color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px -8px rgba(240, 231, 214, 0.45);
}
.cta:active { transform: translateY(0); }
.cta--sm { font-size: 0.9375rem; padding: 0.6rem 1.1rem; }

.cta-block { margin-top: 3rem; }
.cta-note {
  margin: 0.9rem 0 0;
  font-size: 0.9375rem; color: var(--ink-faint); max-width: 34em;
}

/* --- Proof screenshots --------------------------------------------------- */
.proof-shots { display: grid; gap: 3.5rem; margin: 2.5rem 0 0; }
/* min-width:0 is load-bearing. These figures are grid items, and a grid item's
   default min-width:auto refuses to shrink below its content — the 2200px-wide
   mobile pan image would blow the whole track (and its siblings) out to 2200px
   and scroll the document sideways. */
.proof-shots figure { margin: 0; min-width: 0; }
.proof-shots img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--panel);
}
.proof-shots figcaption {
  margin-top: 1rem;
  font-size: 0.9375rem; color: var(--ink-dim); max-width: 42em;
  padding-left: 0.9rem;
  border-left: 1px solid var(--rule);
}

/* Breakout for the two wide strips. They escape the text column leftward by
   exactly the rail plus the gutter, so their left edge lands on the rail's —
   the page's real structural edge — and their right edge on the measure's.
   Do NOT restore a viewport-centred formula here (calc(50% - 50vw) and
   friends): those assume the containing block is centred in the viewport, and
   .block__body is not — the rail offsets it right, so a "centred" strip hangs
   off the right edge and scrolls the whole document sideways. */
.proof-shots__wide .proof-shots__scroll,
.proof-shots__wide figcaption {
  margin-left: calc(-1 * (var(--rail) + var(--gap)));
}
.proof-shots__wide .proof-shots__scroll {
  width: calc(100% + var(--rail) + var(--gap));
}

@media (max-width: 60rem) {
  /* At 390px the breakout would render a 3211px-wide screenshot as an 18px
     sliver. Below this width it becomes a pan container instead. */
  .proof-shots__wide .proof-shots__scroll {
    width: auto; margin-left: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--rule);
    border-radius: 4px;
  }
  .proof-shots__wide .proof-shots__scroll img {
    width: 2200px; max-width: none; border: 0; border-radius: 0;
  }
  .proof-shots__wide figcaption { margin-left: 0; }
}

/* --- Builder ------------------------------------------------------------- */
.builder p { max-width: 40em; }

/* --- Steps --------------------------------------------------------------
   Numbered because this genuinely is a sequence — scope, then build, then
   run — and the order is information the reader needs. Mono numerals in the
   gutter, hairline-ruled, so it reads as a schedule rather than as bullets. */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 1.75rem 0 1.75rem 4rem;
  border-top: 1px solid var(--rule);
}
.steps li:last-child { border-bottom: 1px solid var(--rule); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 1.75rem;
  font-family: var(--mono); font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--signal);
}
.steps h3 { margin-bottom: 0.4em; }
.steps p { color: var(--ink-dim); margin: 0; }

/* --- Benefits ----------------------------------------------------------- */
.benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}
.benefits > div {
  background: var(--void);
  padding: 2rem 1.75rem;
}
.block--alt .benefits > div { background: var(--panel); }
.benefits h3 { color: var(--own); margin-bottom: 0.7em; }
.benefits p { color: var(--ink-dim); font-size: 0.9688rem; max-width: none; }
.proof-note {
  margin-top: 1.1em; padding-top: 1.1em;
  border-top: 1px solid var(--rule);
  font-size: 0.875rem; color: var(--ink-faint);
}
.proof-note q { font-style: italic; }

/* --- FAQ ---------------------------------------------------------------- */
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 700; font-size: 1.0625rem;
  letter-spacing: -0.012em;
  padding: 1.35rem 3rem 1.35rem 0;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--own); }
.faq summary::after {
  content: "+";
  position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 1.25rem; font-weight: 400;
  color: var(--signal);
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p {
  margin: 0 0 1.35rem; color: var(--ink-dim); max-width: 42em;
  padding-right: 3rem;
}

/* --- Scheduler ----------------------------------------------------------- */
.scheduler {
  margin-top: 2rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}
.scheduler iframe { display: block; width: 100%; border: 0; }

/* GoHighLevel's form_embed.js hides the booking iframe on load — it writes
   opacity:0, visibility:hidden, pointer-events:none, position:absolute and
   left:-9999px as inline styles, then reveals it again only when its own
   internal check passes. That reveal does not fire here, so without these
   overrides the booking section renders completely empty and the site has no
   working call-to-action. Verified in a browser: the iframe sat at
   left:-9999px with opacity 0 indefinitely, while the widget itself loaded
   fine and even reported its height back to the parent.

   !important is required because the script writes inline styles, which no
   ordinary selector can outrank. All five properties are load-bearing and each
   fails differently, which is why they are listed out rather than trimmed:
   without opacity the calendar is transparent, without visibility it is hidden,
   without pointer-events it renders but silently refuses every click, and
   without position/left it sits 9999px off-screen.

   Height is deliberately NOT overridden, so the script's auto-resize still
   works whenever it does run. */
.scheduler iframe {
  position: static !important;
  left: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  min-height: 700px;
}

/* Narrow screens stack the calendar above the time slots, so the widget needs
   far more room. The iframe cannot be measured cross-origin and .scheduler clips
   overflow, so err generous: trailing whitespace is recoverable, a clipped
   calendar with the time slots cut off is a lost booking.

   This min-height lives here rather than in the iframe's style attribute on
   purpose. GoHighLevel's stock embed snippet ships min-height inline, and an
   inline style outranks any stylesheet rule without !important — which silently
   defeated this media query until the inline value was removed. */
@media (max-width: 700px) {
  .scheduler iframe { min-height: 1100px; }
}

.fallback {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1rem;
  margin-top: 1.25rem;
}

/* --- Footer -------------------------------------------------------------- */
.site-foot {
  padding: 2.5rem var(--pad);
  border-top: 1px solid var(--rule-soft);
}
.site-foot p {
  max-width: var(--maxw); margin: 0 auto;
  font-family: var(--mono); font-size: 0.8125rem;
  color: var(--ink-faint);
}