/* Tuned website. Tokens mirror DESIGN.md: dark-first with a full light theme,
   one containment level (soft tiles straight on the canvas, separated by space
   and tint, never borders), Figtree throughout, radii 14 for controls and 20
   for tiles. The layout follows the Companion landing page, in Tuned's theme. */
:root {
  --canvas: #0C1526;
  --band: #0F1A2F;
  --surface: #16223B;
  --raised: #213052;
  --sunken: #0A1220;
  --ink: #F2F4F8;
  --ink2: #B9C1D1;
  --muted: #8590A6;
  --faint: #515C74;
  --accent: #E4572E;
  --on-accent: #14213D;
  --accent-soft: rgba(228, 87, 46, 0.16);
  --live: #2FB5A5;
  --live-soft: rgba(47, 181, 165, 0.16);
  --header: rgba(12, 21, 38, 0.72);
  --shadow: none;
  --r-control: 14px;
  --r-tile: 20px;
  --gutter: 20px;
  color-scheme: dark light;
}
@media (prefers-color-scheme: light) {
  :root {
    --canvas: #F2F4F8;
    --band: #E9EDF4;
    --surface: #FFFFFF;
    --raised: #F7F8FB;
    --sunken: #E9EDF4;
    --ink: #14213D;
    --ink2: #4A5468;
    --muted: #7A8496;
    --faint: #B4BCCB;
    --on-accent: #FFFFFF;
    --accent-soft: rgba(228, 87, 46, 0.12);
    --live: #15877B;
    --live-soft: rgba(21, 135, 123, 0.12);
    --header: rgba(242, 244, 248, 0.8);
    --shadow: 0 1px 2px rgba(20, 33, 61, 0.06), 0 8px 24px rgba(20, 33, 61, 0.06);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 16px/1.6 Figtree, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
img { max-width: 100%; height: auto; display: block; }
svg { display: block; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 760px) { :root { --gutter: 32px; } }

/* Header ----------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 68px; }
.brand {
  flex: none; display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none;
  font-weight: 800; font-size: 20px; letter-spacing: -0.02em;
}
.brand img { width: 34px; height: 34px; border-radius: 9px; }
/* The header keeps the logo whole and shows as many links as fit beside it,
   in any language. The links are laid out from the end of the row in order of
   need (Download, then TVs, then Features), so the ones that do not fit wrap
   onto a second line, which the one-line-tall nav clips; site.js takes those
   out of the tab order too. The padding keeps focus rings inside the clip;
   the negative margin gives that room back but for 4px, so the first link's
   text stays at least 12px from the logo. */
.site-nav {
  flex: 1 1 auto; min-width: 0; height: 60px;
  display: flex; flex-flow: row-reverse wrap; align-items: center; gap: 0 6px;
  padding-inline: 6px; margin-inline: -2px -6px;
  overflow: hidden; overflow: clip;
  pointer-events: none;
}
.site-nav > a { margin-block: 6px; pointer-events: auto; }
.site-nav > .btn { order: 0; }
.site-nav > .nav-extra { order: 1; }
.site-nav > .nav-link:not(.nav-extra) { order: 2; }
.nav-link {
  color: var(--ink2); text-decoration: none; font-weight: 600; font-size: 15px;
  min-height: 48px; display: inline-flex; align-items: center; padding: 0 12px;
}
.nav-link:hover { color: var(--ink); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 20px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font-weight: 700; font-size: 15px; text-decoration: none;
}
.btn:hover { text-decoration: none; filter: brightness(1.06); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 14px; }
@media (max-width: 420px) { .nav-link { padding: 0 8px; } }

/* Type ------------------------------------------------------------------- */
h1, h2, h3 { color: var(--ink); margin: 0; }
h1 { font-size: clamp(40px, 7.4vw, 66px); line-height: 1.02; font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: clamp(30px, 4.6vw, 46px); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; }
h3 { font-size: 19px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 14px; color: var(--ink2); }
.accent { color: var(--accent); }
.lead { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.6; max-width: 34em; margin-top: 20px; }
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
.fineprint { font-size: 14px; color: var(--muted); margin: 16px 0 0; }
.badge {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px;
  background: var(--surface); color: var(--ink2); box-shadow: var(--shadow);
  border-radius: 999px; padding: 8px 16px 8px 10px; font-size: 14px; font-weight: 600;
}
.badge-icon {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
}
.badge-icon svg { width: 15px; height: 15px; }

.section-head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.section-head p { font-size: 18px; margin: 14px 0 0; color: var(--muted); }

/* Phones ------------------------------------------------------------------ */
.phone {
  --w: 280px;
  position: relative; flex: none;
  width: var(--w);
  padding: calc(var(--w) * 0.028);
  border-radius: calc(var(--w) * 0.15);
  background: #04070D;
  box-shadow:
    0 0 0 calc(var(--w) * 0.006) rgba(255, 255, 255, 0.10),
    0 calc(var(--w) * 0.14) calc(var(--w) * 0.34) calc(var(--w) * -0.08) rgba(0, 0, 0, 0.55);
}
.phone img, .phone .screens { width: 100%; aspect-ratio: 720 / 1560; border-radius: calc(var(--w) * 0.123); }
.phone img { height: auto; object-fit: cover; }
/* The punch-hole camera of the phone these screens were taken on. */
.phone::after {
  content: ""; position: absolute; z-index: 2;
  top: calc(var(--w) * 0.05); left: 50%;
  width: calc(var(--w) * 0.036); height: calc(var(--w) * 0.036);
  border-radius: 50%; background: #000; transform: translateX(-50%);
}
.glow {
  position: absolute; inset: 8% 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(228, 87, 46, 0.34), transparent 72%),
    radial-gradient(closest-side at 72% 64%, rgba(47, 181, 165, 0.22), transparent 70%);
  filter: blur(44px);
}

/* Store buttons ------------------------------------------------------------ */
.store-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.store {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 58px; padding: 0; padding-inline: 16px 22px; border-radius: var(--r-control);
  text-decoration: none; text-align: start; box-shadow: var(--shadow);
}
.store svg { width: 28px; height: 28px; flex: none; }
.store small { display: block; font-size: 11px; font-weight: 600; line-height: 1.2; opacity: 0.85; }
.store strong { display: block; font-size: 18px; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
.store-primary { background: var(--accent); color: var(--on-accent); }
.store-secondary { background: var(--surface); color: var(--ink); }
a.store:hover { filter: brightness(1.06); }
.store[aria-disabled="true"] { cursor: default; }
.store-light .store-primary { background: #FFFFFF; color: #14213D; }
.store-light .store-secondary { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; box-shadow: none; }
/* On a phone both buttons fit on one line. */
@media (max-width: 420px) {
  .store-buttons { gap: 10px; }
  .store { gap: 8px; min-height: 52px; padding: 0 14px 0 12px; }
  .store svg { width: 24px; height: 24px; }
  .store small { font-size: 10.5px; }
  .store strong { font-size: 16px; }
}

/* Hero -------------------------------------------------------------------- */
/* A headline, the store buttons and the phones. Below the two-column width
   the copy is centred and kept short, so the phones are in the first screen
   rather than a scroll away. */
.hero { position: relative; padding: 24px 0 16px; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 90%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 50% at 12% 20%, rgba(228, 87, 46, 0.16), transparent 70%),
    radial-gradient(35% 45% at 88% 35%, rgba(47, 181, 165, 0.12), transparent 70%);
}
.hero-grid { display: grid; gap: 28px; align-items: center; }
.hero-copy { text-align: center; }
.hero-copy h1 { max-width: 11em; margin: 0 auto; font-size: clamp(34px, 8.4vw, 66px); }
.hero-lead { margin: 18px auto 0; color: var(--ink2); }
.hero .store-buttons { justify-content: center; margin-top: 24px; }
.hero-phones { position: relative; height: 520px; max-width: 380px; width: 100%; margin: 0 auto; }
.hero-phones .phone { position: absolute; z-index: 1; }
.hero-phones .phone-back { --w: 204px; left: 0; top: 48px; }
.hero-phones .phone-front { --w: 228px; right: 0; top: 0; z-index: 2; }
@media (min-width: 900px) {
  .hero { padding: 56px 0 72px; }
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 48px; }
  .hero-copy { text-align: start; }
  .hero-copy h1 { margin: 0; }
  .hero-lead { margin-inline-start: 0; }
  .hero .store-buttons { justify-content: flex-start; margin-top: 34px; }
  .hero-phones { height: 620px; max-width: none; }
  .hero-phones .phone-back { --w: 260px; left: 0; top: 70px; }
  .hero-phones .phone-front { --w: 290px; right: 0; top: 0; }
}

/* Steps -------------------------------------------------------------------- */
.band { background: var(--band); padding: 72px 0; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.step {
  position: relative; overflow: hidden;
  background: var(--surface); border-radius: var(--r-tile); padding: 26px 24px 24px; box-shadow: var(--shadow);
}
.step-num {
  position: absolute; top: -6px; inset-inline-end: 14px;
  font-size: 96px; font-weight: 800; line-height: 1; letter-spacing: -0.04em;
  color: var(--ink); opacity: 0.06; font-variant-numeric: tabular-nums;
}
.step-icon {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
  background: var(--accent-soft); color: var(--accent); margin-bottom: 18px;
}
.step-icon svg { width: 24px; height: 24px; }
.step h3 { margin-bottom: 8px; }
.step p { margin: 0; }

/* Features: a list that lights up beside a phone that follows it ------------ */
.features-section { padding: 88px 0 40px; }
.feature { padding: 28px 0 36px; }
.feature-label {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
}
.feature-icon {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent);
}
.feature-icon svg { width: 19px; height: 19px; }
.feature h3 { font-size: clamp(24px, 3vw, 32px); line-height: 1.15; font-weight: 800; letter-spacing: -0.025em; margin-bottom: 12px; }
.feature p { font-size: 17px; max-width: 32em; }
.feature-phone { --w: 230px; margin: 22px auto 0; }
.stage { display: none; }
@media (min-width: 960px) {
  .scrolly { display: grid; grid-template-columns: 1fr 380px; gap: 72px; }
  .feature { min-height: 52vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0; }
  .feature::after {
    content: ""; width: 44px; height: 3px; border-radius: 3px; background: var(--accent); margin-top: 18px;
    opacity: 0; transform: scaleX(0.4); transform-origin: left; transition: opacity 0.35s ease, transform 0.35s ease;
  }
  [dir="rtl"] .feature::after { transform-origin: right; }
  .feature-phone { display: none; }
  .js .feature { opacity: 0.3; transition: opacity 0.35s ease; }
  .js .feature.is-active { opacity: 1; }
  .js .feature.is-active::after { opacity: 1; transform: none; }
  .stage { display: block; position: relative; }
  .stage-sticky { position: sticky; top: calc(50vh - 320px); height: 640px; display: grid; place-items: center; }
  .stage-phone { --w: 300px; }
  .screens { position: relative; overflow: hidden; }
  .screens img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.45s ease; }
  .screens img.is-active { opacity: 1; }
}

/* Showcase: a darker band, whatever the theme ------------------------------ */
.showcase {
  position: relative; overflow: hidden; color: #F2F4F8;
  background: linear-gradient(160deg, #13203A 0%, #0A1220 70%);
  padding: 80px 0;
}
.showcase h2 { color: #F2F4F8; margin-bottom: 16px; }
.showcase p { color: #B9C1D1; }
.showcase .eyebrow { color: #F0784F; }
.badge-on-dark { background: rgba(255, 255, 255, 0.06); color: #B9C1D1; box-shadow: none; }
.showcase-grid { display: grid; gap: 44px; align-items: center; }
.country-pills { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.country-pills li {
  background: rgba(255, 255, 255, 0.06); color: #DCE1EA;
  border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 600;
}
.showcase-phone { position: relative; display: grid; place-items: center; min-height: 480px; }
.showcase-phone .phone { --w: 240px; z-index: 1; }
@media (min-width: 900px) {
  .showcase { padding: 110px 0; }
  .showcase-grid { grid-template-columns: 1.1fr 0.9fr; gap: 64px; }
  .showcase-phone { min-height: 640px; }
  .showcase-phone .phone { --w: 290px; }
}

/* Fan of phones ------------------------------------------------------------- */
.fan-section { padding: 96px 0 72px; overflow: hidden; }
.fan { position: relative; height: 430px; margin: 0 auto; max-width: 900px; }
.fan .phone { position: absolute; left: 50%; top: 20px; }
.fan-center { --w: 196px; transform: translateX(-50%); z-index: 3; }
.fan-side { --w: 164px; top: 58px; z-index: 1; }
.fan-left { transform: translateX(-114%) rotate(-7deg); }
.fan-right { transform: translateX(14%) rotate(7deg); }
@media (min-width: 760px) {
  .fan { height: 650px; }
  .fan-center { --w: 300px; }
  .fan-side { --w: 250px; top: 80px; }
  .fan-left { transform: translateX(-118%) rotate(-7deg); }
  .fan-right { transform: translateX(18%) rotate(7deg); }
}
.works-with { text-align: center; margin-top: 56px; }
.pills { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pills li { background: var(--surface); color: var(--ink2); border-radius: 999px; padding: 9px 16px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow); }
.works-with-more { margin: 20px 0 0; font-weight: 700; }

/* Questions ---------------------------------------------------------------- */
.faq-section { background: var(--band); padding: 72px 0 80px; }
.faq-section .faq { max-width: 760px; margin: 0 auto; }

/* Call to action ---------------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden; text-align: center; color: #FFFFFF;
  background: linear-gradient(135deg, #E4572E 0%, #C8401F 55%, #9E2F18 100%);
  padding: 88px 0;
}
.cta-shape { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.08); pointer-events: none; }
.cta-shape-a { width: 420px; height: 420px; left: -140px; top: -170px; }
.cta-shape-b { width: 360px; height: 360px; right: -120px; bottom: -180px; }
.cta-inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.cta-icon { width: 72px; height: 72px; border-radius: 18px; margin-bottom: 26px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25); }
.cta-band h2 { color: #FFFFFF; }
.cta-band p { color: rgba(255, 255, 255, 0.88); font-size: 18px; margin: 14px 0 0; }
.cta-band .store-buttons { justify-content: center; }
.cta-band .fineprint { color: rgba(255, 255, 255, 0.72); }

/* Footer ------------------------------------------------------------------ */
.site-footer { background: #0A1220; color: #B9C1D1; padding: 56px 0 28px; }
@media (prefers-color-scheme: light) { .site-footer { background: #14213D; } }
.footer-top { display: grid; gap: 36px; }
@media (min-width: 820px) { .footer-top { grid-template-columns: 1.4fr 2fr; } }
.site-footer .brand { color: #F2F4F8; }
.footer-tagline { margin: 14px 0 0; color: #8590A6; max-width: 22em; }
.footer-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
@media (min-width: 560px) { .footer-cols { grid-template-columns: repeat(3, 1fr); } }
.footer-h { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #8590A6; margin: 0 0 6px; }
.footer-cols a {
  display: flex; align-items: center; min-height: 40px;
  color: #DCE1EA; text-decoration: none; font-size: 15px; font-weight: 500;
}
.footer-cols a:hover { color: #FFFFFF; }
.langs { margin-top: 32px; }
.langs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: 20px; }
.langs a {
  display: flex; align-items: center; min-height: 40px;
  color: #B9C1D1; text-decoration: none; font-size: 14px; font-weight: 500;
}
.langs a:hover { color: #FFFFFF; }
.langs a[aria-current="page"] { color: #FFFFFF; font-weight: 700; }
.footer-bottom { margin-top: 32px; padding-top: 22px; }
.footer-bottom p { font-size: 13px; color: #8590A6; margin: 0 0 8px; max-width: 70em; }

/* Inner pages -------------------------------------------------------------- */
.page { padding-top: 16px; padding-bottom: 72px; }
.prose { max-width: 720px; }
.prose h1 { font-size: clamp(32px, 5vw, 44px); margin: 16px 0 12px; }
.prose h2 { font-size: 22px; line-height: 1.3; letter-spacing: -0.015em; margin: 44px 0 14px; scroll-margin-top: 90px; }
.prose h3 { font-size: 17px; margin: 26px 0 8px; }
.prose .updated { color: var(--muted); font-size: 14px; }
.prose ul, .prose ol { padding-inline-start: 22px; color: var(--ink2); margin: 0 0 14px; }
.prose li { margin: 6px 0; }
.prose strong { color: var(--ink); }
.prose a { overflow-wrap: anywhere; }
.prose .lead { margin-top: 8px; }
.tile { background: var(--surface); border-radius: var(--r-tile); padding: 20px; box-shadow: var(--shadow); }
.prose .tile { margin: 0 0 12px; }
.tile p:last-child, .tile ol:last-child { margin-bottom: 0; }
.chip {
  display: inline-block; background: var(--accent-soft); color: var(--accent);
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 999px; padding: 5px 10px; margin: 0 0 12px;
}
.contact { background: var(--surface); border-radius: var(--r-tile); padding: 16px 20px; box-shadow: var(--shadow); }
.contact-card .big { font-size: 20px; font-weight: 800; margin: 0 0 8px; }
.contact-card .big a { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.contact-card .big a:hover { color: var(--accent); }
.toc { background: var(--surface); border-radius: var(--r-tile); padding: 16px 20px; margin: 20px 0 8px; box-shadow: var(--shadow); }
.toc p { margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.toc ol { margin: 0; padding-inline-start: 20px; }
@media (min-width: 640px) { .toc ol { columns: 2; column-gap: 32px; } }
.toc li { margin: 0; padding: 2px 0; break-inside: avoid; }
.toc a { color: var(--ink2); text-decoration: none; }
.toc a:hover { color: var(--accent); }
.table-wrap { overflow-x: auto; margin: 0 0 14px; border-radius: var(--r-control); }
table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
th { text-align: start; background: var(--sunken); color: var(--ink); font-weight: 700; padding: 10px 12px; }
td { padding: 10px 12px; color: var(--ink2); vertical-align: top; }
tbody tr:nth-child(odd) td { background: var(--surface); }
.faq { display: grid; gap: 8px; }
.faq details { background: var(--surface); border-radius: var(--r-control); padding: 0 18px; box-shadow: var(--shadow); }
.faq summary {
  cursor: pointer; list-style: none; min-height: 52px; padding: 12px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-weight: 700; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); font-size: 22px; font-weight: 400; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding-bottom: 16px; margin: 0; }
.page .btn { border-radius: var(--r-control); }

/* Arrival ------------------------------------------------------------------ */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .feature, .screens img { transition: none; }
}

/* Scripts ------------------------------------------------------------------ */
/* Arabic joins its letters and Chinese, Japanese and Korean sit on a grid, so
   the tracking of the Latin display type would pull them apart or crowd them,
   and their headings need more room between lines than Latin ones. */
:is(h1, h2, h3, .eyebrow, .feature-label, .footer-h, .chip, .toc p):is(:lang(ar), :lang(ja), :lang(ko), :lang(zh)) { letter-spacing: normal; }
:is(h1, h2):lang(ar) { line-height: 1.35; }
/* Finnish, German, Dutch, Swedish and Norwegian build long compound words
   (Tekoälykaukosäädin). Headings hyphenate the long ones where the browser
   knows the language, any word still too long for the line breaks, and the
   hero and showcase columns may not grow past the screen to fit one. */
h1, h2, h3 { overflow-wrap: break-word; }
:is(h1, h2, h3):is(:lang(de), :lang(fi), :lang(nl), :lang(nb), :lang(sv)) { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5; }
.hero-grid > *, .showcase-grid > * { min-width: 0; }
:is(h1, h2):is(:lang(ja), :lang(ko), :lang(zh)) { line-height: 1.25; }
/* Korean breaks lines between words, never inside one, and Japanese headlines
   break between phrases where the browser can find them. */
:lang(ko) { word-break: keep-all; overflow-wrap: break-word; }
:is(h1, h2, h3):lang(ja) { word-break: auto-phrase; }