/* Tokens come from Cooldown's own theme (AppearanceColors.kt, Classic light and dark). */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --paper: #f8fbfe;
  --ink: #1b2833;
  --ink-2: #4b5b69;
  --ink-3: #8593a0;
  --line: rgb(27 40 51 / 0.12);
  --link: #026b99;
  --card: #ffffff;
  --device: #0c1318;
  --icon-edge: rgb(27 40 51 / 0.08);

  /* Battery levels: text colors, then the brighter fills Cooldown uses on dark surfaces. */
  --normal: #086a4c;
  --warm: #805300;
  --hot: #b91c1c;
  --fill-normal: #34d399;
  --fill-warm: #fbbf24;
  --fill-hot: #f87171;
  --fill-critical: #dc2626;

  --shadow-card: 0 1px 2px rgb(16 24 32 / 0.06), 0 12px 32px -8px rgb(16 24 32 / 0.18);
  --shadow-phone: 0 2px 4px rgb(16 24 32 / 0.08), 0 28px 56px -18px rgb(16 24 32 / 0.38), 0 70px 90px -50px rgb(16 24 32 / 0.3);

  /* The page runs edge to edge: no column cap, only a gutter that grows with the window. */
  --gutter: clamp(16px, 4.5vw, 128px);
  --section: clamp(56px, 7.5vw, 7rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #101820;
    --ink: #e5edf5;
    --ink-2: #b7c4d1;
    --ink-3: #7d8c99;
    --line: rgb(229 237 245 / 0.1);
    --link: #38bdf8;
    --card: #1b2632;
    --device: #04080b;
    --icon-edge: rgb(229 237 245 / 0.14);
    --normal: #34d399;
    --warm: #fbbf24;
    --hot: #ff8585;
    --fill-hot: #ff8585;
    --fill-critical: #f04747;
    --shadow-card: 0 0 0 1px rgb(229 237 245 / 0.06), 0 16px 36px -12px rgb(0 0 0 / 0.65);
    --shadow-phone: 0 0 0 1px rgb(229 237 245 / 0.09), 0 30px 60px -24px rgb(0 0 0 / 0.75);
  }
}

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

/* Past 1440px the root size grows to 1.25x at 2560px, so every rem-sized part of the page scales together. */
html {
  font-size: clamp(1rem, 0.357vw + 0.679rem, 1.25rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: manipulation;
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--link); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

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

h1, h2, h3 {
  margin: 0;
  font-weight: 600;
  font-stretch: 112%;
  text-wrap: balance;
}

/* Type keeps growing with the window, so wide screens fill with the page rather than with margins. */
h1 { font-size: clamp(2.375rem, 0.6rem + 6.2vw, 9.5rem); line-height: 0.98; letter-spacing: -0.032em; }
h2 { font-size: clamp(1.875rem, 0.9rem + 3vw, 5rem); line-height: 1.03; letter-spacing: -0.026em; }
h3 { font-size: 1.1875rem; line-height: 1.25; letter-spacing: -0.012em; font-stretch: 106%; }

/* Keeps a lone word off the last line of a paragraph where the browser supports it. */
p { margin: 0; text-wrap: pretty; }

.wrap { width: calc(100% - 2 * var(--gutter)); margin-inline: auto; }

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

/* Holds shared symbols. Chrome does not apply [hidden] to <svg>, which then takes its default 300x150 box. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Hidden by its own height, which grows with the root size on wide screens. */
.skip { position: absolute; left: 12px; top: 12px; transform: translateY(calc(-100% - 24px)); padding: 10px 14px; border-radius: 8px; background: var(--ink); color: var(--paper); z-index: 10; }
.skip:focus { transform: none; }

.fine { font-size: 0.875rem; line-height: 1.5; color: var(--ink-2); }

/* ---------- Top line: the five apps ---------- */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 12px;
}

.apps-nav { display: flex; flex-wrap: wrap; column-gap: clamp(14px, 2.4vw, 26px); font-size: 0.9375rem; }

.top a { color: var(--ink-2); text-decoration: none; padding-block: 10px; }
.top a[aria-current="page"] { color: var(--ink); font-weight: 600; }

@media (hover: hover) {
  .top a:hover { color: var(--ink); text-decoration: underline; }
}

@media (max-width: 359px) {
  .apps-nav { column-gap: 11px; font-size: 0.875rem; }
}

/* The language menu holds the right end; below 640px it shows only the globe. */
.top-end { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 26px); }
.lang-menu { position: relative; }

@media (max-width: 639px) {
  .lang-menu summary { min-width: 44px; min-height: 44px; justify-content: flex-end; }
  .lang-menu summary span { display: none; }
}

.lang-menu summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-block: 10px;
  font-size: 0.9375rem;
  color: var(--ink-2);
  list-style: none;
  cursor: pointer;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary svg { width: 1.0625rem; height: 1.0625rem; flex: none; }
.lang-menu[open] summary { color: var(--ink); }

.lang-menu ul {
  position: absolute;
  right: -12px;
  top: 100%;
  z-index: 20;
  min-width: 12rem;
  margin: 4px 0 0;
  padding: 6px;
  list-style: none;
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.top .lang-menu a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--ink); white-space: nowrap; }
.top .lang-menu a[aria-current] { font-weight: 600; color: var(--link); }

@media (hover: hover) {
  .lang-menu summary:hover { color: var(--ink); }
  .top .lang-menu a:hover { background: var(--paper); text-decoration: none; }
}

/* ---------- Hero ---------- */
.hero {
  display: grid;
  gap: 48px;
  padding-top: clamp(28px, 6vw, 72px);
}

.app-id { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(24px, 4vw, 36px); }
.app-id img { width: 3.5rem; height: 3.5rem; border-radius: 13px; }

/* App icons with dark backgrounds (Cooldown, Wattlab) otherwise lose their edge on the dark page. */
.app-id img, .app img { outline: 1px solid var(--icon-edge); outline-offset: -1px; }
.app-id b { display: block; font-size: 1.125rem; line-height: 1.2; font-weight: 600; font-stretch: 108%; }
.app-id small { display: block; font-size: 0.9375rem; color: var(--ink-2); }

.nowrap { white-space: nowrap; }

.lede {
  max-width: 33em;
  margin: clamp(18px, 2.4vw, 26px) 0 clamp(28px, 3.6vw, 40px);
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.5rem);
  color: var(--ink-2);
}

.play {
  display: inline-block;
  border-radius: 9px;
  transition: transform 0.14s var(--ease-out);
}
.play img { width: auto; height: 3.375rem; }

@media (hover: hover) {
  .play:hover { transform: translateY(-2px); }
}
.play:active { transform: scale(0.97); }

/* The download count matches Google Play's public figure; update it when Play moves to the next step. */
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.count b { display: block; font-size: 1.625rem; line-height: 1.05; font-weight: 600; font-stretch: 108%; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.count > span { display: block; margin-top: 2px; font-size: 0.875rem; color: var(--ink-2); }

/* Phones: "50K+ downloads" sits beside the badge on one line; "on Google Play" only repeats the badge. */
@media (max-width: 559px) {
  .cta-row { flex-wrap: nowrap; gap: 20px; }
  .count .on-play { display: none; }
}

.cta .fine { margin-top: 14px; }

/* Only the top of the phone shows: it stands on the dark band below, made of the same material.
   The clip sits on the figure so the phone can rise out of the band on load. */
.hero-device { margin: 0; justify-self: center; align-self: end; clip-path: inset(-200px -200px 0 -200px); }

.phone {
  --w: min(304px, 80vw);
  width: var(--w);
  height: calc(var(--w) * 1.42);
  overflow: hidden;
  padding: 9px 9px 0;
  border-radius: 46px 46px 0 0;
  background: var(--device);
  box-shadow: var(--shadow-phone);
}

/* Once, on load: the copy settles in line by line and the phone rises out of the band. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-copy > * { animation: settle 0.6s var(--ease-out) both; }
  .js .hero-copy > :nth-child(2) { animation-delay: 90ms; }
  .js .hero-copy > :nth-child(3) { animation-delay: 180ms; }
  .js .hero-copy > :nth-child(4) { animation-delay: 270ms; }
  .js .phone { animation: rise 1.1s 150ms var(--ease-out) both; }
}
@keyframes settle { from { opacity: 0; transform: translateY(14px); } }
@keyframes rise { from { transform: translateY(180px); } }
.phone img { width: 100%; border-radius: 37px 37px 0 0; }

@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(48px, 8vw, 128px); }
  .hero-copy { align-self: center; padding-bottom: clamp(32px, 4vw, 56px); }
  .hero-device { justify-self: end; margin-right: clamp(0px, 3vw, 40px); }
  .phone { --w: clamp(336px, 23vw, 560px); }
}

/* ---------- How hot is too hot: a full-width dark band ---------- */
/* Edge to edge on purpose: it breaks the run of light sections, and the hero phone stands on it as on the ground. */
/* The band keeps Cooldown's dark tokens in both color schemes, like the app's own screens. */
.heat {
  --ink: #e5edf5;
  --ink-2: #b7c4d1;
  --ink-3: #7d8c99;
  --line: rgb(229 237 245 / 0.1);
  --link: #38bdf8;
  --card: #1b2632;
  --paper: var(--device);
  --normal: #34d399;
  --warm: #fbbf24;
  --hot: #ff8585;
  --fill-hot: #ff8585;
  --fill-critical: #f04747;
  --shadow-card: 0 0 0 1px rgb(229 237 245 / 0.06), 0 16px 36px -12px rgb(0 0 0 / 0.65);
  background: var(--device);
  color: var(--ink);
}

.heat-in {
  display: grid;
  grid-template-areas: "copy" "scale" "notice";
  gap: 48px;
  padding-block: clamp(72px, 9vw, 7.5rem);
}

.heat-copy { grid-area: copy; }
.heat-copy p { max-width: 34em; margin-top: 18px; color: var(--ink-2); }

.scale { --level: var(--hot); grid-area: scale; margin: 0; }
.scale[data-level="normal"] { --level: var(--normal); }
.scale[data-level="warm"] { --level: var(--warm); }

/* The reading is the section's headline number; the needle below only marks where it falls. */
.readout { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 24px; }
.needle-val {
  font-size: clamp(4.5rem, 1.6rem + 12vw, 12rem);
  line-height: 0.9;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.needle-level { font-size: clamp(1.0625rem, 0.9rem + 0.6vw, 1.375rem); font-weight: 600; color: var(--level); }

.scale-track { position: relative; margin-top: clamp(28px, 4vw, 40px); padding-top: 20px; }

.needle {
  --t: 0.615;
  position: absolute;
  inset: 0 auto 0 calc(var(--t) * 100%);
  width: 0;
  color: var(--level);
}

.needle-line {
  position: absolute;
  top: 0;
  bottom: 26px;
  left: -1px;
  width: 2px;
  border-radius: 1px;
  background: var(--ink);
}
.needle-line::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px var(--paper);
}

.ticks {
  height: 16px;
  background-image:
    linear-gradient(to right, var(--ink-3) 1px, transparent 1px),
    linear-gradient(to right, var(--ink-3) 1px, transparent 1px);
  background-size: calc((100% - 1px) / 4) 16px, calc((100% - 1px) / 20) 8px;
  background-position: 0 0, 0 8px;
  background-repeat: repeat-x;
}

.zones { display: grid; grid-template-columns: 8fr 4fr 4fr 4fr; gap: 3px; margin-top: 6px; }
.zones i { height: 12px; border-radius: 6px; }
.zones i:nth-child(1) { background: var(--fill-normal); }
.zones i:nth-child(2) { background: var(--fill-warm); }
.zones i:nth-child(3) { background: var(--fill-hot); }
.zones i:nth-child(4) { background: var(--fill-critical); }

.nums { position: relative; height: 26px; margin-top: 8px; font-size: 0.8125rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.nums span { position: absolute; top: 0; transform: translateX(-50%); }
.nums span:first-child { transform: none; }
.nums span:last-child { transform: translateX(-100%); }

.zone-names {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 14px;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  font-weight: 600;
}
.zone-names li { display: flex; align-items: center; gap: 7px; }
.zone-names li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.zone-names li:nth-child(1) { color: var(--normal); --dot: var(--fill-normal); }
.zone-names li:nth-child(2) { color: var(--warm); --dot: var(--fill-warm); }
.zone-names li:nth-child(3) { color: var(--hot); --dot: var(--fill-hot); }
.zone-names li:nth-child(4) { color: var(--hot); --dot: var(--fill-critical); }

/* The four names fit one line from about 400px; narrower, two rows of two instead of one name alone. */
@media (max-width: 399px) {
  .zone-names { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px 28px; }
}

@media (min-width: 640px) {
  .zone-names { display: grid; grid-template-columns: 8fr 4fr 4fr 4fr; gap: 3px; margin-top: 2px; }
  .zone-names li::before { display: none; }
}

/* An Android heads-up notification, drawn with the alert's real strings. */
.notice {
  grid-area: notice;
  width: min(100%, 25rem);
  margin: 0;
  padding: 14px 18px 8px;
  border-radius: 26px;
  background: var(--card);
  box-shadow: var(--shadow-card);
  font-family: Roboto, system-ui, sans-serif;
  font-stretch: 100%;
}
.notice-head { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--ink-2); }
.notice-icon {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--link);
  color: var(--paper);
}
.notice-icon svg { width: 0.9375rem; height: 0.9375rem; }
.notice-title { margin-top: 8px; font-size: 0.9375rem; font-weight: 600; line-height: 1.35; }
.notice-text { margin-top: 2px; font-size: 0.875rem; line-height: 1.45; color: var(--ink-2); }
.notice-actions { display: flex; gap: 22px; margin-top: 4px; font-size: 0.875rem; font-weight: 600; color: var(--link); }
.notice-actions span { padding-block: 10px; }

@media (min-width: 900px) {
  .heat-in {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "copy notice" "scale scale";
    column-gap: 72px;
    row-gap: 56px;
  }
  .notice { width: 23.75rem; }
}

/* Revealed after the needle reaches the alert; only when scripts run and motion is allowed. */
.js .notice[data-hidden] { opacity: 0; transform: translateY(10px) scale(0.98); }
.notice { transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out); }

/* ---------- Screens ---------- */
.screens { padding-block: var(--section); }

.shots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78%, 300px);
  gap: 20px;
  margin: 40px calc(-1 * var(--gutter)) 0;
  padding: 0 var(--gutter) 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.shots::-webkit-scrollbar { display: none; }

.shot { margin: 0; scroll-snap-align: start; }

.shot-frame {
  aspect-ratio: 360 / 540;
  overflow: hidden;
  padding: 8px 8px 0;
  border-radius: 38px 38px 0 0;
  background: var(--device);
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
  mask-image: linear-gradient(to bottom, #000 72%, transparent);
}
.shot-frame img { width: 100%; border-radius: 30px 30px 0 0; }

.shot h3 { margin-top: 18px; }
.shot p { margin-top: 8px; color: var(--ink-2); max-width: 30em; }

.screens > .fine { margin-top: 32px; }

@media (min-width: 820px) {
  .shots {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 56px);
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }
}

/* Past 1440px the phones stop growing, so the screens stay a glance rather than a scroll. */
@media (min-width: 1440px) {
  .shots { grid-template-columns: repeat(3, minmax(0, 520px)); justify-content: space-between; }
}

/* ---------- Reviews ---------- */
.reviews { padding-block: var(--section); border-top: 1px solid var(--line); }

.reviews-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 20px 24px;
}
.reviews-head p { margin-top: 16px; color: var(--ink-2); text-wrap: balance; }

.pager { display: none; flex: none; gap: 10px; }
.pager button {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.14s var(--ease-out), background-color 0.14s var(--ease-out), opacity 0.14s;
}
.pager button:active:not([aria-disabled="true"]) { transform: scale(0.94); }
.pager button[aria-disabled="true"] { opacity: 0.32; cursor: default; }
.pager svg { width: 1.25rem; height: 1.25rem; }

@media (hover: hover) {
  .pager button:hover:not([aria-disabled="true"]) { background: var(--card); }
}

/* Buttons wherever there is a mouse or room for them; phones swipe. */
@media (min-width: 820px), (pointer: fine) {
  .pager { display: flex; }
}

/* The reel stays inside the page column: one review and a peek on phones, two, then three side by side. */
.reel {
  --gap: clamp(28px, 4vw, 56px);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 86%;
  column-gap: var(--gap);
  margin: 44px 0 0;
  padding: 0 0 6px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.reel::-webkit-scrollbar { display: none; }

@media (min-width: 640px) {
  .reel { grid-auto-columns: calc((100% - var(--gap)) / 2); }
}

@media (min-width: 1000px) {
  .reel { grid-auto-columns: calc((100% - 2 * var(--gap)) / 3); }
}

@media (min-width: 1440px) {
  .reel { grid-auto-columns: calc((100% - 3 * var(--gap)) / 4); }
}

.review {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  scroll-snap-align: start;
}
.review blockquote { margin: 0; }
.review blockquote p {
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  line-height: 1.24;
  font-weight: 500;
  font-stretch: 106%;
  letter-spacing: -0.014em;
}
.review-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 0.875rem; color: var(--ink-2); }
.review-meta span { white-space: nowrap; }

.stars { display: block; flex: none; width: 5.125rem; height: 0.875rem; color: var(--ink); }

/* ---------- Honest + Pro ---------- */
.honest {
  display: grid;
  padding-block: var(--section);
  border-top: 1px solid var(--line);
}

.nots { margin: 28px 0 0; padding: 0; list-style: none; }
.nots li {
  display: flex;
  gap: 16px;
  padding-block: 16px;
  border-top: 1px solid var(--line);
  font-size: clamp(1.125rem, 1rem + 0.55vw, 1.4375rem);
  line-height: 1.3;
  font-stretch: 104%;
  letter-spacing: -0.008em;
}
.nots li:last-child { border-bottom: 1px solid var(--line); }
.nots li::before { content: ""; flex: none; width: 14px; height: 2px; margin-top: 0.62em; background: var(--hot); }

.honest-copy > p { max-width: 34em; margin-top: 24px; color: var(--ink-2); }

.pro { align-self: start; margin-top: 56px; }
.pro p { margin-top: 14px; max-width: 30em; color: var(--ink-2); }
.pro .play { margin-top: 28px; }

/* The title spans both columns, so Pro starts on the same rule as the first "It doesn't". */
@media (min-width: 900px) {
  .honest {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    grid-template-areas: "title title" "copy pro";
    column-gap: clamp(56px, 8vw, 120px);
  }
  .honest > h2 { grid-area: title; }
  .honest-copy { grid-area: copy; }
  .pro { grid-area: pro; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); }
}

/* ---------- More apps ---------- */
.more { padding-block: var(--section); border-top: 1px solid var(--line); }

.apps { margin: 36px 0 0; padding: 0; list-style: none; display: grid; }

.app {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  column-gap: 20px;
  padding-block: 26px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 24px;
}
.app img { width: 3.75rem; height: 3.75rem; border-radius: 14px; }
.app h3 { font-size: 1.3125rem; }
.app .kind { margin-top: 2px; font-size: 0.9375rem; color: var(--ink-2); }
.app .what { margin-top: 10px; max-width: 32em; font-size: 1rem; color: var(--ink-2); }

.go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 6px;
  font-weight: 600;
  text-decoration: none;
}
.soon { display: flex; align-items: center; min-height: 44px; margin-top: 6px; font-weight: 500; color: var(--ink-2); }
.go svg { width: 16px; height: 16px; flex: none; transition: transform 0.16s var(--ease-out); }
.go:active svg { transform: translate(1px, -1px) scale(0.9); }

@media (hover: hover) {
  .go:hover { text-decoration: underline; }
  .go:hover svg { transform: translate(2px, -2px); }
}

@media (min-width: 760px) {
  .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 88px); }
  .app { grid-template-columns: 4rem minmax(0, 1fr); }
  .app img { width: 4rem; height: 4rem; border-radius: 15px; }
}

/* Wide screens: all four apps in one row, each icon above its text. */
@media (min-width: 1440px) {
  .apps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .app { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
}

/* ---------- Footer ---------- */
.foot {
  display: grid;
  gap: 10px;
  padding-block: 36px 56px;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  color: var(--ink-2);
}
.foot p { max-width: 60em; }
.foot b { font-weight: 600; color: var(--ink); margin-right: 8px; }
.foot .fine { margin-top: 14px; font-size: 0.8125rem; color: var(--ink-3); }
/* Every language, as plain links, so phones can switch too. */

/* ---------- Other scripts ---------- */
/* Archivo has Latin only, so Japanese, Korean, Chinese and Hindi text falls back to each system's own font for that
   script, while numbers and Latin names stay in Archivo. The display headings' tight tracking and line height suit
   Latin capitals; other scripts get no negative tracking and room for their taller glyphs. */
html:lang(ja) body { font-family: "Archivo", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic UI", Meiryo, system-ui, sans-serif; }
html:lang(ko) body { font-family: "Archivo", "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans CJK KR", "Malgun Gothic", system-ui, sans-serif; }
html:lang(zh) body { font-family: "Archivo", "PingFang SC", "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", system-ui, sans-serif; }
html:lang(hi) body { font-family: "Archivo", "Noto Sans Devanagari", "Kohinoor Devanagari", "Nirmala UI", system-ui, sans-serif; line-height: 1.65; }

html:is(:lang(ja), :lang(ko), :lang(zh), :lang(hi)) :is(h1, h2, h3, .nots li) { letter-spacing: 0; }
html:is(:lang(ja), :lang(ko), :lang(zh)) h1 { line-height: 1.12; }
html:is(:lang(ja), :lang(ko), :lang(zh)) h2 { line-height: 1.18; }
html:lang(hi) h1 { line-height: 1.2; }
html:lang(hi) h2 { line-height: 1.25; }
html:lang(hi) h3 { line-height: 1.4; }

/* Break Japanese between phrases and Korean between words, not inside them. */
html:lang(ja) :is(h1, h2, h3, p, li) { word-break: auto-phrase; }
html:lang(ko) body { word-break: keep-all; overflow-wrap: anywhere; }

/* German compounds can be wider than a phone at display size. */
html:lang(de) :is(h1, h2) { hyphens: auto; -webkit-hyphens: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}