/* Layout: M3 Expressive app surfaces on the web. Hero = headline beside two upright phones on morphing shapes,
   then shaped feature grid, screenshot rail, release panel, connected-list FAQ. Spacing in multiples of 8. */
:root {
  /* Tonal-spot scheme generated from Material 3 green seed #386A20 (material-color-utilities) */
  --primary: #446732; --on-primary: #ffffff;
  --primary-container: #c5efab; --on-primary-container: #2d4f1c;
  --secondary-container: #d8e7cb; --on-secondary-container: #3e4a35;
  --tertiary: #386666; --tertiary-container: #bbebec; --on-tertiary-container: #1e4e4f;
  --surface: #f8faf0; --surface-low: #f2f5ea; --surface-c: #edefe5; --surface-high: #e7e9df; --surface-highest: #e1e4d9;
  --on-surface: #191d16; --on-surface-variant: #43483e; --outline-variant: #c3c8bb; --outline: #74796d;
  --brand: #1E4E4F;
  --phone-frame: #181d18;
  --show-light: block; --show-dark: none;

  --font: "Google Sans Flex", "Google Sans", "Roboto Flex", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-l: 500 clamp(44px, 6.4vw, 72px)/1.08 var(--font);
  --headline-l: 500 clamp(28px, 3.4vw, 40px)/1.2 var(--font);
  --title-l: 500 22px/28px var(--font);
  --title-m: 500 16px/24px var(--font);
  --body-l: 400 16px/24px var(--font);
  --body-m: 400 14px/20px var(--font);
  --label-l: 500 14px/20px var(--font);

  --r-xl: 28px; --r-l: 16px; --r-s: 4px; --r-full: 999px;
  --max: 1200px;
  /* M3 Expressive motion tokens */
  --spring: cubic-bezier(.38, 1.21, .22, 1);        /* default spatial, 500ms */
  --spring-fast: cubic-bezier(.42, 1.67, .21, .9);  /* fast spatial, 350ms */
  --effects: cubic-bezier(.34, .8, .34, 1);         /* default effects, 200ms */
  --emphasized: cubic-bezier(.2, 0, 0, 1);
  --emph-decel: cubic-bezier(.05, .7, .1, 1);
  --emph-accel: cubic-bezier(.3, 0, .8, .15);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --primary: #a9d291; --brand: #BBEBEC; --on-primary: #173807;
  --primary-container: #2d4f1c; --on-primary-container: #c5efab;
  --secondary-container: #3e4a35; --on-secondary-container: #d8e7cb;
  --tertiary: #a0cfd0; --tertiary-container: #1e4e4f; --on-tertiary-container: #bbebec;
  --surface: #11140f; --surface-low: #191d16; --surface-c: #1d211a; --surface-high: #282b24; --surface-highest: #32362f;
  --on-surface: #e1e4d9; --on-surface-variant: #c3c8bb; --outline-variant: #43483e; --outline: #8d9286;
  --phone-frame: #000000;
  --show-light: none; --show-dark: block;
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --primary: #a9d291; --brand: #BBEBEC; --on-primary: #173807;
  --primary-container: #2d4f1c; --on-primary-container: #c5efab;
  --secondary-container: #3e4a35; --on-secondary-container: #d8e7cb;
  --tertiary: #a0cfd0; --tertiary-container: #1e4e4f; --on-tertiary-container: #bbebec;
  --surface: #11140f; --surface-low: #191d16; --surface-c: #1d211a; --surface-high: #282b24; --surface-highest: #32362f;
  --on-surface: #e1e4d9; --on-surface-variant: #c3c8bb; --outline-variant: #43483e; --outline: #8d9286;
  --phone-frame: #000000;
  --show-light: none; --show-dark: block;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--surface); color: var(--on-surface); font: var(--body-l); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--surface); }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 720px) { .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }
.ms { font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; font-variation-settings: "FILL" 0, "wght" 400, "opsz" 24; display: inline-block; flex: none; }
.ms.fill { font-variation-settings: "FILL" 1, "wght" 400, "opsz" 24; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }

/* Top app bar */
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--surface); transition: background .2s; }
.bar.scrolled { background: var(--surface-c); }
.bar-in { display: flex; align-items: center; gap: 16px; height: 64px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font: var(--title-l); font-size: 20px; }
.brand { gap: 8px; }
.brand .logo { width: 40px; height: 40px; flex: none; color: var(--brand); }
.brand em { font-style: normal; font-weight: 400; color: var(--on-surface-variant); margin-left: -2px; }
.brand b { font-weight: 600; } .brand b span { color: var(--brand); }
.nav { display: flex; gap: 4px; margin-left: auto; list-style: none; padding: 0; margin-block: 0; }
.nav a { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: var(--r-full); text-decoration: none; font: var(--label-l); color: var(--on-surface-variant); transition: background .2s var(--effects), color .2s var(--effects); }
.nav a:hover { background: color-mix(in srgb, var(--on-surface) 8%, transparent); color: var(--on-surface); }
.nav a.on { background: var(--secondary-container); color: var(--on-secondary-container); }
.icon-btn { width: 40px; height: 40px; border-radius: var(--r-full); border: 0; display: grid; place-items: center; background: transparent; color: var(--on-surface-variant); cursor: pointer; transition: background .2s var(--effects), border-radius .35s var(--spring-fast); }
.icon-btn:hover { background: color-mix(in srgb, var(--on-surface) 8%, transparent); }
.icon-btn:active { border-radius: 12px; }
@media (max-width: 760px) { .nav li:not(.keep) { display: none; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 56px; padding: 0 24px; border-radius: var(--r-full); text-decoration: none; font: var(--title-m); border: 0; cursor: pointer; transition: border-radius .35s var(--spring-fast), background .2s var(--effects), box-shadow .2s var(--effects); }
.btn:active { border-radius: 16px; }
.btn.filled { background: var(--primary); color: var(--on-primary); }
.btn.filled:hover { box-shadow: 0 1px 3px rgb(0 0 0 / .2), 0 2px 6px rgb(0 0 0 / .12); }
.btn.tonal { background: var(--secondary-container); color: var(--on-secondary-container); }
.btn.tonal:hover { background: color-mix(in srgb, var(--on-secondary-container) 8%, var(--secondary-container)); }
.btn.small { height: 40px; padding: 0 16px; font: var(--label-l); }
.btn.outlined { background: transparent; color: var(--primary); box-shadow: inset 0 0 0 1px var(--outline-variant); }

.chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 8px; font: var(--label-l); box-shadow: inset 0 0 0 1px var(--outline-variant); color: var(--on-surface-variant); }
.chip .ms { font-size: 18px; }

/* Hero */
.hero { display: grid; gap: 40px; padding-block: 48px 72px; }
.hero-copy { max-width: 46em; }
.showcase { margin: 0; }
.showcase img { width: 100%; height: auto; max-width: 100%; }
.for-light { display: var(--show-light); } .for-dark { display: var(--show-dark); }
.hero-copy { display: grid; gap: 24px; justify-items: start; min-width: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 6px; border-radius: var(--r-full); background: var(--primary-container); color: var(--on-primary-container); font: var(--label-l); text-decoration: none; }
.eyebrow i { font-style: normal; background: var(--primary); color: var(--on-primary); border-radius: var(--r-full); padding: 2px 8px; font-size: 12px; line-height: 16px; }
.hero h1 { font: var(--display-l); letter-spacing: -0.02em; }
.hero h1 em { font-style: normal; color: var(--primary); }
.hero .lead { font: var(--body-l); font-size: 18px; line-height: 28px; color: var(--on-surface-variant); max-width: 34em; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.stage { position: relative; aspect-ratio: 1 / 1; max-width: 100%; width: 100%; max-height: 600px; justify-self: center; }
.stage svg.shape { position: absolute; overflow: visible; }
.stage .s1 { width: 78%; left: 4%; top: 6%; color: var(--primary-container); animation: spin 48s linear infinite; }
.stage .s2 { width: 36%; right: 0; bottom: 4%; color: var(--tertiary-container); animation: spin 36s linear infinite reverse; }
.stage .s3 { width: 15%; left: 2%; bottom: 10%; color: var(--secondary-container); animation: bob 6s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 50% { transform: translateY(-12px) rotate(20deg); } }
.phone { position: absolute; width: 41%; aspect-ratio: 9 / 19.6; border-radius: 28px; padding: 6px; background: var(--phone-frame); box-shadow: 0 12px 32px rgb(0 0 0 / .22), 0 2px 6px rgb(0 0 0 / .12); max-width: 100%; }
.phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 22px; }
.phone.a { left: 12%; top: 3%; }
.phone.b { left: 48%; top: 15%; }

/* Sections */
section.block { padding-block: 72px; }
.head { display: grid; gap: 12px; margin-bottom: 40px; max-width: 40em; }
.head .kicker { font: var(--label-l); letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.head h2 { font: var(--headline-l); letter-spacing: -0.01em; }
.head p { color: var(--on-surface-variant); }

/* Features: items sit on the page, each icon wears a different M3 shape */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.feat { display: grid; gap: 12px; align-content: start; min-width: 0; }
.feat .badge { position: relative; width: 72px; height: 72px; display: grid; place-items: center; }
.feat .badge svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .5s var(--spring); }
.feat:hover .badge svg { transform: rotate(45deg) scale(1.06); }
.feat .badge .ms { position: relative; font-size: 32px; }
.feat:nth-child(3n+1) .badge { color: var(--primary-container); } .feat:nth-child(3n+1) .badge .ms { color: var(--on-primary-container); }
.feat:nth-child(3n+2) .badge { color: var(--tertiary-container); } .feat:nth-child(3n+2) .badge .ms { color: var(--on-tertiary-container); }
.feat:nth-child(3n) .badge { color: var(--secondary-container); } .feat:nth-child(3n) .badge .ms { color: var(--on-secondary-container); }
.feat h3 { font: var(--title-l); }
.feat p { color: var(--on-surface-variant); font: var(--body-m); font-size: 15px; line-height: 22px; max-width: 32em; }
.spec { font-variant-numeric: tabular-nums; color: var(--on-surface); font-weight: 500; }

/* Screenshot rail */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 24px; overflow-x: auto; padding-bottom: 16px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.shot { display: grid; gap: 16px; scroll-snap-align: start; min-width: 0; }
.shot .phone { position: static; width: 100%; }
.shot b { font: var(--title-m); display: block; }
.shot span { font: var(--body-m); color: var(--on-surface-variant); }

/* Release panel: one surface, flat rows inside */
.release { background: var(--primary-container); color: var(--on-primary-container); border-radius: 48px 48px 48px 12px; padding: 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; position: relative; overflow: hidden; }
.release .deco { position: absolute; width: 360px; right: -90px; top: -110px; color: color-mix(in srgb, var(--on-primary-container) 9%, transparent); animation: spin 60s linear infinite; pointer-events: none; }
.release h2 { font: var(--headline-l); }
.release .meta { margin-top: 12px; font: var(--body-l); opacity: .85; font-variant-numeric: tabular-nums; }
.release .copy { display: grid; gap: 24px; align-content: start; position: relative; min-width: 0; }
.dl { list-style: none; margin: 0; padding: 0; display: grid; position: relative; min-width: 0; }
.dl a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 8px; text-decoration: none; border-top: 1px solid color-mix(in srgb, var(--on-primary-container) 18%, transparent); border-radius: 12px; transition: background .2s; }
.dl li:first-child a { border-top: 0; }
.dl a:hover { background: color-mix(in srgb, var(--on-primary-container) 8%, transparent); }
.dl b { font: var(--title-m); display: block; }
.dl small { font: var(--body-m); opacity: .8; }
.dl .ms.go { opacity: .8; }

/* FAQ: expressive connected list on the page background */
.faq { display: grid; gap: 4px; max-width: 840px; }
.faq details { background: var(--surface-c); border-radius: var(--r-s); transition: border-radius .5s var(--spring), background .3s var(--effects), margin .5s var(--spring); }
.faq details:first-child { border-top-left-radius: 24px; border-top-right-radius: 24px; }
.faq details:last-child { border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; }
.faq details[open] { border-radius: 24px; background: var(--surface-high); margin-block: 6px; }
.faq summary { list-style: none; display: flex; align-items: center; gap: 16px; padding: 20px 24px; cursor: pointer; font: var(--title-m); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ms { margin-left: auto; transition: transform .5s var(--spring); color: var(--on-surface-variant); }
.faq details[open] summary .ms { transform: rotate(180deg); }
.faq .ans { padding: 0 24px 24px; color: var(--on-surface-variant); max-width: 62ch; }
.faq .ans a { color: var(--primary); }

/* Footer */
footer { background: var(--surface-low); margin-top: 72px; }
.foot { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding-block: 56px 32px; }
.foot h4 { margin: 0 0 12px; font: var(--label-l); color: var(--on-surface-variant); letter-spacing: .06em; text-transform: uppercase; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot a { text-decoration: none; color: var(--on-surface); }
.foot a:hover { color: var(--primary); text-decoration: underline; }
.foot .about { display: grid; gap: 16px; align-content: start; color: var(--on-surface-variant); font: var(--body-m); }
.legal { border-top: 1px solid var(--outline-variant); padding-block: 24px; font: var(--body-m); color: var(--on-surface-variant); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }

@media (max-width: 960px) {
  .hero { padding-block: 24px 48px; gap: 32px; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .release { grid-template-columns: minmax(0, 1fr); padding: 32px 24px; }
  .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot .about { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .features { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .btn { height: 48px; padding: 0 20px; }
  .rail { grid-auto-columns: 62%; }
  section.block { padding-block: 48px; }
  .phone { border-radius: 20px; padding: 4px; } .phone img { border-radius: 16px; }
}
/* Theme switch: circular reveal via View Transitions, color crossfade as fallback */
.theme-vt::view-transition-old(root), .theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.theme-vt::view-transition-old(root) { z-index: 1; } .theme-vt::view-transition-new(root) { z-index: 2; }
.theme-vt .bar { view-transition-name: none; }

/* Page to page: the top bar stays put, content fades through with a short rise */
@view-transition { navigation: auto; }
.bar { view-transition-name: topbar; }
::view-transition-group(topbar) { animation-duration: 0s; }
:root:not(.theme-vt)::view-transition-old(root) { animation: vt-out 150ms var(--emph-accel) both; }
:root:not(.theme-vt)::view-transition-new(root) { animation: vt-in 400ms var(--emph-decel) 60ms both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(20px); } }
.collapsing { overflow: hidden; }
.menu-sheet { transform-origin: top; }
.sheet-in { animation: sheet-in .4s var(--emph-decel) both; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(-8px) scaleY(.96); } }
.theming, .theming *, .theming *::before, .theming *::after { transition: background-color .5s cubic-bezier(.2,0,0,1), color .5s cubic-bezier(.2,0,0,1), box-shadow .5s cubic-bezier(.2,0,0,1), border-color .5s cubic-bezier(.2,0,0,1) !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* Mobile menu */
.menu-only { display: none; }
.menu-sheet { display: grid; gap: 4px; padding-block: 0 16px; }
.menu-sheet a { display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 20px; border-radius: var(--r-full); text-decoration: none; font: var(--label-l); font-size: 16px; color: var(--on-surface-variant); }
.menu-sheet a:hover { background: color-mix(in srgb, var(--on-surface) 8%, transparent); }
.menu-sheet a.on { background: var(--secondary-container); color: var(--on-secondary-container); }
@media (max-width: 760px) { .menu-only { display: list-item; } }
@media (min-width: 761px) { .menu-sheet { display: none !important; } }

/* Inner page header */
.page-head { display: grid; gap: 16px; padding-block: 48px 32px; max-width: 46em; }
.page-head h1 { font: var(--display-l); font-size: clamp(40px, 5.4vw, 57px); letter-spacing: -0.02em; }
.page-head p { font-size: 18px; line-height: 28px; color: var(--on-surface-variant); }

/* Downloads */
.latest { background: var(--primary-container); color: var(--on-primary-container); border-radius: 48px 48px 48px 12px; padding: 40px; display: grid; gap: 24px; position: relative; overflow: hidden; }
.latest .deco { position: absolute; width: 320px; right: -80px; top: -100px; color: color-mix(in srgb, var(--on-primary-container) 9%, transparent); animation: spin 60s linear infinite; pointer-events: none; }
.latest-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; position: relative; }
.latest-top h2 { font: var(--headline-l); font-variant-numeric: tabular-nums; }
.pill { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--r-full); font: var(--label-l); font-size: 13px; background: var(--primary); color: var(--on-primary); }
.pill.pre { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.latest-top time { font: var(--body-l); opacity: .85; }
.latest .dl { position: relative; }
.verify { position: relative; font: var(--body-m); opacity: .85; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.verify a { text-decoration: underline; text-underline-offset: 2px; }
.log { position: relative; display: grid; gap: 16px; justify-items: start; }
.log-body { width: 100%; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); padding-top: 16px; }
.md { font: var(--body-m); font-size: 15px; line-height: 22px; display: grid; gap: 12px; max-width: 76ch; min-width: 0; }
.md h3, .md h4 { font: var(--title-m); margin-top: 8px; }
.md ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.md code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, currentColor 10%, transparent); overflow-wrap: anywhere; }
.md a { text-decoration: underline; overflow-wrap: anywhere; }
.scope { display: inline-block; font: var(--label-l); font-size: 12px; line-height: 18px; padding: 0 8px; margin-right: 6px; border-radius: 6px; background: color-mix(in srgb, currentColor 12%, transparent); vertical-align: 1px; }
.older { margin-top: 56px; }
.older h2 { font: var(--headline-l); font-size: 28px; margin-bottom: 24px; }
.list { display: grid; gap: 4px; }
.list > details { background: var(--surface-c); border-radius: var(--r-s); transition: border-radius .5s var(--spring), background .3s var(--effects), margin .5s var(--spring); }
.list > details:first-child { border-top-left-radius: 24px; border-top-right-radius: 24px; }
.list > details:last-child { border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; }
.list > details[open] { border-radius: 24px; background: var(--surface-high); margin-block: 6px; }
.list summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 20px 24px; cursor: pointer; }
.list summary::-webkit-details-marker { display: none; }
.list summary b { font: var(--title-m); font-variant-numeric: tabular-nums; }
.list summary time { font: var(--body-m); color: var(--on-surface-variant); }
.list summary .ms { margin-left: auto; color: var(--on-surface-variant); transition: transform .5s var(--spring); }
.list details[open] summary .ms { transform: rotate(180deg); }
.list .inner { padding: 0 24px 24px; display: grid; gap: 16px; }
.files { display: flex; flex-wrap: wrap; gap: 8px; }
.files a { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 10px; text-decoration: none; font: var(--label-l); box-shadow: inset 0 0 0 1px var(--outline-variant); color: var(--on-surface); }
.files a:hover { background: color-mix(in srgb, var(--on-surface) 8%, transparent); }
.files .ms { font-size: 18px; color: var(--primary); }
.files small { color: var(--on-surface-variant); font: var(--body-m); font-size: 12px; font-variant-numeric: tabular-nums; }
.all-link { display: inline-flex; margin-top: 32px; }
.loading { padding: 40px; font: var(--body-l); }

/* Partners */
.partners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 40px; }
.partner { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 24px; align-items: start; }
.partner .feat-text { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.partner h3 { font: var(--title-l); }
.partner p { color: var(--on-surface-variant); font-size: 15px; line-height: 22px; }
.partner .role { font: var(--label-l); color: var(--primary); letter-spacing: .02em; }
.text-link { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; margin-left: -12px; border-radius: var(--r-full); text-decoration: none; color: var(--primary); font: var(--label-l); }
.text-link:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.text-link .ms { font-size: 18px; }
.note { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--outline-variant); color: var(--on-surface-variant); font: var(--body-m); max-width: 76ch; }

@media (max-width: 960px) { .latest { padding: 32px 24px; } }
@media (max-width: 720px) { .partners { grid-template-columns: minmax(0, 1fr); } .partner { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; } .partner .badge { width: 56px; height: 56px; } }

/* Phones: keep the header on one row at 360 px and give footer links a 40 px touch target. */
@media (max-width: 400px) {
  .brand { font-size: 18px; gap: 6px; min-width: 0; }
  .brand .logo { width: 34px; height: 34px; }
  .nav { gap: 0; }
}
.foot ul { gap: 0; }
.foot a { display: inline-flex; align-items: center; min-height: 40px; }