/* =========================================================
   Wasla — restaurant ordering platform, sales page
   One stylesheet for the Arabic (RTL) and English (LTR) pages.
   Written in logical properties throughout, so the Arabic page
   is the layout rather than a mirror of one.
   ========================================================= */

/* ---------- 1. tokens ---------- */
:root {
  /* dark ground, the default */
  --ground:      #17110F;
  --ground-deep: #0E0A09;
  --surface:     #221A17;
  --line:        #3A2C28;
  --line-strong: #7A605B;
  --text:        #F5F2F1;
  --muted:       #B3A8A4;
  --red:         #C0271F;
  --red-lift:    #F0534A;
  --alarm:       #E8A020;

  --font-display: "Cairo", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-text:    "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;

  /* spacing, ~1.4 ratio, finer at the small end */
  --s1: 6px;  --s2: 10px; --s3: 14px; --s4: 20px; --s5: 28px;
  --s6: 40px; --s7: 56px; --s8: 76px; --s9: 104px; --s10: 140px;

  --gutter: clamp(1.25rem, 5vw, 3rem);
  --w-text: 62ch;
  --w-main: 68rem;
  --w-wide: 84rem;

  /* radius is per object type, not global */
  --r-device: 40px;
  --r-screen: 32px;
  --r-button: 6px;
  --r-panel:  0;

  /* box-shadow and transform have no logical form */
  --flip: 1;
}
[dir="rtl"] { --flip: -1; }

.band-light {
  --ground:      #F2F1F0;
  --ground-deep: #FFFFFF;
  --surface:     #FFFFFF;
  --line:        #DCD7D5;
  --line-strong: #8C8380;
  --text:        #1A1310;
  --muted:       #5C5350;
  --red-lift:    #C0271F;
  background: var(--ground);
  color: var(--text);
}
.band-red {
  --ground: var(--red);
  --text: #FFFFFF;
  --muted: rgb(255 255 255 / .82);
  --line: rgb(255 255 255 / .26);
  --line-strong: rgb(255 255 255 / .55);
  background: var(--red);
  color: #FFFFFF;
}

/* ---------- 2. reset ---------- */
*, *::before, *::after { box-sizing: border-box; letter-spacing: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-text);
  font-size: clamp(1.0625rem, 1.03rem + 0.16vw, 1.125rem);
  line-height: 1.8;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;   /* clip, not hidden, so position:sticky still works */
}
img, svg { display: block; max-inline-size: 100%; }
table { max-inline-size: 100%; }
img { block-size: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--line-strong); outline-offset: 3px; }
::selection { background: var(--red); color: #fff; }

.tabular { font-variant-numeric: tabular-nums; }
.lat { direction: ltr; unicode-bidi: isolate; }

/* ---------- 3. containers and rhythm ---------- */
.wrap       { inline-size: min(var(--w-main), 100% - var(--gutter) * 2); margin-inline: auto; }
.wrap--text { inline-size: min(var(--w-text), 100% - var(--gutter) * 2); margin-inline: auto; }
.wrap--wide { inline-size: min(var(--w-wide), 100% - var(--gutter) * 2); margin-inline: auto; }

section { position: relative; }

.r-tight  { padding-block: var(--s6) var(--s7); }
.r-normal { padding-block: var(--s7) var(--s8); }
.r-loose  { padding-block: var(--s8) var(--s9); }
.r-flush  { padding-block: var(--s7) 0; }
@media (min-width: 900px) {
  .r-tight  { padding-block: var(--s7) var(--s8); }
  .r-normal { padding-block: var(--s8) var(--s9); }
  .r-loose  { padding-block: var(--s9) var(--s10); }
  .r-flush  { padding-block: var(--s8) 0; }
}

.grid { display: grid; grid-template-columns: 1fr; gap: var(--s5); }
@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(12, 1fr); gap: var(--s5) var(--s4); align-items: center; }
  /* column spans, desktop only. on phone every block is one column. */
  .c-1-5 { grid-column: 1 / span 5; }
  .c-1-6 { grid-column: 1 / span 6; }
  .c-7-6 { grid-column: 7 / span 6; }
}

/* ---------- 4. type ---------- */
h1, .t-hero {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.25rem, 1.55rem + 3vw, 4rem); line-height: 1.22;
  text-wrap: balance;
}
h2, .t-sec {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem); line-height: 1.28;
  text-wrap: balance;
}
h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.6; }
.lede {
  font-size: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  line-height: 1.65; color: var(--muted); text-wrap: pretty;
}
p { text-wrap: pretty; }
.small { font-size: clamp(0.9375rem, 0.92rem + 0.1vw, 1rem); line-height: 1.7; }
.muted { color: var(--muted); }
.eyebrow {
  font-size: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  line-height: 1.4; font-weight: 600; color: var(--muted);
  margin-block-end: var(--s3);
}
.measure { max-inline-size: 58ch; }

/* one word carrying a solid red block. a print device, survives line wrap */
.mark {
  background: var(--red); color: #FFF;
  padding: .02em .18em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- 5. buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s5);
  border-radius: var(--r-button);
  background: var(--red); color: #FFF;
  font-weight: 600; font-size: 1.0625rem; line-height: 1.2;
  transition: background-color 120ms linear, transform 90ms linear;
}
.btn:hover { background: #D22C22; }
.btn:active { transform: translateY(1px); }
.btn svg { inline-size: 19px; block-size: 19px; flex: none; }
.btn--invert { background: #FFF; color: var(--red); }
.btn--invert:hover { background: #F2F1F0; }
.btn--sm { padding: var(--s2) var(--s4); font-size: .9375rem; }

.tlink {
  font-weight: 600; color: var(--text);
  border-block-end: 1px solid var(--line-strong);
  padding-block-end: 2px;
  transition: color 120ms linear, border-color 120ms linear;
}
.tlink:hover { color: var(--red-lift); border-block-end-color: var(--red-lift); }

/* menu dot-leader. used exactly three times on the page */
.leader {
  block-size: 2px;
  background-image: radial-gradient(circle, var(--line) 1px, transparent 1px);
  background-size: 8px 2px; background-repeat: repeat-x;
}

/* ---------- 6. header ---------- */
.site-head { position: relative; z-index: 20; }
.site-head .bar { display: flex; align-items: center; gap: var(--s4); padding-block: var(--s4); }
.brand { display: flex; align-items: center; gap: var(--s2); }
.brand svg { inline-size: 32px; block-size: 20px; flex: none; }
.brand b { font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; line-height: 1; }
.brand span { font-size: .75rem; color: var(--muted); line-height: 1; }

.nav { display: none; }
@media (min-width: 940px) {
  .nav { display: flex; gap: var(--s5); margin-inline-start: var(--s7); font-size: .9375rem; color: var(--muted); }
  .nav a { transition: color 120ms linear; }
  .nav a:hover { color: var(--text); }
}
.head-end { display: flex; align-items: center; gap: var(--s4); margin-inline-start: auto; }
.lang { display: flex; align-items: center; gap: var(--s2); font-size: .8125rem; font-weight: 600; color: var(--muted); }
.lang a[aria-current] { color: var(--text); }
.lang i { inline-size: 1px; block-size: 12px; background: var(--line-strong); display: block; }
.head-end .btn { padding: var(--s2) var(--s3); }
@media (min-width: 620px) { .head-end .btn { padding: var(--s2) var(--s4); } }

/* ---------- 7. hero ---------- */
/* the header rides at the top edge. the hero's own top space starts below it,
   on the grid, so the bar is not pushed down by the section padding */
.hero.r-loose { padding-block-start: var(--s2); }
.hero-grid { margin-block-start: var(--s7); }
@media (min-width: 900px) { .hero-grid { margin-block-start: var(--s9); } }
.hero { overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgb(23 17 15 / .92) 0%,
    rgb(23 17 15 / .80) 40%,
    rgb(23 17 15 / .84) 62%,
    var(--ground) 90%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero .grid { align-items: end; }
@media (min-width: 900px) {
  .hero-copy { grid-column: 1 / span 6; }
  .hero-device { grid-column: 9 / span 4; }
}
.hero h1 { max-inline-size: 15ch; }
.hero .lede { margin-block-start: var(--s5); max-inline-size: 44ch; }
.hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5); margin-block-start: var(--s6); }
.hero-true { margin-block-start: var(--s6); font-size: .9375rem; color: var(--muted); max-inline-size: 46ch; }

/* the hero phone is cropped by the block-end boundary of the section.
   the negative margin has to beat the section's own padding-block-end
   or the device stops short of the edge and the crop never happens. */
.hero-device { margin-block-end: calc(var(--s7) * -1 - 90px); }
@media (min-width: 900px) { .hero-device { margin-block-end: calc(var(--s10) * -1 - 110px); } }

/* ---------- 8. devices ---------- */
.device {
  --bezel: 8px;
  inline-size: min(62vw, 264px);
  padding: var(--bezel);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-device);
  background: var(--surface);
  box-shadow: calc(14px * var(--flip)) 14px 0 0 var(--surface);
}
@media (min-width: 900px) { .device { inline-size: 300px; } }
.device > img {
  inline-size: 100%; aspect-ratio: 1170 / 2532;
  object-fit: cover; object-position: top center;
  border-radius: var(--r-screen); background: var(--ground-deep);
}

.window {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-panel);
  background: var(--surface);
  overflow: clip;
}
.window__bar {
  block-size: 34px; display: flex; align-items: center;
  padding-inline: var(--s3);
  border-block-end: 1px solid var(--line);
  font: 600 13px/1 var(--font-text); color: var(--muted);
}
/* the panel shots are cropped in the file, to one region of the screen at a
   size somebody can actually read, rather than the whole admin shrunk to 13% */
.window > img { inline-size: 100%; background: var(--ground-deep); }

/* on a phone even the cropped band is too wide to read, so each window zooms
   into the half of itself that carries the meaning. orders keeps the status
   and the buttons, the menu keeps the dish, the Arabic name and the price. */
@media (max-width: 899px) {
  .window > img { object-fit: cover; }
  .w-orders > img { aspect-ratio: 2 / 1; object-position: left top; }
  .w-menu   > img { aspect-ratio: 3 / 4; object-position: left top; }
  .bleed-end, .bleed-start { margin-inline: 0; inline-size: 100%; }
}

/* a shot with no frame at all, cropped like a photograph */
.shot { border-radius: 0; background: var(--surface); }

/* ---------- 9. proof strip ---------- */
.proof { display: grid; grid-template-columns: 1fr; }
.proof li {
  padding-block: var(--s2);
  border-block-start: 1px solid var(--line);
  font-size: .9375rem; color: var(--muted);
}
.proof li:first-child { border-block-start: 0; }
@media (min-width: 760px) {
  .proof { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .proof li { border-block-start: 0; padding-block: 0; padding-inline-end: var(--s5); }
  .proof li + li { border-inline-start: 1px solid var(--line); padding-inline-start: var(--s5); }
}
.proof b { display: block; color: var(--text); font-weight: 600; }

/* ---------- 10. your own app ---------- */
.app-devices { display: flex; align-items: flex-start; gap: 0; }
.app-devices .device:last-child { margin-block-start: var(--s7); margin-inline-start: -26px; }
@media (max-width: 899px) {
  /* one phone, big enough to read, and it is the phone that crosses the
     boundary here too. two shrunk to fit side by side were unreadable. */
  .app-copy { order: 1; }
  .app-devices {
    order: 2; justify-content: center;
    margin-block-end: calc(var(--s9) * -1 - 30px);
    position: relative; z-index: 2;
  }
  .app-devices .device { inline-size: min(72vw, 300px); }
  .app-devices .device:last-child { display: none; }
}
@media (min-width: 900px) {
  .app-devices { grid-column: 1 / span 6; align-self: end; margin-block-end: calc(var(--s9) * -1 - 60px); }
  .app-copy { grid-column: 8 / span 5; }
}
/* the one overlap on the whole page, at the most important claim.
   the light band is lifted above the section that follows it so the
   phone crosses the boundary and is cut by neither ground. */
.band-light { position: relative; z-index: 2; }
.overlap { position: relative; z-index: 2; }

/* ---------- 11. journey rail ---------- */
.rail {
  display: flex; gap: var(--s4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--gutter);
  padding-block-end: var(--s4);
  scrollbar-width: none;
  border-block-start: 1px solid var(--line);
  padding-block-start: var(--s5);
  margin-block-start: var(--s6);
}
.rail::-webkit-scrollbar { display: none; }
.rail > li { flex: 0 0 74%; scroll-snap-align: start; max-inline-size: 320px; }
@media (min-width: 900px) {
  .rail { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1.15fr 1fr 1.3fr; gap: var(--s4); overflow: visible; }
  .rail > li { flex: none; max-inline-size: none; }
}
.rail img {
  inline-size: 100%; aspect-ratio: 4 / 5;
  object-fit: cover; object-position: top center; background: var(--surface);
}
.rail .n {
  display: block; font-weight: 600;
  font-size: .875rem; color: var(--red-lift); margin-block-end: var(--s1);
  font-variant-numeric: tabular-nums;
}
.rail h3 { margin-block-start: var(--s3); }
.rail p { font-size: .9375rem; line-height: 1.7; color: var(--muted); margin-block-start: var(--s1); }
.rail-hint { font-size: .875rem; color: var(--muted); margin-block-start: var(--s3); }
@media (min-width: 900px) { .rail-hint { display: none; } }
/* on a phone the rail already carries its own height, so the section does not
   need a loose rhythm on top of it */
@media (max-width: 899px) {
  #journey.r-normal { padding-block: var(--s6) var(--s7); }
}

/* ---------- 12. the orders panel ---------- */
.panel-sec { background: var(--ground-deep); overflow: hidden; }
@media (min-width: 900px) {
  .panel-copy  { grid-column: 1 / span 5; align-self: start; }
  .panel-aside { grid-column: 7 / span 6; align-self: start; padding-block-start: var(--s8); }
  .panel-shots { grid-column: 1 / -1; margin-block-start: var(--s7); }
}
/* an eyebrow, not a pill. the dot is the thing that pulses. */
.chip-live {
  display: flex; align-items: center; gap: var(--s2);
  font-size: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  font-weight: 600; color: var(--alarm);
  margin-block-end: var(--s3);
}
.chip-live i {
  inline-size: 8px; block-size: 8px; border-radius: 50%;
  background: var(--alarm); flex: none;
  animation: pulse 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(232 160 32 / .55); }
  70%      { box-shadow: 0 0 0 10px rgb(232 160 32 / 0); }
}

/* the window runs off the inline-end edge of the viewport */
.bleed-end {
  margin-inline-end: calc(var(--gutter) * -1);
  inline-size: calc(100% + var(--gutter));
}
@media (min-width: 1100px) {
  .bleed-end { margin-inline-end: calc(var(--gutter) * -3); inline-size: calc(100% + var(--gutter) * 3); }
}
.bleed-start {
  margin-inline-start: calc(var(--gutter) * -1);
  inline-size: calc(100% + var(--gutter));
}

.flow { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin-block-start: var(--s5); font-size: .875rem; color: var(--muted); }
.flow li { display: flex; align-items: center; gap: var(--s2); }
/* the rule trails the word it belongs to, so a wrap never starts a line with a dash */
.flow li:not(:last-child)::after { content: ""; inline-size: 14px; block-size: 1px; background: var(--line-strong); display: block; }
.flow li:first-child { color: var(--alarm); font-weight: 600; }

/* ---------- 13. plain hairline lists ---------- */
.rows { margin-block-start: var(--s5); }
.rows li {
  padding-block: var(--s3);
  border-block-end: 1px solid var(--line);
  font-size: 1rem; line-height: 1.75;
}
.rows li:first-child { border-block-start: 1px solid var(--line); }
@media (min-width: 900px) {
  .rows--two { columns: 2; column-gap: var(--s7); }
  .rows--two li { break-inside: avoid; }
}
.sticky-head { align-self: start; }
@media (min-width: 900px) {
  .sticky-head { position: sticky; inset-block-start: var(--s7); grid-column: 1 / span 4; }
  .sticky-body { grid-column: 6 / span 7; }
}

/* ---------- 14. type specimen (the Arabic block) ---------- */
.specimen {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.5rem, 1.6rem + 4vw, 3.5rem); line-height: 1.55;
  max-inline-size: 26ch; text-wrap: balance;
}
.specimen-sub { margin-block-start: var(--s5); max-inline-size: 52ch; color: var(--muted); }

/* ---------- 15. tables and QR ---------- */
.tables-sec { overflow: hidden; }
.tables-photo { position: absolute; inset: 0; z-index: 0; }
.tables-photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.tables-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--ground) 4%, rgb(23 17 15 / .80) 30%, rgb(23 17 15 / .55) 78%, rgb(23 17 15 / .32));
}
.tables-sec .wrap { position: relative; z-index: 1; }
/* nothing in it, on purpose. it is the run of photograph that reaches
   the section boundary and butts straight against the light band below. */
.photo-run { block-size: clamp(120px, 22vw, 260px); }
.qr {
  inline-size: 112px; padding: var(--s2);
  border: 1px solid var(--line-strong); background: #FFF;
  border-radius: var(--r-panel);
}
.qr + p { font-size: .875rem; color: var(--muted); margin-block-start: var(--s2); }

/* ---------- 16. report table ---------- */
.report { inline-size: 100%; width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.report caption { text-align: start; font-size: .875rem; color: var(--muted); padding-block-end: var(--s3); }
.report th, .report td { padding-block: var(--s3); border-block-end: 1px solid var(--line); }
.report thead th { font-size: .8125rem; font-weight: 600; color: var(--muted); text-align: start; }
.report tbody th, .report tfoot th { font-weight: 400; text-align: start; }
.report td { text-align: end; }
.report tfoot th, .report tfoot td { border-block-end: 0; }
.report td:empty::after { content: "—"; color: var(--line-strong); }

/* ---------- 17. steps ---------- */
/* the numerals hang past the rule and are cut by it. that hard vertical edge
   down the reading side is the point, so the container has to clip. */
.steps {
  border-inline-start: 1px solid var(--line);
  padding-inline-start: var(--s5);
  margin-block-start: var(--s6);
  overflow-x: clip;
}
.steps > li { display: grid; gap: var(--s1); padding-block: var(--s5); }
.steps > li + li { border-block-start: 1px solid var(--line); }
.step-n {
  font: 800 clamp(56px, 12vw, 96px)/1 var(--font-display);
  color: transparent; -webkit-text-stroke: 1px var(--line-strong);
  margin-inline-start: calc(var(--s5) * -1 - .38em); display: block;
  margin-block-end: var(--s2);
  font-variant-numeric: tabular-nums;
}
.steps p { color: var(--muted); font-size: 1rem; max-inline-size: 56ch; }

/* ---------- 18. faq ---------- */
.faq details { border-block-end: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: var(--s3);
  padding-block: var(--s4); font-weight: 600; font-size: 1.0625rem; line-height: 1.6;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg {
  inline-size: 12px; block-size: 12px; flex: none;
  margin-inline-start: auto; color: var(--muted);
  transition: transform 160ms linear;
}
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { padding-block-end: var(--s4); color: var(--muted); }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0; overflow: clip;
    transition: block-size 220ms ease, content-visibility 220ms allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}

/* ---------- 19. final call to action ---------- */
.final { text-align: center; }
.final h2 { max-inline-size: 22ch; margin-inline: auto; }
.final .lede { margin-block-start: var(--s4); max-inline-size: 46ch; margin-inline: auto; color: rgb(255 255 255 / .88); }
.final .btn { margin-block-start: var(--s6); }
.final .small { margin-block-start: var(--s4); color: rgb(255 255 255 / .92); }

/* ---------- 20. footer ---------- */
.site-foot { background: var(--ground-deep); border-block-start: 1px solid var(--line); }
.foot { display: grid; gap: var(--s6); }
@media (min-width: 860px) { .foot { grid-template-columns: 1.6fr 1fr 1fr; gap: var(--s7); } }
.foot h4 { font-size: .8125rem; font-weight: 600; color: var(--muted); margin-block-end: var(--s3); }
.foot li { padding-block: var(--s1); font-size: .9375rem; color: var(--muted); }
.foot a { transition: color 120ms linear; }
.foot a:hover { color: var(--text); }
.crow { display: flex; align-items: center; gap: var(--s2); padding-block: var(--s1); font-size: .9375rem; color: var(--muted); }
.crow svg { inline-size: 16px; block-size: 16px; flex: none; }
.foot-end {
  margin-block-start: var(--s6); padding-block-start: var(--s4);
  border-block-start: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); justify-content: space-between;
  font-size: .875rem; color: var(--muted);
}

/* ---------- 21. skip link ---------- */
.skip {
  position: absolute; inset-block-start: -60px; inset-inline-start: var(--s4); z-index: 100;
  background: var(--red); color: #FFF; padding: var(--s2) var(--s4); border-radius: var(--r-button);
}
.skip:focus { inset-block-start: var(--s2); }

/* ---------- 22. print, for the PDF he attaches in a chat ---------- */
@page { size: A4; margin: 0; }

@media print {
  :root { --gutter: 14mm; }
  html, body { background: var(--ground); }
  .nav, .lang, .skip, .rail-hint, .head-end .btn { display: none !important; }

  /* nothing runs off the paper */
  .bleed-end, .bleed-start { margin-inline: 0; inline-size: 100%; }
  .hero { overflow: visible; }
  .hero-device { margin-block-end: 0; }
  .app-devices { margin-block-end: 0; align-self: center; }
  .overlap { margin-block-end: 0; }
  .sticky-head { position: static; }
  .chip-live { animation: none; }

  /* the horizontal rail becomes a grid on paper */
  .rail { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; gap: var(--s5) var(--s4); }
  .rail > li { max-inline-size: none; }

  /* keep the small units whole. NOT whole sections, or every section takes
     its own sheet and the thing comes out at sixteen pages. */
  .rail > li, .steps > li, .faq details, .report tr, .device, .window,
  .proof, .proof li, .app-devices { break-inside: avoid; }
  h1, h2, h3, .eyebrow, .specimen { break-after: avoid; }

  /* the padding rhythm is for a screen, not for paper */
  .r-loose  { padding-block: 12mm 14mm; }
  .r-normal { padding-block: 9mm 11mm; }
  .r-tight  { padding-block: 7mm 9mm; }
  .r-flush  { padding-block: 9mm 0; }
  .photo-run { block-size: 20mm; }
  .hero.r-loose { padding-block: 8mm 12mm; }
  .hero-grid { margin-block-start: 8mm; }
  .device { inline-size: 46mm; }
  .rail { grid-template-columns: repeat(3, 1fr); }
  .specimen { font-size: 22pt; }
  h1 { font-size: 26pt; }
  h2 { font-size: 17pt; }
  body { font-size: 10.5pt; line-height: 1.7; }
  .lede { font-size: 12pt; }
}

/* ---------- 23. reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .chip-live { box-shadow: 0 0 0 3px rgb(232 160 32 / .35); }
  .rail { scroll-snap-type: none; }
}