/* jhana site v3: the small-screen layer. Loaded last on every page; desktop (1280 wide and up) is untouched.
   Everything here sits inside a max-width query, except the two lines below that cannot affect a desktop page.

   Tiers, from where the content breaks and the widths Safari reports:
     under 1280   type, gutters, and section spacing become fluid; the desktop layout otherwise holds
     under 1024   iPad portrait, an open folding phone on its side, a phone on its side: two columns, not three or four
     under 740    an open folding phone upright, half an iPad: the menu folds away; side-by-side pairs stack
     under 520    a phone in the hand: one column, strips that swipe, numbers as ledgers */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.menu-btn, .menu-extra, .share-btn { display: none; }
/* a touch screen has no hover: the first tap on a logo shows where it leads (responsive.js), the second follows it */
.logo.tipped::after { opacity: 1; }
.logo.tipped img { filter: none; }

@media (max-width: 1279.98px) {
  :root {
    /* each size is two straight lines: the steeper one meets the desktop size at 1280, the gentler one holds
       the size up on a phone, so headlines stay headlines at every width */
    --display: clamp(36px, max(4vw + 28px, 12.2vw - 48px), 108px);
    --title: clamp(32px, max(3vw + 24px, 9vw - 31px), 84px);
    --head: clamp(27px, max(2vw + 21px, 5.6vw - 11.6px), 60px);
    --lead: clamp(20px, max(0.8vw + 18px, 2.3vw + 2.6px), 32px);
    --body: clamp(17px, 0.5vw + 13.6px, 20px);
    --small: clamp(15px, 0.25vw + 12.8px, 16px);
    --gutter: clamp(20px, 7.5vw, 96px);
    --gap: clamp(64px, 9.4vw, 120px);          /* a section's top and bottom */
  }
  body { overflow-wrap: break-word; -webkit-tap-highlight-color: rgba(17, 17, 17, 0.08); }
  img, svg, video { max-width: 100%; }

  /* tracking follows the size */
  h1 { letter-spacing: -0.037em; }
  h2 { letter-spacing: -0.03em; margin-bottom: clamp(32px, 4.7vw, 60px); }
  .mid, .stat b { letter-spacing: -0.025em; }
  h2.mid { margin-bottom: clamp(24px, 3.1vw, 40px); }
  h3, .lead, .uses, .box .stat b { letter-spacing: -0.015em; }

  /* gutters keep clear of a notch or a rounded corner when the phone lies on its side */
  .wrap { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
  section { padding: var(--gap) 0; }
  section.hero { padding: clamp(56px, 12.5vw, 160px) 0 0; }
  .hero h1 + .lead { margin-top: clamp(24px, 3.1vw, 40px); }

  header { padding-top: clamp(18px, 3.75vw, 48px); padding-bottom: clamp(18px, 3.75vw, 48px); }
  nav a, nav span { margin-left: clamp(18px, 2.5vw, 32px); }
  .mark img { height: clamp(30px, 2.8vw, 36px); }

  .stats, .cols3, .cols2 { gap: clamp(24px, 3.75vw, 48px); }
  .stat span { max-width: none; }

  /* footer */
  footer.end { padding: var(--gap) 0 max(32px, env(safe-area-inset-bottom)); }
  .end h2 { margin-bottom: clamp(48px, 5.6vw, 72px); }
  .masthead { margin: clamp(56px, 7.5vw, 96px) 0 clamp(40px, 5vw, 64px); }

  /* the band keeps its rules edge to edge; its contents take the page's gutter */
  section.band { padding: clamp(28px, 3.1vw, 40px) max(var(--gutter), env(safe-area-inset-left)); }

  /* a logo's note opens under its strip, the strip's full width, so it can never run off the screen */
  .alumni { position: relative; }
  .alumni .logo { position: static; }
  .alumni .logo::after, .alumni .logo:nth-last-child(-n+3)::after { left: 0; right: 0; top: calc(100% + 6px); width: auto; max-width: none; }
  /* touch has no hover: a link that is pressed thickens as a hovered one does */
  a:active { text-shadow: 0.5px 0 0 currentColor, -0.5px 0 0 currentColor; }
  .chip:active, .chips button:active { background: var(--ink); color: #fff; }
  .chip.solid:active { opacity: 0.8; }
}

/* ---- under 1024: two columns, not three or four ---- */
@media (max-width: 1023.98px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .imprint { gap: 32px; }
}

/* ---- under 740: the menu folds away, pairs stack ---- */
@media (max-width: 739.98px) {
  .cols2, .cols3 { grid-template-columns: 1fr; }

  /* The header stays within reach: it leaves as you read down and returns the moment you scroll up.
     (responsive.js adds .has-menu and the classes that move it; without the script the links simply wrap.) */
  header.wrap { flex-wrap: wrap; row-gap: 12px; }
  header nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
  header nav a { margin-left: 0; }
  .has-menu header.wrap { position: sticky; top: 0; z-index: 60; flex-wrap: nowrap; padding-top: max(14px, env(safe-area-inset-top)); padding-bottom: 14px; background: #fff; transition: transform 0.28s ease, background-color 0.2s; }
  .has-menu .night header.wrap { background: var(--ink); }
  .has-menu.header-away header.wrap { transform: translateY(-100%); }
  .has-menu .menu-btn { display: block; margin: -10px -8px -10px 0; padding: 10px 8px; font-size: var(--body); line-height: 1.2; }

  /* the menu is a sheet of ink: five destinations in headline type, set low where the thumb is */
  .has-menu header nav { position: fixed; inset: 0; z-index: -1; flex-direction: column; flex-wrap: nowrap; justify-content: flex-end; gap: 0; padding: 96px max(var(--gutter), env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left)); background: var(--ink); color: #fff; overflow-y: auto; visibility: hidden; opacity: 0; transition: opacity 0.22s ease, visibility 0s linear 0.22s; }
  .has-menu header nav a { display: block; padding: 7px 0; font-size: var(--title); font-weight: bold; line-height: 1.08; letter-spacing: -0.03em; transform: translateY(14px); opacity: 0; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease; }
  .has-menu header nav a.here { text-decoration: none; }
  .has-menu header nav a.here::after { content: ""; display: inline-block; width: 0.34em; height: 0.34em; margin-left: 0.3em; border-radius: 50%; background: #fff; vertical-align: 0.12em; }
  .has-menu header nav .menu-extra { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 28px; padding-top: 20px; border-top: 1px solid #444; }
  .has-menu header nav .menu-extra a { padding: 0; font-size: var(--body); font-weight: normal; letter-spacing: 0; color: var(--on-dark); }
  .has-menu header nav .menu-extra a.chip { padding: 10px 22px; border-color: #fff; color: #fff; }
  .menu-open header nav { visibility: visible; opacity: 1; transition-delay: 0s; }
  .menu-open header nav a { transform: none; opacity: 1; }
  .menu-open header nav a:nth-child(2) { transition-delay: 0.03s; }
  .menu-open header nav a:nth-child(3) { transition-delay: 0.06s; }
  .menu-open header nav a:nth-child(4) { transition-delay: 0.09s; }
  .menu-open header nav a:nth-child(5) { transition-delay: 0.12s; }
  .menu-open header nav .menu-extra a { transition-delay: 0.16s; }
  .menu-open header.wrap { background: transparent; transform: none; }
  .menu-open .mark img { filter: brightness(0) invert(1); }
  .menu-open .menu-btn { color: #fff; }
  html.menu-open { overflow: hidden; }
  @media (prefers-reduced-motion: reduce) {
    .has-menu header.wrap, .has-menu header nav, .has-menu header nav a { transition: none; }
  }
  /* a phone on its side is short: the sheet's links sit two to a row */
  @media (max-height: 480px) {
    .has-menu header nav { flex-direction: row; flex-wrap: wrap; align-content: flex-end; column-gap: 32px; padding-top: 64px; }
    .has-menu header nav a { font-size: var(--head); }
    .has-menu header nav .menu-extra { flex-basis: 100%; margin-top: 12px; padding-top: 12px; }
  }

  /* footer: the two lists side by side, the contact line beneath them, the imprint stacked */
  .sitemap { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .sitemap > :last-child { grid-column: 1 / -1; display: flex; flex-wrap: wrap; column-gap: 20px; }
  .sitemap > :last-child .k, .sitemap > :last-child a { flex-basis: 100%; }
  .masthead { width: 78%; }
  .imprint { flex-direction: column; gap: 16px; }
  /* the tide, drawn smaller: all three boats stay in sight */
  .end h2::after { height: 60px; margin-top: 28px; background-size: 780px 60px; animation-name: tide-drift-small, tide-rise; }
  .band > div { flex-wrap: wrap; gap: 20px 32px; }
}
@keyframes tide-drift-small { to { background-position-x: -780px; } }

/* ---- under 520: a phone in the hand ---- */
@media (max-width: 519.98px) {
  :root { --gutter: clamp(18px, 5.6vw, 28px); }
  .stats { gap: 28px 20px; }
  .chip, .chips button { padding: 11px 20px; }

  /* the contact form is a full sheet: one column, big fields, the send button always in reach */
  dialog.contact { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: max(20px, env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left)); border: 0; }
  .contact .cf-head { margin-bottom: 24px; }
  .contact .cf-grid { grid-template-columns: 1fr; gap: 20px; }
  .contact input:not([type=checkbox]), .contact textarea { padding: 10px 0; font-size: max(16px, var(--body)); }
  .contact .cf-foot { flex-wrap: wrap; gap: 16px; }
  .contact .cf-foot .chip { flex: 1 0 100%; padding: 14px 22px; text-align: center; }
}

/* ---- home ---- */
@media (max-width: 1279.98px) {
  .cta { margin-top: clamp(28px, 3.75vw, 48px); }
  .est { margin-top: clamp(32px, 3.75vw, 48px); gap: 8px 32px; flex-wrap: wrap; }
  .logos { margin-top: clamp(48px, 7.5vw, 96px); }
  .logos div { gap: clamp(40px, 5.6vw, 72px); }
  .logos img { height: clamp(30px, 3.4vw, 44px); }
  .tabs, .chips { margin-bottom: clamp(32px, 4.4vw, 56px); }
  .marquee { column-gap: clamp(32px, 5vw, 64px); }
  .marquee .stat + .stat { margin-top: clamp(24px, 3.1vw, 40px); }
  .terms { margin-bottom: clamp(36px, 4.7vw, 60px); }
  .uses li + li::before { margin: 0 clamp(10px, 1.56vw, 20px); }
  .box { padding: clamp(24px, 3.75vw, 48px); row-gap: clamp(20px, 2.2vw, 28px); }
  .seg > * { padding: clamp(20px, 2.2vw, 28px); }
  summary { padding: clamp(20px, 2.2vw, 28px) 0; gap: 24px; }
}

/* ---- under 1024: a proof panel is one column; the two why-us cards stack and each keeps its own rows ---- */
@media (max-width: 1023.98px) {
  /* title, then the asset at full width, then its numbers side by side under it */
  .marquee { grid-template-columns: 1fr; row-gap: clamp(20px, 3vw, 32px); align-items: start; }
  .marquee h2 { min-height: calc(var(--head) * 2.12); margin-bottom: 0; }
  .marquee > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 4vw, 48px); align-items: start; }
  .marquee > div > .stat:only-child { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: center; }
  .marquee > div > .stat:only-child .plogo { grid-row: span 2; height: 40px; margin: 0; }
  .marquee .stat + .stat { margin-top: 0; }

  .terms { grid-template-columns: 1fr; row-gap: clamp(24px, 3.5vw, 36px); }
  .terms h2 { grid-column: auto; }
  .terms dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; padding-bottom: 0; }
  .terms dl div + div { margin-top: 0; }

  .boxes { grid-template-columns: 1fr; grid-template-rows: none; row-gap: clamp(20px, 3vw, 32px); }
  .box { grid-row: auto; grid-template-rows: none; }
}

/* ---- under 740 ---- */
@media (max-width: 739.98px) {
  /* tabs and chips are strips that run to the screen's edges and slide under the thumb */
  .tabs, .chips { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar, .chips::-webkit-scrollbar { display: none; }
  .tabs { gap: 24px; }
  .chips { gap: 8px; }
  .tabs button, .chips button { flex: none; scroll-snap-align: start; white-space: nowrap; }
  .tabs button { padding: 8px 0 6px; }
  .tabs::after, .chips::after { content: ""; flex: none; width: 1px; }   /* room after the last one */

  /* what each industry hands over: one to a line */
  .uses { display: block; }
  .uses li { padding: 10px 0; border-top: 1px solid var(--line); }
  .uses li:last-child { border-bottom: 1px solid var(--line); }
  .uses li + li::before { content: none; }
  .between { flex-wrap: wrap; gap: 4px 24px; }

  /* why now: the three points read down, each under a dotted rule */
  .seg { grid-auto-flow: row; grid-auto-columns: auto; }
  .seg > * + * { border-left: 0; border-top: 1px dotted #999; }
}

/* ---- under 520 ---- */
@media (max-width: 519.98px) {
  .est span:first-child { flex-basis: 100%; }
  .terms dl { grid-template-columns: 1fr; row-gap: 14px; }
  /* numbers in a card become a ledger: the figure on the left, what it measures on the right */
  .box .stats { grid-template-columns: 1fr; gap: 0; }
  .box .stat { display: grid; grid-template-columns: 5.4em 1fr; column-gap: 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); }
  .box.dark .stat { border-top-color: #444; }
  .box .stat span { margin-top: 0; }
  /* a row of three numbers stays on one line */
  .stats.three { gap: 16px; }
}

/* ---- lists (blog index, case studies), posts, and case pages ---- */
@media (max-width: 1279.98px) {
  .blog-shell { padding: clamp(40px, 12.5vw, 160px) max(var(--gutter), env(safe-area-inset-right)) var(--gap) max(var(--gutter), env(safe-area-inset-left)); }
  .blog-index-head h1 { letter-spacing: -0.037em; }
  .blog-lead h2, .blog-article-head h1 { letter-spacing: -0.025em; }
  .blog-subtitle, .blog-entry h3, .blog-content h2, .blog-related a, .blog-content blockquote, .blog-content blockquote p { letter-spacing: -0.015em; }
  .blog-subtitle { margin-top: clamp(16px, 2.5vw, 32px); }
  .blog-article-head { padding-bottom: clamp(24px, 2.8vw, 36px); margin-bottom: clamp(28px, 3.1vw, 40px); }
  .blog-back { margin-bottom: clamp(20px, 2.5vw, 32px); }

  /* a post keeps its contents rail and gives up the empty right-hand column */
  .blog-layout { grid-template-columns: minmax(150px, 180px) minmax(0, 1fr); gap: clamp(28px, 3.4vw, 44px); }

  /* a case page has no contents, so it reads as one column; its hero asset runs the full frame beside nothing */
  .case .blog-layout { grid-template-columns: minmax(0, 1fr); }
  .case .blog-rail { display: none; }
  .case .blog-main, .case .blog-main .blog-content { max-width: none; }
  .case .blog-article-head, .case .blog-content > * { max-width: 760px; }
  .case .blog-content > .case-asset { max-width: none; margin: clamp(24px, 3.1vw, 40px) 0; }
  .blog-content .quote + .quote { margin-top: clamp(-38px, -3vw, -28px); }

  .rows li > * { gap: clamp(16px, 3.1vw, 40px); }
  .rows .a { width: clamp(104px, 11.7vw, 150px); }
  .rows .b { width: clamp(180px, 21.9vw, 280px); }
  .cases .a { width: clamp(180px, 23.4vw, 300px); }
  .cases .b { width: clamp(200px, 25vw, 320px); }
}

/* ---- under 1024: one reading column; the rail becomes a sheet (responsive.js) ---- */
@media (max-width: 1023.98px) {
  .blog-layout { grid-template-columns: minmax(0, 1fr); }
  /* without the script, the contents sit above the post as a plain list */
  .blog-layout > .blog-left, .blog-layout > .blog-rail { position: static; height: auto; max-height: none; overflow: visible; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
  .blog-layout > .blog-rail:empty, .blog-layout > .blog-rail[aria-hidden="true"] { display: none; }

  /* with it: a "Contents" button rides at the thumb, and the list rises from the bottom edge */
  .has-sheet .blog-layout > .blog-left, .has-sheet .blog-layout > .blog-rail { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: block; max-height: min(74dvh, 620px); overflow-y: auto; overscroll-behavior: contain; padding: 22px max(var(--gutter), env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left)); border-bottom: 0; border-top: 1px solid var(--ink); background: #fff; font-size: var(--body); transform: translateY(104%); visibility: hidden; transition: transform 0.34s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.34s; }
  .has-sheet.sheet-open .blog-layout > .blog-left, .has-sheet.sheet-open .blog-layout > .blog-rail { transform: none; visibility: visible; transition-delay: 0s; }
  .has-sheet .blog-left > .blog-rail-toc { overflow: visible; }
  .has-sheet .blog-rail-toc a { padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--grey); }
  .has-sheet .blog-rail-k { padding-bottom: 12px; border-bottom-color: var(--ink); }
  .has-sheet .blog-seealso { margin-top: 28px; padding-top: 0; border-top: 0; }
  .has-sheet .blog-seealso .blog-rail-k { pointer-events: none; }
  .has-sheet .blog-seealso .blog-rail-k::after { content: none; }
  .has-sheet .blog-seealso-box { grid-template-rows: 1fr; }
  .sheet-btn { position: fixed; right: max(var(--gutter), env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 70; padding: 11px 20px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: #fff; font-size: var(--small); box-shadow: 0 8px 28px rgba(17, 17, 17, 0.22); transition: transform 0.28s ease, opacity 0.2s; }
  .sheet-btn.is-low { transform: translateY(140%); opacity: 0; }       /* not yet into the post, or past its end */
  .sheet-open .sheet-btn { z-index: 90; background: #fff; color: var(--ink); box-shadow: none; }
  .sheet-scrim { position: fixed; inset: 0; z-index: 75; background: rgba(17, 17, 17, 0.5); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s linear 0.3s; }
  .sheet-open .sheet-scrim { opacity: 1; visibility: visible; transition-delay: 0s; }
  html.sheet-open { overflow: hidden; }
  @media (prefers-reduced-motion: reduce) { .has-sheet .blog-layout > .blog-left, .has-sheet .blog-layout > .blog-rail, .sheet-btn, .sheet-scrim { transition: none; } }

  /* index rows: the date or client stays on the left; the note drops under the title */
  .rows li > * { display: grid; grid-template-columns: clamp(104px, 20vw, 190px) minmax(0, 1fr); column-gap: clamp(16px, 3vw, 32px); row-gap: 6px; align-items: baseline; }
  .rows .a, .rows .b, .cases .a, .cases .b { width: auto; }
  .rows .b { grid-column: 2; }
}
@media (min-width: 1024px) { .sheet-btn, .sheet-scrim { display: none; } }

/* ---- under 740 ---- */
@media (max-width: 739.98px) {
  .head-row { display: flex; justify-content: space-between; align-items: baseline; }
  .share-btn { display: inline-block; font-size: var(--small); color: var(--grey); padding: 6px 0 6px 16px; }
  .blog-index-head { flex-wrap: wrap; align-items: start; gap: 20px; margin-bottom: 36px; }
  .blog-search { max-width: none; }
  .blog-toc ol { columns: 1; }
  .blog-content ul, .blog-content ol { padding-left: 20px; }
  .blog-content blockquote { margin: 28px 0; padding: 20px 0; }

  /* wide things scroll inside themselves, never the page */
  .blog-content table { display: block; width: auto; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .blog-content table th, .blog-content table td { padding: 12px 14px 12px 0; min-width: 7.5em; }
  .blog-content pre { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); max-width: none; padding-left: var(--gutter); padding-right: var(--gutter); }

  .essay-plate { grid-template-columns: 1fr; gap: 16px; }
  .essay-plate img { width: 100%; max-width: 320px; }
  .essay-hero { height: clamp(180px, 48vw, 360px); margin-bottom: 28px; }
  .essay-pdf { height: 72dvh; }
  .essay-releases, .essay-sched { grid-template-columns: 1fr; gap: 32px; }
  .essay-annex { grid-template-columns: 1fr; gap: 20px; }
  .essay-logos { gap: 20px 32px; }
  .essay-logos img { height: 28px; }
}

/* ---- under 520: a phone ---- */
@media (max-width: 519.98px) {
  /* index rows stack: a small line above the title, a small line below */
  .rows li > * { grid-template-columns: 1fr; row-gap: 4px; padding: 18px 0; }
  .rows .a, .rows .b { grid-column: 1; font-size: var(--small); }
  .rows .a { order: -1; }
  .cases .a { color: var(--ink); font-weight: bold; }
  .blog-entry { grid-template-columns: 1fr; gap: 4px; padding-block: 20px; }
  .blog-entry time { padding-top: 0; }
  .blog-byline { align-items: flex-start; }
  .blog-author-role { display: block; margin-left: 0; }

  /* a case's three numbers are a ledger: the figure on the left, what it measures on the right */
  .blog-content .seg { grid-auto-flow: row; }
  .blog-content .seg > * { display: grid; grid-template-columns: 6.2em 1fr; column-gap: 16px; align-items: baseline; padding: 14px 18px; }
  .blog-content .seg .stat span { margin-top: 0; }

  /* photographs are a strip that runs off the edge and snaps under the thumb */
  .shots { display: flex; gap: 8px; margin-left: calc(-1 * var(--gutter)) !important; margin-right: calc(-1 * var(--gutter)) !important; padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .shots::-webkit-scrollbar { display: none; }
  .shots img { flex: 0 0 84%; width: 84%; scroll-snap-align: start; }
  .shots::after { content: ""; flex: none; width: 1px; }
}

/* ---- science ---- */
@media (max-width: 1279.98px) {
  .flag { margin-left: clamp(10px, 1.56vw, 20px); }
  #automation .au-flow { margin: clamp(40px, 4.4vw, 56px) 0 clamp(48px, 5.6vw, 72px); }
  #automation .au-sep { margin-bottom: clamp(40px, 5vw, 64px); }
  #automation #dispute + .au-sep { margin-top: clamp(48px, 5.6vw, 72px); }
  #automation .au-half { padding: 16px clamp(20px, 3.1vw, 40px); }
  #dispute .dc-shot { padding: clamp(12px, 3.75vw, 48px); }
  .au-row { column-gap: clamp(28px, 3.1vw, 40px); }
  .au-row > li + li::before { width: clamp(28px, 3.1vw, 40px); }
  #automation .au-loop { --au-mid: calc((100% - 2 * clamp(28px, 3.1vw, 40px)) / 6); }
  #verifier .vf-pair { column-gap: 24px; padding-left: 64px; }
}

/* ---- under 1024: figures one to a row; the two closing boxes stack ---- */
@media (max-width: 1023.98px) {
  #verifier .vf-evid { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  #verifier .vf-fig { grid-row: auto; grid-template-rows: none; }
  #verifier .vf-fig p, #verifier .vf-plot, #verifier .vf-fig .vf-fine { grid-row: auto; }
  #verifier .vf-evid > * + * { border-left: 0; border-top: 1px dotted #999; }
  #automation .au-pair { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 24px; }
  #automation .au-half { grid-row: auto; grid-template-rows: none; }
}

/* ---- under 740 ---- */
@media (max-width: 739.98px) {
  summary .flag { display: table; margin: 10px 0 0; }

  /* the formal statement opens in place under its sentence, on tap */
  #verifier .vf-tip { position: static; }
  #verifier .vf-tip > span { position: static; width: auto; max-width: none; margin-top: 12px; overflow-x: auto; }
  #verifier .vf-pair { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }

  /* the explorer: the slider takes a full line, the play button and the month share the next */
  #environments .ex-what, #environments .ex-time { padding: 18px 20px; }
  #environments .ex-views { right: 12px; top: -6px; }
  #environments .ex-time { flex-wrap: wrap; gap: 8px 16px; }
  #environments .ex-range { order: -1; flex: 1 0 100%; height: 36px; }
  #environments .ex-range::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -10.5px; }
  #environments .ex-range::-moz-range-thumb { width: 22px; height: 22px; }
  #environments .ex-when { flex: 1; min-width: 0; }
  /* each number sits beside its own line */
  #environments .seg .stat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(96px, 38%); column-gap: 20px; align-items: end; }
  #environments .seg .stat > b, #environments .seg .stat > span { grid-column: 1; }
  #environments .seg .stat > span { margin-bottom: 0; }
  #environments .ex-spark { grid-column: 2; grid-row: 1 / span 2; height: 48px; margin-top: 0; }

  /* what it runs on: three sockets, one to a row, the name beside its note */
  .au-row { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  #automation .au-plugs .card { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); column-gap: 16px; align-items: baseline; }
  #automation .au-plugs .card p { margin-top: 0; }

  /* The line of six runs straight down, each step entered from the one above. The line closes up the left
     margin: from the last step back to the first, with its name set along it. */
  #automation .au-flow { --au-gap: 36px; position: relative; grid-template-columns: 36px minmax(0, 1fr); row-gap: var(--au-gap); }
  #automation .au-flow > .au-row { grid-column: 2; row-gap: var(--au-gap); }
  #automation .au-flow > .au-back { grid-area: 2 / 2; }
  .au-back > :nth-child(n) { grid-area: auto; }
  .au-row > li + li::before, .au-back > li + li::before, .au-back > :first-child::before { content: ""; position: absolute; top: auto; right: auto; left: 50%; bottom: calc(100% + var(--au-top)); width: 0; height: calc(var(--au-gap) - var(--au-top) + 1px); border-top: 0; border-left: 1px solid var(--ink); }
  .au-row > li + li::after, .au-back > li + li::after, .au-back > :first-child::after { content: ""; position: absolute; top: auto; right: auto; left: calc(50% - 4px); bottom: calc(100% + var(--au-top)); border: solid transparent; border-width: 8px 4.5px 0; border-top-color: var(--ink); }
  #automation .au-loop { grid-area: 1 / 1 / 3 / 2; z-index: 1; display: flex; align-items: center; justify-content: center; column-gap: 0; row-gap: 12px; height: auto; margin: 0; padding: 0; writing-mode: vertical-rl; transform: rotate(180deg); line-height: 1.25; }
  #automation .au-loop b, #automation .au-loop span { padding: 8px 0; background: #fff; }
  #automation .au-loop::before, #automation .au-loop::after { content: none; }
  #automation .au-flow::before { content: ""; position: absolute; left: 17px; width: 19px; top: 34px; bottom: 34px; border: 1px solid var(--ink); border-right: 0; }
  #automation .au-flow::after { content: ""; position: absolute; left: 28px; top: 29.5px; border: solid transparent; border-width: 4.5px 0 4.5px 8px; border-left-color: var(--ink); }

  /* the board stays a screen: its counters wrap, and its table slides sideways with the claim pinned */
  #dispute .dc-head { padding: 12px 14px; }
  #dispute .dc-head p { display: flex; flex-wrap: wrap; gap: 6px; }
  #dispute .dc-head .chip + .chip { margin-left: 0; }
  #dispute .dc-bar { flex-wrap: wrap; margin: 14px 14px 8px; }
  #dispute .dc-bar div { flex: 1 1 40% !important; padding: 14px 16px; }
  #dispute .dc-bar div:first-child { flex: 1 0 100% !important; }
  #dispute .dc-table { display: block; width: auto; margin: 0 0 12px 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  #dispute .dc-table td:nth-child(2) { min-width: 220px; white-space: normal; }
  #dispute .dc-table th:first-child, #dispute .dc-table td:first-child { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 8px 0 8px -8px rgba(17, 17, 17, 0.14); }
  #dispute .dc-table th:last-child, #dispute .dc-table td:last-child { padding-right: 14px; }

  /* the two closing boxes: a name over its note; a layer's number beside its name */
  #automation .au-line { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  #automation .au-dark .au-line { grid-template-columns: 32px minmax(0, 1fr); }
  #automation .au-dark .au-line p { grid-column: 2; }
  #automation .au-half > * { padding: 18px 0; }
}

/* ---- courts ---- */
@media (max-width: 1279.98px) {
  main.ps section { padding: var(--gap) 0; }
  main.ps section.ps-hero { padding: clamp(48px, 12.5vw, 160px) 0 var(--gap); }
  main.ps .ps-hero h1, main.ps .final h2 { letter-spacing: -0.037em; }
  main.ps .court-component-heading h2, main.ps .sec-head h2, main.ps .platform h2 { letter-spacing: -0.03em; }
  main.ps .console b, main.ps .pipe-cmp .pv.is-big { letter-spacing: -0.025em; }
  main.ps .ps-grid { gap: clamp(32px, 6.25vw, 80px); }
  main.ps .ps-hero .lede { margin-top: clamp(20px, 3.1vw, 40px); }
  main.ps .ps-hero .ctas { margin-top: clamp(28px, 3.75vw, 48px); }
  main.ps .console { gap: 18px clamp(28px, 5.6vw, 72px); margin-top: clamp(48px, 7.5vw, 96px); }
  main.ps .court-component-heading, main.ps .sec-head { margin-bottom: clamp(36px, 4.7vw, 60px); }
  main.ps .court-act-cards { gap: clamp(28px, 2.8vw, 36px); }
  main.ps .plat-grid { gap: clamp(40px, 7.5vw, 96px); }
  main.ps .pipe { column-gap: clamp(12px, 1.56vw, 20px); }
  main.ps .pipe li:not(:last-child)::after { right: calc(-1 * clamp(12px, 1.56vw, 20px)); width: clamp(12px, 1.56vw, 20px); }
  main.ps .pipe-stage { padding: 16px 12px; }
  main.ps .pipe-cmp > div { padding: clamp(22px, 3.1vw, 40px); }
}

/* ---- under 1024: the seven stages are a strip that slides under the thumb; the panel below follows it ---- */
@media (max-width: 1023.98px) {
  main.ps .pipe { display: flex; gap: 12px; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 4px var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  main.ps .pipe::-webkit-scrollbar { display: none; }
  main.ps .pipe li { flex: 0 0 min(72%, 300px); scroll-snap-align: start; }
  main.ps .pipe li:last-child { margin-right: 1px; }
  main.ps .pipe li:not(:last-child)::after { right: -12px; width: 12px; }
  main.ps .pipe-stage { min-height: 0; padding: 18px 18px 16px; }
  main.ps .pipe-stage .k { padding-bottom: 28px; }
  main.ps .pipe-cmp { margin-top: 20px; }
  main.ps .plat-grid { grid-template-columns: minmax(0, 1fr); }
  main.ps .is-tabs .courts-stage { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* the four courts are a strip of names above the court that is showing */
  main.ps .courts-tabs { flex-direction: row; gap: 28px; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
  main.ps .courts-tabs::-webkit-scrollbar { display: none; }
  main.ps .courts-tabs button { flex: none; padding: 14px 0; border-top: 0; white-space: nowrap; }
  main.ps .tab-sub { display: none; }
  main.ps .courts-panels { max-width: none; }
}

/* ---- under 900: the hero stacks; the three constraints read down ---- */
@media (max-width: 899.98px) {
  main.ps .ps-grid { grid-template-columns: minmax(0, 1fr); }
  main.ps .court-constraints { grid-template-columns: minmax(0, 1fr); }
  main.ps .court-constraint { padding: 36px 0; }
  main.ps .court-constraint + .court-constraint { border-left: 0; border-top: 1px solid var(--line); }
  main.ps .court-time-bars { max-width: 420px; margin-left: auto; margin-right: auto; }
  main.ps .final .row { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: clamp(32px, 4.7vw, 60px); }
}

/* ---- under 740 ---- */
@media (max-width: 739.98px) {
  main.ps .console { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  main.ps .ps-hero .ctas { flex-wrap: wrap; }
  /* an act reads down: icon, name, and note in a row; the arrow points to the next step */
  main.ps .court-act { padding: 34px 16px 20px; }
  main.ps .court-act-cards { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  main.ps .court-act-card { display: grid; grid-template-columns: 35px minmax(0, 1fr); column-gap: 18px; align-items: start; min-height: 0; padding: 18px; text-align: left; }
  main.ps .court-card-icon { grid-row: span 3; margin: 2px 0 0; }
  main.ps .court-act-card h4, main.ps .court-act-card p, main.ps .court-channel-icons { grid-column: 2; }
  main.ps .court-act-card p { margin-top: 6px; }
  main.ps .court-channel-icons { justify-content: flex-start; }
  main.ps .court-act--judge .court-act-card:nth-child(n) { grid-area: auto; }
  main.ps .court-act-card:not(:last-child)::after, main.ps .court-act--judge .court-act-card:not(:last-child)::after { content: "↓"; top: auto; right: auto; left: 50%; bottom: -27px; width: auto; transform: translateX(-50%); }
  main.ps .court-act:not(:last-child)::after, main.ps .court-act--judge::after { right: auto !important; left: 50%; transform: translateX(-50%); }
  main.ps .pipe-cmp { grid-template-columns: minmax(0, 1fr); }
  main.ps .pipe-cmp > div { min-height: 0; gap: 10px; }
  main.ps .pipe-a { border-right: 1px solid var(--line); border-bottom: 0; }
  main.ps .court .nums { gap: 16px 28px; }
  main.ps .spec { padding: 20px 20px 6px; }
}