/* Cardiau Cymraeg landing page.

   Adapted from the stylesheet of audient.async-digital.com, so the two product
   pages share one layout and feel: the sticky nav, the centred hero over an
   aurora wash, the feature cards, the cream panel, the two-column card and the
   footer. Two things differ on purpose.

   - The palette is the plain Async Digital one from brand.css. The Audient
     page overrides --text and --muted to a cool macOS register; this page
     does not, because the app's own colours (Paper, Cream, Linen, Ink, Stone,
     Slate and the rust accent) are the brand palette already.
   - The hero picture is two iPhones showing the app's review screen, drawn in
     HTML from the app's own layout values. The phone is drawn at the app's
     point sizes and scaled as a whole with `zoom`, so one set of numbers
     describes it at every width. */

/* Spectral is the app's headword face, and it is used only inside the phone
   drawings, where it pictures the app's own type. Quoted Welsh words in the
   page copy use the system serif instead (.w below). Served from this host,
   never from a font CDN, because a third-party load would hand every
   visitor's IP to it. Subset to Latin, Latin-1 and Latin Extended-A, which
   covers w and y with a circumflex. Licence: assets/fonts/OFL.txt. */
@font-face {
  font-family: "Spectral";
  src: url("fonts/spectral-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("fonts/spectral-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --hairline: rgba(0, 0, 0, 0.06);
  --wrap-wide: 1120px;

  /* The app's own colours, for the phone mockup only. Light values here; the
     dark halves are in the @supports block below. Each is the app colour of
     the same name. */
  --app-paper:  #FDFBF7;
  --app-cream:  #F8F5EE;
  --app-linen:  #E8E4DC;
  --app-ink:    #1F1C18;
  --app-stone:  #6B6560;
  --app-action: #8B3A2A;  /* AccentColor */
  --app-select: #2A3A4A;  /* Slate: the selected language segment */
  --app-head:   #2A3A4A;  /* the headword and progress fill: Slate, Frost in dark */
  --app-bezel:  #1F1C18;

  /* Aurora, as on the Audient page, with one change: in light the pool under
     the blobs is transparent, not dark. Audient's window covers its pool;
     two separate phones would show it as a grey-black cloud between them on
     the cream page. So in light the blobs alone tint the page, at lower
     strength and blended normally; in dark they glow over a pool that
     matches the dark page ground. One stop per blob, never a ramp. */
  --aurora-base:      transparent;
  --aurora-base-edge: transparent;
  --aurora-intensity: 0.5;
  --aurora-speed:     1;
  --aurora-blur:      40px;

  /* How large the phones draw. 1 is the app's own point size. */
  --phone-zoom: 0.78;
}

/* Light or dark by the reader's system setting, as the Audient page does it:
   brand.css writes every colour token as a light-dark() pair, and this opt-in
   lets the pairs follow the system. Behind the same @supports test brand.css
   uses, so a browser that cannot resolve the pairs is never told to render
   dark. Screen only: print stays light. */
@supports (color: light-dark(#000, #fff)) {
  @media screen {
    :root { color-scheme: light dark; }
  }
  :root {
    --hairline: light-dark(rgba(0, 0, 0, 0.06), #2F2B26);

    --app-paper:  light-dark(#FDFBF7, #171512);
    --app-cream:  light-dark(#F8F5EE, #221F1B);
    --app-linen:  light-dark(#E8E4DC, #38322C);
    --app-ink:    light-dark(#1F1C18, #F2EDE5);
    --app-stone:  light-dark(#6B6560, #ADA49A);
    --app-action: light-dark(#8B3A2A, #A84A36);
    --app-select: light-dark(#2A3A4A, #3D5266);
    --app-head:   light-dark(#2A3A4A, #CFD9E3);
    --app-bezel:  light-dark(#1F1C18, #2C2823);

    --aurora-stop-1:    light-dark(#E89B7E, #F4A98B);
    --aurora-stop-2:    light-dark(#A77398, #B881A6);
    --aurora-stop-3:    light-dark(#5E97A8, #6DAABC);
    --aurora-base:      light-dark(transparent, #1B1916);
    --aurora-base-edge: light-dark(transparent, #1B1916);
  }
  /* The glow belongs to dark: stronger blobs, added light over the dark pool.
     Keyed to the same system setting the color-scheme opt-in follows. */
  @media screen and (prefers-color-scheme: dark) {
    :root { --aurora-intensity: 0.9; }
  }
}
@media print {
  :root, :root[data-theme="dark"] { color-scheme: light; }
}

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

html, body {
  background: var(--bg);
  color: var(--text);
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

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

/* ---------- Layout primitives ---------- */
.wrap-wide {
  width: 100%;
  max-width: var(--wrap-wide);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Top nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 56px;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  min-width: 0;
}
/* The app icon, rounded the way iOS masks it (about 22.4% of the side). */
.app-icon {
  display: block;
  border-radius: 22.4%;
  /* The dark icon's ground is near the dark page ground; a hairline keeps
     its edge visible. Transparent in light. */
  box-shadow: 0 0 0 1px transparent;
  box-shadow: 0 0 0 1px light-dark(transparent, rgba(239, 233, 224, 0.16));
}
.nav-mark { width: 24px; height: 24px; flex: 0 0 24px; }
.nav-brand-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease-out);
}
.nav-links a:hover { color: var(--text); }

.lang-switch { font-size: 13px; }
.nav-links .lang-switch a {
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1px;
}
.nav-links .lang-switch a:hover { border-bottom-color: var(--text); color: var(--text); }

@media (max-width: 900px) {
  .nav-links { gap: 16px; }
  .nav-links li.nav-hide-sm { display: none; }
}
@media (max-width: 560px) {
  .nav-links { gap: 12px; }
  .nav-links li.nav-hide-xs { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  padding: 72px 0 0;
  text-align: center;
}
.hero-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 22px;
}
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--muted);
  background: var(--bg);
}
.hero-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  display: inline-block;
}
.hero-pill strong {
  color: var(--text);
  font-weight: 600;
}
.hero-pill-cy {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  background: color-mix(in srgb, var(--primary) 6%, var(--bg));
}

.hero h1 {
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 auto;
  max-width: 17ch;
  color: var(--text);
  text-wrap: balance;
}

.hero-sub {
  margin: 22px auto 0;
  font-size: 19px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 56ch;
  text-wrap: pretty;
}

.hero-actions {
  margin-top: 30px;
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* Until launch the page carries no App Store badge, link or price. The hero
   and the availability card say so with the same outline status pill. It is
   deliberately not button-shaped: nothing here can be clicked. At launch
   Apple's badge, served from assets/, takes the hero slot. */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
  background: color-mix(in srgb, var(--primary) 6%, var(--bg));
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.status-pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: border-color var(--dur-1) var(--ease-out),
              background var(--dur-1) var(--ease-out);
}
.btn-ghost:hover {
  border-color: rgba(0, 0, 0, 0.2);
  border-color: light-dark(rgba(0, 0, 0, 0.2), rgba(239, 233, 224, 0.3));
  background: var(--card);
}
.btn-ghost .arrow { transition: transform var(--dur-1) var(--ease-out); }
.btn-ghost:hover .arrow { transform: translateX(2px); }

.hero-meta {
  margin: 20px 0 0;
  padding: 0;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-meta li { list-style: none; }
.hero-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hero-meta-item::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #c9c4bc;
  background: light-dark(#c9c4bc, #5A534C);
}
.hero-meta-item:first-child::before { display: none; }

/* ---------- Hero picture: two phones over the aurora ---------- */
.phones-wrap {
  margin: 56px auto 0;
  padding: 0 12px;
  max-width: 1180px;
}
/* The stage holds the wash and the phones only, so the caption below sits on
   the plain page ground rather than on the aurora. */
.phones-stage {
  position: relative;
}
.phones {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--phone-gap, 40px);
  margin: 0;
}

/* Aurora wash behind the phones: the Audient page's .shot-wash, unchanged in
   construction. Three blurred blobs over a pool (transparent in light),
   masked so the page ground reads through at the edges. */
.shot-wash {
  position: absolute;
  inset: -60px -14% -40px -14%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image:
    radial-gradient(46% 44% at 50% 56%,
      black 0%, black 30%,
      rgba(0, 0, 0, 0.85) 55%,
      rgba(0, 0, 0, 0.4) 80%,
      transparent 100%);
          mask-image:
    radial-gradient(46% 44% at 50% 56%,
      black 0%, black 30%,
      rgba(0, 0, 0, 0.85) 55%,
      rgba(0, 0, 0, 0.4) 80%,
      transparent 100%);
  background:
    radial-gradient(130% 100% at 50% 55%,
      var(--aurora-base) 0%,
      var(--aurora-base) 50%,
      var(--aurora-base-edge) 100%);
}
.shot-wash__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(var(--aurora-blur));
  will-change: transform, opacity;
  mix-blend-mode: normal;
  opacity: var(--aurora-intensity);
}
/* In dark the blobs add light over the dark pool, as on the Audient page.
   Behind the same tests as the dark palette, so a page that stays light
   never gets the additive blend over its transparent pool. */
@supports (color: light-dark(#000, #fff)) {
  @media screen and (prefers-color-scheme: dark) {
    .shot-wash__blob { mix-blend-mode: plus-lighter; }
  }
}
@supports (color: light-dark(#000, #fff)) and (not (mix-blend-mode: plus-lighter)) {
  @media screen and (prefers-color-scheme: dark) {
    .shot-wash__blob { mix-blend-mode: screen; }
  }
}
.shot-wash__blob--1 {
  width: 60%;
  aspect-ratio: 1.3 / 1;
  top: -6%; left: -4%;
  background: radial-gradient(closest-side,
    var(--aurora-stop-1) 0%,
    var(--aurora-stop-1) 12%,
    color-mix(in oklab, var(--aurora-stop-1) 75%, transparent) 30%,
    color-mix(in oklab, var(--aurora-stop-1) 35%, transparent) 55%,
    transparent 82%);
  animation: aurora-drift-1 calc(53s / var(--aurora-speed)) ease-in-out infinite;
}
.shot-wash__blob--2 {
  width: 56%;
  aspect-ratio: 1.1 / 1;
  top: 10%; right: -6%;
  background: radial-gradient(closest-side,
    var(--aurora-stop-2) 0%,
    var(--aurora-stop-2) 14%,
    color-mix(in oklab, var(--aurora-stop-2) 72%, transparent) 32%,
    color-mix(in oklab, var(--aurora-stop-2) 32%, transparent) 58%,
    transparent 84%);
  animation: aurora-drift-2 calc(43s / var(--aurora-speed)) ease-in-out infinite;
}
.shot-wash__blob--3 {
  width: 68%;
  aspect-ratio: 1.4 / 1;
  bottom: -12%; left: 14%;
  background: radial-gradient(closest-side,
    var(--aurora-stop-3) 0%,
    var(--aurora-stop-3) 14%,
    color-mix(in oklab, var(--aurora-stop-3) 72%, transparent) 32%,
    color-mix(in oklab, var(--aurora-stop-3) 28%, transparent) 58%,
    transparent 84%);
  animation: aurora-drift-3 calc(37s / var(--aurora-speed)) ease-in-out infinite;
}
@keyframes aurora-drift-1 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  25%  { transform: translate3d(4%, 3%, 0) scale(1.06); }
  50%  { transform: translate3d(7%, -2%, 0) scale(1.02); }
  75%  { transform: translate3d(2%, -4%, 0) scale(1.08); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes aurora-drift-2 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  20%  { transform: translate3d(-3%, 4%, 0) scale(1.05); }
  55%  { transform: translate3d(-6%, 2%, 0) scale(0.96); }
  80%  { transform: translate3d(-2%, -3%, 0) scale(1.08); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes aurora-drift-3 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  30%  { transform: translate3d(5%, -3%, 0) scale(1.05); }
  60%  { transform: translate3d(-2%, -5%, 0) scale(1.08); }
  85%  { transform: translate3d(3%, 2%, 0) scale(0.98); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* ---------- The phone ----------
   Drawn at the app's point sizes on a 402 x 874 screen (iPhone 17), then
   scaled as a whole by --phone-zoom. The first phone is the page's own
   language, set a little lower; the second shows the same card in the other
   language, as the App Store frame does. They sit side by side, never
   overlapped, so both words stay in view. */
.phone {
  zoom: var(--phone-zoom);
  flex: 0 0 auto;
  width: 426px;
  padding: 12px;
  border-radius: 67px;
  background: var(--app-bezel);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 40px 70px -24px rgba(0, 0, 0, 0.45),
    0 16px 32px -12px rgba(0, 0, 0, 0.3);
  text-align: left;
  position: relative;
}
.phone--front { margin-top: 84px; }

.ph-screen {
  position: relative;
  width: 402px;
  height: 874px;
  border-radius: 55px;
  overflow: hidden;
  background: var(--app-paper);
  color: var(--app-ink);
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.ph-status {
  height: 54px;
  flex: 0 0 54px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 6px 30px 0 44px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ph-island {
  width: 124px;
  height: 36px;
  border-radius: 999px;
  background: #000;
}
.ph-sys {
  justify-self: end;
  display: flex;
  gap: 6px;
  align-items: center;
}
.ph-sys svg { display: block; }

/* ReviewScreen: 16 pt side padding, 4 pt bottom padding. */
.ph-app {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 16px 4px;
}

/* ProgressHeader: 4 pt inset, 15 pt text, 10 pt gap, 3 pt track. */
.ph-progress {
  padding: 4px 4px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  color: var(--app-stone);
}
.ph-track {
  height: 3px;
  border-radius: 999px;
  background: var(--app-linen);
}

/* CardView: 24 pt padding, 16 pt corners, 1 pt hairline. */
.ph-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  border-radius: 16px;
  background: var(--app-cream);
  border: 1px solid var(--app-linen);
}
/* The word sits just below centre: the free space splits 1.4 : 1. */
.ph-word-area {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.ph-word-area::before { content: ""; flex: 1.4 1 0; }
.ph-word-area::after  { content: ""; flex: 1 1 0; }

.ph-headword {
  font-family: "Spectral", Georgia, serif;
  font-size: 64px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--app-head);
}
.ph-class-row {
  padding-top: 10px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 62px;
}
.ph-class {
  flex: 1;
  font-family: "Spectral", Georgia, serif;
  font-style: italic;
  font-size: 19px;
  color: var(--app-stone);
}
.ph-play {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--app-action);
  color: #fff;
  display: grid;
  place-items: center;
}
.ph-rule {
  height: 1px;
  background: var(--app-linen);
  margin: 20px 0 16px;
}
.ph-meaning {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 1.2;
}
/* AnswerPrompt: 17 pt semibold, then the first-day hint at 14 pt. */
.ph-prompt {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ph-prompt b {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}
.ph-prompt span {
  font-size: 14px;
  line-height: 1.35;
  color: var(--app-stone);
}

/* GradeTiles: three equal tiles, 8 pt apart, 64 pt high, 10 pt corners. */
.ph-tiles {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ph-tile {
  min-height: 64px;
  border-radius: 10px;
  background: var(--app-cream);
  border: 1px solid var(--app-linen);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 4px;
  text-align: center;
}
.ph-tile b { font-size: 17px; font-weight: 600; }
.ph-tile span { font-size: 14px; color: var(--app-stone); }

/* BottomBar: the language switch, then Search and About. */
.ph-bar {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.ph-seg {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 10px;
  background: var(--app-cream);
  border: 1px solid var(--app-linen);
}
.ph-seg span {
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 15px;
}
.ph-seg .is-on {
  background: var(--app-select);
  color: #fff;
  font-weight: 600;
}
.ph-icons {
  margin-left: auto;
  display: flex;
  gap: 4px;
}
.ph-icons span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--app-ink);
}
.ph-home {
  flex: 0 0 34px;
  display: grid;
  place-items: center;
}
.ph-home::before {
  content: "";
  width: 140px;
  height: 5px;
  border-radius: 999px;
  background: var(--app-ink);
  opacity: 0.85;
}

.phones-caption {
  position: relative;
  z-index: 1;
  margin: 28px auto 0;
  max-width: 60ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}

/* ---------- Sections ---------- */
.section {
  padding: 110px 0 0;
}
.section-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 14px;
}
.section h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 14px;
  max-width: 24ch;
  text-wrap: balance;
}
.section-sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  max-width: 62ch;
  text-wrap: pretty;
}

/* A Welsh word the page copy quotes, set apart in the system serif. Not
   Spectral, which stays inside the phone drawings as the app's own face, and
   not var(--font-serif), whose first family is Spectral and would load it. */
.w {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 1.06em;
  color: var(--text);
}

.feature-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.feature {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.feature-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--primary);
}
.feature h3 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}
.feature p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}
.feature-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed rgba(0, 0, 0, 0.07);
  border-top-color: light-dark(rgba(0, 0, 0, 0.07), rgba(239, 233, 224, 0.12));
  font-size: 12px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.feature-foot strong { color: var(--text); font-weight: 600; }

.feature-note {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 72ch;
}

@media (max-width: 1080px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .feature-grid { grid-template-columns: 1fr; }
  .feature { padding: 24px 22px 22px; }
}

/* ---------- Cream panel: fully in Welsh ---------- */
.panel {
  background: var(--card);
  margin-top: 110px;
  padding: 96px 0 104px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.panel .section { padding-top: 0; }
.panel .wrap-wide { padding: 0 32px; }
@media (min-width: 900px) {
  .panel .wrap-wide { padding: 0 48px; }
}
@media (max-width: 480px) {
  .panel .wrap-wide { padding: 0 20px; }
}

.panel-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: start;
}
.details {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 28px;
}
.detail {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 4px 16px;
}
.detail-num {
  grid-row: span 2;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--primary);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.detail h3 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 6px 0 0;
}
.detail p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

/* Interface strings, English beside the app's own Welsh. */
.strings {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin: 0;
}
.strings figcaption {
  padding: 16px 20px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.strings table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.45;
}
.strings th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding: 0 20px 8px;
}
.strings td {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  vertical-align: top;
  width: 50%;
}
.strings td:lang(cy) { color: var(--text); font-weight: 600; }
.strings td:not(:lang(cy)) { color: var(--muted); }

/* How the Welsh is written and checked: a plain line under the strings. */
.welsh-note {
  margin: 32px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 78ch;
}

/* The one line for organisations: a plain hairline panel, no accent rule. */
.org-note {
  margin-top: 40px;
  padding: 20px 24px;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  max-width: 78ch;
}
.org-note a {
  color: var(--text);
  text-underline-offset: 3px;
  text-decoration-color: var(--border);
}
.org-note a:hover { text-decoration-color: var(--text); }

@media (max-width: 900px) {
  .panel-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 480px) {
  .strings td, .strings th { padding-left: 14px; padding-right: 14px; }
  .strings figcaption { padding-left: 14px; padding-right: 14px; }
}

/* ---------- Where the words come from ---------- */
.credits {
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.credit {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.credit-what {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
}
.credit h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
}
.credit p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}
.credit a {
  font-size: 14px;
  color: var(--text);
  text-underline-offset: 3px;
  text-decoration-color: var(--border);
  overflow-wrap: anywhere;
}
.credit a:hover { text-decoration-color: var(--text); }
.credit .licence {
  margin-top: auto;
  padding-top: 10px;
  font-size: 12px;
  color: var(--muted);
}
@media (max-width: 900px) {
  .credits { grid-template-columns: 1fr; }
}

/* ---------- Availability card (the Audient page's pricing card) ---------- */
.availability {
  padding: 110px 0;
}
.avail-card {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg);
}
.avail-left {
  padding: 36px 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-right: 1px solid var(--hairline);
  background: var(--card);
}
.avail-app {
  display: flex;
  align-items: center;
  gap: 16px;
}
.avail-app .app-icon { width: 72px; height: 72px; flex: 0 0 72px; }
.avail-tier {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}
.avail-left p.avail-name {
  color: var(--text);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 2px 0 0;
}
/* The status pill (defined with the hero) inside the card: it sits at the
   start of the column, and keeps its own colour over the paragraph rule. */
.avail-left p.status-pill {
  align-self: flex-start;
  margin: 0;
  color: var(--text);
}
.avail-left p,
.avail-right p {
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  color: var(--muted);
}
.avail-left p.avail-req { color: var(--text); }
.avail-right {
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}
.avail-right h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.avail-right a {
  color: var(--text);
  text-underline-offset: 3px;
  text-decoration-color: var(--border);
}
.avail-right a:hover { text-decoration-color: var(--text); }
@media (max-width: 800px) {
  .avail-card { grid-template-columns: 1fr; }
  .avail-left { border-right: 0; border-bottom: 1px solid var(--hairline); }
}
@media (max-width: 480px) {
  .avail-left, .avail-right { padding: 28px 22px; }
}

/* ---------- Footer ---------- */
.footer {
  background: var(--bg);
  border-top: 1px solid var(--hairline);
  padding: 56px 0 36px;
}
.footer-bar {
  height: 4px;
  background: var(--primary);
  width: 100%;
  margin-bottom: 56px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}
.footer-brand-block { display: flex; flex-direction: column; gap: 14px; }
/* 32px: the brand's minimum size for the six-bar symbol. */
.footer-mark { width: 32px; height: 32px; }
.footer-blurb {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
  max-width: 36ch;
  margin: 0;
}
.footer-col h2 {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-col a {
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color var(--dur-1) var(--ease-out);
}
.footer-col a:hover {
  border-bottom-color: rgba(0, 0, 0, 0.18);
  border-bottom-color: light-dark(rgba(0, 0, 0, 0.18), rgba(239, 233, 224, 0.45));
}
.footer-meta {
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}
.footer-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.footer-meta-row + .footer-meta-row { margin-top: 8px; }
.footer-sep { color: rgba(0,0,0,0.2); color: light-dark(rgba(0,0,0,0.2), rgba(239,233,224,0.3)); }

@media (max-width: 800px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 24px;
  }
  .footer-brand-block { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer { padding: 44px 0 32px; }
  .footer-bar { margin-bottom: 40px; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; }
  .footer-meta-row { gap: 4px 10px; }
}

/* ---------- Narrow screens ---------- */
/* Two phones side by side need 852 x zoom, plus the gap and 24 px of padding.
   Each step below is the largest zoom that still fits the narrowest width it
   covers: 0.6 at 560 px, 0.42 at 390 px, 0.37 at 350 px, 0.33 at 320 px. */
@media (max-width: 900px) {
  :root { --phone-zoom: 0.6; --phone-gap: 24px; }
  .section { padding-top: 88px; }
  .panel { margin-top: 88px; padding: 72px 0 80px; }
  .availability { padding: 88px 0; }
}
@media (max-width: 640px) {
  .hero { padding-top: 48px; }
  .hero-sub { font-size: 17px; }
  .phones-wrap { margin-top: 40px; }
  .hero-meta { flex-direction: column; align-items: center; gap: 8px; }
  .hero-meta-item::before { display: none; }
}
@media (max-width: 559px) {
  :root { --phone-zoom: 0.42; --phone-gap: 8px; }
}
@media (max-width: 389px) {
  :root { --phone-zoom: 0.37; }
}
@media (max-width: 349px) {
  :root { --phone-zoom: 0.33; }
}

@media (prefers-reduced-motion: reduce) {
  .shot-wash__blob { animation: none; }
  * { transition: none !important; }
}

/* ---------- Brand mark in dark ----------
   The footer mark is logo-symbol.svg, which has no dark twin. As on the
   Audient page, the screen rendering draws the same file as a mask over
   var(--primary): brick in light, #E0907B in dark. Print keeps the image. */
@supports (color: light-dark(#000, #fff)) and ((mask-image: none) or (-webkit-mask-image: none)) {
  @media screen {
    .footer-mark {
      object-position: -99999px 0;
      background: var(--primary);
      -webkit-mask: url("logo-symbol.svg") center / 100% 100% no-repeat;
              mask: url("logo-symbol.svg") center / 100% 100% no-repeat;
    }
  }
}