/* ==========================================================================
   Monarch Interactive
   Shared by every page. No framework. The tokens below
   drive the whole look: change --accent or --display here and every section
   follows.
   ========================================================================== */
:root {
  --ground: #F4F4EF;
  --panel: #E7E9E1;
  --paper: #FFFFFF;
  --ink: #151A17;
  --ink-2: #2F3632;
  --muted: #4A524D;
  --rule: #C9CDC4;
  --rule-dark: #5B625D;
  --on-dark-2: #DADDD4;
  --accent: #F26B1D;

  --display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --body: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;

  --wrap: 1160px;
  --gutter: clamp(20px, 4vw, 40px);
  --section: clamp(56px, 8vw, 104px);
  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: calc(var(--header-h) + 22px); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.stack { display: flex; flex-direction: column; }

.skip {
  position: absolute; left: var(--gutter); top: -120px; z-index: 40;
  background: var(--ink); color: var(--ground); padding: 10px 16px; font-weight: 600;
}
.skip:focus { top: 10px; }

/* ------------------------------ type ---------------------------------- */
.display { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; }
.h1 { font-size: clamp(42px, 6.6vw, 88px); line-height: 1; }
.h2 { font-size: clamp(34px, 4.8vw, 60px); }
.lead { font-size: 19px; color: var(--ink-2); max-width: 640px; }
.label { font-size: 15px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.label--muted { color: var(--muted); }
.serif { font-family: var(--serif); }
.hl { background: var(--accent); padding: 0 0.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ----------------------------- buttons --------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 60px; padding: 0 30px; border: 0; border-radius: 3px;
  background: var(--ink); color: var(--ground);
  font-weight: 700; font-size: 18px; text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.btn--lift { box-shadow: 6px 6px 0 var(--accent); }
.btn--lift:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--accent); }
.btn--small { min-height: 48px; padding: 0 22px; font-size: 16px; font-weight: 600; }
.btn--small.btn--lift { box-shadow: 4px 4px 0 var(--accent); }
.btn--small.btn--lift:hover { box-shadow: 6px 6px 0 var(--accent); }
.btn:not(.btn--lift):hover { background: #000000; }
/* The quiet button: an outline, for the client login beside "Book a free
   call". Pointed at, it lifts off the page as an orange block, the same move
   as the menu links. */
.btn--line { background: var(--paper); color: var(--ink); border: 2px solid var(--ink); transition: background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease; }
.btn.btn--line:hover { background: var(--accent); box-shadow: 4px 4px 0 var(--ink); transform: translate(-2px, -2px); }
.btn.btn--line:active { box-shadow: 0 0 0 var(--ink); transform: none; }
.text-link { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.text-link:hover { text-decoration-color: var(--accent); }

.chip {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 16px;
  border: 2px solid var(--ink); background: var(--paper);
  font-weight: 600; font-size: 16px; text-align: left;
  transition: background-color 150ms ease;
}
.chip:hover { background: var(--panel); }
.chip[aria-selected="true"] { background: var(--accent); }
.chip--dark[aria-selected="true"] { background: var(--ink); color: var(--ground); }
.chip__n { font-family: var(--display); font-weight: 800; }

.card {
  background: var(--paper); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--ink);
  padding: clamp(22px, 3vw, 34px);
}
.bullets { display: flex; flex-direction: column; gap: 10px; }
.bullets li { display: flex; gap: 12px; }
.bullets li::before {
  content: ""; flex: none; width: 10px; height: 10px; margin-top: 0.5em;
  background: var(--accent); border: 1.5px solid var(--ink);
}

/* ------------------------------ header --------------------------------- */
/* The header stays on screen. Its height never changes, so nothing under it
   shifts as the page scrolls. */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--ground); border-bottom: 2px solid var(--ink); }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: var(--header-h); padding-block: 12px; }
/* The logo is a drawing, not type: logo.svg holds the M speech block and both
   words as outlines, lined up to the block, so it looks the same on every
   device and before the fonts arrive. */
.logo { flex: none; display: block; margin-right: auto; }
.logo img { display: block; width: auto; height: 50px; }

/* The links are plain words at rest. Pointed at, each one lifts off the page
   as an orange block, the same move as the price boxes. The page you are on
   keeps its block. */
.site-nav, .site-nav__links { display: flex; flex-wrap: wrap; align-items: center; }
.site-nav { gap: 8px 18px; }
.site-nav__links { gap: 4px; }
.site-nav__links > a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border: 2px solid transparent; font-size: 16px; font-weight: 600; text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.site-nav__links > a:hover { background: var(--accent); border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); transform: translate(-2px, -2px); }
.site-nav__links > a:active { box-shadow: 0 0 0 var(--ink); transform: none; }
.site-nav__links > a[aria-current="page"] { background: var(--accent); border-color: var(--ink); }

/* Under 900px the links fold away behind the menu button, which drops them
   down as a card over the page (initMenu in script.js opens and shuts it;
   keep the 900 there in step with the 899 here). The card has its own
   "Book a free call" and "Login", so the two in the header step aside. The button needs
   the script, so with scripts off it stays hidden, the links wrap under the
   logo instead, and the taller header scrolls away with the page. */
.menu-btn, .site-nav__foot { display: none; }
@media (max-width: 899px) {
  html:not(.js) .site-header { position: static; }
  /* The header keeps its own ground so the dimmed page stops underneath it. */
  .js .site-header__inner { flex-wrap: nowrap; background: var(--ground); }
  .js .site-nav { order: 1; flex: 1 1 0; min-width: 0; }
  .js .site-nav > .btn { display: none; }
  .js .menu-btn {
    order: 2; flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; padding: 0; border: 2px solid var(--ink); border-radius: 0;
    background: var(--accent); box-shadow: 4px 4px 0 var(--ink);
    transition: transform 120ms ease, box-shadow 120ms ease;
  }
  /* Three bars from one span. They cross when the menu is open. */
  .menu-btn__icon, .menu-btn__icon::before, .menu-btn__icon::after { display: block; width: 18px; height: 3px; background: var(--ink); }
  .menu-btn__icon { position: relative; }
  .menu-btn__icon::before, .menu-btn__icon::after { content: ""; position: absolute; left: 0; }
  .menu-btn__icon::before { top: -6px; }
  .menu-btn__icon::after { top: 6px; }
  .menu-btn[aria-expanded="true"] { background: var(--ink); box-shadow: none; transform: translate(4px, 4px); }
  .menu-btn[aria-expanded="true"] .menu-btn__icon { background: transparent; }
  .menu-btn[aria-expanded="true"] .menu-btn__icon::before, .menu-btn[aria-expanded="true"] .menu-btn__icon::after { top: 0; width: 20px; left: -1px; background: var(--ground); }
  .menu-btn[aria-expanded="true"] .menu-btn__icon::before { transform: rotate(45deg); }
  .menu-btn[aria-expanded="true"] .menu-btn__icon::after { transform: rotate(-45deg); }

  .js .site-nav__links {
    display: none; position: absolute; top: calc(100% + 14px); left: 12px; right: 20px;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0;
    background: var(--panel); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--ink);
  }
  .js .site-header.is-open .site-nav__links { display: flex; }
  .js .site-nav__links > a:not(.btn) {
    display: flex; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 16px;
    background: var(--paper); border: 0; border-bottom: 2px solid var(--ink);
    font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em;
  }
  /* In the card a link does not lift; the page you are on is the orange row. */
  .js .site-nav__links > a:not(.btn):hover, .js .site-nav__links > a:not(.btn):active { box-shadow: none; transform: none; }
  .js .site-nav__links > a[aria-current="page"]:not(.btn) { background: var(--accent); }
  /* The arrow is a mask, so it takes its colour from --accent like everything else. */
  .js .site-nav__links > a:not(.btn)::after {
    content: ""; flex: none; width: 20px; height: 20px; background: var(--accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .js .site-nav__links > a[aria-current="page"]:not(.btn)::after { background: var(--ink); }
  .js .site-nav__foot { display: grid; gap: 18px; padding: 16px 22px 22px 16px; }
  .js .site-nav__foot .btn { display: flex; min-height: 50px; font-size: 16px; font-weight: 700; box-shadow: 6px 6px 0 var(--accent); transform: none; }
  /* The login sits flat under it. */
  .js .site-nav__foot .btn--line { box-shadow: none; }
  /* The page behind dims while the menu is open. A tap on it shuts the menu. */
  .js .site-header.is-open::before { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(21, 26, 23, 0.55); }
}
/* Just above that, the links and both buttons are a tight fit on one row, so
   they sit a little closer here and the header keeps its one line. */
@media (min-width: 900px) and (max-width: 979px) {
  .site-nav { gap: 8px 12px; }
  .site-nav__links > a { padding: 0 10px; }
  .site-nav > .btn--small { padding: 0 18px; }
}
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  .js .site-header.is-open .site-nav__links { animation: menu-drop 160ms ease-out; }
  .js .site-header.is-open::before { animation: menu-dim 160ms ease-out; }
}
@keyframes menu-drop { from { opacity: 0; transform: translateY(-10px); } }
@keyframes menu-dim { from { opacity: 0; } }

/* The road along the bottom of the header. script.js paves it in orange as
   the page is scrolled, with an orange square riding the edge. Scripts off,
   it stays a plain rule. */
.site-header__road { position: absolute; left: 0; right: 0; bottom: 0; height: 0; pointer-events: none; }
.site-header__paved { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }
.site-header__car { position: absolute; z-index: 3; left: 0; bottom: -9px; width: 16px; height: 16px; background: var(--accent); border: 2px solid var(--ink); opacity: 0; transition: opacity 200ms ease; will-change: transform; }

/* ------------------------------- hero ---------------------------------- */
/* The stamp lands oversized for a moment as the page opens; the clip stops that widening the page on a phone. */
.hero { padding-block: clamp(48px, 7vw, 92px); overflow-x: clip; }
.hero__inner { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.eyebrow { background: var(--ink); color: var(--ground); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; padding: 7px 12px; }
.hero__sub { max-width: 620px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--ink-2); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
/* The complaint and our answer, stuck on as one pair of stickers. */
.stickers { display: flex; flex-direction: column; align-items: flex-start; padding: 4px 0 10px 6px; }
.said {
  position: relative; max-width: 290px; transform: rotate(2.5deg);
  background: var(--paper); border: 2px solid var(--ink); padding: 14px 20px 26px;
  font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15;
}
.said::before {
  content: ""; position: absolute; left: -10px; top: 22px; width: 16px; height: 16px;
  background: var(--paper); border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg);
}
.stamp {
  position: relative; z-index: 1; margin: -16px 0 0 30px; transform: rotate(-4deg); max-width: 280px;
  background: var(--accent); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--ink);
  padding: 22px 24px; display: flex; flex-direction: column; gap: 8px;
}
.stamp__label { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; }
.stamp__text { font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -0.03em; }
/* As the page opens the highlight is drawn across and the two stickers are
   stamped on. The words themselves are there from the first paint. */
@media (prefers-reduced-motion: no-preference) {
  .hero .hl { background: linear-gradient(var(--accent), var(--accent)) 0 0 / 100% 100% no-repeat; animation: hl-draw 520ms 200ms cubic-bezier(.3, .7, .2, 1) backwards; }
  .said { animation: sticker-on 380ms 420ms cubic-bezier(.3, 1.4, .5, 1) backwards; }
  .stamp { animation: stamp-on 320ms 760ms cubic-bezier(.3, 1.3, .5, 1) backwards; }
}
@keyframes hl-draw { from { background-size: 0% 100%; } }
@keyframes sticker-on { from { opacity: 0; transform: rotate(-3deg) scale(.86); } }
@keyframes stamp-on { from { opacity: 0; transform: rotate(-11deg) scale(1.35); } }
@media (min-width: 940px) {
  .hero .h1 { max-width: calc(100% - 350px); }
  .stickers { position: absolute; right: var(--gutter); top: 8px; padding: 0; }
}

/* ------------------------------ ticker --------------------------------- */
.ticker { background: var(--ink); color: var(--ground); overflow: hidden; }
.ticker__track { display: flex; width: max-content; padding-block: 16px; animation: ticker 38s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__group {
  display: flex; align-items: center; gap: 28px; padding-right: 28px; flex-shrink: 0;
  font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; white-space: nowrap;
}
.ticker__group li { display: flex; align-items: center; gap: 28px; }
.ticker__group li::after { content: ""; width: 10px; height: 10px; background: var(--accent); }
/* The list is in the page six times and the strip slides by exactly one copy,
   so the loop has no gap and no jump on any screen width. */
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(calc(-100% / 6)); } }

/* --------------------------- section heads ----------------------------- */
/* Headings and single statements are centred. Detail inside cards reads left. */
.section__head { gap: 14px; margin-bottom: 44px; align-items: center; text-align: center; }
.section__head .h2 { max-width: 940px; }

/* ------------------------- how it usually goes ------------------------- */
.usual { margin-bottom: 48px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.usual__story { max-width: 940px; font-family: var(--serif); font-size: clamp(24px, 3vw, 36px); line-height: 1.28; color: var(--ink-2); text-wrap: balance; }
/* The underline is a drawn bar, not a text underline, so it can be drawn across as the line is scrolled to. */
.usual__story span { color: var(--ink); padding-bottom: 0.04em; background: linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 0.14em no-repeat; }

/* --------------------------- tabbed sections --------------------------- */
.tablist { display: flex; flex-wrap: wrap; gap: 10px; }
.translate .tablist, .steps .tablist { justify-content: center; }
.js [data-tabs]:not(.is-ready) [role="tabpanel"]:not(.is-default) { display: none; }
.js [role="tabpanel"]:not([hidden]) { animation: rise 280ms ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
html:not(.js) .tablist, html:not(.js) .tab-controls { display: none; }
html:not(.js) [role="tabpanel"] + [role="tabpanel"] { margin-top: 32px; }
.js .panel-title, .js .pack__meta { display: none; }
.panel-title { font-family: var(--display); font-weight: 800; font-size: 22px; margin-bottom: 12px; }

.steps { gap: 24px; }
.steps > .label { text-align: center; }
.steps .tab-controls { justify-content: center; }
.steps__more { margin-top: 28px; text-align: center; }
.step { gap: 14px; min-height: 200px; padding-top: 10px; align-items: center; text-align: center; }
.step__headline { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 4vw, 50px); line-height: 1.03; letter-spacing: -0.025em; }
@media (min-width: 900px) { .steps .tablist { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } .steps .chip { justify-content: flex-start; } }
.step__body { max-width: 620px; font-size: 18px; color: var(--ink-2); }
.step__stops { max-width: 620px; font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--ink-2); }
.tab-controls { display: flex; flex-wrap: wrap; gap: 12px; }
.tab-controls button { min-height: 46px; padding: 0 18px; border: 2px solid var(--ink); background: var(--paper); font-weight: 600; font-size: 16px; }
.tab-controls button:hover:not(:disabled) { background: var(--panel); }
.tab-controls button:disabled { opacity: 0.4; cursor: default; }
.tab-controls button.is-primary { background: var(--ink); color: var(--ground); }
.tab-controls button.is-primary:hover { background: #000000; }

/* ----------------------------- translate ------------------------------- */
.translate { background: var(--panel); border-block: 1px solid var(--rule); }
.translate .tablist { margin-bottom: 36px; }
.scenario { display: grid; gap: 32px; }
.scenario__said { gap: 12px; align-items: center; text-align: center; }
.scenario__quote { max-width: 940px; font-family: var(--serif); font-style: italic; font-size: clamp(26px, 3.6vw, 46px); line-height: 1.15; letter-spacing: -0.01em; }
@media (min-width: 820px) {
  .scenario__card .bullets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .scenario__card .bullets li { border-top: 2px solid var(--ink); padding-top: 14px; }
  .scenario__card .bullets li::before { display: none; }
}
.scenario__card { gap: 22px; font-size: 18px; }
.scenario__block { gap: 12px; }
.scenario__block + .scenario__block { border-top: 1px solid var(--rule); padding-top: 18px; }
.scenario__block p { color: var(--ink-2); }
.fit {
  background: var(--accent); border: 2px solid var(--ink); padding: 14px 18px;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px;
}
.fit__name { font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; }
.fit__meta { font-weight: 600; font-size: 17px; }

.swipe-hint { display: none; margin-bottom: 12px; font-size: 15px; font-weight: 600; color: var(--muted); }

/* --------------------------- transparency ------------------------------ */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.plain { background: var(--paper); border-bottom: 1px solid var(--rule); }
.plain__lead { max-width: 760px; font-family: var(--serif); font-size: clamp(21px, 2.2vw, 27px); line-height: 1.36; color: var(--ink-2); }
.plain__label { color: var(--muted); text-align: center; }
/* One line at a time in the centre, its neighbours fading out at each side. */
.heard__frame { margin-top: 10px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "prev track next"; align-items: center; gap: 14px; }
.heard__track {
  grid-area: track; position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; padding-block: 22px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 25%, #000 75%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 25%, #000 75%, transparent 100%);
}
.heard__track::-webkit-scrollbar { display: none; }
.heard__track::before, .heard__track::after { content: ""; flex: 0 0 22%; }
.heard__track li { position: relative; flex: 0 0 56%; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding-inline: 22px; text-align: center; }
.heard__track s { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.1vw, 26px); line-height: 1.25; color: var(--muted); text-decoration-line: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.heard__track strong { font-family: var(--display); font-weight: 800; font-size: clamp(24px, 3vw, 40px); line-height: 1.06; letter-spacing: -0.025em; text-wrap: balance; }
.heard__arrow { width: 52px; height: 52px; border: 2px solid var(--ink); background: var(--accent); color: var(--ink); font-size: 22px; line-height: 1; transition: background-color 150ms ease; }
.heard__arrow--prev { grid-area: prev; }
.heard__arrow--next { grid-area: next; }
.heard__arrow:hover { background: var(--ink); color: var(--accent); }
html:not(.js) .heard__arrow { display: none; }
@media (max-width: 700px) {
  .heard__frame { grid-template-columns: 1fr 1fr; grid-template-areas: "track track" "prev next"; gap: 6px 12px; }
  .heard__arrow--prev { justify-self: end; }
  .heard__arrow--next { justify-self: start; }
  .heard__track { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%); }
  .heard__track::before, .heard__track::after { flex-basis: 10%; }
  .heard__track li { flex-basis: 80%; padding-inline: 12px; }
}

.creep { margin-top: 64px; text-align: center; }
.creep__lead { margin: 14px auto 0; max-width: 780px; font-size: 19px; color: var(--ink-2); }
.creep .swipe-hint { margin-top: 26px; margin-bottom: 0; }
.creep .swipe-hint + .choices { margin-top: 12px; }
.choices { margin-top: 30px; padding: 0 8px 8px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.choice { border: 2px solid var(--ink); background: var(--accent); box-shadow: 8px 8px 0 var(--ink); padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.choice h4 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1.1; letter-spacing: -0.02em; }
.choice p { font-size: 17px; font-weight: 500; color: var(--ink); }
.creep__notes { margin: 30px auto 0; max-width: 820px; display: flex; flex-direction: column; gap: 12px; font-size: 17px; color: var(--ink-2); }
.creep__notes strong { color: var(--ink); font-weight: 700; }

/* ------------------------ prices on the home page ---------------------- */
.prices__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 16px; }
.price { height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border: 2px solid var(--ink); background: var(--paper); text-decoration: none; transition: background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease; }
.price:hover { background: var(--accent); box-shadow: 6px 6px 0 var(--ink); transform: translate(-2px, -2px); }
.price__amount { font-family: var(--display); font-weight: 800; font-size: clamp(34px, 3.4vw, 44px); line-height: 1; letter-spacing: -0.03em; }
.price__amount small { display: block; margin-bottom: 4px; font-family: var(--body); font-weight: 600; font-size: 15px; letter-spacing: 0; }
.price__note { font-size: 15px; font-weight: 600; }
.prices__more { margin-top: 32px; text-align: center; }
.page-head { padding-block: clamp(48px, 7vw, 88px) 0; }
.page-head .section__head { margin-bottom: 0; }
.page-head .h1 { max-width: 980px; font-size: clamp(40px, 5.6vw, 72px); }

/* ----------------------------- packages -------------------------------- */
.packs .tablist { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 16px; margin-bottom: 20px; }
.pack-tab {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: 20px 22px; border: 2px solid var(--ink); background: var(--paper);
  transition: background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.pack-tab:hover { background: var(--panel); }
.pack-tab[aria-selected="true"] { background: var(--accent); box-shadow: 6px 6px 0 var(--ink); transform: translate(-2px, -2px); }
.pack-tab__price { font-family: var(--display); font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -0.03em; }
.pack-tab__price small { font: inherit; letter-spacing: inherit; }
.pack-tab__time { font-size: 15px; font-weight: 600; }
.pack { background: var(--paper); border: 2px solid var(--ink); padding: clamp(22px, 3vw, 36px); display: grid; gap: 26px; }
.pack__intro { gap: 12px; }
.pack__fits { max-width: 760px; }
@media (min-width: 640px) { .pack__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }
@media (min-width: 1000px) { .pack__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pack__name { font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -0.02em; }
.pack__meta { font-weight: 700; font-size: 20px; }
.pack__fits { font-family: var(--serif); font-size: 26px; line-height: 1.25; }
.pack__note { font-size: 16px; color: var(--muted); }
.pack__list li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule); }
.pack__list li::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 0.5em; background: var(--accent); border: 1.5px solid var(--ink); }
.custom { margin-top: 20px; border: 2px solid var(--ink); background: var(--panel); padding: clamp(20px, 3vw, 30px); display: flex; flex-direction: column; gap: 10px; }
.custom__head { gap: 8px; }
.custom__name { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; }
.custom__name span { white-space: nowrap; }
.custom__body { max-width: 860px; font-size: 17px; color: var(--ink-2); }
.fineprint { margin: 36px auto 0; max-width: 820px; text-align: center; font-size: 16px; color: var(--muted); }
.packs__note { display: none; }
/* On a phone the three packages fold out in place. Each one becomes a slim
   row with its name, price and timeline, and its details open directly
   underneath, so all three prices stay in view and nobody scrolls past
   three boxes to find the differences. The markup is still tabs then
   panels; only the order on screen changes. Scripts off, the panels simply
   stack as before. */
@media (max-width: 760px) {
  .js .packs > .wrap { display: flex; flex-direction: column; }
  .js .packs .tablist { display: contents; }
  .js .packs .pack-tab:nth-child(1) { order: 1; }
  .js .packs .tablist + .pack { order: 2; }
  .js .packs .pack-tab:nth-child(2) { order: 3; }
  .js .packs .tablist + .pack + .pack { order: 4; }
  .js .packs .pack-tab:nth-child(3) { order: 5; }
  .js .packs .tablist + .pack + .pack + .pack { order: 6; }
  .js .packs__note { order: 7; }
  .js .packs .custom { order: 8; }
  .js .packs .fineprint { order: 9; }

  .js .pack-tab {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 3px 12px;
    min-height: 66px; margin-top: 12px; padding: 11px 14px;
  }
  .js .pack-tab:first-child { margin-top: 0; }
  .js .pack-tab:hover { background: var(--paper); }
  .js .pack-tab[aria-selected="true"] { background: var(--accent); transform: none; }
  .js .pack-tab .label { grid-area: 1 / 1; align-self: end; font-size: 13px; line-height: 1.25; }
  .js .pack-tab__time { grid-area: 2 / 1; align-self: start; font-size: 14px; line-height: 1.25; }
  .js .pack-tab__price { grid-area: 1 / 2 / 3 / 3; font-size: 25px; white-space: nowrap; }
  .js .pack-tab__price small { margin-right: 1px; font-family: var(--body); font-weight: 600; font-size: 13px; letter-spacing: 0; }
  /* The plus becomes a minus on the open row. */
  .js .pack-tab::after {
    content: ""; grid-area: 1 / 3 / 3 / 4; width: 28px; height: 28px; border: 2px solid var(--ink);
    background:
      linear-gradient(var(--ink), var(--ink)) center / 12px 2px no-repeat,
      linear-gradient(var(--ink), var(--ink)) center / 2px 12px no-repeat,
      var(--paper);
  }
  .js .pack-tab[aria-selected="true"]::after { background: linear-gradient(var(--ink), var(--ink)) center / 12px 2px no-repeat, var(--paper); }

  /* The open details share the row's bottom edge, so the two read as one box. */
  .js .packs .pack { margin-top: -2px; padding: 16px 16px 6px; gap: 12px; box-shadow: 6px 6px 0 var(--ink); }
  .js .pack__name, .js .pack__note { display: none; }
  .js .pack__fits { font-size: 20px; }
  .js .pack__list li { padding: 10px 0; font-size: 16px; line-height: 1.4; }
  .js .packs__note { display: block; margin-top: 20px; text-align: center; font-size: 15px; color: var(--muted); }
}
/* Narrow phones: the timeline drops to its own line under the name and
   price, so nothing in the row has to squeeze. */
@media (max-width: 379px) {
  .js .pack-tab .label { align-self: center; }
  .js .pack-tab__price { grid-area: 1 / 2 / 2 / 3; font-size: 23px; }
  .js .pack-tab__time { grid-area: 2 / 1 / 3 / 3; }
}

/* ------------------------------- care ---------------------------------- */
.care { border-top: 1px solid var(--rule); }
.care-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 24px; }
.care-card { background: var(--paper); border: 2px solid var(--ink); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.care-card__price { font-family: var(--display); font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -0.03em; }
.care-card__price span { font-family: var(--body); font-weight: 600; font-size: 16px; letter-spacing: 0; color: var(--muted); }
.care-card__for { font-family: var(--serif); font-size: 21px; line-height: 1.3; }
.care-card li { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 16px; color: var(--ink-2); }
.care-card li strong { color: var(--ink); font-weight: 700; }
.care-card li::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 0.5em; background: var(--accent); border: 1.5px solid var(--ink); }
/* The name and price, and the details under them, are each wrapped so a
   phone can fold the details away. On a wide screen the wrappers change
   nothing: everything sits in one column as before. */
.care-card__head, .care-card__body { display: flex; flex-direction: column; gap: 14px; }
/* script.js puts this button in each plan's heading while the plans fold.
   It looks like the heading it sits in and takes taps for the whole row. */
.fold-toggle { margin: 0; padding: 0; border: 0; background: none; letter-spacing: inherit; text-transform: inherit; text-align: left; }
.fold-toggle::after { content: ""; position: absolute; inset: 0; }
.fold-toggle:focus-visible { outline: none; }
.fold-toggle:focus-visible::after { outline: 3px solid var(--accent); outline-offset: 3px; }
/* On a phone the three plans fold out in place, the same way the packages
   do: a slim row each with the name and monthly price, and the details
   open directly underneath. Scripts off, they stay cards to swipe along. */
@media (max-width: 760px) {
  .js .care .swipe-hint { display: none; }
  .js .care-grid[data-fold] { flex-direction: column; gap: 12px; overflow: visible; padding-bottom: 0; scroll-snap-type: none; }
  .js [data-fold] > .care-card { flex: none; padding: 0; gap: 0; }
  .js [data-fold] > .care-card.is-open { box-shadow: 6px 6px 0 var(--ink); }
  .js [data-fold] .care-card__head {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 3px 12px;
    min-height: 62px; padding: 11px 14px;
  }
  .js [data-fold] .is-open > .care-card__head { background: var(--accent); border-bottom: 2px solid var(--ink); }
  .js [data-fold] .care-card__head .label { font-size: 13px; line-height: 1.25; }
  .js [data-fold] .care-card__price { font-size: 25px; white-space: nowrap; }
  .js [data-fold] .care-card__price span { font-size: 13px; color: var(--ink); }
  /* The plus becomes a minus on the open row. */
  .js [data-fold] .care-card__head::after {
    content: ""; width: 28px; height: 28px; border: 2px solid var(--ink);
    background:
      linear-gradient(var(--ink), var(--ink)) center / 12px 2px no-repeat,
      linear-gradient(var(--ink), var(--ink)) center / 2px 12px no-repeat,
      var(--paper);
  }
  .js [data-fold] .is-open > .care-card__head::after { background: linear-gradient(var(--ink), var(--ink)) center / 12px 2px no-repeat, var(--paper); }
  .js [data-fold] .care-card:not(.is-open) > .care-card__body { display: none; }
  .js [data-fold] .care-card__body { padding: 16px 16px 6px; gap: 12px; animation: rise 280ms ease both; }
  .js [data-fold] .care-card__for { font-size: 20px; line-height: 1.25; }
  .js [data-fold] .care-card li { line-height: 1.4; }
}
/* Narrow phones: the price drops under the name so "from $1,000 a month"
   has the room it needs. */
@media (max-width: 359px) {
  .js [data-fold] .care-card__head { grid-template-columns: minmax(0, 1fr) auto; }
  .js [data-fold] .care-card__head .label { grid-area: 1 / 1; }
  .js [data-fold] .care-card__price { grid-area: 2 / 1; }
  .js [data-fold] .care-card__head::after { grid-area: 1 / 2 / 3 / 3; }
}

/* ----------------------------- security -------------------------------- */
.security { background: var(--panel); border-top: 1px solid var(--rule); }
.security .section__head { margin-bottom: 28px; }
/* On the landing page the section is a short pointer to security.html. On
   security.html it carries on from the page head, with no band of its own. */
.security__more { text-align: center; }
.security--page { background: none; border-top: 0; padding-block: 28px clamp(44px, 6vw, 72px); }
.security--page .origin { margin-bottom: 0; }
.h3 { font-size: clamp(26px, 3vw, 38px); line-height: 1.05; letter-spacing: -0.02em; }
.origin { max-width: 900px; margin: 0 auto 48px; text-align: center; text-wrap: balance; font-family: var(--serif); font-size: clamp(21px, 2.3vw, 28px); line-height: 1.34; }
.sec__tabs { margin-bottom: 20px; }
@media (min-width: 1000px) { .sec__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .sec__tabs .chip { justify-content: center; text-align: center; padding: 0 10px; } }
.sec__card { display: flex; flex-direction: column; gap: 26px; }

/* The topics are laid one over another, so the card stays the height of the
   tallest and only what is inside it changes. */
.js .stage { display: grid; }
.js .stage > [role="tabpanel"] { grid-area: 1 / 1; min-width: 0; }
.js .stage > [role="tabpanel"][hidden] { display: flex !important; visibility: hidden; }

/* One layout for every topic: title, one line, a row of boxes, a second row. */
.topic, .story, .stories { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.stories, .story { flex: 1; }
.stories > .stage { flex: 1; }
.topic__lead { max-width: 780px; font-size: 18px; color: var(--ink-2); }
.flow, .boxes { flex: 1 1 auto; display: grid; gap: 34px 28px; }
.flow { counter-reset: flow; }
@media (min-width: 900px) { .flow, .boxes { grid-template-columns: repeat(4, minmax(0, 1fr)); } .box--wide { grid-column: span 2; } }
.flow li, .box { position: relative; border: 2px solid var(--ink); background: var(--ground); padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.flow li { counter-increment: flow; }
.flow li::before, .boxes--checks .box::before {
  content: counter(flow); width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--ground); font-family: var(--display); font-weight: 800; font-size: 15px;
}
.boxes--checks .box::before { content: "\2713"; }
.flow li:not(:last-child)::after { content: "\2193"; position: absolute; left: 50%; bottom: -31px; transform: translateX(-50%); font-weight: 700; font-size: 22px; line-height: 1; }
@media (min-width: 900px) { .flow li:not(:last-child)::after { content: "\2192"; left: auto; right: -25px; bottom: auto; top: 50%; transform: translateY(-50%); } }
.flow li:last-child { background: var(--ink); color: var(--ground); }
.flow li:last-child::before { background: var(--accent); color: var(--ink); }
.flow li:last-child p { color: var(--on-dark-2); }
.flow--plain li:last-child { background: var(--ground); color: inherit; }
.flow--plain li:last-child::before { background: var(--ink); color: var(--ground); }
.flow--plain li:last-child p { color: var(--ink-2); }
.flow h3, .flow h4, .box h3, .box h4 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 19px; line-height: 1.15; letter-spacing: -0.01em; }
.flow p, .box p { font-size: 16px; color: var(--ink-2); }
.box--accent { background: var(--accent); }
.box--accent p { color: var(--ink); }
.num { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.box .num { font-size: 46px; line-height: 1; }
.flow__box .num { font-size: 1.3em; letter-spacing: -0.02em; }
.box a, .flow__box a { margin-top: auto; padding-top: 4px; font-size: 14px; color: var(--muted); text-underline-offset: 4px; }
.pair { flex: 1 1 auto; display: grid; gap: 16px; }
@media (min-width: 820px) { .pair { grid-template-columns: 1fr 1fr; } }
.flow__box { border: 2px solid var(--ink); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; font-size: 17px; }
.flow__box--stop { background: var(--accent); }
.flow__box p strong { font-weight: 700; }
.security__honest { max-width: 900px; margin: 64px auto 0; text-align: center; text-wrap: balance; font-family: var(--serif); font-style: italic; font-size: clamp(24px, 3vw, 36px); line-height: 1.22; }

/* ------------------------- security page: hero ------------------------- */
/* security.html opens on the launch checklist, tilted like the stickers on
   the home page. Its ticks fill in once on arrival and the stamp lands after
   the last one. The resting state is the finished checklist, so reduced
   motion, or no animation support, shows it complete. */
.sechero { padding-block: clamp(44px, 6vw, 84px) clamp(60px, 7vw, 100px); overflow-x: clip; }
.sechero__inner { display: grid; gap: 48px; align-items: center; }
.sechero__text { gap: 24px; align-items: flex-start; }
.sechero .h1 { font-size: clamp(40px, 5.3vw, 76px); }
@media (min-width: 940px) { .sechero__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr); gap: 64px; } }
.sheet-wrap { position: relative; justify-self: center; width: min(100%, 400px); padding-bottom: 106px; }
.sheet { background: var(--paper); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.sheet--tilt { transform: rotate(1.6deg); }
.sheet__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; background: var(--ink); color: var(--ground); padding: 12px 18px; }
.sheet__head span:first-child { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.sheet__head span:last-child { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--on-dark-2); }
.ticks { padding: 6px 18px 10px; }
.ticks li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 2px 14px; padding: 10px 0; border-top: 1px solid var(--rule); font-family: var(--display); font-weight: 800; font-size: 19px; line-height: 1.15; letter-spacing: -0.01em; }
.ticks li:first-child { border-top: 0; }
.ticks li::before {
  content: "\2713"; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--ground); border: 2px solid var(--ink); font-family: var(--display); font-weight: 800; font-size: 15px; line-height: 1;
}
/* The full version further down the page: each line carries what it means. */
.ticks--full li { align-items: start; padding: 12px 0; }
.ticks--full li::before { grid-row: span 2; }
.ticks--full strong { font-weight: 800; }
.ticks--full span { grid-column: 2; font-family: var(--body); font-weight: 400; font-size: 16px; line-height: 1.45; letter-spacing: 0; color: var(--ink-2); }
.ticks--full .is-key { margin: 0 -18px -10px; padding-inline: 18px; background: var(--accent); border-top: 2px solid var(--ink); }
.ticks--full .is-key span { color: var(--ink); }
.sheet-wrap .stamp { position: absolute; right: -18px; bottom: 0; margin: 0; max-width: 250px; padding: 14px 18px 16px; gap: 6px; box-shadow: 6px 6px 0 var(--ink); }
.sheet-wrap .stamp__text { font-size: 28px; }
@media (prefers-reduced-motion: no-preference) {
  .ticks--live li::before { animation: tick-in 260ms ease both; }
  .ticks--live li:nth-child(1)::before { animation-delay: 500ms; }
  .ticks--live li:nth-child(2)::before { animation-delay: 720ms; }
  .ticks--live li:nth-child(3)::before { animation-delay: 940ms; }
  .ticks--live li:nth-child(4)::before { animation-delay: 1160ms; }
  .ticks--live li:nth-child(5)::before { animation-delay: 1380ms; }
  .ticks--live li:nth-child(6)::before { animation-delay: 1600ms; }
  .ticks--live li:nth-child(7)::before { animation-delay: 1820ms; }
  .sheet-wrap .stamp { animation: stamp-in 380ms cubic-bezier(.34, 1.56, .64, 1) 2250ms both; }
}
@keyframes tick-in { from { background: var(--paper); color: transparent; transform: scale(.82); } to { background: var(--ink); color: var(--ground); transform: none; } }
@keyframes stamp-in { from { opacity: 0; transform: rotate(-13deg) scale(1.5); } to { opacity: 1; transform: rotate(-4deg) scale(1); } }

/* Where the practice comes from: one dark band, and the question it leaves
   us asking picked out in orange. */
.origin-band { background: var(--ink); color: var(--ground); padding-block: clamp(48px, 6vw, 84px); }
.origin-band .origin { max-width: 1000px; margin: 0 auto; }
.origin-band .hl { color: var(--ink); }

/* ------------------------------ approach ------------------------------- */
/* security.html. Six things we do on every job, numbered down one line in
   the order they happen. From 900px each has its words on the left and the
   thing itself on the right. Nothing folds away. script.js fills each number
   in as it comes up the window; without it they are all filled. */
.habits { display: flex; flex-direction: column; gap: 72px; }
.habit { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 28px; align-items: start; }
/* The line from each number down to the next. */
.habit:not(:last-child)::before { content: ""; position: absolute; left: 27px; top: 56px; bottom: -72px; width: 2px; background: var(--ink); }
.habit__n {
  position: relative; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  background: var(--accent); border: 2px solid var(--ink);
  font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1;
}
.js .habits.is-live .habit:not(.is-on) .habit__n { background: var(--paper); transform: scale(.78); }
@media (prefers-reduced-motion: no-preference) { .js .habits.is-live .habit__n { transition: background-color 160ms ease, transform 340ms cubic-bezier(.34, 1.56, .64, 1); } }
.habit__main { min-width: 0; display: grid; gap: 24px 56px; align-items: start; }
@media (min-width: 900px) { .habit__main { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); } }
.habit__text { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding-top: 2px; }
.habit__prop { min-width: 0; }
.habit__when { align-self: flex-start; background: var(--ink); color: var(--ground); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 10px; }
.habit__body { font-size: 18px; color: var(--ink-2); }
.habit__says { font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.3; color: var(--ink-2); }
.approach .security__honest { margin-top: 88px; }

/* 1. The list from a scope. */
.paper { background: var(--paper); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); padding: 18px 22px 8px; }
.paper--tilt-l { transform: rotate(-1.2deg); }
.paper__tag { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--muted); padding-bottom: 12px; }
.holds li { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 13px 0; border-top: 1px solid var(--rule); }
.holds strong { font-family: var(--display); font-weight: 800; font-size: 19px; line-height: 1.15; letter-spacing: -0.01em; }
.holds span { background: var(--accent); border: 2px solid var(--ink); padding: 3px 9px; font-size: 14px; font-weight: 600; }
/* 2. What we will not do, struck out, and what we do instead. */
.swaps { display: flex; flex-direction: column; gap: 26px; }
.swaps li { display: flex; flex-direction: column; gap: 5px; }
.swaps s { font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.25; color: var(--muted); text-decoration-line: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.swaps strong { font-family: var(--display); font-weight: 800; font-size: clamp(23px, 2.4vw, 30px); line-height: 1.06; letter-spacing: -0.02em; }
.swaps span { font-size: 17px; color: var(--ink-2); }
/* 3. The path one change takes. */
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 10px; }
.chain li { display: inline-flex; align-items: center; gap: 10px; }
.chain span { border: 2px solid var(--ink); background: var(--paper); padding: 10px 14px; font-weight: 700; font-size: 16px; line-height: 1.2; }
.chain li:not(:last-child)::after { content: "\2192"; font-weight: 700; font-size: 20px; line-height: 1; }
.chain li:last-child span { background: var(--ink); color: var(--ground); }
.chain__note { margin-top: 18px; background: var(--accent); border: 2px solid var(--ink); padding: 14px 18px; font-size: 17px; }
/* 6. The three things care keeps up. */
.trio { display: grid; gap: 12px; }
@media (min-width: 560px) { .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.trio li { display: flex; flex-direction: column; gap: 8px; border: 2px solid var(--ink); background: var(--paper); padding: 16px; }
.trio strong { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.1; letter-spacing: -0.02em; }
.trio span { font-size: 15px; color: var(--ink-2); }

/* Why we work this way: the grey band, so the cases after it sit on the page ground. */
.why { background: var(--panel); border-block: 1px solid var(--rule); }
@media (min-width: 1000px) { .sec__tabs--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------- case record ------------------------------ */
/* security.html. Ten real cases. The figures sit on a wall of tiles, and
   picking one opens that case in the card below. The tiles are tabs, so the
   keyboard and the Back and Next buttons work as they do in the other
   click-through sections. On a phone the tiles become one row to slide along. */
.record .section__head { margin-bottom: 28px; }
.wall__hint { margin-bottom: 20px; text-align: center; }
html:not(.js) .wall__hint { display: none; }
.wall__tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-bottom: 32px; }
.tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  min-height: 164px; padding: 14px 16px 16px; text-align: left;
  border: 2px solid var(--ink); background: var(--paper);
  transition: background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.tile:hover { background: var(--ground); }
.tile[aria-selected="true"] { background: var(--accent); box-shadow: 6px 6px 0 var(--ink); transform: translate(-2px, -2px); }
.tile__year { background: var(--ink); color: var(--ground); font-family: var(--display); font-weight: 800; font-size: 14px; line-height: 1; padding: 6px 8px; }
.tile__num { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 2.6vw, 32px); line-height: 1; letter-spacing: -0.03em; }
.tile__cap { font-family: var(--serif); font-size: 18px; line-height: 1.2; }
.tile__name { margin-top: auto; padding-top: 4px; font-size: 14px; font-weight: 700; }
.wall__card { display: flex; flex-direction: column; gap: 26px; }
.case { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 28px 40px; }
.case__story { flex: 1.3 1 460px; min-width: 0; gap: 14px; }
.case__side { flex: 1 1 320px; min-width: 0; gap: 16px; }
.case__way { align-self: flex-start; background: var(--ink); color: var(--ground); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 10px; }
.case__name { font-family: var(--display); font-weight: 800; font-size: clamp(32px, 3.6vw, 44px); line-height: 1.02; letter-spacing: -0.02em; }
.case__meta { margin-top: -6px; font-size: 16px; font-weight: 600; color: var(--muted); }
.case__body { font-size: 18px; color: var(--ink-2); }
.case__figure { display: flex; flex-direction: column; gap: 4px; }
.case__figure .num { font-size: clamp(50px, 6vw, 72px); line-height: 0.95; }
.case__figure span { font-family: var(--serif); font-size: clamp(21px, 2.2vw, 25px); line-height: 1.2; }
.case__source { font-size: 14px; color: var(--muted); }
.case__source a { text-underline-offset: 4px; }
@media (max-width: 899px) {
  .wall__tiles { position: relative; display: flex; flex-wrap: nowrap; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; padding: 4px 8px 16px 4px; margin-inline: -4px; margin-bottom: 20px; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; }
  .tile { flex: 0 0 168px; min-height: 150px; scroll-snap-align: start; }
  /* The card is as tall as the open case here, not as tall as the longest. */
  .js .wall .stage { display: block; }
  .js .wall .stage > [role="tabpanel"][hidden] { display: none !important; }
}

/* ----------------------------- answers --------------------------------- */
/* The same pair as the hero stickers: a white speech bubble for the question,
   an orange block for the reply. */
.answers { background: var(--ink); color: var(--ground); overflow-x: clip; }
.answers .section__head { margin-bottom: 36px; }
.answers__promise { max-width: 640px; font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.3; color: var(--on-dark-2); }
.chat { max-width: 880px; margin-inline: auto; display: flex; flex-direction: column; }
/* Every exchange starts at the top of the same fixed space, so the question
   and the reply always appear in the same place and the buttons below stay put. */
.exchange { display: flex; flex-direction: column; justify-content: flex-start; gap: 26px; padding-bottom: 12px; }
.msg { max-width: 84%; display: flex; flex-direction: column; gap: 8px; }
.msg__who { font-size: 15px; font-weight: 600; color: var(--on-dark-2); }
.msg--you { align-self: flex-end; align-items: flex-end; }
.msg--you .msg__text { position: relative; background: var(--paper); color: var(--ink); padding: 14px 22px 16px; font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; }
.msg--you .msg__text::after { content: ""; position: absolute; right: 28px; bottom: -8px; width: 18px; height: 18px; background: var(--paper); transform: rotate(45deg); }
.msg--us { align-self: flex-start; }
.msg--us .msg__text { background: var(--accent); color: var(--ink); box-shadow: 8px 8px 0 var(--ground); padding: 20px 24px 22px; font-size: 19px; font-weight: 500; line-height: 1.5; }
.js .exchange:not([hidden]) .msg--us { animation: rise 320ms 160ms ease both; }
.chat__prompt { margin-top: 40px; margin-bottom: 14px; text-align: center; font-size: 15px; font-weight: 600; color: var(--on-dark-2); }
.chat__asks { justify-content: center; }
.chat__asks .chip { color: var(--ink); border-color: var(--paper); }
.chat__asks .chip[aria-selected="true"] { border-color: var(--accent); }
html:not(.js) .chat__prompt { display: none; }
@media (max-width: 640px) { .chat__asks .chip { width: 100%; justify-content: center; text-align: center; padding-block: 10px; } .msg { max-width: 94%; } .msg--us .msg__text { font-size: 18px; padding: 18px 20px 20px; } }

/* ------------------------------- who ----------------------------------- */
.people { max-width: 820px; margin-inline: auto; border-bottom: 2px solid var(--ink); }
.person { border-top: 2px solid var(--ink); padding: 26px 0 30px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.person h3 { display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--display); font-weight: 800; font-size: clamp(30px, 3.6vw, 44px); line-height: 1; letter-spacing: -0.025em; }
.person h3 span { font-family: var(--body); font-weight: 600; font-size: 17px; letter-spacing: 0; color: var(--muted); }
.person p { max-width: 680px; font-size: 18px; color: var(--ink-2); }

/* ------------------------------ the road ------------------------------- */
/* how-it-happens.html. A paved strip with eight stops and seven gates. On a
   phone it runs down the left edge; from 900px it runs down the middle and
   the stops alternate sides. */
.road-section { padding-block: clamp(48px, 6vw, 72px) var(--section); overflow-x: clip; }
.road { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 40px; }
.road > * { position: relative; z-index: 1; }
.road > .road__track, .road > .road__paved, .road > .road__car { position: absolute; z-index: 0; left: 28px; }
.road__track, .road__paved { top: 0; bottom: 0; width: 28px; transform: translateX(-50%); }
.road__track { background: var(--panel); border-inline: 2px solid var(--rule); }
.road__paved { overflow: hidden; }
.road__fill { position: absolute; inset: 0; background: var(--ink); overflow: hidden; }
.road__dash { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background: repeating-linear-gradient(to bottom, var(--ground) 0 20px, transparent 20px 44px); }
/* The traveller: the square from the wordmark, riding the paved edge. Only
   the script shows it. */
.road__car { top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; background: var(--accent); border: 2px solid var(--ink); box-shadow: 0 0 0 3px var(--ground); opacity: 0; }

.sign {
  align-self: flex-start; max-width: 100%;
  background: var(--ink); color: var(--ground);
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 9px 14px;
}

.leg {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; row-gap: 16px;
  grid-template-areas: "m card" ". note"; align-items: start;
}
.leg .marker { grid-area: m; }
.leg .stop { grid-area: card; }
.leg .aside { grid-area: note; }
.leg--pair { grid-template-areas: "m3 c3" "m4 c4"; row-gap: 40px; }
.leg--pair .marker--a { grid-area: m3; }
.leg--pair .marker--b { grid-area: m4; }
.leg--pair .stop--a { grid-area: c3; }
.leg--pair .stop--b { grid-area: c4; }

.marker {
  position: relative; justify-self: center; margin-top: 30px;
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  background: var(--accent); border: 2px solid var(--ink);
  font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1;
}
.marker::before { content: ""; position: absolute; top: 50%; left: 100%; width: 20px; height: 2px; background: var(--ink); }

.stop { gap: 18px; }
.stop__head { gap: 8px; }
.stop__name { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 3vw, 38px); line-height: 1.05; letter-spacing: -0.02em; }
.stop__body { font-size: 18px; color: var(--ink-2); }
.stop__block { gap: 12px; border-top: 1px solid var(--rule); padding-top: 16px; }
.stop__says, .aside__says { font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.3; color: var(--ink-2); }
.aside { gap: 10px; }
.aside__text { font-family: var(--serif); font-size: clamp(22px, 2.3vw, 28px); line-height: 1.25; }

.gate {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px;
  background: repeating-linear-gradient(-45deg, var(--ink) 0 10px, var(--accent) 10px 20px) left / 56px 100% no-repeat, var(--accent);
  border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  padding: 14px 18px 14px 76px;
}
.gate__name { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; }
.gate__rule { flex: 1 1 300px; font-weight: 600; font-size: 18px; line-height: 1.35; }
.gate__who { background: var(--ink); color: var(--ground); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 9px; }
.gate__tick { flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: var(--ground); font-family: var(--display); font-weight: 800; font-size: 15px; }
.gate__tick::before { content: "\2713"; }

/* The cue to scroll. The page opens with the road waiting at stop 1, and
   script.js shows this until the road moves on. It sits just under stop 1;
   while that is still below the bottom of the window it pins itself there
   instead, so it is in view on any screen. It takes up no room in the road. */
.road > .road-cue { position: sticky; bottom: 64px; z-index: 3; height: 0; margin-top: -40px; display: flex; justify-content: center; align-items: flex-start; }
.road-cue__chip {
  flex: none; position: relative; top: 4px;
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px;
  background: var(--accent); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; visibility: hidden;
  transition: opacity 250ms ease, visibility 0s linear 250ms, transform 150ms ease, box-shadow 150ms ease;
}
.road-cue.is-shown .road-cue__chip { opacity: 1; visibility: visible; transition: opacity 250ms ease, transform 150ms ease, box-shadow 150ms ease; }
.road-cue__chip:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.road-cue__arrow { display: inline-block; animation: road-cue-bob 1.1s ease-in-out infinite; }
.road-cue__arrow::before { content: "\2193"; font-family: var(--display); font-weight: 800; font-size: 18px; line-height: 1; letter-spacing: 0; }
@keyframes road-cue-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }

@media (min-width: 900px) {
  .road > .road__track, .road > .road__paved, .road > .road__car { left: 50%; }
  .road__track, .road__paved { width: 44px; }
  .road__dash { width: 4px; margin-left: -2px; }
  .sign { align-self: center; }
  .gate { align-self: center; width: 100%; max-width: 860px; }

  .leg { grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr); column-gap: 0; row-gap: 0; grid-template-areas: "l m r"; }
  .leg--L .stop { grid-area: l; }
  .leg--L .aside { grid-area: r; }
  .leg--R .stop { grid-area: r; }
  .leg--R .aside { grid-area: l; text-align: right; align-items: flex-end; }
  .leg .aside { align-self: center; padding-inline: 12px; }
  .leg--pair { grid-template-areas: "c3 m3 c4" "c3 m4 c4"; grid-template-rows: auto 1fr; }
  .leg--pair .marker--b { margin-top: 20px; }

  .marker::before { width: 28px; }
  .leg--L .marker::before, .marker--a::before { left: auto; right: 100%; }
}

/* The road in motion. script.js ties it to the scroll position and writes the
   in-between states itself; these rules are the two ends of each change.
   Until the script takes over, the road waits unpaved so it never flashes
   complete on load. With scripts off or reduced motion asked for, none of
   this applies and the page simply shows complete. If the script never
   arrives, the stops fade in on their own after four seconds. */
@media (prefers-reduced-motion: no-preference) {
  .js .road:not(.is-static) .road__fill,
  .js .road:not(.is-static) .road__dash,
  .js .road:not(.is-static) .road__car { will-change: transform; }
  .js .road:not(.is-static) .road__car { transition: opacity 200ms ease; }

  .js .road:not(.is-static) .marker { transition: background-color 160ms ease, transform 340ms cubic-bezier(.34, 1.56, .64, 1); }
  .js .road:not(.is-static) .marker::before { transition: opacity 160ms ease; }
  .js .road:not(.is-static) .leg:not(.is-on) .marker { background-color: var(--paper); transform: scale(.72); }
  .js .road:not(.is-static) .leg:not(.is-on) .marker::before { opacity: 0; }

  .js .road:not(.is-static) .gate { transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
  .js .road:not(.is-static) .gate:not(.is-on) { background-color: var(--paper); box-shadow: 0 0 0 var(--ink); transform: translate(6px, 6px); }
  .js .road:not(.is-static) .gate__tick { transition: opacity 140ms ease 60ms, transform 320ms cubic-bezier(.34, 1.56, .64, 1) 60ms; }
  .js .road:not(.is-static) .gate:not(.is-on) .gate__tick { opacity: 0; transform: scale(.3); }

  .js .road:not(.is-static):not(.is-live) .road__fill { transform: translateY(-100%); animation: road-late-paving 400ms 4s forwards; }
  .js .road:not(.is-static):not(.is-live) .stop,
  .js .road:not(.is-static):not(.is-live) .aside,
  .js .road:not(.is-static):not(.is-live) .gate,
  .js .road:not(.is-static):not(.is-live) .sign:not(.sign--start) { opacity: 0; animation: road-late 400ms 4s forwards; }
}
@keyframes road-late { to { opacity: 1; } }
@keyframes road-late-paving { to { transform: none; } }

/* ----------------------------- contact --------------------------------- */
.contact { background: var(--accent); border-block: 2px solid var(--ink); }
.contact :focus-visible { outline-color: var(--ink); }
.contact__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 30px; padding-block: clamp(56px, 7vw, 92px); }
.contact__text { gap: 14px; align-items: center; }
.contact .h2 { max-width: 900px; }
.contact__text p { max-width: 580px; font-size: 19px; font-weight: 500; }
.contact .btn { min-height: 64px; padding: 0 34px; font-size: 19px; }

.site-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 26px; font-size: 15px; color: var(--muted); }
.site-footer a { text-underline-offset: 4px; }

/* ----------------------------- back to top ----------------------------- */
/* A button that rides in the bottom corner. script.js brings it out once the
   page is a window down and puts it away while the footer is on screen, since
   the footer has its own link in the same corner. Without scripts it stays
   away and that link does the job. It sits under the header, so the phone
   menu and its dimmed backdrop cover it. The pale edge only shows where it
   crosses a dark or orange band. */
.to-top {
  position: fixed; z-index: 20;
  right: calc(24px + env(safe-area-inset-right, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display: none; align-items: center; gap: 9px; min-height: 48px; padding: 0 16px;
  background: var(--ink); color: var(--ground); border: 2px solid var(--ground); box-shadow: 5px 5px 0 var(--accent);
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  opacity: 0; visibility: hidden;
  transition: opacity 250ms ease, visibility 0s linear 250ms, transform 150ms ease, box-shadow 150ms ease;
}
.js .to-top { display: inline-flex; }
.to-top.is-shown { opacity: 1; visibility: visible; transition: opacity 250ms ease, transform 150ms ease, box-shadow 150ms ease; }
.to-top:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--accent); }
.to-top__arrow::before { content: "\2191"; font-family: var(--display); font-weight: 800; font-size: 18px; line-height: 1; letter-spacing: 0; }
@media print { .to-top { display: none !important; } }

/* ------------------------- rendering on scroll ------------------------- */
/* Anything marked data-reveal, and each child of anything marked
   data-reveal-children, renders as the page is scrolled to it. script.js
   writes one number per piece, --r, from 0 (waiting) to 1 (arrived), and the
   rules below turn that number into the movement. A piece that has arrived
   gets .is-in and none of this touches it again, so it never un-renders.
   The rules are !important so they also hold over the tab panels' own
   entrance while a piece is arriving.
   Scripts off, reduced motion asked for, or printing: none of this applies
   and the page shows complete. If the script never arrives, everything
   fades in on its own after four seconds. */
@property --r { syntax: "<number>"; inherits: false; initial-value: 1; }
@media screen and (prefers-reduced-motion: no-preference) {
  .js [data-reveal]:not(.is-in),
  .js [data-reveal-children] > :not(.is-in) {
    --r: 0;
    opacity: calc(var(--r) * 1.5) !important;
    transform: translate(0, calc((1 - var(--r)) * 30px)) !important;
    transition: none !important;
  }
  /* Boxes with a hard shadow lift off the page as they arrive. */
  .js [data-reveal="pop"]:not(.is-in),
  .js [data-reveal-children="pop"] > :not(.is-in) {
    --pop: 8px;   /* the size of the box's own shadow */
    transform: translate(calc((1 - var(--r)) * var(--pop)), calc((1 - var(--r)) * 34px)) !important;
    box-shadow: calc(var(--r) * var(--pop)) calc(var(--r) * var(--pop)) 0 var(--ink) !important;
  }
  .js [data-reveal="left"]:not(.is-in) { transform: translate(calc((var(--r) - 1) * 26px), 0) !important; }
  .js [data-reveal="right"]:not(.is-in) { transform: translate(calc((1 - var(--r)) * 26px), 0) !important; }
  /* A marked phrase inside a piece: its underline is drawn across, left to right. */
  .js [data-reveal="underline"]:not(.is-in) { opacity: 1 !important; transform: none !important; background-size: calc(var(--r) * 100%) 0.14em; }

  .js:not(.reveal-live) [data-reveal]:not(.is-in),
  .js:not(.reveal-live) [data-reveal-children] > :not(.is-in) { animation: reveal-late 500ms 4s both !important; }
}
@keyframes reveal-late { from { --r: 0; } to { --r: 1; } }
/* On a phone the boxes carry a smaller shadow, and a row that slides sideways
   fades in where it stands: moving its boxes would make the row scroll up
   and down as well. */
@media screen and (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .js [data-reveal="pop"]:not(.is-in),
  .js [data-reveal-children="pop"] > :not(.is-in) { --pop: 5px; }
  .js .choices[data-reveal-children] > :not(.is-in) { transform: none !important; }
}

/* ---------------- phone: stacks of cards become sideways rails ---------- */
@media (max-width: 899px) {
  .flow, .boxes { display: flex; gap: 34px; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; padding-bottom: 14px; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; }
  .boxes { gap: 16px; }
  .flow li, .box { flex: 0 0 min(76%, 300px); scroll-snap-align: start; }
  /* The seven checks read as a list on a phone, not a row to swipe. */
  .boxes--checks { flex-direction: column; gap: 10px; overflow: visible; padding-bottom: 0; }
  .boxes--checks .box { flex: 1 1 auto; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 12px; padding: 14px; }
  .boxes--checks .box::before { grid-row: span 2; }
  .flow li:not(:last-child)::after { content: "\2192"; left: auto; right: -27px; bottom: auto; top: 50%; transform: translateY(-50%); }
  /* The topic and story buttons run in one line you can slide along. */
  .sec__tabs, .stories__tabs { position: relative; flex-wrap: nowrap; overflow-x: auto; padding: 4px 4px 12px; margin-inline: -4px; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; }
  .sec__tabs .chip, .stories__tabs .chip { flex: none; white-space: nowrap; }
}
@media (max-width: 760px) {
  .swipe-hint { display: block; }
  .care-grid, .choices { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; padding-bottom: 14px; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; }
  .care-grid > *, .choices > * { flex: 0 0 84%; scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ticker__track { width: auto; flex-wrap: wrap; padding-inline: var(--gutter); }
  .ticker__group { flex-wrap: wrap; white-space: normal; }
  .ticker__group[aria-hidden="true"] { display: none; }
}

/* ======================= phone: one smaller type scale ====================
   Everything above is sized for a wide screen and only eased down a little
   on a phone, which left a phone reading loud: 42px headings, 18 to 19px
   paragraphs, 60px buttons. From 760px down, this block swaps in one smaller
   scale and tightens the spacing to match. Nothing is hidden or reordered;
   only sizes and gaps change. It sits last so it wins without touching the
   rules above. To tune the phone look, change it here.

     display   34 home title / 30 page titles / 27 section headings and prices
               23 card titles / 21 prices in rows / 19 small titles / 16 box titles
     serif     20 statements / 18 quotes and lead-ins / 16 asides
     body      16 lead / 15 text / 14 detail / 13 notes
     labels    12 caps / 11 tags
   ========================================================================== */
@media (max-width: 760px) {
  :root { --section: 44px; }
  body { font-size: 15px; }

  /* ---- shared type ---- */
  .h1 { font-size: 34px; }
  .h2 { font-size: 27px; line-height: 1.05; }
  .h3 { font-size: 23px; }
  .page-head .h1 { font-size: 30px; line-height: 1.04; }
  .page-head .h1 .hl { display: block; width: fit-content; margin-inline: auto; } /* the highlighted phrase takes its own line */
  .lead { font-size: 16px; }
  .label { font-size: 12px; letter-spacing: 0.1em; }
  .eyebrow, .sign, .stamp__label { font-size: 11px; letter-spacing: 0.12em; }
  .eyebrow { padding: 6px 10px; }
  .swipe-hint { font-size: 13px; margin-bottom: 10px; }

  /* ---- buttons and chips ---- */
  .btn { min-height: 48px; padding: 0 22px; font-size: 15px; }
  .btn--lift { box-shadow: 4px 4px 0 var(--accent); }
  .btn--lift:hover { box-shadow: 5px 5px 0 var(--accent); }
  .btn--small { min-height: 42px; padding: 0 14px; font-size: 14px; }
  .contact .btn { min-height: 50px; padding: 0 26px; font-size: 16px; }
  .text-link { min-height: 44px; font-size: 15px; text-decoration-thickness: 1.5px; }
  .chip { min-height: 42px; padding: 0 12px; gap: 8px; font-size: 14px; }
  .tablist { gap: 8px; }
  .tab-controls { gap: 10px; }
  .tab-controls button { min-height: 42px; padding: 0 16px; font-size: 14px; }
  .card { padding: 18px; box-shadow: 5px 5px 0 var(--ink); }
  .bullets { gap: 8px; }
  .bullets li { gap: 10px; }
  .bullets li::before, .pack__list li::before, .care-card li::before { width: 8px; height: 8px; margin-top: 0.55em; }

  /* ---- header and hero ---- */
  .site-header__inner { padding-block: 13px; gap: 8px 10px; }
  .hero { padding-block: 32px 36px; }
  .hero__inner { gap: 20px; }
  .hero__sub { font-size: 16px; }
  .hero__actions { gap: 10px 20px; }
  .stickers { padding: 2px 0 6px 6px; }
  .said { max-width: 264px; padding: 9px 16px 19px; font-size: 18px; }
  .said::before { top: 16px; width: 14px; height: 14px; left: -9px; }
  .stamp { margin: -12px 0 0 24px; max-width: 226px; padding: 15px 17px 16px; gap: 6px; box-shadow: 5px 5px 0 var(--ink); }
  .stamp__text { font-size: 23px; }

  /* ---- ticker ---- */
  .ticker__track { padding-block: 10px; }
  .ticker__group { gap: 18px; padding-right: 18px; font-size: 14px; }
  .ticker__group li { gap: 18px; }
  .ticker__group li::after { width: 7px; height: 7px; }

  /* ---- section heads and the five steps ---- */
  .section__head { gap: 10px; margin-bottom: 26px; }
  .section__head[style] { margin-bottom: 26px !important; } /* two heads carry their own gap in the page */
  .security .section__head { margin-bottom: 22px; }
  .answers .section__head { margin-bottom: 26px; }
  .usual { margin-bottom: 32px; gap: 10px; }
  .usual__story { font-size: 20px; line-height: 1.3; }
  .panel-title { font-size: 19px; }
  .steps { gap: 18px; }
  .steps__more { margin-top: 18px; }
  .step { gap: 10px; min-height: 170px; padding-top: 6px; }
  .step__headline { font-size: 23px; line-height: 1.06; text-wrap: balance; }
  .step__body { font-size: 15px; }
  .step__stops { font-size: 16px; }

  /* ---- tell us what you want ---- */
  .translate .tablist { margin-bottom: 24px; }
  .scenario { gap: 22px; }
  .scenario__said { gap: 8px; }
  .scenario__quote { font-size: 20px; line-height: 1.22; }
  .scenario__card { gap: 16px; font-size: 15px; }
  .scenario__block { gap: 10px; }
  .scenario__block + .scenario__block { padding-top: 14px; }
  .fit { padding: 11px 14px; gap: 2px 18px; }
  .fit__name { font-size: 19px; }
  .fit__meta { font-size: 14px; }

  /* ---- no overpromising ---- */
  .plain__lead { font-size: 18px; line-height: 1.38; }
  .heard__frame { margin-top: 4px; }
  .heard__track { padding-block: 16px; }
  .heard__track li { gap: 10px; }
  .heard__track s { font-size: 16px; }
  .heard__track strong { font-size: 21px; }
  .heard__arrow { width: 42px; height: 42px; font-size: 17px; }
  .creep { margin-top: 44px; }
  .creep__lead { margin-top: 10px; font-size: 15px; }
  .creep .swipe-hint { margin-top: 20px; }
  .creep .swipe-hint + .choices { margin-top: 10px; }
  .choices { gap: 12px; padding: 0 5px 12px 0; }
  .choice { padding: 16px 16px 18px; gap: 6px; box-shadow: 5px 5px 0 var(--ink); }
  .choice h4 { font-size: 19px; }
  .choice p { font-size: 14px; }
  .creep__notes { margin-top: 22px; gap: 10px; font-size: 14px; }

  /* ---- prices on the home page ---- */
  .prices__row { gap: 10px; }
  .price { padding: 13px 16px 14px; gap: 3px; }
  .price__amount { font-size: 27px; }
  .price__amount small { margin-bottom: 2px; font-size: 13px; }
  .price__note { font-size: 13px; }
  .prices__more { margin-top: 22px; }
  .page-head { padding-top: 32px; }
  .fineprint { margin-top: 24px; font-size: 13px; }

  /* ---- packages (pricing page) ---- */
  .js .pack-tab { min-height: 56px; margin-top: 10px; padding: 9px 12px; gap: 2px 10px; }
  .js .pack-tab .label { font-size: 12px; }
  .js .pack-tab__time { font-size: 13px; }
  .js .pack-tab__price { font-size: 21px; }
  .js .pack-tab__price small { font-size: 12px; }
  .js .pack-tab::after, .js [data-fold] .care-card__head::after {
    width: 24px; height: 24px;
    background:
      linear-gradient(var(--ink), var(--ink)) center / 10px 2px no-repeat,
      linear-gradient(var(--ink), var(--ink)) center / 2px 10px no-repeat,
      var(--paper);
  }
  .js .pack-tab[aria-selected="true"]::after, .js [data-fold] .is-open > .care-card__head::after { background: linear-gradient(var(--ink), var(--ink)) center / 10px 2px no-repeat, var(--paper); }
  .js .packs .pack { padding: 14px 14px 4px; gap: 10px; box-shadow: 5px 5px 0 var(--ink); }
  .js .pack__fits, .pack__fits { font-size: 18px; }
  .js .pack__list li, .pack__list li { padding: 8px 0; gap: 10px; font-size: 14px; }
  .js .packs__note { margin-top: 16px; font-size: 13px; }
  .pack__name { font-size: 23px; }
  .pack__meta { font-size: 16px; }
  .pack__note { font-size: 13px; }
  .custom { margin-top: 16px; padding: 16px; gap: 8px; }
  .custom__name { font-size: 21px; }
  .custom__body { font-size: 14px; }

  /* ---- care plans ---- */
  .care-grid { gap: 12px; }
  .care-card { padding: 18px; gap: 10px; }
  .care-card__price { font-size: 27px; }
  .care-card__price span { font-size: 13px; }
  .care-card__for { font-size: 18px; }
  .care-card li { padding: 8px 0; gap: 10px; font-size: 14px; }
  .js .care-grid[data-fold] { gap: 10px; }
  .js [data-fold] > .care-card.is-open { box-shadow: 5px 5px 0 var(--ink); }
  .js [data-fold] .care-card__head { min-height: 54px; padding: 9px 12px; gap: 2px 10px; }
  .js [data-fold] .care-card__head .label { font-size: 12px; }
  .js [data-fold] .care-card__price { font-size: 21px; }
  .js [data-fold] .care-card__price span { font-size: 12px; }
  .js [data-fold] .care-card__body { padding: 14px 14px 4px; gap: 10px; }
  .js [data-fold] .care-card__for { font-size: 18px; }

  /* ---- security ---- */
  .origin { margin-bottom: 30px; font-size: 18px; line-height: 1.36; }
  .sec__tabs { margin-bottom: 14px; }
  .sec__card { gap: 18px; }
  .topic, .story, .stories { gap: 14px; }
  .topic__lead { font-size: 15px; }
  .flow { gap: 30px; }
  .boxes { gap: 12px; }
  .flow li, .box { padding: 14px; gap: 6px; }
  .flow li::before, .boxes--checks .box::before { width: 24px; height: 24px; font-size: 13px; }
  .flow li:not(:last-child)::after { right: -24px; font-size: 18px; }
  .flow h3, .flow h4, .box h3, .box h4 { font-size: 16px; }
  .flow p, .box p { font-size: 14px; }
  .box .num { font-size: 27px; }
  .box a, .flow__box a { font-size: 12px; }
  .boxes--checks { gap: 8px; }
  .boxes--checks .box { grid-template-columns: 24px minmax(0, 1fr); gap: 3px 10px; padding: 12px; }
  .pair { gap: 12px; }
  .flow__box { padding: 12px 14px; gap: 4px; font-size: 14px; }
  .security__honest { margin-top: 40px; font-size: 20px; line-height: 1.26; }

  /* ---- security: hero and approach ---- */
  .sechero { padding-block: 30px 44px; }
  .sechero__inner { gap: 32px; }
  .sechero__text { gap: 18px; }
  .sechero .h1 { font-size: 32px; line-height: 1.04; }
  .sheet-wrap { padding-bottom: 84px; }
  .sheet { box-shadow: 5px 5px 0 var(--ink); }
  .sheet--tilt { transform: rotate(1deg); }
  .sheet__head { padding: 10px 14px; }
  .sheet__head span:first-child { font-size: 11px; letter-spacing: 0.12em; }
  .sheet__head span:last-child { font-size: 15px; }
  .ticks { padding: 4px 14px 8px; }
  .ticks li { grid-template-columns: 24px minmax(0, 1fr); gap: 2px 12px; padding: 8px 0; font-size: 16px; }
  .ticks li::before { width: 24px; height: 24px; font-size: 13px; }
  .ticks--full li { padding: 10px 0; }
  .ticks--full span { font-size: 14px; }
  .ticks--full .is-key { margin: 0 -14px -8px; padding-inline: 14px; }
  .sheet-wrap .stamp { right: -4px; max-width: 210px; padding: 11px 14px 12px; box-shadow: 5px 5px 0 var(--ink); }
  .sheet-wrap .stamp__text { font-size: 22px; }
  .origin-band { padding-block: 36px; }
  .origin-band .origin { margin-bottom: 0; }
  .habits { gap: 40px; }
  .habit { grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; }
  .habit:not(:last-child)::before { left: 20px; top: 42px; bottom: -40px; }
  .habit__n { width: 42px; height: 42px; font-size: 19px; }
  .habit__main { gap: 16px; }
  .habit__text { gap: 9px; padding-top: 0; }
  .habit__when { font-size: 11px; letter-spacing: 0.12em; padding: 5px 8px; }
  .habit__body { font-size: 15px; }
  .habit__says { font-size: 16px; }
  .approach .security__honest { margin-top: 48px; }
  .paper { padding: 14px 16px 6px; box-shadow: 5px 5px 0 var(--ink); }
  .paper__tag { font-size: 16px; padding-bottom: 8px; }
  .holds li { padding: 10px 0; }
  .holds strong { font-size: 16px; }
  .holds span { font-size: 13px; }
  .swaps { gap: 18px; }
  .swaps s { font-size: 16px; }
  .swaps strong { font-size: 21px; }
  .swaps span { font-size: 15px; }
  .chain { gap: 8px; }
  .chain li { gap: 8px; }
  .chain span { padding: 8px 11px; font-size: 14px; }
  .chain li:not(:last-child)::after { font-size: 17px; }
  .chain__note { margin-top: 14px; padding: 12px 14px; font-size: 15px; }
  .trio { gap: 8px; }
  .trio li { padding: 12px 14px; gap: 4px; }
  .trio strong { font-size: 19px; }
  .trio span { font-size: 14px; }

  /* ---- security: the ten cases ---- */
  .record .section__head { margin-bottom: 22px; }
  .wall__hint { margin-bottom: 14px; }
  .wall__tiles { gap: 10px; margin-bottom: 16px; }
  .tile { flex-basis: 148px; min-height: 126px; padding: 11px 12px 12px; gap: 6px; }
  .tile[aria-selected="true"] { box-shadow: 5px 5px 0 var(--ink); }
  .tile__year { font-size: 12px; padding: 5px 7px; }
  .tile__num { font-size: 23px; }
  .tile__cap { font-size: 16px; }
  .tile__name { font-size: 13px; }
  .wall__card { gap: 18px; }
  .case { gap: 18px; }
  .case__story { gap: 10px; }
  .case__side { gap: 12px; }
  .case__way { font-size: 11px; letter-spacing: 0.12em; padding: 5px 8px; }
  .case__name { font-size: 27px; }
  .case__meta { margin-top: -4px; font-size: 14px; }
  .case__body { font-size: 15px; }
  .case__figure .num { font-size: 40px; }
  .case__figure span { font-size: 18px; }
  .case__source { font-size: 12px; }

  /* ---- straight answers ---- */
  .answers__promise { font-size: 18px; }
  .exchange { gap: 18px; padding-bottom: 8px; }
  .msg { gap: 6px; }
  .msg__who { font-size: 13px; }
  .msg--you .msg__text { padding: 10px 16px 12px; font-size: 18px; }
  .msg--you .msg__text::after { right: 22px; bottom: -6px; width: 14px; height: 14px; }
  .msg--us .msg__text { padding: 14px 16px 16px; font-size: 15px; box-shadow: 5px 5px 0 var(--ground); }
  .chat__prompt { margin-top: 28px; margin-bottom: 10px; font-size: 13px; }
  .chat__asks .chip { padding-block: 8px; }

  /* ---- who ---- */
  .person { padding: 20px 0 22px; gap: 8px; }
  .person h3 { gap: 5px; font-size: 23px; }
  .person h3 span { font-size: 14px; }
  .person p { font-size: 15px; }

  /* ---- the road (how it happens) ----
     The strip, the numbered markers and the gate stripes all narrow together,
     so the road still runs through the middle of each marker. */
  .road-section { padding-top: 36px; }
  .road { gap: 30px; }
  .road > .road__track, .road > .road__paved, .road > .road__car { left: 21px; }
  .road__track, .road__paved { width: 22px; }
  .road__dash { background: repeating-linear-gradient(to bottom, var(--ground) 0 16px, transparent 16px 36px); }
  .road__car { width: 20px; height: 20px; margin: -10px 0 0 -10px; }
  .sign { padding: 7px 11px; }
  .leg { grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; row-gap: 12px; }
  .leg--pair { row-gap: 30px; }
  .marker { width: 42px; height: 42px; margin-top: 22px; font-size: 19px; }
  .marker::before { width: 16px; }
  .stop { gap: 14px; }
  .stop__head { gap: 6px; }
  .stop__name { font-size: 23px; }
  .stop__body { font-size: 15px; }
  .stop__block { gap: 10px; padding-top: 13px; }
  .stop__says, .aside__says { font-size: 16px; }
  .aside { gap: 7px; }
  .aside__text { font-size: 18px; }
  .gate { gap: 5px 14px; padding: 11px 14px 12px 54px; background-size: 40px 100%, auto; box-shadow: 4px 4px 0 var(--ink); }
  .gate__name { font-size: 19px; }
  .gate__rule { flex-basis: 100%; font-size: 14px; }
  .gate__who { font-size: 11px; letter-spacing: 0.12em; padding: 4px 8px; }
  .gate__tick { width: 24px; height: 24px; font-size: 12px; }
  .road > .road-cue { margin-top: -30px; }
  .road-cue__chip { min-height: 40px; padding: 0 14px; gap: 8px; font-size: 11px; letter-spacing: 0.12em; box-shadow: 4px 4px 0 var(--ink); }
  .road-cue__arrow::before { font-size: 15px; }

  /* ---- contact and footer ---- */
  .contact__inner { gap: 22px; padding-block: 44px; }
  .contact__text { gap: 10px; }
  .contact__text p { font-size: 16px; }
  .site-footer__inner { gap: 8px; padding-block: 20px; font-size: 13px; }

  /* ---- back to top: just the arrow ---- */
  .to-top { right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 44px; min-height: 44px; padding: 0; justify-content: center; box-shadow: 4px 4px 0 var(--accent); }
  .to-top:hover { box-shadow: 5px 5px 0 var(--accent); }
  .to-top__text { display: none; }
}