/* ==========================================================================
   floorlogik.com — stylesheet
   Plain CSS, no framework, no build step. Custom properties for the tokens,
   then flat classes. Nothing here needs a preprocessor.

   The design in one line: a flooring-trade spec sheet. Paper ground, ink
   rules, flat brand green, square corners, Helvetica set large and tight,
   and mono reserved strictly for real data — lengths, dye lots, batch codes,
   references. No gradients, no glows, no rounded cards, no drop shadows.
   Dark is used as a device (two sections and the footer), never as a theme.
   ========================================================================== */

:root {
  /* Ink and paper */
  --ink:        #0E1A16;   /* headings, rules, dark sections */
  --ink-soft:   #2C3A34;   /* lead paragraphs */
  --body:       #4A554F;   /* body copy */
  --muted:      #6E7A74;   /* captions, mono notes */
  --faint:      #A9BDB2;   /* ruler ticks only — never text */
  --paper:      #F7F9F6;
  --paper-2:    #FCFDFB;   /* panels on paper */
  --rule:       #D3DED8;   /* hairlines */
  --rule-soft:  #E9F0EB;

  /* Brand — from the logo artwork. Do not introduce other greens. */
  --brand:      #2B9D88;   /* darkest stop: fills, borders, bars */
  --brand-light:#B7F28D;   /* lightest stop: accents on ink only */
  --tint-from:  #E9F9E5;   /* the light brand gradient */
  --tint-to:    #D1EAE4;
  --brass:      #A87B2E;   /* the single warm accent, for eyebrows */

  /* Type */
  --sans: Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Measure */
  --page:  1360px;
  --gutter: 48px;
}

/* --- Circular ------------------------------------------------------------
   The wordmark's intended face, and now the site's. Self-host the weights
   actually used: book 400, medium 500, bold 700, black 900. Until the web
   licence lands, comment this block out and the Helvetica fallback takes
   over cleanly — sizes and tracking were set to survive that swap.
   ---------------------------------------------------------------------- */
/* Circular is COMMENTED OUT, on the handoff's own instruction: "If the licence isn't
   resolved, comment out that block - the Helvetica fallback takes over cleanly, and every
   size and tracking value was set to survive that swap. Don't leave Circular self-hosted
   on a public site without the web licence."

   The licence is still unresolved and has been parked with Ben since the rebrand. Nothing
   else needs changing to switch it on: drop the four .woff2 files into /fonts and
   uncomment these four lines. */
/*
@font-face { font-family: Circular; src: url('/fonts/lineto-circular-book.woff2') format('woff2');   font-weight: 400; font-display: swap; }
@font-face { font-family: Circular; src: url('/fonts/lineto-circular-medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Circular; src: url('/fonts/lineto-circular-bold.woff2') format('woff2');   font-weight: 600 700; font-display: swap; }
@font-face { font-family: Circular; src: url('/fonts/lineto-circular-black.woff2') format('woff2');  font-weight: 800 900; font-display: swap; }
*/

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--ink); }
::selection { background: var(--ink); color: var(--paper); }

/* --- Layout ------------------------------------------------------------- */
.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
.section { border-bottom: 1px solid var(--ink); }
.section--pad { padding: 76px 0 80px; }
.section--ink { background: var(--ink); color: var(--paper); }
.section--tint { background: linear-gradient(180deg, var(--tint-from), var(--tint-to)); }

.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; }
.split--even { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.split--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split--end { align-items: end; }

/* --- The ruler ----------------------------------------------------------
   The one motif. Ticks every 12px with a taller mark every 60px, 168px wide,
   sitting above a section eyebrow. Used sparingly — twice on the homepage.
   Never full width: it is a measure, not a divider.
   ---------------------------------------------------------------------- */
.ruler {
  height: 11px;
  width: 168px;
  margin-bottom: 20px;
  background-image:
    repeating-linear-gradient(90deg, var(--faint) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, var(--faint) 0 1px, transparent 1px 60px);
  background-size: 100% 5px, 100% 11px;
  background-repeat: repeat-x;
  background-position: left top, left top;
}
.section--ink .ruler { --faint: rgba(247, 249, 246, 0.5); }

/* --- Type --------------------------------------------------------------- */
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; margin: 0;
}
.eyebrow--brass { color: var(--brass); }

h1, .h1 {
  margin: 0; font-size: 60px; line-height: 0.98; letter-spacing: -0.035em;
  font-weight: 700; max-width: 22ch; text-wrap: balance;
}
h2, .h2 {
  margin: 0; font-size: 58px; line-height: 0.96; letter-spacing: -0.045em;
  font-weight: 700; max-width: 20ch; text-wrap: balance;
}
.h2--sm { font-size: 50px; }
.lead   { font-size: 20px; line-height: 1.45; color: var(--ink-soft); max-width: 46ch; text-wrap: pretty; }
.lead--sm { font-size: 17px; line-height: 1.55; color: var(--body); }
.section--ink .lead, .section--ink .lead--sm { color: rgba(247, 249, 246, 0.72); }
/*
  Every dark container, not just .section--ink.
  
  .cta-photo is a dark band too, and it was not in this rule, so the lead under "Bring a product
  list" was --body (#4A554F) on near-black - the same black-on-black that made the contact page's
  email address invisible, found the same way, by looking at the rendered page rather than the
  stylesheet. Listed together so the next dark container inherits the right colour instead of
  the default.
*/
.cta-photo .lead, .cta-photo .lead--sm, .cta-photo p { color: rgba(247, 249, 246, 0.78); }
.cta-photo .eyebrow { color: rgba(247, 249, 246, 0.6); }
.statement { font-size: 26px; line-height: 1.25; letter-spacing: -0.03em; font-weight: 600; max-width: 30ch; text-wrap: pretty; }
.note { font-family: var(--mono); font-size: 12px; line-height: 1.65; color: var(--muted); }

/* Figures. Every length, dye lot, batch code, reference and price. */
.fig { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 15px; font-weight: 600;
  padding: 17px 26px; border: 1px solid transparent; cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--brand); color: var(--paper); }
.btn--light { background: var(--brand-light); color: var(--ink); }
.btn--light:hover { background: var(--paper); color: var(--ink); }
.btn--outline { border-color: rgba(247,249,246,0.5); color: var(--paper); }
.btn--outline:hover { background: rgba(247,249,246,0.12); color: var(--paper); }

/* The same shape on a light background. btn--outline is near-white on a half-white border,
   which is right over the ink sections and completely invisible in the hero - where the
   secondary button now lives, since Book a demo took the primary slot. */
.btn--outline-ink { border-color: var(--ink); color: var(--ink); }
.btn--outline-ink:hover { background: var(--ink); color: var(--paper); }
.btn--sm { font-size: 13px; padding: 12px 18px; }
.link-underline {
  font-size: 15px; font-weight: 500; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.link-underline:hover { color: var(--brand); }
/*
  On the dark sections it was --ink on --ink: black text on a black ground.
  
  Found 15 Sep 2026 on the live contact page, where it made the email address, the phone number
  and the Log in link invisible - on the page whose entire job is giving somebody those three
  things. It reads as an empty heading with a caption under it, so it does not even look broken
  enough to report.
*/
.section--ink .link-underline { color: var(--paper); }
.section--ink .link-underline:hover { color: var(--brand); }

/* --- Header ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--paper); border-bottom: 1px solid var(--ink);
}
.site-header .wrap {
  height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); }
.brand img { height: 34px; width: auto; }
.brand span { font-size: 23px; font-weight: 900; letter-spacing: -0.045em; line-height: 1; }

.nav { display: flex; align-self: stretch; font-size: 13px; font-weight: 500; }
.nav a {
  display: flex; align-items: center; padding: 0 18px;
  color: var(--ink); border-left: 1px solid var(--rule);
}
.nav a:hover { background: var(--tint-from); color: var(--ink); }
.nav a:last-of-type { border-right: 1px solid var(--rule); }
.nav .nav-cta { background: var(--ink); color: var(--paper); font-weight: 600; border: 0; padding: 0 20px; }
.nav .nav-cta:hover { background: var(--brand); color: var(--paper); }

.burger { display: none; }
.mobile-nav { display: none; border-top: 1px solid var(--ink); background: var(--paper); }
.mobile-nav a {
  display: block; padding: 16px 20px; font-size: 16px; font-weight: 500;
  color: var(--ink); border-bottom: 1px solid var(--rule);
}
.mobile-nav .nav-cta { background: var(--ink); color: var(--paper); font-weight: 600; }
.mobile-nav[data-open='true'] { display: block; }

/* --- Hero --------------------------------------------------------------- */
.hero .split { gap: 0; }
.hero__copy { padding: 64px 56px 68px 0; }
.hero__figure {
  border-left: 1px solid var(--ink); min-height: 620px;
  background-position: 60% center; background-size: cover;
}

/* --- Facts strip -------------------------------------------------------- */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); }
.facts > div { padding: 26px; border-left: 1px solid var(--rule); }
.facts > div:first-child { padding-left: 0; border-left: 0; }
.facts > div:last-child { padding-right: 0; }
.facts .fig { font-size: 28px; letter-spacing: -0.03em; }
.facts p { margin: 9px 0 0; font-size: 13px; line-height: 1.5; color: var(--body); }

/* --- Comparison cards --------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); border-left: 1px solid var(--rule); }
.card {
  padding: 24px 26px 26px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 18px;
}
.card--wide { grid-column: span 2; }
.card__now { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--muted); line-height: 1.5; }
.card__visual { min-height: 62px; display: flex; align-items: flex-end; }
.card h3 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -0.028em; line-height: 1.15; }
.card p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--body); }

/* Card visuals — CSS only, no images, no icon font. */
.v-devices { display: flex; align-items: flex-end; gap: 7px; }
.v-devices span { border: 1px solid var(--ink); background: var(--tint-from); }
.v-price { display: flex; align-items: baseline; gap: 8px; }
.v-price b { font-size: 52px; font-weight: 700; letter-spacing: -0.05em; line-height: 0.9; }
.v-merge { display: flex; align-items: center; gap: 12px; }
.v-merge .old { display: flex; gap: 4px; }
.v-merge .old span { width: 26px; height: 34px; border: 1px solid var(--faint); }
.v-merge .arrow { font-family: var(--mono); font-size: 14px; color: var(--brass); }
.v-merge .one { width: 34px; height: 42px; background: var(--ink); }
.v-bars { display: flex; align-items: flex-end; gap: 6px; height: 58px; }
.v-bars span { width: 15px; background: var(--brand); }
.v-bars span:last-child { background: var(--ink); }
.v-rows { width: 100%; display: grid; gap: 7px; }
.v-rows span { height: 7px; background: var(--rule); }
.v-rows span:first-child { background: var(--ink); }

/* --- App screens (the tabbed panel) ------------------------------------ */
.tabs { display: flex; border-bottom: 1px solid var(--ink); }
.tab {
  font-family: inherit; font-size: 13px; font-weight: 600; padding: 12px 22px;
  background: transparent; color: var(--muted); cursor: pointer;
  border: 1px solid var(--ink); border-bottom: 0; margin-right: -1px;
}
.tab[aria-selected='true'] { background: var(--ink); color: var(--paper); }
.screen { border: 1px solid var(--ink); border-top: 0; background: var(--paper-2); }
.screen__grid { display: grid; grid-template-columns: 218px minmax(0, 1fr); min-height: 540px; }
.screen__chrome { background: var(--ink); padding: 18px 12px; display: flex; flex-direction: column; gap: 2px; }
.screen__body { padding: 24px 26px 28px; }
.screen__nav { padding: 8px 10px; font-size: 13px; color: rgba(247,249,246,0.6); }
.screen__nav--on { font-weight: 600; color: var(--ink); background: var(--brand-light); }
.screen__group { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; color: rgba(247,249,246,0.4); padding: 16px 8px 6px; }

.data { width: 100%; border-collapse: collapse; text-align: left; }
.data th {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); font-weight: 400; padding: 9px 0; border-bottom: 1px solid var(--rule);
}
.data td { padding: 11px 0; border-bottom: 1px solid var(--rule-soft); font-size: 13.5px; }
.data .num { font-family: var(--mono); font-size: 12.5px; text-align: right; }
.data thead.ink th { border-bottom: 1px solid var(--ink); }

/* The same table on the ink section. The light-page rules are near-white against ink and
   read as a cage, and the ink header rule disappears into the background entirely. */
.section--ink .data th { color: rgba(247, 249, 246, 0.6); }
.section--ink .data thead.ink th { border-bottom-color: rgba(247, 249, 246, 0.5); }
.section--ink .data td { border-bottom-color: rgba(247, 249, 246, 0.14); }

/* --- The measure rail (the job, end to end) ---------------------------- */
.rail { display: grid; grid-template-columns: repeat(10, 1fr); position: relative; }
.rail__line {
  position: absolute; left: 0; right: 0; top: 86px; height: 14px;
  border-top: 2px solid var(--ink); pointer-events: none;
  background-image: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 11px);
  background-size: 100% 6px; background-repeat: repeat-x;
}
.stage { display: grid; grid-template-rows: 86px 14px 86px; }
.stage__slot { display: flex; justify-content: center; padding: 0 6px; text-align: center; }
.stage__slot--top { align-items: flex-end; padding-bottom: 8px; }
.stage__slot--bottom { align-items: flex-start; padding-top: 8px; }
.stage b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.stage small { display: block; margin-top: 5px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; color: #5C6B63; }
.rail-band { display: flex; align-items: center; gap: 14px; }
.rail-band span.bar { height: 9px; flex: 1; background: var(--brand); }
.rail-band span.txt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: #14554A; white-space: nowrap; }

/* --- Callouts over a photo --------------------------------------------- */
.photo { position: relative; min-height: 560px; background-size: cover; background-position: center; border-left: 1px solid var(--ink); }
.chip { position: absolute; max-width: 240px; background: var(--paper); border: 1px solid var(--ink); padding: 13px 15px; }
.chip--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip__label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--brass); }
.chip--ink .chip__label { color: #C79A48; }
.chip p { margin: 7px 0 0; font-size: 13.5px; line-height: 1.45; }
.chip--a { top: 40px; left: -46px; }
.chip--b { bottom: 148px; right: 28px; }
.chip--c { bottom: 34px; left: 34px; }

/* --- Capability columns (on ink) --------------------------------------- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(247,249,246,0.5); }
.pillar { padding: 30px 28px 32px; border-right: 1px solid rgba(247,249,246,0.2); display: flex; flex-direction: column; }
.pillar:last-child { border-right: 0; }
.pillar__visual { min-height: 56px; display: flex; align-items: flex-end; }
.pillar h3 { margin: 26px 0 0; font-size: 32px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.pillar > p { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: rgba(247,249,246,0.66); }
.pillars--benefits .pillar h3 { font-size: 25px; letter-spacing: -0.03em; line-height: 1.08; }
.pillars--benefits .pillar > p { color: rgba(247,249,246,0.78); }
.pillar ul { margin: 22px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(247,249,246,0.2); }
.pillar li { font-size: 14px; padding: 10px 0; border-bottom: 1px solid rgba(247,249,246,0.12); color: rgba(247,249,246,0.9); }

/* --- Pricing ----------------------------------------------------------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--ink); background: var(--paper); }
.plan { padding: 28px 28px 32px; border-right: 1px solid var(--rule); }
.plan:last-child { border-right: 0; }
.plan--feature { background: var(--ink); color: var(--paper); }
.plan__name { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.plan__tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--brass); }
.plan--feature .plan__tag { color: #C79A48; }
.plan__price { margin-top: 22px; display: flex; align-items: baseline; gap: 8px; }
.plan__price b { font-size: 54px; font-weight: 700; letter-spacing: -0.05em; }
.plan__price span { font-size: 13px; color: var(--body); }
.plan--feature .plan__price span { color: rgba(247,249,246,0.68); }
.plan > p { margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: var(--body); }
.plan--feature > p { color: rgba(247,249,246,0.68); }
.plan ul { margin: 22px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.plan li { font-family: var(--mono); font-size: 11.5px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.plan--feature ul, .plan--feature li { border-color: rgba(247,249,246,0.24); }
.plan .btn { display: block; width: 100%; margin-top: 26px; text-align: center; padding: 14px; font-size: 14px; }
.plan .btn--ghost { border: 1px solid var(--ink); color: var(--ink); }
.plan .btn--ghost:hover { background: var(--ink); color: var(--paper); }
/* What annual works out at. .plan > .plan__billed to outrank .plan > p above. */
.plan > .plan__billed { margin: 8px 0 0; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; }

/* Monthly or annual, above the plan cards. Square and ruled like the cards it controls. */
.billing { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.billing__toggle { display: inline-flex; border: 1px solid var(--ink); background: var(--paper); }
.billing__btn { font: inherit; font-size: 13px; font-weight: 600; padding: 10px 18px; border: 0;
  background: transparent; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.billing__btn + .billing__btn { border-left: 1px solid var(--ink); }
.billing__btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.billing__btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.billing__tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass); }
.billing__btn[aria-pressed="true"] .billing__tag { color: #C79A48; }
.billing__note { margin: 0; font-size: 14px; color: var(--body); }
.plan__price span { white-space: nowrap; }
/* The monthly price, struck through beside what annual works out at. */
.plan__was { font-size: 24px; font-weight: 600; color: var(--body); text-decoration-thickness: 2px; }
.plan--feature .plan__was { color: rgba(247,249,246,0.6); }
/* Read out, not shown: a strike-through alone says nothing to a screen reader. */
.plan__was-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.plan__price { position: relative; }

/* --- CTA over a photo -------------------------------------------------- */
.cta-photo {
  background-image:
    linear-gradient(90deg, rgba(14,26,22,0.94) 0%, rgba(14,26,22,0.78) 52%, rgba(14,26,22,0.34) 100%),
    var(--cta-image);
  background-size: cover; background-position: center;
}
.cta-photo .wrap { padding: 96px var(--gutter) 100px; }
.cta-photo h2 { color: var(--paper); font-size: 66px; max-width: 17ch; line-height: 0.94; letter-spacing: -0.05em; }

/* --- Footer ------------------------------------------------------------ */
.site-footer { background: var(--ink); color: var(--paper); }
.site-footer .wrap { padding: 64px var(--gutter) 40px; }
.footer-grid { display: grid; grid-template-columns: minmax(0,1.4fr) repeat(3, minmax(0,0.7fr)); gap: 48px; }
.footer-grid h4 { margin: 0; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: rgba(247,249,246,0.44); font-weight: 400; }
.footer-grid ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; font-size: 14px; }
.footer-grid a { color: rgba(247,249,246,0.82); }
.footer-grid a:hover { color: var(--brand-light); }
.footer-legal {
  margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(247,249,246,0.2);
  display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.footer-legal p { margin: 0; font-family: var(--mono); font-size: 11px; line-height: 1.7; color: rgba(247,249,246,0.44); }

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 1180px) {
  .rail { grid-template-columns: repeat(6, 1fr); }
  .cards, .facts, .pillars { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 940px) {
  .split, .split--even, .split--flip { grid-template-columns: minmax(0, 1fr); }
  .split > :first-child { border-right: 0; padding-right: 0; }
  .hero__copy { padding-right: 0; }
  .hero__figure, .photo { border-left: 0; border-top: 1px solid var(--ink); }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan { border-right: 0; border-bottom: 1px solid var(--rule); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  /* The measure turns vertical rather than wrapping into short rows. */
  .rail__line { display: none; }
  .rail { grid-template-columns: minmax(0, 1fr); }
  .stage {
    display: block; padding: 13px 0 13px 22px;
    border-left: 2px solid var(--ink);
    background-image: repeating-linear-gradient(180deg, var(--ink) 0 1px, transparent 1px 11px);
    background-size: 6px 100%; background-repeat: repeat-y; background-position: left top;
  }
  .stage__slot { display: block; padding: 0; text-align: left; }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .burger {
    display: flex; align-items: center; gap: 10px; background: var(--ink); color: var(--paper);
    border: 0; padding: 11px 16px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .burger i { display: grid; gap: 3px; }
  .burger i b { display: block; width: 16px; height: 2px; background: var(--paper); }
}
@media (max-width: 760px) {
  :root { --gutter: 20px; }
  h1, .h1 { font-size: 38px; line-height: 1.04; letter-spacing: -0.03em; max-width: none; }
  h2, .h2, .h2--sm { font-size: 32px; line-height: 1.06; letter-spacing: -0.03em; max-width: none; }
  .statement { font-size: 20px; }
  .section--pad { padding: 48px 0 52px; }
  .hero__copy { padding: 40px 0 44px; }
  .hero__figure { min-height: 260px; }
  .cards, .facts, .pillars { grid-template-columns: minmax(0, 1fr); }
  .card, .facts > div { border-right: 0; padding-left: 0; padding-right: 0; }
  .card--wide { grid-column: auto; }
  .pillar { border-right: 0; border-bottom: 1px solid rgba(247,249,246,0.2); padding: 24px 0 26px; }
  .screen__grid { grid-template-columns: minmax(0, 1fr); }
  .screen__chrome { display: none; }
  .screen__body { overflow-x: auto; padding: 18px 16px 22px; }
  .screen__body .data { min-width: 480px; }
  .photo { min-height: 430px; padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; }
  .chip { position: static; max-width: none; }
  .cta-photo h2 { font-size: 34px; }
  .cta-photo .wrap { padding: 48px var(--gutter) 52px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Photograph fallbacks

   The three photographs the design specifies are now in place, so these rules
   only sit UNDER them as a background-color - they no longer set a
   background-image, which would win over the real photograph and did while the
   slots were empty.

   Kept rather than deleted: a background-color behind a photograph costs
   nothing and means a slot reads as deliberate rather than as a hole if a file
   is ever missing or slow.
   ══════════════════════════════════════════════════════════════════════════ */
.hero__figure,
.photo {
  background-color: #E9E6DB;
}
.cta-photo {
  background-color: var(--ink);
}

/* ══════════════════════════════════════════════════════════════════════════
   Skip link

   Carried over from the previous build, whose stylesheet styled it. This one
   did not, so it rendered as a visible "Skip to content" link at the top of
   every page - which is what Ben spotted.

   Kept rather than deleted: it is how somebody navigating by keyboard gets
   past seven nav links on every page. Off-screen until focused, then it lands
   as a solid ink chip.
   ══════════════════════════════════════════════════════════════════════════ */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.skip:focus-visible,
.skip:focus {
  left: 12px;
  top: 12px;
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ── Product screenshots ──────────────────────────────────────────────────
   Real screens from the app, rather than a drawing of one. Framed the same way
   as every other bordered block on the site so they sit in the page rather than
   floating on it. */
.shot        { border: 1px solid var(--ink); background: var(--paper-2); display: block; }
.shot img    { display: block; width: 100%; height: auto; }
.shot--tall  { max-width: 420px; }
.shot__cap   { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
               text-transform: uppercase; color: var(--muted); margin: 10px 0 0; }