/* Arkaic landing — brand system v1.0.
   Foundation: Graphite and Paper. Display: Montagu Slab. Functional: Space Grotesk.
   Accents (cyan, gold, coral) enter only through the prisms.
   4-column grid, generous margins, flat and matte: no shadows, no gradients. */

/* Fonts are self-hosted (SIL Open Font License) so no visitor data goes to Google. */
@font-face {
  font-family: "Montagu Slab";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/montagu-slab-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montagu Slab";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/montagu-slab-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Shrikhand";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/shrikhand-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Shrikhand";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/shrikhand-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper: #F5F0E8;
  --graphite: #1E1D1A;
  --cyan: #2DC4C4;      --cyan-dark: #003940;   --cyan-light: #C6EDEB;
  --gold: #D6A321;      --gold-dark: #3C310B;
  --coral: #F27649;     --coral-dark: #421D10;
  --green: #8DC63F;

  --ink: var(--graphite);
  --ink-70: rgba(30, 29, 26, 0.70);
  --ink-45: rgba(30, 29, 26, 0.45);
  --ink-15: rgba(30, 29, 26, 0.15);
  --paper-70: rgba(245, 240, 232, 0.70);
  --paper-45: rgba(245, 240, 232, 0.45);
  --paper-18: rgba(245, 240, 232, 0.18);

  --font-display: "Montagu Slab", Georgia, "Times New Roman", serif;
  --font-text: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(24px, 5vw, 80px);
  --col-gap: clamp(20px, 2.5vw, 40px);
  --section-y: clamp(72px, 11vh, 150px);
  --max: 1440px;
  /* one measure for every section's paragraphs and every figure's
     caption: a fixed width, so text of different sizes lines up */
  --measure: 46rem;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--graphite); }
body {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--paper);
  background: var(--graphite);
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
strong { font-weight: 500; }

.skip {
  position: absolute; left: var(--gutter); top: -100px;
  background: var(--paper); color: var(--graphite); padding: 10px 14px; z-index: 100;
}
.skip:focus { top: 12px; }

/* ---- type ---- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 8.4vw, 124px);
  line-height: 1.0;
  letter-spacing: -0.05em;
  color: var(--paper);
}
.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.05em;
  max-width: 16ch;
}
.body-lg { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.4; max-width: var(--measure); }
.h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.04em;
  margin-bottom: 24px;
}
.paper .body-lg { color: var(--ink-70); }
.graphite .body-lg { color: var(--paper-70); }

/* section tag: numbered chip like the brand guide */
.tag {
  display: inline-flex; align-items: stretch;
  font-family: var(--font-text); font-weight: 500; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--ink); margin-bottom: 22px;
}
.tag-num { padding: 4px 8px; color: var(--ink); }
.tag-label { padding: 4px 9px; background: var(--ink); color: var(--paper); }
.paper-tag { border-color: var(--paper); }
.paper-tag .tag-num { color: var(--paper); }
.paper-tag .tag-label { background: var(--paper); color: var(--graphite); }


/* ---- buttons ---- */
.button {
  display: inline-block;
  font-family: var(--font-text); font-weight: 500; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  padding: 14px 26px; border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.button-graphite { background: var(--graphite); color: var(--paper); border-color: var(--graphite); }
.button-graphite:hover { background: var(--cyan-dark); border-color: var(--cyan-dark); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* waitlist: email field and button share one row */
.waitlist { display: flex; flex-wrap: wrap; margin-top: 36px; max-width: 520px; }
.waitlist input[type="email"] {
  flex: 1 1 240px; min-width: 0;
  font: inherit; font-size: 16px; letter-spacing: -0.01em;
  padding: 13px 16px; border: 1px solid var(--ink-45); border-right: 0; border-radius: 0;
  background: transparent; color: var(--ink);
}
.waitlist input[type="email"]::placeholder { color: var(--ink-45); }
.waitlist input[type="email"]:focus-visible { outline-offset: -2px; }
.waitlist .button { flex: none; cursor: pointer; }
.waitlist .button:disabled { opacity: 0.6; cursor: default; }
.waitlist-msg { flex-basis: 100%; margin-top: 14px; font-size: 14px; color: var(--ink-70); }
.waitlist-msg:empty { display: none; }
.consent { flex-basis: 100%; margin: 12px 0 0; font-size: 13px; color: var(--ink-70); }
.consent a { color: inherit; }
.meet-form .consent { margin-top: 20px; }

/* ---- topbar ---- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center;
  padding: 22px var(--gutter);
  background: var(--graphite);
}
.brand img { height: 30px; width: auto; }
/* the site links: at the right on wide screens; on phones a panel under the bar, opened by
   the Menu button (nav.js) */
.topnav { display: flex; gap: 28px; margin-left: auto; }
.topnav a {
  font-weight: 500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  color: var(--paper-70); padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.topnav a:hover, .topnav a[aria-current] { color: var(--paper); border-color: var(--coral); }
.nav-toggle { display: none; }

/* ---- hero ---- */
.hero {
  position: relative;
  min-height: calc(100svh - 78px);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(48px, 8vh, 96px) var(--gutter) 0;
  overflow: hidden;
}
.hero-inner { position: relative; max-width: var(--max); margin: 0 auto; width: 100%; }
.display .line { display: block; }
.lede { margin-top: 32px; max-width: 62ch; color: var(--paper-70); font-size: clamp(17px, 1.35vw, 20px); }

/* prisms wander around their own centroids (main.js) and thread through the
   type: the headline creates no stacking context, so a letter wrapped in
   .lt-front (z 3) paints over a form while its plain neighbour (unpositioned,
   painted first) sits behind it.
   Each prism sits in an .anchor around its letter (positioned, but no z-index,
   so still no stacking context), and its size and offset are in em: it tracks
   that letter at every width and line wrap. */
.lt-front { position: relative; z-index: 3; }
.anchor { position: relative; }
.prism {
  position: absolute; width: 0.5em; height: auto; max-width: none;
  pointer-events: none; will-change: transform; z-index: 2;
  /* left/top are the form's centre; main.js keeps the -50% offset in its transform */
  transform: translate(-50%, -50%);
}
.prism-back { width: 0.655em; z-index: 1; }
.prism-tetra { left: 0.66em; top: 0.62em; }   /* on the o|m seam of "Computing": o in front, m behind */
.prism-octa { width: 0.72em; left: 100%; top: 0.38em; }   /* over the top right of the l in "Built", under the t */
.prism-cube { left: 0.62em; top: 0.25em; }   /* over the o of "Discovery", behind the v */
.strokes-band {
  /* same max width as the content grid, so its ends line up with the rules below */
  width: 100%; max-width: var(--max);
  margin: clamp(56px, 10vh, 120px) auto 0;
  height: 42px;   /* six strokes: a 2px line every 8px */
  background: repeating-linear-gradient(
    to bottom,
    var(--paper-45) 0 2px,
    transparent 2px 8px
  );
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,1));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,1));
}

/* ---- sections + grid ---- */
.section { padding: var(--section-y) var(--gutter); }
.section > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.paper { background: var(--paper); color: var(--ink); }
.graphite { background: var(--graphite); color: var(--paper); }
/* grounds follow the story, not a strict alternation: the product proofs run
   on one Paper ground, so a rule across the content width marks each section */
.paper + .paper > :first-child { border-top: 1px solid var(--ink-15); padding-top: clamp(28px, 4vh, 48px); }
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 40px;
  align-items: start;
}
.span-2 { grid-column: span 2; }

/* evolve */
.evolve { font-family: "Shrikhand", var(--font-display); font-style: normal; letter-spacing: -0.02em; color: var(--coral); }
.principles { list-style: none; border-top: 1px solid var(--ink); }
.principles li { padding: 16px 0; border-bottom: 1px solid var(--ink-15); color: var(--ink); font-size: 16px; line-height: 1.4; }
/* same list on a Graphite section: Paper rules and type */
.graphite .principles { border-top-color: var(--paper); }
.graphite .principles li { border-bottom-color: var(--paper-18); color: var(--paper); }

/* product section, top to bottom: full-width intro, waitlist band, then each
   pain point (problem, how Evolve treats it, proof) and the pipeline. Text
   and headings share the content's left edge; the waitlist card is centred. */
.product-intro .h2 { max-width: none; }
.product-intro .body-lg { margin-top: 24px; }
.waitlist-band { margin-top: clamp(64px, 9vh, 112px); scroll-margin-top: 78px; }   /* clear the sticky topbar */
/* the band closes its section: no Paper strip between it and the next one */
.section:has(> .waitlist-band:last-child) { padding-bottom: 0; }
.section > .result { margin-top: clamp(40px, 6vh, 72px); }

/* pain points: the problem on the left, how Evolve treats it on the right */
.section > .pipeline { margin-top: clamp(80px, 12vh, 144px); }
.section > .pipeline.first { margin-top: 0; }
/* headline, then the pain, then how Evolve treats it in two columns that
   read top to bottom; .line keeps each sentence on a line of its own */
.pain-head { max-width: none; }
.pain-head .line { display: block; }
.pain .body-lg { margin-top: 24px; }
.pain-how { margin-top: 40px; }
/* a grid, two to a row: each row is as tall as its taller item, so the
   rules under the items line up across the row whatever their length */
.pain-how .principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
.pain-how .principles li { padding: 24px 0; }
.how {
  font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-70); margin-bottom: 12px;
}
.principles code, .steps code { font-family: ui-monospace, Menlo, monospace; font-size: 0.9em; letter-spacing: 0; }
/* a demo video, framed like the screenshots; dark until it loads. It takes the
   full content width, so its edges line up with the section rules and the hero's
   strokes band, and it outweighs the 1000px figures around it */
.result .demo {
  --figure-w: var(--max);
  display: block; width: min(100%, var(--figure-w)); height: auto; aspect-ratio: 16 / 9; margin: 24px auto 0;
  object-fit: contain; background: var(--paper); border: 1px solid var(--paper-45);
}
/* the clips are rendered on Paper, so on a Paper section they sit flush, with no frame.
   Their content spans x = 90..1860 of the 1920 px frame: scale so that span meets the
   text edges, and let the blank margins run into the gutter */
.paper .result .demo {
  border: 0;
  width: calc(100% * 1920 / 1770); max-width: none;
  margin-left: calc(-100% * 90 / 1770);
}
/* a loop of Evolve's own UI, captured at 2x and shown at its 1x width, with a hairline so its
   white ground reads as a frame on Paper; phones get the main column alone */
.ui-loop img { display: block; width: min(100%, 1150px); height: auto; margin: 0 auto; border: 1px solid var(--ink-15); }

/* MOCKUP: stands in for a visual not made yet */
.placeholder {
  display: grid; place-items: center; aspect-ratio: 16 / 10;
  border: 1px dashed var(--ink-45); color: var(--ink-45);
  font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 32px); letter-spacing: -0.04em;
}

/* the same pieces on a Graphite section */
.graphite .how { color: var(--paper-70); }
.graphite .placeholder { border-color: var(--paper-45); color: var(--paper-45); }
.graphite .compare-note { color: var(--paper-70); }
/* proofs keep a rule that shows on their section's ground */
.graphite .result img { border-color: var(--paper-45); }

/* pipeline: three steps across, numbered */
.pipeline .body-lg { color: var(--ink-70); margin-top: 24px; }   /* the same gap under the headline as .pain */
.steps {
  list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--col-gap); row-gap: 32px; margin-top: 40px;
}
.steps li { border-top: 1px solid var(--ink); padding-top: 16px; }
.step-num { font-family: var(--font-display); font-size: 34px; letter-spacing: -0.04em; line-height: 1; color: var(--ink-45); }
.steps h4 { margin: 12px 0 8px; font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
.steps p { color: var(--ink-70); font-size: 16px; line-height: 1.45; }
.graphite .pipeline .body-lg { color: var(--paper-70); }
.graphite .steps li { border-top-color: var(--paper); }
.graphite .step-num { color: var(--paper-45); }
.graphite .steps p { color: var(--paper-70); }
/* the study animation and the proofs share one centred width, so they
   read as a set; each sits square-cornered in a Graphite rule like the
   waitlist card. The animation is a fixed 950x594 stage that scales itself
   to its frame, so the frame only needs the right proportions. */
.study, .result { --figure-w: 1000px; }
.section > .study { margin-top: clamp(40px, 6vh, 72px); }
/* intro text on the left, the engine drawing on the right; stacked on narrow screens */
.lead-row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6.5fr); gap: clamp(32px, 4vw, 64px); align-items: start; margin-top: 40px; }
.lead-row > .study { margin: 0; }
/* the tagline stays on one line, running past the text column over the empty corner of the
   drawing frame, so the columns (and the drawing) do not move with it */
@media (min-width: 1100px) { .product-intro .h2 { white-space: nowrap; } }
.study + .pain { margin-top: clamp(80px, 12vh, 144px); }
/* a quiet label over the animation, on its left edge, so it does not
   compete with the line above or the headline below */
.study-label { width: min(100%, var(--figure-w)); margin: 0 auto; }
.study-frame {
  width: min(100%, var(--figure-w)); margin: 12px auto 0; aspect-ratio: 950 / 594;
  background: #fff; border: 1px solid var(--graphite);
}
/* the drawings canvas: line art straight on the section, in the section's ink */
.trace-frame { aspect-ratio: 8 / 5; background: none; border: 0; }
.trace-canvas { display: block; width: 100%; height: 100%; }
.study-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.result img {
  display: block; width: min(100%, var(--figure-w)); height: auto;
  margin: 24px auto 0; border: 1px solid var(--graphite);
}

/* waitlist: Eigenmode field (texture 04, cyan) behind a centred Paper card,
   the same construction as the closing contact band (texture 06, coral) */
.waitlist-band {
  display: grid; place-items: center;
  /* full bleed, like the closing band: the section pads by the gutter, so
     pulling out by the gutter reaches both edges of the window */
  max-width: none;
  margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter));
  padding: clamp(56px, 10vh, 120px) clamp(16px, 4vw, 48px);
  background: var(--cyan) url("assets/eigenmode-04-cyan.jpg") center / cover no-repeat;
}
.waitlist-card {
  width: min(100%, 640px);
  background: var(--paper); border: 1px solid var(--graphite);
  padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 56px);
}
.waitlist-card .waitlist { margin: 28px 0 0; max-width: none; }
/* the pitch to pilots, above the form */
.cta-title {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05; letter-spacing: -0.05em; color: var(--ink);
}
.cta-text { margin-top: 16px; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.45; color: var(--ink-70); }

.compare-note { margin: 16px auto 0; max-width: min(100%, var(--measure)); text-align: center; font-size: 13px; line-height: 1.45; color: var(--ink-70); }

/* team: a carousel. The person shown is centred with their bio under
   them; the others sit beside, smaller and dimmed, and arrows, dots, a
   click on a side card, arrow keys, or a swipe move it (team.js). Without
   script the cards stand in a centred row, bios showing */
.team {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(24px, 3vw, 48px); margin: 28px auto 0;
}
.person { width: min(100%, 320px); }
.person-card { border: 1px solid var(--paper-45); padding-bottom: 22px; text-align: center; }
.person-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.person-name {
  margin: 18px 20px 0; font-family: var(--font-display); font-weight: 400;
  font-size: 24px; letter-spacing: -0.03em; line-height: 1.1;
}
.person-role { margin: 6px 20px 0; font-size: 14px; color: var(--paper-70); }
.team .person-bio { margin-top: 20px; color: var(--paper-70); font-size: 16px; line-height: 1.55; }

.team-carousel.on .team { display: grid; justify-items: center; overflow: hidden; padding: 4px 0; }
.team-carousel.on .person {
  grid-area: 1 / 1; width: min(100%, 560px);
  transition: transform 0.6s cubic-bezier(.2, .7, .2, 1), opacity 0.6s;
}
.team-carousel.on .person-card { width: min(100%, 320px); margin: 0 auto; }
.team-carousel.on .person:not(.current) { cursor: pointer; opacity: 0.35; }
.team-carousel.on .person.current { position: relative; z-index: 1; }
.team-carousel.on .person-card { background: var(--graphite); }
@media (max-width: 700px) {
  .team-carousel.on .person:not(.current) { opacity: 0; pointer-events: none; }
}
.team-carousel.on .person:not(.current) .person-bio { visibility: hidden; }
.team-carousel.on .person.current .person-bio { text-align: center; }
.team-carousel.on .person.far { opacity: 0; pointer-events: none; }
.team-controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 28px; }
.team-controls[hidden] { display: none; }
.team-arrow {
  width: 44px; height: 44px; border: 1px solid var(--paper-45); background: none; color: var(--paper);
  font: inherit; font-size: 18px; cursor: pointer;
}
.team-arrow:hover { border-color: var(--paper); }
.team-dots { display: flex; gap: 10px; }
.team-dots button { width: 10px; height: 10px; padding: 0; border: 1px solid var(--paper-70); border-radius: 50%; background: none; cursor: pointer; }
.team-dots button[aria-current="true"] { background: var(--paper); border-color: var(--paper); }
@media (prefers-reduced-motion: reduce) {
  .team-carousel.on .person { transition: none; }
}

/* contact: Eigenmode field (coral) behind a centred Paper card */
.contact {
  display: grid; place-items: center;
  padding: clamp(96px, 16vh, 200px) var(--gutter);
  background: var(--coral) url("assets/eigenmode-06-coral.jpg") center / cover no-repeat;
}
.contact-card {
  background: var(--paper); color: var(--ink); border: 1px solid var(--graphite);
  padding: clamp(32px, 4vw, 56px) clamp(28px, 5vw, 72px); text-align: center;
}
.contact-card .body-lg { color: var(--ink-70); margin: 0 auto; }
.mail {
  display: inline-block; margin-top: 20px;
  font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 36px); letter-spacing: -0.04em; line-height: 1;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink-45); padding-bottom: 6px;
}
.mail:hover { border-color: var(--coral); color: var(--coral-dark); }

/* ---- /work/: the projects page ---- */
/* an offer's facts: three short rows under its paragraph, the labels set like .how */
.offer-facts { margin: 16px 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; font-size: 15px; line-height: 1.4; }
.offer-facts dt { font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-70); padding-top: 3px; }
.offer-facts dd { margin: 0; color: var(--ink); }
.offer-facts code { font-family: ui-monospace, Menlo, monospace; font-size: 0.9em; letter-spacing: 0; }
.steps p a { color: inherit; }
.work .pipeline + .pipeline { margin-top: clamp(64px, 9vh, 112px); }
/* the contact band's button sits between the line and the address */
.contact-card .button { margin: 20px auto 18px; display: inline-block; }
.contact-card .mail { display: block; }

/* plans: a plan card beside the price sheet, then getting started and
   questions; denser than the story pages, one screen on a laptop */
.plans { padding-top: clamp(40px, 7vh, 72px); padding-bottom: clamp(56px, 9vh, 96px); }
.plans-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 4vw, 52px); letter-spacing: -0.03em; line-height: 1; }
.section > .plans-lede { margin: 12px auto 0; max-width: var(--max); font-size: 17px; line-height: 1.45; color: var(--ink-70); }
.plans-grid { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: var(--col-gap); margin-top: 32px; align-items: start; }
.plan-card { border: 1px solid var(--ink); padding: 24px; }
.plan-icon { width: 72px; height: auto; }
.plan-name { margin-top: 14px; font-family: var(--font-display); font-weight: 400; font-size: 28px; letter-spacing: -0.03em; line-height: 1; }
.plan-kind { margin-top: 6px; font-size: 14px; color: var(--ink-70); }
.plan-price { margin-top: 16px; font-family: var(--font-display); font-size: 36px; letter-spacing: -0.03em; line-height: 1; }
.plan-price span { font-family: var(--font-text); font-size: 16px; letter-spacing: 0; color: var(--ink-70); }
.plan-note { margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--ink-70); }
.plan-cta { display: block; margin-top: 20px; text-align: center; }
.plan-list { list-style: none; margin-top: 24px; border-top: 1px solid var(--ink-15); }
.plan-list li { padding: 9px 0; border-bottom: 1px solid var(--ink-15); font-size: 14px; line-height: 1.4; }
.plan-list code, .price-sheet code { font-family: ui-monospace, Menlo, monospace; font-size: 0.9em; }
.price-sheet { width: 100%; border-collapse: collapse; }
.price-sheet caption { text-align: left; padding-bottom: 10px; font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.price-sheet thead th { font-size: 13px; font-weight: 400; color: var(--ink-70); border-bottom: 1px solid var(--ink); }
.price-sheet tbody tr:first-child th, .price-sheet tbody tr:first-child td { border-top: 1px solid var(--ink); }
.price-sheet thead + tbody tr:first-child th, .price-sheet thead + tbody tr:first-child td { border-top: 0; }
.price-sheet th, .price-sheet td { padding: 10px 12px 10px 0; text-align: left; font-size: 15px; line-height: 1.4; border-bottom: 1px solid var(--ink-15); vertical-align: top; }
.price-sheet tbody th { font-weight: 500; white-space: nowrap; }
.price-sheet .num { text-align: right; padding-right: 0; padding-left: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-sheet.spaced { margin-top: 28px; }
.price-foot { margin-top: 10px; font-size: 14px; color: var(--ink-70); }
.price-example { margin-top: 24px; padding: 16px 20px; background: var(--cyan-light); }
.example-label { font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.price-example p + p { margin-top: 6px; font-size: 15px; line-height: 1.45; }
.plans-more { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--col-gap); margin-top: clamp(40px, 6vh, 64px); padding-top: 32px; border-top: 1px solid var(--ink-15); }
.plans-sub { font-family: var(--font-display); font-weight: 400; font-size: 24px; letter-spacing: -0.02em; }
.plans-start p, .plans-faq p { margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--ink-70); }
.install { margin-top: 14px; padding: 16px 20px; background: var(--graphite); color: var(--paper); overflow-x: auto; }
.install code { font-family: ui-monospace, Menlo, monospace; font-size: 14px; line-height: 1.6; }
.plans-faq details { border-bottom: 1px solid var(--ink-15); padding: 12px 0; }
.plans-faq details:first-of-type { margin-top: 10px; border-top: 1px solid var(--ink); }
.plans-faq summary { cursor: pointer; font-size: 15px; font-weight: 500; }
.plans-faq details p { margin-top: 8px; }
@media (max-width: 900px) {
  .plans-grid, .plans-more { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .price-sheet th, .price-sheet td { font-size: 14px; }
  .price-sheet tbody th { white-space: normal; }
}

/* footer */
.footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 40px;
  padding: 28px var(--gutter) 36px;
  border-top: 1px solid var(--paper-18);
  background: var(--graphite); color: var(--paper);
}
.footer img { height: 24px; width: auto; }
.fine { font-size: 12px; color: var(--paper-45); }
.made { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; }
.flag { display: block; flex: none; }
.fine a { color: inherit; }
.fine a:hover { color: var(--paper); }

/* privacy: one readable column under the heading */
.legal { min-height: calc(100svh - 78px); }
.legal > div { max-width: 68ch; }
.legal-date { margin: 12px 0 32px; font-size: 14px; color: var(--ink-70); }
.legal h2 { margin: 36px 0 10px; font-size: 20px; font-weight: 500; }
.legal p, .legal li { font-size: 16px; line-height: 1.6; }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 20px; list-style: disc; }
.legal li + li { margin-top: 6px; }
.legal ul + p { margin-top: 12px; }
.legal a { color: inherit; }

/* ---- meet: /meet booking page ---- */
.meet { min-height: calc(100svh - 78px); }
.meet-lede { margin-top: 20px; }
.meet-card {
  margin-top: clamp(40px, 6vh, 72px); max-width: 720px;
  border: 1px solid var(--graphite); padding: clamp(20px, 4vw, 44px);
}
.meet-step {
  font-family: var(--font-text); font-weight: 500; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-70);
  margin-bottom: 12px;
}
.meet-step + .meet-days { margin-bottom: 32px; }
.meet-tz { font-size: 14px; color: var(--ink-70); margin: -4px 0 14px; }
.meet-days, .meet-slots { display: grid; gap: 8px; }
.meet-days { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 520px; }   /* Mon-Fri: one row per week (meet.js shows whole weeks) */
.meet-slots { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.meet-days button, .meet-slots button {
  font: inherit; font-size: 15px; letter-spacing: -0.01em; color: var(--ink);
  background: transparent; border: 1px solid var(--ink-45); border-radius: 0;
  padding: 10px 6px; cursor: pointer; text-align: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.meet-days button span {
  display: block; font-weight: 500; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; margin-bottom: 2px;
}
.meet-days button:hover:not(:disabled), .meet-slots button:hover { border-color: var(--graphite); background: var(--cyan-light); }
.meet-days button[aria-selected="true"] { background: var(--graphite); border-color: var(--graphite); color: var(--paper); }
.meet-days button:disabled { opacity: 0.35; cursor: default; }
.meet-days button { white-space: nowrap; }
/* five days across a phone: tighter type so a date stays on one line */
@media (max-width: 480px) {
  .meet-days { gap: 6px; }
  .meet-days button { font-size: 13px; padding: 8px 2px; letter-spacing: -0.02em; }
  .meet-days button span { font-size: 10px; }
}
.meet-empty { font-size: 15px; color: var(--ink-70); }

.meet-form { display: flex; flex-direction: column; max-width: 480px; }
.meet-chosen { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.04em; line-height: 1.15; }
.meet-back {
  align-self: flex-start; margin: 8px 0 24px;
  font: inherit; font-size: 14px; color: var(--ink-70);
  background: none; border: 0; border-bottom: 1px solid var(--ink-45); padding: 0 0 2px; cursor: pointer;
}
.meet-back:hover { color: var(--ink); border-color: var(--coral); }
.meet-form label { font-size: 14px; font-weight: 500; margin: 14px 0 6px; }
.meet-form label span { font-weight: 300; color: var(--ink-70); }
.meet-form input, .meet-form textarea {
  font: inherit; font-size: 16px; letter-spacing: -0.01em; color: var(--ink);
  padding: 12px 14px; border: 1px solid var(--ink-45); border-radius: 0; background: transparent;
}
.meet-form input:focus-visible, .meet-form textarea:focus-visible { outline-offset: -2px; }
.meet-form textarea { resize: vertical; }
.meet-form .button { margin-top: 28px; cursor: pointer; align-self: flex-start; }
.meet-form .button:disabled { opacity: 0.6; cursor: default; }
.meet-msg { margin-top: 14px; font-size: 14px; color: var(--ink-70); }
.meet-msg:empty { display: none; }
.meet-done .h3 { margin-bottom: 12px; }
.meet-done-time { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.04em; line-height: 1.15; }
.meet-done-note { margin: 10px 0 28px; color: var(--ink-70); }
[hidden] { display: none !important; }

/* ---- responsive ---- */
@media (max-width: 820px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .span-2 { grid-column: span 1; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .pain-how .principles { grid-template-columns: minmax(0, 1fr); }
  .waitlist input[type="email"] { border-right: 1px solid var(--ink-45); flex-basis: 100%; }
  .waitlist .button { flex: 1 1 100%; margin-top: 10px; }
  .h2 { max-width: none; }
  .lead-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lead-row > .study { margin-top: clamp(40px, 6vh, 72px); }
  .hero { min-height: auto; padding-top: 64px; padding-bottom: 48px; }   /* room under the strokes band */
  .topnav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; margin: 0; padding: 4px var(--gutter) 16px;
    background: var(--graphite); border-top: 1px solid var(--paper-45);
  }
  .topbar.open .topnav { display: flex; }
  .topnav a { display: block; padding: 15px 0; font-size: 13px; border-bottom: 1px solid var(--paper-45); color: var(--paper); }
  .topnav a:hover, .topnav a[aria-current] { border-color: var(--paper-45); color: var(--coral); }
  .nav-toggle {
    display: inline-block; margin-left: auto; padding: 0; background: none; border: 0; cursor: pointer;
    font: inherit; font-weight: 500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper);
  }
}
/* phones: "Computing Built" no longer fits on one line, so let the headline
   flow as one run of text ("Computing / Built for / Discovery.") instead of
   breaking "Built" onto a line of its own */
@media (max-width: 480px) {
  .display .line { display: inline; }
  .topbar { padding: 16px 20px; }
  .brand img { height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}