/* The homepage, in the product's white-and-green system (the same tokens as
   extension/review-ui/design-tokens.ts). The guides, comparisons, hubs, 404 and legal
   pages load it too, with /assets/content.css after it, so every public page wears the
   same field, sheet, nav and footer: a change to the chrome here reaches all of them. */
@font-face {
  font-family: "Warmada Instrument Sans";
  src: url("/assets/fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* The shared palette is NOT here: /assets/tokens.css is generated from
     extension/review-ui/design-tokens.ts by lander/build.ts and loaded after
     this file. What remains below are shades the landing page alone uses, which
     exist in no token module and so cannot drift from one. */
  --canvas: #fcfcfc;
  --subtle: #9ba8a7;
  /* The letter's colours (--field, --sheet, --letter, --stamp, --stamp-ink, --heading) are
     not here either: they are LETTER in the token module, generated into tokens.css, and
     shared with the dashboard's signed-out entry. */
  /* The stamp perforation on the sheet's top and bottom edges: hole radius and pitch. */
  --perf: 9px;
  --perf-gap: 24px;
  --sage: #85c093;
  --sage-soft: #c8e3ce;
  --ember: #ea5a13;
  --sans: "Warmada Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
  --shadow-card:
    0 4px 4px -2px rgba(0, 0, 0, 0.02), 0 2px 2px -1px rgba(0, 0, 0, 0.04), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06),
    0 0 0 0.5px rgba(0, 0, 0, 0.1);
  --shadow-float:
    0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 4px 4px 0 rgba(10, 54, 46, 0.04), 0 10px 6px 0 rgba(10, 54, 46, 0.03),
    0 18px 7px 0 rgba(10, 54, 46, 0.01);
  --shadow-popup:
    0 4px 4px -4px rgba(0, 0, 0, 0.14), 0 1px 1px -0.5px rgba(0, 0, 0, 0.08),
    0 0 0 0.5px rgba(0, 0, 0, 0.16), 0 12px 24px -6px rgba(0, 0, 0, 0.08), 0 8px 16px -4px rgba(0, 0, 0, 0.1);
  --shadow-primary:
    inset 0 1px 2px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 1px 0 rgba(0, 0, 0, 0.08),
    0 2px 2px -1px rgba(0, 0, 0, 0.06), 0 4px 8px -4px rgba(0, 129, 37, 0.32);
  /* The product's enter curve, MOTION.ease (extension/review-ui/design-tokens.ts):
     lander/motion.test.ts holds the two equal. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --frame: 1240px;
  --gutter: 40px;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--field);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
::selection {
  background: rgba(0, 127, 36, 0.25);
}
a {
  color: inherit;
}
h1,
h2,
h3,
p {
  margin: 0;
}
img,
svg {
  display: block;
}
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 10;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  top: 12px;
}

.mono {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  font-weight: 400;
}

/* ---- The field: bottle green with a dotted pattern, framing the cream sheet ---- */
.field {
  background-color: var(--field);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(246, 236, 214, 0.24) 1px, transparent 1.6px),
    repeating-linear-gradient(90deg, transparent 0 63px, rgba(246, 236, 214, 0.07) 63px 64px);
  background-size:
    16px 16px,
    64px 100%;
}
.sheet-wrap {
  padding: 0 20px;
}
/* A stamp's edge, top and bottom: holes punched through to the field by a mask, so the
   field's own dots show in them. A mask makes .sheet a stacking context and clips
   everything inside it, so nothing may hang over its edges by design. */
.sheet {
  position: relative;
  max-width: var(--frame);
  margin: 0 auto;
  background: var(--sheet);
  -webkit-mask:
    radial-gradient(circle var(--perf) at 50% 0, #0000 98%, #000) 0 0 / var(--perf-gap) 51% repeat-x,
    radial-gradient(circle var(--perf) at 50% 100%, #0000 98%, #000) 0 100% / var(--perf-gap) 51% repeat-x;
  mask:
    radial-gradient(circle var(--perf) at 50% 0, #0000 98%, #000) 0 0 / var(--perf-gap) 51% repeat-x,
    radial-gradient(circle var(--perf) at 50% 100%, #0000 98%, #000) 0 100% / var(--perf-gap) 51% repeat-x;
}

/* ---- Header strip ---- */
.site-header {
  padding: 28px 20px 28px;
}
.nav {
  max-width: var(--frame);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--sheet);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.nav .brand-word {
  color: var(--heading);
  text-decoration: none;
  justify-self: start;
}
/* The logo's stamp (L2, extension/review-ui/brand.ts), drawn into the page where it is served. */
.nav .brand-stamp {
  display: block;
}
.nav-links {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-links a {
  text-decoration: none;
  color: var(--heading);
}
.nav-links a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.nav-links .nav-cta::before {
  content: "› ";
}
.nav-quiet {
  display: inline;
}

/* ---- Hero ---- */
.hero {
  position: relative;
  padding: 76px var(--gutter) 28px;
}
.tick {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--heading);
  border-radius: 1px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  position: relative;
}
.hero-left {
  position: relative;
  padding: 16px 56px 28px 28px;
  border-left: 1px solid var(--heading);
}
.hero-left .tick-a {
  left: -3.5px;
  top: -6px;
}
.hero h1 {
  color: var(--heading);
  font-size: clamp(36px, 4.4vw, 54px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.025em;
  max-width: 11.5em;
}
.hero-arc {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 260px;
  height: 220px;
  overflow: visible;
  pointer-events: none;
}
.hero-right {
  position: relative;
  padding: 16px 28px 28px 40px;
  border-left: 1px solid var(--heading);
}
.hero-right .tick-b {
  left: -3.5px;
  bottom: -6px;
}
.lede {
  color: var(--ink);
  font-size: 19px;
  line-height: 1.38;
  max-width: 31em;
}
.lede strong {
  font-weight: 600;
  color: var(--heading);
  /* An ember underline band behind the one phrase that is the hard part. */
  background: linear-gradient(transparent 64%, rgba(200, 80, 42, 0.2) 64% 94%, transparent 94%);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 28px;
}
.hero-note {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 15px;
}
/* A rubber stamp: words a visitor needs, in the postal language. Real text, never
   aria-hidden. Tilted a few degrees, as a hand-pressed stamp is. */
.stamp {
  display: inline-block;
  padding: 6px 9px 5px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1.5px var(--stamp);
  outline: 1.5px dashed rgba(180, 68, 31, 0.5);
  outline-offset: 2px;
  color: var(--stamp);
  font: 600 12px / 1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(-3deg);
}
.stamp-free {
  margin-left: 14px;
}
/* The postmark straddles nothing: the sheet's mask would clip it. It sits in the hero's
   top-right corner, above the lede. */
.postmark {
  position: absolute;
  top: 6px;
  right: 22px;
  width: 132px;
  /* --stamp, not --stamp-ink: the ring carries words, even if no one needs to read them. */
  color: var(--stamp);
  opacity: 0.85;
  transform: rotate(-8deg);
  pointer-events: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 10px;
  font: 500 17px / 1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition:
    background 150ms var(--ease),
    transform 150ms var(--ease);
}
.btn:active {
  transform: translateY(0.5px);
}
.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-primary);
}
.btn-primary:hover {
  background: #035f17;
}
.btn-outline {
  color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.btn-outline:hover {
  background: rgba(0, 127, 36, 0.06);
}

/* ---- Product demo ----
   The preview is the real dashboard, /sandbox, played by its autopilot
   (lander/sandbox/autoplay.ts) and framed here by lander/preview.ts, in a window drawn
   the way Chrome draws one. Take over hands the same frame to the visitor. It is an
   iframe so that the dashboard's stylesheet, which sets :root tokens and styles bare
   elements, has a document of its own and cannot reach this page: nothing below styles
   the dashboard, it only draws the window and sizes the box. It replaced a hand-built
   copy of the dashboard, which drifted from the product it was a picture of. */
.demo-stage {
  position: relative;
  padding: 8px var(--gutter) 40px;
}
.demo-stage .tick-c {
  left: calc(var(--gutter) - 3px);
  top: 0;
}
.demo-stage .tick-d {
  right: calc(var(--gutter) - 3px);
  top: 0;
}
.demo-caption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
}
.demo-caption .mono {
  font-size: 11px;
  color: var(--heading);
}
.demo-window {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper);
  box-shadow:
    0 0 0 1px rgba(9, 53, 46, 0.18),
    0 30px 60px -30px rgba(9, 53, 46, 0.35),
    0 8px 24px -12px rgba(9, 53, 46, 0.18);
}
/* Chrome's dark window, as the founder's own Chrome draws it: a charcoal toolbar,
   coloured window buttons, a darker address pill with light text. Shared with the job
   page drawn in #extension, so both browsers on the page are one. */
.window-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 10px 0 14px;
  background: #3c3c3c;
  border-bottom: 1px solid #262626;
}
.window-dots {
  display: flex;
  flex: none;
  gap: 8px;
}
.window-dots i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.14);
}
.window-dots i:nth-child(2) {
  background: #febc2e;
}
.window-dots i:nth-child(3) {
  background: #28c840;
}
.window-url {
  flex: 1;
  min-width: 0;
  max-width: 460px;
  margin: 0 auto;
  height: 26px;
  overflow: hidden;
  border-radius: 13px;
  background: #282828;
  color: #e3e3e3;
  font-size: 12px;
  line-height: 26px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.demo-takeover {
  flex: none;
  /* Right-aligned on a phone too, where the address pill is hidden. */
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 13px 0 11px;
  border: 1px solid #5f5f5f;
  border-radius: 14px;
  background: #282828;
  color: #e8eaed;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}
.demo-takeover svg {
  width: 13px;
  height: 13px;
}
.demo-takeover:hover {
  background: #4a4a4a;
}
.demo-takeover:active {
  background: #202020;
}
.demo-takeover:focus-visible {
  outline: 2px solid #8ab4f8;
  outline-offset: 2px;
}
.demo-takeover[aria-pressed="true"] {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}
.demo-takeover[aria-pressed="true"]:hover {
  background: #005c15;
}
/* The frame's box. Fixed in shape, so nothing moves while the dashboard loads into it. */
.demo-viewport {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper);
}
@media (max-width: 700px) {
  .demo-viewport {
    aspect-ratio: 4 / 5;
  }
}
/* Laid out at the dashboard's own width and scaled to the box (preview.ts), so a laptop
   sees the three-pane dashboard rather than its tablet layout squeezed. Shown once the
   sandbox says it has drawn; between runs the next frame fades in over the last (preview.ts). */
.demo-sandbox {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  transform-origin: 0 0;
  opacity: 0;
  transition: opacity 500ms ease;
}
.demo-sandbox.is-ready {
  opacity: 1;
}
/* Read by assistive technology, never seen. */
.demo-help {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.fp-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 2px 12px;
}
.fp-head svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.8;
  stroke-linecap: round;
}
.fp-head strong {
  font-size: 14px;
  font-weight: 600;
}
.fp-head .mono {
  margin-left: auto;
  font-size: 10px;
  color: var(--muted);
}
.fp-section {
  padding: 12px;
  border-radius: 12px;
  background: var(--sunken);
}
.fp-section + .fp-section {
  margin-top: 8px;
}
.fp-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 8px;
}
.draft {
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink);
}
.draft .subj {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

/* ---- Sections ---- */
.section {
  position: relative;
  padding: 88px var(--gutter);
}
.section-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
}
.section-grid > * {
  padding: 0 28px;
  border-left: 1px solid var(--heading);
  position: relative;
}
.section-grid > :last-child {
  border-right: none;
}
.section-title {
  color: var(--heading);
  font-size: 32px;
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.section-sub {
  margin-top: 16px;
  color: var(--heading);
  font-size: 17px;
  line-height: 1.45;
}
.pill-link {
  display: inline-block;
  margin-top: 18px;
  padding: 3px 9px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--heading);
  color: var(--heading);
  text-decoration: none;
}
.pill-link:hover {
  background: rgba(0, 127, 36, 0.06);
}

/* Its own padding, because .steps is also a grid child and this rule, coming later, would
   otherwise zero the child padding and put the copy against its rule. */
.steps {
  list-style: none;
  margin: 0;
  padding: 0 28px 0 32px;
  display: grid;
  gap: 30px;
}
.step-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0 2px;
  border-top: 1px solid rgba(9, 53, 46, 0.6);
  font-size: 15px;
  font-weight: 600;
  color: var(--heading);
}
/* The step number as a postage stamp: a perforated tile on the letter's paper. The holes are
   a mask on the tile alone, so the numeral above it stays whole. */
.step-head .num {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 34px;
  color: var(--stamp);
  font: 600 14px / 1 var(--mono);
}
.step-head .num::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--letter);
  box-shadow:
    inset 0 0 0 3.5px var(--letter),
    inset 0 0 0 4.7px var(--stamp-ink);
  -webkit-mask: radial-gradient(circle 2.4px, #0000 96%, #000) -3px -3px / 6px 6px round;
  mask: radial-gradient(circle 2.4px, #0000 96%, #000) -3px -3px / 6px 6px round;
}
.step p {
  margin-top: 12px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.step p strong {
  color: var(--ink);
  font-weight: 600;
}
.step-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--heading);
}
.tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 4px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--heading);
}

/* the extension on a job page */
.split {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 56px;
  align-items: center;
}
.split-copy {
  padding-left: 28px;
  border-left: 1px solid var(--heading);
}
.feature-list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.feature-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  font-size: 16px;
  color: var(--ink-soft);
}
.feature-list li::before {
  content: "";
  width: 14px;
  height: 14px;
  margin-top: 4px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1.5px var(--brand);
  background: linear-gradient(var(--brand), var(--brand)) center / 6px 6px no-repeat;
}
.feature-list b {
  color: var(--ink);
  font-weight: 600;
}

.job-page {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--letter);
  box-shadow:
    0 0 0 1px rgba(9, 53, 46, 0.18),
    0 30px 60px -30px rgba(9, 53, 46, 0.35);
}
.job-body {
  display: grid;
  grid-template-columns: 1fr 300px;
  min-height: 440px;
}
.posting {
  padding: 24px 26px;
  font-size: 13px;
  color: #3c4043;
}
.posting .ats {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a8f94;
}
.posting h3 {
  margin-top: 8px;
  font-size: 20px;
  color: #202124;
  font-weight: 600;
}
.posting .loc {
  margin-top: 4px;
  color: #6b7075;
}
.posting .apply {
  display: inline-block;
  margin-top: 16px;
  padding: 7px 14px;
  border-radius: 6px;
  background: #2b6cb0;
  color: #fff;
  font-weight: 600;
  font-size: 12px;
}
.posting .lines {
  margin-top: 22px;
  display: grid;
  gap: 8px;
}
.posting .lines i {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: #eceff1;
}
.posting .lines i:nth-child(3n) {
  width: 82%;
}
.posting .lines i:nth-child(4n) {
  width: 64%;
}
.posting h4 {
  margin: 22px 0 0;
  font-size: 13px;
  color: #202124;
}
.dock {
  border-left: 1px solid var(--line);
  background: var(--canvas);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
}
.dock .fp-head {
  padding-bottom: 6px;
}
.status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--letter);
  box-shadow: var(--shadow-card);
  color: var(--ink-soft);
}
.status-row b {
  font-weight: 500;
  color: var(--ink);
}
.status-row .ok {
  margin-left: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand);
  position: relative;
}
.status-row .ok::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 4px;
  height: 7px;
  border-right: 1.6px solid #fff;
  border-bottom: 1.6px solid #fff;
  transform: rotate(45deg);
}
/* The pen writing the note: the product's own drafting loop (shared/waiting), which the
   server draws into this slot and styles (backend/marketing/render.ts transformHomepage). */
.status-row .wait {
  margin-left: auto;
  display: inline-flex;
  color: var(--ink-soft);
}

/* manifesto band */
/* The why, as a letter laid on the sheet: a paper of its own, square to the page so its top
   edge is a level seam, with two sheets stacked behind it. The pseudo-elements sit at
   z-index -1 inside .sheet's stacking context (its mask makes one), so the letter's own
   ground covers them and only their tilted edges show. */
/* Room below the letter too: #how's seam (and the figure standing on it) sits under it. */
.band {
  position: relative;
  padding: 72px var(--gutter) 88px;
}
.band-inner {
  position: relative;
  display: grid;
  grid-template-columns: 0.9fr 1.3fr 220px;
  grid-template-rows: auto 1fr;
  column-gap: 24px;
  padding: 56px 48px 48px;
  background: var(--letter);
  box-shadow:
    0 1px 2px rgba(60, 40, 10, 0.08),
    0 10px 30px -12px rgba(60, 40, 10, 0.18);
}
.band-inner::before,
.band-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--letter);
  box-shadow:
    0 1px 2px rgba(60, 40, 10, 0.06),
    0 8px 24px -14px rgba(60, 40, 10, 0.16);
}
.band-inner::before {
  transform: rotate(1.4deg) translate(6px, 6px);
}
.band-inner::after {
  transform: rotate(-1.1deg) translate(-4px, 8px);
}
.band-inner > * {
  padding: 0 26px;
}
.band-inner > :nth-child(1) {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.band-inner > :nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}
.band-inner > :nth-child(3) {
  grid-column: 2;
  grid-row: 2;
  margin-top: 14px;
}
.band h2 {
  color: var(--heading);
  font-size: 38px;
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.band h2 .i2 {
  display: block;
  padding-left: 1.2em;
}
.band h2 .i3 {
  display: block;
  padding-left: 2.4em;
}
.band .you {
  margin-top: 26px;
  color: var(--stamp);
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.band p {
  max-width: 34em;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.6;
}
.band p + p {
  margin-top: 14px;
}
.band strong {
  color: var(--ink);
  font-weight: 600;
}
.band .sign {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.35;
}
.seal {
  width: 46px;
  height: 46px;
  flex: none;
}
/* The catalogue card, clipped on inside the letter's top-right corner: below the top edge,
   so the companion walking that edge never stands in it. */
.ticket {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: start;
  padding: 10px;
  background: #f3ead6;
  box-shadow: 0 6px 14px -8px rgba(60, 40, 10, 0.35);
  transform: rotate(2.2deg);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink);
  line-height: 1.5;
}
.stamp-due {
  margin-top: 8px;
  padding: 3px 6px;
  outline: 0;
  font-size: 10px;
  transform: rotate(-4deg);
}
.stamp-soon {
  margin-left: 10px;
  padding: 4px 7px 3px;
  outline: 0;
  font-size: 11px;
  transform: rotate(-4deg);
  vertical-align: 2px;
}
.job-figure {
  margin: 0;
}
.sample-note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  text-align: right;
}
/* A seam: the line the companion walks (lander/companion.ts). Zero height, at the top of
   its section, drawn as a fold line; the letter's seam is the letter's own top edge. */
.seam {
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 0;
  border-top: 1px dashed rgba(9, 53, 46, 0.28);
  pointer-events: none;
}
.seam-letter {
  top: 72px;
  border-top: 0;
}
.ticket .row {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(9, 53, 46, 0.3);
  padding: 2px 0;
}
.ticket .big {
  font-size: 15px;
  letter-spacing: 0.08em;
}
.ticket .cells {
  display: grid;
  grid-template-columns: 1.2fr 0.6fr 1fr;
  margin-top: 4px;
}
.ticket .cells span {
  padding: 2px 4px;
  border-left: 1px solid rgba(9, 53, 46, 0.3);
}
.ticket .cells span:first-child {
  border-left: 0;
  padding-left: 0;
}

/* FAQ */
.faq-list {
  display: grid;
}
.faq-list details {
  border-top: 1px solid var(--ink);
}
.faq-list details:last-child {
  border-bottom: 1px solid var(--ink);
}
.faq-list summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 600;
  color: var(--heading);
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary span {
  font-family: var(--mono);
  font-weight: 400;
  transition: transform 200ms var(--ease);
}
.faq-list details[open] summary span {
  transform: rotate(45deg);
}
.faq-list details p {
  padding: 0 0 18px;
  max-width: 44em;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.55;
}

.text-link {
  color: var(--brand);
  text-underline-offset: 3px;
}

/* closing + footer */
/* The close opens under an airmail rule, the last seam the companion walks. */
.airmail {
  height: 9px;
  margin: 24px var(--gutter) 0;
  background: repeating-linear-gradient(
    -45deg,
    var(--stamp-ink) 0 14px,
    transparent 14px 22px,
    var(--heading) 22px 36px,
    transparent 36px 44px
  );
  opacity: 0.8;
}
.closing {
  position: relative;
  padding: 176px var(--gutter) 96px;
}
.closing h2 {
  max-width: 14em;
  color: var(--heading);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.closing p {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 17px;
}
.closing .hero-actions {
  margin-top: 28px;
}
/* Ends at y = 34 + 118 = 152px, above the heading's 176px, so it can no longer strike
   through it as it did. */
.closing-arc {
  position: absolute;
  left: var(--gutter);
  top: 34px;
  width: 220px;
  height: 120px;
  overflow: visible;
  pointer-events: none;
}

.site-footer {
  padding: 40px 20px 56px;
  color: #dbeedd;
}
.footer-grid {
  max-width: var(--frame);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 0.8fr 0.8fr 2.3fr;
  gap: 32px;
  padding: 0 20px;
}
.footer-grid h2 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 10px;
}
.footer-grid a {
  display: block;
  padding: 3px 0;
  color: #eef7ef;
  text-decoration: none;
  font-size: 14px;
}
.footer-grid a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
}
.footer-brand .brand-stamp {
  flex: none;
}
.footer-tagline {
  margin-top: 10px;
  max-width: 26em;
  font-size: 14px;
  color: #c9e3cf;
}
.footer-signoff {
  margin-top: 14px;
  color: #f3e6c9;
  font-size: 14px;
  font-style: italic;
}
.footer-steal-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
}
.footer-steal-links a {
  font-size: 13.5px;
}
.copyright {
  max-width: var(--frame);
  margin: 32px auto 0;
  padding: 0 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--sage);
}

/* arcs that draw in on scroll (landing.js toggles .is-visible) */
.draw {
  fill: none;
  stroke: var(--heading);
  stroke-width: 1.2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1400ms var(--ease);
}
.is-visible .draw,
.draw.is-visible {
  stroke-dashoffset: 0;
}

/* ---- Responsive ---- */
/* A wide screen: the letter grows from 1240 to 1520px, so the field around it is a frame and
   not most of the screen (at 1240 it was 48% of a 2560 screen, 36% of a 3440 ultrawide; it is
   59% and 44% now). Headings and spacing grow by about the frame's 1.23, reading text by about
   1.12, so a line keeps its measure. The demo grows its board and its height and keeps the
   product's own type: it is a picture of the dashboard at the dashboard's size.
   Two distances stay put because the companion is measured against them: #extension's top
   padding, which keeps the window bar within the bird's hop of its seam (MAX_BAR_DROP in
   lander/companion.ts), and the closing's 176px, which keeps the arc above its heading. */
@media (min-width: 2000px) {
  :root {
    --frame: 1520px;
    --gutter: 52px;
  }
  .site-header {
    padding: 34px 20px;
  }
  .nav {
    height: 52px;
    padding: 0 26px;
  }
  .nav .mono,
  .nav-links {
    font-size: 15px;
  }
  .nav-links {
    gap: 34px;
  }
  .hero {
    padding: 92px var(--gutter) 34px;
  }
  .hero-left {
    padding: 20px 68px 34px 34px;
  }
  .hero h1 {
    font-size: 66px;
  }
  .hero-arc {
    width: 318px;
    height: 270px;
  }
  .hero-right {
    padding: 20px 34px 34px 48px;
  }
  .lede {
    font-size: 21px;
  }
  .hero-actions {
    margin-top: 34px;
  }
  .hero-note {
    font-size: 17px;
  }
  .btn {
    min-height: 46px;
    padding: 10px 19px;
    font-size: 19px;
  }
  .postmark {
    width: 160px;
  }
  .demo-stage {
    padding-bottom: 48px;
  }
  .demo-caption {
    font-size: 13.5px;
  }
  .demo-caption .mono {
    font-size: 12.5px;
  }
  .section {
    padding-bottom: 108px;
  }
  .section-grid {
    grid-template-columns: 368px 1fr;
  }
  .section-grid > * {
    padding: 0 34px;
  }
  .section-title {
    font-size: 39px;
  }
  .section-sub {
    font-size: 19px;
  }
  .steps {
    padding: 0 34px 0 40px;
    gap: 36px;
  }
  .step-head {
    font-size: 17px;
  }
  .step p {
    font-size: 19px;
  }
  .split {
    gap: 68px;
  }
  .split-copy {
    padding-left: 34px;
  }
  .feature-list li {
    font-size: 18px;
  }
  .job-body {
    grid-template-columns: 1fr 360px;
    min-height: 520px;
  }
  .band {
    padding: 88px var(--gutter) 108px;
  }
  .seam-letter {
    top: 88px;
  }
  .band-inner {
    grid-template-columns: 0.9fr 1.3fr 260px;
    column-gap: 30px;
    padding: 68px 58px 58px;
  }
  .band-inner > * {
    padding: 0 32px;
  }
  .band h2,
  .band .you {
    font-size: 46px;
  }
  .band p {
    font-size: 19px;
  }
  .band .sign {
    font-size: 18px;
  }
  .seal {
    width: 54px;
    height: 54px;
  }
  .faq-list summary {
    padding: 17px 0;
    font-size: 19px;
  }
  .faq-list details p {
    font-size: 18px;
  }
  .closing {
    padding-bottom: 116px;
  }
  .closing h2 {
    font-size: 58px;
  }
  .closing p {
    font-size: 19px;
  }
  .site-footer {
    padding: 48px 20px 68px;
  }
  .footer-grid a,
  .footer-tagline,
  .footer-signoff {
    font-size: 15.5px;
  }
  .footer-steal-links a {
    font-size: 15px;
  }
}
@media (max-width: 1100px) {
  .section-grid {
    grid-template-columns: 260px 1fr;
  }
  .band-inner {
    grid-template-columns: 1fr 1.3fr;
  }
  .ticket {
    grid-column: 1;
    grid-row: 3;
    max-width: 240px;
    margin-top: 24px;
  }
}
@media (max-width: 860px) {
  :root {
    --gutter: 20px;
    --perf: 6px;
    --perf-gap: 16px;
  }
  .nav-quiet {
    display: none;
  }
  .hero {
    padding-top: 56px;
  }
  .hero-grid,
  .split {
    grid-template-columns: 1fr;
  }
  .hero-left {
    padding: 16px 20px 32px;
  }
  .hero-right {
    padding: 16px 20px 24px;
  }
  .hero-arc {
    display: none;
  }
  .stamp-free {
    margin: 8px 0 0;
  }
  .postmark {
    top: 4px;
    right: 8px;
    width: 96px;
  }
  .section-grid {
    grid-template-columns: 1fr;
    row-gap: 28px;
  }
  .section-grid > * {
    padding: 0 20px;
  }
  /* The posting is hidden: the frame ends with the dock instead of keeping the desktop's
     440px of panel under it. */
  .job-body {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .posting {
    display: none;
  }
  .band {
    padding: 48px 16px 72px;
  }
  .seam-letter {
    top: 48px;
    left: 16px;
    right: 16px;
  }
  .band-inner {
    grid-template-columns: 1fr;
    padding: 32px 22px;
  }
  .band-inner > :nth-child(n) {
    grid-column: 1;
    grid-row: auto;
  }
  .band-inner > :nth-child(1) {
    margin-bottom: 18px;
  }
  .band-inner > :nth-child(3) {
    margin-top: 14px;
  }
  /* 38px with the stagger's indents breaks "don't get you" on a phone. */
  .band h2,
  .band .you {
    font-size: 30px;
  }
  .closing {
    padding-top: 164px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-steal {
    grid-column: 1 / -1;
  }
  .demo-caption {
    flex-direction: column;
    gap: 4px;
  }
}
@media (max-width: 480px) {
  /* Four layers of inset stood between a phone's edge and its text: the sheet's margin, the
     section's, a column's rule and its padding. They left the letter 172px of a 320px screen
     and the hero 219, a word or two to a line. The sheet's own margin is the gutter; the
     layers inside it keep a little air beside their rules. */
  :root {
    --gutter: 14px;
  }
  .hero-left,
  .hero-right {
    padding-left: 16px;
    padding-right: 4px;
  }
  .section-grid > * {
    padding: 0 4px 0 16px;
  }
  .split-copy {
    padding-left: 16px;
  }
  .band {
    padding-left: 10px;
    padding-right: 10px;
  }
  .seam-letter {
    left: 10px;
    right: 10px;
  }
  .band-inner {
    padding: 28px 16px;
  }
  .band-inner > :not(.ticket) {
    padding: 0 6px;
  }
  /* The sheets stacked under the letter lean less: a phone's letter is twice a desktop's
     height, and with the band's narrower margin their 1.4deg corners swung past the sheet's
     edge, which the mask cuts flat. At these angles they stay inside it and peek out about as
     far as they do beside a desktop's letter. */
  .band-inner::before {
    transform: rotate(0.5deg) translate(2px, 6px);
  }
  .band-inner::after {
    transform: rotate(-0.4deg) translate(-2px, 8px);
  }
  .sheet-wrap,
  .site-header {
    padding-left: 10px;
    padding-right: 10px;
  }
  .nav {
    padding: 0 12px;
  }
  .window-url {
    display: none;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-steal-links {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .draw {
    stroke-dashoffset: 0;
  }
}

/* The companion stands on the section seams, on the sheet itself, and is moved there by a
   transform from lander/companion.ts. Decoration in the strict sense: aria-hidden, and the
   page says everything in words. Drawn in ink, so it reads on cream at every width. */
.companion {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 120px;
  height: 160px;
  pointer-events: none;
  will-change: transform;
}
.companion[hidden] {
  display: none;
}
/* The post box at the end of the airmail rule, where the companion posts its letter. Under the
   figure (z-index 1 against its 2), so the letter goes in at the door and the figure stands in
   front. Drawn and placed by lander/companion.ts, like the figure. */
.companion-postbox {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 44px;
  height: 60px;
  pointer-events: none;
  will-change: transform;
}
.companion-postbox[hidden] {
  display: none;
}

/* ── Responses to the reader ───────────────────────────────────────────────
   (Careful with wording here: lander/landing.test.ts scans this file for the
   names of front-end runtimes to catch one sneaking onto the page, and it
   matches on substrings — so an innocent English word that happens to contain
   one fails the suite. This heading used to, which is how I found out.)
   Small responses to the reader, not animations that play at them. Every one
   is behind prefers-reduced-motion, and none of them moves anything a reader
   is trying to click: a page that shifts under the pointer is not cosy, it is
   annoying. */
@media (prefers-reduced-motion: no-preference) {
  /* The how-it-works steps lift very slightly under the pointer. 2px, because
     the point is that the page noticed, not that it performed. */
  .step {
    transition: transform 220ms var(--ease);
  }
  .step:hover {
    transform: translateY(-2px);
  }

  /* The primary call to action breathes once when it first scrolls into view,
     then never again. A button that pulses forever is a nag. */
  .btn-primary.is-visible {
    animation: warmada-notice 620ms var(--ease) 1;
  }
  @keyframes warmada-notice {
    0% {
      transform: scale(1);
    }
    42% {
      transform: scale(1.035);
    }
    100% {
      transform: scale(1);
    }
  }
}

/* The bird comes to rest beside the mark at the bottom of the page. The footer
   is dark, so it draws in paper like the companion does. */
.footer-bird {
  width: 64px;
  height: 40px;
  margin-top: 14px;
}
/* The companion's bird flying home to it moves this canvas down the sheet, over the sheet's
   edge: above it for as long as it is in the air. */
.footer-bird[data-flying] canvas {
  position: relative;
  z-index: 5;
}