/*
 * DoubleU — one stylesheet for every page.
 * Design rationale and token reference: docs/design-system.md
 */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin-opsz-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/atkinson-hyperlegible-next-latin-wght-italic.woff2') format('woff2');
}

:root {
  /* Colour: every text pairing below meets WCAG AA. */
  --ink: #10253a;
  --ink-2: #1d3d55;
  --slate: #4b616c;
  --pen: #006e6e;
  --pen-strong: #005656;
  --teal: #008c8c;
  --turquoise: #00a9ad;
  --mint: #a9e8ba;
  --wash: #e3f4ea;
  --lime: #d8f27f;
  --paper: #f6f8f4;
  --sheet: #fff;
  --rule: #d3e2dc;
  --rule-strong: #a9c3bb;
  --control: #6f858e;
  --ink-soft: #b9cbd0;
  --deep: #0a3d3e;
  --deep-soft: #c4ddd6;
  --error: #b3261e;

  /* Type */
  --font-display: 'Bricolage Grotesque', 'Atkinson Hyperlegible Next', system-ui, sans-serif;
  --font-text: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --title-sm: 1.3125rem;
  --title-md: clamp(1.5rem, 1.25rem + 0.9vw, 1.875rem);
  --title-lg: clamp(2rem, 1.35rem + 2.4vw, 3.25rem);
  --title-xl: clamp(2.75rem, 1.7rem + 4.6vw, 5.25rem);

  /* Space (4px base) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --section: clamp(4rem, 2.8rem + 5vw, 8rem);
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --max: 75rem;
  --header-h: 4.5rem;

  /* Shape: radius follows role, not one value for everything. */
  --r-control: 999px;
  --r-field: 10px;
  --r-panel: 16px;
  --r-object: 24px;
  --lift: 0 1px 0 rgb(16 37 58 / 4%), 0 32px 64px -32px rgb(16 37 58 / 32%);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-quick: 140ms;
  --t-base: 240ms;
  --t-slow: 520ms;

  /* Hand-drawn pen tick, used as a mask so it takes any colour. */
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 13.2c2.3 1.5 4 3.4 5.3 5.9C11.3 12.7 15.5 7.6 20.8 4.4'/%3E%3C/svg%3E");
}

/* Base */

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

html {
  color-scheme: light;
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
  text-size-adjust: 100%;
}

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

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--text-md) / 1.6 var(--font-text);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: inherit;
  font-family: var(--font-display);
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

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

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
}

a,
button,
summary,
label,
input,
select,
textarea {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--pen);
  outline-offset: 3px;
}

::selection {
  background: var(--lime);
  color: var(--ink);
}

/* Type */

.title-xl {
  font-size: var(--title-xl);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.title-lg {
  font-size: var(--title-lg);
  font-weight: 780;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.title-md {
  font-size: var(--title-md);
  font-weight: 720;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.title-sm {
  font-size: var(--title-sm);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.lead {
  max-width: 34em;
  color: var(--slate);
  font-size: var(--text-lg);
  line-height: 1.5;
}

.muted {
  color: var(--slate);
}

.small {
  font-size: var(--text-sm);
}

.measure {
  max-width: 38em;
}

.stack > * + * {
  margin-top: var(--s-4);
}

.stack-lg > * + * {
  margin-top: var(--s-5);
}

.link {
  color: var(--pen);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.link:hover {
  color: var(--pen-strong);
  text-decoration-thickness: 2px;
}

.note {
  color: var(--pen);
  font-size: var(--text-sm);
  font-style: italic;
  line-height: 1.45;
}

/* Text that follows a heading. Zero specificity, so component spacing still wins. */
:where(.title-xl, .title-lg) + :where(p, ul, ol) {
  margin-top: var(--s-5);
}

:where(.title-md, .title-sm) + :where(p, ul, ol) {
  margin-top: var(--s-2);
}

/* Layout */

.wrap {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

.section {
  padding-block: var(--section);
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-6) var(--s-8);
  align-items: end;
  margin-bottom: var(--s-8);
}

.section-head .lead {
  font-size: var(--text-md);
  line-height: 1.6;
}

.band {
  background: var(--ink);
  color: var(--sheet);
}

.band .lead,
.band .muted {
  color: var(--ink-soft);
}

.band .link {
  color: var(--mint);
}

.band :focus-visible {
  outline-color: var(--mint);
}

.tinted {
  background: var(--wash);
}

/* Utilities */

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--s-3);
  inset-inline-start: var(--s-3);
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-control);
  background: var(--ink);
  color: var(--sheet);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

.icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Buttons */

.btn {
  display: inline-flex;
  gap: var(--s-2);
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: var(--s-3) 1.375rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-control);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--t-quick) var(--ease);
}

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

.btn-primary {
  background: var(--pen);
  color: var(--sheet);
}

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

.btn-secondary {
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
}

.btn-secondary:hover {
  background: var(--ink);
  color: var(--sheet);
}

.band .btn-secondary {
  border-color: var(--sheet);
  color: var(--sheet);
}

.band .btn-secondary:hover {
  background: var(--sheet);
  color: var(--ink);
}

.btn-small {
  min-height: 2.5rem;
  padding: var(--s-2) var(--s-4);
  font-size: var(--text-sm);
}

.btn[disabled],
.btn[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.6;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* Pen marks */

.pen-mark {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.pen-underline {
  position: absolute;
  bottom: -0.16em;
  inset-inline-start: -1%;
  width: 102%;
  height: 0.28em;
  overflow: visible;
  pointer-events: none;
}

.pen-underline path {
  fill: none;
  stroke: var(--teal);
  stroke-width: 7;
  stroke-linecap: round;
}

.ticks {
  display: grid;
  gap: var(--s-3);
  padding: 0;
  list-style: none;
}

.ticks li {
  position: relative;
  padding-inline-start: 2rem;
}

.ticks li::before {
  content: '';
  position: absolute;
  top: 0.15em;
  inset-inline-start: 0;
  width: 1.3rem;
  height: 1.3rem;
  background: var(--pen);
  mask: var(--tick) center / contain no-repeat;
}

.band .ticks li::before {
  background: var(--mint);
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  background: rgb(246 248 244 / 92%);
  backdrop-filter: blur(12px);
}

.site-header.is-scrolled {
  border-bottom-color: var(--rule);
  box-shadow: 0 10px 24px -20px rgb(16 37 58 / 35%);
}

.header-inner {
  display: flex;
  gap: var(--s-5);
  align-items: center;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  white-space: nowrap;
  gap: 0.625rem;
  align-items: center;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.brand b {
  color: var(--pen);
  font-weight: inherit;
}

.brand-mark {
  width: 2.375rem;
  height: 2.375rem;
}

.nav {
  display: flex;
  gap: clamp(var(--s-4), 1.7vw, var(--s-5));
  align-items: center;
  margin-inline-start: auto;
}

/* The logo, language switcher and main button keep their size; only the links' spacing gives. */
.brand,
.lang-switch,
.header-cta,
.menu-toggle {
  flex-shrink: 0;
}

.nav a {
  position: relative;
  padding-block: var(--s-2);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.nav a:hover {
  color: var(--pen);
}

.nav a[aria-current='page'] {
  color: var(--pen);
}

/* The pen underline: drawn under the current page, and drawn in as you point at a link. */
.nav a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: currentcolor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-base) var(--ease);
}

[dir='rtl'] .nav a::after {
  transform-origin: right center;
}

.nav a:hover::after,
.nav a[aria-current='page']::after {
  transform: none;
}

.header-cta,
.menu-toggle {
  white-space: nowrap;
}

.menu-toggle {
  display: none;
  gap: var(--s-2);
  align-items: center;
  min-height: 2.75rem;
  margin-inline-start: auto;
  padding: var(--s-2) var(--s-3);
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--r-control);
  background: transparent;
  font-size: var(--text-sm);
  font-weight: 700;
}

.nav .nav-cta {
  margin-top: var(--s-4);
  padding-block: var(--s-3);
  border-bottom: 0;
  color: var(--sheet);
  font-size: 1rem;
}

.nav .nav-cta:hover {
  color: var(--sheet);
}

/* Sign in opens the app (app.doubleyou.digital) for people already in a pilot. It's a quiet
   link with an account icon, so the early-access button is the one thing that stands out. */
.nav .nav-signin {
  display: inline-flex;
  gap: var(--s-2);
  align-items: center;
}

.nav .nav-signin::before {
  content: '';
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  background: currentcolor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* Early access is open: the header's button carries a lime dot. */
.header-cta::before,
.nav .nav-cta::before {
  content: '';
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 3px rgb(216 242 127 / 30%);
}

/* ...and a short status line sits by the page's main buttons. */
.open-note {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  margin-top: var(--s-4);
  color: var(--pen-strong);
  font-size: var(--text-sm);
  font-weight: 700;
}

.open-dot {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--pen);
  box-shadow: 0 0 0 4px rgb(0 110 110 / 15%);
}

/* Footer */

.site-footer {
  padding-block: var(--s-8) var(--s-6);
  border-top: 1px solid var(--rule);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  gap: var(--s-6);
}

.footer-about p {
  max-width: 22em;
  margin-top: var(--s-4);
  color: var(--slate);
  font-size: var(--text-sm);
}

.footer-title {
  margin-bottom: var(--s-3);
  font-family: var(--font-text);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0;
}

.footer-links {
  display: grid;
  gap: var(--s-2);
  padding: 0;
  list-style: none;
}

.footer-links a {
  color: var(--slate);
  font-size: var(--text-sm);
  text-decoration: none;
}

.footer-links a:hover,
.footer-links a[aria-current='page'] {
  color: var(--pen);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  justify-content: space-between;
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  color: var(--slate);
  font-size: var(--text-xs);
}

/* Home: hero */

.hero {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--section);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 13fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}

/* The headline's second line ("Always with them.", about 8 em wide in English and French) never
   wraps, because it carries the pen underline. So its size follows its own column, not the
   window: it always fits, and the gap to the preview stays clear at every width. */
.hero-copy {
  container-type: inline-size;
}

.hero h1 {
  font-size: clamp(2.25rem, 12.2cqi, 4.5rem);
}

.hero-copy .lead {
  margin-top: var(--s-5);
}

.hero-copy .actions {
  margin-top: var(--s-6);
}

.hero-promise {
  max-width: 30em;
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  color: var(--slate);
  font-size: var(--text-sm);
}

/* Lesson studio: the interactive centrepiece */

.studio {
  position: relative;
  min-width: 0;
}

.studio-window {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--r-object);
  background: var(--sheet);
  box-shadow: var(--lift);
}

.studio-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--rule);
}

.studio-who {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  min-width: 0;
}

.avatar {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  overflow: hidden;
  border-radius: 12px;
  background: var(--wash);
  color: var(--slate);
}

.avatar svg {
  width: 100%;
  height: 100%;
}

.avatar-generic {
  display: none;
  background: #eceeed;
}

.avatar-generic svg {
  width: 55%;
  height: 55%;
}

.studio-name {
  font-size: 1.0625rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.studio-meta {
  color: var(--slate);
  font-size: var(--text-xs);
}

.mode-switch {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border: 1px solid var(--rule);
  border-radius: var(--r-control);
  background: var(--paper);
}

.mode-switch::before {
  content: '';
  position: absolute;
  top: 3px;
  bottom: 3px;
  inset-inline-start: 3px;
  width: calc(50% - 3px);
  border-radius: var(--r-control);
  background: var(--ink);
  transition: transform var(--t-base) var(--ease);
}

.mode-switch[data-mode='generic']::before {
  transform: translateX(100%);
}

.mode-switch button {
  position: relative;
  z-index: 1;
  min-height: 2.25rem;
  padding: 0 var(--s-4);
  border: 0;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--slate);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
}

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

.mode-switch button[aria-pressed='true'] {
  color: var(--sheet);
}

.studio-thread {
  display: grid;
  gap: var(--s-5);
  align-content: start;
  min-height: 21rem;
  padding: var(--s-5);
}

.bubble-student {
  justify-self: end;
  max-width: min(85%, 28em);
  padding: var(--s-3) var(--s-4);
  border-radius: 18px 18px 6px;
  background: var(--ink);
  color: var(--sheet);
}

.reply {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--s-3);
}

.reply .avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
}

.reply-name {
  color: var(--slate);
  font-size: var(--text-xs);
  font-weight: 700;
}

.reply-text {
  min-height: 6.4em;
  margin-top: var(--s-1);
  font-size: 1.125rem;
  line-height: 1.55;
}

.is-typing::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-inline-start: 2px;
  background: var(--pen);
  vertical-align: -0.15em;
  animation: caret 0.9s steps(1) infinite;
}

.reply-extras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.reply-extras:empty {
  display: none;
}

.hint-count {
  align-self: center;
  font-variant-numeric: tabular-nums;
  color: var(--slate);
  font-size: var(--text-xs);
  font-weight: 700;
}

.choice {
  transition: transform var(--t-quick) var(--ease);
  min-height: 2.5rem;
  padding: var(--s-2) var(--s-4);
  border: 1.5px solid var(--control);
  border-radius: var(--r-control);
  background: var(--sheet);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: start;
}

.choice:hover {
  border-color: var(--pen);
  color: var(--pen);
}

.choice:active,
.tab:active,
.replay:active {
  transform: translateY(1px);
}

.choice[aria-pressed='true'] {
  border-color: var(--pen);
  background: var(--wash);
  color: var(--pen-strong);
}

.reply-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  margin-top: var(--s-4);
}

.replay {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1.5px solid var(--control);
  border-radius: 50%;
  background: transparent;
  color: var(--pen);
}

.replay:hover {
  border-color: var(--pen);
  background: var(--wash);
}

.replay .icon {
  width: 1rem;
  height: 1rem;
}

.wave {
  display: flex;
  gap: 3px;
  align-items: center;
  height: 1.75rem;
}

.wave span {
  width: 3px;
  height: var(--h);
  border-radius: 3px;
  background: var(--turquoise);
  transform: scaleY(0.4);
  transition: transform var(--t-base) var(--ease);
}

.is-speaking .wave span {
  animation: speak 0.48s var(--d) infinite alternate ease-in-out;
}

.source {
  display: inline-flex;
  gap: var(--s-2);
  align-items: center;
  padding: var(--s-1) var(--s-3);
  border-radius: 8px;
  background: var(--wash);
  color: var(--pen-strong);
  font-size: var(--text-xs);
  font-weight: 700;
}

.source .icon {
  width: 0.95rem;
  height: 0.95rem;
}

.studio-ask {
  padding: var(--s-4) var(--s-5) var(--s-5);
  border-top: 1px solid var(--rule);
}

.ask-label {
  margin-bottom: var(--s-3);
  font-size: var(--text-sm);
  font-weight: 700;
}

.ask-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.studio-note {
  display: flex;
  gap: var(--s-2);
  align-items: flex-start;
  max-width: 28em;
  margin: var(--s-4) 0 0 var(--s-6);
}

.studio-note svg {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2rem;
  margin-top: -0.6rem;
  fill: none;
  stroke: var(--pen);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.studio-disclaimer {
  margin: var(--s-3) 0 0 var(--s-6);
  color: var(--slate);
  font-size: var(--text-xs);
}

.studio.is-generic .avatar-maya {
  display: none;
}

.studio.is-generic .avatar-generic {
  display: grid;
}

.studio.is-generic .reply-text {
  color: var(--slate);
}

.studio.is-generic .source {
  background: #eceeed;
  color: var(--slate);
}

/* The preview's label, kinds of expert, next step and sample source */

.studio-label {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  margin-bottom: var(--s-3);
  color: var(--pen-strong);
  font-size: var(--text-xs);
  font-weight: 700;
}

.studio-label .icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

.category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}

.category-tab {
  flex: none;
  transition: transform var(--t-quick) var(--ease);
  min-height: 2.75rem;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--sheet);
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-weight: 700;
}

.category-tab:hover {
  border-color: var(--pen);
  color: var(--ink);
}

.category-tab[aria-selected='true'] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--sheet);
}

.avatar-initials {
  display: none;
  background: var(--mint);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
}

.studio:not([data-expert='teacher']) .avatar-maya {
  display: none;
}

.studio:not([data-expert='teacher'], .is-generic) .avatar-initials {
  display: grid;
}

.next-step {
  margin-top: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-inline-start: 3px solid var(--pen);
  border-radius: 4px;
  background: var(--wash);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.next-step strong {
  position: relative;
  z-index: 0;
  color: var(--pen-strong);
}

.sample-source {
  margin-top: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: 10px;
  font-size: var(--text-sm);
}

.sample-source summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  min-height: 2.75rem;
  padding: var(--s-2) var(--s-3);
  font-weight: 700;
  cursor: pointer;
}

.sample-tag {
  display: inline-block;
  padding: 0.1em var(--s-2);
  border-radius: 999px;
  background: #eceeed;
  color: var(--slate);
  font-size: var(--text-xs);
  font-weight: 700;
}

.sample-body {
  display: grid;
  gap: var(--s-2);
  padding: 0 var(--s-3) var(--s-3);
}

.sample-title {
  color: var(--pen-strong);
  font-weight: 700;
}

.sample-body blockquote {
  margin: 0;
  padding-inline-start: var(--s-3);
  border-inline-start: 2px solid var(--rule-strong);
}

.sample-note {
  color: var(--slate);
  font-size: var(--text-xs);
}

.studio.is-generic .next-step,
.studio.is-generic .sample-source {
  display: none;
}

/* A new answer "thinks" for a moment before it types: three pen dots that breathe. */
.reply-text.is-thinking::after {
  content: '';
  display: inline-block;
  width: 2.4rem;
  height: 0.6rem;
  background: radial-gradient(circle at 0.3rem 50%, var(--pen) 0.22rem, transparent 0.25rem) 0 0 /
    0.8rem 100% repeat-x;
  vertical-align: middle;
  animation: think 0.8s var(--ease) infinite alternate;
}

@keyframes think {
  from {
    opacity: 0.35;
    transform: translateY(1px);
  }

  to {
    opacity: 1;
    transform: translateY(-1px);
  }
}

/* The teacher's highlighter marks the takeaway once an answer is in (the one lime mark here). */
.next-step strong::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0.15em -0.2em 0;
  border-radius: 3px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-slow) var(--ease);
}

[dir='rtl'] .next-step strong::before {
  transform-origin: right center;
}

.next-step.is-marked strong::before {
  transform: none;
}

/* Following a link to the preview: a short pen ring says "here it is". */
.studio-window::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--pen);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

.studio-window.is-greeting::after {
  animation: greet 1.4s var(--ease);
}

@keyframes greet {
  25% {
    opacity: 1;
  }

  50% {
    opacity: 0.2;
  }

  75% {
    opacity: 0.9;
  }
}

.studio.is-generic .wave span {
  background: var(--control);
}

/* Home: statement band */

.statement {
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
}

.statement-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-6);
  align-items: center;
}

.statement p {
  max-width: 17em;
  font-family: var(--font-display);
  font-size: var(--title-lg);
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.statement-mark {
  width: clamp(4.5rem, 9vw, 8rem);
  height: auto;
  color: #36576d;
}

/* Home: after the bell (a day as a timeline) */

.after-bell {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--s-8);
  align-items: center;
}

.after-bell figure img {
  border-radius: var(--r-object);
}

.timeline {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-6);
  padding: 0;
  list-style: none;
}

.timeline li {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--s-5);
}

.timeline-time {
  padding-top: 0.15rem;
  font-variant-numeric: tabular-nums;
  color: var(--pen);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 750;
  text-align: end;
}

.timeline-body {
  position: relative;
  padding-inline-start: var(--s-5);
  border-inline-start: 2px solid var(--rule);
}

.timeline-body::before {
  content: '';
  position: absolute;
  top: 0.55em;
  inset-inline-start: -7px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--pen);
  border-radius: 50%;
  background: var(--paper);
}

.timeline-body p {
  margin-top: var(--s-1);
  color: var(--slate);
}

/* Steps in a row (a real sequence) */

.steps-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps-row.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* How it works on the home page: two rows of steps, each with its own heading */
.how-subtitle {
  margin-block: var(--s-8) var(--s-5);
}

.section-head + .how-subtitle {
  margin-top: 0;
}

.how-intro {
  max-width: 40em;
  margin-top: calc(var(--s-3) * -1);
  margin-bottom: var(--s-5);
}

.steps-row li {
  position: relative;
  padding-top: 3.75rem;
  counter-increment: step;
}

.steps-row li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid var(--pen);
  border-radius: 50%;
  color: var(--pen);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
}

.steps-row li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 1.375rem;
  inset-inline: 3.5rem calc(-1 * var(--s-6) + var(--s-3));
  border-top: 2px dashed var(--rule-strong);
}

.steps-row h3 {
  margin-bottom: var(--s-2);
}

.steps-row p {
  color: var(--slate);
}

.spotlight {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-8);
  align-items: center;
  margin-top: var(--s-9);
}

.spotlight img {
  border-radius: var(--r-object);
}

/* Notebook tabs */

.tab-list {
  display: flex;
  gap: var(--s-1);
  padding-inline-start: var(--s-5);
  overflow-x: auto;
  scrollbar-width: none;
}

.tab {
  position: relative;
  top: 1px;
  min-height: 3rem;
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--rule);
  border-bottom: 0;
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  background: var(--wash);
  color: var(--slate);
  font-weight: 700;
  white-space: nowrap;
}

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

.tab[aria-selected='true'] {
  z-index: 1;
  background: var(--sheet);
  color: var(--ink);
}

.tab-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: center;
  padding: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  border: 1px solid var(--rule);
  border-radius: 0 var(--r-panel) var(--r-panel);
  background: var(--sheet);
}

.tab-panel img {
  border-radius: var(--r-panel);
}

.tab-panel .ticks {
  margin-block: var(--s-5);
}

/* Commitments on the ink band */

.commitments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
  margin-block: var(--s-7);
  padding: 0;
  list-style: none;
}

.commitments li {
  padding-top: var(--s-5);
  border-top: 1px solid #36576d;
}

.commitments h3 {
  margin-bottom: var(--s-2);
}

.commitments p {
  color: var(--ink-soft);
}

/* Questions and answers */

.qa-layout {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--s-6) var(--s-8);
}

.qa-layout > div:first-child .link {
  display: inline-block;
  margin-top: var(--s-5);
}

.qa {
  border-top: 1px solid var(--rule);
}

.qa details {
  border-bottom: 1px solid var(--rule);
}

.qa summary {
  display: flex;
  gap: var(--s-4);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--s-5);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}

.qa summary::-webkit-details-marker {
  display: none;
}

.qa summary::after {
  content: '';
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--pen);
  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='2.2' stroke-linecap='round'%3E%3Cpath d='M10 3.5v13M3.5 10h13'/%3E%3C/svg%3E")
    center / contain no-repeat;
  transition: transform var(--t-base) var(--ease);
}

.qa summary:hover {
  color: var(--pen);
}

.qa details[open] summary::after {
  transform: rotate(45deg);
}

.qa details > :not(summary) {
  max-width: 40em;
  padding-bottom: var(--s-5);
  color: var(--slate);
}

.qa details[open] > :not(summary) {
  animation: swap var(--t-base) var(--ease);
}

/* Closing call to action */

.closing {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--s-6);
  align-items: center;
  padding-block: var(--section);
  border-top: 1px solid var(--rule);
}

.closing .lead {
  margin-top: var(--s-4);
}

.closing .actions {
  margin-top: var(--s-6);
}

.closing-mark {
  justify-self: end;
  width: min(100%, 14rem);
  height: auto;
}

/* Inner pages */

.page-hero {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--s-8);
}

.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--s-8);
  align-items: center;
}

.page-hero h1 {
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
}

.page-hero .lead {
  margin-top: var(--s-5);
}

.page-hero .actions {
  margin-top: var(--s-6);
}

.page-hero-text {
  max-width: 52rem;
}

.figure img {
  border-radius: var(--r-object);
}

.points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-7) var(--s-6);
  padding: 0;
  list-style: none;
}

.points.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.points.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-6) var(--s-5);
}

@media (width <= 1180px) {
  .points.cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width <= 600px) {
  .points.cols-4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.point {
  padding-top: var(--s-4);
  border-top: 2px solid var(--ink);
}

.band .point {
  border-top-color: #36576d;
}

.point .icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: var(--s-3);
  color: var(--pen);
}

.band .point .icon {
  color: var(--mint);
}

.point h3 {
  margin-bottom: var(--s-2);
}

.point p {
  color: var(--slate);
}

.band .point p {
  color: var(--ink-soft);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: center;
}

.split .ticks {
  margin-top: var(--s-5);
}

.sequence {
  display: grid;
  padding: 0;
  list-style: none;
  counter-reset: sequence;
}

.sequence li {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--s-4);
  padding-bottom: var(--s-6);
  counter-increment: sequence;
}

.sequence li:last-child {
  padding-bottom: 0;
}

.sequence li::before {
  content: counter(sequence);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--pen);
  border-radius: 50%;
  background: var(--sequence-bg, var(--paper));
  color: var(--pen);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
}

.sequence li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 3rem;
  bottom: 0;
  inset-inline-start: calc(1.5rem - 1px);
  width: 2px;
  background: var(--rule-strong);
}

.sequence h3 {
  padding-top: 0.55rem;
  margin-bottom: var(--s-1);
}

.sequence p {
  color: var(--slate);
}

.tinted .sequence {
  --sequence-bg: var(--wash);
}

.panel {
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  border-radius: var(--r-panel);
  background: var(--wash);
}

.panel h2,
.panel h3 {
  margin-bottom: var(--s-3);
}

.panel .ticks {
  margin-top: var(--s-4);
}

.callout {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  max-width: 46em;
  margin-top: var(--s-7);
  padding-inline-start: var(--s-4);
  border-inline-start: 3px solid var(--pen);
  color: var(--slate);
  font-size: var(--text-sm);
}

.pull-quote {
  max-width: 22em;
  font-family: var(--font-display);
  font-size: var(--title-lg);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.pull-quote + p {
  margin-top: var(--s-4);
  color: var(--slate);
}

.essay {
  max-width: 40rem;
}

.essay p + p {
  margin-top: var(--s-4);
}

.after-list {
  margin-top: var(--s-7);
}

.band .pull-quote + p {
  color: var(--ink-soft);
}

.rule-list {
  padding: 0;
  list-style: none;
}

.rule-list li {
  padding-block: var(--s-3);
  border-top: 1px solid var(--rule-strong);
  font-weight: 600;
}

.panel .rule-list {
  margin-top: var(--s-5);
}

/* Teacher controls */

.console {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--r-object);
  background: var(--sheet);
  box-shadow: var(--lift);
}

.console-controls {
  display: grid;
  gap: var(--s-5);
  align-content: start;
  min-width: 0;
  margin: 0;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  border: 0;
  border-inline-end: 1px solid var(--rule);
}

.console-controls legend {
  float: inline-start;
  width: 100%;
  margin-bottom: var(--s-2);
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--title-sm);
  font-weight: 750;
  letter-spacing: -0.01em;
}

.switch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  cursor: pointer;
}

.switch input {
  position: relative;
  width: 2.75rem;
  height: 1.625rem;
  margin: 0;
  border-radius: var(--r-control);
  background: var(--control);
  cursor: pointer;
  appearance: none;
}

.switch input::before {
  content: '';
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--sheet);
  box-shadow: 0 1px 2px rgb(16 37 58 / 25%);
  transition: transform var(--t-base) var(--ease);
}

.switch:hover input:not(:checked) {
  background: var(--slate);
}

.switch input:checked {
  background: var(--pen);
}

.switch input:checked::before {
  transform: translateX(1.125rem);
}

.switch strong {
  display: block;
  font-weight: 700;
  line-height: 1.4;
}

.switch small {
  display: block;
  color: var(--slate);
  font-size: var(--text-sm);
}

/* A choice between two ways of answering, inside the settings */

.console-choice {
  display: grid;
  gap: var(--s-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.console-controls .console-choice legend {
  float: none;
  margin-bottom: var(--s-1);
  color: var(--slate);
  font-family: var(--font-text);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0;
}

.radio {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  cursor: pointer;
}

.radio input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.15rem 0 0;
  accent-color: var(--pen);
  cursor: pointer;
}

.radio strong {
  display: block;
  font-weight: 700;
  line-height: 1.4;
}

.radio small {
  display: block;
  color: var(--slate);
  font-size: var(--text-sm);
}

.console-label .sample-tag {
  margin-inline-start: var(--s-2);
}

.console-preview {
  display: grid;
  gap: var(--s-4);
  align-content: start;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  background: var(--paper);
}

.console-label {
  color: var(--slate);
  font-size: var(--text-sm);
  font-weight: 700;
}

.console-preview .reply-text {
  min-height: 0;
}

.console-paused {
  padding: var(--s-4);
  border: 1.5px dashed var(--control);
  border-radius: var(--r-panel);
  color: var(--slate);
}

/* FAQ page */

.faq-page {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: var(--s-8);
  align-items: start;
}

.faq-topics {
  position: sticky;
  top: calc(var(--header-h) + var(--s-5));
}

.faq-topics ul {
  display: grid;
  gap: var(--s-1);
  padding: 0;
  list-style: none;
}

.faq-topics a {
  display: block;
  padding: var(--s-2) var(--s-3);
  border-inline-start: 2px solid var(--rule);
  color: var(--slate);
  font-weight: 600;
  text-decoration: none;
}

.faq-topics a:hover {
  border-inline-start-color: var(--pen);
  color: var(--pen);
}

.faq-group + .faq-group {
  margin-top: var(--s-8);
}

.faq-group h2 {
  margin-bottom: var(--s-4);
}

/* Legal pages */

.prose {
  max-width: 42rem;
}

.prose h2 {
  margin: var(--s-7) 0 var(--s-3);
  font-size: 1.5rem;
}

.prose p + p,
.prose p + ul,
.prose ul + p {
  margin-top: var(--s-4);
}

.prose ul {
  display: grid;
  gap: var(--s-2);
  padding-inline-start: 1.25rem;
}

.prose a {
  color: var(--pen);
  font-weight: 700;
  text-underline-offset: 0.2em;
}

.updated {
  color: var(--slate);
  font-size: var(--text-sm);
}

/* Contact form */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-8);
  align-items: start;
}

.form-card {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--rule);
  border-radius: var(--r-object);
  background: var(--sheet);
  box-shadow: var(--lift);
}

.form-card > p {
  margin: var(--s-2) 0 var(--s-6);
  color: var(--slate);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s-5);
}

.field {
  display: grid;
  gap: var(--s-2);
  align-content: start;
  margin-bottom: var(--s-5);
}

.field label {
  font-weight: 700;
}

.optional,
.field-hint {
  color: var(--slate);
  font-size: var(--text-sm);
  font-weight: 400;
}

.input {
  width: 100%;
  min-height: 3rem;
  padding: var(--s-3) var(--s-4);
  border: 1.5px solid var(--control);
  border-radius: var(--r-field);
  background: var(--sheet);
  color: var(--ink);
}

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

.input:focus-visible {
  border-color: var(--pen);
  outline-offset: 1px;
}

.input[aria-invalid='true'] {
  border-color: var(--error);
}

textarea.input {
  min-height: 8rem;
  resize: vertical;
}

select.input {
  padding-inline-end: 2.75rem;
  background: var(--sheet)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2310253a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E")
    right 0.875rem center / 1.125rem no-repeat;
  appearance: none;
}

.field-error {
  color: var(--error);
  font-size: var(--text-sm);
  font-weight: 700;
}

.field-error:empty {
  display: none;
}

.check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  margin: 0 calc(-1 * var(--s-3)) var(--s-2);
  padding: var(--s-3);
  border-radius: var(--r-field);
  cursor: pointer;
}

.check:hover {
  background: var(--paper);
}

.check input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.15rem 0 0;
  accent-color: var(--pen);
}

.honeypot {
  position: absolute;
  inset-inline-start: -10000px;
}

.form-actions {
  margin-top: var(--s-4);
}

.spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid rgb(255 255 255 / 40%);
  border-top-color: var(--sheet);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.form-status {
  margin-top: var(--s-5);
  padding: var(--s-4);
  border-radius: var(--r-field);
  font-weight: 700;
}

.form-status:empty {
  display: none;
}

.form-status.is-success {
  background: var(--wash);
  color: var(--pen-strong);
}

.form-status.is-error {
  background: #fbeceb;
  color: var(--error);
}

/* The email app was opened: nothing has been sent yet, so it isn't shown as a success. */
.form-status.is-info {
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  color: var(--ink);
}

.form-note {
  margin-top: var(--s-4);
  color: var(--slate);
  font-size: var(--text-sm);
}

.contact-aside {
  display: grid;
  gap: var(--s-6);
}

.contact-aside h2 {
  margin-bottom: var(--s-2);
  font-size: var(--title-sm);
}

.contact-aside p {
  color: var(--slate);
}

/* Not found */

.lost-mark {
  width: clamp(6rem, 14vw, 10rem);
  height: auto;
  margin-bottom: var(--s-6);
}

/* Keyframes */

@keyframes caret {
  50% {
    opacity: 0;
  }
}

@keyframes speak {
  from {
    transform: scaleY(0.35);
  }

  to {
    transform: scaleY(1);
  }
}

@keyframes swap {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes draw {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

/* The one orchestrated load moment: the pen underlines the promise. */

@media (prefers-reduced-motion: no-preference) {
  .js .pen-underline path {
    stroke-dasharray: 1;
    animation: draw 700ms 250ms var(--ease) both;
  }
}

/* Responsive */

@media (width <= 1080px) {
  .nav {
    gap: var(--s-4);
  }

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

  .footer-about {
    grid-column: 1 / -1;
  }
}

/* The header folds its menu behind the menu button below 1180px: with the
   language switcher, the full menu no longer fits (French labels are longest). */
@media (width <= 1180px) {
  :root {
    --header-h: 4rem;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .nav {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    display: none;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    padding: var(--s-2) var(--gutter) var(--s-5);
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
  }

  .nav.is-open {
    display: flex;
  }

  .nav a {
    padding-block: var(--s-3);
    border-bottom: 1px solid var(--rule);
    font-size: 1.0625rem;
  }

  .nav a::after {
    display: none;
  }

  .nav .nav-signin {
    padding: var(--s-3) 0;
    border-width: 0 0 1px;
    border-color: var(--rule);
    border-radius: 0;
  }

  .nav .nav-signin:hover {
    background: transparent;
    color: var(--pen);
  }

  .nav .nav-cta {
    order: -1;
    margin: var(--s-2) 0 var(--s-3);
  }

  .header-cta {
    margin-inline-start: 0;
  }
}

/* When the full row is only a little too wide (French on a laptop), the header tightens rather
   than folding: shorter gaps and slightly smaller link text. Set by assets/js/main.js; the menu
   button is kept for small screens. */
.site-header.is-tight .header-inner {
  gap: var(--s-4);
}

.site-header.is-tight .nav {
  gap: var(--s-3);
}

.site-header.is-tight .nav a {
  font-size: 0.875rem;
}

.site-header.is-tight .brand {
  font-size: 1.375rem;
}

.site-header.is-tight .lang-switch {
  margin-inline-start: 0;
}

.site-header.is-tight .header-cta {
  padding-inline: var(--s-3);
  font-size: 0.875rem;
}

/* The same folded header, set by assets/js/main.js whenever the full row doesn't fit at a
   wider width (longer labels in French, larger text settings, zoom). */
.site-header.is-compact .menu-toggle {
  display: inline-flex;
}

.site-header.is-compact .nav {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  display: none;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  padding: var(--s-2) var(--gutter) var(--s-5);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.site-header.is-compact .nav.is-open {
  display: flex;
}

.site-header.is-compact .nav a {
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--rule);
  font-size: 1.0625rem;
}

.site-header.is-compact .nav a::after {
  display: none;
}

.site-header.is-compact .nav .nav-signin {
  padding: var(--s-3) 0;
  border-width: 0 0 1px;
  border-color: var(--rule);
  border-radius: 0;
}

.site-header.is-compact .nav .nav-signin:hover {
  background: transparent;
  color: var(--pen);
}

.site-header.is-compact .lang-switch {
  margin-inline-start: auto;
}

.site-header.is-compact .lang-switch + .menu-toggle {
  margin-inline-start: var(--s-2);
}

/* Opening the folded menu: it slides down, and its links follow one after another. */
@media (prefers-reduced-motion: no-preference) {
  .nav.is-open {
    animation: menu-in var(--t-base) var(--ease) both;
  }

  .nav.is-open > * {
    animation: menu-item-in var(--t-slow) var(--ease) both;
  }

  .nav.is-open > :nth-child(2) {
    animation-delay: 30ms;
  }

  .nav.is-open > :nth-child(3) {
    animation-delay: 60ms;
  }

  .nav.is-open > :nth-child(4) {
    animation-delay: 90ms;
  }

  .nav.is-open > :nth-child(5) {
    animation-delay: 120ms;
  }

  .nav.is-open > :nth-child(6) {
    animation-delay: 150ms;
  }

  .nav.is-open > :nth-child(7) {
    animation-delay: 180ms;
  }
}

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

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

.nav.is-open {
  box-shadow: 0 24px 40px -28px rgb(16 37 58 / 40%);
}

@media (width <= 920px) {
  .hero-grid,
  .page-hero-grid,
  .after-bell,
  .split,
  .spotlight,
  .tab-panel,
  .console,
  .contact-grid,
  .qa-layout,
  .faq-page,
  .closing {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-grid,
  .page-hero-grid,
  .after-bell,
  .split,
  .spotlight {
    gap: var(--s-7);
  }

  .hero h1 {
    font-size: clamp(2.25rem, 10vw, 4.5rem);
  }

  .section-head {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: var(--s-7);
  }

  .studio-note,
  .studio-disclaimer {
    margin-inline-start: 0;
  }

  .steps-row,
  .steps-row.cols-4,
  .points,
  .commitments {
    grid-template-columns: minmax(0, 1fr);
  }

  .steps-row li {
    padding: 0;
    padding-inline-start: 4rem;
  }

  .steps-row li:not(:last-child)::after {
    display: none;
  }

  .console-controls {
    border-inline-end: 0;
    border-bottom: 1px solid var(--rule);
  }

  .faq-topics {
    position: static;
  }

  .faq-topics ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
  }

  .faq-topics a {
    border: 1.5px solid var(--control);
    border-radius: var(--r-control);
  }

  .closing-mark {
    display: none;
  }
}

@media (width <= 600px) {
  .header-cta {
    display: none;
  }

  .studio-head,
  .studio-thread,
  .studio-ask {
    padding-inline: var(--s-4);
  }

  .studio-thread {
    min-height: 26rem;
  }

  .mode-switch {
    width: 100%;
  }

  .reply-text {
    font-size: var(--text-md);
  }

  .points.cols-2,
  .form-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .timeline li {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-1);
  }

  .timeline-time {
    padding-inline-start: var(--s-5);
    text-align: start;
  }

  .tab-list {
    padding-inline-start: var(--s-2);
  }

  .tab {
    padding-inline: var(--s-4);
  }

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

  .statement-mark {
    display: none;
  }
}

@media (width <= 400px) {
  .tab-list {
    padding-inline-start: 0;
  }

  .tab {
    padding-inline: var(--s-3);
    font-size: var(--text-sm);
  }
}

@media (width > 600px) {
  .nav-cta {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .is-speaking .wave span {
    animation: none;
  }
}

/* Until the studio starts speaking, keep its first answer hidden; reveal it anyway if scripts fail. */
.js .reply-text[data-autoplay] {
  visibility: hidden;
  animation: reveal 0s 2.5s forwards;
}

@keyframes reveal {
  to {
    visibility: visible;
  }
}

/* Languages (fr/, ar/) --------------------------------------------------------
   Layout uses logical properties (inline-start/end), so Arabic mirrors itself;
   these are the few things that need saying for right to left, and the Arabic
   typeface (IBM Plex Sans Arabic, SIL OFL; Arabic letters only, so Latin text
   such as DoubleU keeps the site's own fonts). */

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2');
  unicode-range:
    U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
    U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2') format('woff2');
  unicode-range:
    U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
    U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2') format('woff2');
  unicode-range:
    U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
    U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

html[lang='ar'] {
  --font-display: 'IBM Plex Sans Arabic', 'Bricolage Grotesque', system-ui, sans-serif;
  --font-text: 'IBM Plex Sans Arabic', 'Atkinson Hyperlegible Next', system-ui, sans-serif;
}

/* Spacing letters apart breaks Arabic's joined script, and its tall letters need
   more room between lines than the Latin headings' tight setting. */
html[lang='ar'] * {
  letter-spacing: normal;
}

html[lang='ar'] :is(h1, h2, h3, h4) {
  line-height: 1.35;
}

[dir='rtl'] .mode-switch[data-mode='generic']::before {
  transform: translateX(-100%);
}

[dir='rtl'] .switch input:checked::before {
  transform: translateX(-1.125rem);
}

[dir='rtl'] svg:has(> use[href='#icon-arrow']) {
  transform: scaleX(-1);
}

/* EN · FR · عربي, in every page's header. */
.lang-switch {
  display: flex;
  gap: var(--s-1);
  align-items: center;
  margin-inline-start: var(--s-2);
}

.lang-switch a {
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-control);
  color: var(--slate);
  font-size: var(--text-xs);
  font-weight: 700;
  text-decoration: none;
}

.lang-switch a:hover {
  color: var(--pen);
}

.lang-switch a[aria-current='true'] {
  background: var(--wash);
  color: var(--pen-strong);
}

@media (width <= 1180px) {
  .lang-switch {
    margin-inline-start: auto;
  }

  .lang-switch + .menu-toggle {
    margin-inline-start: var(--s-2);
  }
}

/* Narrow phones: the header holds the logo, the language switcher and the menu
   button. The button shows its icon only (its label stays for screen readers),
   so the three fit on one line without the page scrolling sideways. */
@media (width <= 480px) {
  .menu-toggle {
    padding-inline: var(--s-2);
  }

  .menu-toggle span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .lang-switch {
    gap: 0;
  }

  .lang-switch a {
    padding-inline: 0.4rem;
  }

  /* The page is already in that language; the other two stay one tap away. */
  .lang-switch a[aria-current='true'] {
    display: none;
  }
}

@media (width <= 600px) {
  /* The pen stroke under the home title bleeds 1% past it on each side, which
     pushes past the screen edge when a longer title (French) fills the line. */
  .pen-underline {
    inset-inline-start: 0;
    width: 100%;
  }

  /* Longer French and Arabic wording: buttons and the underlined phrase may
     wrap rather than run past a narrow screen (English fits on one line). */
  .btn {
    text-align: center;
    white-space: normal;
  }

  .pen-mark {
    white-space: normal;
  }
}

@media (width <= 360px) {
  .brand {
    gap: 0.4rem;
    font-size: 1.25rem;
  }

  .brand-mark {
    width: 2rem;
    height: 2rem;
  }
}

/* Things that answer the pointer, on devices that have one: buttons lift a little, chips and
   tabs rise to meet it, and a step's number fills with the pen. (Pressing still sinks.) */
@media (hover: hover) {
  .btn:hover,
  .choice:hover,
  .category-tab:hover {
    transform: translateY(-1px);
  }

  .btn-primary:hover {
    box-shadow: 0 10px 20px -12px rgb(0 86 86 / 70%);
  }

  .btn:active,
  .choice:active,
  .category-tab:active {
    transform: translateY(1px);
  }

  .steps-row li::before {
    transition: transform var(--t-base) var(--ease);
  }

  .steps-row li:hover::before {
    background: var(--pen);
    color: var(--sheet);
    transform: scale(1.06);
  }
}

/* Tablets: steps and lists in two columns rather than one long column. */
@media (601px <= width <= 920px) {
  .steps-row.cols-4,
  .points,
  .points.cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phones: the kinds of expert sit in one row that scrolls sideways, edge to edge, fading at the
   sides, instead of stacking into three rows above the conversation. */
@media (width <= 600px) {
  .category-tabs {
    flex-wrap: nowrap;
    margin-inline: calc(var(--gutter) * -1);
    padding: var(--s-1) var(--gutter);
    overflow-x: auto;
    scroll-padding-inline: var(--gutter);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    mask-image: linear-gradient(
      90deg,
      transparent,
      #000 var(--gutter),
      #000 calc(100% - var(--gutter)),
      transparent
    );
  }

  .category-tab {
    scroll-snap-align: center;
  }
}

/* Home (English, October 2026): the hero shows people and a voice, a strip says what's different,
   the four example experts open the conversation preview, and a closing panel says what happens
   after you apply. Scoped to new classes, so pages still using the hero preview look as before. */

.hero-home {
  padding-bottom: 0;
}

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

.hero-badge {
  display: inline-flex;
  gap: var(--s-2);
  align-items: center;
  margin-bottom: var(--s-5);
  padding: var(--s-1) var(--s-3) var(--s-1) var(--s-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-control);
  background: var(--sheet);
  color: var(--pen-strong);
  font-size: var(--text-sm);
  font-weight: 700;
}

.hero-badge .open-dot {
  margin-inline-start: var(--s-1);
}

.btn-demo {
  padding-inline-start: var(--s-2);
}

.btn-play {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--sheet);
}

.btn-play .icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-inline-start: 2px;
  fill: currentcolor;
}

.btn-demo:hover .btn-play {
  background: var(--sheet);
  color: var(--ink);
}

.hero-people {
  display: flex;
  gap: var(--s-4);
  align-items: center;
  max-width: 32em;
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  color: var(--slate);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.avatar-stack {
  display: flex;
  flex-shrink: 0;
}

.avatar-stack svg {
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
  border: 2px solid var(--paper);
  border-radius: 50%;
}

.avatar-stack svg + svg {
  margin-inline-start: -0.625rem;
}

.hero-visual {
  position: relative;
  min-width: 0;
}

.hero-visual > img {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: var(--r-object);
  background: var(--sheet);
  box-shadow: var(--lift);
}

.hero-card {
  position: absolute;
  display: flex;
  gap: var(--s-3);
  align-items: center;
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  background: var(--sheet);
  box-shadow:
    0 1px 0 rgb(16 37 58 / 4%),
    0 20px 40px -22px rgb(16 37 58 / 40%);
}

.hero-card-label {
  display: block;
  color: var(--slate);
  font-size: var(--text-xs);
  font-weight: 700;
}

.hero-voice {
  top: 7%;
  inset-inline-start: -1.75rem;
  padding: var(--s-2) var(--s-5) var(--s-2) var(--s-2);
  border-radius: var(--r-control);
}

.hero-mic {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--pen);
  color: var(--sheet);
}

.hero-wave {
  display: flex;
  gap: 3px;
  align-items: center;
  height: 1.6rem;
}

.hero-wave i {
  width: 3px;
  height: var(--h);
  border-radius: 3px;
  background: var(--turquoise);
}

.hero-reply {
  bottom: -2rem;
  inset-inline-end: -1.5rem;
  align-items: flex-start;
  width: min(21rem, 72%);
  padding: var(--s-4);
}

.hero-reply .avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
}

.hero-reply-body {
  display: grid;
  gap: var(--s-1);
  justify-items: start;
}

.hero-reply-text {
  font-size: var(--text-sm);
  line-height: 1.45;
}

.hero-reply .source {
  margin-top: var(--s-1);
}

/* Part of the page's one load moment: after the pen underline, the voice card and then the
   answer arrive. The waveform stays still: nothing is playing, so it doesn't pretend to speak. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-card {
    animation: card-in var(--t-slow) var(--ease) both;
  }

  .js .hero-voice {
    animation-delay: 700ms;
  }

  .js .hero-reply {
    animation-delay: 950ms;
  }
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}

.value-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5) var(--s-6);
  margin-top: clamp(4rem, 3rem + 3vw, 6rem);
  padding: var(--s-6) 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
}

.value-strip li {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
}

.value-icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--wash);
  color: var(--pen);
}

.value-strip p {
  color: var(--slate);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.value-strip strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
  font-size: var(--text-md);
  line-height: 1.3;
}

/* The conversation preview, in its own section: example experts as cards, then the conversation
   with the expert's "margin" (the note, the next step and the material) beside it. */

.demo {
  padding-block: var(--section);
}

.demo .studio-label {
  margin-bottom: var(--s-4);
}

.expert-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

.expert-card {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  min-width: 0;
  min-height: 4.5rem;
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  background: var(--sheet);
  color: var(--ink);
  text-align: start;
  transition:
    transform var(--t-quick) var(--ease),
    border-color var(--t-quick) var(--ease);
}

.expert-card .avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}

.expert-card-text {
  display: grid;
  min-width: 0;
}

.expert-card-name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.expert-card-kind {
  color: var(--slate);
  font-size: var(--text-sm);
  line-height: 1.3;
}

.expert-card:hover {
  border-color: var(--pen);
}

.expert-card:active {
  transform: translateY(1px);
}

.expert-card[aria-selected='true'] {
  border-color: var(--pen);
  background: var(--wash);
  box-shadow: inset 0 0 0 1px var(--pen);
}

.expert-card[aria-selected='true'] .avatar {
  box-shadow:
    0 0 0 2px var(--sheet),
    0 0 0 4px var(--pen);
}

.demo .avatar,
.demo .reply .avatar {
  border-radius: 50%;
}

.studio.is-generic .avatar-expert {
  display: none;
}

.studio-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
}

.studio-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.studio-main .studio-thread {
  flex: 1;
  min-height: 23rem;
}

.studio-margin {
  display: grid;
  gap: var(--s-4);
  align-content: start;
  padding: var(--s-5);
  border-inline-start: 1px solid var(--rule);
  background: var(--paper);
}

.studio-margin .studio-note {
  display: block;
  max-width: none;
  margin: 0;
}

.studio-margin .next-step,
.studio-margin .sample-source {
  margin-top: 0;
}

.studio-margin .sample-source {
  background: var(--sheet);
}

.margin-generic {
  display: none;
  color: var(--slate);
  font-size: var(--text-sm);
}

.studio.is-generic .margin-generic {
  display: block;
}

.demo .studio-disclaimer {
  margin-inline-start: 0;
}

/* Closing: the invitation on a deep teal panel, with what happens next beside it. */

.closing-band {
  padding-bottom: var(--s-8);
}

.closing-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-7);
  align-items: center;
  overflow: hidden;
  padding: clamp(2rem, 1rem + 4vw, 4.5rem);
  border-radius: var(--r-object);
  background: var(--deep);
  color: var(--sheet);
}

.closing-panel-mark {
  position: absolute;
  top: -2.5rem;
  inset-inline-end: -2.5rem;
  width: 18rem;
  height: auto;
  fill: none;
  stroke: var(--mint);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.14;
  pointer-events: none;
}

.closing-copy,
.closing-card {
  position: relative;
}

.closing-panel .lead {
  margin-top: var(--s-4);
  color: var(--deep-soft);
}

.closing-panel .actions {
  margin-top: var(--s-6);
}

.closing-panel :focus-visible {
  outline-color: var(--mint);
}

.btn-light {
  background: var(--sheet);
  color: var(--ink);
}

.btn-light:hover {
  background: var(--mint);
}

.closing-panel .btn-secondary {
  border-color: var(--sheet);
  color: var(--sheet);
}

.closing-panel .btn-secondary:hover {
  background: var(--sheet);
  color: var(--ink);
}

.closing-card {
  padding: var(--s-6);
  border-radius: var(--r-panel);
  background: var(--sheet);
  color: var(--ink);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 50%);
}

.closing-steps {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding: 0;
  list-style: none;
  counter-reset: apply;
}

.closing-steps li {
  position: relative;
  padding-inline-start: 2.75rem;
  color: var(--slate);
  font-size: var(--text-sm);
  line-height: 1.5;
  counter-increment: apply;
}

.closing-steps li::before {
  content: counter(apply);
  position: absolute;
  top: -0.1rem;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  background: var(--wash);
  color: var(--pen-strong);
  font-family: var(--font-display);
  font-weight: 800;
}

.closing-steps strong {
  display: block;
  color: var(--ink);
  font-size: var(--text-md);
}

.closing-small {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  color: var(--slate);
  font-size: var(--text-xs);
}

@media (hover: hover) {
  .expert-card:hover {
    transform: translateY(-1px);
  }

  .expert-card:active {
    transform: translateY(1px);
  }
}

@media (width <= 1080px) {
  .studio-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
  }
}

@media (width <= 920px) {
  .hero-home .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-8);
  }

  .hero-voice {
    inset-inline-start: var(--s-3);
  }

  .hero-reply {
    inset-inline-end: var(--s-3);
  }

  .value-strip,
  .expert-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-body,
  .closing-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .studio-margin {
    border-top: 1px solid var(--rule);
    border-inline-start: 0;
  }
}

/* Phones: the answer card sits under the picture instead of over it, and the example experts
   scroll sideways in one row like the kinds of expert do. */
@media (width <= 600px) {
  .hero-voice {
    display: none;
  }

  .hero-reply {
    position: relative;
    inset: auto;
    width: auto;
    margin: -2.5rem var(--s-3) 0;
  }

  .hero-people {
    align-items: flex-start;
  }

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

  .expert-cards {
    display: flex;
  }

  .expert-card {
    flex: 0 0 auto;
    width: 13.5rem;
    scroll-snap-align: center;
  }

  .studio-margin {
    padding-inline: var(--s-4);
  }

  /* Longer labels ("À la façon de l’expert") wrap inside their half of the switch. */
  .demo .mode-switch button {
    padding-inline: var(--s-2);
    line-height: 1.2;
    white-space: normal;
  }

  .closing-card {
    padding: var(--s-5);
  }
}

/* Header (October 2026): fewer things side by side. The audience pages sit under "Who it's for",
   the language is a dropdown, and "Try the demo" (the app's guest demo) sits beside "Apply".
   When the menu folds (small screens, or a row that doesn't fit), the audience links are listed
   in it like the others and the two buttons lead it. */

.nav-group,
.lang-switch {
  position: relative;
}

.nav-group-toggle,
.lang-toggle {
  display: inline-flex;
  gap: var(--s-1);
  align-items: center;
  min-height: 2.5rem;
  padding: var(--s-2);
  border: 0;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}

.nav-group-toggle:hover,
.nav-group-toggle.is-current,
.lang-toggle:hover {
  color: var(--pen);
}

.lang-toggle {
  border: 1px solid var(--rule);
  padding-inline: var(--s-3) var(--s-2);
}

.nav-chevron {
  width: 1rem;
  height: 1rem;
  transition: transform var(--t-base) var(--ease);
}

[aria-expanded='true'] > .nav-chevron {
  transform: rotate(180deg);
}

.nav-group-menu,
.lang-list {
  position: absolute;
  top: calc(100% + var(--s-2));
  inset-inline-start: 0;
  z-index: 60;
  display: none;
  min-width: 13rem;
  margin: 0;
  padding: var(--s-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  background: var(--sheet);
  list-style: none;
  box-shadow: 0 18px 40px -20px rgb(16 37 58 / 35%);
}

.lang-list {
  inset-inline: auto 0;
  min-width: 11rem;
}

[aria-expanded='true'] + .nav-group-menu,
[aria-expanded='true'] + .lang-list {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  [aria-expanded='true'] + .nav-group-menu,
  [aria-expanded='true'] + .lang-list {
    animation: menu-in var(--t-base) var(--ease) both;
  }
}

.nav .nav-group-menu a,
.lang-switch .lang-list a {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  justify-content: space-between;
  padding: var(--s-2) var(--s-3);
  border-radius: 10px;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.nav .nav-group-menu a::after,
.nav .nav-demo::after {
  display: none;
}

.nav .nav-group-menu a:hover,
.nav .nav-group-menu a[aria-current='page'],
.lang-switch .lang-list a:hover,
.lang-switch .lang-list a[aria-current='true'] {
  background: var(--wash);
  color: var(--pen-strong);
}

/* The current language carries the pen tick (and stays listed on narrow phones too). */
.lang-switch .lang-list a[aria-current='true'] {
  display: flex;
}

.lang-switch .lang-list a[aria-current='true']::after {
  content: '';
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  background: var(--pen);
  mask: var(--tick) center / contain no-repeat;
}

/* "Try the demo": a button beside "Apply" on wide screens, at the top of the folded menu
   otherwise. */
.nav .nav-demo {
  display: none;
}

.header-demo {
  flex-shrink: 0;
}

@media (width <= 1180px) {
  .header-demo {
    display: none;
  }

  .nav-group,
  .nav-group-menu,
  .nav-group-menu li {
    display: contents;
  }

  .nav-group-toggle {
    display: none;
  }

  .nav .nav-group-menu a {
    display: block;
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
    font-size: 1.0625rem;
  }

  .nav .nav-group-menu a:hover,
  .nav .nav-group-menu a[aria-current='page'] {
    background: transparent;
  }

  .nav .nav-demo {
    display: inline-flex;
    order: -1;
    margin: var(--s-2) 0 0;
    padding-block: var(--s-3);
    border: 1.5px solid var(--ink);
    font-size: 1rem;
  }
}

.site-header.is-compact .header-demo {
  display: none;
}

.site-header.is-compact .nav-group,
.site-header.is-compact .nav-group-menu,
.site-header.is-compact .nav-group-menu li {
  display: contents;
}

.site-header.is-compact .nav-group-toggle {
  display: none;
}

.site-header.is-compact .nav .nav-group-menu a {
  display: block;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  font-size: 1.0625rem;
}

.site-header.is-compact .nav .nav-demo {
  display: inline-flex;
  order: -1;
  margin: var(--s-2) 0 0;
  padding-block: var(--s-3);
  border: 1.5px solid var(--ink);
  font-size: 1rem;
}

/* The conversation preview's stage (October 2026): the expert's portrait, which talks while an
   answer comes in (the mouth only moves then), beside a chalkboard with what's being taught. */

.studio-stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--rule);
  background: var(--wash);
}

.stage-person {
  position: relative;
  display: grid;
  justify-items: center;
}

.stage-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 50%;
  background: var(--sheet);
  box-shadow:
    0 0 0 4px var(--sheet),
    0 0 0 6px var(--mint);
}

.stage-face {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
}

.stage-mouth {
  fill: #7c2f2b;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.stage-generic {
  display: none;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #eceeed;
  color: var(--slate);
}

.stage-generic .icon {
  width: 2.5rem;
  height: 2.5rem;
}

.studio.is-generic .stage-face {
  display: none;
}

.studio.is-generic .stage-generic {
  display: grid;
}

/* A ring that ripples out while the expert speaks. */
.stage-frame::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 2px solid var(--pen);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.studio.is-speaking .stage-mouth {
  opacity: 1;
  animation: talk 0.26s ease-in-out infinite alternate;
}

.studio.is-speaking .stage-frame::after {
  animation: ripple 1.1s ease-out infinite;
}

@keyframes talk {
  from {
    transform: scaleY(0.25);
  }

  to {
    transform: scaleY(1);
  }
}

@keyframes ripple {
  from {
    opacity: 0.7;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(1.18);
  }
}

.stage-tag {
  position: relative;
  z-index: 1;
  margin-top: -0.75rem;
  padding: 0.15rem var(--s-2);
  border-radius: var(--r-control);
  background: var(--ink);
  color: var(--sheet);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}

.stage-board {
  display: grid;
  gap: var(--s-1);
  min-width: 0;
  padding: var(--s-4) var(--s-5);
  border: 6px solid #6b4f3a;
  border-radius: var(--r-panel);
  background: var(--deep);
  color: var(--sheet);
}

.stage-board-label {
  color: var(--mint);
  font-size: var(--text-xs);
  font-weight: 700;
}

.stage-board-topic {
  width: fit-content;
  max-width: 100%;
  padding-bottom: 0.2rem;
  border-bottom: 2px solid var(--mint);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.stage-board-source {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  margin-top: var(--s-1);
  color: var(--deep-soft);
  font-size: var(--text-sm);
}

.stage-board-source .icon {
  width: 1rem;
  height: 1rem;
}

@media (width <= 600px) {
  .studio-stage {
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
  }

  .stage-frame {
    width: 4.5rem;
    height: 4.5rem;
  }

  .stage-board {
    padding: var(--s-3);
    border-width: 4px;
  }

  .stage-board-topic {
    font-size: 1.0625rem;
  }
}

/* Hidden for now: "Sign in" and "Try the demo" in the header and folded menu, on every
   page and language. Delete this block to bring them back. */
.nav-signin,
.nav-demo,
.header-demo {
  display: none !important;
}