/*
  sections.css: the content regions (065/004), design package §9a to §13: the difference, Made
  for life here, the three modes (with the interlude's line), the privacy teaser and pricing.
  Every rule is scoped under its region's root (.difference, .life, .modes, .privacy, .pricing) or
  a class named for it. The privacy cards and the questions moved to their pages (pages.css,
  065/016).

  Written narrow first. Medium is min-width 721px; wide is (min-width: 1024px) and landscape
  (package, section 5). Logical properties only; anything directional multiplies by --dir.
*/

/* ---------- §9a The difference: named duels ---------- */
.difference .h2 {
  margin-block-end: 1.25rem;
}
.difference__sub {
  margin-block-end: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
/* Round 2 (065/010): each duel is one solid card (Surface 1, opaque over the background arc):
   them, muted, then a gold arrow badge, then NOCTS. Stacked, the arrow points down, on narrow
   and medium screens (at medium width three columns would squeeze the "them" quote under
   260px); on wide ones it is three columns and the arrow points to NOCTS, mirrored in RTL.
   Each side names itself ("NOCTS", or the products as its H3). */
.difference__rows {
  display: grid;
  gap: 1rem;
}
.difference__row {
  display: grid;
  justify-items: stretch;
  gap: 1rem;
  padding: clamp(1.5rem, 1.1rem + 1vw, 1.875rem) clamp(1.25rem, 0.8rem + 1.5vw, 2rem);
  border: 1px solid color-mix(in srgb, var(--ivory) 8%, transparent);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
}
.difference__side {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  min-width: 0;
}
.difference__names {
  margin: 0;
  color: var(--ash);
  font: 500 var(--fs-eyebrow) / 1.5 var(--font-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.difference__names--us {
  color: var(--gold);
}
.difference__say {
  color: var(--ash);
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.difference__line {
  color: color-mix(in srgb, var(--ash) 85%, transparent);
  font-size: 0.9375rem;
}
.difference__side--us .difference__say {
  color: var(--ivory);
  font-size: clamp(1.25rem, 1.15rem + 0.3vw, 1.375rem);
}
.difference__side--us .difference__line {
  color: color-mix(in srgb, var(--ivory) 80%, transparent);
  font-size: 1rem;
}
.difference__arrow {
  display: grid;
  place-items: center;
  justify-self: center;
  width: 48px;
  height: 48px;
  border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--gold);
}
.difference__arrow svg {
  width: 20px;
  height: 20px;
  transform: rotate(90deg);
}
@media (min-width: 1024px) and (orientation: landscape) {
  .difference__row {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.1fr);
    align-items: center;
    column-gap: 3rem;
  }
  .difference__arrow svg {
    transform: scaleX(var(--dir));
  }
}
:lang(ar) .difference__names {
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
}
:lang(ar) .difference__say {
  line-height: 1.5;
  letter-spacing: 0;
}
/* Arabic quotes with guillemets, as its catalog writes them elsewhere; in a right-to-left line
   the bidi algorithm mirrors them, so the opening mark sits at the line's start (the right). */
:lang(ar) .difference__say q {
  quotes: '\00AB' '\00BB';
}

/* ---------- §10 Made for life here: the timed list ----------
   life.js opens one row at a time and runs the timer: a CSS animation on the open row's bar
   and on the card's two bars (--life-row, 6s), paused under .is-held (hover, keyboard focus in
   the list, Pause, out of view) and by base.css while the tab is hidden. Without JS every row
   is open and the card shows the first moment; under reduced motion nothing runs on its own. */
.life {
  --life-row: 6s; /* starting point (package, section 19) */
  --life-s: 1.3; /* the app card at 1.3x the phone kit's scale (package, 6.5) */
}
.life__layout {
  display: grid;
  grid-template-areas:
    'title'
    'card'
    'body';
  gap: 2rem;
}
.life__title {
  grid-area: title;
  margin-block-end: 0;
}
.life__card {
  display: flex;
  grid-area: card;
  align-items: center;
  gap: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  min-height: clamp(15rem, 10rem + 16vw, 26rem);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1rem, 0.5rem + 1.5vw, 2rem);
  border-radius: 28px; /* .frost in the markup: Surface 1 at 72%, blurred, a hairline */
}
.life__body {
  grid-area: body;
}

/* The card's timing bars, either side of the app card: a gold track filling toward it. */
.life__bar {
  position: relative;
  flex: 1 1 0;
  min-width: 0.75rem;
  height: 2px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--gold) 28%, transparent);
}
.life__bar::after,
.life__timer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
}
.life__bar--start::after,
.life__timer::after {
  transform-origin: calc(50% - 50% * var(--dir)) 50%; /* inline-start */
}
.life__bar--end::after {
  transform-origin: calc(50% + 50% * var(--dir)) 50%; /* inline-end */
}
.life.is-timing .life__row.is-open .life__timer::after,
.life.is-timing .life__bar::after {
  /* Longhands, so the held rule below can pause it: the shorthand would reset the play state
     at a higher specificity. */
  animation-name: life-fill;
  animation-duration: var(--life-row);
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.life.is-held .life__timer::after,
.life.is-held .life__bar::after {
  animation-play-state: paused;
}
@keyframes life-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* The moments share one cell, so the card keeps the tallest one's height and never jumps. */
.life__moments {
  display: grid;
  flex: 0 1 21rem;
  min-width: 0;
}
/* The incoming moment fades and rises over 0.4s; the outgoing one fades out first, quickly, so
   the two never read on top of each other. */
.life__moment {
  grid-area: 1 / 1;
  align-self: center;
  transition:
    opacity 0.4s var(--ease-out) 0.12s,
    transform 0.4s var(--ease-out) 0.12s;
}
.life__moment:not(.is-on) {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.12s linear,
    transform 0s linear 0.12s;
}

/* The only Cyrillic and Arabic an English page lays out are here: Русский in the language
   moment, and خالد in the third row's text. Laid out as the page loads, they pulled the
   Cyrillic and Arabic faces (59 KB) into the first view (065/005, the narrow budget). The
   language moment is skipped until it nears the viewport; skipped, it takes no height, and as it
   is never the tallest moment the card keeps its size. The rows' texts are skipped only until
   the page is ready, by which time life.js has hidden all but the first; life.js loads their
   faces a screen ahead of the list, so the third row never opens on a fallback face. Without
   .is-ready (the modules never came) they stay auto, and still render as they near. */
.life__moment:has(bdi:lang(ru)),
.js:not(.is-ready) .life__row:not(:first-child) .life__text {
  content-visibility: auto;
  contain-intrinsic-size: auto 0px;
}

/* The app card (package, 6.5): Surface 1, a hairline, radius 14, 12px padding, at 1.3x. */
.life__app {
  position: relative;
  padding: calc(12px * var(--life-s));
  border: 1px solid var(--hairline);
  border-radius: calc(14px * var(--life-s));
  background: var(--surface-1);
  box-shadow: var(--shadow-float);
  font-family: var(--font-plex), var(--font-system);
  line-height: 1.4;
}
.life__icons {
  position: absolute;
  inset-block-start: calc(11px * var(--life-s));
  inset-inline-end: calc(12px * var(--life-s));
  display: flex;
  gap: calc(6px * var(--life-s));
  color: var(--ash);
}
.life__icons svg {
  width: calc(14px * var(--life-s));
  height: calc(14px * var(--life-s));
}
.life__eyebrow {
  padding-inline-end: calc(44px * var(--life-s));
  color: var(--gold);
  font: 500 calc(9.5px * var(--life-s)) / 1.5 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.life__app-title {
  margin-block-start: calc(5px * var(--life-s));
  color: var(--ivory);
  font-size: calc(13px * var(--life-s));
  font-weight: 600;
  line-height: 1.35;
}
.life__meta {
  margin-block-start: calc(4px * var(--life-s));
  color: var(--ash);
  font-size: calc(11px * var(--life-s));
}
.life__app .mono {
  font-size: 0.94em;
}
.life__actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6px * var(--life-s));
  margin-block-start: calc(10px * var(--life-s));
}
.life__act {
  display: inline-flex;
  align-items: center;
  min-height: calc(27px * var(--life-s));
  padding-inline: calc(11px * var(--life-s));
  border-radius: calc(8px * var(--life-s));
  background: var(--surface-2);
  color: var(--ivory);
  font-size: calc(11px * var(--life-s));
  font-weight: 500;
  white-space: nowrap;
}
.life__act--primary {
  background: var(--gold);
  color: var(--night);
}

/* The list (round 2, 065/010): each row a frost pill (.frost in the markup), the open one a
   raised card (--frost-raised) holding its line and, along its foot, the gold timer on an Ivory
   track. The pill's radius is half its 54px height rather than 999, so the change to the card's
   22 eases over the whole 0.4s instead of snapping at its end; the text's height eases with it
   where the browser can animate to auto (interpolate-size), and is instant elsewhere. The
   transitions wait for .is-ready, so life.js closing the other rows on load doesn't animate, and
   base.css strips them under reduced motion. */
.life__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  interpolate-size: allow-keywords;
}
.life__row {
  --life-pill: 54px;
  position: relative;
  border-radius: calc(var(--life-pill) / 2);
}
.life__row.is-open {
  padding-block-end: 2.25rem;
  border-radius: var(--radius-lg);
  background: var(--frost-raised);
}
.is-ready .life__row {
  transition:
    border-radius 0.4s var(--ease-out),
    background-color 0.4s var(--ease-out),
    padding 0.4s var(--ease-out);
}
.life__heading {
  margin: 0;
  font: inherit;
  letter-spacing: 0;
}
.life__toggle {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  min-height: calc(var(--life-pill) - 2px); /* inside the row's hairline */
  padding: 0.75rem 22px;
  border: 0;
  border-radius: inherit;
  background: none;
  color: color-mix(in srgb, var(--ivory) 88%, transparent);
  font: 500 1.0625rem / 1.4 var(--font-body);
  text-align: start;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out);
}
.life__toggle:hover,
.life__toggle[aria-expanded='true'] {
  color: var(--ivory);
}
.life__toggle:focus-visible {
  outline-offset: 2px;
}
.life__icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--ash);
  transition: color 0.4s var(--ease-out);
}
.life__row.is-open .life__icon {
  color: var(--gold);
}
.life__text {
  overflow: hidden;
  max-width: calc(32em + 22px + 20px + 0.875rem);
  padding-inline: calc(22px + 20px + 0.875rem) 22px;
  color: color-mix(in srgb, var(--ivory) 78%, transparent);
  font-size: 1rem;
}
.is-ready .life__text {
  transition:
    height 0.4s var(--ease-out),
    opacity 0.4s var(--ease-out),
    display 0.4s allow-discrete;
}
.life__text[hidden] {
  height: 0;
  opacity: 0;
}
@starting-style {
  .is-ready .life__text {
    height: 0;
    opacity: 0;
  }
}
.life__timer {
  position: absolute;
  inset-block-end: 1rem;
  inset-inline: 24px;
  height: 2px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ivory) 12%, transparent);
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
}
.life__row:not(.is-open) .life__timer {
  opacity: 0;
}
.life__pause {
  margin-block-start: 1.5rem;
}

/* ---------- §10a Three modes: one card (065/022) ----------
   NOCTS's message (the interlude's line, typed into a bubble), then the composer's mode menu
   looping through the modes, each hovered mode's meter card beside it, and Compare pricing.
   No container around the block: the bubble, the composer, the menu, the card and the button
   are its only surfaces.

   Without JS or under reduced motion this is the static state: the bubble with the whole line,
   the three cards as a grid under it and the button. With motion, modes.js puts .is-play on the
   root: the scene becomes a grid holding the composer, the menu under its pill and the card slot
   (the three cards stacked in one cell, so it is as tall as the tallest), with the cursor laid
   over it. The cursor is placed with physical left/top from measured boxes; everything else is
   logical and mirrors in RTL. */
.modes {
  --modes-column: min(912px, 100%); /* the composer's width, centred: the chat column */
  --modes-menu: min(420px, 100%);
  --modes-gap-msg: 64px; /* the bubble to the composer (or the static grid) */
  --modes-gap-menu: 12px; /* the composer to its menu */
  --modes-gap-card: 24px; /* the menu to the card beside it, wide */
  --modes-gap-under: 16px; /* the menu to the card under it, narrow */
  --modes-gap-more: 24px; /* the scene to Compare pricing */
  --modes-card-from: 0, 16px; /* where a card slides in from: up from below, narrow */
}

/* The message: frost glass, the nav islands' surface (layout.css's .glass tokens). */
.modes__msg {
  inline-size: fit-content;
  max-inline-size: var(--modes-column);
  margin-inline-start: calc((100% - var(--modes-column)) / 2);
  margin-block-end: var(--modes-gap-msg);
  padding-block: 20px 24px;
  padding-inline: 28px 30px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow: var(--shadow-float);
}
.modes__who {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-block-end: 12px;
  color: var(--ivory);
  font: 500 12px / 1 var(--font-mono);
  letter-spacing: 0.08em;
}
.modes__eyes {
  flex: none;
  inline-size: 22px;
  block-size: 13px;
  color: var(--gold);
}
/* The line: Sora 600 for Latin, 42px at 1440 down to 28px at 390; Russian and Arabic take the
   brand kit's heading faces, leading and tracking (tokens.css), as .h2 does. */
.modes__line {
  font-size: clamp(1.75rem, 1.425rem + 1.3333vw, 2.625rem);
  line-height: var(--leading-heading);
  letter-spacing: var(--track-h2);
  overflow-wrap: break-word;
}
.modes__part,
.modes__typed-part {
  display: block;
}
/* The typed copy (modes.js, aria-hidden beside the original): words never break inside, each
   unit (a grapheme; a word in Arabic) shows once typed, and the caret follows the last one. It
   adds no width, so nothing moves as it goes. */
.modes__word {
  white-space: nowrap;
}
.modes__unit:not(.is-typed) {
  visibility: hidden;
}
.modes__caret {
  display: inline-block;
  inline-size: 3px;
  block-size: 0.88em;
  margin-inline-end: -3px;
  border-radius: 2px;
  background: var(--gold);
  vertical-align: -0.16em;
  animation: modes-blink 0.8s steps(1) infinite;
}
@keyframes modes-blink {
  50% {
    opacity: 0;
  }
}

/* The cards: the static state's grid, and with motion the slot. */
.modes__scene {
  position: relative;
}
.modes__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
.modes__card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  border-radius: var(--radius-lg);
}
.modes__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.modes__label {
  color: var(--gold);
  font: 500 var(--fs-eyebrow) / 1.5 var(--font-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.modes__icon {
  flex: none;
  inline-size: 28px;
  block-size: 28px;
  color: var(--gold);
}
.modes__name {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--track-h3);
}
.modes__text {
  color: color-mix(in srgb, var(--ivory) 74%, transparent);
  font-size: 1rem;
  line-height: 1.6;
}
.modes__meters {
  display: grid;
  gap: 0.625rem;
  margin-block-start: 0.5rem;
}
.modes__meter {
  display: flex;
  align-items: center;
}
.modes__meter-label {
  flex: none;
  inline-size: 5.5em;
  color: var(--ash);
  font: 500 11px / 1.5 var(--font-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.modes__bars {
  display: flex;
  gap: 6px;
}
.modes__bar {
  inline-size: 28px;
  block-size: 7px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ivory) 12%, transparent);
}
.modes__bar--on {
  background: var(--gold);
}
.modes__foot {
  margin-block-start: auto;
  padding-block-start: 1rem;
  color: var(--ash);
  font: 400 0.8125rem / 1.5 var(--font-mono);
}
:lang(ar) .modes__label {
  font-size: 0.8125rem;
  text-transform: none;
}
:lang(ar) .modes__meter-label {
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
}

/* The composer, its menu and the cursor: hidden in the HTML, shown by modes.js with motion. */
.modes__composer {
  display: flex;
  align-items: center;
  gap: 10px;
  block-size: 72px;
  padding-inline: 28px 12px;
  border: 1px solid var(--hairline);
  border-radius: 36px;
  background: var(--frost-bg-dense);
  -webkit-backdrop-filter: var(--frost-filter);
  backdrop-filter: var(--frost-filter);
}
.modes__ask {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  color: var(--ash);
  font-size: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.modes__pill {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding-block: 9px;
  padding-inline: 16px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ivory);
  font: 500 15px / 1.2 var(--font-body);
  white-space: nowrap;
  transition: border-color 0.15s var(--ease-out);
}
.modes__pill.is-hover {
  border-color: color-mix(in srgb, var(--ivory) 25%, transparent);
}
.modes__chevron {
  inline-size: 16px;
  block-size: 16px;
  color: var(--ash);
}
.modes__send {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--night);
}
.modes__send-icon {
  inline-size: 22px;
  block-size: 22px;
  transform: scaleX(var(--dir));
}
.modes__menu {
  padding: 8px;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: var(--frost-raised);
  -webkit-backdrop-filter: var(--frost-filter);
  backdrop-filter: var(--frost-filter);
  box-shadow: var(--shadow-float);
  opacity: 0;
  visibility: hidden;
}
.modes__menu.is-open {
  opacity: 1;
  visibility: visible;
}
.modes__row {
  display: flex;
  align-items: center;
  gap: 12px;
  block-size: 96px;
  padding-inline: 16px;
  border-radius: 14px;
  transition: background-color 0.15s var(--ease-out);
}
.modes__row.is-hover {
  background: color-mix(in srgb, var(--ivory) 6%, transparent);
}
.modes__row-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-inline-size: 0;
}
.modes__row-name {
  color: var(--ivory);
  font: 600 16.5px / 1.3 var(--font-body);
}
.modes__row-label {
  overflow: hidden;
  color: var(--ash);
  font-size: 14.5px;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.modes__row-plan {
  flex: none;
  color: var(--ash);
  font: 500 10.5px / 1.4 var(--font-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.modes__row-plan--max {
  color: var(--gold);
}
:lang(ar) .modes__row-plan {
  font-size: 0.75rem;
  letter-spacing: 0;
  text-transform: none;
}
.modes__row-check {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  color: var(--gold);
}
.modes__cursor {
  position: absolute;
  inset-block-start: 0;
  left: 0;
  z-index: 1;
  inline-size: 34px;
  block-size: 34px;
  pointer-events: none;
}
.modes__cursor-glyph {
  display: block;
  inline-size: 34px;
  block-size: 34px;
  color: var(--ivory);
  stroke: var(--night);
  /* The arrow's tip, (3, 2) in its 24-unit box: the click scales about it. */
  transform-origin: 4.25px 2.83px;
}

/* Compare pricing: the gold button at 40px and 15px (44px tall on narrow, for touch). */
.modes__more {
  display: flex;
  justify-content: center;
  margin-block-start: var(--modes-gap-more);
}
.modes__compare {
  min-height: 40px;
  padding-inline: 18px;
  font-size: 0.9375rem;
}
.modes__compare-icon {
  flex: none;
  inline-size: 16px;
  block-size: 16px;
}

/* ---------- With motion (.is-play): the scene, narrow first ----------
   The composer runs the chat column; the menu sits under its inline end and the card slot
   under the menu at its width. The rows' heights are their tallest content, so nothing below
   moves while the loop runs. Before the start the bubble, the composer and the cursor wait
   unseen; the button waits until the first pass is done (.is-compare). */
.modes.is-play .modes__scene {
  display: grid;
  grid-template-columns:
    [full-start] calc((100% - var(--modes-column)) / 2)
    [composer-start] minmax(0, 1fr)
    [menu-start card-start] var(--modes-menu)
    [menu-end card-end composer-end] calc((100% - var(--modes-column)) / 2)
    [full-end];
  align-items: start;
}
.modes.is-play .modes__composer {
  grid-row: 1;
  grid-column: composer;
}
.modes.is-play .modes__menu {
  grid-row: 2;
  grid-column: menu;
  margin-block-start: var(--modes-gap-menu);
}
.modes.is-play .modes__grid {
  grid-template-columns: minmax(0, 1fr);
  grid-row: 3;
  grid-column: card;
  margin-block-start: var(--modes-gap-under);
}
/* Every card stays in the accessibility tree; only the shown one draws. */
.modes.is-play .modes__card {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: none;
}
.modes.is-play .modes__card.is-shown {
  opacity: 1;
  pointer-events: auto;
}
.modes.is-play:not(.is-started) .modes__msg,
.modes.is-play:not(.is-started) .modes__composer,
.modes.is-play:not(.is-started) .modes__cursor {
  opacity: 0;
}
.modes.is-play:not(.is-compare) .modes__more {
  opacity: 0;
  visibility: hidden;
}

/* ---------- §11 Privacy: the teaser (round 3, the owner's pick TA, 065/016) ----------
   Centred: the eyebrow, the two-tone H2 and one link to security.html (.link-arrow,
   layout.css). The four cards moved to security.html (pages.css). */
.privacy__title {
  max-width: 20.5em;
  margin-block-end: clamp(1.75rem, 1rem + 2vw, 3.25rem);
}

/* ---------- §12 Pricing ----------
   The owner's round-2 pick (2026-10-15): the heading, the switch and the VAT note centred over
   four separate .frost--dense cards, Pro outlined in gold. No plan says "Soon". */
.pricing__title {
  margin-inline: auto;
  text-align: center;
}
/* The billing toggle: a segmented pill, the checked option filled Ivory. pricing.js unhides it;
   without JS the page shows the yearly prices with their "billed yearly" lines. */
.pricing__toggle {
  display: flex;
  width: fit-content;
  gap: 2px;
  margin-inline: auto;
  margin-block-end: 2rem;
  padding: 4px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--surface-1);
}
.pricing__option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 40px;
  padding-inline: 1.125rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ash);
  font: 500 0.875rem / 1.2 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.25s var(--ease-out),
    color 0.25s var(--ease-out);
}
.pricing__option:not([aria-checked='true']):hover {
  color: var(--ivory);
}
.pricing__option[aria-checked='true'] {
  background: var(--ivory);
  color: var(--night);
}
.pricing__save {
  padding: 2px 8px;
  font-size: 0.625rem;
}

/* The grid: four cards, one column on narrow, two by two on medium, four across on wide. */
.pricing__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.pricing__plan {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  border-radius: var(--radius-lg);
}
.pricing__plan--pro {
  border-color: color-mix(in srgb, var(--gold) 85%, transparent);
}
.pricing__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
}
.pricing__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.pricing__amount {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.45rem;
  margin-block-start: 1.25rem;
}
.pricing__num {
  font: 600 2.5rem / 1 var(--font-sora), var(--font-plex), var(--font-system);
  letter-spacing: -0.02em;
}
.pricing__cur {
  font: 600 1rem / 1 var(--font-sora), var(--font-plex), var(--font-system);
}
.pricing__unit {
  margin-block-start: 0.5rem;
  color: var(--ash);
  font-size: 0.875rem;
}
.pricing__list {
  display: grid;
  gap: 0.6rem;
  margin-block-start: 1.5rem;
  padding: 0;
  color: color-mix(in srgb, var(--ivory) 82%, transparent);
  font-size: 0.875rem;
  line-height: 1.5;
}
.pricing__list li {
  position: relative;
  padding-inline-start: 1rem;
}
.pricing__list li::before {
  content: '';
  position: absolute;
  inset-block-start: 0.7em;
  inset-inline-start: 0;
  width: 5px;
  height: 1px;
  background: var(--border-strong);
}
.pricing__plan--free .pricing__list {
  margin-block-end: 1.75rem;
}
.pricing__cta {
  align-self: flex-start;
  margin-block-start: auto;
}
.pricing__note {
  margin-block-start: 1.25rem;
  text-align: center;
}
/* The swap: a 0.2s fade on the amounts and their unit lines (base.css strips it under reduced
   motion). */
.pricing__grid.is-fading [data-billing-fade] {
  animation: pricing-fade 0.2s var(--ease-out);
}
@keyframes pricing-fade {
  from {
    opacity: 0;
  }
}

/* ---------- Narrow: 44px targets ---------- */
@media (max-width: 720px) {
  .modes__compare,
  .pricing__option {
    min-height: var(--tap);
  }
}
/* Too narrow for one row with the badge (and Russian and Arabic run longer): two equal halves,
   the badge free to wrap under "Yearly". */
@media (max-width: 480px) {
  .pricing__toggle {
    display: grid;
    width: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 18px;
  }
  .pricing__option {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 0.5rem;
    padding: 6px 0.625rem;
    border-radius: 14px;
    white-space: normal;
    text-align: center;
  }
}

/* ---------- Medium and up ---------- */
@media (min-width: 721px) {
  .pricing__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Wide ---------- */
@media (min-width: 1024px) and (orientation: landscape) {
  .life__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      'card title'
      'card body';
    gap: 2rem clamp(2.5rem, 5vw, 5rem);
  }
  .life__card {
    align-self: stretch;
    min-height: 30rem;
  }

  .modes__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .modes__card {
    padding: 28px;
  }
  /* The scene, wide: the card slot sits at the menu's inline start, 24px from it and level with
     its top, as wide as a column of the static grid; a card slides in from the menu's side. */
  .modes {
    --modes-card-from: calc(16px * var(--dir)), 0;
  }
  .modes.is-play .modes__scene {
    grid-template-columns:
      [full-start] calc((100% - var(--modes-column)) / 2)
      [composer-start] minmax(0, 1fr)
      [card-start] calc((100% - 2rem) / 3)
      [card-end] var(--modes-gap-card)
      [menu-start] var(--modes-menu)
      [menu-end composer-end] calc((100% - var(--modes-column)) / 2)
      [full-end];
  }
  .modes.is-play .modes__grid {
    grid-row: 2;
    margin-block-start: var(--modes-gap-menu);
  }

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