/* Two faces: Oxanium for the headings under the h1s, IBM Plex Sans for everything else, h1s included.
   Both self-hosted, variable, OFL. */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("assets/fonts/ibm-plex-sans-latin-wght.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("assets/fonts/ibm-plex-sans-latin-ext-wght.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Oxanium";
  src: url("assets/fonts/oxanium-latin-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Oxanium";
  src: url("assets/fonts/oxanium-latin-ext-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #0b0c0f;
  --surface: #15171c;
  --border: #2a2e36;
  --line: #3a3f49;
  --ink: #edeff2;
  --muted: #9ba1ab;
  --subtle: #858c99;
  --amber: #ffc61a;
  --amber-hover: #e6b217;
  --amber-tint: #2a2410;
  /* Who it's for's light half: ink as a ground, graphite as its text. */
  --light-muted: #4a505b;
  --on-amber: #0b0c0f;
  --teal: #5fb3c4;
  --teal-tint: #12252a;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Oxanium", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Five sizes carry the page: display, heading, lead, body, small. */
  --fs-display: clamp(1.625rem, 0.68rem + 4.38vw, 4.75rem);
  --fs-h2: clamp(1.5rem, 0.9rem + 2.6vw, 3.25rem);
  --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  /* Square-cornered controls, panels and pictures; speech keeps a bubble. */
  --r: 4px;
  --r-bubble: 14px;
  /* One pair of tight margins; the page runs wide and only running text is held to a measure. */
  --gutter: clamp(1rem, 2.4vw, 2rem);
  --page: 88rem;
  --bar-h: 4rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dash-y: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='11' viewBox='0 0 1 11' preserveAspectRatio='none'%3E%3Crect width='1' height='6'/%3E%3C/svg%3E");
  --dash-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='1' viewBox='0 0 11 1' preserveAspectRatio='none'%3E%3Crect width='6' height='1'/%3E%3C/svg%3E");
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-padding-top: calc(var(--bar-h) + 1.5rem);
  scrollbar-color: var(--line) var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs-body)/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection {
  background: var(--amber);
  color: var(--on-amber);
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3 {
  font-weight: 600;
  text-wrap: balance;
}

/* Each page's h1 stays in the body's Plex; the section and card headings beneath it take Oxanium. */
h2,
h3 {
  font-family: var(--display);
}

p,
dd,
li,
figcaption {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

[hidden] {
  display: none !important;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px; /* taste-skill-ignore: visually hidden text, not a rule */
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: 0.5rem;
  z-index: 20;
  transform: translateY(-160%);
  background: var(--amber);
  color: var(--on-amber);
  padding: 0.6rem 0.9rem;
  border-radius: var(--r);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  transform: none;
}

.wrap {
  width: 100%;
  max-width: calc(var(--page) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.lede {
  color: var(--ink);
  font-size: var(--fs-lead);
  line-height: 1.5;
  max-width: 54ch;
}

/* Logo: OTTO the character in amber, its TT face cut out. The lockup sets OTTO beside it,
   outlined from Oxanium ExtraBold and tracked -5%. */

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.logo {
  display: block;
  flex: none;
  height: auto;
  aspect-ratio: 1;
  fill: var(--amber);
}

.lockup {
  display: block;
  flex: none;
  width: auto;
  height: 1.625rem;
  aspect-ratio: 1800 / 450;
}

.lockup-logo {
  fill: var(--amber);
}

.lockup-letters {
  fill: var(--ink);
}

/* Buttons */

.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--r);
  border: 0;
  font: 600 var(--fs-body)/1.2 var(--sans);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease), transform 0.12s var(--ease);
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn .i {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s var(--ease);
}

.btn:hover .i {
  transform: translateX(3px);
}

.btn-primary {
  background: var(--amber);
  color: var(--on-amber);
}

.btn-primary:hover {
  background: var(--amber-hover);
}

.btn-sm {
  min-height: 2.5rem;
  padding: 0.45rem 0.95rem;
  font-size: var(--fs-small);
}

.btn-block {
  width: 100%;
}

/* Quiet: the way into the room, a graphite fill, so the amber fill stays with the pilot. */
.btn-ghost {
  background: var(--border);
  color: var(--ink);
}

.btn-ghost:hover {
  background: var(--line);
}

/* Secondary: compact, no fill, an amber line around amber words. For small asides beside the content,
   like Where is OTTO?; the one outlined box on the page. */
.btn-secondary {
  min-height: 2rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--amber);
  background: transparent;
  color: var(--amber);
  font-size: var(--fs-small);
  font-weight: 500;
}

.btn-secondary:hover {
  background: var(--amber-tint);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-primary:disabled:hover {
  background: var(--amber);
}

/* Bar */

.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
}

.bar-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--amber);
  transform: scaleX(var(--read, 0));
  transform-origin: left;
  pointer-events: none;
}

.bar-in {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: var(--bar-h);
  max-width: calc(var(--page) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
  min-height: 2.75rem;
}

.nav {
  display: none;
  gap: 0.25rem;
}

.nav a {
  position: relative;
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--fs-small);
  padding: 0.5rem 0.7rem;
  border-radius: var(--r);
  transition: color 0.18s var(--ease);
}

.nav a:hover,
.nav a[aria-current="true"],
.nav a[aria-current="page"] {
  color: var(--ink);
}

.nav a[aria-current="true"]::after,
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.15rem;
  height: 2px;
  background: var(--ink);
}

.bar-end {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bar-cta {
  display: none;
}

.bar .lang button {
  min-width: 2.25rem;
  padding: 0 0.5rem;
}

.lang {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface);
}

.lang button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 600 var(--fs-small)/1 var(--sans);
  min-width: 2.5rem;
  min-height: 2rem;
  padding: 0 0.6rem;
  border-radius: 999px;
  cursor: pointer;
}

.lang button:hover {
  color: var(--ink);
}

/* Selected states invert: ink pill, graphite text, so the choice reads at a glance. */
.lang button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
}

.menu-btn,
.drawer-close,
.room-close {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: var(--r);
  background: var(--border);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.18s var(--ease);
}

.menu-btn:hover,
.drawer-close:hover,
.room-close:hover {
  background: var(--line);
}

.menu-btn svg,
.drawer-close svg,
.room-close svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* Drawer */

.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(22rem, 88vw);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--surface);
  color: var(--ink);
}

.drawer[open] {
  display: flex;
  flex-direction: column;
}

.drawer::backdrop {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--bar-h);
  padding-inline: 1.25rem;
}

.drawer-nav {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 1.25rem;
}

.drawer-nav a {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  font-size: var(--fs-lead);
  font-weight: 500;
  text-decoration: none;
}

.drawer-nav a[aria-current="true"],
.drawer-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.drawer-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
}

.drawer-label {
  font: 500 var(--fs-small)/1.3 var(--sans);
  color: var(--muted);
}

.lang-lg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 0.5rem;
}

.lang-lg button {
  min-height: 2.75rem;
}

@media (prefers-reduced-motion: no-preference) {
  .drawer[open] {
    animation: drawer-in 0.32s var(--ease);
  }

  .drawer[open]::backdrop {
    animation: fade-in 0.32s var(--ease);
  }
}

@keyframes drawer-in {
  from {
    transform: translateX(100%);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

/* Hero */

.hero {
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem) clamp(3rem, 7vw, 6rem);
}

.hero-mark {
  position: relative;
  /* Room under the mark for Where is OTTO? */
  margin-bottom: 3.25rem;
}

/* The opening. main.js turns it on only when motion is allowed and plays it from the first scroll, with
   the page held still: the octopus dives, the mark rises out of the water and the copy follows. The water
   is the screen below --surface: what passes it fades out by --deep. main.js reads both. */
.hero.is-seq {
  --surface: 70%;
  --deep: 80%;
  padding-top: 0;
}

.hero.is-seq .hero-stage {
  position: relative;
  padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* The octopus lives only in the opening. The sea is the screen under the bar; its lower part is water,
   so whatever sinks there fades out. The splash is drawn over it, unfaded. Neither takes the pointer
   from the wordmark beneath. */
.hero-sea,
.hero-splash {
  display: none;
}

.hero.is-seq .hero-sea {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: calc(100svh - var(--bar-h));
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--surface), transparent var(--deep));
  mask-image: linear-gradient(to bottom, #000 var(--surface), transparent var(--deep));
}

.hero.is-seq .hero-splash {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: calc(100svh - var(--bar-h));
  pointer-events: none;
}

.hero-octo {
  position: absolute;
  display: block;
  fill: var(--amber);
  transform-origin: 50% 40%;
  will-change: transform;
}

/* The TT face is cut out of the logo; graphite behind it keeps the face dark over the wordmark. */
.hero-octo-face {
  fill: var(--bg);
}

.hero.is-seq .hero-mark,
.hero.is-seq .hero-octo,
.hero.is-seq h1,
.hero.is-seq .hero-copy,
.hero.is-seq .bezel {
  will-change: transform, opacity;
}

/* Three amber chevrons under the octopus, while it is waiting for the first scroll. */
.hero-cue {
  display: none;
}

.hero-cue[hidden] {
  display: none !important;
}

.hero.is-seq .hero-cue {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 8rem;
  margin-left: -4rem;
  padding: 0.5rem 0;
  border: 0;
  background: transparent;
  color: var(--amber);
  cursor: pointer;
}

.hero-cue svg {
  display: block;
  width: 6.4rem;
  height: 3.2rem;
  margin-top: -0.85rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 9px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-cue svg:first-child {
  margin-top: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .hero.is-seq.is-idle .hero-octo {
    animation: hero-octo-bob 2.4s ease-in-out infinite;
  }

  .hero-cue svg {
    animation: hero-cue-bob 1.7s ease-in-out infinite;
  }

  .hero-cue svg:nth-child(2) {
    animation-delay: 0.14s;
  }

  .hero-cue svg:nth-child(3) {
    animation-delay: 0.28s;
  }
}

@keyframes hero-octo-bob {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(18px);
  }
}

@keyframes hero-cue-bob {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(1.25rem);
  }
}

/* Where is OTTO? sets the opening back to before the first scroll. */
.hero-where {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: var(--gutter);
}

.hero-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.hero h1 {
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

/* Spanish runs a quarter longer: a step down keeps the title to two lines on a phone. */
:root:lang(es) .hero h1 {
  font-size: clamp(1.375rem, 0.39rem + 4.43vw, 4.5rem);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  width: 100%;
}

.status {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font: 400 var(--fs-small)/1.45 var(--sans);
  color: var(--muted);
}

.bezel {
  min-width: 0;
  background: var(--surface);
  border-radius: var(--r);
  padding: 0.75rem;
}

/* The tabs sit with the expand button, at the right end of their row. */
.bezel-head {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
}

.bezel-head .chips {
  padding: 0;
}

.bezel-expand {
  appearance: none;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.bezel-expand:hover {
  background: var(--border);
  color: var(--ink);
}

.bezel-expand svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chips {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0.125rem 0.125rem 0.75rem;
}

.chips::-webkit-scrollbar {
  display: none;
}

.chip {
  appearance: none;
  flex: none;
  min-height: 2.5rem;
  padding: 0 1.1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: 500 var(--fs-small)/1 var(--sans);
  cursor: pointer;
  transition: color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.chip-short {
  display: none;
}

.chip:hover {
  color: var(--ink);
}

.chip[aria-selected="true"],
.chip[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
}

.view img {
  width: 100%;
  aspect-ratio: 2880 / 1682;
  object-fit: cover;
  object-position: top left;
  border-radius: var(--r);
  background: var(--bg);
}

.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
}

.guide {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  max-width: 28rem;
}

.guide-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4);
}

.guide-mark .logo {
  width: 2.15rem;
}

.guide-say {
  position: relative;
  margin: 0 0 0.35rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--r-bubble);
  border-bottom-left-radius: 4px;
  background: var(--amber);
  color: var(--on-amber);
  font: 500 var(--fs-small) / 1.35 var(--sans);
}

.guide-say p {
  margin: 0 0 0.4rem;
  font-weight: 600;
}

.guide-say ul {
  margin: 0;
  padding-left: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.guide-say::before {
  content: "";
  position: absolute;
  left: -0.28rem;
  bottom: 0.55rem;
  width: 0.7rem;
  height: 0.7rem;
  background: var(--amber);
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: no-preference) {
  .guide:not(.is-in) {
    visibility: hidden;
  }

  .guide.is-in .guide-mark {
    animation: guide-mark 0.7s var(--ease) both;
  }

  .guide.is-in .guide-say {
    animation: guide-say 0.55s var(--ease) 0.16s both;
  }
}

@keyframes guide-mark {
  from { transform: translateX(-4.75rem); }
}

@keyframes guide-say {
  from {
    opacity: 0;
    transform: translateX(-1.25rem);
  }
}

@media (max-width: 39.99rem) {
  .guide-mark {
    width: 2.75rem;
    height: 2.75rem;
  }

  .guide-mark .logo {
    width: 1.8rem;
  }
}

/* OTTO's floating guide, in the hero and over the Deliver photo: twice the size of the others (--k), and it
   moves. main.js lets the mark and the bubble be dragged anywhere in their own area, and the close button
   hides the message and leaves the mark. The guide's own box takes no pointer, so where it is empty the
   page beneath it stays usable. */
.guide-float {
  --k: 2;
  position: relative;
  gap: calc(0.6rem * var(--k));
  max-width: calc(28rem * var(--k));
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.guide-float .guide-mark,
.guide-float .guide-bubble {
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
}

.guide-float.is-dragging .guide-mark,
.guide-float.is-dragging .guide-bubble {
  cursor: grabbing;
}

.guide-float .guide-mark {
  width: calc(3.25rem * var(--k));
  height: calc(3.25rem * var(--k));
}

.guide-float .guide-mark .logo {
  width: calc(2.15rem * var(--k));
}

.guide-float .guide-bubble {
  position: relative;
  min-width: 0;
}

.guide-float .guide-say {
  margin-bottom: calc(0.35rem * var(--k));
  padding: calc(0.65rem * var(--k)) calc(0.9rem * var(--k));
  border-radius: calc(var(--r-bubble) * var(--k));
  border-bottom-left-radius: calc(4px * var(--k));
  font-size: 1.25rem;
}

.guide-float .guide-say p {
  margin: 0;
}

/* The first line runs beside the close button; the lines under it have the bubble's full width. */
.guide-float .guide-say p:first-child::before {
  content: "";
  float: right;
  width: 1.5rem;
  height: 1px;
}

.guide-float .guide-say::before {
  left: calc(-0.28rem * var(--k));
  bottom: calc(0.55rem * var(--k));
  width: calc(0.7rem * var(--k));
  height: calc(0.7rem * var(--k));
}

.guide-close {
  appearance: none;
  position: absolute;
  top: calc(0.3rem * var(--k));
  right: calc(0.3rem * var(--k));
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--on-amber);
  cursor: pointer;
  transition: background-color 0.18s var(--ease);
}

.guide-close:hover {
  background: rgba(11, 12, 15, 0.12);
}

.guide-close:focus-visible {
  outline-color: var(--on-amber);
  outline-offset: -4px;
  border-radius: 50%;
}

.guide-close svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.guide-float.is-closed .guide-bubble {
  visibility: hidden;
  opacity: 0;
}

/* Away: main.js sends OTTO away, mark and all, as the page scrolls past where it belongs. */
.guide-float.is-away {
  visibility: hidden;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .guide-float {
    transition: opacity 0.3s var(--ease), visibility 0s linear 0s;
  }

  .guide-float.is-away {
    transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
  }

  /* The bubble fades when it closes or opens again. */
  .guide-float .guide-bubble {
    transition: opacity 0.2s var(--ease), visibility 0s linear 0s;
  }

  .guide-float.is-closed .guide-bubble {
    transition: opacity 0.2s var(--ease), visibility 0s linear 0.2s;
  }
}

/* A phone has no room for twice the size: half as much again. */
@media (max-width: 39.99rem) {
  .guide-float {
    --k: 1.5;
  }

  .guide-float .guide-mark {
    width: calc(2.75rem * var(--k));
    height: calc(2.75rem * var(--k));
  }

  .guide-float .guide-mark .logo {
    width: calc(1.8rem * var(--k));
  }
}

/* In the hero, the copy sits over the screens, so OTTO can be dropped on them. */
.hero-copy {
  z-index: 1;
}

/* The first line heads the message. The sentence under it sits flush with it, lighter, so it reads
   at a glance. */
.hero .guide-say p:first-child {
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.hero .guide-say p + p {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
}

@media (prefers-reduced-motion: no-preference) {
  /* The hero's bubble comes in as one piece, close button and all. */
  .hero .guide.is-in .guide-say {
    animation: none;
  }

  .hero .guide.is-in .guide-bubble {
    animation: guide-say 0.55s var(--ease) 0.16s backwards;
  }
}

.view figcaption,
.view-cap {
  margin-top: 0.75rem;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--muted);
  padding-inline: 0.25rem;
}

@media (prefers-reduced-motion: no-preference) {
  .view {
    animation: view-in 0.4s var(--ease);
  }
}

@keyframes view-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.bezel-note {
  margin-top: 0.5rem;
  padding: 0 0.25rem;
  font: 400 var(--fs-small)/1.45 var(--sans);
  color: var(--muted);
}

/* Chat */

.chat {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1rem;
  border-radius: var(--r);
  background: var(--bg);
}

.msg {
  max-width: 34rem;
  padding: 0.85rem 1rem;
  border-radius: var(--r-bubble);
  background: var(--surface);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.msg-who {
  display: block;
  margin-bottom: 0.3rem;
  font: 600 var(--fs-small)/1.2 var(--sans);
  color: var(--muted);
}

.msg-user {
  align-self: flex-end;
  background: var(--teal-tint);
  border-bottom-right-radius: var(--r);
}

.msg-user .msg-who {
  color: var(--teal);
}

.msg-otto {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.msg-otto .logo {
  width: 2.5rem;
  margin-top: 0.15rem;
}

.msg-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.msg-ai {
  border-top-left-radius: var(--r);
}

.msg-ai .msg-who {
  color: var(--amber);
}

.ask {
  padding: 0.8rem 1rem;
  border-radius: var(--r);
  background: var(--surface);
  font: 400 var(--fs-small)/1 var(--sans);
  color: var(--muted);
}

.ask span:first-child {
  color: var(--amber);
}

@media (prefers-reduced-motion: no-preference) {
  .chat.is-replay .msg-user,
  .chat.is-replay .msg-otto {
    animation: msg-in 0.5s var(--ease) both;
  }

  .chat.is-replay .msg-otto { animation-delay: 0.45s; }
}

@keyframes msg-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* Sections */

.band {
  padding-block: clamp(2.75rem, 8vw, 7.5rem);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 52rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.band h2 {
  font-size: var(--fs-h2);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.band h3 {
  font-size: var(--fs-lead);
  line-height: 1.3;
  letter-spacing: -0.012em;
}

/* Ledger */

.ledger {
  background: var(--surface);
  border-radius: var(--r);
  padding-block: 0.5rem;
}

.ledger-row {
  display: grid;
  gap: 0.75rem;
  padding: 1.5rem 1.25rem;
}

.ledger-headrow {
  display: none;
}

.ledger-mode {
  font: 500 var(--fs-body)/1.4 var(--sans);
  color: var(--muted);
}

@media (max-width: 63.99rem) {
  .ledger-mode {
    position: absolute;
    width: 1px;
    height: 1px; /* taste-skill-ignore: visually hidden text, not a rule */
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

.ledger-field {
  display: grid;
  gap: 0.5rem;
}

.ledger-field p {
  max-width: 58ch;
}

.ledger-cost {
  display: grid;
  gap: 0.3rem;
  color: var(--ink);
  line-height: 1.5;
}

.m-label {
  font: 500 var(--fs-small)/1.3 var(--sans);
  color: var(--muted);
}

/* Flow: knowledge in, reviewed course out */

.flow {
  --from: inset(0 0 100% 0);
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 28rem;
  margin: 0 auto;
}

.fl-node {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.35rem;
  padding: 1.5rem 1.25rem;
  text-align: center;
  background: var(--surface);
  border-radius: var(--r);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), background-color 0.4s var(--ease), outline-color 0.3s var(--ease);
}

.fl-title {
  font-weight: 600;
  font-size: var(--fs-lead);
  line-height: 1.3;
  letter-spacing: -0.012em;
}

.fl-sub {
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.45;
}

.fl-icon {
  width: 4.25rem;
  height: 4.25rem;
  margin-bottom: 0.5rem;
  overflow: visible;
}

.fl-icon-lg {
  width: 5.25rem;
  height: 5.25rem;
}

.fl-doc,
.fl-doc-back {
  fill: var(--surface);
  stroke-width: 1.8;
}

.fl-doc {
  stroke: var(--ink);
}

.fl-doc-back {
  stroke: var(--muted);
}

.fl-doc-lines {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.fl-harness {
  background: var(--amber-tint);
}

.fl-ring {
  fill: none;
  stroke: var(--amber);
  stroke-width: 1.4;
  stroke-dasharray: 4 5;
  transform-box: view-box;
  transform-origin: 32px 32px;
}

.fl-bot {
  fill: none;
  stroke: var(--amber);
  stroke-width: 2.6;
  stroke-linecap: round;
}

.fl-bot-fill {
  fill: var(--amber);
}

.fl-expert {
  grid-template-columns: auto minmax(0, 1fr);
  justify-items: start;
  align-items: center;
  column-gap: 1rem;
  row-gap: 1rem;
  text-align: left;
  background: var(--teal-tint);
}

.fl-avatar {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--bg);
}

.fl-avatar svg {
  width: 2.25rem;
  height: 2.25rem;
  fill: none;
  stroke: var(--teal);
  stroke-width: 2.6;
  stroke-linecap: round;
}

.fl-expert-text {
  display: grid;
  gap: 0.2rem;
}

.fl-otto {
  padding: 1rem 1rem 1.5rem;
}

.fl-screen {
  width: 100%;
  height: auto;
  margin-bottom: 0.75rem;
}

.fl-s-frame {
  fill: var(--bg);
  stroke: var(--border);
}

.fl-s-rule {
  stroke: var(--border);
}

.fl-s-dot {
  fill: var(--subtle);
}

.fl-s-badge {
  fill: var(--amber);
}

.fl-s-badge-text {
  fill: var(--on-amber);
  font: 700 10px var(--sans);
  letter-spacing: 0.4px;
}

.fl-s-floor {
  fill: var(--surface);
  stroke: var(--line);
  stroke-width: 1.2;
}

.fl-s-solid {
  fill: var(--surface);
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.fl-s-led-teal {
  fill: var(--teal);
}

.fl-s-led-amber {
  fill: var(--amber);
}

.fl-s-wire {
  fill: none;
  stroke: var(--muted);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fl-s-node {
  fill: var(--amber);
  transition: fill 0.5s var(--ease);
}

.fl-s-halo {
  fill: none;
  stroke: var(--amber);
  stroke-width: 1.5;
  opacity: 0.4;
  transform-box: fill-box;
  transform-origin: center;
}

.fl-s-card {
  fill: var(--surface);
  stroke: var(--border);
}

.fl-s-card-lines {
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
}

/* Arrows: a dashed line, a head, and the packet that rides it */

.fl-arrow {
  --c: var(--amber);
  position: relative;
  display: flex;
  justify-content: center;
  height: 4.5rem;
}

.fl-label {
  position: absolute;
  top: 50%;
  left: calc(50% + 1.1rem);
  transform: translateY(-50%);
  width: max-content;
  max-width: 9rem;
  font: 600 var(--fs-small)/1.3 var(--sans);
  color: var(--c);
  transition: opacity 0.5s var(--ease);
}

.fl-line {
  position: relative;
  display: block;
  width: 10px;
  height: 100%;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.fl-line::before,
.fl-line::after {
  content: "";
  position: absolute;
}

.fl-line::before {
  left: 4px;
  top: 0;
  bottom: 8px;
  width: 2px;
  background: var(--c);
  -webkit-mask: var(--dash-y) 0 0 / 100% 11px repeat-y;
  mask: var(--dash-y) 0 0 / 100% 11px repeat-y;
}

.fl-line::after {
  left: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  background: var(--c);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.fl-packet {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.fl-packet::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c);
  outline: 3px solid var(--bg);
}

.fl-loop {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
}

.fl-loop .fl-arrow {
  --c: var(--teal);
  width: 10px;
  height: 4.75rem;
}

.fl-down .fl-label {
  left: auto;
  right: calc(100% + 0.85rem);
  text-align: right;
}

.fl-up .fl-label {
  left: calc(100% + 0.85rem);
}

.fl-loop .fl-line {
  --from: inset(0 0 100% 0);
}

.fl-up .fl-line {
  --from: inset(100% 0 0 0);
}

.fl-up .fl-line::before {
  top: 8px;
  bottom: 0;
}

.fl-up .fl-line::after {
  top: 0;
  bottom: auto;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.fl-controls {
  display: grid;
}

.fl-controls > * {
  grid-area: 1 / 1;
  justify-self: end;
}

.fl-ctl {
  appearance: none;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.85rem;
  border: 0;
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font: 500 var(--fs-small)/1 var(--sans);
  cursor: pointer;
  transition: background-color 0.18s var(--ease), opacity 0.4s var(--ease);
}

.fl-ctl:hover {
  background: var(--border);
}

.fl-ctl svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The prompt: from OTTO back to the expert */

.flow {
  padding-right: 2.5rem;
}

.fl-prompt {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.flow.has-prompt .fl-prompt {
  display: block;
}

.fl-prompt-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.fl-prompt-line {
  fill: none;
  stroke: var(--teal);
  stroke-width: 2;
  stroke-dasharray: 6 5;
  stroke-linejoin: round;
}

.fl-prompt-mask {
  fill: none;
  stroke: #fff;
  stroke-width: 8;
  stroke-dasharray: calc(var(--len, 1000) * 1px);
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.fl-prompt-head {
  fill: var(--teal);
  transition: opacity 0.3s var(--ease) 0.85s;
}

.fl-prompt-label {
  position: absolute;
  transform: translateX(-50%);
  font: 600 var(--fs-small)/1.3 var(--sans);
  text-align: center;
  color: var(--teal);
  transition: opacity 0.5s var(--ease) 0.5s;
}

.fl-prompt-label.is-vertical {
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  white-space: nowrap;
}

.flow.is-pending .fl-prompt:not(.is-in) .fl-prompt-mask {
  stroke-dashoffset: calc(var(--len, 1000) * 1px);
  transition: none;
}

.flow.is-pending .fl-prompt:not(.is-in) .fl-prompt-head,
.flow.is-pending .fl-prompt:not(.is-in) .fl-prompt-label {
  opacity: 0;
  transition: none;
}

/* The build: only when script runs and motion is allowed */

.flow.is-pending .fl-node:not(.is-in) {
  opacity: 0;
  transform: translateY(14px);
}

.flow.is-pending .fl-arrow:not(.is-in) .fl-line {
  clip-path: var(--from);
}

.flow.is-pending .fl-arrow:not(.is-in) .fl-label {
  opacity: 0;
}

.flow.is-pending .fl-say:not(.is-in) {
  visibility: hidden;
  transition: visibility 0s 0.6s;
}

.flow.is-pending .fl-say:not(.is-in) .fl-bubble {
  opacity: 0;
  transform: translateY(8px);
}

.flow.is-pending .fl-say.is-in .fl-bubble + .fl-bubble {
  transition-delay: 0s, 0s, 0s, 0.18s, 0.18s;
}

.flow.is-pending .fl-otto:not(.is-in) .fl-s-node {
  fill: var(--line);
}

/* Expert's call */

.flow[data-flow="feedback"] .fl-harness,
.flow[data-flow="feedback"] .fl-otto {
  background: var(--teal-tint);
}

.fl-note,
.fl-ok {
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.flow[data-flow="feedback"] .fl-note,
.flow[data-flow="approve"] .fl-ok {
  opacity: 1;
}

/* The path not in play goes quiet */

.flow[data-flow="feedback"] .fl-a-course,
.flow[data-flow="approve"] .fl-loop .fl-arrow {
  --c: var(--line);
}

.flow[data-flow="feedback"] .fl-a-course .fl-label,
.flow[data-flow="approve"] .fl-loop .fl-label {
  color: var(--subtle);
}

.flow[data-flow="approve"] .fl-otto {
  background: var(--amber-tint);
}

.flow[data-flow="approve"] .fl-otto .fl-title {
  color: var(--amber);
}

.flow[data-flow="approve"] .fl-main .fl-line::before {
  top: 3.5px;
  height: 3px;
}

.fl-ok-line,
.fl-ok-wire,
.fl-ok-text {
  fill: none;
  stroke: var(--amber);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fl-ok-line {
  stroke-width: 1.8;
}

.fl-ok-wire {
  stroke-width: 2.6;
}

.fl-ok-text {
  stroke-width: 2;
}

.fl-ok-track {
  fill: var(--surface);
}

.fl-ok-bar {
  fill: var(--amber);
  transform-box: fill-box;
  transform-origin: left center;
}

.fl-ok-card {
  fill: var(--amber-tint);
  stroke: var(--amber);
}

.fl-ok-pin {
  fill: var(--amber);
}

.fl-ok-card,
.fl-ok-pin {
  transform-box: fill-box;
  transform-origin: center;
}

.fl-ok-check {
  fill: none;
  stroke: var(--on-amber);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fl-n-ring {
  fill: none;
  stroke: var(--teal);
  stroke-width: 1.6;
  stroke-dasharray: 4 4;
  transform-box: fill-box;
  transform-origin: center;
}

.fl-n-lead {
  fill: none;
  stroke: var(--teal);
  stroke-width: 1.4;
  stroke-linecap: round;
}

.fl-n-card {
  fill: var(--teal-tint);
  stroke: var(--teal);
}

.fl-n-text {
  fill: var(--ink);
  font: 500 11px var(--sans);
}

.fl-n-pin {
  fill: var(--teal);
}

.fl-n-pencil {
  fill: none;
  stroke: var(--bg);
  stroke-width: 1.3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.fl-n-strike,
.fl-n-edit {
  fill: none;
  stroke: var(--teal);
  stroke-linecap: round;
}

.fl-n-strike {
  stroke-width: 1.8;
}

.fl-n-edit {
  stroke-width: 2;
}

.gate-status {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-inline: 0.25rem;
}

.gs-line {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}

.gs-line::before {
  content: "";
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  border-radius: 50%;
}

.gs-notes {
  color: var(--teal);
}

.gs-notes::before {
  background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230b0c0f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.6 14.4l1-3.8 6.4-6.4 2.8 2.8-6.4 6.4zM11.6 5.6l2.8 2.8'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
}

.gs-ok {
  color: var(--amber);
}

.gs-ok::before {
  background: var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230b0c0f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 10.4l3 3 6-6.4'/%3E%3C/svg%3E") center / 0.85rem no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
  .gs-line:not([hidden]) {
    animation: msg-in 0.45s var(--ease) both;
  }
}

.flow.is-pending:not(.is-built) .gate-status {
  opacity: 0;
}

/* How it works: four stages, each a clause beside the screen it describes. They stack on phones and
   under reduced motion; from 64rem main.js holds the section under the bar and slides them across. */

.how {
  padding-block: 0;
}

.how-stage {
  display: grid;
}

.how-say {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) clamp(2rem, 5vw, 3.5rem);
}

.how .how-clause {
  max-width: 11em;
  font-size: var(--fs-h2);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.how-say p {
  max-width: 34em;
  font-size: var(--fs-lead);
  line-height: 1.5;
}

.how-show {
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 4rem) var(--gutter);
  background: var(--surface);
}

.how-show img,
.how-show picture {
  display: block;
  width: 100%;
  max-width: 46rem;
  height: auto;
  border-radius: var(--r);
  background: var(--bg);
}

.how-rail {
  display: grid;
  gap: 0.75rem;
  padding-block: 1rem 1.5rem;
}

.how-line {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--surface);
  overflow: hidden;
}

.how-fill {
  display: block;
  height: 100%;
  background: var(--amber);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

.how-names {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.how-names button {
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: 600 clamp(1.125rem, 0.78rem + 0.85vw, 1.5rem)/1.2 var(--display);
  letter-spacing: -0.02em;
  text-align: left;
  cursor: pointer;
  transition: color 0.18s var(--ease);
}

.how-names button:hover,
.how-names button[aria-current] {
  color: var(--ink);
}

.how-names .is-human button[aria-current] {
  color: var(--teal);
}

@media (min-width: 64rem) {
  .how-stage {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .how-say {
    justify-content: center;
    padding-left: max(var(--gutter), (100vw - var(--page)) / 2);
  }

  /* Sideways: one run of scroll per step, the pin holding the stages under the bar. */
  .how.is-sideways {
    --how-step: 80svh;
    height: calc(100svh - var(--bar-h) + 3 * var(--how-step));
  }

  .how.is-sideways .how-pin {
    position: sticky;
    top: var(--bar-h);
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    height: calc(100svh - var(--bar-h));
    overflow: hidden;
  }

  .how.is-sideways .how-track {
    display: flex;
    width: 400%;
    min-height: 0;
    will-change: transform;
  }

  .how.is-sideways .how-stage {
    flex: 0 0 25%;
    min-height: 0;
  }

  .how.is-sideways .how-show {
    min-height: 0;
  }

  .how.is-sideways .how-show img,
  .how.is-sideways .how-show picture {
    max-height: calc(100svh - var(--bar-h) - 12rem);
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }
}

/* The flow dialog: the diagram whole, a chip per stage to light its parts, Replay to build it again. */

.flowmodal {
  position: fixed;
  inset: 0;
  width: min(80rem, calc(100vw - 2 * var(--gutter)));
  max-width: none;
  max-height: calc(100dvh - 2 * var(--gutter));
  margin: auto;
  padding: 0 clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem);
  border: 0;
  border-radius: var(--r);
  background: var(--bg);
  color: var(--ink);
  overflow: auto;
  overscroll-behavior: contain;
}

/* The diagram's nodes are surface panels, so the dialog stays on the ground and the page behind steps
   almost all the way out. */
.flowmodal::backdrop {
  background: color-mix(in srgb, var(--bg) 94%, transparent);
}

.flowmodal-top {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
  min-height: var(--bar-h);
  background: var(--bg);
}

.flowmodal-top h1:focus,
.flowmodal-top h2:focus {
  outline: none;
}

.flowmodal-top h1,
.flowmodal-top h2 {
  font-family: var(--display);
  font-size: var(--fs-lead);
  line-height: 1.3;
  letter-spacing: -0.012em;
}

.flowmodal-chips {
  margin-bottom: clamp(1rem, 3vw, 2rem);
}

/* The viewer: the flow dialog's frame around one product screen, whole and as large as fits, with its
   caption. */
.viewer-figure {
  display: grid;
  gap: 0.75rem;
}

.viewer-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100dvh - 2 * var(--gutter) - var(--bar-h) - 5rem);
  object-fit: contain;
  border-radius: var(--r);
  background: var(--surface);
}

.viewer-cap {
  font: 400 var(--fs-small)/1.45 var(--sans);
  color: var(--muted);
}

/* Lit: the stage in play is ringed and its connector goes solid. The rest stays at full strength. */
.flow.is-built[data-focus="know"] [data-at="1"],
.flow.is-built[data-focus="harness"] [data-at="3"],
.flow.is-built[data-focus="course"] [data-at="8"] {
  outline: 2px solid var(--amber);
  outline-offset: 4px;
}

.flow.is-built[data-focus="expert"] [data-at="5"] {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
}

.flow.is-built[data-focus="know"] [data-at="2"] .fl-line::before,
.flow.is-built[data-focus="harness"] [data-at="4"] .fl-line::before,
.flow.is-built[data-focus="expert"] [data-at="6"] .fl-line::before,
.flow.is-built[data-focus="course"] [data-at="7"] .fl-line::before {
  left: 3.5px;
  width: 3px;
  -webkit-mask: none;
  mask: none;
}

@media (min-width: 64rem) {
  .flow.is-built[data-focus="know"] [data-at="2"] .fl-line::before,
  .flow.is-built[data-focus="course"] [data-at="7"] .fl-line::before {
    left: 0;
    right: 8px;
    top: 3.5px;
    bottom: auto;
    width: auto;
    height: 3px;
    -webkit-mask: none;
    mask: none;
  }
}

.flow.is-built[data-focus="know"] [data-at="2"] .fl-label,
.flow.is-built[data-focus="course"] [data-at="7"] .fl-label {
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: var(--amber-tint);
}

.flow.is-built[data-focus="harness"] [data-at="4"] .fl-label,
.flow.is-built[data-focus="expert"] [data-at="6"] .fl-label {
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: var(--teal-tint);
}

.flow.is-built[data-focus="expert"] .fl-prompt-line {
  stroke-width: 3.25;
}

/* The expert's call: two bubbles spoken from the expert node */

.fl-say {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 0.85rem;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), visibility 0s;
}

.fl-bubble {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.7rem 1.1rem;
  border: 0;
  border-radius: var(--r-bubble);
  border-top-left-radius: var(--r);
  font: 500 var(--fs-body)/1.35 var(--sans);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.5s var(--ease), opacity 0.5s var(--ease);
}

.fl-bubble svg {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fl-bubble-notes {
  background: color-mix(in srgb, var(--teal) 18%, var(--bg));
}

.fl-bubble-notes svg {
  color: var(--teal);
}

.fl-bubble-notes:hover {
  background: color-mix(in srgb, var(--teal) 30%, var(--bg));
}

.fl-bubble-notes[aria-pressed="true"] {
  background: var(--teal);
  color: var(--bg);
}

.fl-bubble-notes[aria-pressed="true"] svg {
  color: var(--bg);
}

.fl-bubble-ok {
  background: color-mix(in srgb, var(--amber) 16%, var(--bg));
}

.fl-bubble-ok svg {
  color: var(--amber);
}

.fl-bubble-ok:hover {
  background: color-mix(in srgb, var(--amber) 26%, var(--bg));
}

.fl-bubble:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.fl-bubble-ok:disabled:hover {
  background: color-mix(in srgb, var(--amber) 16%, var(--bg));
}

.fl-bubble-ok[aria-pressed="true"] {
  background: var(--amber);
  color: var(--on-amber);
}

.fl-bubble-ok[aria-pressed="true"] svg {
  color: var(--on-amber);
}

@keyframes fl-run {
  0% { opacity: 0; transform: translateY(0); }
  12% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(calc(100% - 10px)); }
}

@keyframes fl-run-up {
  0% { opacity: 0; transform: translateY(calc(100% - 10px)); }
  12% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(0); }
}

@keyframes fl-run-main {
  0% { opacity: 0; transform: translateY(0); }
  12% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(calc(100% - 10px)); }
}

@keyframes fl-dash-main {
  to { -webkit-mask-position: 0 11px; mask-position: 0 11px; }
}

@keyframes fl-dash {
  to { -webkit-mask-position: 0 11px; mask-position: 0 11px; }
}

@keyframes fl-dash-up {
  to { -webkit-mask-position: 0 -11px; mask-position: 0 -11px; }
}

@keyframes fl-spin {
  to { transform: rotate(360deg); }
}

@keyframes fl-n-ring {
  from { opacity: 0; transform: scale(0.8); }
}

@keyframes fl-n-draw {
  from { stroke-dashoffset: 90; }
  to { stroke-dashoffset: 0; }
}

@keyframes fl-ok-draw {
  from { stroke-dashoffset: 400; }
  to { stroke-dashoffset: 0; }
}

@keyframes fl-ok-fill {
  from { transform: scaleX(0); }
}

@keyframes fl-halo {
  0% { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .flow.is-pending:not(.is-built) .fl-arrow.is-in .fl-packet {
    animation: fl-run 0.95s cubic-bezier(0.4, 0, 0.2, 1) both;
  }

  .flow.is-pending:not(.is-built) .fl-main.is-in .fl-packet {
    animation-name: fl-run-main;
  }

  .flow.is-pending:not(.is-built) .fl-up.is-in .fl-packet {
    animation-name: fl-run-up;
  }

  .flow.is-live .fl-main .fl-line::before {
    animation: fl-dash-main 1s linear infinite;
  }

  .flow.is-live .fl-harness.is-in .fl-ring {
    animation: fl-spin 28s linear infinite;
  }

  .flow.is-live[data-flow="feedback"] .fl-loop .fl-line::before {
    animation: fl-dash 1s linear infinite;
  }

  .flow.is-live[data-flow="feedback"] .fl-up .fl-line::before {
    animation-name: fl-dash-up;
  }

  .flow.is-live[data-flow="feedback"] .fl-down .fl-packet {
    animation: fl-run 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }

  .flow.is-live[data-flow="feedback"] .fl-up .fl-packet {
    animation: fl-run-up 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.8s infinite;
  }

  .flow.is-live[data-flow="approve"] .fl-a-course .fl-packet {
    animation: fl-run-main 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }

  .flow[data-flow="feedback"] .fl-n-ring {
    animation: fl-n-ring 0.6s var(--ease) both;
  }

  .flow[data-flow="feedback"] .fl-n-strike,
  .flow[data-flow="feedback"] .fl-n-edit {
    stroke-dasharray: 90;
    animation: fl-n-draw 0.5s var(--ease) 0.35s both;
  }

  .flow[data-flow="approve"] .fl-ok-line,
  .flow[data-flow="approve"] .fl-ok-wire,
  .flow[data-flow="approve"] .fl-ok-text {
    stroke-dasharray: 400;
    animation: fl-ok-draw 0.9s var(--ease) both;
  }

  .flow[data-flow="approve"] .fl-ok-bar {
    animation: fl-ok-fill 1.4s var(--ease) 0.3s both;
  }

  .flow[data-flow="approve"] .fl-ok-card,
  .flow[data-flow="approve"] .fl-ok-pin {
    animation: fl-n-ring 0.5s var(--ease) 0.5s both;
  }

  .flow.is-live[data-flow="approve"] .fl-a-know .fl-packet {
    animation: fl-run-main 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }

  .flow.is-live[data-flow="approve"] .fl-s-halo {
    animation: fl-halo 1.6s var(--ease) infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fl-node,
  .fl-line,
  .fl-label,
  .fl-prompt-mask,
  .fl-prompt-head,
  .fl-prompt-label {
    transition: none;
  }
}

/* The way into the Try a room dialog, at the end of Learn the plant */

.try-entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem 1.25rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--surface);
  border-radius: var(--r);
}

.try-entry .logo {
  width: 3rem;
}

.try-entry-text {
  display: grid;
  gap: 0.4rem;
}

.try-entry-text p {
  max-width: 60ch;
}

.try-entry .btn {
  grid-column: 1 / -1;
  justify-self: start;
}

.try-q {
  display: grid;
  gap: 0.85rem;
  align-content: start;
}

.try-q > p {
  max-width: 58ch;
}

.try-opts {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.4rem;
}

.try-opt {
  appearance: none;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.7rem 1rem 0.7rem 0.75rem;
  border: 0;
  border-radius: var(--r);
  background: var(--bg);
  color: var(--ink);
  font: 500 var(--fs-body)/1.4 var(--sans);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.18s var(--ease);
}

.try-opt:hover {
  background: var(--border);
}

.try-key {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--surface);
  font: 600 var(--fs-small)/1 var(--sans);
  color: var(--muted);
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}

/* The learner's pick is their own words, so it takes the human teal. */
.try-opt[aria-pressed="true"] {
  background: var(--teal-tint);
}

.try-opt[aria-pressed="true"] .try-key {
  background: var(--teal);
  color: var(--bg);
}

/* Learn the plant by working it: one practice screen, notes in both margins that light what they
   describe. Phone-first: the notes sit two-up under the screen. */

.plant-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 1rem;
}

.plant-title {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.plant-panel,
.plant .try-entry {
  grid-column: 1 / -1;
}

.plant-notes {
  display: grid;
  gap: 1.5rem;
  align-content: start;
}

.plant-notes li {
  display: grid;
  gap: 0.3rem;
  border-radius: var(--r);
  outline-offset: 6px;
  cursor: default;
}

.plant-notes strong {
  font-weight: 600;
  line-height: 1.3;
  transition: color 0.18s var(--ease);
}

.plant-notes span {
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.plant-notes li.is-on strong {
  color: var(--amber);
}

/* The practice screen as OTTO shows it: a surface panel, its parts recessed to graphite. */
.tutor {
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  border-radius: var(--r);
  background: var(--surface);
  font-size: var(--fs-small);
  line-height: 1.45;
}

.tutor-path {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.tutor-path span {
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  font-size: 0.8125rem;
}

.tutor-path .is-on {
  background: var(--amber-tint);
  color: var(--amber);
}

.tutor-label {
  color: var(--amber);
  font-size: 0.8125rem;
  font-weight: 600;
}

.tutor-prompt {
  margin-top: -0.4rem;
  font-size: 0.9375rem;
}

.tutor-options {
  display: grid;
  gap: 0.5rem;
}

.tutor-options li {
  display: block;
}

.tutor-opt {
  display: grid;
  gap: 0.2rem;
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 0;
  border-radius: var(--r);
  background: var(--bg);
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: start;
  cursor: pointer;
}

.tutor-opt:hover {
  background: color-mix(in srgb, var(--ink) 8%, var(--bg));
}

.tutor-options strong {
  font-weight: 600;
}

.tutor-options span {
  color: var(--muted);
}

.tutor-opt.is-picked,
.tutor-opt.is-picked:hover {
  background: var(--amber-tint);
}

.tutor-opt.is-picked strong {
  color: var(--amber);
}

.tutor-reply {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
  padding: 0.75rem;
  border-radius: 14px 14px 14px 4px;
  background: var(--amber-tint);
  color: var(--ink);
}

.tutor-reply [hidden] {
  display: none;
}

.tutor-reply-copy {
  display: grid;
  gap: 0.35rem;
}

.tutor-verdict {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--amber);
  font-weight: 600;
}

.tutor-mark {
  width: 1rem;
  height: 1rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tutor-reply .logo {
  width: 2rem;
}

.tutor-next {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
}

.tutor-continue {
  padding: 0.4rem 0.9rem;
  border-radius: var(--r);
  background: var(--amber);
  color: var(--on-amber);
  font-weight: 600;
}

/* A note points at its part with the focus ring's amber. */
.tutor [data-part] {
  border-radius: var(--r);
  outline: 2px solid transparent;
  outline-offset: 4px;
  transition: outline-color 0.18s var(--ease);
}

.tutor [data-part].is-lit {
  outline-color: var(--amber);
}

@media (min-width: 40rem) {
  .plant-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
  }

  .plant-panel {
    grid-column: 1 / span 7;
    grid-row: 1 / span 2;
  }

  .plant-notes-left {
    grid-column: 8 / -1;
    grid-row: 1;
  }

  .plant-notes-right {
    grid-column: 8 / -1;
    grid-row: 2;
  }
}

@media (min-width: 64rem) {
  .plant-panel {
    grid-column: 5 / span 4;
    grid-row: 1 / span 2;
  }

  .plant-notes li {
    max-width: 24ch;
  }

  .plant-notes-left {
    grid-column: 1 / span 4;
    grid-row: 1 / span 2;
    text-align: right;
  }

  .plant-notes-left li {
    margin-left: auto;
  }

  .plant-notes-right {
    grid-column: 9 / span 4;
    grid-row: 1 / span 2;
  }

  /* With the script, each note sits level with the part it describes. */
  .plant-grid.js-notes .plant-notes {
    display: block;
    position: relative;
  }

  .plant-grid.js-notes .plant-notes-left {
    grid-row: 1 / span 2;
  }

  .plant-grid.js-notes .plant-notes li {
    position: absolute;
    left: 0;
    right: 0;
  }

  .plant-grid.js-notes .plant-notes-left li {
    left: auto;
  }
}

/* Who it's for: the title sits whole on the graphite half, above what you bring. "You get" lines up
   with that, on a white wash at the bottom of the photograph. OTTO's line sits mid-image.
   Phone-first: the halves stack, the light one under the dark. */

.who {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.who-dark,
.who-light {
  display: none;
}

.who-title {
  grid-row: 1;
  padding: clamp(2.75rem, 8vw, 4rem) var(--gutter) 1.5rem;
  font-size: var(--fs-display);
  font-weight: 650;
  line-height: 0.98;
  letter-spacing: -0.04em;
}

:root:lang(es) .who-title {
  font-size: clamp(1.375rem, 0.39rem + 4.43vw, 4.5rem);
}

.who-tabs {
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 var(--gutter) 1.5rem;
}

.who-tabs[hidden] {
  display: none;
}

.who-tab {
  min-height: 2.75rem;
  padding: 0 1.1rem;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: 500 var(--fs-small)/1 var(--sans);
  cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}

.who-tab[aria-selected="true"] {
  background: var(--ink);
  color: var(--bg);
}

.who-panels {
  grid-row: 3;
}

.who-name {
  padding: 1.5rem var(--gutter) 0;
  font-size: var(--fs-lead);
}

/* Once the tabs run, the tab names the panel. */
.who-tabs:not([hidden]) ~ .who-panels .who-name {
  display: none;
}

.who-bring,
.who-get {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding: 1.5rem var(--gutter) 2.5rem;
  font-size: var(--fs-lead);
  line-height: 1.4;
}

.who-bring p,
.who-get p {
  max-width: 24em;
}

.who-kind {
  color: var(--muted);
}

.who-get {
  background-color: var(--ink);
  background-position: center;
  background-size: cover;
  color: var(--bg);
}

/* On a phone the white block is the “you get” panel, so the photo lives there, washed white. */
#who-oem .who-get {
  background-image:
    linear-gradient(rgb(237 239 242 / 0.72), rgb(237 239 242 / 0.72)),
    url("assets/delivery/equipment-manufacturers.jpg");
}

#who-si .who-get {
  background-image:
    linear-gradient(rgb(237 239 242 / 0.72), rgb(237 239 242 / 0.72)),
    url("assets/delivery/system-integrators.jpg");
}

#who-op .who-get {
  background-image:
    linear-gradient(rgb(237 239 242 / 0.72), rgb(237 239 242 / 0.72)),
    url("assets/delivery/plant-vessel-teams.jpg");
}

.who-get .who-kind {
  color: var(--light-muted);
}

.who-get-copy {
  display: grid;
  gap: 0.6rem;
}

.who-say {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  max-width: 22.4rem;
  margin-top: 1rem;
}

.who-fit {
  position: relative;
  margin: 0 0 0.35rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--r-bubble);
  border-bottom-left-radius: 4px;
  background: var(--amber);
  color: var(--on-amber);
  font: 500 var(--fs-small) / 1.35 var(--sans);
  max-width: none;
}

.who-fit::before {
  content: "";
  position: absolute;
  left: -0.28rem;
  bottom: 0.55rem;
  width: 0.7rem;
  height: 0.7rem;
  background: var(--amber);
  transform: rotate(45deg);
}

@media (min-width: 40rem) {
  .who {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    overflow: clip;
  }

  .who-dark,
  .who-light {
    display: block;
    grid-row: 1 / -1;
  }

  .who-dark {
    grid-column: 1;
  }

  .who-light {
    position: relative;
    grid-column: 2;
    background-color: var(--ink);
    background-position: center 30%;
    background-size: cover;
  }

  /* The selected audience’s photograph fills the white half. A white wash keeps the type readable. */
  .who:has(.who-tabs:not([hidden])):has(#tab-oem[aria-selected="true"]) .who-light {
    background-image: url("assets/delivery/equipment-manufacturers.jpg");
  }

  .who:has(.who-tabs:not([hidden])):has(#tab-si[aria-selected="true"]) .who-light {
    background-image: url("assets/delivery/system-integrators.jpg");
  }

  .who:has(.who-tabs:not([hidden])):has(#tab-op[aria-selected="true"]) .who-light {
    background-image: url("assets/delivery/plant-vessel-teams.jpg");
  }

  .who:has(.who-tabs:not([hidden])) .who-light::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(to bottom, transparent 0 46%, rgb(237 239 242 / 0.4) 56%, rgb(237 239 242 / 0.9) 64%, #edeff2 72%);
    pointer-events: none;
  }

  /* The panels dissolve into the section grid, so "You get" shares a row with "You bring"
     and the OTTO line can sit in the middle of the photograph. */
  .who-tabs:not([hidden]) ~ .who-panels,
  .who-tabs:not([hidden]) ~ .who-panels .who-panel:not([hidden]),
  .who-tabs:not([hidden]) ~ .who-panels .who-get {
    display: contents;
  }

  .who-tabs {
    position: relative;
    grid-column: 1;
    grid-row: 2;
    padding: 1.25rem var(--gutter) 0;
    padding-left: max(var(--gutter), (100vw - var(--page)) / 2);
  }

  .who-panels {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .who-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .who-panel[hidden] {
    display: none;
  }

  .who-name {
    grid-column: 1 / -1;
    padding-left: max(var(--gutter), (100vw - var(--page)) / 2);
  }

  .who-bring,
  .who-get {
    padding-block: clamp(2rem, 1rem + 5vh, 5rem) clamp(2rem, 1rem + 3vw, 4rem);
  }

  .who-bring {
    grid-column: 1;
    grid-row: 3;
    position: relative;
    z-index: 1;
    padding-left: max(var(--gutter), (100vw - var(--page)) / 2);
  }

  .who-tabs:not([hidden]) ~ .who-panels .who-get-copy {
    display: grid;
    align-content: start;
    gap: 0.6rem;
    grid-column: 2;
    grid-row: 3;
    position: relative;
    z-index: 1;
    align-self: start;
    padding-block: clamp(2rem, 1rem + 5vh, 5rem) clamp(2rem, 1rem + 3vw, 4rem);
    padding-left: clamp(1.5rem, 1rem + 3vw, 4rem);
    padding-right: var(--gutter);
  }

  .who-tabs:not([hidden]) ~ .who-panels .who-say {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    justify-self: end;
    z-index: 2;
    width: max-content;
    max-width: min(22.4rem, 80%);
    margin: 0 var(--gutter) 0 1.5rem;
  }

  .who-tabs:not([hidden]) ~ .who-panels .who-fit {
    min-width: 0;
  }

  .who-title {
    position: relative;
    z-index: 1;
    grid-column: 1;
    grid-row: 1;
    padding: clamp(2.75rem, 5vw, 4.25rem) var(--gutter) clamp(1.25rem, 0.5rem + 1.5vw, 2rem);
    padding-left: max(var(--gutter), (100vw - var(--page)) / 2);
  }

  .who-title span {
    display: block;
    padding: 0;
    background: none;
    color: inherit;
  }
}

@media (min-width: 40rem) and (prefers-reduced-motion: no-preference) {
  .who-tabs:not([hidden]) ~ .who-panels .who-say {
    animation: who-say-in 0.75s var(--ease) both;
  }
}

@keyframes who-say-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* Data */

.data-grid {
  display: grid;
}

.owner {
  margin-top: 0.75rem;
  color: var(--ink);
  font-weight: 600;
  max-width: 40ch;
}

.terms {
  display: grid;
  gap: 2rem;
}

.terms > div {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  column-gap: 0.85rem;
  row-gap: 0.35rem;
}

.terms > div::before {
  content: "";
  grid-row: 1 / span 2;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  background: var(--amber);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='8.2'/%3E%3Cpath d='M6.4 10.3l2.4 2.4 4.8-5'/%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 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='8.2'/%3E%3Cpath d='M6.4 10.3l2.4 2.4 4.8-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.terms > div.is-human::before {
  background: var(--teal);
}

.terms dt {
  font-weight: 600;
  font-size: var(--fs-lead);
  line-height: 1.35;
}

.terms dd {
  max-width: 58ch;
}

/* Pilot: the page's one amber field, the primary action at full size. The steps read in
   graphite on amber; the demo offer is a graphite card with the amber button. */

.pilot {
  background: var(--amber);
  color: var(--on-amber);
}

.pilot-in {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}

.pilot-say {
  display: grid;
  align-content: start;
  gap: 1.75rem;
}

.pilot .pilot-title {
  max-width: 9em;
  font-size: var(--fs-display);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

:root:lang(es) .pilot .pilot-title {
  font-size: clamp(1.375rem, 0.39rem + 4.43vw, 4.5rem);
}

.pilot-lede {
  max-width: 34em;
  font-size: var(--fs-lead);
  line-height: 1.45;
}

.pilot-weeks {
  display: grid;
  gap: 1.35rem;
  counter-reset: pilot;
}

.pilot-weeks li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: 0.15rem 0.75rem;
  max-width: 44em;
  counter-increment: pilot;
}

.pilot-weeks li::before {
  content: counter(pilot);
  grid-row: 1;
  align-self: center;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r);
  background: var(--on-amber);
  color: var(--amber);
  font: 600 0.8125rem/1 var(--sans);
}

.pilot-weeks strong {
  align-self: center;
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.3;
}

.pilot-weeks li > span {
  grid-column: 2;
}

.demo {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 1.25rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--ink);
}

.band .demo-title {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.demo-covers {
  max-width: 34em;
  color: var(--muted);
  font-size: var(--fs-lead);
  line-height: 1.5;
}

.demo-go {
  width: 100%;
}

.demo-note {
  color: var(--muted);
  font-size: var(--fs-small);
}

.demo-note a {
  color: var(--ink);
}

/* From tablet width the three steps sit side by side, so the amber column is no taller than
   it needs to be and the demo card beside it matches its height. */

@media (min-width: 40rem) {
  .pilot-weeks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .pilot-weeks li {
    row-gap: 0.5rem;
  }

  .pilot-weeks li > span {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64rem) {
  .pilot-in {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: stretch;
  }

  .demo {
    align-content: center;
  }
}

/* Footer: tiles on the graphite ground, apart by space alone: who makes OTTO, the sections, the
   address, the lockup large on its own tile. */

.foot {
  padding: clamp(2rem, 5vw, 3.5rem) var(--gutter) 2rem;
}

.foot-tiles,
.foot-screens {
  max-width: var(--page);
  margin-inline: auto;
}

.foot-tiles {
  display: grid;
  gap: 0.5rem;
}

.foot-tile {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: var(--r);
  background: var(--surface);
}

.foot-about,
.foot-mail {
  display: grid;
  align-content: space-between;
  gap: 1.5rem;
}

.foot-statement {
  font-size: var(--fs-lead);
}

.foot-tile a {
  color: var(--ink);
}

.foot-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: var(--fs-small);
}

.foot-legal a[aria-current="page"],
.foot-nav a[aria-current="page"] {
  color: var(--muted);
  text-decoration: none;
}

.foot-copy,
.foot-mail p,
.foot-screens {
  color: var(--muted);
  font-size: var(--fs-small);
}

.foot-nav ul {
  display: grid;
  gap: 0.35rem;
}

.foot-nav a {
  text-decoration: none;
}

.foot-nav a:hover {
  text-decoration: underline;
}

.foot-mail a {
  font-size: var(--fs-lead);
}

.foot-name {
  display: grid;
  place-items: center;
  min-height: 11rem;
}

.foot-name .lockup {
  width: min(100%, 34rem);
  height: auto;
}

.foot-tile.foot-go {
  display: grid;
  align-content: space-between;
  gap: 2rem;
  min-height: 11rem;
  background: var(--amber);
  color: var(--on-amber);
  font-family: var(--display);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-decoration: none;
  transition: background-color 0.18s var(--ease);
}

.foot-go svg {
  justify-self: end;
  width: 2.5rem;
  height: 2.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  transition: transform 0.18s var(--ease);
}

.foot-tile.foot-go:hover {
  background: var(--amber-hover);
}

.foot-go:hover svg {
  transform: translate(3px, -3px);
}

/* How it works and Why OTTO?: two words a tile, set to fill it. The type is sized to the tile, not the
   screen, so the two lines fill it at every width. How it works sits on graphite beside the lockup; Why
   OTTO? closes the footer in amber. */
.foot-tile.foot-why,
.foot-tile.foot-how {
  display: grid;
  min-height: 11rem;
  container-type: inline-size;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.03em;
  text-decoration: none;
  transition: background-color 0.18s var(--ease);
}

.foot-tile.foot-how {
  color: var(--ink);
}

.foot-tile.foot-why {
  background: var(--amber);
  color: var(--on-amber);
}

.foot-why span,
.foot-how span {
  grid-area: 1 / 1;
  font-size: 20cqi;
  line-height: 1;
}

.foot-why svg,
.foot-how svg {
  grid-area: 1 / 1;
  align-self: end;
  justify-self: end;
  width: 2.5rem;
  height: 2.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  transition: transform 0.18s var(--ease);
}

.foot-tile.foot-how:hover {
  background: var(--border);
}

.foot-tile.foot-why:hover {
  background: var(--amber-hover);
}

.foot-why:hover svg,
.foot-how:hover svg {
  transform: translateX(3px);
}

/* On its own page a tile is where you already are: How it works dims; Why OTTO? stays amber, without its arrow. */
.foot-tile.foot-how[aria-current="page"] {
  color: var(--muted);
  background: var(--surface);
}

.foot-tile.foot-why[aria-current="page"] {
  background: var(--amber);
  cursor: default;
}

.foot-why[aria-current="page"] svg,
.foot-how[aria-current="page"] svg {
  visibility: hidden;
}

.foot-screens {
  margin-top: 1.25rem;
}

@media (min-width: 40rem) {
  .foot-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: dense;
  }

  .foot-name {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64rem) {
  .foot-tiles {
    grid-template-columns: 5fr 3fr 4fr;
  }

  .foot-name {
    grid-column: 1 / span 2;
    min-height: 16rem;
  }

  .foot-tile.foot-go,
  .foot-tile.foot-why {
    min-height: 16rem;
  }
}

@media (max-width: 39.99rem) {
  .view img {
    aspect-ratio: 4 / 3;
  }

  .cta-row .btn {
    width: 100%;
  }

  .chip {
    padding: 0 0.9rem;
  }

  .chip-long {
    display: none;
  }

  .fl-ctl {
    padding: 0;
  }

  .fl-ctl span {
    position: absolute;
    width: 1px;
    height: 1px; /* taste-skill-ignore: visually hidden text, not a rule */
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .chip-short {
    display: inline;
  }
}

/* Tablet */

@media (min-width: 40rem) {
  .bar-cta {
    display: inline-flex;
  }

  /* The masthead and the title are two things: the rig's readouts never sit just over the headline. */
  .hero-mark {
    margin-bottom: 5.5rem;
  }

  .status {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
  }

  /* The product page's footer also lists the sections, so it stays one column until desktop. */

}

/* Desktop */

@media (min-width: 64rem) {
  /* The ledger becomes a table only where its middle column can hold a heading in two lines. */
  .ledger-headrow {
    display: grid;
    padding-block: 1.25rem 0;
    font: 500 var(--fs-small)/1.3 var(--sans);
    color: var(--muted);
  }

  .ledger-row {
    grid-template-columns: 10rem minmax(0, 1fr) 13rem;
    gap: 2rem;
    padding-inline: 1.75rem;
  }

  .ledger-mode {
    padding-top: 0.25rem;
  }

  .ledger-cost .m-label {
    display: none;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: 2rem clamp(2.5rem, 4vw, 4rem);
  }

  .hero h1 {
    grid-column: 1 / -1;
  }

  .hero-copy {
    align-self: stretch;
  }

  .hero-copy .guide {
    margin-top: auto;
  }

  .status {
    flex-direction: column;
  }

  .bezel {
    padding: 1rem;
  }

  /* Only the chosen view is on the page; two caption lines keep the frame's height across chips. */
  .view figcaption,
  .view-cap {
    min-height: 3em;
  }

  .view-otto .chat {
    min-height: 0;
    aspect-ratio: 2880 / 1682;
    justify-content: center;
    gap: 0.7rem;
    padding: 1.25rem 1.75rem;
  }

  .view-otto .msg {
    padding: 0.7rem 0.95rem;
  }

  .view-otto .ask {
    padding: 0.65rem 0.95rem;
  }

  .flow {
    --from: inset(0 100% 0 0);
    display: grid;
    max-width: none;
    padding-right: 0;
    padding-bottom: 3rem;
    grid-template-columns: minmax(0, 0.9fr) 7.5rem minmax(0, 1fr) 7.5rem minmax(0, 1.35fr);
    align-items: center;
    padding-top: 3rem;
  }

  .fl-know {
    grid-area: 1 / 1;
    min-height: 14rem;
  }

  .fl-a-know {
    grid-area: 1 / 2;
  }

  .fl-harness {
    grid-area: 1 / 3;
    min-height: 14rem;
  }

  .fl-a-course {
    grid-area: 1 / 4;
  }

  .fl-otto {
    grid-area: 1 / 5;
    margin-block: -3.5rem;
  }

  .fl-loop {
    grid-area: 2 / 3;
  }

  .fl-loop .fl-arrow {
    height: 5.25rem;
  }

  .fl-expert {
    grid-area: 3 / 3;
  }

  .fl-say {
    grid-area: 3 / 1 / 4 / 3;
    justify-self: end;
    align-self: center;
    align-items: flex-end;
    margin: 0 1.25rem 0 0;
  }

  .fl-bubble {
    border-top-left-radius: var(--r);
    border-bottom-right-radius: 6px;
  }

  .flow.is-pending .fl-say:not(.is-in) .fl-bubble {
    transform: translateX(10px);
  }

  .flow .gate-status {
    grid-area: 2 / 5 / 4 / 6;
    align-self: start;
    margin-top: 4.75rem;
    padding-left: 3.25rem;
  }

  .fl-main {
    height: 10px;
    margin-inline: 0.6rem;
  }

  .fl-main .fl-label {
    top: auto;
    bottom: calc(100% + 0.7rem);
    left: 50%;
    max-width: none;
    white-space: nowrap;
    transform: translateX(-50%);
  }

  .fl-main .fl-line {
    width: 100%;
    height: 10px;
  }

  .fl-main .fl-line::before {
    left: 0;
    right: 8px;
    top: 4px;
    bottom: auto;
    width: auto;
    height: 2px;
    -webkit-mask: var(--dash-x) 0 0 / 11px 100% repeat-x;
    mask: var(--dash-x) 0 0 / 11px 100% repeat-x;
  }

  .fl-main .fl-line::after {
    left: auto;
    right: 0;
    top: 0;
    bottom: auto;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }

  @keyframes fl-run-main {
    0% { opacity: 0; transform: translateX(0); }
    12% { opacity: 1; }
    85% { opacity: 1; }
    100% { opacity: 0; transform: translateX(calc(100% - 10px)); }
  }

  @keyframes fl-dash-main {
    to { -webkit-mask-position: 11px 0; mask-position: 11px 0; }
  }

  .data-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }

  .data-grid .section-head {
    margin-bottom: 0;
    position: sticky;
    top: calc(var(--bar-h) + 2rem);
  }
}

@media (min-width: 64rem) and (max-width: 79.99rem) {
  .flow {
    grid-template-columns: minmax(0, 0.9fr) 6.75rem minmax(0, 1fr) 6.75rem minmax(0, 1.3fr);
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

}

/* The section links join the bar only where they fit beside both room and demo buttons, in both languages. */

@media (min-width: 80rem) {
  .nav {
    display: flex;
    margin-right: auto;
  }

  .menu-btn {
    display: none;
  }

  .brand {
    margin-right: 1rem;
  }

  .nav a,
  .bar .btn {
    white-space: nowrap;
  }
}

/* Try a room: a lesson-shaped modal over the dimmed page */

html:has(.tryroom[open]) {
  overflow: hidden;
}

.tryroom {
  --room-pad: clamp(1rem, 3vw, 2rem);
  position: fixed;
  inset: 0;
  width: min(72rem, calc(100vw - 2 * var(--gutter)));
  max-width: none;
  height: min(56rem, calc(100dvh - 2 * var(--gutter)));
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  overflow: hidden;
}

.tryroom[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.tryroom::backdrop {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
}

.room-top,
.room-foot {
  padding-inline: var(--room-pad);
}

.room-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
  height: var(--bar-h);
}

.room-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.375rem;
  width: 100%;
  max-width: 28rem;
}

.room-progress li {
  position: relative;
  height: 4px;
  background: var(--border);
  overflow: hidden;
}

.room-progress li::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}

.room-progress li.is-on::after {
  transform: none;
}

.room-count {
  min-width: 2.75rem;
  text-align: right;
  font: 500 var(--fs-small)/1 var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.room-count-now {
  color: var(--amber);
}

.room-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block: clamp(1.25rem, 2.4vw, 1.5rem);
}

.room-grid,
.room-done {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--room-pad);
}

/* One column of work. OTTO floats over its top right corner on a wide screen and follows the work on a
   narrow one. The grid fills the body, so OTTO can be dragged anywhere in it. */
.room-grid {
  position: relative;
  display: grid;
  gap: 1.5rem;
  align-content: start;
  min-height: 100%;
}

.room-main {
  min-width: 0;
}

.room-step {
  display: grid;
  gap: 1.5rem;
}

/* Each step says what to do right under its name, before anything else asks for attention. */
.room-head {
  display: grid;
  gap: 0.5rem;
}

.room-task {
  max-width: 72ch;
  color: var(--muted);
  text-wrap: pretty;
}

.room-head h2,
.room-done h2 {
  font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.018em;
}

.tryroom h2:focus {
  outline: none;
}

/* The product screen, cropped under its own course bar, with points to open */

.room-step > * {
  min-width: 0;
}

.room-pan {
  padding: 0.75rem;
  border-radius: var(--r);
  background: var(--bg);
  overflow-x: auto;
  scrollbar-width: thin;
}

.room-shot {
  --ratio: 1.907;
  --top: -11.323%;
  position: relative;
  aspect-ratio: var(--ratio);
  overflow: hidden;
  border-radius: var(--r);
  background: var(--bg);
}

.room-shot img {
  position: absolute;
  left: 0;
  top: var(--top);
  width: 100%;
  max-width: none;
}

.room-pan-hint {
  display: none;
}

.spot-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.spot-route polyline {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.spot-route .route-case {
  stroke: var(--bg);
  stroke-width: 5;
}

.spot-route .route-line {
  stroke: var(--amber);
  stroke-width: 2.5;
  stroke-dasharray: 6 5;
}

.spot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 1;
  width: 2.75rem;
  height: 2.75rem;
  margin: -1.375rem 0 0 -1.375rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.spot::before,
.spot::after {
  content: "";
  position: absolute;
  inset: 0.6rem;
  border-radius: 50%;
  border: 2px solid var(--amber);
}

.spot::before {
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  transition: background-color 0.25s var(--ease);
}

.spot::after {
  opacity: 0;
}

.spot:hover::before,
.spot.is-lit:not(.is-done)::before {
  background: var(--amber-tint);
}

.spot.is-lit:not(.is-done)::before {
  inset: 0.35rem;
}

.spot:focus-visible {
  border-radius: 50%;
  outline-offset: -2px;
}

.spot.is-done::before {
  background: var(--amber);
}

/* Each point carries its name, so nobody has to guess what the ring stands for. */
.spot-name {
  position: absolute;
  left: 50%;
  top: calc(100% - 0.35rem);
  transform: translateX(-50%);
  width: max-content;
  max-width: 5rem;
  padding: 0.15rem 0.35rem;
  border-radius: var(--r);
  background: var(--bg);
  color: var(--ink);
  font: 500 0.6875rem/1.2 var(--sans);
  text-align: center;
  pointer-events: none;
}

.spot.is-done::after {
  inset: 0.95rem;
  opacity: 1;
  border: 0;
  border-radius: 0;
  background: var(--on-amber);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.4l3.2 3.1L13 4.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 16 16' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.4l3.2 3.1L13 4.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* OTTO over the work: the site's floating guide at its plain size. */

.tryroom .room-otto {
  --k: 1;
  z-index: 3;
  justify-self: start;
  align-items: flex-start;
  max-width: 22rem;
}

.room-otto .guide-mark {
  appearance: none;
  padding: 0;
  color: inherit;
}

.room-otto .guide-mark:focus-visible {
  outline-offset: 2px;
}

.room-otto .guide-say {
  margin: 0;
  border-bottom-left-radius: var(--r-bubble);
  border-top-left-radius: 4px;
  font-size: var(--fs-small);
}

.room-otto .guide-say::before {
  top: 1.1rem;
  bottom: auto;
}

.room-otto .guide-say p {
  font-weight: 500;
}

.room-otto .guide-say p::before {
  width: 1.75rem;
}

.room-otto .guide-close {
  top: 0.2rem;
  right: 0.2rem;
  width: 2.25rem;
  height: 2.25rem;
}

/* The room sits on the surface tone, so the conversation's OTTO bubbles drop to the ground tone to read as speech. */
.tryroom .msg-ai {
  background: var(--bg);
}

/* The pictures sit in the middle of the room, as large as it allows; OTTO may rest over them and can be closed. */
.room-step > .room-screen {
  width: 100%;
  margin-inline: auto;
}

/* The route: what to do, then the five places as cards. A place is found by pointing at it in the picture
   or by picking its card; the next one is ringed in amber, a found one fills and says what it means. */
.room-route-box {
  display: grid;
  gap: 0.75rem;
}

.room-step[data-step="1"] {
  gap: 1.25rem;
}

.room-ask {
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.35;
  text-wrap: balance;
}

.room-route {
  display: grid;
  gap: 0.6rem;
  counter-reset: stop;
}

.room-route li {
  display: grid;
  counter-increment: stop;
}

.room-stop {
  appearance: none;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-content: start;
  column-gap: 0.75rem;
  row-gap: 0.2rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.75rem 0.9rem;
  border: 0;
  border-radius: var(--r);
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs-small)/1.4 var(--sans);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.18s var(--ease);
}

.room-stop:hover {
  background: var(--border);
}

.room-stop::before {
  content: counter(stop);
  display: grid;
  place-items: center;
  grid-row: 1 / span 2;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px dashed var(--line);
  color: var(--muted);
  font: 600 var(--fs-small)/1 var(--sans);
  font-variant-numeric: tabular-nums;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.room-route li.is-next .room-stop::before {
  border: 2px solid var(--amber);
  color: var(--amber);
}

.room-route li.is-on .room-stop {
  background: var(--amber-tint);
  cursor: default;
}

.room-route li.is-on .room-stop::before {
  border: 2px solid var(--amber);
  background: var(--amber);
  color: var(--on-amber);
}

.room-route-name {
  align-self: center;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.3;
}

/* Under its name every card says which Purdue level the place stands for, and what that level is. */
.room-route-line {
  grid-column: 2;
  color: var(--muted);
}

.room-route-level {
  display: block;
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* The picture stays clear: a point shows its name only while it is pointed at, focused, or lit from its card. */
.room-step[data-step="1"] .spot-name {
  opacity: 0;
  transition: opacity 0.18s var(--ease);
}

.room-step[data-step="1"] .spot:hover .spot-name,
.room-step[data-step="1"] .spot:focus-visible .spot-name,
.room-step[data-step="1"] .spot.is-lit .spot-name {
  opacity: 1;
}

/* With room, the route runs left to right under the picture, the way the plant does. */
@media (min-width: 48rem) {
  .room-route {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .room-stop {
    height: 100%;
  }
}

/* Practice: the question and its answers sit in the middle of the room. Each answer has a name and a line
   of its own; under them, why the picked one holds or doesn't. */
.room-step[data-step="3"] .try-q {
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
  gap: 1rem;
}

.try-scene {
  font-size: var(--fs-lead);
  line-height: 1.45;
  text-wrap: pretty;
}

.try-text {
  display: grid;
  gap: 0.15rem;
}

.try-text strong {
  font-weight: 600;
}

.try-text span {
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 400;
}

.try-why {
  display: grid;
  gap: 0.4rem;
  padding: 1rem 1.1rem;
  border-radius: var(--r);
  background: var(--amber-tint);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.try-verdict {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--amber);
  font-size: var(--fs-body);
  font-weight: 600;
}

.try-mark {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Explain it back: a conversation in the middle of the room, moved along by picking a reply. */
.room-talk {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  width: 100%;
  min-height: 0;
  /* The lines keep a 40rem measure in the middle; the scrollbar stays at the room's edge. */
  padding: 0.25rem max(0.25rem, (100% - 40rem) / 2) 0.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* In this step the room itself holds still: the title stays in view and only the conversation scrolls. */
.room-body:has(.room-grid[data-step="4"]) {
  display: grid;
  overflow: hidden;
}

.room-grid[data-step="4"],
.room-grid[data-step="4"] .room-main,
.room-step[data-step="4"] {
  min-height: 0;
  height: 100%;
}

.room-step[data-step="4"] {
  grid-template-rows: auto minmax(0, 1fr);
}

.room-talk .msg {
  max-width: none;
  font-size: var(--fs-body);
}

.room-talk .msg-user {
  justify-self: end;
  max-width: 88%;
}

/* The replies on offer sit on the visitor's side, in the visitor's teal, as outlines until one is picked. */
.talk-choices {
  display: grid;
  justify-items: end;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.talk-pick {
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 500;
}

.talk-choice {
  appearance: none;
  max-width: 88%;
  min-height: 2.75rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--teal);
  border-radius: var(--r-bubble);
  border-bottom-right-radius: var(--r);
  background: transparent;
  color: var(--ink);
  font: 500 var(--fs-body)/1.4 var(--sans);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.18s var(--ease);
}

.talk-choice:hover {
  background: var(--teal-tint);
}

/* The bottom bar: back, where you stand, and the one filled action */

.room-foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 0.85rem calc(0.85rem + env(safe-area-inset-bottom));
}

.room-status {
  margin-left: auto;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.45;
  color: var(--muted);
  text-align: right;
}

/* Counts line up in tabular figures. */
.room-status.is-count {
  font-variant-numeric: tabular-nums;
}

.room-next {
  min-width: 10rem;
}

.tryroom.is-done .room-foot {
  display: none;
}

/* Done: the four stages, all passed */

.room-done {
  display: grid;
  align-content: center;
  align-items: center;
  gap: 2rem;
  max-width: none;
  min-height: 100%;
  margin-inline: 0;
}

.room-done-copy {
  display: grid;
  justify-items: start;
  gap: 1.25rem;
  min-width: 0;
}

.room-done h2 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  line-height: 1.1;
}

.room-done-otto {
  width: 4.5rem;
}

.room-done-copy > p {
  color: var(--muted);
  font-size: var(--fs-lead);
  max-width: 46ch;
  text-wrap: pretty;
}

/* Beside the summary: the same room as it looks inside the course. */
.room-done-shot {
  min-width: 0;
  margin: 0;
}

.room-done-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r);
}

@media (min-width: 64rem) {
  .room-done {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }
}

.room-path {
  position: relative;
  display: grid;
  gap: 0.85rem;
  isolation: isolate;
}

.room-path::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(1rem - 1px);
  top: 1rem;
  bottom: 1rem;
  width: 2px;
  background: var(--amber);
  -webkit-mask: var(--dash-y) 0 0 / 100% 11px repeat-y;
  mask: var(--dash-y) 0 0 / 100% 11px repeat-y;
}

.room-path li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 2rem;
  font-size: var(--fs-lead);
  font-weight: 500;
}

.room-path li::before {
  content: "";
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid var(--amber);
  background: var(--amber-tint);
}

.room-path li::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
  background: var(--amber);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.4l3.2 3.1L13 4.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 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.4l3.2 3.1L13 4.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
  .tryroom[open] {
    animation: room-in 0.36s var(--ease);
  }

  .tryroom[open]::backdrop {
    animation: fade-in 0.36s var(--ease);
  }

  .spot:not(.is-done)::after {
    animation: spot-pulse 2.2s var(--ease) infinite;
  }
}

@keyframes room-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes spot-pulse {
  0% {
    opacity: 0.8;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}

@media (max-width: 39.99rem) {
  .room-pan {
    padding: 0.5rem;
  }

  .room-shot {
    width: calc(14rem * var(--ratio));
  }

  .room-step[data-step="2"] .room-shot {
    width: auto;
  }

  .room-step[data-step="2"] .room-pan-hint {
    display: none;
  }

  .room-pan-hint {
    display: inline;
  }

  .room-foot {
    flex-wrap: wrap;
    gap: 0.6rem 0.75rem;
  }

  .room-status {
    order: -1;
    flex-basis: 100%;
    margin: 0;
    text-align: left;
  }

  .room-next {
    flex: 1;
    min-width: 0;
  }
}

@media (min-width: 40rem) {
  .try-entry {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .try-entry .btn {
    grid-column: auto;
  }
}

/* Narrow: OTTO rides the bottom edge of the step, over the work, so its line is in view while the step scrolls. */
@media (max-width: 63.99rem) {
  .tryroom .room-otto {
    position: sticky;
    bottom: 0;
  }
}

@media (min-width: 64rem) {
  .tryroom .room-otto {
    position: absolute;
    top: 1.5rem;
    right: var(--room-pad);
  }

  /* Each picture takes the height the room has left over, so a step fits without scrolling where it can. */
  .room-step[data-step="1"] > .room-screen {
    max-width: clamp(42rem, (min(100dvh, 60rem) - 36rem) * 2.593, 100%);
  }

  .room-step[data-step="2"] > .room-screen {
    max-width: clamp(36rem, (min(100dvh, 60rem) - 25.5rem) * 1.48, 100%);
  }
}

/* Legal pages */

.bar .lang-doc {
  display: inline-flex;
}

.doc .bar-end {
  margin-left: auto;
}

.doc-main {
  padding-block: clamp(2rem, 6vw, 4.5rem) clamp(4rem, 8vw, 6rem);
}

.doc-body {
  max-width: 44rem;
}

.doc-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  margin-bottom: 1.5rem;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9375rem;
}

.doc-back:hover {
  color: var(--ink);
}

.doc-back svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.doc-body h1 {
  font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.022em;
}

.doc-meta {
  margin-top: 0.75rem;
  font: 400 var(--fs-small)/1.5 var(--sans);
  color: var(--muted);
}

.doc-body h2 {
  margin-top: 2.75rem;
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.doc-body p,
.doc-body li {
  color: var(--muted);
  max-width: 68ch;
}

.doc-body p + p {
  margin-top: 0.85rem;
}

.doc-body a {
  color: var(--ink);
}

.doc-body ul {
  display: grid;
  gap: 0.7rem;
}

.doc-body ul li {
  position: relative;
  padding-left: 1.25rem;
}

.doc-body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
}

.doc-facts {
  display: grid;
  gap: 1.25rem;
  margin-top: 2rem;
}

.doc-facts > div {
  display: grid;
  gap: 0.3rem;
}

.doc-facts dt {
  font-weight: 600;
  color: var(--ink);
}

.doc-facts dd {
  color: var(--ink);
}

@media (min-width: 40rem) {
  .doc-facts > div {
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: 1.5rem;
    align-items: baseline;
  }
}

.doc-body p + ul,
.doc-body ul + p,
.doc-table-wrap {
  margin-top: 0.85rem;
}

/* The privacy notice's cookie table scrolls sideways on its own when the page is narrow. */
.doc-table-wrap {
  overflow-x: auto;
}

.doc-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--fs-small);
  line-height: 1.45;
}

.doc-table th,
.doc-table td {
  padding: 0.6rem 0.75rem 0.6rem 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  color: var(--muted);
  font-weight: 400;
}

.doc-table thead th,
.doc-table tbody th {
  color: var(--ink);
  font-weight: 600;
}

/* Open points for the operator, to be resolved before the notice is relied on. */
.doc-todo {
  color: var(--amber);
}

/* Why OTTO: a short history in four pictures, then where OTTO comes in. Each picture sits beside its
   text from 64rem, 7/5; the one portrait page is held to a readable size. */

.why-head {
  max-width: 52rem;
}

.why-head h1 {
  font-size: var(--fs-h2);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.why-head .lede {
  margin-top: 1.25rem;
}

.why-scenes {
  display: grid;
  gap: clamp(3.5rem, 8vw, 7.5rem);
  margin-top: clamp(3rem, 7vw, 6rem);
}

.why-scene {
  display: grid;
  gap: 1.5rem;
}

.why-scene img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r);
  background: var(--surface);
}

.why-scene figcaption {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.45;
}

.why-scene.is-tall figure {
  max-width: 26rem;
}

.why-text h2 {
  font-size: var(--fs-lead);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.why-text p {
  max-width: 60ch;
  margin-top: 0.75rem;
}

.why-text p + p {
  margin-top: 0.85rem;
}

.why-otto {
  display: grid;
  justify-items: start;
  gap: 1.25rem;
  margin-top: clamp(4rem, 9vw, 8rem);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border-radius: var(--r);
  background: var(--surface);
}

.why-otto h2 {
  font-size: var(--fs-h2);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.why-otto p {
  max-width: 60ch;
}

.why-otto .btn {
  margin-top: 0.75rem;
}

.why-sources {
  max-width: 52rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.45;
}

.why-sources h2 {
  margin-bottom: 0.5rem;
  color: var(--ink);
  font-size: var(--fs-small);
}

.why-sources ul {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
}

.why-sources a {
  color: var(--ink);
}

@media (min-width: 64rem) {
  .why-scene {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }

  .why-scene.is-tall figure {
    justify-self: end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn .i {
    transition: none;
  }

  .btn:hover .i {
    transform: none;
  }
}

@media (forced-colors: active) {
  .btn,
  .chip,
  .bezel,
  .bezel-expand,
  .fl-node,
  .fl-ctl,
  .ledger,
  .try-entry,
  .room-pan,
  .room-stop,
  .tryroom,
  .drawer,
  .lang,
  .try-opt {
    border: 1px solid CanvasText;
  }

  .try-opt[aria-pressed="true"] {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }

  .spot.is-done::before,
  .room-progress li.is-on::after {
    background: Highlight;
  }
}

/* Training sample landing: the doc shell, with the room's picture under the action. */
.sample h1 { margin-bottom: 1rem; }
.sample p + p { margin-top: 0.75rem; }
.sample .btn { margin-top: 1.75rem; }
.sample-shot { margin: clamp(2.5rem, 6vw, 4rem) 0 0; }
.sample-shot img { display: block; width: 100%; height: auto; border-radius: var(--r, 4px); }
.sample-shot figcaption { padding-top: 0.75rem; color: var(--muted); font-size: 0.875rem; }