/* Aouo Web — shared M3E primitives: page, nav, section, list, card, buttons. */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
/* Author `display` on a component would otherwise beat the UA's [hidden] rule. */
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-surface);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }

code, kbd, pre, .mono { font-family: var(--font-mono); font-variant-ligatures: none; }
.card__body code { font-size: 0.92em; color: var(--on-surface); background: var(--surface-container-high); border-radius: 4px; padding: 1px 5px; }

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

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

/* ── Page shell ────────────────────────────────────────────── */

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

.section { padding-block: clamp(76px, 10vw, 136px); }
.section--tint { background: var(--surface-container-low); }

.section__label {
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--primary); text-transform: uppercase;
}
/* A section title is meant to be read across the room; the components under
   it are Material, but the type above them is set the way Apple sets a page. */
.section__title {
  margin-top: var(--sp-12);
  font-size: clamp(30px, 4.2vw, 52px); font-weight: 600; letter-spacing: -0.025em;
  line-height: 1.12;
}
/* 58ch is about eleven words a line — past that the eye loses the return. */
.section__lede {
  margin-top: var(--sp-20); max-width: 58ch;
  font-size: 17px; line-height: 1.6; color: var(--on-surface-variant);
}
.section__head { margin-bottom: clamp(40px, 5vw, 64px); }
/* A second heading inside one section, for the part that follows a figure. */
.section__sub {
  margin: clamp(56px, 7vw, 88px) 0 var(--sp-20);
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--primary); text-transform: uppercase;
}

/* ── Top app bar ───────────────────────────────────────────── */

/* Over the hero the bar paints nothing at all — no fill and, above all, no
   backdrop-filter: filtering the backdrop recolours the strip it covers and
   cuts a visible seam across the aurora at 64px. The glass is a separate
   layer that fades in once the page has scrolled and real content starts
   passing underneath. */
.appbar { position: fixed; inset-inline: 0; top: 0; z-index: 40; }
.appbar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--surface-container) 86%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--outline-variant);
  opacity: 0; transition: opacity var(--dur-tab) var(--ease);
}
.appbar.is-stuck::before { opacity: 1; }
/* Weightless probe at the top of the document — the bar stays clear glass
   until a bar's worth of hero has scrolled past it. */
.appbar__sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 64px; pointer-events: none; }
.appbar__inner { display: flex; align-items: center; gap: var(--sp-20); height: 64px; }

.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.01em; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }

.appbar__nav { display: flex; gap: var(--sp-4); margin-left: auto; }
.appbar__nav a {
  padding: 8px 14px; border-radius: 999px; font-size: 14px;
  color: var(--on-surface-variant);
  transition: background var(--dur-state) var(--ease), color var(--dur-state) var(--ease);
}
.appbar__nav a:hover { background: var(--state-hover); color: var(--on-surface); }
.appbar__nav a:active { background: var(--state-press); }

/* Language toggle — two segments, same state-layer vocabulary as the nav. */
.lang {
  display: flex; flex: none; gap: 2px; padding: 2px;
  border-radius: 999px; background: var(--surface-container-high);
}
.lang__btn {
  min-width: 36px; padding: 6px 10px; border: 0; border-radius: 999px;
  background: transparent; color: var(--on-surface-variant);
  font-family: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
  transition: background var(--dur-state) var(--ease), color var(--dur-state) var(--ease);
}
.lang__btn:hover { background: var(--state-hover); color: var(--on-surface); }
.lang__btn:active { background: var(--state-press); }
.lang__btn.is-on { background: var(--primary-container); color: var(--on-primary-container); font-weight: 600; }

/* MDSwitch — track 52×32, handle 16→24, ~160ms, per design-system.md §8. */
.switch {
  position: relative; flex: none; width: 52px; height: 32px; padding: 0;
  border-radius: 16px; border: 2px solid var(--outline);
  background: var(--surface-container-highest); cursor: pointer;
  transition: background var(--dur-state) var(--ease), border-color var(--dur-state) var(--ease);
}
.switch__handle {
  position: absolute; top: 50%; left: 0;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--outline);
  transform: translate(4px, -50%);
  display: grid; place-items: center;
  transition: width var(--dur-state) var(--ease), height var(--dur-state) var(--ease),
    transform var(--dur-state) var(--ease), background var(--dur-state) var(--ease);
}
.switch__handle svg { width: 14px; height: 14px; opacity: 0; transform: scale(0.6);
  color: var(--on-primary-container);
  transition: opacity var(--dur-state) var(--ease), transform var(--dur-state) var(--ease); }
.switch[aria-checked="true"] { background: var(--primary); border-color: var(--primary); }
.switch[aria-checked="true"] .switch__handle {
  width: 24px; height: 24px; background: var(--on-primary); transform: translate(22px, -50%);
}
.switch[aria-checked="true"] .switch__handle svg { opacity: 1; transform: scale(1); }
.switch:hover { box-shadow: 0 0 0 8px var(--state-hover); }

/* ── Buttons ───────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 22px; border: 0; border-radius: 999px;
  font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease),
    transform var(--dur-state) var(--ease);
}
.btn--filled { background: var(--primary); color: var(--on-primary); }
.btn--filled:hover { box-shadow: var(--shadow-2); }
.btn--tonal { background: var(--primary-container); color: var(--on-primary-container); }
.btn--tonal:hover { background: color-mix(in srgb, var(--primary-container) 88%, var(--primary)); }
.btn--text { background: transparent; color: var(--primary); padding-inline: 14px; }
.btn--text:hover { background: var(--state-hover); }
.btn:active { transform: scale(0.98); }

/* Connected Button Run — gap 3, height 44, outer 22, inner 8. */
.button-run { display: inline-flex; gap: var(--gap-connected); }
.button-run .btn { min-height: 44px; border-radius: var(--radius-run-inner); }
.button-run .btn:first-child {
  border-start-start-radius: var(--radius-run); border-end-start-radius: var(--radius-run);
}
.button-run .btn:last-child {
  border-start-end-radius: var(--radius-run); border-end-end-radius: var(--radius-run);
}

/* ── Connected list — 3 / 20 / 6, no dividers ──────────────── */

.list { display: flex; flex-direction: column; gap: var(--gap-connected); }
.list__row {
  display: flex; align-items: center; gap: var(--sp-12);
  min-height: 56px; padding: 14px var(--sp-16);
  background: var(--surface-container-low);
  border-radius: var(--radius-inner);
  transition: background var(--dur-state) var(--ease);
}
.list--interactive .list__row:hover { background: var(--surface-container-high); }
.list__row:first-child {
  border-start-start-radius: var(--radius-outer); border-start-end-radius: var(--radius-outer);
}
.list__row:last-child {
  border-end-start-radius: var(--radius-outer); border-end-end-radius: var(--radius-outer);
}
.list__row:only-child { border-radius: var(--radius-outer); }
.section--tint .list__row { background: var(--surface); }

.icon-circle {
  flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--primary-container); color: var(--on-primary-container);
}
.icon-circle svg { width: 19px; height: 19px; }
.icon-circle[data-tone="blue"]   { background: var(--icon-blue-container);   color: var(--icon-blue); }
.icon-circle[data-tone="pink"]   { background: var(--icon-pink-container);   color: var(--icon-pink); }
.icon-circle[data-tone="orange"] { background: var(--icon-orange-container); color: var(--icon-orange); }
.icon-circle[data-tone="yellow"] { background: var(--icon-yellow-container); color: var(--icon-yellow); }
.icon-circle[data-tone="green"]  { background: var(--icon-green-container);  color: var(--icon-green); }
.icon-circle[data-tone="gray"]   { background: var(--icon-gray-container);   color: var(--icon-gray); }

.row__text { min-width: 0; }
/* Two stacked lines, not a sentence run on from the headline: the title says
   what the row is, the line under it says the rest. */
.row__headline { display: block; font-size: 14px; font-weight: 500; }
.row__support { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.55; color: var(--on-surface-variant); }
/* The single requirement worth printing, under the steps that need it. */
.list__foot { margin-top: var(--sp-16); font-size: 12.5px; color: var(--on-surface-variant); }
.row__trailing { margin-left: auto; font-size: 12.5px; color: var(--on-surface-variant); }

/* ── Card — one information object ─────────────────────────── */

.card {
  background: var(--surface-container-low);
  border-radius: var(--radius-card);
  padding: var(--sp-16);
}
.section--tint .card { background: var(--surface); }
.card__title { display: flex; align-items: center; gap: var(--sp-12); font-size: 15px; font-weight: 600; }
/* How many tools this category holds — the fact a reader actually wants from
   a category card, in place of the names they cannot memorise anyway. */
.card__count {
  margin-left: auto; font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  color: var(--on-surface-variant);
}
.card__body { margin-top: var(--sp-12); font-size: 13.5px; color: var(--on-surface-variant); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-12); }
.chip {
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1;
  padding: 7px 10px; border-radius: 9px;
  background: var(--surface-container-high); color: var(--on-surface-variant);
}
.section--tint .chip { background: var(--surface-container); }

.grid { display: grid; gap: var(--sp-12); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ── Steps rail ────────────────────────────────────────────── */

.rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-12); position: relative; }
.rail__step {
  position: relative; padding: var(--sp-20) var(--sp-16);
  background: var(--surface-container-low); border-radius: var(--radius-card);
}
.section--tint .rail__step { background: var(--surface); }
.rail__step::after {
  content: ""; position: absolute; top: 36px; right: -12px; width: 12px; height: 2px;
  background: var(--outline-variant);
}
.rail__step:last-child::after { display: none; }
.rail__num {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary-container); color: var(--on-primary-container);
  font-size: 13px; font-weight: 600;
}
.rail__title { margin-top: var(--sp-12); font-size: 15px; font-weight: 600; }
.rail__text { margin-top: 6px; font-size: 13px; color: var(--on-surface-variant); }

/* ── Layer diagram ─────────────────────────────────────────────
   Drawn, not spelled out in spaced monospace: three bands and two arrows.
   The drawing spans the same column as everything else on the page — it is
   never boxed in narrower than the cards above it. */

.diagram { margin: var(--sp-32) 0 0; overflow-x: auto; }
.diagram svg { display: block; width: 100%; min-width: 560px; height: auto; }
/* The viewBox is 1160 wide, which is exactly the column at its widest, so at
   full size one user unit is one page pixel and 15 below is 15 on screen. On a
   narrower column the whole drawing scales down, and the type would go with
   it — so each step down the type is written larger in user units by however
   much the drawing shrank. The rendered labels stay around 13–16px throughout.
   That is the knob to turn if the labels look wrong: the type, never the width. */
.dg__label { font-size: 15px; }
.dg__detail { font-size: 13px; }
.dg__cap { font-size: 12px; }
.dg__sub { font-size: 13px; }
.dg__mini { font-size: 11.5px; }
@media (max-width: 1240px) {
  .dg__label { font-size: 17px; }
  .dg__detail { font-size: 14.5px; }
  .dg__cap { font-size: 13.5px; }
  .dg__sub { font-size: 14.5px; }
  .dg__mini { font-size: 13px; }
}
@media (max-width: 1000px) {
  .dg__label { font-size: 21px; }
  .dg__detail { font-size: 18.5px; }
  .dg__cap { font-size: 17px; }
  .dg__sub { font-size: 18.5px; }
  .dg__mini { font-size: 16px; }
}
@media (max-width: 720px) {
  .dg__label { font-size: 28px; }
  .dg__detail { font-size: 24.5px; }
  .dg__cap { font-size: 22.5px; }
  .dg__sub { font-size: 24px; }
  .dg__mini { font-size: 21px; }
}
.dg__band { fill: var(--surface-container-low); stroke: var(--outline-variant); stroke-width: 1; }
.section--tint .dg__band { fill: var(--surface); }
/* The middle band is the one this whole page is about. */
.dg__band--aouo {
  fill: color-mix(in srgb, var(--primary) 8%, var(--surface));
  stroke: color-mix(in srgb, var(--primary) 34%, transparent);
}
.dg__label { font-family: var(--font); font-weight: 600; fill: var(--on-surface); }
.dg__label--aouo { fill: var(--primary); }
/* The Aouo band is the only one with an inside: two halves, context and
   capability, drawn as rows so the labels never collide with their details
   at the largest type step. */
.dg__row {
  fill: color-mix(in srgb, var(--primary) 6%, var(--surface));
  stroke: color-mix(in srgb, var(--primary) 20%, transparent); stroke-width: 1;
}
.dg__sub { font-family: var(--font); font-weight: 600; fill: var(--on-surface); }
.dg__mini { font-family: var(--font-mono); fill: var(--on-surface-variant); }
.dg__detail { font-family: var(--font-mono); fill: var(--on-surface-variant); }
.dg__cap { font-family: var(--font-mono); fill: var(--on-surface-variant); }
.dg__arrow { fill: none; stroke: var(--outline); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ── Call trace ────────────────────────────────────────────────
   Real columns instead of columns faked with spaces, so the three fields
   stay aligned in any font and the whole run reads as one sequence. */

.trace {
  position: relative; margin-top: var(--sp-20);
  padding: var(--sp-20); border-radius: var(--radius-card);
  background: var(--surface-container-low);
  display: grid; grid-template-columns: 12px auto auto 1fr; gap: 9px var(--sp-16);
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5;
  overflow-x: auto;
}
.section--tint .trace { background: var(--surface); }
.trace li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
/* One rail through every call: a dot per row, a hairline joining them. */
.trace li::before {
  content: ""; justify-self: center; width: 5px; height: 5px;
  border-radius: 50%; background: var(--primary); opacity: 0.5;
}
.trace::before {
  content: ""; position: absolute; left: calc(var(--sp-20) + 5.5px);
  top: calc(var(--sp-20) + 10px); bottom: calc(var(--sp-20) + 10px);
  width: 1px; background: var(--outline-variant);
}
.trace span { white-space: nowrap; }
.trace__tool { color: var(--primary); font-weight: 600; }
.trace__arg { color: var(--on-surface-variant); opacity: 0.7; }
.trace__out { color: var(--on-surface-variant); }
.trace__out.is-ok { color: var(--success); }

/* ── Disclosure ────────────────────────────────────────────────
   The whole tool list is a reference, not a pitch: it belongs one click in,
   where the reader who wants it can find it and nobody else has to scroll it. */

.disclose { margin-top: var(--sp-32); }
.disclose summary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px var(--sp-20); border-radius: 999px; cursor: pointer;
  background: var(--surface-container-low); color: var(--on-surface);
  font-size: 14px; font-weight: 500;
  transition: background var(--dur-state) var(--ease);
}
.section--tint .disclose summary { background: var(--surface); }
.disclose summary::-webkit-details-marker { display: none; }
.disclose summary::marker { content: ""; }
/* The caret turns with the disclosure, so the control says which way it goes. */
.disclose summary::after {
  content: "›"; font-size: 17px; line-height: 1; color: var(--on-surface-variant);
  transition: transform var(--dur-tab) var(--ease);
}
.disclose[open] summary::after { transform: rotate(90deg); }
.disclose summary:hover { background: var(--surface-container); }
.section--tint .disclose summary:hover { background: var(--surface-container-low); }

.disclose__body { display: grid; gap: var(--sp-20); margin-top: var(--sp-20); }
.disclose__group { display: grid; grid-template-columns: 148px 1fr; gap: var(--sp-16); align-items: baseline; }
.disclose__name { font-size: 13.5px; font-weight: 600; }
.disclose__group .chips { margin-top: 0; }
@media (max-width: 720px) {
  .disclose__group { grid-template-columns: 1fr; gap: 8px; }
}

/* ── Footer ────────────────────────────────────────────────── */

.footer { padding-block: 56px 40px; border-top: 1px solid var(--outline-variant); }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(2, 1fr); gap: var(--sp-20); }
.footer__tagline {
  margin-top: var(--sp-12); max-width: 34ch;
  font-size: 13.5px; line-height: 1.6; color: var(--on-surface-variant);
}
.footer h4 { font-size: 13px; font-weight: 600; margin-bottom: var(--sp-12); }
.footer li { margin-bottom: 8px; }
/* Named, not linked — nothing to navigate to until the docs are published. */
.footer__list li { font-size: 13.5px; color: var(--on-surface-variant); opacity: 0.75; }
.footer a { font-size: 13.5px; color: var(--on-surface-variant); }
.footer a:hover { color: var(--primary); }
/* The line every product page ends on, under a rule, saying who made this. */
.footer__legal {
  margin-top: var(--sp-32); padding-top: var(--sp-20);
  border-top: 1px solid var(--outline-variant);
  font-size: 12.5px; color: var(--on-surface-variant); opacity: 0.8;
}
/* ── Scroll reveal ─────────────────────────────────────────── */

.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .rail { grid-template-columns: repeat(2, 1fr); }
  .rail__step::after { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .appbar__nav { display: none; }
  .lang { margin-left: auto; }
  /* Rows wrap to 3+ lines here, so the leading icon belongs at the top. */
  .list__row { align-items: flex-start; }
  .list__row .icon-circle { margin-top: 1px; }
  .grid--3, .grid--2, .grid--4 { grid-template-columns: 1fr; }
  .rail { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
}
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); }

/* ── Tenet — the two sentences the whole product hangs on ──────
   Set large enough to be read as a claim, not as body copy. */

.tenet { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-12); margin-top: var(--sp-32); }
.tenet p {
  padding: var(--sp-22) var(--sp-22); border-radius: var(--radius-card);
  background: var(--surface-container-low);
  font-size: clamp(16px, 1.5vw, 20px); font-weight: 600;
  line-height: 1.42; letter-spacing: -0.015em;
}
.section--tint .tenet p { background: var(--surface); }
.tenet em { font-style: normal; color: var(--primary); }

/* ── Flow — the three context layers, in the order they fill ─── */

.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: var(--sp-22); }
.flow span {
  padding: 7px 14px; border-radius: 999px;
  background: var(--surface-container-high); font-size: 12.5px;
}
.section--tint .flow span { background: var(--surface-container); }
.flow span.is-key { background: var(--primary-container); color: var(--on-primary-container); font-weight: 600; }
.flow i { font-style: normal; color: var(--outline); }

/* ── Note — what we do not claim yet ───────────────────────────
   Deliberately plain: a promise typeset like a promise reads as
   marketing, so the limits are set as a list, not as a banner. */

.note {
  margin-top: var(--sp-32); padding: var(--sp-22);
  border-radius: var(--radius-card);
  background: var(--surface-container); border: 1px solid var(--outline-variant);
}
.section--tint .note { background: var(--surface); }
.note__title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.note__title svg { width: 17px; height: 17px; color: var(--on-surface-variant); }
.note ul { display: grid; gap: 9px; margin-top: var(--sp-16); }
.note li { position: relative; padding-left: 17px; font-size: 13px; line-height: 1.6; color: var(--on-surface-variant); }
.note li::before {
  content: ""; position: absolute; left: 3px; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--outline);
}
.note li code { font-size: 0.92em; }

/* ── Compact list — claims, not settings rows ──────────────────
   Same connected-list shape as .list, but no icon circle: these
   read as a column of statements and want a tighter rhythm. */

.list--compact .list__row { min-height: 46px; padding: 11px var(--sp-16); gap: 10px; }
.list--compact .row__headline { font-size: 13.5px; font-weight: 500; }
.list__mark { flex: none; display: grid; place-items: center; width: 18px; height: 18px; color: var(--primary); }
.list__mark svg { width: 15px; height: 15px; }
.list__mark[data-tone="off"] { color: var(--outline); }
.list__head {
  margin-bottom: var(--sp-12); font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-surface-variant);
}

/* Chips for capabilities that are deliberately absent. Dashed, not
   struck through — these are decisions, not failures. */
.chips--off .chip {
  background: transparent; border: 1px dashed var(--outline-variant);
  color: var(--on-surface-variant);
}
.section--tint .chips--off .chip { background: transparent; }

/* ── Badge — a plan marker on a card title ─────────────────────── */

.badge {
  margin-left: auto; flex: none; padding: 3px 10px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  background: var(--surface-container-high); color: var(--on-surface-variant);
}
.section--tint .badge { background: var(--surface-container); }
.badge--pro { background: var(--primary-container); color: var(--on-primary-container); }

/* ── Plan — pricing ────────────────────────────────────────────── */

.plan {
  display: flex; flex-direction: column;
  padding: var(--sp-22); border-radius: var(--radius-dialog);
  background: var(--surface-container-low);
}
.section--tint .plan { background: var(--surface); }
.plan--pro {
  background: color-mix(in srgb, var(--primary) 7%, var(--surface-container-low));
  outline: 1px solid color-mix(in srgb, var(--primary) 26%, transparent); outline-offset: -1px;
}
.section--tint .plan--pro { background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.plan__name { display: flex; align-items: center; gap: var(--sp-12); font-size: 15px; font-weight: 600; }
.plan__price { margin-top: var(--sp-16); font-size: clamp(32px, 3.4vw, 42px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.plan__price small { font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--on-surface-variant); }
.plan__note { margin-top: 8px; font-size: 12.5px; color: var(--on-surface-variant); }
.plan__list { display: grid; gap: 10px; margin-top: var(--sp-22); }
.plan__list li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.5; }
.plan__list svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--primary); }
.plan__cta { margin-top: auto; padding-top: var(--sp-22); }
.plan__soon { font-size: 13px; color: var(--on-surface-variant); }

/* ── Responsive for the additions ─────────────────────────────── */

@media (max-width: 860px) {
  .tenet { grid-template-columns: 1fr; }
}