/* AvoLingo — base, layout, and components.
   Everything here is rem-based and rides the fluid root in tokens.css §1. */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--_theme---page--background);
  color: var(--_theme---page--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body-m);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* §5.3 — the page is plain white, end to end, matching klarna.com/us/ (its
   <html> is #ffffff and no section paints its own ground). There used to be a
   soft vertical wash here, white -> sand-50 (#faf9f7) across the middle third
   -> white; at that low contrast it did not read as a deliberate tint, only as
   a page that was not quite white. Removed 2026-09-21 at the client's request.
   Sand still appears, but only inside inset rounded panels. */
main { overflow: clip; }

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

/* §4.2 — text setting */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; overflow-wrap: break-word; }
p { text-wrap: pretty; }

/* §4.2 — measure is declared on the element as a character count */
[characters='10'] { max-width: 10ch; } [characters='11'] { max-width: 11ch; }
[characters='12'] { max-width: 12ch; } [characters='13'] { max-width: 13ch; }
[characters='14'] { max-width: 14ch; } [characters='15'] { max-width: 15ch; }
[characters='16'] { max-width: 16ch; } [characters='17'] { max-width: 17ch; }
[characters='18'] { max-width: 18ch; } [characters='19'] { max-width: 19ch; }
[characters='20'] { max-width: 20ch; } [characters='21'] { max-width: 21ch; }
[characters='22'] { max-width: 22ch; } [characters='28'] { max-width: 28ch; }
[characters='34'] { max-width: 34ch; } [characters='46'] { max-width: 46ch; }

/* §10.1 — AvoLingo's deliberate deviation: a visible accent ring, everywhere. */
:focus-visible {
  outline: 2px solid var(--color--accent);
  outline-offset: 3px;
  border-radius: var(--radius--s);
}

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

::selection { background: var(--color--green-100); color: var(--color--grey-1000); }

/* ============ Type ============ */

.jumbo    { font-size: var(--fs-jumbo);    font-weight: 500; line-height: 0.9; letter-spacing: var(--kern-headline); }
.headline,
.display  { font-size: var(--fs-headline); font-weight: 500; line-height: 0.9; letter-spacing: var(--kern-headline); }
.h1       { font-size: var(--fs-h1);       font-weight: 500; line-height: 1.0; letter-spacing: var(--kern-headline); }
.h2       { font-size: var(--fs-h2);       font-weight: 500; line-height: 0.9; letter-spacing: var(--kern-headline); }
.h3       { font-size: var(--fs-h3);       font-weight: 500; line-height: 1.1; letter-spacing: var(--kern-heading); }
.h4       { font-size: var(--fs-h4);       font-weight: 500; line-height: 1.1; letter-spacing: var(--kern-heading); }
.h5       { font-size: var(--fs-h5);       font-weight: 500; line-height: 1.2; letter-spacing: var(--kern-heading); }

.heading {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--kern-headline);
}

.heading-sm {
  font-size: var(--fs-h5);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--kern-heading);
}

.subheading {
  font-size: var(--fs-body-l);
  font-weight: 400;
  line-height: 1.4;
  color: var(--_theme---page--text-muted);
}

.body      { font-size: var(--fs-body-m);  font-weight: 400; line-height: var(--lh-prose); color: var(--_theme---page--text-muted); }
.body-sm   { font-size: var(--fs-body-xs); font-weight: 400; line-height: var(--lh-prose); color: var(--_theme---page--text-muted); }
.body-ink  { color: var(--color--grey-1000); }

.caption {
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--kern-tag);
  text-transform: uppercase;
  color: var(--color--grey-600);
}

/* §4.3 — vertical rhythm by adjacency, in em so it scales with the heading */
h1 + .btn-group, h2 + .btn-group, .headline + .btn-group,
h1 + .arrow-link, h2 + .arrow-link { margin-top: 0.8em; }
.pill + h2, .pill + .heading { margin-top: 0.8rem; }
p + .arrow-link { margin-top: 1.2rem; }

/* §8.5 — inline links: the underline grows into a full highlight */
p a, li a:not(.btn):not(.nav__link):not(.arrow-link), blockquote a, label a {
  --color-line: var(--color--green-400);
  --line-thickness: 0.1em;
  background-image: linear-gradient(var(--color-line), var(--color-line));
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 100% var(--line-thickness);
  box-decoration-break: clone;
  transition: var(--transition);
}
p a:hover, p a:focus-visible {
  --color-line: var(--color--green-200);
  background-size: 100% 100%;
}

/* ============ Layout ============ */

.wrap {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* §5.3 — plain sections breathe at 4rem; tinted panels at 5.6–6.4rem. */
.section { padding-block: var(--section-gap); }
.section--tight { padding-block: var(--sp-24); }

.box {
  margin-inline: var(--sp-8);
  border-radius: var(--radius--2xl);
  padding-block: var(--panel-pad) var(--sp-64);
  background: var(--_theme---panels--background);
  color: var(--_theme---panels--text);
}

.section-head { max-width: 40ch; }
.section-head > * + * { margin-top: var(--sp-12); }
.section-head--center { margin-inline: auto; text-align: center; }

.stack-2 > * + * { margin-top: var(--sp-4); }
.stack-3 > * + * { margin-top: var(--sp-8); }
.stack-4 > * + * { margin-top: var(--sp-12); }
.stack-5 > * + * { margin-top: var(--sp-20); }

.row { display: flex; align-items: center; gap: var(--sp-8); }
.row-wrap { flex-wrap: wrap; }

.divider { height: 1px; background: var(--hairline); border: 0; }

/* ============ Buttons — §9.5 ============ */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  /* §9.5 — rem, not em. In `em` the padding rides the button's own font-size
     (0.9rem hero / 0.8rem nav) and lands 10–20% under spec; in `rem` it rides
     the fluid root, which is what the spec's 0.72/1.44rem figures mean. */
  padding: 0.72rem 1.44rem;
  border-radius: var(--radius-button-hero);
  border: 0;
  font-size: var(--fs-body-s);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background 240ms var(--ease), color 240ms var(--ease),
              transform 240ms var(--ease), box-shadow 240ms var(--ease);
}

.btn--primary {
  background: var(--_theme---buttons--primary-background);
  color: var(--_theme---buttons--primary-text);
}
.btn--primary:hover, .btn--primary:focus-visible {
  background: var(--_theme---buttons--primary-background-hover);
  color: var(--_theme---buttons--primary-text-hover);
}
.btn--primary:active { transform: translateY(0.08em); }

/* Pastel-filled, never outlined. */
.btn--secondary {
  background: var(--_theme---buttons--secondary-background);
  color: var(--_theme---buttons--secondary-text);
}
.btn--secondary:hover, .btn--secondary:focus-visible {
  background: var(--_theme---buttons--secondary-background-hover);
  color: var(--_theme---buttons--secondary-text-hover);
}
.btn--secondary:active { transform: translateY(0.08em); }

.btn--ghost {
  background: transparent;
  color: var(--color--grey-1000);
  padding-inline: 0.9em;
}
.btn--ghost:hover { background: var(--color--grey-50); }

.btn--light {
  background: var(--color--white);
  color: var(--color--grey-1000);
}
.btn--light:hover { background: var(--color--sand-100); }

.btn--outline-light {
  background: rgba(255, 255, 255, 0.14);
  color: var(--color--white);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.btn--outline-light:hover { background: rgba(255, 255, 255, 0.26); }

.btn--nav {
  padding: 0.56rem 0.96rem;
  border-radius: var(--radius-button-nav);
  font-size: var(--fs-body-xs);
}

.btn--lg { padding: 0.72rem 1.44rem; font-size: var(--fs-body-s); }
.btn--sm { padding: 0.5em 1em; font-size: var(--fs-body-xs); }
.btn--block { display: flex; width: 100%; }

.btn-group { display: flex; flex-wrap: wrap; gap: var(--sp-8); isolation: isolate; }

/* §8.4 — the one animated gradient on the page.
   Palindromic stop list at 300% so the loop has no seam; `in oklch` keeps the
   hues saturated through the blend; the press is a depth model, not a nudge. */
.btn--rainbow {
  --stop-1: #d0ff64;
  --stop-2: #52e5ff;
  --stop-3: #fbe3ff;
  --inset: 0.16em;
  --depth: 0.56em;
  isolation: auto;
  /* Lattice's layering (measured on lattice.com #button-a-demo): the button is
     a 3D context at rest (preserve-3d under a 1200px perspective) and the
     halo sits 1px behind it in Z. A plain z-index: -1 halo only stays behind
     while the button has no transform: the hover/press translateY made the
     button a stacking context, the halo then painted over its own green face,
     and the face vanished on hover. In 3D the halo is behind in every state. */
  transform: perspective(1200px);
  transform-style: preserve-3d;
  transition: background 240ms var(--ease), transform 240ms var(--ease);
}
.btn--rainbow::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--inset));
  bottom: calc(-1 * var(--depth));
  z-index: -1;
  transform: translateZ(-1px);
  pointer-events: none;
  border-radius: calc(var(--radius-button-hero) + var(--inset));
  background-image: linear-gradient(to right in oklch,
    var(--stop-1), var(--stop-2), var(--stop-3), var(--stop-2), var(--stop-1));
  background-size: 300% 100%;
  animation: rainbow 8s linear infinite;
  transition: var(--transition);   /* §8.4 / Lattice: the halo rides the Global curve */
}
@keyframes rainbow { to { background-position: 150%; } }

.btn--rainbow:hover, .btn--rainbow:focus-visible { --depth: 0.48em; transform: perspective(1200px) translateY(0.08em); }
.btn--rainbow:active { --depth: 0.36em; transform: perspective(1200px) translateY(0.24em); }

/* ============ Pill badge — §9.6 ============ */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  padding: 0.4em 0.4em 0.4em 1.2em;
  background: var(--_theme---pills--pill-background);
  border-radius: 3em;
  color: var(--_theme---pills--pill-text);
  font-size: var(--fs-body-xs);
  font-weight: 500;
  transition: var(--transition);
}
.pill:has(.icon-circle) { padding-left: 0.4em; }
/* A text-only pill has nothing in the room kept for the arrow circle, so even
   out its padding to centre the text (the 404 label, the FAQ labels). */
.pill:not(:has(.acircle, .icon-circle, .pill__arrow)) { padding-right: 1.2em; }

.pill__arrow {
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: var(--radius--circle);
  background: var(--_theme---pills--icon-background);
  color: var(--_theme---pills--pill-text);
  flex: none;
  overflow: hidden;
  transition: transform 300ms var(--ease-spring);
}
.pill__arrow svg { width: 0.9em; height: 0.9em; transition: transform 300ms var(--ease-spring); }

a.pill:hover .pill__arrow, a.pill:focus-visible .pill__arrow,
.card:hover .pill__arrow { transform: scale(1.2); }
a.pill:hover .pill__arrow svg, a.pill:focus-visible .pill__arrow svg { transform: translateX(100%); }

.pill--mint     { --_theme---pills--pill-background: var(--color--blue-50);   --_theme---pills--pill-text: var(--color--blue-1000);   --_theme---pills--icon-background: var(--color--blue-100); }
.pill--lime     { --_theme---pills--pill-background: var(--color--lime-50);   --_theme---pills--pill-text: var(--color--lime-1000);   --_theme---pills--icon-background: var(--color--lime-200); }
.pill--lavender { --_theme---pills--pill-background: var(--color--purple-100);--_theme---pills--pill-text: var(--color--purple-1000); --_theme---pills--icon-background: var(--color--purple-200); }
.pill--blush    { --_theme---pills--pill-background: var(--color--pink-50);   --_theme---pills--pill-text: var(--color--pink-1000);   --_theme---pills--icon-background: var(--color--pink-100); }
.pill--plain    { --_theme---pills--pill-background: transparent; }

/* ============ Arrow link — §9.7 / §8.3 ============ */

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: var(--fs-body-xs);
  font-weight: 500;
  color: inherit;
  transition: color var(--dur) var(--ease-global);
}
.arrow-link svg {
  width: 0.85em;
  height: 0.85em;
  flex: none;
  transition: transform 300ms var(--ease-spring);
}
.arrow-link:hover svg, .arrow-link:focus-visible svg,
.card:hover .arrow-link svg { transform: translateX(100%); }

/* ============ Cards — §9.4 / §8.2 ============ */

.card {
  background: var(--_theme---cards--background);
  color: var(--_theme---cards--text);
  border-radius: var(--radius--l);
  padding: var(--card-pad);
  box-shadow: var(--shadow--card);
  transition: var(--transition);
}

.card--flat, .card.is-flat { box-shadow: var(--shadow-none); }
a.card.is-flat:hover { box-shadow: var(--shadow--card); background: var(--color--white); }

.feature-card {
  border-radius: var(--radius--l);
  border-end-start-radius: var(--radius--2xl);
  padding: var(--card-pad);
  box-shadow: var(--shadow--card);
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  background: var(--_theme---cards--background);
  color: var(--_theme---cards--text);
  transition: var(--transition);
}
/* The card comes toward the reader in Z; it does not slide up in Y. */
.feature-card:hover {
  transform: perspective(1200px) translateZ(8px);
  box-shadow: var(--shadow--card-large);
  z-index: 1;
}

/* §3.2 — a tint pairs with its own family's ink, body copy included. */
.feature-card--mint     { --_theme---cards--background: var(--color--blue-50);    --_theme---cards--text: var(--color--blue-1000); }
.feature-card--lime     { --_theme---cards--background: var(--color--lime-50);    --_theme---cards--text: var(--color--lime-1000); }
.feature-card--lavender { --_theme---cards--background: var(--color--purple-100); --_theme---cards--text: var(--color--purple-1000); }
.feature-card--blush    { --_theme---cards--background: var(--color--pink-50);    --_theme---cards--text: var(--color--pink-1000); }

.feature-card .body,
.feature-card .subheading,
.feature-card .caption,
.feature-card .feature-card__text { color: inherit; }
.feature-card .body,
.feature-card .feature-card__text { opacity: 0.82; }

.icon-circle {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius--circle);
  flex: none;
  background: var(--_theme---icons--background);
  color: var(--_theme---icons--stroke);
}
.icon-circle svg { width: 1.1rem; height: 1.1rem; }
.icon-circle--mint     { --_theme---icons--background: var(--color--blue-100);   --_theme---icons--stroke: var(--color--blue-1000); }
.icon-circle--lime     { --_theme---icons--background: var(--color--lime-100);   --_theme---icons--stroke: var(--color--lime-1000); }
.icon-circle--lavender { --_theme---icons--background: var(--color--purple-200); --_theme---icons--stroke: var(--color--purple-1000); }
.icon-circle--blush    { --_theme---icons--background: var(--color--pink-100);   --_theme---icons--stroke: var(--color--pink-1000); }
.icon-circle--paper    { --_theme---icons--background: var(--color--white);      --_theme---icons--stroke: var(--color--green-800); box-shadow: var(--shadow--card-small); }

/* ============ Product UI (shared chrome) ============ */

.ui {
  background: var(--color--white);
  color: var(--color--grey-1000);
  border-radius: var(--radius--l);
  box-shadow: var(--shadow--card);
  overflow: hidden;
}

.ui__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--hairline);
}

.ui__dot { width: 0.4rem; height: 0.4rem; border-radius: var(--radius--circle); background: var(--color--grey-200); flex: none; }

.ui__title {
  font-size: var(--fs-label);
  letter-spacing: var(--kern-tag);
  text-transform: uppercase;
  color: var(--color--grey-600);
  font-weight: 500;
}

.ui__body { padding: 0.8rem; display: flex; flex-direction: column; gap: 0.6rem; }

.live-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
  padding: 0.2em 0.6em;
  border-radius: var(--radius--tag);
  background: rgba(10, 76, 255, 0.08);
  color: var(--color--accent);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--kern-tag);
  text-transform: uppercase;
  white-space: nowrap;
}
.live-tag::before {
  content: "";
  width: 0.35em; height: 0.35em;
  border-radius: var(--radius--circle);
  background: currentcolor;
  animation: pulse 2s var(--ease-global) infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Chat bubbles */
.bubble {
  max-width: 84%;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius--m);
  font-size: var(--fs-body-xs);
  font-weight: 400;
  line-height: 1.4;
}
.bubble--them {
  background: var(--color--blue-50);
  color: var(--color--blue-1000);
  border-end-start-radius: var(--radius--xs);
}
.bubble--you {
  background: var(--color--grey-1000);
  color: var(--color--white);
  align-self: flex-end;
  border-end-end-radius: var(--radius--xs);
}
.bubble__meta {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--fs-tag);
  letter-spacing: var(--kern-tag);
  text-transform: uppercase;
  opacity: .62;
}

/* Correction chip */
.correction {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius--m);
  background: var(--color--lime-50);
  font-size: var(--fs-body-xs);
  font-weight: 400;
  line-height: 1.4;
  color: var(--color--lime-1000);
}
.correction b { font-weight: 500; }
.strike { text-decoration: line-through; opacity: 0.6; }

/* Meter */
.meter { height: 0.3rem; border-radius: 3em; background: var(--color--grey-100); overflow: hidden; }
.meter__fill { height: 100%; border-radius: 3em; background: currentcolor; }
.meter__fill--electric { background: var(--color--accent); }

/* Small stat rows inside product UI */
.ui-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  font-size: var(--fs-body-xs);
  font-weight: 500;
}
.ui-row span:last-child { opacity: 0.7; font-weight: 400; }

/* Waveform */
.wave { display: flex; align-items: center; gap: 2px; height: 1.4rem; }
.wave i {
  display: block;
  width: 2px;
  border-radius: 3em;
  background: currentcolor;
  opacity: .3;
  animation: wave 1.4s var(--ease-global) infinite;
}
.wave i:nth-child(3n) { opacity: .75; }
@keyframes wave { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

/* ============ Announcement — §9.1 ============ */

.announce {
  background: var(--_theme---announce--background);
  color: var(--_theme---announce--text);
  font-size: var(--fs-body-xs);
  font-weight: 500;
}
.announce__wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: var(--announce-h);
  /* D2 — the dismiss button is absolutely positioned, so the content is never
     allowed to run under it. This reserve is what stops the 320px collision. */
  padding-inline: 2.6rem;
}
.announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  padding-block: 0.4rem;
  text-align: center;
  min-width: 0;
}
.announce__inner > span:first-child { white-space: nowrap; }
.announce__rule { width: 1px; height: 0.8rem; background: var(--_theme---announce--rule); opacity: 0.5; flex: none; }
.announce .arrow-link { font-size: inherit; }

.announce__dismiss {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  padding: 0.4rem;
  border-radius: var(--radius--circle);
  color: var(--_theme---announce--text);
  opacity: 0.6;
  cursor: pointer;
  line-height: 0;
  transition: opacity 300ms var(--ease-global), background 300ms var(--ease-global);
}
.announce__dismiss:hover { opacity: 1; background: var(--color--grey-50); }
.announce__dismiss svg { width: 0.7rem; height: 0.7rem; }

/* ============ Nav — §9.2 ============ */

.nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--_theme---nav--background);
  border-bottom: 1px solid var(--color--grey-100);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-24);
  height: var(--nav-h);
  min-width: 0;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-body-l);
  font-weight: 500;
  letter-spacing: var(--kern-heading);
  color: var(--color--turquoise-1000);
  flex: none;
}
.logo svg { width: 1.4rem; height: 1.4rem; flex: none; }
/* The mark ships with an electric-blue quadrant in its inline SVG. Electric blue
   is rationed to live state, active nav, focus and one metric (bar.md §7), so the
   quadrant is re-pointed at the ramp here — in shared CSS, so the mark stays
   identical on the pages whose markup is frozen. */
.logo svg path:last-of-type { fill: var(--color--teal-400); }

/* ---- Brand lockup, replaced 2026-09-03 ------------------------------------
   The new logo is a single lockup: the ring-and-dot mark and the "avolingo"
   wordmark are one artwork, so the old inline SVG + text pairing no longer maps
   onto it. Swapping it here rather than in markup follows the precedent above —
   twelve `.logo` blocks live across seven files, six of which are frozen, and
   this way the lockup is identical on all of them and changes in one place.

   The anchors already carry `aria-label="AvoLingo home"`, so hiding the old
   children costs nothing in the accessibility tree.

   Asset is a 4× raster (533×100) of the supplied PNG. If a vector original
   arrives, point `background-image` at the .svg — nothing else changes.        */
.logo {
  background-image: url("../assets/brand/avolingo-lockup.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  /* 1881 × 353 in the source → 5.329:1 */
  inline-size: 7.46rem;
  block-size: 1.4rem;
  gap: 0;
  font-size: 0;          /* hides the bare "AvoLingo" text node in the footers */
  overflow: hidden;
}
.logo svg,
.logo span { display: none; }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-inline: auto;
  min-width: 0;
}

/* ---- Header per the website-structure document (2026-09-03) ---------------
   Six items: Product · Solutions ▾ · Blog · Contact Us · Languages ▾ · Get
   started. Log in is no longer a header item — it lives inside the Product
   page on the same destination as Get started. The Languages menu opens the
   full supported list rather than a two-language toggle.                     */
.nav__dropgrid--lang {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
.nav__droplang {
  display: block;
  padding: var(--sp-8) var(--sp-12);
  border-radius: var(--radius--m);
  font-size: var(--fs-body-s);
  color: var(--_theme---nav--link);
  transition: background var(--dur) var(--ease-nav);
}
.nav__droplang:hover { background: var(--color--grey-50); }
.nav__droplang--note {
  grid-column: 1 / -1;
  font-size: var(--fs-body-2xs);
  color: var(--color--grey-400);
  pointer-events: none;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: var(--fs-body-xs);
  font-weight: 500;
  color: var(--_theme---nav--link);
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-button-nav);
  cursor: pointer;
  white-space: nowrap;
  transition: color 300ms var(--ease-nav), background 300ms var(--ease-nav);
}
.nav__link:hover { color: var(--_theme---nav--link-hover); background: var(--color--grey-50); }
.nav__link[aria-current="page"] { color: var(--color--accent); }
.nav__link svg { width: 0.55rem; height: 0.55rem; opacity: .6; transition: transform 300ms var(--ease-nav); }
.nav__item.is-open > .nav__link { color: var(--_theme---nav--link-hover); background: var(--color--grey-50); }
.nav__item.is-open > .nav__link svg { transform: rotate(180deg); }

.nav__item { position: relative; }

.nav__dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  width: max-content;
  max-width: min(30rem, calc(100vw - 2 * var(--gutter)));
  padding: var(--sp-8);
  background: var(--_theme---nav--surface);
  border-radius: var(--radius--l);
  box-shadow: var(--shadow--card-large);
  z-index: 1001;
  visibility: hidden;
  opacity: 0;
  transform: translateX(-50%) translateY(-0.3rem);
  transition: opacity 240ms var(--ease-nav), transform 240ms var(--ease-nav), visibility 0s linear 240ms;
}
.nav__item.is-open > .nav__dropdown {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}

/* §5.2 — dropdown contents on a 2-column grid, 0.8rem gap */
.nav__dropgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8);
}

.nav__dropitem {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  /* The icon is a fixed 1.8rem against a two-line text block, so the default
     `stretch` left it sitting at the top of the row. */
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem;
  border-radius: var(--radius--m);
  /* Not `all` — this element inherits `visibility` from a panel that toggles it,
     and a shorthand transition would animate that inherited change too. */
  transition: background 300ms var(--ease-global);
}
.nav__dropitem:hover { background: var(--color--sand-100); }
.nav__dropitem .icon-circle { width: 1.8rem; height: 1.8rem; }
.nav__dropitem .icon-circle svg { width: 0.9rem; height: 0.9rem; }
/* Solutions marks: Tossface emoji (user direction 2026-09-27), replacing the
   pastel icon circles. Copyright (c) 2022, 2023 Viva Republica, with Reserved
   Font Name Tossface; Tossface License, full text at /licenses/tossface-LICENSE.txt.
   2026-10-14: self-hosted, keeping only the glyphs the site uses (unused glyphs
   removed, kept glyph images byte-identical; agreed with Toss). The parts are
   ~4–15 KB instead of 0.7–1.9 MB each. The part TossFaceFontMac-09, which
   holds four of the five marks (plus 📊 📚 📝 🗣 for business .bz-roles, 2026-10-11). unicode-range limits the face to those, and the
   marks stay display:none until the pointer or focus reaches a dropdown trigger
   (js/main.js adds .nav-emoji-ready), so pages that never open the menu never
   fetch it. font-display: block avoids a flash of the system emoji first. */
@font-face {
  font-family: "Tossface Nav";
  src: url("../assets/fonts/tossface/TossFaceFontMac-09.subset.woff2") format("woff2");
  unicode-range: U+1F392, U+1F3A7, U+1F454, U+1F4CA, U+1F4DA, U+1F4DD, U+1F5E3;
  font-display: block;
}
/* 🌱 (individual learners) lives in the official part TossFaceFontMac-07, not 09;
   without this face it fell back to the system emoji (2026-10-09 audit: one emoji
   style only). Same family, so the browser picks the part by code point. */
@font-face {
  font-family: "Tossface Nav";
  src: url("../assets/fonts/tossface/TossFaceFontMac-07.subset.woff2") format("woff2");
  unicode-range: U+1F331;
  font-display: block;
}
/* 🎓 (universities & ESP, user 2026-10-11: "토스 학사모 아이콘으로") is in the
   official part TossFaceFontMac-02; part 09 has no Toss glyph for it. */
@font-face {
  font-family: "Tossface Nav";
  src: url("../assets/fonts/tossface/TossFaceFontMac-02.subset.woff2") format("woff2");
  unicode-range: U+1F393;
  font-display: block;
}
.nav__emoji {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  font-family: "Tossface Nav", sans-serif;
  font-size: 1.5rem;
  line-height: 1;
}
html:not(.nav-emoji-ready) .nav__emoji { visibility: hidden; font-family: sans-serif; }
.nav__dropitem b { display: block; font-size: var(--fs-body-xs); font-weight: 500; color: var(--color--grey-1000); }
/* Two things this selector pair has to avoid, both of which used to bite:
   1. The mark is itself a <span>, so a bare `.nav__dropitem span` outranked
      `.icon-circle`'s own `display: grid` on specificity (0,1,1 beats 0,1,0)
      and flattened it to `display: block`, dropping the glyph to the top of
      its circle. Hence `:not(.icon-circle)`.
   2. The same bare selector also put `margin-top` on the text *wrapper*, not
      just the description, nudging the whole block down ~1px against the
      centred icon. The margin belongs to the description alone. */
.nav__dropitem > span:not(.icon-circle, .nav__emoji) { display: block; min-width: 0; }
.nav__dropitem > span:not(.icon-circle, .nav__emoji) > span { display: block; font-size: var(--fs-body-2xs); font-weight: 400; line-height: 1.35; color: var(--color--grey-800); margin-top: 0.1rem; }

.nav__callout {
  grid-column: 1 / -1;
  margin-top: var(--sp-8);
  padding: var(--sp-8);
  border-radius: var(--radius--m);
  background: var(--_theme---nav--callout);
  color: var(--_theme---nav--callout-text);
  /* White on white: the card is drawn by rung 8 (the ring that replaces a
     border), and climbs the ladder on hover like any other card — §6, §8.2. */
  box-shadow: var(--shadow--card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  font-size: var(--fs-body-xs);
  font-weight: 500;
  transition: box-shadow 300ms var(--ease-global), transform 300ms var(--ease-global);
}
.nav__callout:hover, .nav__callout:focus-visible {
  box-shadow: var(--shadow--card-large);
  transform: perspective(1200px) translateZ(8px);
}

.nav__actions { display: flex; align-items: center; gap: var(--sp-8); flex: none; }
.nav__login { font-size: var(--fs-body-xs); font-weight: 500; color: var(--_theme---nav--link); white-space: nowrap; }
.nav__login:hover { color: var(--_theme---nav--link-hover); }

.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: none;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--color--grey-200);
  border-radius: var(--radius-button-nav);
  padding: 0.4rem 0.5rem;
  margin-left: auto;
  flex: none;
  color: var(--color--grey-1000);
  cursor: pointer;
  transition: background 300ms var(--ease-nav);
}
.nav__toggle:hover { background: var(--color--grey-50); }
.nav__burger { display: block; width: 0.9rem; height: 0.7rem; position: relative; }
.nav__burger::before, .nav__burger::after,
.nav__burger i {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  border-radius: 2px;
  background: currentcolor;
  transition: transform 300ms var(--ease-nav), opacity 300ms var(--ease-nav);
}
.nav__burger::before { top: 0; }
.nav__burger i { top: 50%; margin-top: -0.75px; }
.nav__burger::after { bottom: 0; }
[aria-expanded="true"] .nav__burger::before { transform: translateY(0.34rem) rotate(45deg); }
[aria-expanded="true"] .nav__burger i { opacity: 0; }
[aria-expanded="true"] .nav__burger::after { transform: translateY(-0.34rem) rotate(-45deg); }

/* --- Mobile accordion menu --- */
.nav__mobile {
  padding-block: var(--sp-8) var(--sp-12);
  border-top: 1px solid var(--color--grey-100);
  max-height: calc(100vh - var(--nav-h));
  overflow-y: auto;
}
.nav__mobile[hidden] { display: none; }

.acc { border-bottom: 1px solid var(--color--grey-100); }
.acc__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  width: 100%;
  padding: 0.7rem 0.2rem;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: var(--fs-body-s);
  font-weight: 500;
  color: var(--color--grey-1000);
  text-align: left;
  cursor: pointer;
}
.acc__sign { position: relative; width: 0.7rem; height: 0.7rem; flex: none; }
.acc__sign::before, .acc__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  margin-top: -0.75px;
  border-radius: 2px;
  background: currentcolor;
  transition: transform 300ms var(--ease-nav);
}
.acc__sign::after { transform: rotate(90deg); }
[aria-expanded="true"] .acc__sign::after { transform: rotate(0deg); }

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 300ms var(--ease-nav), visibility 0s linear 300ms;
}
.acc__panel > div { overflow: hidden; min-height: 0; }
.acc.is-open > .acc__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition-delay: 0s;
}
.acc__panel a {
  display: block;
  padding: 0.5rem 0.2rem 0.5rem 0.8rem;
  font-size: var(--fs-body-xs);
  font-weight: 400;
  color: var(--color--grey-800);
}
.acc__panel a:last-child { padding-bottom: 0.8rem; }
.acc__panel a b { display: block; font-weight: 500; color: var(--color--grey-1000); }

.nav__mobile > a {
  display: block;
  padding: 0.7rem 0.2rem;
  font-size: var(--fs-body-s);
  font-weight: 500;
  border-bottom: 1px solid var(--color--grey-100);
}
.nav__mobile-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  margin-top: var(--sp-12);
}
.nav__mobile-actions .btn { width: 100%; }

/* ============ Hero — §9.3 ============ */

.hero { padding-top: var(--sp-40); padding-bottom: 0; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  gap: var(--sp-40);   /* reference measures 4rem / 72.19px */
  align-items: start;
}

.hero__copy { padding-top: var(--sp-12); }
.hero__copy > * + * { margin-top: var(--sp-12); }
.hero__sub { margin-top: 0.8em; }
.hero__note {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--sp-12);
  font-size: var(--fs-body-2xs);
  color: var(--color--grey-600);
}
.hero__note::before {
  content: "";
  width: 0.35rem; height: 0.35rem;
  border-radius: var(--radius--circle);
  background: var(--color--grey-200);
  flex: none;
}

.hero__stage {
  position: relative;
  isolation: isolate;
  padding: var(--sp-40);
  border-radius: var(--radius--2xl);
  display: grid;
  place-items: center;
}
/* The tint arrives as an inset rounded panel, never as a full-bleed band.
   The moving mesh is supplied by .mesh/.mesh--hero; the stage only clips it. */

/* ============ Hero product simulation — the animated AvoLingo UI ============ */

/* The hero stage now holds a screenshot of the learner app instead of the
   animated speaking-room demo. It inherits the demo card's own treatment —
   the same radius and the same rung of the shadow ladder — so the swap does
   not introduce a second visual language into the hero. Height-constrained,
   because the shot is a 0.46 phone frame inside a landscape stage. */
.hero__shot {
  display: block;
  /* Sized in rem so it rides the fluid root. The shot is taller than the stage
     on purpose: the negative bottom margin is what lets it run off the stage's
     lower edge, and `.mesh`'s own `overflow: hidden` does the clipping. Without
     the negative margin the stage would simply grow to fit the whole phone. */
  block-size: 36rem;
  margin-block-end: -13rem;
  align-self: start;
  inline-size: auto;
  max-inline-size: 100%;
  margin-inline: auto;
  /* The white stroke reads as the device edge. Declared in rem so it keeps its
     proportion to the phone at every width rather than thinning out. */
  border: 0.4rem solid var(--color--white);
  border-radius: var(--radius--xl);
  box-shadow: var(--shadow--card-large);
}

.sim {
  background: var(--_theme---demo--surface);
  color: var(--color--grey-1000);
  border-radius: var(--radius--l);
  box-shadow: var(--shadow--card-large);
  overflow: hidden;
  max-width: 26rem;
  margin-inline: auto;
}

.sim__chrome {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--hairline);
}
.sim__label {
  font-size: var(--fs-tag);
  font-weight: 500;
  letter-spacing: var(--kern-tag);
  text-transform: uppercase;
  padding: 0.3em 0.7em;
  border-radius: var(--radius--tag);
  background: var(--_theme---tags--background);
  color: var(--_theme---tags--text);
  flex: none;
}
.sim__room {
  font-size: var(--fs-label);
  letter-spacing: var(--kern-tag);
  text-transform: uppercase;
  color: var(--color--grey-600);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sim__body {
  padding: 0.8rem;
  min-height: 13rem;
  display: flex;
  flex-direction: column;
}

/* Each beat of the turn grows into place instead of popping. */
.sim__step {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 300ms var(--ease-global), opacity 240ms var(--ease-global);
}
.sim__step > div { overflow: hidden; min-height: 0; }
.sim__step > div > * { margin-top: 0.5rem; }
.sim__step:first-child > div > * { margin-top: 0; }

.sim[data-step="1"] .sim__step:nth-child(-n+1),
.sim[data-step="2"] .sim__step:nth-child(-n+2),
.sim[data-step="3"] .sim__step:nth-child(-n+3),
.sim[data-step="4"] .sim__step:nth-child(-n+4),
.sim[data-step="5"] .sim__step:nth-child(-n+5),
.sim[data-step="6"] .sim__step:nth-child(-n+6) {
  grid-template-rows: 1fr;
  opacity: 1;
}
/* Once you have answered, the listening row folds away again. */
.sim[data-step="3"] .sim__step:nth-child(2),
.sim[data-step="4"] .sim__step:nth-child(2),
.sim[data-step="5"] .sim__step:nth-child(2),
.sim[data-step="6"] .sim__step:nth-child(2) {
  grid-template-rows: 0fr;
  opacity: 0;
}

.sim__turn {
  max-width: 88%;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius--m);
  font-size: var(--fs-body-xs);
  line-height: 1.4;
}
.sim__turn--them {
  background: var(--_theme---demo--them);
  color: var(--_theme---demo--them-ink);
  border-end-start-radius: var(--radius--xs);
}
.sim__turn--you {
  background: var(--_theme---demo--you);
  color: var(--_theme---demo--you-ink);
  border-end-end-radius: var(--radius--xs);
  margin-left: auto;
}
.sim__who {
  display: block;
  font-size: var(--fs-tag);
  letter-spacing: var(--kern-tag);
  text-transform: uppercase;
  opacity: 0.62;
  margin-bottom: 0.2rem;
}

.sim__listen {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: 3em;
  background: var(--color--grey-50);
  color: var(--color--grey-800);
  font-size: var(--fs-body-2xs);
  width: max-content;
  max-width: 100%;
}
.sim__listen .wave i { animation-play-state: paused; }
.sim[data-step="2"] .sim__listen .wave i { animation-play-state: running; }

.sim__fixrow {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius--m);
  background: var(--_theme---demo--fix);
  color: var(--_theme---demo--fix-ink);
  font-size: var(--fs-body-2xs);
  line-height: 1.4;
}
.sim__fixrow b { font-weight: 500; }
.sim__tick {
  display: grid;
  place-items: center;
  width: 1.1rem; height: 1.1rem;
  flex: none;
  border-radius: var(--radius--circle);
  background: var(--color--lime-200);
  color: var(--color--lime-1000);
}
.sim__tick svg { width: 0.6rem; height: 0.6rem; }

.sim__score {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: var(--fs-body-2xs);
  color: var(--color--grey-800);
}
.sim__scorerow { display: flex; justify-content: space-between; align-items: baseline; }
.sim__scorerow b { font-weight: 500; color: var(--color--grey-1000); }
.sim__meter { height: 0.3rem; border-radius: var(--radius--tag); background: var(--_theme---demo--meter-track); overflow: hidden; }
.sim__meter i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--radius--tag);
  background: var(--_theme---demo--meter);
  /* §8.1 — interactive motion lives in the 240–300ms band. */
  transition: width 300ms var(--ease-global);
}
.sim[data-step="5"] .sim__meter i,
.sim[data-step="6"] .sim__meter i { width: 88%; }

.sim__save {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius--m);
  background: var(--_theme---demo--save);
  color: var(--_theme---demo--save-ink);
  font-size: var(--fs-body-2xs);
  font-weight: 500;
}
.sim__save svg { width: 0.8rem; height: 0.8rem; flex: none; }

.sim__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: 0.5rem 0.7rem;
  border-top: 1px solid var(--hairline);
}
.sim__caption {
  font-size: var(--fs-tag);
  letter-spacing: var(--kern-tag);
  text-transform: uppercase;
  color: var(--color--grey-600);
  font-weight: 500;
  min-width: 0;
}
.sim__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
  flex: none;
  padding: 0.25rem 0.6rem;
  border: 0;
  border-radius: 3em;
  background: var(--color--grey-50);
  color: var(--color--grey-800);
  font-family: inherit;
  font-size: var(--fs-body-2xs);
  font-weight: 500;
  cursor: pointer;
  transition: background 240ms var(--ease);
}
.sim__toggle:hover { background: var(--color--grey-100); color: var(--color--grey-1000); }

/* ============ Language strip ============ */

.strip { padding-block: var(--sp-8); }
.strip__label { text-align: center; margin-bottom: var(--sp-12); }
.strip__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-12) var(--sp-24);
}
.strip__item {
  font-size: var(--fs-body-l);
  font-weight: 500;
  color: var(--color--grey-400);
  letter-spacing: var(--kern-heading);
  transition: color var(--dur) var(--ease-global);
}
.strip__item:hover { color: var(--color--grey-800); }

/* ============ Feature grid ============ */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-12);
  margin-top: var(--sp-24);
}

.feature-card__head { display: flex; flex-direction: column; gap: var(--sp-8); }
.feature-card__text { max-width: 46ch; }
.feature-card .ui { margin-top: auto; }

/* ============ Steps ============ */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-12);
  margin-top: var(--sp-24);
  counter-reset: step;
}
.step {
  background: var(--color--white);
  border-radius: var(--radius--l);
  padding: var(--card-pad);
  box-shadow: var(--shadow--card);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  transition: var(--transition);
}
.step__num {
  counter-increment: step;
  font-size: var(--fs-label);
  letter-spacing: var(--kern-tag);
  text-transform: uppercase;
  color: var(--color--grey-600);
  font-weight: 500;
}
.step__num::before { content: "Step " counter(step, decimal-leading-zero) " — "; }

/* ============ Testimonials ============ */

.quotes { margin-top: var(--sp-24); }
.quotes__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--sp-12)) / 3);
  gap: var(--sp-12);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--sp-4);
}
.quotes__track::-webkit-scrollbar { display: none; }

.quote {
  scroll-snap-align: start;
  border-radius: var(--radius--l);
  padding: var(--card-pad);
  box-shadow: var(--shadow--card);
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  background: var(--_theme---quotes--background);
  color: var(--_theme---quotes--text);
}
.quote--lavender    { --_theme---quotes--background: var(--color--purple-100); --_theme---quotes--text: var(--color--purple-1000); }
.quote--mint        { --_theme---quotes--background: var(--color--blue-50);    --_theme---quotes--text: var(--color--blue-1000); }
.quote--buttercream { --_theme---quotes--background: var(--color--yellow-100); --_theme---quotes--text: var(--color--yellow-1000); }
.quote--blush       { --_theme---quotes--background: var(--color--pink-50);    --_theme---quotes--text: var(--color--pink-1000); }

.quote__person { display: flex; align-items: center; gap: var(--sp-8); }
.quote__avatar {
  width: 2.6rem; height: 2.6rem;
  border-radius: var(--radius--circle);
  display: grid; place-items: center;
  background: var(--color--white);
  color: currentcolor;
  font-size: var(--fs-body-xs);
  font-weight: 500;
  flex: none;
  box-shadow: var(--shadow--card-small);
}
.quote__name { font-size: var(--fs-body-s); font-weight: 500; }
.quote__role { font-size: var(--fs-body-xs); font-weight: 400; opacity: 0.75; }
.quote__text { font-size: var(--fs-body-s); font-weight: 400; line-height: 1.4; }
.quote__stat { font-size: var(--fs-h2); font-weight: 500; line-height: 1; letter-spacing: var(--kern-headline); }
.quote__stat-label { font-size: var(--fs-body-xs); font-weight: 400; opacity: 0.75; margin-top: var(--sp-4); }
.quote__foot { margin-top: auto; }

.dots { display: flex; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-12); }
.dots button {
  width: 0.45rem; height: 0.45rem;
  padding: 0;
  border: 0;
  border-radius: 3em;
  background: var(--color--grey-200);
  cursor: pointer;
  transition: var(--transition);
}
.dots button[aria-selected="true"] { background: var(--color--grey-1000); width: 1.2rem; }

/* ============ Closing banner ============ */

.banner {
  background: var(--banner-gradient);
  border-radius: var(--radius--2xl);
  padding: var(--sp-40) var(--sp-20);
  text-align: center;
  color: var(--color--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-12);
}
.banner .pill {
  --_theme---pills--pill-background: rgba(255, 255, 255, 0.18);
  --_theme---pills--pill-text: var(--color--white);
  --_theme---pills--icon-background: rgba(255, 255, 255, 0.9);
}
.banner .pill__arrow { color: var(--color--violet-800); }
.banner__title { max-width: 18ch; }
.banner__sub { color: rgba(255, 255, 255, 0.82); max-width: 46ch; }

/* ============ Footer ============ */

.footer { padding-block: var(--sp-40) var(--sp-24); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(6, minmax(0, 1fr));
  gap: var(--sp-24) var(--sp-12);
}
.footer__brand { max-width: 28ch; }
.footer h4 {
  font-size: var(--fs-label);
  letter-spacing: var(--kern-tag);
  text-transform: uppercase;
  color: var(--color--grey-600);
  font-weight: 500;
  margin-bottom: var(--sp-8);
}
.footer li + li { margin-top: var(--sp-4); }
.footer li a { font-size: var(--fs-body-xs); font-weight: 400; color: var(--color--grey-800); }
/* No green underline on footer links (user, 2026-10-05). Matches the specificity of the
   global inline-link rule above so it wins. */
.footer li a:not(.btn):not(.nav__link):not(.arrow-link) { background-image: none; }
.footer li a:hover { color: var(--color--grey-1000); }
.footer__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin-top: var(--sp-24);
  padding-top: var(--sp-12);
  border-top: 1px solid var(--hairline);
}

/* ============ Forms ============ */

.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field label { font-size: var(--fs-body-xs); font-weight: 500; }
.input {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius--m);
  border: 1px solid var(--color--grey-200);
  background: var(--color--white);
  font-size: var(--fs-body-xs);
  font-weight: 400;
  color: var(--color--grey-1000);
  transition: border-color var(--dur) var(--ease-global), box-shadow var(--dur) var(--ease-global);
}
.input::placeholder { color: var(--color--grey-400); }
.input:hover { border-color: var(--color--grey-400); }
.input:focus {
  outline: none;
  border-color: var(--color--accent);
  box-shadow: 0 0 0 3px rgba(10, 76, 255, 0.14);
}
.field__hint { font-size: var(--fs-body-2xs); color: var(--color--grey-600); letter-spacing: normal; text-transform: none; }
.field__error { font-size: var(--fs-body-2xs); color: var(--color--red-1000); letter-spacing: normal; text-transform: none; }
.input.is-error { border-color: var(--color--red-800); }
.input.is-error:focus { box-shadow: 0 0 0 3px rgba(184, 37, 47, 0.14); }

.check { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-body-xs); font-weight: 400; color: var(--color--grey-800); }
.check input { width: 0.9rem; height: 0.9rem; accent-color: var(--color--accent); }

.or {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  color: var(--color--grey-600);
  font-size: var(--fs-label);
  letter-spacing: var(--kern-tag);
  text-transform: uppercase;
}
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }

/* ============ Auth page ============ */

.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.auth__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-24) var(--sp-40);
}
.auth__form {
  width: 100%;
  max-width: 21rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-20);
}
.auth__form > section, .auth__form > p { width: 100%; }
.auth__head { margin-bottom: var(--sp-20); }

.auth__aside {
  position: relative;
  margin: var(--sp-12) var(--sp-12) var(--sp-12) 0;
  border-radius: var(--radius--2xl);
  padding: var(--sp-24);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-20);
  isolation: isolate;
  overflow: hidden;
}
.auth__aside::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--halo-gradient);
  z-index: -1;
}

.tabs { display: inline-flex; gap: 0.2rem; padding: 0.2rem; background: var(--color--grey-50); border-radius: 3em; }
.tabs button {
  border: 0;
  background: transparent;
  padding: 0.4rem 0.9rem;
  border-radius: 3em;
  font-size: var(--fs-body-xs);
  font-weight: 500;
  color: var(--color--grey-800);
  cursor: pointer;
  transition: var(--transition);
}
.tabs button[aria-selected="true"] { background: var(--color--white); color: var(--color--grey-1000); box-shadow: var(--shadow--card-small); }

/* ============ App shell ============ */

.app { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); min-height: 100vh; }

.side {
  border-right: 1px solid var(--hairline);
  padding: var(--sp-12);
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.side__nav { display: flex; flex-direction: column; gap: 2px; }
.side__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius--s);
  font-size: var(--fs-body-xs);
  font-weight: 500;
  color: var(--color--grey-800);
  transition: var(--transition);
}
.side__link svg { width: 0.85rem; height: 0.85rem; opacity: .7; flex: none; }
.side__link:hover { background: var(--color--grey-50); color: var(--color--grey-1000); }
.side__link.is-active { background: var(--color--blue-50); color: var(--color--blue-1000); }
.side__link.is-active svg { opacity: 1; color: var(--color--accent); }
.side__foot { margin-top: auto; }

.main { padding: var(--sp-20) var(--sp-24) var(--sp-40); min-width: 0; }
.main__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-12);
  flex-wrap: wrap;
  margin-bottom: var(--sp-20);
}

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-8); }
.stat { border-radius: var(--radius--l); padding: var(--sp-12); box-shadow: var(--shadow--card); background: var(--color--white); }
.stat--mint     { background: var(--color--blue-50);    color: var(--color--blue-1000); }
.stat--lime     { background: var(--color--lime-50);    color: var(--color--lime-1000); }
.stat--lavender { background: var(--color--purple-100); color: var(--color--purple-1000); }
.stat--blush    { background: var(--color--pink-50);    color: var(--color--pink-1000); }
.stat .caption  { color: inherit; opacity: 0.7; }
.stat__value { font-size: var(--fs-h3); font-weight: 500; line-height: 1; letter-spacing: var(--kern-headline); margin-top: var(--sp-4); }

.app-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--sp-12); margin-top: var(--sp-12); }

.lesson-row {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--hairline);
}
.lesson-row:last-child { border-bottom: 0; padding-bottom: 0; }
.lesson-row__title { display: block; font-size: var(--fs-body-xs); font-weight: 500; }
.lesson-row__meta { display: block; font-size: var(--fs-body-2xs); font-weight: 400; color: var(--color--grey-800); margin-top: 0.15rem; }
.lesson-row .btn { margin-left: auto; }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 3em;
  font-size: var(--fs-tag);
  font-weight: 500;
  letter-spacing: var(--kern-tag);
  text-transform: uppercase;
  background: var(--_theme---tags--background);
  color: var(--_theme---tags--text);
}
.tag--due  { --_theme---tags--background: var(--color--yellow-100); --_theme---tags--text: var(--color--yellow-1000); }
.tag--done { --_theme---tags--background: var(--color--green-100);  --_theme---tags--text: var(--color--green-800); }
.tag--new  { --_theme---tags--background: var(--color--blue-100);   --_theme---tags--text: var(--color--blue-1000); }

.empty {
  text-align: center;
  padding: var(--sp-24) var(--sp-12);
  border: 1px dashed var(--color--grey-200);
  border-radius: var(--radius--l);
}
.empty > * + * { margin-top: var(--sp-8); }

/* ============ Design system page ============ */

.ds-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding-block: var(--sp-12);
  position: sticky;
  top: var(--nav-h);
  background: var(--color--white);
  z-index: 20;
}
.ds-nav a {
  padding: 0.35rem 0.7rem;
  border-radius: 3em;
  border: 1px solid var(--color--grey-200);
  font-size: var(--fs-body-xs);
  font-weight: 500;
  color: var(--color--grey-800);
}
.ds-nav a:hover { background: var(--color--sand-100); color: var(--color--grey-1000); }

.ds-block { padding-block: var(--sp-24); border-top: 1px solid var(--hairline); }
.ds-block__head { margin-bottom: var(--sp-20); }

.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-8); }
.swatch { border-radius: var(--radius--l); overflow: hidden; box-shadow: var(--shadow--card); background: var(--color--white); }
.swatch__chip { height: 4rem; }
.swatch__meta { padding: 0.5rem 0.6rem; }
.swatch__name { font-size: var(--fs-body-xs); font-weight: 500; }
.swatch__hex { font-size: var(--fs-body-2xs); color: var(--color--grey-600); letter-spacing: var(--kern-tag); text-transform: uppercase; margin-top: 0.1rem; }

.spec-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body-xs); }
.spec-table th, .spec-table td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--hairline); vertical-align: baseline; }
.spec-table th { font-size: var(--fs-label); letter-spacing: var(--kern-tag); text-transform: uppercase; color: var(--color--grey-600); font-weight: 500; }
.spec-table td:first-child { font-weight: 500; white-space: nowrap; }
.spec-table td:last-child { color: var(--color--grey-800); font-weight: 400; }

.specimen { display: flex; flex-direction: column; gap: var(--sp-12); }
.specimen__row { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--sp-12); align-items: baseline; border-bottom: 1px solid var(--hairline); padding-bottom: var(--sp-12); }

.demo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-12); }
.demo {
  background: var(--color--white);
  border-radius: var(--radius--l);
  padding: var(--sp-12);
  box-shadow: var(--shadow--card);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  align-items: flex-start;
}
.demo__label { font-size: var(--fs-label); letter-spacing: var(--kern-tag); text-transform: uppercase; color: var(--color--grey-600); font-weight: 500; }

.radius-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--sp-8); }
.radius-demo { background: var(--color--blue-50); box-shadow: var(--shadow--card); height: 5rem; display: grid; place-items: end center; padding-bottom: 0.4rem; font-size: var(--fs-body-2xs); letter-spacing: var(--kern-tag); text-transform: uppercase; color: var(--color--blue-1000); font-weight: 500; }

.space-scale { display: flex; flex-direction: column; gap: 0.5rem; }
.space-row { display: grid; grid-template-columns: 4rem minmax(0, 1fr); align-items: center; gap: var(--sp-8); font-size: var(--fs-body-xs); font-weight: 500; }
.space-bar { height: 0.7rem; border-radius: var(--radius--s); background: var(--color--green-100); border: 1px solid var(--color--green-200); }

/* ============ Motion — §10.4 ============ */

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

/* ============ Responsive — §10.3 ============ */

@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; max-width: 40ch; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  /* Only collapse the bar on pages that actually ship a menu button; the
     design-system page has none and must keep its links. */
  .nav__inner:has(.nav__toggle) .nav__links,
  .nav__inner:has(.nav__toggle) .nav__login,
  .nav__inner:has(.nav__toggle) .nav__actions { display: none; }
  .nav__inner:not(:has(.nav__toggle)) .nav__links { overflow-x: auto; scrollbar-width: none; }
  .nav__toggle { display: inline-flex; }

  .hero { padding-top: var(--sp-24); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); }
  .hero__copy { padding-top: 0; }
  /* Keep a visible frame of tint around the card once the columns stack. */
  .hero__stage { padding: var(--sp-16) var(--sp-12); }

  .feature-grid, .steps { grid-template-columns: 1fr; }
  .quotes__track { grid-auto-columns: min(84%, 22rem); }
  .app-grid { grid-template-columns: 1fr; }
  .auth { grid-template-columns: 1fr; }
  .auth__aside { order: -1; margin: var(--sp-12); padding: var(--sp-20); }
  .auth__panel { padding: var(--sp-20) var(--sp-12) var(--sp-24); }
  .box { padding-block: var(--sp-40); }
}

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .side {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
    flex-direction: row;
    align-items: center;
    gap: var(--sp-8);
    overflow-x: auto;
  }
  .side__nav { flex-direction: row; }
  .side__foot { margin-top: 0; margin-left: auto; }
  .side__foot .card { display: none; }
  .side__foot span.body-sm { display: none; }
  .main { padding: var(--sp-20) var(--gutter) var(--sp-24); }
}

@media (max-width: 640px) {
  :root { --gutter: 1.2rem; --card-pad: 1.2rem; }
  /* §1 — no type-size breakpoints. The headline used to drop to --fs-h1 here,
     which snapped it ~20% across two pixels of viewport width. The fluid root
     already does this job; nothing reassigns a font-size at a breakpoint. */
  /* §10.3 — buttons go full-width. `flex: 1 1 auto` only stretched them to
     fill a shared row; a 100% basis puts each on its own row. */
  .btn-group .btn { flex: 1 1 100%; width: 100%; }
  .specimen__row { grid-template-columns: 1fr; gap: var(--sp-4); }
  .stat-grid { grid-template-columns: 1fr; }
  .banner { padding: var(--sp-24) var(--sp-16); }
  .footer__grid { grid-template-columns: 1fr 1fr; }

  /* D2 — at the narrowest widths the bar carries the link alone, on one line. */
  .announce__lead, .announce__rule { display: none; }
  .announce__wrap { padding-inline: 2.2rem; }
}

@media (max-width: 380px) {
  .logo span { display: none; }
  .demo__room { display: none; }
}

/* ==========================================================================
   LATTICE-PARITY SECTIONS
   Measured from lattice.com @1440 (root 18.048px):
     container content 1242px · product grid 3×399.46 gap 1.2rem (card 1 spans 2)
     card radius 1.2rem · card padding 0.4rem · inner media radius 0.8rem
     .box panels: margin-inline 0.8rem, radius 2.4rem
     pill radius 1.55rem, padding 0.47/0.93rem
   ========================================================================== */

/* ---- Animated mesh gradient -------------------------------------------
   Two counter-drifting layers of radial stops. Only transform/opacity
   animate, so it stays on the compositor. Cycles are deliberately
   mismatched (13s / 17s) so the pattern never visibly repeats.        */

.mesh { position: relative; isolation: isolate; overflow: hidden; }
.mesh > * { position: relative; z-index: 1; }

.mesh::before,
.mesh::after {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: 0;
  background-repeat: no-repeat;
  will-change: transform;
}
.mesh::before { animation: mesh-a 13s ease-in-out infinite alternate; }
.mesh::after  { animation: mesh-b 17s ease-in-out infinite alternate; opacity: .85; }

@keyframes mesh-a {
  from { transform: translate3d(-3%, -2%, 0) scale(1.06) rotate(0deg); }
  to   { transform: translate3d(3.5%, 3%, 0) scale(1.17) rotate(7deg); }
}
@keyframes mesh-b {
  from { transform: translate3d(3%, 2%, 0) scale(1.15) rotate(0deg); }
  to   { transform: translate3d(-3.5%, -1.5%, 0) scale(1.06) rotate(-6deg); }
}

/* Hero shell — cyan / mint / lime / lavender / pink, matching capture 1 */
.mesh--hero { background: #7fe3d2; }
.mesh--hero::before {
  background-image:
    radial-gradient(52% 58% at 14% 16%, #3fd8ea 0%, rgba(63,216,234,.55) 42%, rgba(63,216,234,0) 78%),
    radial-gradient(54% 56% at 8% 88%, #a8ef52 0%, rgba(168,239,82,.6) 40%, rgba(168,239,82,0) 78%),
    radial-gradient(60% 64% at 92% 22%, #b9a8fb 0%, rgba(185,168,251,.6) 44%, rgba(185,168,251,0) 80%);
}
.mesh--hero::after {
  background-image:
    radial-gradient(56% 60% at 86% 88%, #f4a9dd 0%, rgba(244,169,221,.55) 42%, rgba(244,169,221,0) 80%),
    radial-gradient(40% 44% at 56% 46%, rgba(214,255,240,.75) 0%, rgba(214,255,240,0) 72%);
}

/* AI panel — lavender / pink / blue mist, very slow */
.mesh--ai { background: #f4f1fc; }
.mesh--ai::before {
  animation-duration: 16s;
  background-image:
    radial-gradient(52% 56% at 20% 64%, #dcb8f7 0%, rgba(220,184,247,.5) 44%, rgba(220,184,247,0) 78%),
    radial-gradient(50% 54% at 80% 20%, #bcd9fb 0%, rgba(188,217,251,.5) 44%, rgba(188,217,251,0) 78%);
}
.mesh--ai::after {
  animation-duration: 18s;
  background-image:
    radial-gradient(48% 52% at 64% 86%, #f9c9e9 0%, rgba(249,201,233,.5) 44%, rgba(249,201,233,0) 78%),
    radial-gradient(34% 38% at 42% 28%, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 72%);
}

/* Integrations — indigo / violet / periwinkle / soft cyan */
.mesh--integ { background: #5b4ae0; }
.mesh--integ::before {
  animation-duration: 15s;
  background-image:
    radial-gradient(54% 60% at 28% 14%, #a695ff 0%, rgba(166,149,255,.6) 44%, rgba(166,149,255,0) 78%),
    radial-gradient(52% 58% at 80% 74%, #3a2bbf 0%, rgba(58,43,191,.65) 44%, rgba(58,43,191,0) 80%);
}
.mesh--integ::after {
  animation-duration: 12s;
  background-image:
    radial-gradient(44% 48% at 88% 26%, #74d3f7 0%, rgba(116,211,247,.5) 44%, rgba(116,211,247,0) 78%),
    radial-gradient(48% 52% at 12% 84%, #2f259e 0%, rgba(47,37,158,.6) 44%, rgba(47,37,158,0) 80%);
}

/* Final CTA — cyan / mint / lime / lavender */
.mesh--cta { background: #86e6d0; }
.mesh--cta::before {
  animation-duration: 14s;
  background-image:
    radial-gradient(54% 62% at 12% 32%, #cbb8f9 0%, rgba(203,184,249,.6) 44%, rgba(203,184,249,0) 80%),
    radial-gradient(52% 58% at 86% 18%, #3fd8ea 0%, rgba(63,216,234,.6) 42%, rgba(63,216,234,0) 78%);
}
.mesh--cta::after {
  animation-duration: 17s;
  background-image:
    radial-gradient(58% 64% at 90% 74%, #b6f24e 0%, rgba(182,242,78,.62) 42%, rgba(182,242,78,0) 80%),
    radial-gradient(42% 48% at 28% 86%, #f6c3e6 0%, rgba(246,195,230,.5) 44%, rgba(246,195,230,0) 78%);
}

/* ---- Full-width rounded panel (the .box pattern) ---- */
.panel {
  margin-inline: var(--sp-8);
  border-radius: var(--radius--2xl);
  padding-block: var(--sp-40) var(--sp-56);   /* integrations: 4 / 5.6rem, measured */
}
.panel--tall { padding-block: var(--sp-56) var(--sp-64); }   /* AI: 5.6 / 6.4rem */

/* ---- Section header: pill → heading → body, 55/45 two-column ---- */
.shead {
  display: grid;
  grid-template-columns: 55.2fr 44.8fr;
  gap: var(--sp-24);              /* reference measures 2.4rem */
  align-items: end;
  margin-bottom: var(--sp-40);
}
.shead--stack { display: block; }
.shead__pill { margin-bottom: var(--sp-16); }
.shead h2 { margin: 0; }
.shead__aside > * + * { margin-top: var(--sp-16); }

/* ---- Arrow circle used on cards ---- */
.acircle {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.78em;
  height: 1.78em;
  border-radius: 50%;
  flex: none;
  overflow: hidden;                        /* the glyphs swap inside the rim */
  background: var(--_theme---icons--background);
  color: var(--_theme---icons--stroke);
  transition: transform 300ms var(--ease-spring), background 300ms var(--ease);
}
/* two identical glyphs stacked: one leaves right, the next arrives from the left */
.acircle svg {
  grid-area: 1 / 1;
  width: .78em; height: .78em;
  transition: transform 300ms var(--ease-spring);
}
.acircle svg:nth-child(2) { transform: translateX(-160%); }

/* ---- 1. Platform product cards — 5 cards, first spans 2 of 3 columns ---- */

.pcards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-12);              /* reference measures 1.2rem */
}
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 21.6rem;
  padding: var(--sp-16) var(--sp-16) 0;
  border-radius: var(--radius--l);
  overflow: hidden;
  color: var(--pc-ink);
  background: var(--pc-bg);
  transition: box-shadow 300ms var(--ease), outline-color 300ms var(--ease);
  outline: 4px solid transparent;
  outline-offset: 0;
}
.pcard--wide { grid-column: span 2; }

.pcard--turquoise { --pc-bg: var(--color--turquoise-100); --pc-ink: var(--color--turquoise-1000); --pc-chip: var(--color--turquoise-200); }
.pcard--lime      { --pc-bg: var(--color--lime-100);      --pc-ink: var(--color--lime-1000);      --pc-chip: var(--color--lime-200); }
.pcard--pink      { --pc-bg: var(--color--pink-100);      --pc-ink: var(--color--pink-1000);      --pc-chip: var(--color--pink-200); }
.pcard--yellow    { --pc-bg: var(--color--yellow-100);    --pc-ink: var(--color--yellow-1000);    --pc-chip: var(--color--yellow-200); }
.pcard--green     { --pc-bg: var(--color--green-100);     --pc-ink: var(--color--green-1000);     --pc-chip: var(--color--green-200); }

.pcard__head { display: flex; align-items: flex-start; gap: var(--sp-12); }
.pcard__title {
  display: flex; align-items: center; gap: var(--sp-8);
  font-size: var(--fs-h5); font-weight: 500; letter-spacing: var(--kern-heading);
  margin: 0;
}
.pcard__title svg { width: 1.05em; height: 1.05em; flex: none; }
.pcard__arrow { margin-left: auto; background: var(--pc-chip); color: var(--pc-ink); }
.pcard__body { margin: var(--sp-12) 0 0; font-size: var(--fs-body-s); font-weight: 400; line-height: var(--lh-prose); color: var(--pc-ink); opacity: .88; max-width: 46ch; }

/* the white product mockup bleeds off the bottom edge, exactly as the reference */
.pcard__media {
  margin-top: auto;
  margin-inline: calc(-1 * var(--sp-16));   /* full-bleed: card clips it at its own radius */
  border-radius: 0;
  min-height: 15.1rem;
  background: var(--color--white);
  box-shadow: var(--shadow--card);
  overflow: hidden;
  transform-origin: 50% 100%;
  transition: transform 300ms var(--ease);
}
.pcard:hover .pcard__media,
.pcard:focus-within .pcard__media { transform: scale(1.01); }

.pcard:hover, .pcard:focus-within {
  box-shadow: var(--shadow--card-large);
  outline-color: var(--pc-chip);
}
.pcard:hover .acircle, .pcard:focus-within .acircle { transform: scale(1.2); }
.pcard:hover .acircle svg:nth-child(1), .pcard:focus-within .acircle svg:nth-child(1) { transform: translateX(160%); }
.pcard:hover .acircle svg:nth-child(2), .pcard:focus-within .acircle svg:nth-child(2) { transform: translateX(0); }
.pcard__link::after { content: ""; position: absolute; inset: 0; }
.pcard__link { position: static; color: inherit; }

/* mini mockup interior */
.mock { padding: var(--sp-12); display: flex; flex-direction: column; gap: var(--sp-8); }
.mock__bar { display: flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-body-2xs); color: var(--color--grey-600); }
.mock__row { display: flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-body-2xs); color: var(--color--grey-1000); }
.mock__row span:last-child { margin-left: auto; color: var(--color--grey-600); }
.mock__line { height: .45rem; border-radius: 3em; background: var(--color--grey-100); flex: 1; }
.mock__line--sm { max-width: 38%; }
.mock__pill { padding: .18em .55em; border-radius: 3em; background: var(--pc-bg); color: var(--pc-ink); font-size: var(--fs-tag); font-weight: 500; letter-spacing: var(--kern-tag); text-transform: uppercase; }
.mock__meter { height: .32rem; border-radius: 3em; background: var(--color--grey-100); overflow: hidden; }
.mock__meter i { display: block; height: 100%; border-radius: 3em; background: var(--pc-ink); opacity: .55; }
.mock__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-8); }
.mock__tile { border: 1px solid var(--color--grey-100); border-radius: var(--radius--s); padding: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-4); }

/* ---- 2. AI panel ---- */

.aipanel { text-align: center; }
.aipanel__inner { max-width: 40rem; margin-inline: auto; padding-inline: var(--sp-24); }
.aipanel h2 { margin: var(--sp-16) 0 0; }
.aipanel__body { margin: var(--sp-16) auto 0; max-width: 34rem; color: var(--color--grey-800); }
.aichat {
  width: min(30rem, 100% - 2.4rem);
  margin: 2.4rem auto 0;
  background: var(--color--white);
  border-radius: var(--radius--l);
  box-shadow: var(--shadow--card-large);
  overflow: hidden;
  text-align: left;
}
.aichat__bar {
  display: flex; align-items: center; gap: var(--sp-8);
  padding: var(--sp-12) var(--sp-16);
  font-size: var(--fs-body-xs); font-weight: 500;
  color: var(--color--violet-800);
  border-bottom: 1px solid var(--color--grey-100);
}
.aichat__bar span:first-child, .aichat__bar span:last-child { color: var(--color--grey-400); font-weight: 400; }
.aichat__bar b { margin-inline: auto; font-weight: 500; }
.aichat__body { padding: var(--sp-16); display: flex; flex-direction: column; gap: var(--sp-16); min-height: 11rem; }
.aichat__ask {
  align-self: flex-end; max-width: 82%;
  background: var(--color--sand-100); color: var(--color--grey-1000);
  border-radius: var(--radius--m); padding: var(--sp-12);
  font-size: var(--fs-body-xs); font-weight: 400; line-height: var(--lh-prose);
}
.aichat__reply { display: flex; gap: var(--sp-8); align-items: flex-start; font-size: var(--fs-body-xs); font-weight: 500; }
.aichat__reply svg { width: 1.1em; height: 1.1em; flex: none; color: var(--color--violet-600); }
/* shimmer on the reply, mimicking a response still resolving */
.shimmer {
  background: linear-gradient(90deg, var(--color--grey-200) 20%, var(--color--grey-100) 40%, var(--color--grey-200) 60%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: shimmer 11s linear infinite;
}
@keyframes shimmer { to { background-position: -300% 0; } }
.aichat__lines { display: flex; flex-direction: column; gap: var(--sp-8); }
.aichat__lines i { height: .5rem; border-radius: 3em; background: var(--color--grey-100); display: block; }

/* ---- 3. Habits / everyday practice — 4 equal cards ---- */

.hcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-8); }   /* reference 0.8rem */
.hcard {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0;
  padding: var(--sp-4);
  background: var(--color--white);
  border-radius: var(--radius--l);
  box-shadow: var(--shadow--card);
  outline: 4px solid transparent;
  transition: box-shadow 300ms var(--ease), outline-color 300ms var(--ease);
}
.hcard:hover, .hcard:focus-within { box-shadow: var(--shadow--card-large); outline-color: var(--hc-tint); }
.hcard__media {
  position: relative;
  height: 12.6rem;
  border-radius: var(--radius--m);
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: var(--sp-16);
  background: var(--hc-grad);
}
.hcard__media > * { transition: transform 420ms var(--ease); }
.hcard:hover .hcard__media > *, .hcard:focus-within .hcard__media > * { transform: scale(1.04) translateY(-2%); }
.hcard__wash { position: absolute; inset: 0; opacity: 0; background: var(--hc-wash); transition: opacity 300ms var(--ease); }
.hcard:hover .hcard__wash, .hcard:focus-within .hcard__wash { opacity: 1; }
.hcard__copy { padding: var(--sp-8); }
.hcard__title { display: flex; align-items: center; gap: var(--sp-12); margin: 0; font-size: var(--fs-h5); font-weight: 500; letter-spacing: var(--kern-heading); }
.hcard__title .acircle { margin-left: auto; background: var(--color--grey-100); color: var(--color--grey-800); }
.hcard:hover .acircle, .hcard:focus-within .acircle { transform: scale(1.2); }
.hcard:hover .acircle svg:nth-child(1), .hcard:focus-within .acircle svg:nth-child(1) { transform: translateX(160%); }
.hcard:hover .acircle svg:nth-child(2), .hcard:focus-within .acircle svg:nth-child(2) { transform: translateX(0); }
.hcard__body { margin: var(--sp-4) 0 0; font-size: var(--fs-body-s); font-weight: 400; line-height: var(--lh-prose); color: var(--color--grey-800); }
.hcard__link::after { content: ""; position: absolute; inset: 0; }

.hcard--pink   { --hc-tint: var(--color--pink-200);      --hc-grad: linear-gradient(150deg, #fde5ff, #efe4fd); --hc-wash: linear-gradient(150deg, #fbd3fb, #ded1fb); }
.hcard--yellow { --hc-tint: var(--color--yellow-200);    --hc-grad: linear-gradient(150deg, #fff3c2, #fdf6e0); --hc-wash: linear-gradient(150deg, #ffe9a0, #fdf0c8); }
.hcard--green  { --hc-tint: var(--color--green-200);     --hc-grad: linear-gradient(150deg, #e6fbe1, #eff5ce); --hc-wash: linear-gradient(150deg, #cdface, #e4f2b4); }
.hcard--blue   { --hc-tint: var(--color--turquoise-200); --hc-grad: linear-gradient(150deg, #e4f7f9, #e6effc); --hc-wash: linear-gradient(150deg, #bff1f5, #d3e3fb); }

/* the small white UI inside a habit card */
.hmock { width: 100%; background: var(--color--white); border-radius: var(--radius--s); box-shadow: var(--shadow--card-small); padding: var(--sp-12); display: flex; flex-direction: column; gap: var(--sp-8); }
.hmock__t { font-size: var(--fs-body-2xs); font-weight: 500; color: var(--color--grey-1000); }
.hmock__row { display: flex; align-items: center; gap: var(--sp-8); }
.hmock__box { width: .7rem; height: .7rem; border-radius: 3px; border: 1.5px solid var(--color--grey-200); flex: none; }
.hmock__box.is-on { background: var(--color--green-400); border-color: var(--color--green-400); }
.hmock__line { height: .4rem; border-radius: 3em; background: var(--color--grey-100); flex: 1; }
.hmock__chip { align-self: flex-start; padding: .2em .6em; border-radius: 3em; font-size: var(--fs-tag); font-weight: 500; letter-spacing: var(--kern-tag); text-transform: uppercase; background: var(--color--grey-100); color: var(--color--grey-800); }

/* ---- 4. Integrations panel ---- */

.integ { text-align: center; color: var(--color--white); }
.integ__inner { max-width: 44rem; margin-inline: auto; padding-inline: var(--sp-24); }
.integ h2 { margin: var(--sp-16) 0 0; color: var(--color--white); }
.integ__body { margin: var(--sp-16) auto 0; max-width: 36rem; color: rgba(255,255,255,.86); }
.integ .pill { background: rgba(255,255,255,.86); color: var(--color--grey-1000); }
.integ .pill .acircle { background: var(--color--grey-1000); color: var(--color--white); }

.marquee {
  margin-top: 2.4rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  overflow: hidden;
}
.marquee__row { display: flex; width: max-content; gap: var(--sp-16); animation: marquee 48s linear infinite; will-change: transform; }
.marquee__row > * { flex: none; }
.marquee:hover .marquee__row, .marquee:focus-within .marquee__row { animation-play-state: paused; }
@keyframes marquee { to { transform: translate3d(calc(-50% - var(--sp-16) / 2), 0, 0); } }

.tile {
  width: 3.6rem; height: 3.6rem;
  border-radius: var(--radius--m);
  display: grid; place-items: center;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.26);
  color: var(--color--white);
  flex: none;
}
.tile svg { width: 1.6rem; height: 1.6rem; }

/* ---- 5. Resources — 4 cards with inset tinted media ---- */

.rcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-8); }   /* reference 0.8rem */
.rcard {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0;
  padding: var(--sp-4);
  background: var(--color--white);
  border-radius: var(--radius--l);
  box-shadow: var(--shadow--card);
  outline: 4px solid transparent;
  transition: box-shadow 300ms var(--ease), outline-color 300ms var(--ease);
}
.rcard:hover, .rcard:focus-within { box-shadow: var(--shadow--card-large); outline-color: var(--rc-tint); }
.rcard__media {
  height: 7.9rem;
  border-radius: var(--radius--m);
  display: grid; place-items: center;
  background: var(--rc-grad);
  color: var(--rc-ink);
  transition: transform 300ms var(--ease);
}
.rcard:hover .rcard__media, .rcard:focus-within .rcard__media { transform: translateY(-2px); }
.rcard__media svg { width: 2rem; height: 2rem; }
.rcard__copy { padding: var(--sp-8); }
.rcard__title { display: flex; align-items: center; gap: var(--sp-12); margin: 0; font-size: var(--fs-h5); font-weight: 500; letter-spacing: var(--kern-heading); }
.rcard__title .acircle { margin-left: auto; background: var(--color--grey-100); color: var(--color--grey-800); }
.rcard:hover .acircle, .rcard:focus-within .acircle { transform: scale(1.2); }
.rcard:hover .acircle svg:nth-child(1), .rcard:focus-within .acircle svg:nth-child(1) { transform: translateX(160%); }
.rcard:hover .acircle svg:nth-child(2), .rcard:focus-within .acircle svg:nth-child(2) { transform: translateX(0); }
.rcard__body { margin: var(--sp-4) 0 0; font-size: var(--fs-body-s); font-weight: 400; line-height: var(--lh-prose); color: var(--color--grey-800); }
.rcard__link::after { content: ""; position: absolute; inset: 0; }

.rcard--cyan     { --rc-tint: var(--color--turquoise-200); --rc-ink: var(--color--blue-400);   --rc-grad: linear-gradient(160deg, #e0f7fb, #d3eefb); }
.rcard--coral    { --rc-tint: var(--color--red-200);       --rc-ink: var(--color--red-400);    --rc-grad: linear-gradient(160deg, #ffe6e8, #ffd9dc); }
.rcard--lime     { --rc-tint: var(--color--lime-200);      --rc-ink: var(--color--lime-800);   --rc-grad: linear-gradient(160deg, #f2f8d8, #e8f2bc); }
.rcard--lavender { --rc-tint: var(--color--violet-200);    --rc-ink: var(--color--violet-600); --rc-grad: linear-gradient(160deg, #f0e7fd, #e6ddfb); }

/* ---- 6. Final CTA ---- */

.ctashell { display: grid; place-items: center; padding-block: var(--sp-64) var(--sp-64); }  /* outro: symmetric 6.4rem */
.ctacard {
  width: min(46rem, 100% - 2.4rem);
  background: var(--color--white);
  border-radius: var(--radius--xl);
  box-shadow: var(--shadow--card-large);
  padding: 2.4rem var(--sp-40);
  text-align: center;
}
.ctacard h2 { margin: var(--sp-24) 0 0; }
.ctacard__sub { margin: var(--sp-12) auto 0; max-width: 34ch; color: var(--color--grey-800); }
.ctacard .btn-group { margin-top: var(--sp-32); justify-content: center; }
.trust { display: flex; align-items: center; justify-content: center; gap: var(--sp-16); flex-wrap: wrap; }
.trust__slot {
  display: grid; place-items: center;
  min-width: 5.2rem; padding: var(--sp-8) var(--sp-12);
  border: 1px dashed var(--color--grey-200);
  border-radius: var(--radius--s);
  font-size: var(--fs-tag); font-weight: 500;
  letter-spacing: var(--kern-tag); text-transform: uppercase;
  color: var(--color--grey-400);
}

/* ---- Homepage copy additions — existing tokens only, no new visual language ---- */

/* centred panels: keep a measured headline centred on its own block */
.aipanel h2, .integ h2, .ctacard h2 { margin-inline: auto; }

/* hero: the existing-user link sits inside the quiet note */
.hero__note a { color: var(--color--grey-1000); text-decoration: underline; text-underline-offset: 0.2em; }

/* Goal pills — a cloud of pastel pills.
   NOT orphaned: #needs dropped its goal list in the Klarna-layout rebuild, but
   solutions/universities.html:191 and its KO twin still use these rules. A
   review once claimed they were dead; they are not. Do not delete. */
.goals { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.goals .pill { padding: 0.7em 1.2em; font-size: var(--fs-body-m); font-weight: 400; }

/* #create — the lesson plan the AI returns */
.aichat__plan { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-8); counter-reset: plan; }
.aichat__plan li {
  display: flex; align-items: center; gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-12);
  border: 1px solid var(--color--grey-100);
  border-radius: var(--radius--m);
  font-size: var(--fs-body-xs); color: var(--color--grey-1000);
  counter-increment: plan;
}
.aichat__plan li::before {
  content: counter(plan);
  display: grid; place-items: center; flex: none;
  width: 1.6em; height: 1.6em;
  border-radius: var(--radius--circle);
  background: var(--color--purple-100); color: var(--color--violet-800);
  font-size: var(--fs-tag); font-weight: 500;
}

/* #roadmap — the marquee carries route steps instead of icon tiles */
.marquee__row { list-style: none; margin: 0; padding: 0; }
.tile.tile--step {
  width: auto;
  display: inline-flex; align-items: center; gap: var(--sp-8);
  padding-inline: var(--sp-16);
  font-size: var(--fs-body-s); font-weight: 500; white-space: nowrap;
}
.tile--step b { font-size: var(--fs-tag); font-weight: 500; letter-spacing: var(--kern-tag); opacity: .64; }

/* ---- Responsive for the parity sections ---- */

@media (max-width: 1080px) {
  .hcards, .rcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .shead { grid-template-columns: 1fr; gap: var(--sp-24); align-items: start; }
  .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pcard--wide { grid-column: span 2; }
  .panel { margin-inline: var(--sp-12); padding-block: 2.4rem var(--sp-56); }
  .ctashell { padding-block: 2.4rem; }
}

@media (max-width: 640px) {
  .pcards, .hcards, .rcards { grid-template-columns: minmax(0, 1fr); }
  .pcard--wide { grid-column: span 1; }
  .pcard { height: auto; padding-bottom: 0; }
  .pcard__media { margin-top: var(--sp-24); }
  .panel { margin-inline: var(--sp-8); border-radius: var(--radius--xl); }
  .ctacard { width: calc(100% - var(--sp-24)); padding: var(--sp-32) var(--sp-20); }
  .aichat { width: calc(100% - var(--sp-24)); }
  .ctacard .btn-group .btn, .ctacard .btn-group { width: 100%; }
  .tile { width: 3rem; height: 3rem; }
}

/* ---- Reduced motion: hold every ambient layer on a balanced frame ---- */

@media (prefers-reduced-motion: reduce) {
  .mesh::before {
    animation: none;
    transform: translate3d(0.25%, 0.5%, 0) scale(1.11) rotate(3.5deg);
  }
  .mesh::after {
    animation: none;
    transform: translate3d(-0.25%, 0.25%, 0) scale(1.10) rotate(-3deg);
  }
  .marquee__row { animation: none; transform: none; }
  .marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .shimmer {
    animation: none;
    background: none;
    -webkit-background-clip: border-box;
            background-clip: border-box;
    color: var(--color--grey-600);
  }
  .btn--rainbow::before { animation: none; background-position: 50% 50%; }
  .pcard:hover .pcard__media,
  .hcard:hover .hcard__media > *,
  .rcard:hover .rcard__media { transform: none; }
}

/* pill / arrow-link surfaces drive the same swap */
a:hover .acircle svg:nth-child(1), a:focus-visible .acircle svg:nth-child(1),
.pill:hover .acircle svg:nth-child(1), .pill:focus-visible .acircle svg:nth-child(1) { transform: translateX(160%); }
a:hover .acircle svg:nth-child(2), a:focus-visible .acircle svg:nth-child(2),
.pill:hover .acircle svg:nth-child(2), .pill:focus-visible .acircle svg:nth-child(2) { transform: translateX(0); }
a:hover .acircle, a:focus-visible .acircle { transform: scale(1.2); }

/* ---- Publishers solution: hidden for now, not removed (user, 2026-10-11:
   "없애는게 아니라 일단 안보이게 해줘"). The page and every link stay in the
   markup; this only takes the entry out of the Solutions menus — the desktop
   dropdown, the mobile accordion and the footer's Solutions list. Delete this
   block to bring it back. The selectors match "publishers" anywhere in the
   address, because the published site uses clean links (/solutions/publishers). */
.nav__dropitem[href*="publishers"],
#acc-solutions a[href*="publishers"],
.footer li:has(> a[href*="publishers"]),
.pcard:has(.pcard__link[href*="publishers"]),   /* solutions/index card (added the same day) */
.product-page .audcard[href*="publishers"],
.audcard[href*="publishers"] { display: none; } /* product page audience card (product.css sets .product-page .audcard to flex) */