/* AllHourDesk — corporate site styles (Night Log / 4A)
   Structure layer on top of brand/tokens.css. The single-page export this
   grew out of carried every rule inline; across eight pages that stops
   being maintainable, so the design is expressed as classes here instead.
   Visual language is unchanged — same rail grid, same type, same palette. */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Archivo:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
@import url('brand/tokens.css');

* { box-sizing: border-box; }

/* Section backgrounds run edge to edge; content stays in a centred 1280px
   column by padding each band with --g (0 below 1280px wide). */
:root { --ahd-max: 1280px; --g: max(0px, calc((100vw - var(--ahd-max)) / 2)); }

body {
  margin: 0;
  background: var(--ahd-bone);
  font-family: var(--ahd-font-ui);
  color: var(--ahd-ink);
}

a { color: var(--ahd-oxblood); text-decoration: none; }
a:hover { color: var(--ahd-oxblood-deep); text-decoration: underline; }

/* The 6px ink top border is part of the layout, not decoration — brand kit. */
.page {
  width: 100%;
  background: var(--ahd-bone);
  overflow: hidden;
  border-top: 6px solid var(--ahd-ink);
}

/* ── nav ─────────────────────────────────────────────────────────── */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px calc(var(--g) + var(--ahd-pad-x));
  border-bottom: 1px solid var(--ahd-ink);
  flex-wrap: wrap;
}
.nav-brand { display: flex; align-items: center; gap: 10px; color: var(--ahd-ink); }
.nav-brand:hover { text-decoration: none; }
.nav-brand svg { color: var(--ahd-oxblood); flex: none; }
.nav-wordmark { font-family: var(--ahd-font-display); font-size: 26px; letter-spacing: 0; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-family: var(--ahd-font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.nav-links a { color: var(--ahd-ink); }
.nav-links a:hover { color: var(--ahd-oxblood); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--ahd-oxblood); }
/* .nav-links a outranks .btn-primary on specificity, which left the nav's
   demo button as dark text on oxblood — restate the button colours here. */
.nav-links a.btn-primary,
.nav-links a.btn-primary:hover { color: var(--ahd-bone); }

/* ── buttons ─────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  font-family: var(--ahd-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 14px 24px;
  border-radius: var(--ahd-radius);
}
.btn:hover { text-decoration: none; }
.btn-sm { padding: 9px 16px; font-size: 11.5px; }
.btn-primary { background: var(--ahd-oxblood); color: var(--ahd-bone); }
.btn-primary:hover { background: var(--ahd-oxblood-deep); color: var(--ahd-bone); }
.btn-on-dark { background: var(--ahd-bone); color: var(--ahd-oxblood); }
.btn-on-dark:hover { background: #fff; color: var(--ahd-oxblood-deep); }
.btn-ghost-dark { border: 1px solid rgba(247,244,239,.5); color: var(--ahd-bone); font-weight: 400; }
.btn-ghost-dark:hover { border-color: var(--ahd-bone); color: var(--ahd-bone); }

/* ── rail sections ───────────────────────────────────────────────── */

.rail-row {
  display: grid;
  grid-template-columns: var(--ahd-rail) 1fr;
  padding-inline: var(--g);
  border-bottom: 1px solid var(--ahd-ink);
}
.rail-row.alt { background: var(--ahd-bone-2); }
.rail-row.no-rule { border-bottom: 0; }
.rail {
  border-right: 1px solid var(--ahd-ink);
  padding: var(--ahd-pad-y) 0 0;
  text-align: center;
  font-family: var(--ahd-font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--ahd-ink-45);
}
.rail-body { padding: var(--ahd-pad-y) var(--ahd-pad-x) 64px; min-width: 0; }

h1, h2, h3 { font-weight: 400; margin: 0; }
h1 { font: var(--ahd-h1); letter-spacing: 0; text-wrap: balance; }
h2 { font: var(--ahd-h2); letter-spacing: .005em; text-wrap: balance; }
h3 { font: var(--ahd-h3); }

.lede { font-size: 18px; line-height: 1.6; color: var(--ahd-ink-70); max-width: 620px; }
p { font: var(--ahd-body); color: var(--ahd-ink-70); text-wrap: pretty; }
.small { font: var(--ahd-small); color: var(--ahd-ink-70); }

.label {
  font-family: var(--ahd-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ahd-oxblood);
}
.meta {
  font-family: var(--ahd-font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ahd-ink-45);
}

/* ── hero ────────────────────────────────────────────────────────── */

.hero { background: var(--ahd-oxblood); color: var(--ahd-bone); display: grid; grid-template-columns: var(--ahd-rail) 1fr; padding-inline: var(--g); }
.hero-rail {
  border-right: 1px solid rgba(247,244,239,.25);
  padding: 40px 0;
  display: flex; flex-direction: column; align-items: center; gap: 26px;
  font-family: var(--ahd-font-mono); font-size: 10.5px; letter-spacing: .1em;
  color: rgba(247,244,239,.6);
}
.hero-rail .now { color: var(--ahd-bone); border: 1px solid rgba(247,244,239,.5); padding: 3px 6px; }
.hero-body { padding: 96px var(--ahd-pad-x) 92px; }
.hero-body h1 { margin: 20px 0 0; max-width: 840px; }
.hero-kicker { font-family: var(--ahd-font-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(247,244,239,.7); }
.hero-body p { color: rgba(247,244,239,.82); max-width: 560px; margin: 26px 0 0; font-size: 18px; }
.hero-actions { display: flex; gap: 14px; margin-top: 38px; flex-wrap: wrap; }

/* page header for interior pages */
.page-head { background: var(--ahd-oxblood); color: var(--ahd-bone); padding: 84px calc(var(--g) + var(--ahd-pad-x)) 80px; }
.page-head h1 { font-size: 64px; max-width: 860px; margin: 16px 0 0; }
.page-head p { color: rgba(247,244,239,.82); max-width: 640px; margin: 22px 0 0; font-size: 17px; }
.page-head .hero-kicker { color: rgba(247,244,239,.7); }

/* ── log strip ───────────────────────────────────────────────────── */

.logstrip { border-bottom: 1px solid var(--ahd-ink); background: var(--ahd-bone-2); }
.logstrip-inner { display: grid; grid-template-columns: var(--ahd-rail) 1fr; padding-inline: var(--g); }
.logstrip-rail { border-right: 1px solid var(--ahd-ink); }
.logstrip-lines {
  padding: 26px var(--ahd-pad-x);
  font-family: var(--ahd-font-mono); font-size: 12.5px; line-height: 1.5;
  color: var(--ahd-ink-70);
  display: flex; flex-direction: column; gap: 8px;
}
.logstrip-lines .t { color: var(--ahd-oxblood); }

/* ── grids & cards ───────────────────────────────────────────────── */

.cols-3, .cols-2 { display: grid; gap: 0; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 > * + *, .cols-2 > * + * { border-left: 1px solid var(--ahd-rule); }
.cols-3 > *, .cols-2 > * { padding: 0 32px; }
.cols-3 > *:first-child, .cols-2 > *:first-child { padding-left: 0; }
.cols-3 > *:last-child, .cols-2 > *:last-child { padding-right: 0; }
.cols-3 p, .cols-2 p { font-size: 15px; line-height: 1.65; margin: 14px 0 0; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 48px; }
.grid-2 p { font-size: 14.5px; margin: 8px 0 0; }

.card { border: 1px solid var(--ahd-rule); padding: 28px; }
.card h3 { margin-bottom: 10px; }
.card p { font-size: 15px; line-height: 1.65; }

/* definition rows (integrations table) */
.rows { display: flex; flex-direction: column; }
.row {
  display: grid; grid-template-columns: 96px 1fr; gap: 24px;
  padding: 18px 0; border-top: 1px solid var(--ahd-rule);
}
.row:first-child { border-top: 1px solid var(--ahd-ink); }
.row:last-child { border-bottom: 1px solid var(--ahd-ink); }
.row .k { font-family: var(--ahd-font-mono); font-size: 12px; color: var(--ahd-oxblood); letter-spacing: .06em; }
.row .v { font-size: 15px; line-height: 1.6; color: var(--ahd-ink-70); }

/* numbered steps */
.steps { counter-reset: step; display: flex; flex-direction: column; gap: 0; }
.step { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 22px 0; border-top: 1px solid var(--ahd-rule); }
.step:first-child { border-top: 1px solid var(--ahd-ink); }
.step:last-child { border-bottom: 1px solid var(--ahd-ink); }
.step-n { font-family: var(--ahd-font-mono); font-size: 12px; color: var(--ahd-oxblood); letter-spacing: .06em; padding-top: 3px; }
.step h3 { font-size: 20px; margin-bottom: 6px; }
.step p { font-size: 15px; line-height: 1.65; margin: 0; }

/* notice / disclosure block */
.notice {
  border-left: 3px solid var(--ahd-oxblood);
  background: var(--ahd-bone-2);
  padding: 18px 22px;
  margin: 26px 0 0;
}
.notice p { font-size: 14.5px; margin: 0; }
.notice .label { display: block; margin-bottom: 8px; }

/* ── CTA band + footer ───────────────────────────────────────────── */

.cta {
  background: var(--ahd-ink); color: var(--ahd-bone);
  padding: 84px calc(var(--g) + var(--ahd-pad-x));
  display: flex; justify-content: space-between; align-items: center;
  gap: 30px; flex-wrap: wrap;
}
.cta h2 { font-size: 52px; max-width: 760px; }
.cta .meta { color: rgba(247,244,239,.6); margin: 14px 0 0; display: block; }

.footer { background: var(--ahd-bone); padding: 52px calc(var(--g) + var(--ahd-pad-x)) 26px; border-top: 1px solid var(--ahd-ink); }
.footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 32px; }
.footer-cols h4 {
  font-family: var(--ahd-font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ahd-ink-45);
  margin: 0 0 14px;
}
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.footer-cols a { font-size: 14px; color: var(--ahd-ink-70); }
.footer-cols a:hover { color: var(--ahd-oxblood); }
.footer-blurb { font-size: 14px; line-height: 1.6; color: var(--ahd-ink-70); max-width: 320px; margin: 12px 0 0; }
.footer-bar {
  border-top: 1px solid var(--ahd-rule);
  padding-top: 20px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-family: var(--ahd-font-mono); font-size: 11px; letter-spacing: .06em; color: var(--ahd-ink-45);
}
.footer-bar a { color: var(--ahd-ink-45); }

/* ── long-form legal pages ───────────────────────────────────────── */

.prose { max-width: 720px; }
.prose h2 { font-size: 30px; margin: 44px 0 14px; }
.prose h3 { font-size: 19px; font-family: var(--ahd-font-ui); font-weight: 700; margin: 26px 0 8px; }
.prose p, .prose li { font-size: 15.5px; line-height: 1.7; color: var(--ahd-ink-70); }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 7px; }
.prose table { border-collapse: collapse; width: 100%; margin: 18px 0; }
.prose th, .prose td {
  text-align: left; padding: 11px 12px; font-size: 14.5px;
  border-bottom: 1px solid var(--ahd-rule); vertical-align: top; color: var(--ahd-ink-70);
}
.prose th { font-family: var(--ahd-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ahd-ink); }

/* ── multilingual greeting band ──────────────────────────────────── */
/* Oxblood field, so per the brand kit the accent here is clay, not oxblood. */

.greetings { background: var(--ahd-oxblood); color: var(--ahd-bone); padding: 80px calc(var(--g) + var(--ahd-pad-x)) 64px; }
.greetings-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 60px; flex-wrap: wrap; margin-bottom: 48px; }
.greetings-head .hero-kicker { color: rgba(247,244,239,.7); }
.greetings-head p { color: rgba(247,244,239,.82); font-size: 15px; max-width: 420px; margin: 0; }
.greetings-split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.greetings-split svg { display: block; width: 100%; height: auto; }
.greeting-wall { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 28px 40px; }
.greeting { display: block; }
.greeting .lang {
  display: block;
  font-family: var(--ahd-font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(247,244,239,.55); margin-bottom: 4px;
}
.greeting .word { font-family: var(--ahd-font-display); line-height: 1; letter-spacing: 0; }
.greeting .word.xl { font-size: 60px; }
.greeting .word.lg { font-size: 48px; }
.greeting .word.md { font-size: 40px; }
.greeting.accent .word { color: var(--ahd-clay); }
.greeting.accent .lang { color: var(--ahd-clay); }
.greetings-foot {
  margin-top: 40px; padding-top: 22px;
  border-top: 1px solid rgba(247,244,239,.25);
  font-family: var(--ahd-font-mono); font-size: 11.5px; letter-spacing: .06em;
  color: rgba(247,244,239,.7);
}

/* Below this the list column gets too narrow to sit beside a landscape photo. */
@media (max-width: 1100px) {
  .greetings-split { grid-template-columns: minmax(0, 1fr); gap: 44px; }
}

@media (max-width: 900px) {
  .greetings { padding: 48px 24px 40px; }
  .greetings-split { grid-template-columns: 1fr; gap: 34px; }
  .greeting-wall { gap: 20px 28px; }
  .greeting .word.xl { font-size: 38px; }
  .greeting .word.lg { font-size: 31px; }
  .greeting .word.md { font-size: 26px; }
}

/* ── photography ─────────────────────────────────────────────────── */
/* Photos sit under an oxblood wash rather than replacing the brand colour:
   the text side stays near-solid oxblood for legibility, the photo shows
   through towards the opposite edge. All images are Pexels-licensed. */

.hero.has-photo {
  background:
    linear-gradient(90deg, rgba(91,26,30,.96) 0%, rgba(91,26,30,.86) 48%, rgba(36,16,18,.42) 100%),
    url('img/night-reception.jpg') 62% 42% / cover no-repeat,
    var(--ahd-oxblood);
}
.page-head.has-photo { background-repeat: no-repeat; background-size: cover; }
/* This photo is very dark to begin with, so it can't take a full-width wash:
   it's shown large and anchored right, with the oxblood fading out only over
   its left edge, so the lit windows stay visible. */
.page-head.photo-windows {
  background-color: var(--ahd-oxblood);
  background-image:
    linear-gradient(90deg, rgba(91,26,30,1) 0%, rgba(91,26,30,1) 58%, rgba(91,26,30,.25) 82%, rgba(91,26,30,0) 100%),
    url('img/night-windows.jpg');
  background-size: 100% 100%, auto 175%;
  background-position: 0 0, 100% 42%;
}
.page-head.photo-corridor {
  background-image:
    linear-gradient(90deg, rgba(91,26,30,.97) 0%, rgba(91,26,30,.88) 52%, rgba(36,16,18,.40) 100%),
    url('img/night-corridor.jpg');
  background-position: 0 0, 100% 50%;
}

/* Landscape photos whose subject sits mid-frame: drawn smaller than cover and
   anchored right, so the subject lands clear of the headline, with solid
   oxblood behind the text column. */
.page-head.photo-phone, .page-head.photo-doors, .page-head.photo-bell {
  background-color: var(--ahd-oxblood);
  background-repeat: no-repeat;
  background-size: 100% 100%, auto 150%;
}
.page-head.photo-phone {
  background-image:
    linear-gradient(90deg, rgba(91,26,30,1) 0%, rgba(91,26,30,1) 44%, rgba(91,26,30,.55) 62%, rgba(36,16,18,.1) 100%),
    url('img/hotel-phone.jpg');
  background-position: 0 0, 100% 45%;
}
.page-head.photo-doors {
  background-image:
    linear-gradient(90deg, rgba(91,26,30,1) 0%, rgba(91,26,30,1) 55%, rgba(91,26,30,.45) 70%, rgba(36,16,18,0) 100%),
    url('img/red-doors.jpg');
  background-position: 0 0, 118% 50%;
}
.page-head.photo-bell {
  background-image:
    linear-gradient(90deg, rgba(91,26,30,1) 0%, rgba(91,26,30,1) 52%, rgba(91,26,30,.45) 68%, rgba(36,16,18,.05) 100%),
    url('img/reception-bell.jpg');
  background-size: 100% 100%, cover;
  background-position: 0 0, 50% 55%;
}

/* receptionist photo with the greetings overlaid as live text */
.greet-photo { position: relative; aspect-ratio: 10 / 7; overflow: hidden; border: 1px solid rgba(247,244,239,.25); }
.greet-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bubble {
  position: absolute;
  background: #241012; color: var(--ahd-bone);
  border: 1px solid rgba(247,244,239,.55); border-radius: 10px;
  padding: 8px 16px 10px;
  font-family: var(--ahd-font-display); font-size: 30px; line-height: 1;
  box-shadow: 0 10px 28px rgba(36,16,18,.35);
}
.bubble .lang {
  display: block; margin-bottom: 5px;
  font-family: var(--ahd-font-mono); font-size: 9.5px; letter-spacing: .14em;
  color: rgba(247,244,239,.6);
}
.bubble::after {
  content: ""; position: absolute; bottom: -9px; width: 16px; height: 16px;
  background: #241012;
  border-right: 1px solid rgba(247,244,239,.55); border-bottom: 1px solid rgba(247,244,239,.55);
}
.bubble.b1 { top: 6%;  left: 20%; }
.bubble.b1::after { right: 22px; transform: rotate(45deg); }
.bubble.b2 { top: 4%; right: 7%; color: var(--ahd-clay); }
.bubble.b2 .lang { color: rgba(217,160,138,.8); }
.bubble.b2::after { left: 22px; transform: rotate(45deg); }
.bubble.b3 { top: 27%; left: 9%; }
.bubble.b3::after { right: 22px; transform: rotate(45deg); }

/* image + text split band on light pages */
.photo-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-bottom: 1px solid var(--ahd-ink); }
.photo-split .photo { position: relative; min-height: 460px; background: #1A1614; }
.photo-split .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-split .text { padding: 64px calc(var(--g) + var(--ahd-pad-x)) 64px 64px; display: flex; flex-direction: column; justify-content: center; background: var(--ahd-ink); color: var(--ahd-bone); }
.photo-split .text .hero-kicker { color: rgba(247,244,239,.6); }
.photo-split .text h2 { color: var(--ahd-bone); margin: 14px 0 16px; }
.photo-split .text p { color: rgba(247,244,239,.8); margin: 0; max-width: 460px; }


@media (max-width: 900px) {
  .hero.has-photo { background: linear-gradient(180deg, rgba(91,26,30,.9), rgba(91,26,30,.94)), url('img/night-reception.jpg') 60% 40% / cover no-repeat, var(--ahd-oxblood); }
  .page-head.photo-windows,
  .page-head.photo-corridor {
    background-image: linear-gradient(rgba(91,26,30,.9), rgba(91,26,30,.92)), url('img/night-corridor.jpg');
    background-size: 100% 100%, cover;
    background-position: 0 0, 50% 50%;
  }
  .page-head.photo-windows { background-image: linear-gradient(rgba(91,26,30,.86), rgba(91,26,30,.9)), url('img/night-windows.jpg'); }
  .page-head.photo-phone, .page-head.photo-doors, .page-head.photo-bell { background-size: 100% 100%, cover; background-position: 0 0, 50% 50%; }
  .page-head.photo-phone { background-image: linear-gradient(rgba(91,26,30,.88), rgba(91,26,30,.92)), url('img/hotel-phone.jpg'); }
  .page-head.photo-doors { background-image: linear-gradient(rgba(91,26,30,.86), rgba(91,26,30,.9)), url('img/red-doors.jpg'); }
  .page-head.photo-bell  { background-image: linear-gradient(rgba(91,26,30,.88), rgba(91,26,30,.92)), url('img/reception-bell.jpg'); }
  .photo-split { grid-template-columns: 1fr; }
  .photo-split .photo { min-height: 300px; }
  .photo-split .text { padding: 36px 24px; }
  .bubble { font-size: 17px; padding: 5px 10px 7px; border-radius: 8px; }
  .bubble .lang { font-size: 7.5px; letter-spacing: .1em; margin-bottom: 3px; }
  .bubble::after { width: 11px; height: 11px; bottom: -6px; }
  .bubble.b1 { top: 4%; left: 14%; }
  .bubble.b2 { top: 3%; right: 4%; }
  .bubble.b3 { top: 30%; left: 3%; }
}

/* ── figures & diagrams ──────────────────────────────────────────── */

.figure { margin: 30px 0 0; }
.figure svg { display: block; width: 100%; max-width: 920px; height: auto; }
.figure figcaption {
  font-family: var(--ahd-font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  letter-spacing: .03em;
  color: var(--ahd-ink-45);
  margin-top: 14px;
  max-width: 680px;
}
.figure-band { background: var(--ahd-bone-2); padding: 48px calc(var(--g) + var(--ahd-pad-x)); border-bottom: 1px solid var(--ahd-ink); }
.figure-band .figure { margin: 0; }

/* diagram type — set once, inherited by every <text> in the drawings */
.dg { font-family: var(--ahd-font-ui); }
.dg-box { fill: var(--ahd-bone); stroke: var(--ahd-ink); stroke-width: 1.2; }
.dg-box-accent { fill: #F3E7E6; stroke: var(--ahd-oxblood); stroke-width: 1.4; }
.dg-t { fill: var(--ahd-ink); font-size: 15px; }
.dg-t-sm { fill: var(--ahd-ink-70); font-size: 12.5px; }
.dg-lbl { font-family: var(--ahd-font-mono); font-size: 11px; letter-spacing: .08em; fill: var(--ahd-ink-45); }
.dg-lbl-ox { font-family: var(--ahd-font-mono); font-size: 11px; letter-spacing: .08em; fill: var(--ahd-oxblood); }
.dg-line { stroke: var(--ahd-ink); stroke-width: 1.2; fill: none; }
.dg-line-ox { stroke: var(--ahd-oxblood); stroke-width: 1.6; fill: none; }
.dg-dash { stroke: var(--ahd-ink-45); stroke-width: 1; stroke-dasharray: 4 4; fill: none; }


/* ── responsive ──────────────────────────────────────────────────── */

@media (max-width: 900px) {
  :root { --ahd-pad-x: 24px; --ahd-pad-y: 40px; }
  .rail-row, .hero, .logstrip-inner { grid-template-columns: minmax(0, 1fr); }
  .rail, .hero-rail, .logstrip-rail { display: none; }
  .rail-body { padding: 40px 24px 44px; }
  h1 { font-size: 46px; }
  .page-head h1 { font-size: 38px; }
  h2, .cta h2 { font-size: 32px; }
  .hero-body { padding: 44px 24px 40px; }
  .hero-body h1 { font-size: 46px; }
  .cols-3, .cols-2, .grid-2, .footer-cols { grid-template-columns: 1fr; gap: 28px; }
  .cols-3 > *, .cols-2 > * { padding: 0; border-left: 0; }
  .cols-3 > * + *, .cols-2 > * + * { border-top: 1px solid var(--ahd-rule); padding-top: 24px; }
  /* two rows: brand + demo button, then a sideways-scrolling link row */
  .nav { position: relative; padding: 16px 24px 0; row-gap: 14px; }
  .nav-links {
    width: calc(100% + 48px); margin: 0 -24px; padding: 13px 24px;
    flex-wrap: nowrap; overflow-x: auto; gap: 24px; font-size: 11px;
    white-space: nowrap; border-top: 1px solid var(--ahd-rule); scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links .btn { position: absolute; top: 14px; right: 24px; padding: 8px 12px; font-size: 10.5px; }
  .nav-wordmark { font-size: 23px; }
  /* diagrams keep a legible size and scroll sideways instead of shrinking */
  .figure { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .figure { max-width: 100%; }
  .figure svg { min-width: 700px; }
  /* the homepage timeline reads better scaled to fit than scrolled */
  .figure.fit svg { min-width: 0; }
  .figure.fit .dg-lbl, .figure.fit .dg-lbl-ox { font-size: 21px; letter-spacing: .04em; }
  .figure.fit .dg-t { font-size: 28px; }
  .figure-band { padding: 32px 24px; }
  .page-head { padding: 52px 24px 48px; }
  .photo-split .text { padding: 40px 24px; }
  .cta { padding: 48px 24px; }
  .footer { padding: 36px 24px 20px; }
  .step, .row { grid-template-columns: 1fr; gap: 6px; }
}