@charset "utf-8";

/* =============================================================== BIZTRICKS
 * biztricks.vedatricks.com — the one stylesheet for the whole marketing site.
 *
 * ONE file, linked from every page, because the site is ~20 static pages with
 * no build step: a single cached stylesheet is one request on first view and
 * zero on every page after it. Do not inline page-specific CSS in a <style>
 * block — that trades the cache for nothing.
 *
 * ---------------------------------------------------------------- THE IDEA
 *
 * The product's own wedge is DIMENSIONAL PRICING: a wardrobe is 6 × 2 × 7 ft
 * before it is a rupee figure. So the site is built out of a draughtsman's
 * vocabulary — dimension lines, registration ticks, printer's crop marks — and
 * it alternates between two material worlds that the product genuinely
 * bridges:
 *
 *   SCREEN  the app's own teal tokens, lifted verbatim from web/src/index.css
 *   PAPER   an ivory sheet with crop marks — the proposal the customer holds
 *
 * That alternation is not decoration. `docs/memory/vedabm-proposal-documents`
 * records the settled decision "dark on screen, light on paper", and this
 * stylesheet enacts it: .paper stays ivory in dark mode instead of inverting,
 * because a sheet of paper on a dark desk is still a sheet of paper. Every
 * other AI-shaped marketing site inverts everything; this one does not, and
 * that is the single risk the design takes.
 *
 * -------------------------------------------------------- TOKEN PROVENANCE
 *
 * The screen tokens below are the app's, copied as HSL triplets so a
 * side-by-side comparison with web/src/index.css is a literal diff. Do not
 * "improve" a value here in isolation — the marketing site and the product
 * looking like two products is worse than either look being slightly wrong.
 *
 * The paper tokens are NEW and belong to this site only. They have no
 * counterpart in the app because the app never draws paper on screen; the PDF
 * does that, and it is generated by dompdf, not by this CSS.
 */

/* ------------------------------------------------------------------ RESET */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The sticky header is 64px; an in-page anchor must not land under it. */
  scroll-padding-top: 88px;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* ------------------------------------------------------------------ FONTS
 *
 * Self-hosted, subsetted by tools/subset-font.py. Two files, split exactly
 * where fontsource splits them, because the RUPEE SIGN lives in latin-ext and
 * this site is made of prices — see the script's docblock.
 *
 * font-display: swap plus a metric-matched fallback face. The fallback's
 * size-adjust/ascent-override are Inter-against-Arial figures, so the swap
 * moves glyph shapes without moving line boxes: no layout shift on a slow
 * connection, which is the whole reason to bother. */

@font-face {
  font-family: 'Inter Site';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/inter-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+2260, U+2264-2265,
    U+2713, U+2717, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter Site';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2-variations');
  unicode-range: U+20B9;
}

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22.43%;
  line-gap-override: 0%;
}

/* ----------------------------------------------------------- TOKENS: LIGHT */

:root {
  /* SCREEN — verbatim from web/src/index.css :root */
  --bg: hsl(175 25% 98%);
  --surface: hsl(0 0% 100%);
  --surface-2: hsl(175 22% 96%);
  --fg: hsl(192 45% 10%);
  --muted: hsl(192 14% 42%);
  --line: hsl(174 18% 89%);
  --line-strong: hsl(174 16% 80%);
  --brand: hsl(175 77% 25%);
  --brand-fg: hsl(0 0% 100%);
  --brand-tint: hsl(172 60% 94%);
  --brand-deep: hsl(180 55% 12%);
  --amber: hsl(30 92% 36%);
  --info: hsl(205 90% 40%);
  --violet: hsl(262 62% 52%);
  --ring: hsl(175 77% 25%);

  /* PAPER — this site only. A warm ivory that reads as stock, not as "white
   * card"; ink is a soft black with a trace of the brand hue in it so the two
   * worlds are related rather than merely adjacent. */
  --paper: #f6f1e6;
  --paper-2: #efe8d9;
  --paper-ink: #1c1c19;
  --paper-muted: #6c675c;
  --paper-line: #d9d0bd;
  --crop: #b6ab93;

  /* INK BAND — the dark stripe that carries the pipeline section in both
   * colour schemes, so the page has a spine rather than a gradient. */
  --ink-bg: hsl(185 42% 9%);
  --ink-fg: hsl(180 22% 93%);
  --ink-muted: hsl(184 14% 63%);
  --ink-line: hsl(184 26% 18%);
  --ink-brand: hsl(172 66% 50%);

  --shadow-sm: 0 1px 2px hsl(192 40% 10% / 0.05);
  --shadow-md: 0 1px 3px hsl(192 40% 10% / 0.06), 0 8px 24px -12px hsl(192 40% 10% / 0.12);
  --shadow-paper: 0 1px 1px hsl(40 20% 20% / 0.08), 0 18px 44px -20px hsl(40 25% 15% / 0.3);

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 18px;

  --gutter: 20px;
  --measure: 68ch;
  --shell: 1180px;

  --font-sans: 'Inter Site', 'Inter Fallback', ui-sans-serif, system-ui,
    -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* The annotation voice. Every eyebrow, every dimension, every figure in a
   * column is set here — it is how a drawing labels itself, and it is the
   * second typeface in a two-face system that ships only one font file. */
  --font-anno: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono',
    'Roboto Mono', Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

/* ------------------------------------------------------------ TOKENS: DARK
 *
 * Screen tokens flip to the app's dark set. Paper tokens dim only slightly:
 * the sheet is now lit by a lamp rather than by daylight, but it is still
 * paper. Inverting it would be the ordinary choice and would throw away the
 * one idea this design has. */

@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(195 30% 8%);
    --surface: hsl(194 24% 11%);
    --surface-2: hsl(194 22% 14%);
    --fg: hsl(180 15% 92%);
    --muted: hsl(186 12% 64%);
    --line: hsl(192 16% 19%);
    --line-strong: hsl(192 14% 27%);
    --brand: hsl(172 66% 50%);
    --brand-fg: hsl(186 60% 8%);
    --brand-tint: hsl(178 45% 14%);
    --brand-deep: hsl(180 40% 88%);
    --amber: hsl(38 90% 58%);
    --info: hsl(202 90% 64%);
    --violet: hsl(262 70% 70%);
    --ring: hsl(172 66% 50%);

    --paper: #ece5d5;
    --paper-2: #e2d9c5;
    --paper-ink: #1a1a17;
    --paper-muted: #605b50;
    --paper-line: #cec4ae;
    --crop: #a89d84;

    --ink-bg: hsl(192 34% 6%);
    --ink-line: hsl(190 22% 15%);

    --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.3);
    --shadow-md: 0 1px 3px hsl(0 0% 0% / 0.35), 0 10px 28px -14px hsl(0 0% 0% / 0.6);
    --shadow-paper: 0 2px 2px hsl(0 0% 0% / 0.35), 0 22px 50px -22px hsl(0 0% 0% / 0.7);
    color-scheme: dark;
  }
}

/* ------------------------------------------------------------------- BASE */

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--brand);
  color: var(--brand-fg);
}

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
}

a:hover {
  text-decoration-color: currentColor;
}

/* Focus is drawn once, here, and never removed anywhere else in this file.
 * Two rings so it survives on both the pale bands and the ink band. */
:where(a, button, summary, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--brand);
  color: var(--brand-fg);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: top 0.15s var(--ease);
}

.skip:focus {
  top: 12px;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------------- TYPE
 *
 * Fluid, but with real minimums — the clamp floors are chosen so a 360px
 * phone gets a headline that still reads as a headline rather than as body
 * copy that happens to be bold. */

h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.d1 {
  font-size: clamp(2.55rem, 1.55rem + 4.1vw, 4.9rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.d2 {
  font-size: clamp(2.05rem, 1.5rem + 2.4vw, 3.3rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.038em;
}

.h2 {
  font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.25rem);
  font-weight: 780;
  line-height: 1.12;
  letter-spacing: -0.032em;
}

.h3 {
  font-size: clamp(1.15rem, 1.05rem + 0.35vw, 1.35rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.02em;
}

.h4 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.012em;
}

.lead {
  font-size: clamp(1.09rem, 1.02rem + 0.35vw, 1.28rem);
  line-height: 1.58;
  color: var(--muted);
  text-wrap: pretty;
}

.prose {
  max-width: var(--measure);
  text-wrap: pretty;
}

.prose > * + * {
  margin-top: 1.05em;
}

.prose h2 {
  margin-top: 2.2em;
}

.prose h3 {
  margin-top: 1.8em;
}

.prose ul,
.prose ol {
  padding-left: 1.35em;
}

.prose li + li {
  margin-top: 0.45em;
}

.prose strong {
  font-weight: 650;
  color: var(--fg);
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* The annotation voice: mono, uppercase, tracked. Used for eyebrows, units,
 * document numbers and table headers — anywhere a draughtsman would letter
 * rather than write. */
.anno {
  font-family: var(--font-anno);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Figures. tnum is why the font subset keeps the feature. */
.num {
  font-family: var(--font-anno);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -0.01em;
}

/* ------------------------------------------------------------ THE TICK RULE
 *
 * The site's structural signature. A registration tick and a hairline before
 * a mono label — the mark a drawing sheet carries at the edge of its border.
 * It is used ONLY as a section eyebrow, never as a plain divider, because a
 * tick that measures nothing is decoration. */

.tick {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--brand);
}

.tick::before {
  content: '';
  width: 26px;
  height: 7px;
  flex: none;
  border-left: 1.5px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-1px);
}

.tick--center {
  justify-content: center;
}

/* ---------------------------------------------------------------- LAYOUT */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band {
  padding-block: clamp(56px, 8vw, 104px);
}

.band--tight {
  padding-block: clamp(40px, 5vw, 64px);
}

.band--alt {
  background: var(--surface-2);
  border-block: 1px solid var(--line);
}

.band--ink {
  background: var(--ink-bg);
  color: var(--ink-fg);
  border-block: 1px solid var(--ink-line);
}

.band--ink .tick,
.band--ink .brand-text {
  color: var(--ink-brand);
}

.band--ink .muted,
.band--ink .lead {
  color: var(--ink-muted);
}

.stack > * + * {
  margin-top: var(--gap, 20px);
}

.grid {
  display: grid;
  gap: clamp(16px, 2.4vw, 28px);
}

.g2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.g3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.split {
  display: grid;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }

  .split--wide {
    grid-template-columns: 1.08fr 0.92fr;
  }

  .split--narrow {
    grid-template-columns: 0.86fr 1.14fr;
  }

  .split--flip > :first-child {
    order: 2;
  }
}

.section-head {
  max-width: 46ch;
}

.section-head > * + * {
  margin-top: 14px;
}

/* ---------------------------------------------------------------- BUTTONS */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 10px;
  font: inherit;
  font-size: 0.9688rem;
  font-weight: 620;
  letter-spacing: -0.011em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.16s var(--ease), border-color 0.16s var(--ease),
    color 0.16s var(--ease), transform 0.16s var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--brand);
  color: var(--brand-fg);
}

.btn--primary:hover {
  background: color-mix(in srgb, var(--brand) 88%, var(--fg));
}

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--fg);
  background: transparent;
}

.btn--ghost:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-tint);
}

.band--ink .btn--primary {
  background: var(--ink-brand);
  color: hsl(186 60% 8%);
}

.band--ink .btn--ghost {
  border-color: var(--ink-line);
  color: var(--ink-fg);
}

.band--ink .btn--ghost:hover {
  border-color: var(--ink-brand);
  color: var(--ink-brand);
  background: hsl(172 60% 50% / 0.09);
}

.btn--sm {
  min-height: 40px;
  padding: 0 16px;
  font-size: 0.9063rem;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* An arrow that leans into the hover rather than sliding across the page. */
.btn svg {
  transition: transform 0.2s var(--ease);
}

.btn:hover svg {
  transform: translateX(2px);
}

/* ------------------------------------------------------------------ CARDS */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 2.6vw, 28px);
  box-shadow: var(--shadow-sm);
}

.card > * + * {
  margin-top: 12px;
}

.card--link {
  display: block;
  text-decoration: none;
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease),
    box-shadow 0.18s var(--ease);
}

.card--link:hover {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.card--link .h3 {
  color: var(--fg);
}

.card--link:hover .h3 {
  color: var(--brand);
}

.band--ink .card {
  background: hsl(190 30% 12%);
  border-color: var(--ink-line);
}

/* The glyph tile that opens a feature card. Never a filled circle — a square
 * with the brand tint, matching the app's own empty-state tiles. */
.tile {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--brand-tint);
  color: var(--brand);
  border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
}

.band--ink .tile {
  background: hsl(172 60% 50% / 0.12);
  color: var(--ink-brand);
  border-color: hsl(172 60% 50% / 0.22);
}

/* --------------------------------------------------------------- THE PAPER
 *
 * A sheet of stock with printer's crop marks at the corners. The marks are
 * eight background-image layers on one pseudo-element rather than four extra
 * divs, so a page author writes <div class="sheet"><div class="paper">…
 * and gets the whole device.
 *
 * The wrapper exists because the marks sit OUTSIDE the trim edge, which is
 * what a crop mark is; drawing them inside the sheet would make them a border
 * pattern instead. */

.sheet {
  position: relative;
  isolation: isolate;
}

.sheet::before {
  content: '';
  position: absolute;
  inset: -14px;
  pointer-events: none;
  z-index: 1;
  --m: var(--crop);
  background-image:
    linear-gradient(var(--m), var(--m)), linear-gradient(var(--m), var(--m)),
    linear-gradient(var(--m), var(--m)), linear-gradient(var(--m), var(--m)),
    linear-gradient(var(--m), var(--m)), linear-gradient(var(--m), var(--m)),
    linear-gradient(var(--m), var(--m)), linear-gradient(var(--m), var(--m));
  background-repeat: no-repeat;
  background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px,
    14px 1px, 1px 14px;
  background-position: left top, left top, right top, right top, left bottom,
    left bottom, right bottom, right bottom;
}

@media (max-width: 640px) {
  .sheet::before {
    display: none;
  }
}

.paper {
  position: relative;
  z-index: 2;
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: 2px;
  box-shadow: var(--shadow-paper);
  padding: clamp(22px, 3vw, 34px);
}

.paper .muted,
.paper .anno {
  color: var(--paper-muted);
}

.paper .tick {
  color: var(--paper-muted);
}

.paper hr,
.paper .hair {
  border: 0;
  border-top: 1px solid var(--paper-line);
  margin-block: 14px;
}

/* ------------------------------------------------------------- DATA TABLES
 *
 * Every table on this site is a document excerpt — a quote's lines, a tax
 * split, a plan comparison. They are set the way the product sets them:
 * 11px mono uppercase headers, tabular figures, hairline rules, no zebra. */

.tbl-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

table.tbl th {
  font-family: var(--font-anno);
  font-size: 0.6563rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  color: var(--muted);
  padding: 0 12px 8px 0;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}

table.tbl td {
  padding: 11px 12px 11px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

table.tbl td:last-child,
table.tbl th:last-child {
  padding-right: 0;
}

table.tbl .r {
  text-align: right;
  font-family: var(--font-anno);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

table.tbl tr:last-child td {
  border-bottom: 0;
}

.paper table.tbl th {
  color: var(--paper-muted);
  border-bottom-color: var(--paper-line);
}

.paper table.tbl td {
  border-bottom-color: color-mix(in srgb, var(--paper-line) 60%, transparent);
}

.tbl .total td {
  border-top: 1.5px solid var(--paper-line);
  border-bottom: 0;
  font-weight: 700;
  padding-top: 12px;
}

/* --------------------------------------------------------------- FRAGMENTS */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--font-anno);
  font-size: 0.6563rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  background: var(--brand-tint);
  color: var(--brand);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent);
}

.chip--amber {
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  color: var(--amber);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 30%, transparent);
}

.chip--violet {
  background: color-mix(in srgb, var(--violet) 12%, transparent);
  color: var(--violet);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--violet) 30%, transparent);
}

.chip--plain {
  background: transparent;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  color: var(--muted);
}

/* A list where each item is a claim, marked with a tick glyph drawn in CSS
 * rather than shipped as an icon font. */
.ticklist {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 10px;
}

.ticklist li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 1rem;
  line-height: 1.5;
}

.ticklist li::before {
  content: '';
  margin-top: 6px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
  justify-self: center;
}

.ticklist--muted li::before {
  border-color: var(--muted);
}

.ticklist--none li::before {
  border: 0;
  width: 11px;
  height: 11px;
  margin-top: 6px;
  background: linear-gradient(var(--muted), var(--muted)) center / 11px 1.5px no-repeat;
  transform: none;
}

/* ------------------------------------------------------------------- FAQ
 *
 * <details> so the answer is in the DOM and in the crawl whether or not it is
 * open, and so the page needs no JavaScript to work. The summary marker is
 * replaced with a drawn plus/minus. */

.faq {
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1.03rem, 0.98rem + 0.25vw, 1.15rem);
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.4;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '';
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 5px;
  background: linear-gradient(var(--brand), var(--brand)) center / 14px 1.8px no-repeat,
    linear-gradient(var(--brand), var(--brand)) center / 1.8px 14px no-repeat;
  transition: transform 0.2s var(--ease);
}

/* Open drops the vertical stroke, so the plus becomes a minus. Not a rotation
 * to an ×: an × means "dismiss this", and the control collapses a section. */
.faq details[open] summary::after {
  background: linear-gradient(var(--brand), var(--brand)) center / 14px 1.8px no-repeat;
}

.faq .answer {
  padding-bottom: 22px;
  max-width: var(--measure);
  color: var(--muted);
}

.faq .answer > * + * {
  margin-top: 0.9em;
}

/* The first sentence of every answer is the answer. It is emphasised in the
 * markup and here, both because a reader skims it and because an answer
 * engine lifts it. */
.faq .answer .direct {
  color: var(--fg);
  font-weight: 550;
}

/* ------------------------------------------------------------------ HEADER */

.hdr {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.hdr-in {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 64px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 730;
  font-size: 1.0625rem;
  letter-spacing: -0.03em;
  color: var(--fg);
  flex: none;
}

.logo svg {
  flex: none;
}

.nav {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: 2px;
}

.nav a {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 520;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
}

.nav a:hover {
  color: var(--fg);
  background: var(--surface-2);
}

.nav a[aria-current='page'] {
  color: var(--brand);
  background: var(--brand-tint);
}

.hdr-cta {
  display: none;
  margin-left: 10px;
}

.burger {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
}

@media (min-width: 940px) {
  .nav,
  .hdr-cta {
    display: flex;
  }

  .burger {
    display: none;
  }
}

/* Mobile sheet. Hidden with [hidden] so it is inert to the keyboard and to a
 * screen reader when closed — display:none on a class would not be. */
.mnav[hidden] {
  display: none;
}

.mnav {
  position: fixed;
  inset: 64px 0 0;
  z-index: 39;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 22px var(--gutter) 40px;
  overflow-y: auto;
  animation: sheet 0.22s var(--ease);
}

.mnav a {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.0625rem;
  font-weight: 560;
  text-decoration: none;
  letter-spacing: -0.015em;
}

.mnav .anno {
  color: var(--muted);
  padding-top: 22px;
  padding-bottom: 6px;
}

.mnav .btn {
  width: 100%;
  margin-top: 22px;
}

@keyframes sheet {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* ------------------------------------------------------------------ FOOTER */

.ftr {
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  padding-block: clamp(40px, 5vw, 64px) 28px;
  font-size: 0.9375rem;
}

.ftr-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}

.ftr-grid > div:first-child {
  grid-column: 1 / -1;
}

@media (min-width: 780px) {
  .ftr-grid {
    grid-template-columns: 1.5fr repeat(4, 1fr);
  }

  .ftr-grid > div:first-child {
    grid-column: auto;
  }
}

.ftr h2 {
  font-family: var(--font-anno);
  font-size: 0.6563rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

.ftr ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 9px;
}

.ftr a {
  color: var(--muted);
  text-decoration: none;
}

.ftr a:hover {
  color: var(--brand);
}

.ftr-base {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.875rem;
}

/* -------------------------------------------------------------- BREADCRUMB */

.crumbs {
  padding-top: 22px;
  font-family: var(--font-anno);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.crumbs ol {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.crumbs li + li::before {
  content: '/';
  margin-right: 8px;
  color: var(--line-strong);
}

.crumbs a {
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--brand);
}

/* ------------------------------------------------------------------ DRAWING
 *
 * Shared rules for the hand-authored inline SVG. Everything is stroked with
 * currentColor or a token so a single illustration works in both colour
 * schemes without a second copy. */

.dwg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.dwg .stroke {
  fill: none;
  stroke: var(--fg);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dwg .thin {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1;
}

.dwg .brand {
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dwg .fill-tint {
  fill: var(--brand-tint);
  stroke: none;
}

.dwg .fill-surface {
  fill: var(--surface);
  stroke: none;
}

.dwg .label {
  font-family: var(--font-anno);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  fill: var(--muted);
}

.dwg .figure {
  font-family: var(--font-anno);
  font-size: 11px;
  font-weight: 600;
  fill: var(--fg);
  font-variant-numeric: tabular-nums;
}

/* The dimension line. A hairline in the brand colour with a tick at each end
 * — the one motif the whole site is built from, drawn here for real because
 * here it is genuinely measuring something. */
.dwg .dim {
  fill: none;
  stroke: var(--brand);
  stroke-width: 1;
  opacity: 0.85;
}

.dwg .dim-txt {
  font-family: var(--font-anno);
  font-size: 9.5px;
  font-weight: 600;
  fill: var(--brand);
  letter-spacing: 0.02em;
}

.paper .dwg .stroke,
.paper .dwg .figure {
  stroke: var(--paper-ink);
  fill: none;
}

.paper .dwg .figure {
  fill: var(--paper-ink);
  stroke: none;
}

.paper .dwg .label {
  fill: var(--paper-muted);
}

.band--ink .dwg .stroke {
  stroke: var(--ink-fg);
}

.band--ink .dwg .thin {
  stroke: var(--ink-muted);
}

.band--ink .dwg .label {
  fill: var(--ink-muted);
}

.band--ink .dwg .figure {
  fill: var(--ink-fg);
}

.band--ink .dwg .brand,
.band--ink .dwg .dim {
  stroke: var(--ink-brand);
}

.band--ink .dwg .dim-txt {
  fill: var(--ink-brand);
}

/* --------------------------------------------------------------- PIPELINE
 *
 * Lead → Quote → Proposal → Invoice → Payment. Numbered, because it really is
 * a sequence: this is the order the product moves a job through, and the
 * numbers carry information the reader needs. */

.pipe {
  display: grid;
  gap: 2px;
  counter-reset: step;
}

@media (min-width: 860px) {
  .pipe {
    grid-template-columns: repeat(5, 1fr);
  }
}

.pipe-step {
  position: relative;
  padding: 22px 20px 24px;
  background: hsl(190 30% 12%);
  border: 1px solid var(--ink-line);
}

.pipe-step:first-child {
  border-radius: var(--radius) var(--radius) 0 0;
}

.pipe-step:last-child {
  border-radius: 0 0 var(--radius) var(--radius);
}

@media (min-width: 860px) {
  .pipe-step:first-child {
    border-radius: var(--radius) 0 0 var(--radius);
  }

  .pipe-step:last-child {
    border-radius: 0 var(--radius) var(--radius) 0;
  }
}

.pipe-step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-anno);
  font-size: 0.6563rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink-brand);
  display: block;
  margin-bottom: 14px;
}

.pipe-step h3 {
  font-size: 1.0625rem;
  margin-bottom: 7px;
}

.pipe-step p {
  font-size: 0.9063rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

.pipe-step .num {
  display: block;
  margin-top: 12px;
  font-size: 0.75rem;
  color: var(--ink-brand);
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------- PRICING */

.plans {
  display: grid;
  gap: 20px;
}

@media (min-width: 880px) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 820px;
    margin-inline: auto;
  }
}

.plan {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.plan--featured {
  border-color: var(--brand);
  box-shadow: var(--shadow-md), 0 0 0 1px var(--brand);
}

.plan .price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.plan .price b {
  font-family: var(--font-anno);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.1rem, 1.6rem + 1.8vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

.plan .btn {
  width: 100%;
}

.plan hr {
  border: 0;
  border-top: 1px solid var(--line);
}

/* ------------------------------------------------------------------ CALLOUT */

.note {
  border-left: 3px solid var(--brand);
  background: var(--brand-tint);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 16px 20px;
  font-size: 0.9688rem;
  line-height: 1.55;
}

.note--amber {
  border-left-color: var(--amber);
  background: color-mix(in srgb, var(--amber) 9%, transparent);
}

.note strong {
  font-weight: 650;
}

/* ------------------------------------------------------------------- CTA */

.cta {
  border-radius: var(--radius-lg);
  border: 1px solid var(--ink-line);
  background: var(--ink-bg);
  color: var(--ink-fg);
  padding: clamp(30px, 5vw, 56px);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* A faint drawing grid behind the CTA — the graph paper a measurement is
 * taken on. Two repeating gradients, no image, no request. */
.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--ink-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink-line) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 40%, #000, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 90% at 50% 40%, #000, transparent 78%);
  pointer-events: none;
}

.cta > * {
  position: relative;
}

.cta > * + * {
  margin-top: 18px;
}

.cta .lead {
  color: var(--ink-muted);
  margin-inline: auto;
  max-width: 52ch;
}

.cta .btn-row {
  justify-content: center;
}

.cta .btn--primary {
  background: var(--ink-brand);
  color: hsl(186 60% 8%);
}

.cta .btn--ghost {
  border-color: var(--ink-line);
  color: var(--ink-fg);
}

.cta .btn--ghost:hover {
  border-color: var(--ink-brand);
  color: var(--ink-brand);
  background: hsl(172 60% 50% / 0.09);
}

.cta .tick {
  color: var(--ink-brand);
  justify-content: center;
}

/* ------------------------------------------------------------------ MOTION
 *
 * Two moments only: the hero draws itself once on load, and content lifts a
 * few pixels as it enters. Both are switched off entirely under
 * prefers-reduced-motion — not slowed, off — and both are additive, so a
 * browser without JavaScript or without IntersectionObserver shows the
 * finished state rather than a blank page. */

/* The hidden state is scoped to `.js`, which is set inline in <head> before
 * first paint. A visitor with JavaScript disabled never gets the class and
 * therefore never gets the hidden state — the content is simply there. This
 * ordering matters: a bare `.reveal { opacity: 0 }` would leave the entire
 * page blank for them, which is the classic way a scroll-reveal becomes a
 * white screen. site.js reveals everything up front if IntersectionObserver
 * is missing, and runs the reveal before anything else that could throw. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* Staggered children inside a revealed group. */
.reveal[data-d='1'] {
  transition-delay: 0.07s;
}

.reveal[data-d='2'] {
  transition-delay: 0.14s;
}

.reveal[data-d='3'] {
  transition-delay: 0.21s;
}

.reveal[data-d='4'] {
  transition-delay: 0.28s;
}

/* The hero drawing's ONE orchestrated moment: the outline is already there,
 * and the dimension lines are struck across it the way a draughtsman adds
 * them last. */
.js .draw {
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  animation: draw 0.9s var(--ease) 0.25s forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

.js .fade-late {
  opacity: 0;
  animation: fadeLate 0.5s var(--ease) 0.95s forwards;
}

@keyframes fadeLate {
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .js .draw {
    stroke-dashoffset: 0;
  }

  .js .fade-late {
    opacity: 1;
  }
}

/* -------------------------------------------------------------------- PRINT
 *
 * Someone will print the pricing page for a partner meeting. Give them the
 * paper version rather than a screenshot of a dark website. */

@media print {
  .hdr,
  .mnav,
  .ftr,
  .skip,
  .cta {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .band {
    padding-block: 12pt;
  }

  .card,
  .plan {
    border: 1px solid #999;
    box-shadow: none;
    break-inside: avoid;
  }

  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 8pt;
    color: #555;
  }
}