/* ==========================================================================
   Labprint — styles
   ========================================================================== */

:root {
  --ink: #0F1C2B;          /* logo navy */
  --ink-soft: #4A5563;
  --orange: #FF4B2B;       /* logo dot */
  --orange-dark: #E23A1C;
  --cream: #F3E9DC;
  --cream-deep: #EADCC9;
  --paper: #FFFFFF;
  --paper-warm: #F9F4EE;   /* FAQ background, as on tableiq.io */
  --paper-stone: #F1EDE9;  /* "What it does" background, as on tableiq.io */
  --rule: #E2DDD5;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;          /* hero headline */
  --sans-hero: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;   /* rest of the hero */
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;  /* everything else, as on tableiq.io */

  --nav-h: 80px;
  --gutter: clamp(16px, 4vw, 48px);
  --hero-split: 76%;                         /* vertical grid line */
  --hero-row: clamp(120px, 20vh, 190px);     /* height of the bottom row */
  --hero-line: 2px;                          /* thickness of the hero grid lines */
  --curve: 64px;                             /* rounded top corners of the sections, as on tableiq.io */

  /* Type sizes for the blog list and the get-started section, matching tableiq.io
     (its home page get-started section, /blog and /schedule). Desktop sizes at 1440px,
     phone sizes at 375px; the clamps scale between the two. */
  --fs-display: clamp(40px, 4.72vw, 68px);  /* get-started headline        (68 / 40) */
  --fs-h1: clamp(36px, 3.9vw, 56px);        /* "Our Stories and Thoughts"  (56 / 36) */
  --fs-h3: clamp(24px, 2.1vw, 30px);        /* form, time and done titles  (30 / 24) */
  --fs-lead: 18px;                          /* line under the headline     (18 / 17) */
  --fs-title: 18px;                         /* blog post titles */
  --fs-input: 16px;                         /* text fields, Continue button */
  --fs-button: 15px;                        /* Get started button, card titles */
  --fs-body: 14px;                          /* excerpts, form intro, question, labels */
  --fs-detail: 13px;                        /* card details */
  --fs-note: 12px;                          /* bottom note, "Get started" label */
  --fs-meta: 11px;                          /* "4 min read" */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }

/* Same container as tableiq.io: up to 1232px of content with 24px side padding
   (104px margins on a 1440px screen). The hero doesn't use it and keeps its own layout. */
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

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

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: 999px;
  font-size: 15px; font-weight: 600; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn--outline { border-color: var(--ink); background: transparent; }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--primary { background: var(--orange); color: #fff; }
.btn--primary:hover { background: var(--orange-dark); }
.btn--ghost { background: transparent; padding-left: 0; padding-right: 0; color: var(--ink-soft); }
.btn--ghost:hover { color: var(--ink); }
.btn svg { transition: transform .2s; }
.btn:hover svg { transform: translateX(3px); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.nav__logo {
  height: 100%;
  display: flex; align-items: center;
  padding: 0 32px 0 var(--gutter);
  border-right: 1px solid var(--rule);
}
.nav__logo img { height: 34px; width: auto; }
.nav__links { display: flex; gap: 36px; padding: 0 36px; flex: 1; }
.nav__links a {
  text-decoration: none; font-size: 14px; font-weight: 500; color: var(--ink);
  position: relative;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.nav__links a:hover::after { transform: scaleX(1); }
.nav__cta { margin-right: var(--gutter); }
.nav__mobile-only { display: none; }   /* "Get started" in the phone menu; laptops have the button */
.nav__toggle { display: none; }

/* ---------- Hero ---------- */
.hero {
  font-family: var(--sans-hero);   /* the hero keeps its original fonts */
  position: relative;
  height: calc(100vh - var(--nav-h));
  height: calc(100svh - var(--nav-h));
  min-height: 560px;
  overflow: hidden;
  color: #fff;
  /* Fallback when the video is missing or still loading */
  background:
    radial-gradient(ellipse at 30% 70%, #3c4a2e 0%, transparent 60%),
    radial-gradient(ellipse at 75% 30%, #24331f 0%, transparent 55%),
    #141c1a;
}
/* The video and its shade reach 1px past every edge (the hero crops them), so the dark
   fallback background can never show as a hairline along an edge. */
.hero__video {
  position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px);
  object-fit: cover;
}
/* Where autoplay is blocked (iPhones in Low Power Mode), Safari puts a big play icon over the
   video. Hide it: the first frame shows instead, and js/main.js starts the video on the first tap. */
.hero__video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.hero__video::-webkit-media-controls { display: none !important; }
.hero__shade {
  position: absolute; inset: -1px;
  background:
    linear-gradient(180deg, rgba(10,16,24,.62) 0%, rgba(10,16,24,.25) 45%, rgba(10,16,24,.45) 100%);
}

/* No stacking layer of its own, so the orange scroll line can draw over the white
   vertical line (z-index 1, the line comes later) and under the dot (z-index 2). */
.hero__grid { position: absolute; inset: 0; pointer-events: none; }
.hero__vline, .hero__hline { position: absolute; z-index: 1; background: #fff; }
.hero__vline { top: 0; bottom: 0; left: var(--hero-split); width: var(--hero-line); }
.hero__hline { left: 0; right: 0; bottom: var(--hero-row); height: var(--hero-line); }
/* Below the dot the white line is three times as wide, so the orange scroll line runs down its
   middle with a white margin on each side. */
.hero__vline::after {
  content: ""; position: absolute; left: calc(var(--hero-line) * -1); bottom: 0;
  width: calc(var(--hero-line) * 3); height: var(--hero-row);
  background: #fff;
}
/* The orange dot, and behind it a white ring as wide as the lines. The ring is its own layer
   under the orange scroll line, so the line runs straight out of the dot with no white gap. */
.hero__dot, .hero__ring {
  position: absolute; z-index: 2;
  left: var(--hero-split);
  bottom: var(--hero-row);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--orange);
  /* centre on the middle of both lines */
  transform: translate(-50%, 50%) translate(calc(var(--hero-line) / 2), calc(var(--hero-line) / -2));
}
.hero__ring {
  z-index: 1;
  width: calc(14px + var(--hero-line) * 2); height: calc(14px + var(--hero-line) * 2);
  background: #fff;
}

.hero__headline {
  position: absolute;
  top: clamp(32px, 7vh, 72px);
  left: var(--gutter);
  width: calc(var(--hero-split) - var(--gutter) * 2);
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 4.6vw, 76px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 24px rgba(0,0,0,.25);
}
.hero__line { display: block; }
.hero__typed-wrap { color: var(--orange); }   /* min-height set by JS from the longest phrase */
.hero__typed-wrap.is-one-line { white-space: nowrap; }   /* JS sizes the headline so this fits */
/* The cursor takes up no room in the text: no width, so it never moves a word to the next line,
   and no height, so the line it is on is never taller than the others (on phones, the first line
   of a two-line phrase used to shift up when the cursor moved down to the second). The bar is
   drawn by ::before, from just below the baseline up. */
.hero__cursor {
  position: relative;
  display: inline-block;
  width: .08em; height: 0;
  margin-left: .06em; margin-right: -.14em;
  animation: blink 1s steps(1) infinite;
}
.hero__cursor::before {
  content: ""; position: absolute; left: 0; bottom: -.08em;
  width: 100%; height: .9em;
  background: var(--orange);
}
.hero__typed.is-fading { transition: opacity .45s; opacity: 0; }
.hero__word { white-space: nowrap; }        /* the word being typed, with the cursor in it */
.hero__untyped { visibility: hidden; }      /* letters not typed yet: laid out, but not shown */
@keyframes blink { 50% { opacity: 0; } }

.hero__tile {
  position: absolute;
  left: var(--hero-split); right: 0; bottom: 0;
  height: var(--hero-row);
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: var(--cream);
  color: var(--ink);
  text-decoration: none;
  font-size: clamp(20px, 1.8vw, 28px);
  transition: background .25s;
}
.hero__tile svg { transition: transform .25s; }
.hero__tile:hover { background: var(--cream-deep); }
.hero__tile:hover svg { transform: translateX(5px); }

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 10vw, 128px) 0 clamp(64px, 10vw, 112px); }   /* as on tableiq.io */
/* Curved section edges, as on tableiq.io: from "How it works" down, each section starts with
   rounded top corners laid over the bottom of the section above, so the corners show that
   section's color. The section above gets the overlap added to its bottom spacing. The hero
   and "What it does" meet in a straight line. */
.section--curved { position: relative; margin-top: calc(var(--curve) * -1); border-radius: var(--curve) var(--curve) 0 0; }
.section--above-curve { padding-bottom: calc(clamp(64px, 10vw, 112px) + var(--curve)); }
.blog { background: var(--paper); }
.section--cream { background: var(--cream); }
.section__title {
  margin: 0 0 40px;
  font-family: var(--sans);
  font-weight: 800;
  font-size: var(--fs-h1);
  letter-spacing: -0.03em;
  line-height: 1;
}
/* Small label above a section title, with an orange dot: "Blog", "FAQ", "Get started" */
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 16px;
  font-size: var(--fs-note); font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.35;
}
.eyebrow__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }

/* ---------- Blog list (one post per row) ---------- */
.post-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.post-list > li { border-bottom: 1px solid var(--rule); }
.post-row {
  display: grid;
  grid-template-columns: 56px 168px 1fr 24px 40px;   /* last two: line dot, arrow */
  gap: 28px;
  align-items: center;
  padding: 18px 16px;
  text-decoration: none;
  transition: background .2s;
}
.post-row:hover { background: var(--cream); }
.post-row__num { font-family: var(--sans); font-weight: 500; font-size: var(--fs-title); color: var(--ink-soft); align-self: start; padding-top: 2px; }
.post-row__media {
  aspect-ratio: 16 / 10; border-radius: 4px; overflow: hidden;
  background: var(--cream);
}
.post-row__media img { width: 100%; height: 100%; object-fit: cover; }
/* Rows without a cover image drop the thumbnail column. */
.post-row--text { grid-template-columns: 56px 1fr 24px 40px; }
.post-row__meta, .article__meta {
  margin: 0 0 6px;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft);
}
.post-row__meta { font-size: var(--fs-meta); letter-spacing: .13em; }
.post-row__title {
  margin: 0 0 6px;
  font-family: var(--sans); font-weight: 700;
  font-size: var(--fs-title); line-height: 1.375; letter-spacing: 0;
}
.post-row__excerpt {
  margin: 0; color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post-row__arrow { justify-self: end; transition: transform .25s; }
.post-row:hover .post-row__arrow { transform: translateX(6px); }

/* Compact rows used under articles */
.post-list--compact .post-row { grid-template-columns: 56px 1fr 40px; padding: 20px 16px; }
.post-list--compact .post-row__node { display: none; }

/* ---------- Scroll line ---------- */
main { position: relative; }
.scroll-line {
  position: absolute; top: 0; left: 0; z-index: 1;
  pointer-events: none; overflow: visible;
}
.scroll-line path {
  fill: none;
  stroke: var(--orange);
  stroke-width: var(--hero-line);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Every dot on the line grows out from its centre when the line reaches it, and shrinks away
   if you scroll back up. */
.post-row__node, .line-node {
  position: relative; z-index: 2;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--orange);
  transform: scale(0);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.post-row__node { justify-self: center; }
.post-row__node.is-lit, .line-node.is-lit { transform: scale(1); }
.line-node--end, .line-node--gate { position: absolute; transform: translate(-50%, -50%) scale(0); }
.line-node--end.is-lit, .line-node--gate.is-lit { transform: translate(-50%, -50%) scale(1); }

/* Keep the request card's text clear of the line on desktop. */
@media (min-width: 769px) {
  .has-scroll-line .rc { max-width: calc(100% - 200px); }   /* clear of the orange line on the right */
  .has-scroll-line .what__lede { max-width: min(672px, calc(100% - 240px)); }   /* room for the flask beside it */
  .has-scroll-line .how__title { max-width: min(672px, calc(100% - 200px)); }   /* clear of the dot beside it */
}

.post-list--compact .post-row__media,
.post-list--compact .post-row__excerpt { display: none; }

/* ---------- What it does (layout and behaviour follow tableiq.io) ---------- */
.what { background: var(--paper-stone); }
.what__title { margin-bottom: 20px; }
.what__lede { margin: 0 0 48px; max-width: 672px; font-size: 17px; line-height: 1.55; color: var(--ink-soft); }
.what__grid { display: grid; grid-template-columns: 1.75fr 1fr; gap: 48px; align-items: start; }

/* The big card. It sits above the orange scroll line, so the line can pass behind it. */
.what__media { position: relative; z-index: 2; }
.what__card {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden;
  border: 1px solid #E7E2DB; border-radius: 28px; background: var(--paper-warm);
}
.what__slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .4s ease, visibility 0s linear .4s;
}
.what__slide.is-on { opacity: 1; visibility: visible; transition: opacity .4s ease, visibility 0s; }
.what__slide video, .what__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.what__placeholder {
  position: absolute; inset: 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 24px; text-align: center;
  border: 1.5px dashed #D8D0C4; border-radius: 20px;
}
.what__ph-label { font-size: var(--fs-note); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-soft); }
.what__ph-title { max-width: 18em; font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.what__ph-count { font-size: var(--fs-body); color: var(--ink-soft); }

/* The list: the open use case shows its text and an orange bar that fills, then the next opens */
.what__list { list-style: none; margin: 0; padding: 0; }
.what__item { padding-bottom: 10px; }
.what__item + .what__item { border-top: 1px solid var(--rule); }
.what__q { margin: 0; font: inherit; }
.what__btn {
  width: 100%; padding: 16px 0 6px;
  border: 0; background: none; cursor: pointer; text-align: left;
  font-size: 17px; font-weight: 700; line-height: 1.375; letter-spacing: -0.01em;
  color: var(--ink-soft); transition: color .15s;
}
.what__btn:hover, .what__item.is-open .what__btn { color: var(--ink); }
.what__panel {
  display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  transition: grid-template-rows .3s ease, opacity .25s ease, visibility 0s linear .3s;
}
.what__item.is-open .what__panel {
  grid-template-rows: 1fr; opacity: 1; visibility: visible;
  transition: grid-template-rows .3s ease, opacity .3s ease .05s, visibility 0s;
}
.what__panel-inner { overflow: hidden; }
.what__body { padding-bottom: 6px; }
.what__text { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--ink-soft); }
/* The bar and its fill are borders, not filled boxes: browsers round a border's thickness to
   whole screen pixels, so every bar looks equally thick wherever it falls on the page (a 2px
   box can come out 2 or 3 pixels thick on screens scaled to 125%). Same weight as the hero lines.
   The bar runs 80% of the column's width. */
.what__bar { position: relative; display: block; width: 80%; height: 0; margin-top: 12px; border-top: var(--hero-line) solid #F5F5F4; }   /* track color from tableiq.io */
.what__bar-fill {
  position: absolute; left: 0; right: 0; bottom: 100%;   /* exactly over the track */
  border-top: var(--hero-line) solid var(--orange);
  transform: scaleX(0); transform-origin: left;
}
.what__item.is-open .what__bar-fill { animation: what-fill var(--what-duration, 9s) linear forwards; }
.what.is-paused .what__bar-fill { animation-play-state: paused; }
@keyframes what-fill { to { transform: scaleX(1); } }

/* ---------- How it works (layout, sizes and progress line follow tableiq.io) ---------- */
.how { background: var(--paper-warm); }
.how__title { max-width: 672px; margin-bottom: 64px; }
.how__steps { position: relative; }
.how__list { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; }
.how__icon {
  position: relative; z-index: 1;   /* over the progress line */
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid #E7E2DB; border-radius: 14px; background: #fff; color: var(--ink);
  box-shadow: 0 1px 2px rgba(14, 15, 12, .04), 0 1px 1px rgba(14, 15, 12, .03);
}
.how__num { display: block; margin-top: 30px; font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: -0.02em; color: var(--orange-dark); }
.how__step-title { margin: 12px 0 0; font-size: 21px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }
.how__text { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.how__note { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 104px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink); text-align: center; }
.how__note svg { flex: none; color: var(--orange); }
/* The progress line runs from the middle of the first icon, behind the icons, and fills as you
   scroll (js/how-it-works.js sets --p from 0 to 1). Drawn as borders so it is equally thick everywhere. */
.how__track { position: absolute; top: 22px; left: 22px; right: 16.6%; height: 0; border-top: var(--hero-line) solid #E7E2DB; }
.how__fill {
  position: absolute; left: 0; right: 0; bottom: 100%;
  border-top: var(--hero-line) solid var(--orange);
  transform: scaleX(var(--p, 0)); transform-origin: left;
}
.how__head {
  position: absolute; top: calc(var(--hero-line) / -2); left: calc(var(--p, 0) * 100%);
  width: 7px; height: 7px; border-radius: 50%; background: var(--orange);
  transform: translate(-50%, -50%);
  opacity: min(1, calc(var(--p, 0) * 40));   /* hidden until it starts to move */
}

/* ---------- FAQ (layout and behaviour follow tableiq.io) ---------- */
.faq { background: var(--paper-warm); }
/* The photo column stretches to the height of the question list, like tableiq.io: when an
   answer slides open the list grows and the photo grows with it, in the same motion. */
.faq__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: stretch; }
.faq__title { margin-bottom: 42px; }   /* first question starts 42px below the heading, as on tableiq.io */
.faq__item + .faq__item { border-top: 1px solid var(--rule); }
.faq__q { margin: 0; font: inherit; }
.faq__btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px;
  border: 0; background: none; cursor: pointer; text-align: left;
  font-size: var(--fs-title); font-weight: 500; line-height: 1.35; letter-spacing: -0.02em; color: var(--ink);
}
.faq__item.is-open .faq__q-text { font-weight: 700; }
.faq__icon {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: #f1ece5; color: var(--ink);
  transition: transform .3s ease, background .2s, color .2s;
}
.faq__item.is-open .faq__icon { transform: rotate(45deg); background: rgba(255,75,43,.14); color: var(--orange-dark); }
.faq__btn:hover .faq__icon { background: #e9e2d8; }
.faq__item.is-open .faq__btn:hover .faq__icon { background: rgba(255,75,43,.2); }

/* Answers slide open and fade in; closed answers are hidden from keyboard and screen readers */
.faq__panel {
  display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  transition: grid-template-rows .3s ease, opacity .25s ease, visibility 0s linear .3s;
}
.faq__item.is-open .faq__panel {
  grid-template-rows: 1fr; opacity: 1; visibility: visible;
  transition: grid-template-rows .3s ease, opacity .3s ease .05s, visibility 0s;
}
.faq__panel-inner { overflow: hidden; }
.faq__panel-inner p {
  margin: 0; padding: 0 24px 24px;
  font-size: var(--fs-button); line-height: 1.6; color: var(--ink-soft);
}
.faq__panel-inner a { color: var(--orange-dark); }

/* Sits above the orange scroll line, so the line passes behind the photo */
.faq__media { position: relative; z-index: 2; display: flex; }
.faq__frame {
  position: relative; width: 100%; min-height: 436px;
  padding: 8px; border-radius: 28px; background: #fff;
  box-shadow: 0 24px 60px -20px rgba(14,15,12,.22), 0 4px 12px rgba(14,15,12,.06);
}
/* Laid over the frame so the photo never sets the height itself; it always fills the frame. */
.faq__frame img {
  position: absolute; inset: 8px; display: block;
  width: calc(100% - 16px); height: calc(100% - 16px);
  object-fit: cover; border-radius: 20px;
  object-position: 100% 50%;   /* keep the right edge, where the scientist's face is */
}

/* ---------- Request card: the call to action, and the form on its own page ---------- */
/* The get-started page: the form close under the nav (a little closer on short screens), and at
   least a screen tall. The form uses the full width, so on laptops the six cards fit in two rows
   and the whole form, "Continue" included, fits on one screen. */
.get-started {
  padding-top: clamp(40px, min(4.5vw, 7.2vh), 64px);
  min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h));
}
.get-started .rc { max-width: none; }
.rc { max-width: 920px; }
.rc__step[hidden] { display: none; }
.rc__step { animation: rc-in .35s ease-out; }
.rc__step:first-child { animation: none; }   /* only animate when switching steps, not on page load */
@keyframes rc-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* The call to action (home page, and call-for-input blog posts) */
.rc__title {
  margin: 0 0 20px;
  font-family: var(--sans); font-weight: 800;
  font-size: var(--fs-display); line-height: 0.98; letter-spacing: -0.035em;
  text-wrap: balance;   /* even line lengths instead of a lone last word */
}
.rc__lede { margin: 0 0 32px; max-width: 512px; font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-soft); }
/* Dark rounded-square button with a soft blue glow, as on tableiq.io.
   Used for "Get started" here and in the nav (.btn--glow). */
.rc__cta-btn, .btn--glow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px; border: 0; border-radius: 14px; text-decoration: none;
  background: var(--ink); color: #fff;
  font-size: var(--fs-button); font-weight: 600; cursor: pointer;
  box-shadow: 0 0 20px 6px rgba(59,130,246,.3);   /* soft blue glow, as on tableiq.io */
  transition: transform .15s, box-shadow .2s, background .2s;
}
.rc__cta-btn:hover, .btn--glow:hover { background: #1b2b3f; color: #fff; box-shadow: 0 0 24px 8px rgba(59,130,246,.38); transform: translateY(-1px); }
.rc__cta-btn:active, .btn--glow:active { transform: none; }
.rc__cta-btn:disabled { opacity: .6; cursor: default; transform: none; }
.rc__cta-btn svg { transition: transform .2s; }
.rc__cta-btn:hover svg { transform: translateX(3px); }

/* The form */
.rc__form-title, .rc__time-title {
  margin: 0 0 10px;
  font-family: var(--sans); font-weight: 700;
  font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.025em;
}
.rc__form-lede { margin: 0 0 30px; color: var(--ink-soft); font-size: var(--fs-body); }
.rc__tasks { border: 0; margin: 0; padding: 0; min-width: 0; }
.rc__q { padding: 0; margin: 0 0 12px; font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.rc__task-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 1140px) {
  .rc__task-grid { grid-template-columns: repeat(3, 1fr); }   /* three across, two rows */
}
.rc-task {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 48px 16px 18px;
  text-align: left; cursor: pointer;
  background: #fff; border: 1px solid rgba(15,28,43,.12); border-radius: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.rc-task:hover { border-color: rgba(15,28,43,.35); }
.rc-task[aria-checked="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.rc-task__title { font-size: var(--fs-button); font-weight: 600; color: var(--ink); }
.rc-task__detail { font-size: var(--fs-detail); line-height: 1.6; color: var(--ink-soft); }
.rc-task__box {
  position: absolute; top: 16px; right: 16px;
  width: 20px; height: 20px; border-radius: 6px;
  border: 1.5px solid rgba(15,28,43,.25); background: #fff;
  transition: background .15s, border-color .15s;
}
.rc-task[aria-checked="true"] .rc-task__box {
  background: var(--orange); border-color: var(--orange);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.rc__fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.rc__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rc__field label { font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.rc__field input {
  width: 100%; padding: 13px 16px;
  font-size: var(--fs-input); color: var(--ink);
  background: #fff; border: 1px solid rgba(15,28,43,.12); border-radius: 14px;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.rc__field input::placeholder { color: rgba(15,28,43,.4); }
.rc__field input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(255,75,43,.18); }
.rc .is-invalid { border-color: var(--orange-dark) !important; }

.rc__error { margin: 18px 0 0; color: var(--orange-dark); font-size: var(--fs-body); }
.rc__error:empty { display: none; }

.rc__bar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 32px; padding-top: 22px;
  border-top: 1px solid rgba(15,28,43,.1);
}
.rc__bar-note { font-size: var(--fs-note); color: var(--ink-soft); }
.rc__bar .rc__cta-btn { padding: 13px 26px; font-size: var(--fs-input); }
/* On laptops and desktops, if the window is too short for the whole form, the bar with "Continue"
   stays at the bottom of the window until you scroll down to it, so it is always on screen. */
@media (min-width: 769px) {
  .get-started .rc__bar { position: sticky; bottom: 0; z-index: 1; padding-bottom: 20px; background: var(--cream); }
  /* While it is pinned, the form fades out just above it. In place, the fade lies over empty space. */
  .get-started .rc__bar::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% + 1px); height: 28px;
    background: linear-gradient(rgba(243, 233, 220, 0), var(--cream));
    pointer-events: none;
  }
}

/* Pick a time */
.rc__time .rc__bar { justify-content: flex-end; }   /* just "Done", on the right */
.rc__cal-frame {
  display: block; width: 100%; height: 700px;
  border: 1px solid rgba(15,28,43,.12); border-radius: 14px; background: #fff;
}
.rc-cal { position: relative; border-radius: 14px; overflow: hidden; border: 1px dashed rgba(15,28,43,.3); background: #fff; }
.rc-cal__mock { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; padding: 28px; opacity: .35; filter: grayscale(1); }
.rc-cal__head { margin-bottom: 14px; font-weight: 600; }
.rc-cal__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; font-size: var(--fs-detail); }
.rc-cal__dow { font-size: var(--fs-meta); font-weight: 600; color: var(--ink-soft); padding-bottom: 4px; }
.rc-cal__day { padding: 8px 0; border-radius: 8px; color: var(--ink-soft); }
.rc-cal__day.is-open { background: var(--cream); color: var(--ink); font-weight: 600; }
.rc-cal__times { display: flex; flex-direction: column; gap: 10px; padding-top: 38px; }
.rc-cal__time { padding: 11px; border: 1px solid rgba(15,28,43,.25); border-radius: 10px; text-align: center; font-size: var(--fs-detail); font-weight: 600; }
.rc-cal__note {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 24px; text-align: center;
  background: rgba(255,255,255,.8);
}
.rc-cal__note strong { font-family: var(--sans); font-weight: 700; font-size: var(--fs-title); }
.rc-cal__note span { max-width: 30em; font-size: var(--fs-detail); color: var(--ink-soft); }

/* Thanks */
.rc__done { display: flex; gap: 18px; align-items: flex-start; }
.rc__done-dot { flex: none; width: 14px; height: 14px; margin-top: .9em; border-radius: 50%; background: var(--orange); }
.rc__done h3 { margin: 0 0 8px; font-family: var(--sans); font-weight: 700; font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.025em; }
.rc__done p { margin: 0; color: var(--ink-soft); font-size: var(--fs-body); }
.rc__demo { margin-top: 12px !important; font-size: var(--fs-note) !important; color: var(--orange-dark) !important; }
.rc__done:focus { outline: none; }

/* honeypot */
.rc__hp { position: absolute; left: -9999px; }

/* ---------- Article ---------- */
.article { padding: 40px 0 clamp(64px, 8vw, 112px); }
.article__back { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; text-decoration: none; color: var(--ink-soft); }
.article__back:hover { color: var(--ink); }
.article__head { max-width: 672px; margin: 56px auto 40px; }
.article__title {
  margin: 0 0 20px;
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(32px, 3.2vw, 46px); line-height: 1.05; letter-spacing: -0.03em;
}
.article__byline { margin: 0; color: var(--ink-soft); font-size: 14px; }
.article__cover {
  max-width: 1040px; margin: 0 auto 56px;
  aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--cream);
}
.article__cover img { width: 100%; height: 100%; object-fit: cover; }
.prose { max-width: 672px; margin: 0 auto; font-size: 19px; font-weight: 300; line-height: 1.55; }
.prose strong { font-weight: 700; }
.prose h2 { font-family: var(--sans); font-weight: 800; font-size: 26px; line-height: 1.5; margin: 44px 0 10px; letter-spacing: -0.01em; }
.prose h3 { font-family: var(--sans); font-weight: 700; font-size: 16px; line-height: 1.5; margin: 32px 0 8px; }
.prose li { font-size: 16px; line-height: 1.6; }
.prose p { margin: 0 0 22px; }
.prose a { color: var(--orange-dark); }
.prose blockquote {
  margin: 36px 0; padding: 4px 0 4px 24px;
  border-left: 3px solid var(--orange);
  font-family: var(--sans); font-weight: 700; font-size: 22px; line-height: 1.45;
}
.prose figure { margin: 36px 0; }
.prose figure img { width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 4px; }
.prose figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-soft); }

/* Citation numbers and the sources list at the end of a post */
.prose sup.cite { font-size: .68em; line-height: 0; margin-left: 1px; }
.prose sup.cite a { color: var(--orange-dark); text-decoration: none; font-weight: 600; padding: 0 1px; }
.prose sup.cite a:hover { text-decoration: underline; }
.prose .sources {
  margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--rule);
  font-size: 15px; line-height: 1.6; color: var(--ink-soft);
}
.prose .sources h2 {
  margin: 0 0 14px; font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
.prose .sources ol { padding-left: 1.4em; margin: 0; }
.prose .sources li { font-size: 15px; margin-bottom: 8px; padding: 2px 6px; margin-left: -6px; border-radius: 4px; }
.prose .sources li:target { background: var(--cream); }
.prose .sources a { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 22px; }

.article__cta-card { max-width: 1040px; margin: 72px auto 0; padding: clamp(32px, 5vw, 64px); background: var(--cream); border-radius: 6px; }
.article__waitlist {
  max-width: 672px; margin: 56px auto 0; padding-top: 32px; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  font-family: var(--sans); font-weight: 700; font-size: 20px;
}
.article__waitlist .btn { font-family: var(--sans); }
.article__more { max-width: 1040px; margin: 80px auto 0; }
.article__more h2 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 24px; }

/* ---------- Footer (layout, sizes and faint lines follow tableiq.io) ---------- */
/* Same background as the get-started section above it, with a faint line between them. */
.footer { background: var(--cream); border-top: 1px solid rgba(15, 28, 43, .08); padding: 64px 0 40px; }
.footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.footer__brand img { display: block; height: 26px; width: auto; }
.footer__tagline { margin: 16px 0 0; max-width: 320px; font-size: 14px; line-height: 1.625; color: var(--ink-soft); }
.footer__links { display: flex; gap: 32px; }
.footer__links a { text-decoration: none; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.footer__links a:hover { color: var(--ink); }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px;
  margin-top: 56px; padding-top: 32px; border-top: 1px solid rgba(15, 28, 43, .08);
}
.footer__copy, .footer__email { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
.footer__email { text-decoration: none; }
.footer__email:hover { color: var(--ink); }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .post-row { grid-template-columns: 32px 140px 1fr 24px 28px; gap: 20px; }
  .post-row--text { grid-template-columns: 32px 1fr 24px 28px; }
}

@media (max-width: 768px) {
  :root { --nav-h: 64px; --hero-split: 100%; --hero-row: 88px; --curve: 32px; }

  .nav__logo { border-right: 0; padding-right: 0; flex: 1; }
  .nav__logo img { height: 28px; }
  .nav__cta { display: none; }
  .nav__toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 44px; height: 44px; margin-right: calc(var(--gutter) - 10px);
    background: none; border: 0; cursor: pointer; padding: 10px;
  }
  .nav__toggle span { display: block; height: 1.5px; background: var(--ink); transition: transform .25s; }
  .nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .nav__links {
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; gap: 0; padding: 8px var(--gutter) 20px;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links .nav__mobile-only { display: block; }
  .nav__links a { padding: 14px 0; font-size: 18px; border-bottom: 1px solid var(--rule); }
  .nav__links a::after { display: none; }

  .hero { min-height: 520px; }
  .hero__vline { display: none; }
  .hero__dot, .hero__ring { left: 50%; }
  .hero__headline { width: calc(100% - var(--gutter) * 2); }
  .hero__tile { left: 0; }

  .post-row { grid-template-columns: 84px 1fr 20px; gap: 14px; padding: 16px 4px; }
  .post-row__num, .post-row__node { display: none; }
  .post-row__media { aspect-ratio: 1 / 1; align-self: start; }
  .post-row--text { grid-template-columns: 1fr 20px; }
  :root { --fs-lead: 17px; }   /* TableIQ's phone size for the line under the headline */
  .post-list--compact .post-row { grid-template-columns: 1fr 28px; }

  .what__lede { margin-bottom: 32px; }
  /* How it works: steps stacked, icon on the left; the progress line runs down beside the icons */
  .how__title { margin-bottom: 48px; }
  .how__list { grid-template-columns: 1fr; gap: 40px; }
  .how__step { display: grid; grid-template-columns: 44px 1fr; column-gap: 20px; }
  .how__icon { grid-row: 1 / span 3; }
  .how__num { margin-top: 0; }
  .how__step-title { font-size: 22px; margin-top: 8px; }
  .how__track { top: 22px; bottom: 0; left: 22px; right: auto; height: auto; border-top: 0; border-left: var(--hero-line) solid #E7E2DB; }
  .how__fill { top: 0; bottom: 0; left: auto; right: 100%; border-top: 0; border-left: var(--hero-line) solid var(--orange); transform: scaleY(var(--p, 0)); transform-origin: top; }
  .how__head { top: calc(var(--p, 0) * 100%); left: calc(var(--hero-line) / -2); }
  .how__note { margin-top: 56px; align-items: flex-start; text-align: left; justify-content: flex-start; }
  .how__note svg { margin-top: 4px; }
  .what__grid { grid-template-columns: 1fr; gap: 32px; }
  .what__placeholder { inset: 12px; padding: 16px; }
  .faq__grid { grid-template-columns: 1fr; gap: 32px; }
  .faq__btn { padding: 20px; font-size: var(--fs-input); }
  .faq__panel-inner p { padding: 0 20px 20px; }
  .faq__frame { min-height: 0; }
  .faq__frame img { position: static; width: 100%; height: auto; aspect-ratio: 4 / 5; }
  .rc__fields, .rc__task-grid { grid-template-columns: 1fr; }
  .rc-cal__mock { grid-template-columns: 1fr; }
  .rc-cal__times { display: none; }
  .rc__cal-frame { height: 640px; }
  .rc__cta-btn { width: 100%; justify-content: center; }
  .rc__bar { flex-direction: column-reverse; align-items: stretch; text-align: center; }
  .footer__top { flex-direction: column; gap: 28px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .post-row__node, .line-node { transition: none; }
  .what__item.is-open .what__bar-fill { animation: none; transform: none; }   /* no auto-advance; the bar just marks the open one */
  .hero__cursor { animation: none; }
  .rc__step { animation: none; }
}