/* Studio frame: header, Ursa sub-nav, footers, theme toggle, phone Menu.
   Ported from canvas R2SealHome.css and R2Ursa.css (header, sub-nav, footer rules). */

/* On the Ursa page the frame sits on Dusk paper (R2Ursa.css .r2u-studio uses the Dusk tokens). */
body[data-page="ursa"], body[data-skin="ursa"] {
  --paper: var(--bg);
  --line: var(--line-u);
  --ink: var(--ink-u);
  --muted: var(--muted-u);
  background: var(--bg);
  color: var(--ink-u);
}

/* Frame lists: no bullets (page content lists keep theirs). */
.site-nav ul, .ursa-subnav ul, .foot-links { list-style: none; margin: 0; padding: 0; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30; /* above the sub-nav, so the open Menu panel covers it */
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
/* Under a sticky Ursa sub-nav the header scrolls away and the sub-nav sticks. */
.site-header:has(+ .ursa-subnav) { position: relative; }

.site-bar { display: flex; align-items: center; gap: 24px; }
.site-header .site-bar { min-height: 72px; }

.site-home {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: var(--ink);
  text-decoration: none;
}
.site-seal { width: 40px; height: 40px; flex: none; color: var(--vermilion); }
.night-u .site-seal { color: var(--seal); }
.site-wm {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 27px;
  line-height: 1;
  letter-spacing: -0.008em;
  white-space: nowrap;
}

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 36px; font-size: 15px; font-weight: 500; }
.site-nav a {
  display: inline-block;
  padding: 6px 0;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
}
html.js .site-nav a { transition: border-color .25s; }
.site-nav a:hover, .site-nav a[aria-current] { border-bottom-color: var(--ink); }

/* ---------- pill buttons: theme toggle, Menu ---------- */
.theme-toggle, .menu-btn {
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.theme-toggle svg, .menu-btn svg { width: 16px; height: 16px; flex: none; }
.menu-btn { font-size: 15px; padding: 0 16px; }
.theme-toggle:hover, .menu-btn:hover { border-color: var(--ink); }

/* The toggle needs JS, so it shows only with html.js; the Menu stays hidden without JS. */
.theme-toggle { display: none; }
html.js .site-header .theme-toggle { display: inline-flex; }

/* ---------- Ursa sub-nav ---------- */
.ursa-subnav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--line-u);
  color: var(--ink-u);
}
.ursa-subnav .site-bar { min-height: 60px; justify-content: space-between; }
.ursa-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink-u); text-decoration: none; }
.ursa-brand-name {
  font-family: var(--font-ursa);
  font-weight: 400;
  font-size: 23px;
  line-height: 1;
  letter-spacing: -0.015em;
}
.r2u-count {
  padding-left: 12px;
  border-left: 1px solid var(--line-u);
  font-family: var(--font-system);
  font-size: 12px;
  line-height: 20px;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
}
.ursa-subnav ul { display: flex; gap: 6px; font-family: var(--font-system); font-size: 15px; font-weight: 400; }
.ursa-subnav ul a {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  color: var(--muted-u);
  text-decoration: none;
}
.ursa-subnav ul a:hover { color: var(--ink-u); }
.ursa-subnav ul a[aria-current="page"] { background: var(--accentSoft); color: var(--ink-u); }

/* Tracker Dipper (static here; dipper.ts drives the classes). */
.r2u-trk { width: 84px; height: 48px; overflow: visible; flex: none; }
.r2u-tg {
  fill: none; stroke: var(--faint); stroke-opacity: .55; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .1 9;
}
.r2u-tl {
  fill: none; stroke: var(--accent); stroke-opacity: .8; stroke-width: 3.6; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.r2u-tl.on { stroke-dashoffset: 0; }
.r2u-ts {
  fill: var(--ink-u); fill-opacity: .24;
  transform-box: fill-box; transform-origin: center; transform: scale(.62);
}
.r2u-ts.on { fill: var(--mem); fill-opacity: 1; transform: none; }
.r2u-th { fill: none; stroke: var(--mem); stroke-width: 2.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.r2u-trk.is-done .r2u-tl { stroke-opacity: .95; }
html.js .r2u-tl { transition: stroke-dashoffset 1.6s cubic-bezier(.42, 0, .58, 1); }
html.js .r2u-ts { transition: fill .9s ease, fill-opacity .9s ease, transform 1s cubic-bezier(.3, 1.7, .45, 1); }
html.js .r2u-th.on { animation: r2u-halo 3.4s ease-out infinite; }
@keyframes r2u-halo { 0% { opacity: .75; transform: scale(.45); } 100% { opacity: 0; transform: scale(1.7); } }

/* ---------- footers ---------- */
.site-footer {
  padding: 64px 0 56px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}
.foot-top { display: flex; align-items: center; justify-content: space-between; gap: 24px 32px; flex-wrap: wrap; }
.foot-links { display: flex; flex-wrap: wrap; gap: 12px 32px; font-size: 16px; font-weight: 600; }
.foot-links a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.foot-links a:hover { border-bottom-color: var(--ink); }
.site-footer .site-seal { width: 34px; height: 34px; }
.site-footer .site-wm { font-size: 26px; }
.foot-small {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 44px; font-size: 14px; color: var(--muted);
}
.foot-theme { display: none; margin-top: 32px; }

/* Ursa footer: a Dusk night panel with the product tag (R2Ursa.css .r2u-foot). */
.ursa-footer {
  padding: 72px 0 64px;
  font-size: 14px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--muted-u);
  border-top-color: var(--line-u);
}
.ursa-footer .foot-top { padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid var(--line-u); flex-wrap: nowrap; }
.ursa-footer .site-home { color: var(--ink-u); }
.ursa-footer .site-seal { width: 32px; height: 32px; }
.ursa-footer .site-wm { font-size: 23px; }
.foot-id { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; }
.product-tag {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 5px 14px 5px 10px;
  border: 1px solid var(--line-u); border-radius: 999px;
  color: var(--ink-u); text-decoration: none;
  font-family: var(--font-ursa); font-size: 16px; line-height: 1.2; letter-spacing: -0.01em;
}
.product-tag svg { width: 44px; height: 26px; flex: none; overflow: visible; }
.product-tag path {
  fill: none; stroke: var(--accent); stroke-opacity: .72; stroke-width: 1.1;
  vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round;
}
.product-tag circle { fill: var(--mem); transform-box: fill-box; transform-origin: center; transform: scale(1.5); }
.ursa-footer .foot-links { gap: 8px 28px; font-family: var(--font-system); font-size: 15px; font-weight: 400; }
.ursa-footer .foot-links a { color: var(--ink-u); border-bottom: 0; padding-bottom: 0; }
.ursa-footer .foot-links a:hover { text-decoration: underline; }
.foot-notes { font-family: var(--font-system); }
.foot-notes p + p { margin-top: 8px; }
.foot-notes .fx { color: var(--ink-u); }
.ursa-footer .theme-toggle { border-color: var(--line-u); color: var(--ink-u); }
.ursa-footer .theme-toggle:hover { border-color: var(--ink-u); }

/* ---------- studio breakpoints ---------- */
@media (max-width: 860px) {
  .site-nav ul { gap: 28px; }
}

/* ---------- phone ---------- */
@media (max-width: 700px) {
  .site-header .site-bar { min-height: 58px; gap: 8px 12px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
  .site-seal { width: 34px; height: 34px; }
  .site-wm { font-size: 23px; }
  .site-home { gap: 11px; }

  /* Without JS the nav links wrap under the logo. */
  .site-nav { flex-basis: 100%; margin-left: 0; }
  .site-nav ul { flex-wrap: wrap; gap: 4px 24px; }

  /* With JS they collapse behind Menu. */
  html.js .site-header .site-bar { flex-wrap: nowrap; padding-top: 0; padding-bottom: 0; }
  html.js .site-header .theme-toggle { display: none; }
  html.js .menu-btn { display: inline-flex; margin-left: auto; }
  html.js .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 8px 20px 16px;
  }
  html.js .site-nav.is-open { display: block; }
  html.js .site-nav ul { flex-direction: column; gap: 0; font-size: 17px; }
  html.js .site-nav a { padding: 10px 0; }

  .ursa-subnav .site-bar { min-height: 54px; gap: 8px; }
  .r2u-trk { width: 70px; height: 40px; }
  .ursa-brand-name, .r2u-count { display: none; }
  .ursa-subnav ul { gap: 2px; font-size: 14px; }
  .ursa-subnav ul a { padding: 4px 10px; }

  .site-footer { padding: 48px 0 40px; }
  .foot-top, .ursa-footer .foot-top { flex-direction: column; align-items: flex-start; }
  .foot-small { flex-direction: column; margin-top: 32px; }
  .ursa-footer { padding: 56px 0 48px; }
  .foot-id { gap: 14px 16px; }
  html.js .foot-theme { display: block; }
  html.js .foot-theme .theme-toggle { display: inline-flex; }
}

/* =====================================================================
   Studio pages: shared type (home, about, 404). Ported from R2SealHome.css (.rsp-*).
   ===================================================================== */
.sec-mark {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 40px;
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
.sec-mark b { font-weight: 700; color: var(--ink); }
.sec-mark::after { content: ""; width: 56px; height: 1px; background: currentColor; opacity: .6; }
.st-display {
  font-family: var(--font-display); font-weight: 400;
  font-size: 124px; line-height: .98; letter-spacing: -0.022em;
}
.st-display .st-ln { display: block; }
.st-h2 { font-family: var(--font-display); font-weight: 400; font-size: 76px; line-height: 1.02; letter-spacing: -0.018em; }
.st-lede { max-width: 640px; font-size: 23px; line-height: 1.55; color: var(--muted); }
.st-body { font-size: 20px; line-height: 1.65; color: var(--muted); }
.st-link {
  display: inline-flex; align-items: center; gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1.5px solid currentColor;
  font-size: 17px; font-weight: 700; text-decoration: none;
}
.st-ar { display: inline-block; }
html.js .st-ar { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
a:hover > .st-ar { transform: translateX(6px); }

/* ---------- studio home ---------- */
.home-sec { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 120px 0; }
.home-sec > .wrap { position: relative; z-index: 1; width: 100%; max-width: 1120px; }

/* Margin seal tracker (design note §2): a seal and a counter; the ring turns the current word under the tick. */
.st-track { position: sticky; top: 104px; z-index: 15; height: 0; display: none; }
html.js .st-track { display: block; }
.st-tin {
  position: absolute; right: 28px; top: 0; width: 136px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.seal-tracker { width: 136px; height: 151px; overflow: visible; }
/* Header slot (studio-header partial): empty and hidden unless seal.ts mounts a seal (home, About); shown 701–1320 px. */
.header-track { display: none; align-items: center; margin-left: auto; }
.header-track .seal-tracker { width: 42px; height: 46px; }
.seal-tick, .seal-rules, .seal-dots, .seal-s { fill: var(--vermilion); }
.seal-disc { fill: var(--paper); }
.seal-word { fill: var(--ink); fill-opacity: .36; }
.seal-word.is-lit { fill: var(--vermilion); fill-opacity: 1; }
.seal-tracker .seal-ring { transform-box: fill-box; transform-origin: center; }
html.js .seal-tracker.is-ready .seal-ring { transition: transform 1.3s cubic-bezier(.6, 0, .2, 1); }
html.js .seal-tracker.is-ready .seal-word { transition: fill .6s ease, fill-opacity .6s ease; }
.st-count {
  /* A paper chip so the counter stays readable while the tracker passes over the night panels. */
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--paper);
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.st-count span { color: var(--ink); }

/* 01 hero */
.home-hero { min-height: 880px; overflow: hidden; }
.home-hero::before, .ab-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .27  0 0 0 0 .18  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.home-hero .st-display { max-width: 1000px; }
.home-hero .st-lede { margin-top: 48px; }
.home-blind {
  position: absolute; right: -300px; top: calc(50% + 80px); transform: translateY(-50%);
  width: 640px; height: 640px; max-width: none;
  color: var(--ink); opacity: .07; pointer-events: none;
}
.home-blind .blind-ring { transform-box: view-box; transform-origin: 100px 100px; }

/* 02 suite */
.home-suite { min-height: 820px; background: var(--paper2); }
.home-split {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px;
  align-items: end; padding-bottom: 8px;
}
.home-points {
  list-style: none; margin: 96px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px;
}
.home-points li { position: relative; padding-top: 36px; }
.home-points li::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.5px;
  background: var(--ink); transform-origin: left center;
}
.home-points svg {
  width: 40px; height: 40px; margin-bottom: 26px;
  fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.home-points h3 {
  margin: 0 0 14px;
  font-family: var(--font-display); font-weight: 400;
  font-size: 34px; line-height: 1.1; letter-spacing: -0.01em;
}
.home-points p { font-size: 18px; line-height: 1.6; color: var(--muted); }

/* 03 Ursa, in its own world (Dusk night, .night-u) */
.home-ursa { min-height: 880px; overflow: hidden; font-family: var(--font-system); }
.home-field { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.home-field circle { fill: var(--ink-u); }
.home-ursa .sec-mark { font-family: var(--font-text); color: var(--muted-u); }
.home-ursa .sec-mark b { color: var(--ink-u); }
.home-ugrid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
.home-app { display: flex; align-items: center; gap: 18px; margin-bottom: 36px; }
.home-app img { width: 80px; height: 80px; border-radius: 18px; flex: none; }
.home-uname { font-family: var(--font-ursa); font-weight: 400; font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; }
.home-uline { font-family: var(--font-ursa); font-weight: 400; font-size: 56px; line-height: 1.08; letter-spacing: -0.02em; }
.home-unote { max-width: 460px; margin-top: 28px; font-size: 17px; line-height: 1.6; color: var(--muted-u); }
.home-ubtn, .home-cbtn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 50px; margin-top: 40px; padding: 0 26px;
  border-radius: 999px;
  font-size: 17px; font-weight: 600; text-decoration: none;
}
.home-ubtn { background: var(--accent); color: var(--onAccent); }
.home-usave { margin-top: 28px; }
.home-usave .st-link { color: var(--ink-u); }
.home-dipcol { display: flex; justify-content: center; }
.home-dip { width: min(100%, 400px); height: auto; overflow: visible; }
.home-dip-phone { display: none; }
.dip-line { fill: none; stroke: var(--accent); stroke-opacity: .55; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dip-star { fill: var(--mem); transform-box: fill-box; transform-origin: center; }
.dip-ptr { fill: none; stroke: var(--accent); stroke-opacity: .6; stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 0 5.2; }
.polaris { transform-box: fill-box; transform-origin: center; }
.polaris-halo { fill: #F6E2B0; fill-opacity: .5; filter: blur(4px); transform-box: fill-box; transform-origin: center; }
/* Mask over the dotted pointer: one solid white stroke, so at rest the whole pointer shows; the follow-the-pointers
   sequence (motion block below) dashes it to reveal the dots from S5 upward. */
.ptr-reveal { fill: none; stroke: #fff; stroke-width: 10; stroke-linecap: round; }
.polaris-core { fill: #FBEFD2; }

/* 04 Chat, in its own world (Chat green) */
.home-chat {
  --c-bg: #3D6B5C; --c-ink: #FAFAF8; --c-mut: #D9E5DF; --focus: #FAFAF8;
  min-height: 700px; overflow: hidden;
  background: var(--c-bg); color: var(--c-ink);
  font-family: var(--font-system);
}
.home-chat .sec-mark { font-family: var(--font-text); color: var(--c-mut); }
.home-chat .sec-mark b { color: var(--c-ink); }
.home-cgrid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; }
.home-ctile {
  display: flex; align-items: center; justify-content: center;
  width: 96px; height: 96px; margin-bottom: 32px;
  border-radius: 22px; background: #FAFAF8;
}
.home-ctile img { width: 72px; height: 72px; }
.home-cname { margin-bottom: 14px; font-size: 20px; font-weight: 600; letter-spacing: -0.005em; }
.home-cline { max-width: 620px; font-size: 44px; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }
.home-cbtn { background: #FAFAF8; color: #2F5447; }
.home-files { display: grid; gap: 14px; }
.home-file {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 34px; align-items: center; gap: 18px;
  padding: 20px 22px;
  border: 1px solid rgba(250, 250, 248, .18); border-radius: 16px;
  background: rgba(250, 250, 248, .08);
}
.home-file svg { fill: none; stroke: #FAFAF8; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.home-bars i { display: block; height: 8px; border-radius: 4px; background: rgba(250, 250, 248, .34); }
.home-bars i + i { width: 62%; margin-top: 9px; background: rgba(250, 250, 248, .18); }
.home-ok circle { stroke-opacity: .6; }
.home-bars i { transform-origin: left center; }

/* 05 why: a studio night panel in dark mode, a light paper panel in light mode (founder, 2026-10-07;
   paper, not paper2, keeps the vermilion "Why Sovernity" link at AA: 4.8:1 vs 4.36:1).
   The light override hands the studio tokens back from the page (`inherit`) instead of the .night values. */
.home-why { min-height: 800px; overflow: hidden; }
:root[data-theme="light"] .home-why.night {
  --paper: inherit; --ink: inherit; --muted: inherit; --line: inherit; --vermilion: inherit; --focus: inherit;
  color-scheme: light; background: var(--paper); color: var(--ink);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .home-why.night {
    --paper: inherit; --ink: inherit; --muted: inherit; --line: inherit; --vermilion: inherit; --focus: inherit;
    color-scheme: light; background: var(--paper); color: var(--ink);
  }
}
.home-wgrid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; align-items: center; }
.home-why .st-h2 { font-size: 96px; line-height: 1; }
.home-why .st-body { max-width: 640px; margin-top: 40px; }
.home-why .st-link { margin-top: 44px; color: var(--vermilion); }
.home-stamp { justify-self: end; width: 100%; max-width: 380px; color: var(--vermilion); transform: rotate(-7deg); }
.home-stamp svg { width: 100%; height: auto; overflow: visible; }
.home-stamp .stamp-ring { transform-box: view-box; transform-origin: 100px 100px; }

/* ---------- 404 ---------- */
.nf { padding: 120px 0 140px; }
.nf-seal { width: 96px; height: 96px; margin-bottom: 48px; color: var(--vermilion); }
.nf .st-body { margin-top: 24px; }
.nf-links { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px 40px; }

/* ---------- motion: every state above is the resting state; only html.js starts an animation ---------- */
@keyframes st-rise { from { transform: translateY(30px); } to { transform: none; } }
@keyframes st-fadeup { from { opacity: .35; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes st-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes st-kindle { 0% { transform: scale(.6); } 65% { transform: scale(1.14); } 100% { transform: scale(1); } }
/* Follow the pointers: the pointer stars lift, the dotted pointer reveals upward, the north star blooms, then twinkles.
   Timing lives in the motion block (--ptr-d and the --t-* offsets). */
@keyframes st-point {
  0%, 100% { scale: 1; filter: none; }
  45% { scale: 1.24; filter: brightness(1.2) drop-shadow(0 0 3px #F6E2B0); }
}
@keyframes st-ptr-reveal { from { stroke-dashoffset: 1.25; } to { stroke-dashoffset: .05; } }
@keyframes st-pol-lift { from { opacity: .35; } to { opacity: 1; } }
/* One bloom: swells to its peak at 55 %, then eases back without overshoot (the animation itself runs linear). */
@keyframes st-pol-bloom {
  0% { transform: scale(.6); fill-opacity: .3; animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  55% { transform: scale(1.45); fill-opacity: .8; animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  100% { transform: scale(1); fill-opacity: .5; }
}
@keyframes st-twinkle-o { 0%, 100% { opacity: 1; } 50% { opacity: .9; } }
@keyframes st-twinkle-s { 0%, 100% { scale: 1; } 30% { scale: 1.015; } 70% { scale: .985; } }
@keyframes st-settle { from { opacity: .4; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes st-fill { from { transform: scaleX(0); } to { transform: none; } }
@keyframes st-rule { from { transform: scaleX(.12); } to { transform: scaleX(1); } }
@keyframes st-stamp {
  0% { opacity: .25; transform: rotate(-16deg) scale(1.22); }
  55% { opacity: 1; transform: rotate(-6deg) scale(.96); }
  75% { transform: rotate(-7deg) scale(1.015); }
  100% { opacity: 1; transform: rotate(-7deg) scale(1); }
}
@keyframes st-press { 0% { transform: scale(1); } 30% { transform: scale(.92); } 100% { transform: scale(1); } }
@keyframes st-turn { to { transform: rotate(360deg); } }
@keyframes st-spin { to { transform: rotate(-360deg); } }
@keyframes st-glow { 0%, 100% { stroke-opacity: .55; } 50% { stroke-opacity: .8; } }

@media (prefers-reduced-motion: no-preference) {
  html.js .seal-tracker.is-stamped { animation: st-press .75s cubic-bezier(.3, .7, .2, 1); }
  html.js .home-blind .blind-ring { animation: st-spin 140s linear infinite; }

  html.js .home-hero .st-ln { animation: st-rise 1.1s cubic-bezier(.2, .7, .2, 1) both; }
  html.js .home-hero .st-ln:nth-child(2) { animation-delay: .12s; }
  html.js .home-hero .st-ln:nth-child(3) { animation-delay: .24s; }
  html.js .home-hero .st-lede { animation: st-fadeup 1.1s cubic-bezier(.2, .7, .2, 1) .45s both; }

  html.js .home-sec.in:not(.home-hero) .sec-mark { animation: st-fadeup .9s cubic-bezier(.2, .7, .2, 1) both; }
  html.js .home-sec.in:not(.home-hero) .st-h2 { animation: st-rise 1s cubic-bezier(.2, .7, .2, 1) .08s both; }
  html.js .home-suite.in .home-points li::before { animation: st-rule 1.2s cubic-bezier(.6, 0, .2, 1) both; }
  html.js .home-suite.in .home-points li { animation: st-rise 1s cubic-bezier(.2, .7, .2, 1) both; }
  html.js .home-suite.in .home-points li:nth-child(2),
  html.js .home-suite.in .home-points li:nth-child(2)::before { animation-delay: .18s; }
  html.js .home-suite.in .home-points li:nth-child(3),
  html.js .home-suite.in .home-points li:nth-child(3)::before { animation-delay: .36s; }

  html.js .home-dipcol.is-live .dip-line { animation: st-glow 6s ease-in-out infinite; }
  html.js .home-ursa.in .dip-star { animation: st-kindle 1.2s ease-out backwards; }
  html.js .home-ursa.in .dip-star.s1 { animation-delay: .1s; }
  html.js .home-ursa.in .dip-star.s2 { animation-delay: .25s; }
  html.js .home-ursa.in .dip-star.s3 { animation-delay: .4s; }
  html.js .home-ursa.in .dip-star.s4 { animation-delay: .55s; }
  html.js .home-ursa.in .dip-star.s5 { animation-delay: .7s; }
  html.js .home-ursa.in .dip-star.s6 { animation-delay: .85s; }
  html.js .home-ursa.in .dip-star.s7 { animation-delay: 1s; }
  /* Follow the pointers, once per visit (home.ts): `.is-live` while the Dipper is in view plays it; `.is-armed`, set only
     once the figure has been fully out of the viewport, holds the dim start so the next visit plays again. Without
     either class (no JS, reduced motion, no observer) the finished picture shows.
     Timeline from D (--ptr-d: 1.9 s on first view so the s5 kindle, .7 s + 1.2 s, finishes; .6 s on later visits):
       D+0    S6 lifts            1.0 s  (peak at 45 %)
       D+0.7  S5 lifts            1.0 s  (overlaps S6's settle: a hand-off)
       D+1.5  dots reveal upward  3.2 s  (starts as S5 peaks; ease-in-out into the star, ends D+4.7)
       D+4.3  north star lifts and blooms once  1.6 s  (overlaps the reveal's last .4 s; rests at D+5.9)
       D+6.2  twinkle, in view only: 8 s halo opacity and 11 s scale, layered */
  html.js .home-dipcol {
    --ptr-d: 1.9s;
    --t-s6: var(--ptr-d);
    --t-s5: calc(var(--ptr-d) + .7s);
    --t-reveal: calc(var(--ptr-d) + 1.5s);
    --t-star: calc(var(--ptr-d) + 4.3s);
    --t-twinkle: calc(var(--ptr-d) + 6.2s);
    --ptr-ease: cubic-bezier(.45, 0, .25, 1);
  }
  html.js .home-dipcol.is-seen { --ptr-d: .6s; }
  html.js .home-dipcol.is-armed:not(.is-live) .ptr-reveal { stroke-dasharray: 1.2 3; stroke-dashoffset: 1.25; }
  html.js .home-dipcol.is-armed:not(.is-live) .polaris { opacity: .35; }
  html.js .home-dipcol.is-armed:not(.is-live) .polaris-halo { transform: scale(.6); fill-opacity: .3; }
  html.js .home-ursa.in .home-dipcol.is-live .dip-star.s6 {
    animation: st-kindle 1.2s ease-out .85s backwards, st-point 1s var(--ptr-ease) var(--t-s6) both;
  }
  html.js .home-ursa.in .home-dipcol.is-live .dip-star.s5 {
    animation: st-kindle 1.2s ease-out .7s backwards, st-point 1s var(--ptr-ease) var(--t-s5) both;
  }
  html.js .home-dipcol.is-live .ptr-reveal {
    stroke-dasharray: 1.2 3;
    animation: st-ptr-reveal 3.2s var(--ptr-ease) var(--t-reveal) both;
  }
  html.js .home-dipcol.is-live .polaris {
    animation: st-pol-lift 1.6s ease-out var(--t-star) both,
      st-twinkle-s 11s ease-in-out var(--t-twinkle) infinite;
  }
  html.js .home-dipcol.is-live .polaris-halo {
    animation: st-pol-bloom 1.6s linear var(--t-star) both,
      st-twinkle-o 8s ease-in-out var(--t-twinkle) infinite;
  }
  html.js .home-ursa.in .home-uline,
  html.js .home-chat.in .home-cline { animation: st-rise 1.1s cubic-bezier(.2, .7, .2, 1) .1s both; }
  html.js .home-ursa.in .home-app,
  html.js .home-chat.in .home-ctile { animation: st-fadeup 1s cubic-bezier(.2, .7, .2, 1) both; }

  /* File cards, once (~2.6 s): the cards settle in turn, their text bars fill left to right,
     then each check circle draws and ticks, card by card. Transforms only, so nothing shifts. */
  html.js .home-chat.in .home-file { animation: st-settle .7s cubic-bezier(.2, .7, .2, 1) both; }
  html.js .home-chat.in .home-file:nth-child(2) { animation-delay: .12s; }
  html.js .home-chat.in .home-file:nth-child(3) { animation-delay: .24s; }
  html.js .home-chat.in .home-bars i { animation: st-fill .55s cubic-bezier(.4, 0, .2, 1) .35s both; }
  html.js .home-chat.in .home-bars i + i { animation-delay: .47s; }
  html.js .home-chat.in .home-file:nth-child(2) .home-bars i { animation-delay: .47s; }
  html.js .home-chat.in .home-file:nth-child(2) .home-bars i + i { animation-delay: .59s; }
  html.js .home-chat.in .home-file:nth-child(3) .home-bars i { animation-delay: .59s; }
  html.js .home-chat.in .home-file:nth-child(3) .home-bars i + i { animation-delay: .71s; }
  /* Draw setup only when the draw runs: at rest (no JS, reduced motion) the check rings are plain strokes. */
  html.js .home-ok circle { stroke-dasharray: 1; transform-box: fill-box; transform-origin: center; transform: rotate(-90deg); }
  html.js .home-ok path { stroke-dasharray: 1; }
  html.js .home-chat.in .home-ok circle { animation: st-draw .45s cubic-bezier(.5, 0, .3, 1) 1s both; }
  html.js .home-chat.in .home-ok path { animation: st-draw .35s cubic-bezier(.5, 0, .3, 1) 1.35s both; }
  html.js .home-chat.in .home-file:nth-child(2) .home-ok circle { animation-delay: 1.45s; }
  html.js .home-chat.in .home-file:nth-child(2) .home-ok path { animation-delay: 1.8s; }
  html.js .home-chat.in .home-file:nth-child(3) .home-ok circle { animation-delay: 1.9s; }
  html.js .home-chat.in .home-file:nth-child(3) .home-ok path { animation-delay: 2.25s; }

  html.js .home-why.in .home-stamp.is-stamped { animation: st-stamp 1.1s cubic-bezier(.3, .7, .2, 1) .5s both; }
  html.js .home-why.in .st-body { animation: st-fadeup 1s cubic-bezier(.2, .7, .2, 1) .25s both; }
  /* Logo motion (design note §1): on hover the ring turns, one turn every 40 s. */
  html.js .home-stamp:hover .stamp-ring { animation: st-turn 40s linear infinite; }
}

/* ---------- studio home breakpoints (canvas container queries → viewport) ---------- */
@media (max-width: 1320px) {
  html.js .st-track { display: none; }
  /* The header carries a smaller turning seal instead (canvas .rsp-chip, without the word label). */
  html.js .header-track:not(:empty) { display: flex; }
  html.js .header-track:not(:empty) + .site-nav { margin-left: 0; }
}
@media (max-width: 1100px) {
  .st-display { font-size: 96px; }
  .st-h2 { font-size: 60px; }
  .home-why .st-h2 { font-size: 76px; }
  .home-uline { font-size: 46px; }
}
@media (max-width: 860px) {
  .home-split, .home-ugrid, .home-cgrid, .home-wgrid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .home-points { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 64px; }
  .home-stamp { justify-self: start; max-width: 260px; }
}
@media (max-width: 700px) {
  html.js .header-track:not(:empty) { display: none; }
  .home-sec { padding: 80px 0; min-height: 0; font-size: 17px; }
  .sec-mark { margin-bottom: 28px; }
  .st-display { font-size: 52px; line-height: 1.02; }
  .home-hero .st-lede { margin-top: 28px; }
  .st-lede { font-size: 19px; }
  .home-blind { width: 320px; height: 320px; right: -150px; top: auto; bottom: -190px; transform: none; }
  .st-h2, .home-why .st-h2 { font-size: 40px; line-height: 1.06; }
  .st-body { font-size: 18px; }
  .home-why .st-body { margin-top: 24px; }
  .home-points h3 { font-size: 28px; }
  .home-uline { font-size: 34px; }
  .home-app img { width: 64px; height: 64px; border-radius: 14px; }
  .home-uname { font-size: 24px; }
  /* Phone: the north-star pointer is about 3× instead of 5× (closes the design note's open item). */
  .home-dip-wide { display: none; }
  .home-dip-phone { display: block; width: min(100%, 300px); }
  .home-cline { font-size: 30px; }
  .home-ctile { width: 80px; height: 80px; border-radius: 18px; }
  .home-ctile img { width: 60px; height: 60px; }
  .home-file { padding: 16px; gap: 14px; }
  .home-stamp { max-width: 200px; }
  .nf { padding: 80px 0 96px; }
  .nf-seal { margin-bottom: 36px; }
}

/* =====================================================================
   About. Ported from R2SealAbout (.rsp-a*, the about rules of the shared R2SealHome/R2SealAbout CSS).
   The seal tracker, .sec-mark and the st-* type above are shared with home.
   ===================================================================== */
.ab-sec { position: relative; padding: 140px 0; }
.ab-sec > .wrap { position: relative; z-index: 1; width: 100%; max-width: 1120px; }

/* 01 hero */
.ab-hero { display: flex; flex-direction: column; justify-content: center; min-height: 820px; padding: 120px 0; overflow: hidden; }
.ab-hero .st-display { max-width: 1040px; font-size: 132px; }
.ab-hero .st-lede { margin-top: 48px; }
.ab-under { position: relative; display: inline-block; }
.ab-under svg {
  position: absolute; left: -2%; bottom: -.12em; width: 104%; height: .3em; max-width: none;
  overflow: visible; pointer-events: none;
}
.ab-under path { fill: none; stroke: var(--vermilion); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; }

/* 02 why */
.ab-why { background: var(--paper2); }
.ab-agrid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 72px; align-items: start; }
.ab-aside { position: sticky; top: 120px; }
.ab-aside .st-h2, .ab-founder .st-h2 { font-size: 60px; }
.ab-prose p { font-size: 22px; line-height: 1.7; color: var(--muted); }
.ab-prose p + p { margin-top: 28px; }
.ab-prose p:first-child { font-size: 26px; line-height: 1.55; color: var(--ink); }
.ab-pull {
  margin-top: 88px; padding-left: 36px;
  border-left: 2px solid var(--ink);
  font-family: var(--font-display); font-weight: 400;
  font-size: 52px; line-height: 1.1; letter-spacing: -0.015em;
  color: var(--ink);
}
.ab-ideas { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 96px; }
.ab-idea { padding: 40px 36px 44px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); }
.ab-idea h3 {
  margin-bottom: 22px;
  font-family: var(--font-display); font-weight: 400;
  font-size: 44px; line-height: 1; letter-spacing: -0.015em;
}
.ab-idea p { max-width: 560px; font-size: 19px; line-height: 1.65; color: var(--muted); }

/* 03 the name (studio night panel, .night) */
.ab-name { display: flex; flex-direction: column; justify-content: center; min-height: 720px; padding: 120px 0; overflow: hidden; }
.ab-ngrid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 96px; align-items: center; }
.ab-ety { font-family: var(--font-display); font-weight: 400; }
.ab-ety-from { display: flex; align-items: center; gap: 22px; font-size: 40px; letter-spacing: -0.01em; color: var(--muted); }
.ab-ety-from svg {
  width: 120px; height: 20px; flex: none; overflow: visible;
  fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round;
}
.ab-ety-from path { stroke-dasharray: 1; }
.ab-ety-to { display: block; margin-top: 18px; font-size: 124px; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.ab-name-h {
  margin-bottom: 24px;
  font-size: 22px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.ab-name .st-body { font-size: 24px; line-height: 1.6; color: var(--ink); }

/* 04 how */
.ab-how { padding: 140px 0 88px; }
.ab-rows { position: relative; list-style: none; margin: 72px 0 0; padding: 0; }
.ab-rows::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.5px;
  background: var(--ink); transform-origin: left center;
}
.ab-row {
  display: grid; grid-template-columns: 120px minmax(0, 5fr) minmax(0, 6fr); gap: 40px; align-items: baseline;
  padding: 44px 0; border-bottom: 1px solid var(--line);
}
.ab-num { font-family: var(--font-display); font-size: 56px; line-height: 1; color: var(--ink); }
.ab-row h3 { font-family: var(--font-display); font-weight: 400; font-size: 42px; line-height: 1.08; letter-spacing: -0.012em; }
.ab-row p { font-size: 20px; line-height: 1.6; color: var(--muted); }
.ab-paren { display: block; margin-top: 10px; font-size: 16px; line-height: 1.55; }

/* 05 products, each in its own world */
.ab-prods { padding: 24px 0 120px; }
.ab-pgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.ab-ptile {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  min-height: 400px; padding: 40px; border-radius: 6px; overflow: hidden;
  font-family: var(--font-system); text-decoration: none;
}
html.js .ab-ptile { transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.ab-ptile:hover { transform: translateY(-4px); }
.ab-ptile:focus-visible { outline-color: var(--ink); outline-offset: 6px; }
.ab-ptile-u { color: var(--ink-u); }
.ab-ptile-c { background: #3D6B5C; color: #FAFAF8; }
.ab-ptop { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.ab-ptop img { width: 64px; height: 64px; border-radius: 15px; }
.ab-ctile {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 15px; background: #FAFAF8;
}
.ab-ctile img { width: 48px; height: 48px; border-radius: 0; }
.ab-mini { width: 180px; height: auto; overflow: visible; }
.ab-dl { fill: none; stroke: var(--accent); stroke-opacity: .55; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.ab-mini circle { fill: var(--mem); }
.ab-pname { margin-bottom: 10px; font-size: 15px; font-weight: 600; letter-spacing: .02em; opacity: .86; }
.ab-ptile-u .ab-pline { font-family: var(--font-ursa); font-weight: 400; font-size: 40px; line-height: 1.1; letter-spacing: -0.015em; }
.ab-ptile-c .ab-pline { font-size: 34px; line-height: 1.18; font-weight: 600; letter-spacing: -0.02em; }
.ab-pgo { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 26px; font-weight: 600; }
.ab-ptile:hover .st-ar { transform: translateX(6px); }

/* 06 founder */
.ab-founder { padding: 140px 0 150px; }
.ab-fgrid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 88px; align-items: center; }
.ab-photo { position: relative; width: 340px; max-width: 100%; }
.ab-photo img { width: 340px; max-width: 100%; border-radius: 4px; filter: saturate(.9); }
.ab-pstamp { position: absolute; right: -34px; bottom: -34px; width: 96px; height: 96px; color: var(--vermilion); transform: rotate(-9deg); }
.ab-pstamp svg { width: 100%; height: 100%; }
.ab-pdisc { fill: var(--paper); }
.ab-fbody { max-width: 620px; margin-top: 40px; font-size: 23px; line-height: 1.65; color: var(--ink); }
.ab-fcta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; margin-top: 40px; }
.ab-fcta .st-link { color: var(--vermilion); }
.ab-contact { font-size: 16px; color: var(--muted); }
.ab-contact a { color: var(--ink); font-weight: 600; }

/* About motion: resting states above; only html.js with no motion preference animates. */
@keyframes ab-pstamp {
  0% { opacity: .25; transform: rotate(-20deg) scale(1.35); }
  60% { opacity: 1; transform: rotate(-8deg) scale(.95); }
  100% { opacity: 1; transform: rotate(-9deg) scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  html.js .ab-hero .st-ln { animation: st-rise 1.1s cubic-bezier(.2, .7, .2, 1) both; }
  html.js .ab-hero .st-ln:nth-child(2) { animation-delay: .14s; }
  html.js .ab-hero .st-lede { animation: st-fadeup 1.1s cubic-bezier(.2, .7, .2, 1) .45s both; }
  html.js .ab-hero .ab-under path { animation: st-draw 1.2s cubic-bezier(.6, 0, .2, 1) 1s both; }

  html.js .ab-sec.in:not(.ab-hero) .sec-mark { animation: st-fadeup .9s cubic-bezier(.2, .7, .2, 1) both; }
  html.js .ab-sec.in:not(.ab-hero) .st-h2 { animation: st-rise 1s cubic-bezier(.2, .7, .2, 1) .08s both; }
  html.js .ab-why.in .ab-pull { animation: st-fadeup 1.1s cubic-bezier(.2, .7, .2, 1) .3s both; }
  html.js .ab-why.in .ab-idea { animation: st-rise 1s cubic-bezier(.2, .7, .2, 1) .5s both; }
  html.js .ab-why.in .ab-idea + .ab-idea { animation-delay: .7s; }
  html.js .ab-name.in .ab-ety-from path { animation: st-draw 1.3s cubic-bezier(.6, 0, .2, 1) .4s both; }
  html.js .ab-name.in .ab-ety-to { animation: st-rise 1.2s cubic-bezier(.2, .7, .2, 1) .9s both; }
  html.js .ab-how.in .ab-rows::before { animation: st-rule 1.2s cubic-bezier(.6, 0, .2, 1) both; }
  html.js .ab-how.in .ab-row { animation: st-fadeup 1s cubic-bezier(.2, .7, .2, 1) both; }
  html.js .ab-how.in .ab-row:nth-child(2) { animation-delay: .2s; }
  html.js .ab-how.in .ab-row:nth-child(3) { animation-delay: .4s; }
  html.js .ab-how.in .ab-row:nth-child(4) { animation-delay: .6s; }
  html.js .ab-prods.in .ab-ptile { animation: st-rise 1s cubic-bezier(.2, .7, .2, 1) backwards; } /* backwards: the hover lift still works afterwards */
  html.js .ab-prods.in .ab-ptile + .ab-ptile { animation-delay: .18s; }
  html.js .ab-prods.in .ab-dl { animation: st-draw 2.2s cubic-bezier(.45, 0, .2, 1) .6s both; }
  html.js .ab-founder.in .ab-pstamp.is-stamped { animation: ab-pstamp 1s cubic-bezier(.3, .7, .2, 1) .7s both; }
}

/* About breakpoints (canvas container queries → viewport) */
@media (max-width: 1100px) {
  .ab-hero .st-display { font-size: 104px; }
  .ab-ety-to { font-size: 92px; }
  .ab-ngrid { gap: 72px; }
  .ab-row { grid-template-columns: 80px minmax(0, 1fr); }
  .ab-row p { grid-column: 2; }
  .ab-fgrid { gap: 56px; }
}
@media (max-width: 860px) {
  .ab-agrid, .ab-ngrid, .ab-fgrid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .ab-pgrid, .ab-ideas { grid-template-columns: minmax(0, 1fr); }
  .ab-aside { position: static; }
}
@media (max-width: 700px) {
  .ab-sec { font-size: 17px; }
  .ab-hero, .ab-name { min-height: 0; padding: 80px 0; }
  .ab-hero .st-display { font-size: 54px; }
  .ab-hero .st-lede { margin-top: 28px; }
  .ab-why, .ab-how, .ab-founder { padding: 80px 0; }
  .ab-prods { padding: 16px 0 80px; }
  .ab-aside .st-h2, .ab-founder .st-h2 { font-size: 40px; line-height: 1.06; }
  .ab-prose p { font-size: 18px; }
  .ab-prose p:first-child { font-size: 21px; }
  .ab-pull { margin-top: 56px; padding-left: 22px; font-size: 34px; }
  .ab-ideas { margin-top: 56px; }
  .ab-idea { padding: 28px 24px 32px; }
  .ab-idea h3 { font-size: 34px; }
  .ab-ety-from { gap: 14px; font-size: 28px; }
  .ab-ety-from svg { width: 64px; }
  .ab-ety-to { font-size: 72px; }
  .ab-name .st-body { font-size: 19px; }
  .ab-rows { margin-top: 48px; }
  .ab-row { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 32px 0; }
  .ab-row p { grid-column: auto; font-size: 17px; }
  .ab-num { font-size: 40px; }
  .ab-row h3 { font-size: 32px; }
  .ab-paren { font-size: 15px; }
  .ab-ptile { min-height: 320px; padding: 28px; }
  .ab-ptile-u .ab-pline { font-size: 30px; }
  .ab-ptile-c .ab-pline { font-size: 26px; }
  .ab-mini { width: 130px; }
  .ab-pstamp { right: -8px; bottom: -30px; width: 80px; height: 80px; }
  .ab-fbody { font-size: 19px; }
}

/* =====================================================================
   Savings (/savings/): the cloud-or-Mac calculator, its method and sources.
   ===================================================================== */
.sv [hidden] { display: none !important; }
.sv .wrap { max-width: 1120px; }
.sv-hero { padding: 120px 0 72px; }
.sv-hero .st-display { max-width: 960px; font-size: 104px; }
.sv-hero .st-lede { margin-top: 40px; }

/* Calculator: inputs beside the result; without JS only the result, at reading width. */
.sv-calc { padding: 0 0 120px; }
.sv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: start; }
.sv-form[hidden] + .sv-result { grid-column: 1 / -1; max-width: 760px; }
.sv input:focus-visible, .sv select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.sv-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; font-family: var(--font-display); font-size: 28px; line-height: 1.2; }
.sv-line input, .sv-line select {
  height: 54px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); color: var(--ink);
  font: inherit; font-size: 26px;
}
.sv-line input { width: 4.4em; font-variant-numeric: tabular-nums; }
.sv-line input[aria-invalid="true"] { border-color: var(--vermilion); }
.sv-err { margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--vermilion); }

.sv-size { min-width: 0; margin: 40px 0 0; padding: 0; border: 0; }
.sv-size legend { margin-bottom: 14px; padding: 0; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.sv-opt { position: relative; padding: 16px 18px 16px 50px; border: 1px solid var(--line); border-radius: 8px; }
.sv-opt + .sv-opt { margin-top: 10px; }
.sv-opt:hover { border-color: var(--muted); }
.sv-opt:has(input:checked) { border-color: var(--ink); background: var(--paper2); }
.sv-opt input { position: absolute; left: 18px; top: 20px; width: 18px; height: 18px; margin: 0; accent-color: var(--vermilion); }
.sv-opt label { font-size: 17px; font-weight: 700; cursor: pointer; }
.sv-opt label::after { content: ""; position: absolute; inset: 0; } /* the whole card picks the size */
.sv-opt p { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.sv-hint { margin-top: 16px; font-size: 15px; line-height: 1.55; color: var(--muted); }

.sv-result { padding: 40px 44px 44px; border-radius: 4px; background: var(--paper2); }
.sv-noscript { margin-bottom: 28px; padding: 14px 18px; border-left: 3px solid var(--vermilion); background: var(--paper); font-size: 16px; }
.sv-res-h { font-family: var(--font-display); font-weight: 400; font-size: 52px; line-height: 1.05; letter-spacing: -0.015em; }
.sv-sub { margin-top: 10px; font-size: 17px; color: var(--muted); }
.sv-table { width: 100%; margin-top: 32px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sv-table th, .sv-table td { padding: 16px 12px 16px 0; text-align: left; vertical-align: baseline; }
.sv-table tbody th, .sv-table tbody td { border-top: 1px solid var(--line); }
.sv-table thead th { font-size: 17px; font-weight: 700; }
.sv-table thead th span { display: block; margin-top: 2px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--muted); }
.sv-table tbody th { width: 22%; font-size: 15px; font-weight: 700; }
.sv-table tbody td { font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.sv-table abbr { font-size: 17px; font-weight: 500; letter-spacing: 0; text-decoration: none; color: var(--muted); }
.sv-table .sv-has-note > * { padding-bottom: 6px; }
.sv-table .sv-note td { padding-top: 0; border-top: 0; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.sv-cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 32px 0 0; padding-top: 28px; border-top: 1px solid var(--line); }
.sv-cmp dt { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.sv-cmp dd { margin: 8px 0 0; font-size: 17px; line-height: 1.55; }
.sv-cmp div:first-child dd { font-size: 22px; font-weight: 700; line-height: 1.35; }
.sv-year { margin-top: 24px; font-size: 16px; color: var(--muted); }
.sv-year span { font-weight: 700; color: var(--ink); }
.sv-how { margin-top: 28px; }

/* How we calculate this, Sources, disclaimer */
.sv-sec { padding: 104px 0; border-top: 1px solid var(--line); }
.sv-sec .st-h2 { font-size: 60px; }
.sv-prose > :not(h2) { max-width: 760px; }
.sv-intro { margin-top: 28px; font-size: 20px; line-height: 1.6; color: var(--muted); }
.sv-prose h3 { margin-top: 48px; font-size: 20px; font-weight: 700; }
.sv-prose ul { margin: 20px 0 0; padding-left: 1.2em; }
.sv-prose li { font-size: 17px; line-height: 1.65; color: var(--muted); }
.sv-prose li + li { margin-top: 14px; }
.sv-prose li b { font-weight: 700; color: var(--ink); }
.sv-prose .sv-points { margin-top: 36px; }
.sv-sources h3 { margin-top: 40px; }
.sv-src a { color: var(--ink); overflow-wrap: anywhere; }
.sv-src code { font-size: .92em; }
.sv-end { padding: 0 0 104px; }
.sv-end p { font-size: 15px; line-height: 1.6; color: var(--muted); }
.sv-end p + p { margin-top: 12px; }

@media (max-width: 1100px) {
  .sv-hero .st-display { font-size: 84px; }
  .sv-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .sv-form, .sv-form[hidden] + .sv-result { max-width: 760px; }
}
@media (max-width: 700px) {
  .sv-hero { padding: 64px 0 48px; }
  .sv-hero .st-display { font-size: 48px; }
  .sv-hero .st-lede { margin-top: 24px; }
  .sv-calc { padding-bottom: 80px; }
  .sv-line { font-size: 26px; }
  .sv-line input, .sv-line select { height: 50px; font-size: 24px; }
  .sv-size { margin-top: 32px; }
  .sv-result { margin: 0 -20px; padding: 28px 20px 32px; border-radius: 0; }
  .sv-res-h { font-size: 38px; }
  .sv-table th, .sv-table td { padding-right: 8px; }
  .sv-table thead th { font-size: 15px; }
  .sv-table thead th span { font-size: 13px; }
  .sv-table tbody th { font-size: 14px; }
  .sv-table tbody td { font-size: 20px; }
  .sv-table abbr { display: block; font-size: 13px; }
  .sv-cmp { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sv-cmp div:first-child dd { font-size: 19px; }
  .sv-sec { padding: 72px 0; }
  .sv-sec .st-h2 { font-size: 38px; }
  .sv-intro { font-size: 18px; }
  .sv-end { padding-bottom: 72px; }
}