/* goodbuddy.ai: "lamplight at dusk".
   One idea: it is evening, the house is quiet, and there is a light on. A twilight sky with slow
   stars and a few fireflies sits behind everything; the lamp glows amber. One sans-serif face
   (Atkinson Hyperlegible) for everything, no serif anywhere. Action buttons are green, like the
   widget's "Tap to talk", never red. Body text stays large, plain and very high contrast, because
   the people reading it may be eighty. All motion stops under prefers-reduced-motion. */

:root {
  --night: #0b0e2a;       /* sky, top */
  --dusk: #171c4f;        /* sky, middle */
  --moon: #f6f2e4;        /* text */
  --moon-soft: #c9cbec;   /* supporting text */
  --amber: #ffb703;       /* the lamp */
  --amber-soft: #ffe08a;
  --ink: #1a1440;         /* text on amber */
  --glass: rgba(255, 255, 255, 0.06);
  --glass-strong: rgba(255, 255, 255, 0.1);
  --hairline: rgba(255, 255, 255, 0.16);
  --gold: linear-gradient(100deg, #ffeeb5 0%, #ffc530 45%, #ff9d5c 100%);
  --go-ink: #052a17;      /* text on green, as on the widget's button (web/src/widget/widget.css) */
  --go: #3edc84;          /* action buttons: green, never red */
  --go-soft: #b8f5cf;

  --display: 'Atkinson Hyperlegible', system-ui, sans-serif;   /* no serif type (the owner, 2026-10-08) */
  --body: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --measure: 62ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 26px;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; background: var(--night); }
body {
  color: var(--moon);
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.015em; line-height: 1.08; }
h1 { font-size: clamp(2.5rem, 6.4vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3rem); margin-bottom: 1rem; }
h3 { font-size: 1.4rem; margin-bottom: 0.45rem; }
/* the words that carry the feeling are set in gold */
h1 em, h2 em, .figure-n { color: var(--amber-soft); }
h1 em, h2 em { font-style: italic; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  h1 em, h2 em, .figure-n {
    background: var(--gold); background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: shimmer 9s ease-in-out infinite alternate;
  }
}
p { max-width: var(--measure); }
a { color: var(--amber-soft); text-underline-offset: 3px; }
ul, ol { padding-left: 1.2rem; }
.lede { font-size: 1.25rem; color: var(--moon-soft); }
.fine { font-size: 0.95rem; color: var(--moon-soft); }
.fine.free-note { font-size: 1.25rem; color: #ece1b4; }   /* as big as the lede, just slightly yellow (the owner, 2026-10-10) */
.eyebrow { font-family: var(--body); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.82rem; color: var(--amber-soft); margin-bottom: 1rem; }

.skip { position: absolute; left: -999px; top: 0; background: var(--amber); color: var(--ink); padding: 0.5rem 1rem; z-index: 100; font-weight: 700; }
.skip:focus { left: 1rem; top: 1rem; }
.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; }

/* ---- the sky: fixed behind everything ---- */
.sky {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(90% 55% at 50% 112%, rgba(255, 157, 92, 0.22), transparent 70%),
    linear-gradient(180deg, var(--night) 0%, var(--dusk) 55%, #231a55 100%);
}
.sky::before, .sky::after { content: ''; position: absolute; inset: 0; background-repeat: repeat; }
.sky::before {
  background-image:
    radial-gradient(1.6px 1.6px at 24px 36px, #fff, transparent),
    radial-gradient(1.2px 1.2px at 150px 92px, #fff, transparent),
    radial-gradient(1.8px 1.8px at 212px 210px, #ffe9b0, transparent),
    radial-gradient(1px 1px at 88px 180px, #fff, transparent),
    radial-gradient(1.3px 1.3px at 270px 30px, #dfe4ff, transparent);
  background-size: 300px 260px;
  animation: twinkle 5.5s ease-in-out infinite alternate;
}
.sky::after {
  background-image:
    radial-gradient(1.4px 1.4px at 60px 120px, #fff, transparent),
    radial-gradient(1px 1px at 190px 40px, #fff, transparent),
    radial-gradient(2px 2px at 330px 170px, #fff3c9, transparent),
    radial-gradient(1.1px 1.1px at 400px 290px, #dfe4ff, transparent),
    radial-gradient(1.2px 1.2px at 250px 330px, #fff, transparent);
  background-size: 460px 380px;
  animation: twinkle 8s ease-in-out 1.5s infinite alternate-reverse;
}
.aurora { position: absolute; border-radius: 50%; filter: blur(80px); will-change: transform; }
.aurora.a { width: 62vmax; height: 40vmax; top: -16vmax; right: -14vmax; background: rgba(120, 88, 255, 0.5); animation: drift 26s ease-in-out infinite alternate; }
.aurora.b { width: 48vmax; height: 34vmax; top: 34vh; left: -22vmax; background: rgba(60, 190, 200, 0.2); animation: drift 34s ease-in-out -8s infinite alternate-reverse; }

/* fireflies */
.sky i {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: var(--amber-soft);
  box-shadow: 0 0 10px 3px rgba(255, 205, 90, 0.75), 0 0 26px 8px rgba(255, 183, 3, 0.25);
  animation: wander var(--d, 14s) ease-in-out var(--w, 0s) infinite alternate, glimmer 3.4s ease-in-out var(--w, 0s) infinite;
}
.sky i:nth-of-type(1) { left: 8%;  top: 30%; --x: 60px;  --y: -80px;  --d: 13s; }
.sky i:nth-of-type(2) { left: 22%; top: 72%; --x: -40px; --y: -110px; --d: 17s; --w: -4s; }
.sky i:nth-of-type(3) { left: 46%; top: 18%; --x: 90px;  --y: 50px;   --d: 19s; --w: -9s; }
.sky i:nth-of-type(4) { left: 64%; top: 62%; --x: -70px; --y: -60px;  --d: 15s; --w: -2s; }
.sky i:nth-of-type(5) { left: 82%; top: 36%; --x: 50px;  --y: 90px;   --d: 21s; --w: -12s; }
.sky i:nth-of-type(6) { left: 92%; top: 80%; --x: -90px; --y: -40px;  --d: 16s; --w: -6s; }
.sky i:nth-of-type(7) { left: 36%; top: 88%; --x: 70px;  --y: -70px;  --d: 18s; --w: -10s; }

@keyframes twinkle { from { opacity: 0.3; } to { opacity: 0.95; } }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-6vmax, 4vmax, 0) scale(1.15); } }
@keyframes wander { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--x, 40px), var(--y, -60px), 0); } }
@keyframes glimmer { 0%, 100% { opacity: 0.15; } 45%, 60% { opacity: 1; } }
@keyframes shimmer { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* ---- header: the brand and "Free of charge" on the left; Sign in, then the menu button, on the
   right. The section links live in the menu at every width (the owner, 2026-10-09). ---- */
.top {
  position: relative; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 1.1rem var(--gutter);
  max-width: 76rem; margin-inline: auto;
}
.brand-group { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem 0.8rem; min-width: 0; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; font-family: var(--display); font-weight: 700; font-size: 1.4rem; text-decoration: none; color: var(--moon); }
.brand svg { flex-shrink: 0; filter: drop-shadow(0 0 10px rgba(255, 183, 3, 0.7)); }
.brand svg rect { fill: transparent; }
.top-actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.menu-btn {
  display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; cursor: pointer; font: inherit;
  color: var(--moon); background: var(--glass); border: 2px solid rgba(255, 255, 255, 0.45); border-radius: 999px;
  transition: background-color 180ms ease, border-color 180ms ease;
  touch-action: manipulation;
}
.menu-btn:hover { background: var(--glass-strong); border-color: var(--amber-soft); }
.menu-btn:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.menu-btn .icon-close, .menu-btn[aria-expanded='true'] .icon-open { display: none; }
.menu-btn[aria-expanded='true'] .icon-close { display: block; }
.menu {
  position: absolute; top: calc(100% - 0.4rem); right: var(--gutter);
  width: min(20rem, calc(100vw - 2 * var(--gutter)));
  padding: 0.5rem; border-radius: 20px;
  background: rgba(14, 17, 52, 0.97); border: 1px solid var(--hairline);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 24px 60px -18px rgba(0, 0, 0, 0.75);
}
.menu[hidden] { display: none; }
.menu ul { list-style: none; padding: 0; display: grid; gap: 0.15rem; }
.menu a { display: block; min-height: 48px; padding: 0.75rem 1rem; border-radius: 14px; text-decoration: none; font-weight: 700; color: var(--moon); }
.menu a:hover { background: var(--glass-strong); color: var(--amber-soft); }
.menu a:focus-visible { outline-offset: -3px; border-radius: 14px; }
.menu a[aria-current='page'] { color: var(--amber-soft); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* ---- the app bar (index.html), on phones only: one line and a button to /app, the installed app's
   start page, directly under the header, in the footer's colours. Hidden here; shown by the phones
   block at the end; hidden again in the installed app itself. ---- */
.app-bar {
  display: none; align-items: center; justify-content: space-between; gap: 0.9rem;
  padding: 0.7rem var(--gutter);
  background: rgba(6, 8, 28, 0.7); border-block: 1px solid var(--hairline);
}
.app-bar p { font-size: 1rem; line-height: 1.35; font-weight: 700; }
.app-bar .btn { flex-shrink: 0; }
/* ---- buttons ---- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-block; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  color: var(--moon); background: var(--glass); border: 2px solid rgba(255, 255, 255, 0.45); border-radius: 999px;
  padding: 0.8em 1.6em; min-height: 48px;
  transition: transform 180ms ease, box-shadow 220ms ease, background-color 180ms ease, border-color 180ms ease;
  touch-action: manipulation;
}
.btn:hover { transform: translateY(-2px); background: var(--glass-strong); border-color: var(--amber-soft); }
.btn:active { transform: scale(0.98); }
.btn.primary {
  color: var(--go-ink); border-color: transparent;
  background: linear-gradient(180deg, #8af5b6 0%, var(--go) 58%, #22c46f 100%);
  box-shadow: 0 0 0 1px rgba(184, 245, 207, 0.5), 0 10px 34px -6px rgba(62, 220, 132, 0.55);
}
.btn.primary:hover { background: linear-gradient(180deg, #a2f8c6 0%, #52e594 58%, #2ccf79 100%); border-color: transparent; box-shadow: 0 0 0 1px rgba(184, 245, 207, 0.8), 0 14px 46px -4px rgba(62, 220, 132, 0.8); }
/* a slow glint crosses the main button */
.btn.primary::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.65) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: glint 5.5s ease-in-out infinite;
}
@keyframes glint { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.btn.small { padding: 0.5em 1.1em; min-height: 44px; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--amber-soft); outline-offset: 4px; border-radius: 6px; }
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 999px; }

/* ---- glass surfaces ---- */
.tablet, .three article, .memory-card, .quiet-card, .free-card, .faq details, .figures li, .note, .table-wrap table {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04));
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 24px 60px -30px rgba(0, 0, 0, 0.6);
}

/* ---- hero ---- */
.hero {
  display: grid; gap: 3rem; align-items: center;
  max-width: 76rem; margin-inline: auto; padding: clamp(2rem, 6vw, 5rem) var(--gutter) clamp(3rem, 8vw, 6rem);
}
.hero-copy h1 { margin: 0 0 1.4rem; max-width: 13ch; }
.cta-row { display: flex; gap: 0.9rem; flex-wrap: wrap; margin: 2rem 0 1rem; }

.hero-demo { display: grid; gap: 1rem; justify-items: center; scroll-margin-top: 1rem; }
.live-widget { width: 100%; min-height: 420px; display: grid; justify-items: center; }
.tablet {
  width: min(100%, 25rem); border-radius: 34px;
  padding: 1.75rem 1.4rem 1.5rem; display: grid; justify-items: center; gap: 1.6rem;
}
.tablet-greeting { font-family: var(--display); font-weight: 700; font-size: 1.6rem; text-align: center; }
.lamp {
  position: relative;
  width: 160px; height: 160px; border-radius: 50%; color: var(--ink);
  background: radial-gradient(circle at 38% 32%, #fff6d2 0%, #ffd34d 34%, var(--amber) 62%, #f39200 100%);
  display: grid; place-items: center; text-align: center; font-family: var(--display); font-weight: 700; font-size: 1.25rem;
  box-shadow: 0 0 40px 6px rgba(255, 196, 60, 0.6), 0 0 120px 30px rgba(255, 183, 3, 0.28);
  animation: breathe 3.6s ease-in-out infinite;
}
.lamp span { max-width: 7ch; position: relative; z-index: 1; }
.lamp::before, .lamp::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(255, 224, 138, 0.7);
  animation: ring 3.6s ease-out infinite;
}
.lamp::after { animation-delay: 1.8s; }
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 40px 6px rgba(255, 196, 60, 0.55), 0 0 120px 30px rgba(255, 183, 3, 0.25); }
  50% { box-shadow: 0 0 56px 12px rgba(255, 210, 90, 0.8), 0 0 160px 50px rgba(255, 183, 3, 0.38); }
}
@keyframes ring { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.7); opacity: 0; } }
.bubbles { display: grid; gap: 0.6rem; width: 100%; }
.bubble { font-size: 1rem; line-height: 1.4; padding: 0.7rem 0.95rem; border-radius: 18px; max-width: 100%; }
.bubble.buddy { background: rgba(255, 224, 138, 0.14); border: 1px solid rgba(255, 224, 138, 0.3); font-weight: 700; border-bottom-left-radius: 6px; }
.bubble.you { color: var(--moon-soft); font-style: italic; text-align: right; }
.caption { font-size: 0.95rem; color: var(--moon-soft); text-align: center; }

/* ---- bands and splits ---- */
.band, .split, .steps-section, .faq, .closing { max-width: 76rem; margin-inline: auto; padding: clamp(2.5rem, 7vw, 5.5rem) var(--gutter); }
.band.dark {
  max-width: none;
  background: linear-gradient(180deg, rgba(6, 8, 28, 0.72), rgba(6, 8, 28, 0.55));
  border-block: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(255, 224, 138, 0.6), transparent) 1;
}
.band.dark > * { max-width: 76rem; margin-inline: auto; }
.band.dark h2 { color: var(--amber-soft); }
.band.dark .fine { margin-top: 1.5rem; }
.three { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 1.75rem; }
.three article { padding: 1.6rem 1.5rem 1.7rem; transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease; }
.three article:hover { transform: translateY(-4px); border-color: rgba(255, 224, 138, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 24px 70px -28px rgba(255, 183, 3, 0.45); }
.three article p { max-width: none; color: var(--moon-soft); }
/* a small four-point sparkle marks each card and each promise */
.three h3::before, .checks li::before {
  content: ''; display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.5em;
  background: var(--gold);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

.split { display: grid; gap: 3rem; align-items: start; }
.split p + p { margin-top: 1rem; }
.split > div > p { color: var(--moon-soft); }
.memory-card, .quiet-card { padding: 1.75rem; }
.memory-title { font-family: var(--display); font-weight: 700; font-size: 1.25rem; margin-bottom: 0.9rem; color: var(--amber-soft); }
.memory-card ul { list-style: none; padding: 0; display: grid; gap: 0.7rem; font-size: 1rem; }
.memory-card li { color: var(--moon-soft); }
.memory-card strong { color: var(--moon); }
.checks { list-style: none; padding: 0; display: grid; gap: 1rem; }
.checks li { padding-left: 1.9rem; position: relative; color: var(--moon-soft); }
.checks li strong { color: var(--moon); }
.checks li::before { position: absolute; left: 0; top: 0.42em; margin: 0; width: 1rem; height: 1rem; }
.quote { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.35rem; line-height: 1.45; }
.quote-who { margin-top: 1rem; font-size: 0.95rem; color: var(--moon-soft); }

/* ---- steps: three lamps on a line ---- */
.steps { list-style: none; padding: 0; display: grid; gap: 1.75rem; margin: 1.75rem 0 2.25rem; position: relative; }
.steps::before { content: ''; position: absolute; left: 1.35rem; top: 1.5rem; bottom: 1.5rem; border-left: 2px dashed rgba(255, 224, 138, 0.4); }
.steps li { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; position: relative; }
.steps p { color: var(--moon-soft); }
.num {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; color: var(--ink);
  background: radial-gradient(circle at 38% 32%, #fff6d2, var(--amber) 70%);
  box-shadow: 0 0 22px 2px rgba(255, 196, 60, 0.6);
  font-family: var(--display); font-weight: 700; font-size: 1.2rem; display: grid; place-items: center;
}

/* ---- free of charge ---- */
.free-card { padding: clamp(1.5rem, 4vw, 2.25rem); max-width: 42rem; display: grid; gap: 0.8rem; border-color: rgba(111, 240, 166, 0.4); }
.free-lead { font-family: var(--display); font-weight: 700; font-size: 1.6rem; line-height: 1.25; }
.free-card p:not(.free-lead) { color: var(--moon-soft); }

/* ---- faq ---- */
.faq details { padding: 0.15rem 1.4rem; max-width: 48rem; margin-top: 0.8rem; border-radius: 20px; }
.faq summary { cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 1.2rem; padding: 1rem 2rem 1rem 0; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0; top: 0.75rem; font-size: 1.6rem; line-height: 1; color: var(--amber-soft); transition: transform 200ms ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details[open] { border-color: rgba(255, 224, 138, 0.45); }
.faq details p { padding-bottom: 1.1rem; color: var(--moon-soft); }
.faq > h1 { margin-bottom: 1.25rem; }

.closing { text-align: center; display: grid; gap: 1.75rem; justify-items: center; position: relative; }
.closing::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: min(90vw, 44rem); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 183, 3, 0.2), transparent 70%); z-index: -1; pointer-events: none;
}
.closing .cta-row { justify-content: center; margin: 0; }
.closing h2 { max-width: 18ch; font-size: clamp(2.2rem, 5vw, 3.6rem); }

.foot { background: rgba(6, 8, 28, 0.7); border-top: 1px solid var(--hairline); padding: 2.5rem var(--gutter); font-size: 0.95rem; color: var(--moon-soft); }
.foot strong { color: var(--moon); }
.foot p { margin-bottom: 0.5rem; max-width: none; }
.foot nav { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 1rem; }

/* ---- sections rise gently into view (only when scripting is on) ---- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---- the science page: a long article, set for reading ---- */
.article { max-width: 54rem; margin-inline: auto; padding: clamp(1.5rem, 5vw, 3.5rem) var(--gutter) clamp(2.5rem, 7vw, 5rem); }
.article section { margin-top: clamp(2.5rem, 6vw, 4rem); }
.article p + p, .article ul + p, .article .table-wrap + p { margin-top: 1rem; }
.article h3 { margin-top: 1.75rem; }
.article-head h1 { max-width: 16ch; margin-bottom: 1.25rem; }
.article-head .fine { margin-top: 1rem; }
.crumbs { font-size: 0.95rem; color: var(--moon-soft); margin-bottom: 1.5rem; }
.plain { display: grid; gap: 0.5rem; margin-top: 1rem; max-width: var(--measure); }
.plain li::marker { color: var(--amber); }
.ref { font-size: 0.85em; font-weight: 700; text-decoration: none; padding: 0 0.1em; }
.ref:hover { text-decoration: underline; }

.figures { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-top: 1.5rem; }
.figures li { padding: 1.4rem 1.4rem 1.5rem; }
.figures li p:last-child { color: var(--moon-soft); }
.figure-n { font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 5vw, 2.9rem); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 0.45rem; text-wrap: balance; }

.table-wrap { overflow-x: auto; margin-top: 1.25rem; }
table { border-collapse: separate; border-spacing: 0; width: 100%; max-width: 46rem; overflow: hidden; font-size: 1rem; }
.table-wrap table { border-radius: 18px; }
caption { text-align: left; font-weight: 700; padding: 0 0.75rem 0.7rem; color: var(--amber-soft); }
th, td { text-align: left; padding: 0.8rem 1rem; border-top: 1px solid var(--hairline); vertical-align: top; }
thead th { border-top: none; background: rgba(255, 255, 255, 0.1); font-family: var(--display); font-weight: 700; }
tbody th { font-weight: 400; }
td { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--amber-soft); }

.note { border-left: 6px solid var(--amber); padding: 1.6rem 1.6rem 1.8rem; }
.sources { display: grid; gap: 0.9rem; margin-top: 1rem; max-width: 46rem; font-size: 1rem; color: var(--moon-soft); }
.sources li:target { background: rgba(255, 183, 3, 0.18); outline: 8px solid rgba(255, 183, 3, 0.18); border-radius: 4px; color: var(--moon); }
.sources a { overflow-wrap: anywhere; }
.sources + .fine { margin-top: 1.5rem; }

@media (min-width: 900px) {
  .hero { grid-template-columns: 1.1fr 0.9fr; }
  .hero .cta-row { display: none; }   /* the widget is beside the copy: no link down to it */
  .split { grid-template-columns: 1fr 1fr; }
}

/* Stillness for those who ask for it: the sky stays, nothing moves. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .sky i { opacity: 0.7; }
  .lamp::before, .lamp::after { display: none; }
}

/* Browsers without glass: a solid panel keeps the text readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tablet, .three article, .memory-card, .quiet-card, .free-card, .faq details, .figures li, .note, .table-wrap table { background: #1c2158; }
}

/* phones: a smaller brand and Sign in, so the header stays one row (the label wraps under the
   brand on the narrowest screens) */
@media (max-width: 640px) {
  .brand { font-size: 1.25rem; gap: 0.5rem; }
  .top-actions .btn.small { font-size: 1rem; padding: 0.5em 0.95em; }
  .aurora { filter: blur(60px); }
  td { white-space: normal; }
  /* the app bar, only once the widget has found it due (web/src/widget/appBar.ts: ten minutes into a call,
     a keep or a sign-in; never at load, so the hero stays at the top), and its button the size of Sign in */
  .app-bar.is-due { display: flex; }
  .app-bar .btn.small { font-size: 1rem; padding: 0.5em 0.95em; }
}

/* the installed app, should it show this page: it is the app already */
@media (display-mode: standalone) {
  .app-bar { display: none; }
}