/* Cleverly Lingo design system.
   Every colour, radius and shadow here is a port of the iOS app's Theme.swift, so the
   site and the app are one product. Light-forward: off-white ground, ink navy text,
   the logo's periwinkle and orange as the only ambient colour. Feature hues belong to
   the thing they identify. The floating tab bar is the one dark element. */

@font-face { font-family: "CL Display"; src: url("/fonts/sn-pro-latin.woff2") format("woff2"); font-weight: 200 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "CL Display"; src: url("/fonts/sn-pro-latin-ext.woff2") format("woff2"); font-weight: 200 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "CL Display"; src: url("/fonts/sn-pro-cyrillic.woff2") format("woff2"); font-weight: 200 900; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* Rounded companions so a headline stays in one voice when it changes script. Each
   downloads only if that script is actually drawn. */
@font-face { font-family: "CL Display"; src: url("/fonts/display-arabic.woff2") format("woff2"); font-weight: 200 900; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "CL Display"; src: url("/fonts/display-hebrew.woff2") format("woff2"); font-weight: 200 900; font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "CL Display"; src: url("/fonts/display-thai.woff2") format("woff2"); font-weight: 200 900; font-display: swap;
  unicode-range: U+0E01-0E5B; }
@font-face { font-family: "CL Display"; src: url("/fonts/display-greek.woff2") format("woff2"); font-weight: 200 900; font-display: swap;
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "CL Display"; src: url("/fonts/display-devanagari.woff2") format("woff2"); font-weight: 200 900; font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+20B9, U+A830-A839, U+A8E0-A8FF; }
/* The range keeps it from downloading on Apple devices, which never draw with it: without one,
   the first character the system font lacks, like the ✦, has to come here to find out. */
@font-face { font-family: "Inter"; src: url("/fonts/inter-var-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Stand-ins for the display font while it loads, from what the device already has, with its
   line metrics and very nearly its width. A slow connection sees the headline sharpen up as
   the real font lands, without moving. Latin only: other scripts fall back as they always did. */
@font-face { font-family: "CL Display Rounded Stand-in"; src: local("Arial Rounded MT Bold"), local("ArialRoundedMTBold"); font-weight: 200 900; size-adjust: 98.6%; ascent-override: 99.9%; descent-override: 31.95%; line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "CL Display Stand-in"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 200 900; ascent-override: 98.5%; descent-override: 31.5%; line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+2000-206F; }

:root {
  color-scheme: light;

  /* Surfaces */
  --ground: #fafafc;
  --card: #ffffff;
  --well: #f1f2f6;
  --hair: #e6e8ee;
  --hair-strong: #c9ced8;
  --shadow-ink: 20 26 51;
  --card-edge: rgb(var(--shadow-ink) / 0.06);

  /* Text */
  --ink: #12162a;
  --ink-2: #4a5064;
  --ink-3: #626979;
  --icon: #5b6272;

  /* Brand, from the logo */
  --brand-ink: #2b3150;
  --periwinkle: #6b7fbd;
  --orange: #e27d29;
  --orange-deep: #b45e12;
  --wash-blue: #d9e0f6;
  --wash-peach: #fbe6d6;

  /* Feature hues: bright for fills and large icons, deep for anything read as text */
  --keyboard: #5b8fa3; --keyboard-end: #4a7a8c; --keyboard-deep: #2e6070; --keyboard-soft: #e9f1f4;
  --voice: #6b7fbd; --voice-end: #4a5f9d; --voice-deep: #4a5c96; --voice-soft: #eef1f9; --voice-light: #8fa0d6;
  --realtime: #8a5cd0; --realtime-end: #6e3ca8; --realtime-deep: #5b2e92; --realtime-soft: #f0eafa;
  --live: #5fa77f; --live-end: #4a8f6a; --live-deep: #2e704c; --live-soft: #e8f3ec;
  --pro-deep: #8f4a0e; --pro-soft: #fbe3d2;

  /* The welcome deck's demo-card tints */
  --tint-peach: #fbe3d2; --tint-lilac: #ece0f2; --tint-pink: #f6deea;
  --tint-blue: #d7e9f6; --tint-yellow: #faf1d4; --tint-mint: #ddf0e6;

  /* The keyboard extension's own light theme */
  --kb-tray: #d1d4da;
  --kb-key: #ffffff;
  --kb-key-2: #acb3bf;
  --kb-pressed: #e3e7ef;
  --kb-ink: #111114;

  /* Glass tab bar */
  --bar: #1c1f26;
  --bar-stroke: #2c313b;
  --bar-idle: #9aa0ab;

  /* The app's conic sweep around its tool pills, and its "AI is working" text */
  --iridescent: #7c8ed6, #60c4c8, #78ce96, #e4c478, #d68ac4, #a082e6, #7c8ed6;
  --shimmer: #546cc8, #28a2a8, #3aaa6e, #d09638, #c058aa, #785cd4, #546cc8;

  /* Type */
  --font-display: ui-rounded, "CL Display", "CL Display Rounded Stand-in", "CL Display Stand-in", "Hiragino Maru Gothic ProN", "Apple SD Gothic Neo", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Hiragino Sans", "Apple SD Gothic Neo", "PingFang SC", "Segoe UI", Roboto, sans-serif;

  /* Scale: a perfect fourth, fluid at the top end */
  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-md: 1.0625rem;
  --t-lg: clamp(1.1875rem, 1.1rem + 0.35vw, 1.4375rem);
  --t-xl: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem);
  --t-2xl: clamp(2.125rem, 1.6rem + 2.4vw, 3.75rem);
  --t-3xl: clamp(2.75rem, 1.7rem + 4.8vw, 6.25rem);
  --t-4xl: clamp(3.125rem, 1.4rem + 8vw, 8.5rem);

  /* Shape: continuous corners from the app */
  --r-card: 22px;
  --r-control: 14px;
  --r-button: 16px;
  --r-chip: 12px;
  --r-room: clamp(28px, 4vw, 48px);

  /* Lifted paper, cast in the page's own navy rather than grey */
  --lift-1: 0 1px 3px rgb(var(--shadow-ink) / 0.05), 0 10px 22px rgb(var(--shadow-ink) / 0.07);
  --lift-2: 0 1px 3px rgb(var(--shadow-ink) / 0.05), 0 12px 24px rgb(var(--shadow-ink) / 0.1);
  --lift-3: 0 2px 6px rgb(var(--shadow-ink) / 0.06), 0 24px 56px rgb(var(--shadow-ink) / 0.14);

  /* Motion: the app's press timing and spring */
  --press: 120ms cubic-bezier(0.3, 0.7, 0.4, 1);
  --out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: linear(0, 0.0121, 0.0467 2.6%, 0.1788 5.4%, 0.5148 10.3%, 0.7396 13.9%, 0.9048 17.4%, 1.0205 21%, 1.0693 23.5%, 1.0992 26.2%, 1.1095 28.6%, 1.1069 31.8%, 1.0872 36.2%, 1.0264 46.2%, 1.0049 52.2%, 0.9942 58.6%, 0.993 67.8%, 1);
  --spring-soft: linear(0, 0.0164, 0.0637 3.1%, 0.2382 6.9%, 0.5764 13%, 0.7941 18.1%, 0.9286 23.4%, 0.9794 26.8%, 1.0135 30.8%, 1.0304 35.1%, 1.0313 41.2%, 1.0092 55.9%, 0.9994 73%, 1);

  --shell: min(1200px, calc(100% - clamp(32px, 6vw, 80px)));
  --tabbar-clearance: 96px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 24px;
  background: var(--ground);
  /* Set here as well, the body's clip below really clips instead of being handed up to the
     viewport, so Salu's effects canvas, which is twice its size, can't widen the page. */
  overflow-x: clip;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* CleverlyBackground: the whole-app ground. The logo's two colours breathe in from the
   top corners and it stays fixed while content scrolls over it. */
.ground {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(105vmax 105vmax at 6% -8%, var(--wash-blue), rgb(217 224 246 / 0) 62%),
    radial-gradient(72vmax 72vmax at 102% 2%, rgb(251 230 214 / 0.9), rgb(251 230 214 / 0) 62%),
    var(--ground);
}

img, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { -webkit-tap-highlight-color: transparent; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.022em; line-height: 1.04; text-wrap: balance; }
h3 { font-weight: 700; letter-spacing: -0.012em; line-height: 1.16; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--wash-blue); color: var(--ink); }

:focus { outline: none; }
:focus-visible { outline: 2.5px solid var(--voice-deep); outline-offset: 3px; border-radius: 8px; }

.shell { width: var(--shell); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 200; padding: 10px 16px; border-radius: var(--r-chip); background: var(--ink); color: #fff; font-weight: 600; transform: translateY(-200%); opacity: 0; pointer-events: none; }
/* Sliding off-screen is not enough: Safari on iOS 26 paints above the page, under the status bar. */
.skip-link:focus-visible { transform: none; opacity: 1; pointer-events: auto; }
.icon { width: 1em; height: 1em; flex: none; fill: currentColor; }
.icon-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Smooth page-to-page cross-fade where the browser supports it */
@view-transition { navigation: auto; }
.brand { view-transition-name: brand; }

/* ---------- Buttons ---------- */

/* CleverlyFilledButtonStyle: top sheen, tinted shadow, presses in and dims. */
.btn {
  --accent: var(--keyboard-deep);
  --accent-rgb: 46 96 112;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: var(--r-button);
  background: linear-gradient(rgb(255 255 255 / 0.16), rgb(255 255 255 / 0)), var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 650;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgb(var(--accent-rgb) / 0.28);
  transition: transform var(--press), opacity var(--press), box-shadow 240ms var(--out);
  touch-action: manipulation;
}
.btn .icon { font-size: 1.15em; }
.btn:active { transform: scale(0.98); opacity: 0.92; }
@media (hover: hover) { .btn:hover { box-shadow: 0 10px 26px rgb(var(--accent-rgb) / 0.36); transform: translateY(-1px); } .btn:active { transform: scale(0.98); } }

/* CleverlyTintedButtonStyle: soft fill, deep label, no outline. */
.btn-soft { background: var(--well); color: var(--ink); box-shadow: none; }
@media (hover: hover) { .btn-soft:hover { background: #e9ebf1; box-shadow: none; } }
.btn-white { background: var(--card); color: var(--ink); box-shadow: var(--lift-1); }
@media (hover: hover) { .btn-white:hover { box-shadow: var(--lift-2); } }
.btn-ink { background: var(--kb-ink); box-shadow: 0 8px 18px rgb(17 17 20 / 0.22); }
@media (hover: hover) { .btn-ink:hover { box-shadow: 0 12px 26px rgb(17 17 20 / 0.28); } }

/* Store badges. A store that is not open yet is visible text, never a broken link. */
.store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 7px 18px 7px 14px;
  border-radius: var(--r-button);
  background: var(--card);
  box-shadow: var(--lift-1);
  transition: transform var(--press), box-shadow 240ms var(--out);
  touch-action: manipulation;
}
.store svg, .store img { width: 26px; height: 26px; flex: none; }
.store span { display: grid; line-height: 1.12; text-align: start; }
.store small { font-size: 0.72rem; font-weight: 500; color: var(--ink-3); }
.store b { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
a.store:active { transform: scale(0.98); }
@media (hover: hover) { a.store:hover { transform: translateY(-1px); box-shadow: var(--lift-2); } }

.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Top bar ---------- */

.topbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: max(14px, env(safe-area-inset-top)) clamp(16px, 3vw, 32px) 0;
}
.brand { display: inline-flex; align-items: center; gap: 8px; min-height: 56px; position: relative; }
.brand-mark { flex: none; width: auto; height: 48px; transform-origin: 50% 90%; transition: transform 700ms var(--spring-soft); }
@media (hover: hover) { .brand:hover .brand-mark { transform: rotate(-5deg) scale(1.05); } }
.brand-name { font-family: var(--font-display); font-size: 1.375rem; font-weight: 750; letter-spacing: -0.015em; line-height: 1; white-space: nowrap; }
/* Two Salus never share a screen. Support and the 404 leave the mark out altogether; on the
   homepage it only shows when the hero has no room for the big one. */
.home:not(.no-hero-salu) .brand-mark, .demo-on .brand-mark { display: none; }
.topbar nav { display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; background: rgb(255 255 255 / 0.72); box-shadow: var(--lift-1); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); }
.topbar nav a { display: flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 999px; font-family: var(--font-display); font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); transition: background 200ms, color 200ms, transform var(--press); touch-action: manipulation; }
.topbar nav a:active { transform: scale(0.96); }
@media (hover: hover) { .topbar nav a:hover { background: var(--well); color: var(--ink); } }
.topbar nav a.nav-cta { background: var(--ink); color: #fff; }
@media (hover: hover) { .topbar nav a.nav-cta:hover { background: var(--brand-ink); color: #fff; } }
@media (max-width: 620px) { .topbar nav a:not(.nav-cta):not(.nav-keep) { display: none; } .brand-mark { height: 42px; } .brand-name { font-size: 1.1875rem; } }

/* ---------- Floating glass tab bar: the app's one dark element ---------- */

.tabbar {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 50;
  display: flex;
  align-items: stretch;
  gap: 4px;
  height: 62px;
  padding: 7px;
  border-radius: 999px;
  background: rgb(28 31 38 / 0.86);
  box-shadow: 0 12px 26px rgb(0 0 0 / 0.22), 0 2px 4px rgb(0 0 0 / 0.1), inset 0 0 0 0.8px var(--bar-stroke);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  transform: translate(-50%, 0);
  transition: transform 620ms var(--spring-soft), opacity 240ms;
}
/* The lit top edge that sells the glass curvature */
.tabbar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0.8px;
  background: linear-gradient(rgb(255 255 255 / 0.3), rgb(255 255 255 / 0.03));
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  pointer-events: none;
}
.tabbar.is-hidden { transform: translate(-50%, 140%); opacity: 0; pointer-events: none; }
/* The app's rule: a solid fill when Reduce Transparency is on. */
@media (prefers-reduced-transparency: reduce) {
  .tabbar { background: var(--bar); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .topbar nav { background: var(--card); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
html:not(.js) .tabbar { position: static; transform: none; width: max-content; margin: 24px auto; }

.tab {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 48px;
  border-radius: 999px;
  color: var(--bar-idle);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 650;
  white-space: nowrap;
  transition: color 240ms, transform var(--press);
  touch-action: manipulation;
}
.tab:active { transform: scale(0.92); }
.tab .icon { font-size: 19px; }
@media (hover: hover) { .tab:hover { color: #fff; } }
.tab-label { display: grid; grid-template-columns: 0fr; opacity: 0; transition: grid-template-columns 460ms var(--spring-soft), opacity 200ms; }
.tab-label > span { overflow: hidden; }
.tab.is-active { color: #fff; padding-inline: 14px; }
.tab { transition: color 240ms, transform var(--press), padding 460ms var(--spring-soft); }
.tab.is-active .tab-label { grid-template-columns: 1fr; opacity: 1; }
.tab.is-active.is-tight { padding-inline: 0; gap: 0; }
.tab.is-active.is-tight .tab-label { grid-template-columns: 0fr; opacity: 0; }
.tab.is-active .icon { animation: symbol-bounce 520ms var(--out); }
@keyframes symbol-bounce { 0% { transform: scale(1); } 28% { transform: scale(0.76); } 62% { transform: scale(1.16); } 100% { transform: scale(1); } }

/* The active capsule that glides between tabs on one spring, tinted by feature */
.tab-pill {
  position: absolute;
  top: 7px;
  left: 0;
  height: 48px;
  width: 48px;
  border-radius: 999px;
  --tint: var(--keyboard-deep);
  --glow: 91 143 163;
  background: linear-gradient(rgb(255 255 255 / 0.26), rgb(255 255 255 / 0) 50%), var(--tint);
  box-shadow: inset 0 0 0 0.8px rgb(255 255 255 / 0.22), 0 4px 12px rgb(var(--glow) / 0.45);
  transition: transform 560ms var(--spring), width 560ms var(--spring), background-color 300ms, box-shadow 300ms, opacity 200ms;
  opacity: 0;
}
.tab-pill.is-on { opacity: 1; }
@media (max-width: 420px) { .tab { min-width: 44px; } .tabbar { gap: 2px; } }

/* ---------- Toast: CleverlyStatusToast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 74px);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px 10px 14px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: inset 0 0 0 0.5px var(--card-edge), 0 9px 18px rgb(var(--shadow-ink) / 0.14);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 650;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, 16px) scale(0.92);
  opacity: 0;
  transition: transform 420ms var(--spring), opacity 180ms;
}
.toast.is-on { transform: translate(-50%, 0) scale(1); opacity: 1; }
.toast .icon { font-size: 16px; color: var(--live-deep); }

/* ---------- Text that is being typed ---------- */

.caret {
  display: inline-block;
  width: 0.075em;
  min-width: 2.5px;
  height: 0.86em;
  margin-inline-start: 0.05em;
  border-radius: 99px;
  background: var(--voice-deep);
  vertical-align: -0.09em;
  animation: caret-blink 1.06s steps(1, end) infinite;
}
.caret.is-solid { animation: none; }
@keyframes caret-blink { 0%, 55% { opacity: 1; } 55.01%, 100% { opacity: 0; } }

/* The app's "AI is working" label: a slow gradient flowing through the letters */
.shimmer {
  background: linear-gradient(90deg, var(--shimmer)) 0 0 / 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer-flow 3.2s linear infinite;
}
@keyframes shimmer-flow { to { background-position: -200% 0; } }
.reduce .shimmer { animation: none; background: none; color: var(--ink-2); }

/* The app's iridescent ring around a tool pill */
@property --sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.iridescent { position: relative; isolation: isolate; }
.iridescent::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--sweep), var(--iridescent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: sweep 5s linear infinite;
  pointer-events: none;
}
@keyframes sweep { to { --sweep: 360deg; } }
.reduce .iridescent::before { animation: none; }

/* ---------- Footer ---------- */

/* Fingers get 44 points even where the look is smaller: an invisible margin takes the tap, so
   nothing on the page moves. */
@media (hover: none), (pointer: coarse) {
  :where(.topbar nav a, .footer-links a, .copy-row a, .copy-row .btn, .x-install > .link, .chip, .tool-tab, .swatches button, .demo-again, .lang-chip-pick) { position: relative; }
  :where(.topbar nav a, .footer-links a, .chip, .tool-tab, .segmented button, .demo-again, .lang-chip-pick)::after { content: ""; position: absolute; inset: -4px 0; }
  :where(.swatches button, .video-toggle)::after { content: ""; position: absolute; inset: -4px; }
  .copy-row a::after { content: ""; position: absolute; inset: -11px 0; }
  .copy-row .btn::after { content: ""; position: absolute; inset: -5px 0; }
  .x-install > .link::after { content: ""; position: absolute; inset: -10px 0; }
}

.footer { position: relative; padding: clamp(40px, 6vw, 72px) 0 calc(var(--tabbar-clearance) + 12px); }
.footer-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.footer-brand { display: flex; align-items: center; gap: 14px; color: var(--ink-3); font-size: var(--t-xs); max-width: 46ch; }
.footer-brand b { flex: none; font-family: var(--font-display); font-size: var(--t-md); font-weight: 750; letter-spacing: -0.012em; color: var(--ink); }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px; }
.footer-links a { padding: 8px 12px; border-radius: 10px; font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); transition: background 200ms, color 200ms; }
@media (hover: hover) { .footer-links a:hover { background: var(--well); color: var(--ink); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .caret { animation: none; }
  @view-transition { navigation: none; }
}

/* Salu. The box is the character's own height. The art's square canvas overhangs it with the
   feet on the box's bottom edge: the character fills 64% of the canvas, its feet at 94%. */
.salu { --h: 120px; --canvas: calc(var(--h) / 0.64); position: relative; flex: none; width: calc(var(--h) * 0.86); height: var(--h); cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.salu > img, .salu > mascot-view { position: absolute; left: 50%; bottom: calc(var(--canvas) * -0.06); width: var(--canvas); max-width: none; height: var(--canvas); translate: -50% 0; pointer-events: none; }
.salu > mascot-view { transition: opacity 450ms ease; }

.confetti { position: fixed; inset: 0; z-index: 70; width: 100%; height: 100%; pointer-events: none; }
.logo-flag { position: absolute; left: 0; top: 0; font-size: 15px; line-height: 1; pointer-events: none; }
.link { color: var(--keyboard-deep); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Headings that get typed as they arrive */
[data-type].is-waiting { visibility: hidden; }
.tw { display: inline-block; white-space: nowrap; }
.tc { visibility: hidden; }
.tc.is-on { visibility: visible; }
/* It hangs off the letter before it, so the words don't step sideways as it passes through. */
[data-type] .caret { height: 0.82em; margin-inline-end: -0.125em; }