/* The eaven website, in the platform's own look: paper, teal and slate, Geist Serif over Source Sans 3, paper shadows with
   the light from above, and one easing curve. Tokens first, then the page frame, then each part. Use the tokens, not new numbers. */

@font-face { font-family: "Geist Serif"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/geist@1.9.1/dist/fonts/geist-serif/GeistSerif-Triangle.woff2") format("woff2"), url("../fonts/GeistSerif-Triangle.ttf") format("truetype"); }
@font-face { font-family: "Geist Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/geist@1.9.1/dist/fonts/geist-mono/GeistMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/geist@1.9.1/dist/fonts/geist-mono/GeistMono-Medium.woff2") format("woff2"); }
@font-face { font-family: "Geist Wordmark"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/geist@1.9.1/dist/fonts/geist-sans/Geist-SemiBold.woff2") format("woff2"), url("../fonts/Geist-SemiBold.ttf") format("truetype"); }

:root {
  color-scheme: light;
  /* Paper */
  --paper: #fbf7ef; --sheet: #fffdf8; --white: #fffefa; --surface: #f3eee1; --surface-hover: #eae4d3;
  /* Ink */
  --ink: #212c3d; --muted: #556276; --field-line: rgba(33, 44, 61, 0.16);
  /* The one main colour, and its family */
  --teal: #1f6f6a; --teal-lit: #378884; --teal-deep: #185653; --teal-ground: #1b5f5b; --teal-pale: #aecdcc; --teal-mist: #e1ebeb;
  /* Accents that carry meaning, never the main colour of anything */
  --gold: #e3ad3b; --gold-pale: #f6d67e; --gold-mist: #fbf0d4;
  --brick: #c8654a; --sky: #8fb0c9; --sage: #5f8f74; --plum: #8a6aa0;
  --tint-brick: #f7e4dd; --tint-sage: #e2efe6; --tint-amber: #fbefd3; --tint-sky: #e3edf5; --tint-plum: #eee6f4;
  /* Type */
  --serif: "Geist Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wordmark: "Geist Wordmark", "Geist", system-ui, -apple-system, sans-serif;
  /* The agent's own voice: timestamps, records, what it's doing right now */
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --t-hero: clamp(3.1rem, min(8.4vw, 12.5vh), 8.25rem);
  --t-page: clamp(2.9rem, 6.6vw, 6.5rem);
  --t-section: clamp(2.2rem, 4.4vw, 4.25rem);
  --t-sub: clamp(1.45rem, 2vw, 1.9rem);
  --t-lede: clamp(1.19rem, 1.55vw, 1.4rem);
  --t-body: 1.125rem; --t-small: 0.95rem; --t-meta: 0.86rem;
  /* Space */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --edge: clamp(20px, 3.4vw, 56px);
  --gap-loud: clamp(72px, 11vw, 176px);
  --gap-quiet: clamp(48px, 6vw, 96px);
  /* Corners */
  --r-picture: 8px; --r-print: 16px; --r-card: 28px; --r-widget: 34px; --r-sheet: 48px; --r-pill: 999px;
  /* Paper shadows: a tight contact shadow and a long soft cast one */
  --paper-1: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 2px rgba(33, 44, 61, 0.05), 0 12px 24px -14px rgba(33, 44, 61, 0.2);
  --paper-2: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 6px -2px rgba(33, 44, 61, 0.06), 0 30px 54px -28px rgba(33, 44, 61, 0.32);
  --paper-3: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 10px -4px rgba(33, 44, 61, 0.07), 0 50px 80px -36px rgba(33, 44, 61, 0.4);
  --paper-widget: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(33, 44, 61, 0.05), 0 14px 26px -16px rgba(33, 44, 61, 0.28);
  /* Motion */
  --out: cubic-bezier(0.22, 1, 0.36, 1);
  --settle: cubic-bezier(0.2, 0.9, 0.22, 1.04);
}

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 280ms; animation-timing-function: var(--out); }

/* The frame ------------------------------------------------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--paper) url("../img/paper.png") 0 0 / 160px; color: var(--ink); font: 400 var(--t-body)/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; font-synthesis: none; letter-spacing: 0; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
img, svg { display: block; max-width: 100%; }
figure { margin: 0; }
strong { font-weight: 600; }
::selection { background: var(--gold-pale); color: var(--ink); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 6px; }
.spot-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: var(--edge); top: -60px; z-index: 100; background: var(--sheet); padding: 10px 18px; border-radius: var(--r-pill); box-shadow: var(--paper-2); }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--edge); }
.narrow { max-width: 820px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The logo: the name in rounded letters with a swallow leaving the end of it (tools/logo.py draws it into src/partials/logo.html).
   Swallows nest under eaves. On a hover the swallow lifts a little. */
.logo { display: inline-flex; align-items: center; color: var(--teal); text-decoration: none; line-height: 1; white-space: nowrap; }
.logo-svg { height: 1.9rem; width: auto; flex: none; overflow: visible; transform: translateY(-0.2rem); }
.logo-letters { fill: currentColor; }
.logo-bird { fill: var(--gold); transition: transform 320ms var(--out); transform-box: fill-box; transform-origin: center; }
.logo:hover .logo-bird { transform: translate(2.5px, -2.5px) rotate(-4deg); }
@media (prefers-reduced-motion: reduce) { .logo-bird { transition: none; } .logo:hover .logo-bird { transform: none; } }
/* A plain house stands for one company's copy (Security) */
.mark-house { fill: var(--teal); }
.mark-lit { fill: var(--gold); }

/* The top bar */
/* The header: a paper sheet across the top, its bottom corners rounded like every other sheet on the site. */
.top { position: sticky; top: 0; z-index: 50; background: rgba(251, 247, 239, 0.92); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-radius: 0 0 var(--r-widget) var(--r-widget); box-shadow: inset 0 -1px 0 rgba(33, 44, 61, 0.04), 0 10px 22px -20px rgba(33, 44, 61, 0.4); transition: box-shadow 240ms var(--out); }
.top.is-scrolled { box-shadow: inset 0 -1px 0 rgba(33, 44, 61, 0.05), 0 14px 30px -20px rgba(33, 44, 61, 0.55); }
.top-in { position: relative; z-index: 3; max-width: 1440px; margin: 0 auto; padding: 0 var(--edge); height: 76px; display: flex; align-items: center; gap: var(--s5); }
.nav { flex: 1; display: flex; justify-content: center; gap: 2px; }
.nav a, .top-sign { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1rem; padding: 9px 16px; border-radius: var(--r-pill); transition: background 160ms var(--out), color 160ms var(--out); }
.nav a:hover, .top-sign:hover { background: var(--surface-hover); }
.nav a[aria-current="page"], .top-sign[aria-current="page"] { color: var(--teal); background: var(--surface); }
.top-actions { display: flex; align-items: center; gap: var(--s2); }
.menu-button { display: none; font: 600 1rem/1 var(--sans); color: var(--ink); background: var(--sheet); border: 0; border-radius: var(--r-pill); height: 40px; padding: 0 18px; box-shadow: var(--paper-1); cursor: pointer; }
/* The menu: a sheet that unfolds from the button, each page with its drawn icon and a line on what's there, and the two actions at
   its foot. The page behind dims. */
.menu-card { position: absolute; right: var(--edge); top: 70px; z-index: 2; width: min(400px, calc(100vw - 24px)); max-height: calc(100svh - 90px); overflow: auto;
  background: var(--sheet); border-radius: var(--r-widget); box-shadow: var(--paper-3), 0 0 0 1px rgba(33, 44, 61, 0.04); padding: 10px; display: grid; gap: 8px; transform-origin: calc(100% - 40px) 0; }
.menu-card[hidden] { display: none; }
.menu-list { display: grid; gap: 2px; }
.menu-list a { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; color: var(--ink); text-decoration: none; padding: 10px 12px; border-radius: 20px;
  transition: background 160ms var(--out); }
.menu-list a .spot { width: 40px; height: 40px; }
.menu-list a:hover, .menu-list a[aria-current="page"] { background: var(--surface-hover); }
.menu-list a[aria-current="page"] .menu-name { color: var(--teal); }
.menu-name { display: block; font: 400 1.25rem/1.15 var(--serif); }
.menu-what { display: block; font-size: 0.9rem; color: var(--muted); margin-top: 2px; }
.menu-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 6px 6px; border-top: 1px solid var(--field-line); }
.menu-foot .btn { justify-content: center; }
.menu-scrim { position: fixed; inset: 0; z-index: 1; background: rgba(28, 44, 48, 0.28); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.menu-scrim[hidden] { display: none; }
html.motion .menu-card.is-opening { animation: menu-in 320ms var(--out) both; }
html.motion .menu-card.is-opening .menu-list a, html.motion .menu-card.is-opening .menu-foot { animation: menu-row 420ms var(--out) both; animation-delay: calc(var(--i) * 30ms + 60ms); }
html.motion .menu-scrim:not([hidden]) { animation: scrim-in 240ms var(--out) both; }
@keyframes menu-in { from { opacity: 0; transform: scale(0.94) translateY(-8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes menu-row { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }

/* Buttons: one pill shape, pressed in by a pixel. Teal is the one main action. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 50px; padding: 0 26px; border: 0; border-radius: var(--r-pill); background: var(--sheet); color: var(--ink); font: 600 1.02rem/1.1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: var(--paper-1); transition: transform 90ms ease-out, box-shadow 240ms var(--out), background 160ms var(--out); }
.btn:hover { box-shadow: var(--paper-2); }
.btn:active { transform: scale(0.97); box-shadow: var(--paper-1); }
.btn-primary { color: #fff; background: linear-gradient(180deg, var(--teal-lit) -30%, var(--teal) 55%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(24, 86, 83, 0.3), 0 12px 20px -12px rgba(24, 86, 83, 0.65); }
.btn-primary:hover { background: linear-gradient(180deg, var(--teal) -30%, var(--teal-deep) 70%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(24, 86, 83, 0.3), 0 16px 26px -12px rgba(24, 86, 83, 0.7); }
.btn-small { min-height: 40px; padding: 0 18px; font-size: 0.97rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.more { display: inline-flex; align-items: center; gap: 0.35em; font-weight: 600; text-decoration: none; color: var(--teal); }
.more::after { content: ""; width: 0.5em; height: 0.5em; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); transition: transform 240ms var(--out); }
.more:hover::after { transform: translateX(3px) rotate(45deg); }

/* Type */
.hero-title { font-size: var(--t-hero); line-height: 0.98; }
.page-title { font-size: var(--t-page); line-height: 1; max-width: 15ch; }
.section-title { font-size: var(--t-section); line-height: 1.04; max-width: 18ch; margin-bottom: 0.32em; }
.sub-title { font-size: var(--t-sub); line-height: 1.15; margin-bottom: 0.4em; }
.lede { font-size: var(--t-lede); line-height: 1.45; max-width: 36em; }
.quiet { color: var(--muted); }
.small { font-size: var(--t-small); }

/* Sections: loud and quiet, so the page is paced rather than stacked */
.section { padding: var(--gap-quiet) 0; }
.section.loud { padding: var(--gap-loud) 0; }
.section-head { margin-bottom: clamp(32px, 4.5vw, 64px); }
.section-head .lede { margin-top: 0.2em; }
.page-head { padding: clamp(40px, 7vw, 120px) 0 clamp(28px, 4vw, 64px); }
.page-head .lede { margin-top: clamp(20px, 2.4vw, 32px); }
.page-head .btn-row { margin-top: clamp(24px, 3vw, 40px); }
/* A page's title with a print beside it: the picture on a white edge, set slightly off-square on the desk, its caption on the
   margin. On hover it straightens and lifts. */
.page-head-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.page-head-grid .page-title { font-size: clamp(2.9rem, 5.6vw, 5.6rem); }
.print { margin: 0; padding: 12px 12px 0; background: var(--white); border-radius: var(--r-print); box-shadow: var(--paper-2); transform: rotate(var(--tilt, -1.5deg)); transition: transform 600ms var(--settle), box-shadow 240ms var(--out); }
.print:hover { transform: rotate(0deg) translateY(-4px); box-shadow: var(--paper-3); }
.print-pic { position: relative; aspect-ratio: 5 / 4; overflow: hidden; border-radius: var(--r-picture); background: var(--sky-top, #aecdcc); }
/* Cropped in on the homes: the picture is drawn larger than the print and stands on its bottom edge, --x along. */
.print-pic img { position: absolute; bottom: 0; left: var(--x, -15%); width: var(--zoom, 130%); max-width: none; height: auto; }
.print figcaption { padding: 12px 6px 14px; color: var(--muted); font-size: var(--t-small); line-height: 1.4; }
.split-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 112px); align-items: center; }
.split-2.top { align-items: start; }

/* Motion: titles rise word by word as a page opens; sections settle in once as they scroll into view. None of it when
   reduced motion is asked for, and none of it without the script. */
.rise .w { display: inline-block; overflow: clip; overflow-clip-margin: 0.2em; padding: 0 0.02em 0.12em; margin-bottom: -0.12em; vertical-align: top; }
.rise .w > span { display: inline-block; }
html.motion .rise .w > span { transform: translateY(108%); transition: transform 900ms var(--out); transition-delay: calc(var(--i, 0) * 70ms + 60ms); }
html.motion .rise.is-in .w > span { transform: none; }
html.motion [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 900ms var(--out), transform 900ms var(--out); transition-delay: var(--delay, 0ms); }
html.motion [data-reveal].is-in { opacity: 1; transform: none; }

/* The drawn icons: cut paper, each its own colours, standing on their own */
.spot { width: 40px; height: 40px; flex: none; overflow: visible; filter: drop-shadow(0 1px 1px rgba(33, 44, 61, 0.26)) drop-shadow(0 3px 5px rgba(33, 44, 61, 0.18)); }
.spot :is(g, path) { transform-box: fill-box; }

/* Home: the opening --------------------------------------------------------------------------------------------------- */

/* The opening: the street fills the first screen in a rounded frame, and the headline stands in its sky. The frame is the
   screen's height (less the header), so the street always shows on arrival; on a phone the picture is cropped toward the sun. */
.hero { padding: 0 clamp(8px, 1.2vw, 20px); }
.hero-stage { position: relative; isolation: isolate; overflow: hidden; height: clamp(720px, min(100svh - 96px, 64vw + 300px), 1060px); border-radius: var(--r-sheet); background: #9fc3c7; container-type: size; box-shadow: var(--paper-2); --scene-min: 1180px; }
.hero-head { position: relative; padding-top: clamp(32px, min(6vw, 8vh), 92px); }
.hero-stage .lede { color: var(--ink); }
.hero-stage .btn:not(.btn-primary) { background: rgba(255, 253, 248, 0.86); }
.hero-title .line { display: block; }
.hero-side { margin-top: clamp(20px, 2.4vw, 36px); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s5); max-width: 40em; }
.hero-side .lede { max-width: 34em; margin: 0; }

/* The agent at work: a box that takes words, and the card that grows out of it */
/* A window onto a cut-paper scene, with the product floating in front of it: a rounded frame, the picture standing on its
   bottom edge (cropped at the sides on a narrow screen, never stretched), and the sky's own top colour above it. */
.scene-frame { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-sheet); background: var(--sky-top, #aecdcc); box-shadow: var(--paper-2); }
.scene { position: absolute; left: 50%; bottom: 0; z-index: -1; width: max(100%, var(--scene-min, 1200px)); max-width: none; height: auto; transform: translateX(-50%); pointer-events: none; user-select: none; -webkit-user-select: none; }
/* The agent, over a sea of cloud */
/* The agent, under the opening's street: its box sits on the scene's bottom edge, the card grows out of it onto the paper, and what
   it is stands beside it. One section with the street, rather than a second picture. */
.hero-agent { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 1fr); gap: 0 clamp(32px, 5vw, 88px); align-items: start; }
.hero-agent-box { grid-column: 1; grid-row: 1; margin: -33px 0 0; }
.hero-agent-box .agent { width: 100%; margin: 0; }
.hero-agent-box .agent-asks { justify-content: flex-start; }
.hero-agent-box .agent-trace { margin-left: 4px; }
.hero-agent-words { grid-column: 2; grid-row: 1; padding-top: clamp(48px, 5vw, 72px); max-width: 26em; position: sticky; top: 120px; }
.hero-agent-words .sub-title { margin-bottom: var(--s3); }


/* The opening is a paper diorama: six sheets, each set a little further forward. The page moves them apart with the pointer and
   the scroll (site.js, --px, --py and --sy), the nearer ones more, so the street has real depth. The clouds drift on their own. */
.layers { position: absolute; left: 50%; bottom: -16px; z-index: -1; width: calc(max(100%, var(--scene-min)) + 72px); aspect-ratio: 2400 / 1300; transform: translateX(-50%); pointer-events: none; --px: 0; --py: 0; --sy: 0; }
.layer { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; transform: translate3d(calc(var(--px) * var(--depth) * -20px), calc((var(--py) * -10px + var(--sy) * -28px) * var(--depth)), 0); will-change: transform; }
.layer-fill { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
html.motion .layer.clouds { animation: clouds-drift 70s ease-in-out infinite alternate; }
@keyframes clouds-drift { from { translate: -2.2% 0; } to { translate: 2.2% 0; } }

/* What keeps the pictures alive, all of it slow and all of it gone with reduced motion: the sun's rays turning, smoke from the
   chimneys, a few birds crossing. And over every picture, the grain of the paper it's printed on. */
.rays { position: absolute; left: var(--rx); top: var(--ry); width: 150%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none;
  background: repeating-conic-gradient(from 4deg, rgba(255, 250, 232, 0) 0deg, rgba(255, 250, 232, 0.55) 2.5deg, rgba(255, 250, 232, 0) 6deg, rgba(255, 250, 232, 0) 15deg),
              repeating-conic-gradient(from 0deg, rgba(255, 250, 232, 0) 0deg, rgba(255, 250, 232, 0.4) 4deg, rgba(255, 250, 232, 0) 9deg, rgba(255, 250, 232, 0) 23deg);
  -webkit-mask: radial-gradient(closest-side, #000 4%, rgba(0, 0, 0, 0.55) 24%, rgba(0, 0, 0, 0.18) 48%, transparent 72%);
  mask: radial-gradient(closest-side, #000 4%, rgba(0, 0, 0, 0.55) 24%, rgba(0, 0, 0, 0.18) 48%, transparent 72%); }
html.motion .rays { animation: turn 240s linear infinite; }
@keyframes turn { to { rotate: 360deg; } }
.smoke { position: absolute; left: var(--x); top: var(--y); width: 1.5%; aspect-ratio: 1; pointer-events: none; }
.smoke i { position: absolute; inset: 0; border-radius: 50%; background: rgba(255, 253, 247, 0.9); filter: blur(3px); opacity: 0; }
html.motion .smoke i { animation: puff 7.5s cubic-bezier(0.3, 0.6, 0.5, 1) infinite; }
.smoke i:nth-child(2) { animation-delay: 2.5s; }
.smoke i:nth-child(3) { animation-delay: 5s; }
@keyframes puff { 0% { transform: translate(0, 0) scale(0.45); opacity: 0; } 14% { opacity: 0.85; } 100% { transform: translate(170%, -620%) scale(2.6); opacity: 0; } }
.flock { position: absolute; left: 0; top: var(--top, 40%); width: 100%; pointer-events: none; }
.flock svg { width: 3.4%; overflow: visible; fill: none; stroke: #378884; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
html.motion .flock { animation: fly 64s linear infinite; }
html.motion .flock svg { animation: flap 900ms ease-in-out infinite alternate; transform-origin: 50% 60%; }
@keyframes fly { from { transform: translate(-6%, 0); } 50% { transform: translate(50%, -40%); } to { transform: translate(106%, 10%); } }
@keyframes flap { to { transform: scaleY(0.55); } }
html.still .flock { display: none; }
.hero-stage::after, .scene-frame::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("../img/grain.png") 0 0 / 180px; }
/* The opening's light: warm from the low sun across the street, and the corners a shade darker, to draw the eye in. */
.hero-stage::after { background: url("../img/grain.png") 0 0 / 180px, radial-gradient(130% 100% at 42% 30%, transparent 58%, rgba(22, 63, 61, 0.16)); }
.sunlight { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 70% at 0% 52%, rgba(255, 214, 140, 0.6), rgba(255, 214, 140, 0.2) 50%, transparent 78%); mix-blend-mode: soft-light; }
.print-pic::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: url("../img/grain.png") 0 0 / 180px; }
/* The plumber's van, parked outside the walk-up at the right; it drives in once the agent has sent the work order. */
/* The van drives in from up the street once the opening is in view: it starts smaller and further off, and grows as it comes,
   stopping at the kerb (the numbers are where tools/street.py's camera puts it), then the plumber steps out. */
.hero-van { transform-origin: 60.64% 95.12%; transition: translate 2.8s cubic-bezier(0.2, 0.7, 0.25, 1), scale 2.8s cubic-bezier(0.2, 0.7, 0.25, 1); }
.hero-person { transition: opacity 500ms var(--out) 2.5s, translate 600ms var(--out) 2.5s; }
html.motion [data-diorama]:not(.van-here) .hero-van { translate: -19.89% -18.32%; scale: 0.384; transition-duration: 0s; }
html.motion [data-diorama]:not(.van-here) .hero-person { opacity: 0; translate: 0 0.6%; transition-delay: 0s; }
.agent { width: min(760px, 100%); margin: 0 auto; }
.agent-box { display: flex; align-items: center; gap: var(--s3); height: 66px; padding: 0 9px 0 28px; background: var(--sheet); border-radius: var(--r-pill); box-shadow: var(--paper-2); font-size: 1.16rem; }
.agent-typed { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-typed:empty::before { content: attr(data-placeholder); color: var(--muted); }
.caret { width: 2px; height: 1.3em; background: var(--teal); margin-left: -10px; animation: blink 1s steps(1) infinite; }
html.still .caret { animation: none; opacity: 0; }
@keyframes blink { 50% { opacity: 0; } }
.agent-go { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--teal-lit) -30%, var(--teal) 55%); color: #fff; box-shadow: 0 8px 14px -8px rgba(24, 86, 83, 0.7); transition: transform 240ms var(--settle); }
.agent-go svg { width: 22px; height: 22px; }
.agent.is-sending .agent-go { transform: scale(0.9); }
.agent-asks { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin: var(--s4) 0 0; padding: 0; list-style: none; }
.agent-asks button { font: 600 0.95rem/1 var(--sans); color: var(--ink); background: rgba(255, 253, 248, 0.6); border: 0; border-radius: var(--r-pill); padding: 10px 16px; cursor: pointer; transition: background 160ms var(--out), color 160ms var(--out); }
.agent-asks button:hover { background: var(--surface-hover); }
.agent-asks button[aria-pressed="true"] { background: var(--sheet); color: var(--teal); box-shadow: var(--paper-1); }
.agent-cards { position: relative; margin-top: var(--s5); display: grid; }
.agent-cards .card { grid-area: 1 / 1; align-self: start; }

/* A card the agent made: what it is, what it will do, and the one main action at the right */
.card { background: var(--sheet); border-radius: var(--r-widget); box-shadow: var(--paper-3); padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.8vw, 32px); }
.scene-frame .card, .scene-frame .drop { box-shadow: 0 0 0 1px rgba(33, 44, 61, 0.04), 0 2px 4px rgba(33, 44, 61, 0.1), 0 40px 70px -30px rgba(24, 50, 50, 0.55); }
/* Every card keeps its place in the one cell, so the stage is always the tallest card's height and the page never jumps. */
.agent-cards .card[hidden] { display: block; visibility: hidden; }
html.motion .agent-cards .card.is-growing { animation: grow 620ms var(--out) both; transform-origin: 50% 0; }
@keyframes grow { from { opacity: 0; filter: blur(6px); transform: translateY(-26px) scale(0.95, 0.72); clip-path: inset(0 0 60% 0 round 26px); } to { opacity: 1; filter: none; transform: none; clip-path: inset(0 0 0 0 round 26px); } }
.card-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s4); align-items: start; }
.card-head .spot { width: 42px; height: 42px; }
.card-title { font: 400 clamp(1.3rem, 2vw, 1.6rem)/1.18 var(--serif); margin: 2px 0 4px; }
.card-sub { color: var(--muted); font-size: var(--t-small); margin: 0; }
.card-body { margin-top: var(--s5); }
.card-bar { display: flex; align-items: center; justify-content: flex-end; gap: var(--s3); margin-top: var(--s5); }
.card-bar .note { flex: 1; color: var(--muted); font-size: var(--t-meta); line-height: 1.4; margin: 0; }
.fake-btn { pointer-events: none; }

/* What it will do: a timeline, a few bold words a step with when above */
.plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.plan li { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: var(--s4); padding-bottom: var(--s4); }
.plan li::before { content: ""; grid-row: 1 / span 2; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px var(--teal-mist); }
.plan li:not(:last-child)::after { content: ""; position: absolute; left: 4px; top: 22px; bottom: 2px; width: 2px; background: var(--teal-mist); border-radius: 2px; }
.plan li.is-ask::before { background: var(--gold); box-shadow: 0 0 0 4px var(--gold-mist); }
.plan .when { color: var(--muted); font-size: var(--t-meta); line-height: 1.5; }
.plan .what { grid-column: 2; line-height: 1.45; }
.plan .what strong { font-weight: 600; }
.plan .what span { color: var(--muted); }

/* Small status pills: a dot and a word, coloured by meaning */
.pill { display: inline-flex; align-items: center; gap: 0.45em; font-size: var(--t-meta); font-weight: 600; color: var(--ink); white-space: nowrap; }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.pill.wait::before { background: var(--gold); }
.pill.done::before { background: var(--sage); }
.pill.late::before { background: var(--brick); }
.pill.soon::before { background: var(--sky); }

/* Rows inside a card: one height, title and one line under it, status at the right */
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s3); padding: 11px 14px; border-radius: 18px; background: var(--paper); }
.rows .row-title { font-weight: 600; line-height: 1.3; }
.rows .row-line { display: block; color: var(--muted); font-size: var(--t-meta); line-height: 1.35; }

/* The stacked bar: shares at a glance */
.stack { display: flex; gap: 3px; height: 12px; margin: var(--s2) 0 var(--s4); }
.stack span { border-radius: var(--r-pill); }
.stack .paid { background: linear-gradient(90deg, #8fbea2, #6fa587); }
.stack .owing { background: var(--gold); }
.stack .late { background: var(--brick); }
.stack .soon { background: linear-gradient(90deg, #b6cfe0, var(--sky)); }
.stack-key { display: flex; flex-wrap: wrap; gap: var(--s4); margin-bottom: var(--s4); }

/* Steps on a line: the drawing is the stop, with a line between */
.stops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); }
.stops li { position: relative; }
.stops .spot { width: 64px; height: 64px; margin-bottom: var(--s5); }
.stops li:not(:last-child)::after { content: ""; position: absolute; top: 31px; left: 92px; right: calc(-1 * clamp(24px, 4vw, 64px) + 20px); height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--teal-pale), var(--gold-pale)); }
.stops h3 { font-size: var(--t-sub); line-height: 1.15; margin-bottom: 0.35em; }
.stops p { max-width: 24em; }

/* The teal sheet: one per page at most */
.sheet-teal { position: relative; color: #fffdf8; background: radial-gradient(120% 90% at 85% 0%, #22706b 0%, var(--teal-ground) 55%, #174f4c 100%); border-radius: var(--r-sheet); padding: clamp(32px, 5.5vw, 88px) clamp(20px, 5vw, 80px); box-shadow: var(--paper-3); overflow: hidden; }
.sheet-teal h2, .sheet-teal h3 { color: #fffdf8; }
.sheet-teal .lede, .sheet-teal p { color: rgba(255, 253, 248, 0.86); }
.sheet-teal a:not(.btn) { color: var(--gold-pale); }
.sheet-teal .mark-house { fill: #fffdf8; }
.sheet-teal .logo { color: #fffdf8; }
/* Paper laid on the teal keeps paper's own ink */
.sheet-teal :is(.icon-cards, .card) h3 { color: var(--ink); }
.sheet-teal :is(.icon-cards, .card) p { color: var(--muted); }

/* A process, mapped on one line: the trigger, each step with its switch, the owner's diamond, and the end */
.map { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; }
.map > li { position: relative; display: grid; justify-items: center; align-content: start; text-align: center; padding: 0 6px; }
.map > li:not(:last-child)::after { content: ""; position: absolute; top: 25px; left: calc(50% + 30px); right: calc(-50% + 30px); height: 2px; background: rgba(255, 253, 248, 0.32); }
.map > li:not(:last-child)::before { content: ""; position: absolute; top: 21px; right: calc(-50% + 28px); width: 0; height: 0; border-left: 8px solid rgba(255, 253, 248, 0.5); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.map .glyph { height: 52px; display: grid; place-items: center; }
.map .glyph .spot { width: 44px; height: 44px; filter: drop-shadow(0 2px 3px rgba(10, 30, 30, 0.35)); }
.map .start { width: 14px; height: 14px; border-radius: 50%; background: #fffdf8; }
.map .end { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fffdf8; box-shadow: inset 0 0 0 4px var(--teal-ground), inset 0 0 0 9px #fffdf8; }
.map .diamond { width: 28px; height: 28px; transform: rotate(45deg); border-radius: 4px; background: var(--gold); box-shadow: 0 0 0 5px rgba(227, 173, 59, 0.25); }
.map .label { font-weight: 600; font-size: 0.98rem; line-height: 1.3; margin-top: var(--s3); color: #fffdf8; max-width: 11em; }
.map .says { font-size: var(--t-meta); color: var(--gold-pale); margin-top: 4px; }
.map .trigger { font-size: var(--t-meta); color: rgba(255, 253, 248, 0.75); margin-top: 4px; max-width: 11em; }
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: var(--s3); padding: 3px; border-radius: var(--r-pill); background: rgba(255, 253, 248, 0.14); }
.seg button { font: 600 0.84rem/1 var(--sans); color: rgba(255, 253, 248, 0.86); background: transparent; border: 0; border-radius: var(--r-pill); padding: 8px 11px; cursor: pointer; transition: background 200ms var(--out), color 200ms var(--out), box-shadow 200ms var(--out); }
.seg button:hover { color: #fff; }
.seg button[aria-pressed="true"] { background: #fffdf8; color: var(--teal-deep); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }
.map-note { margin-top: clamp(28px, 3.5vw, 44px); min-height: 3.2em; font-size: 1.08rem; color: #fffdf8; max-width: 46em; }
.map-note strong { color: var(--gold-pale); }
.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin-top: clamp(36px, 4.5vw, 64px); }
.modes h3 { font-size: 1.5rem; margin-bottom: 0.3em; }
.modes p { font-size: 1rem; }

/* The tenant's phone */
.phone-scene { display: grid; justify-items: end; padding: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 56px); --scene-min: 780px; }
/* The home with its lights on stands at the left of the evening, so the phone stands to the right of it. */
.phone-scene .scene { left: 0; transform: none; }
.phone { position: relative; width: min(320px, 82vw); aspect-ratio: 320 / 640; border-radius: 48px; padding: 11px; background: linear-gradient(160deg, #39465b, #1c2533); box-shadow: var(--paper-3), inset 0 0 0 1.5px rgba(255, 255, 255, 0.12); }
.screen { height: 100%; border-radius: 38px; background: var(--paper); overflow: hidden; padding: 30px 20px 18px; display: flex; flex-direction: column; gap: 14px; font-size: 15px; line-height: 1.4; }
.screen-title { font: 400 1.42rem/1.15 var(--serif); }
.screen-ref { color: var(--muted); font-size: 13px; margin-top: -8px; }
.progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.progress span { height: 6px; border-radius: 6px; background: #e3e7e6; }
.progress span.on { background: var(--teal); }
.progress span.now { background: linear-gradient(90deg, var(--teal), var(--gold)); }
.progress-words { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; font-size: 11.5px; color: var(--muted); line-height: 1.25; margin-top: -8px; }
.progress-words b { color: var(--ink); font-weight: 600; }
.bubble { max-width: 86%; padding: 10px 14px; border-radius: 18px; font-size: 14px; line-height: 1.4; }
.bubble.mine { align-self: flex-end; background: var(--teal); color: #fff; border-bottom-right-radius: 6px; }
.bubble.theirs { align-self: flex-start; background: var(--sheet); box-shadow: var(--paper-1); border-bottom-left-radius: 6px; }
.bubble-time { align-self: center; font-size: 12px; color: var(--muted); }
.screen-input { margin-top: auto; height: 42px; border-radius: var(--r-pill); background: var(--sheet); box-shadow: inset 0 0 0 1px var(--field-line); color: var(--muted); display: flex; align-items: center; padding: 0 6px 0 16px; justify-content: space-between; font-size: 14px; }
.screen-input i { width: 30px; height: 30px; border-radius: 50%; background: var(--teal-pale); }
.float-card { position: absolute; width: min(300px, 74vw); background: var(--sheet); border-radius: var(--r-card); box-shadow: var(--paper-3); padding: 16px 18px; font-size: 0.98rem; line-height: 1.4; }
.float-card .q { font-weight: 600; margin-bottom: 6px; }
.float-card .a { color: var(--ink); }
.float-card .from { color: var(--muted); font-size: var(--t-meta); margin-top: 8px; }
.float-left { left: clamp(16px, 3vw, 40px); top: 14%; }
@media (min-width: 761px) {
  .phone-scene .phone { width: min(300px, 80vw); }
  .phone-scene .float-card { width: min(236px, 42%); }
}
.float-right { right: 0; top: 10%; }

/* A day on your street: one long scroll is one day, from 7 in the morning to midnight. The street stays put on screen while the
   page scrolls past it (sticky), the sky turns, the lights come on, the camera pans to where something is happening, and each
   thing the agent does appears on its building at its hour, then folds into a small tick. Without the script, or with reduced
   motion, it's a still picture and the same day as a list. */
.story { padding-top: var(--gap-loud); }
.story-head { margin-bottom: clamp(24px, 3vw, 44px); }
.story-track { position: relative; }
html.motion .story-track { height: 560vh; }
html.motion .story-stick { position: sticky; top: 86px; height: calc(100vh - 104px); }
@supports (height: 100svh) { html.motion .story-stick { height: calc(100svh - 104px); } }
.story-frame { position: relative; height: clamp(380px, 52vw, 780px); margin: 0 auto; width: calc(100% - 2 * var(--edge)); max-width: calc(1440px - 2 * var(--edge)); border-radius: var(--r-sheet); overflow: hidden; background: #aecdcc; box-shadow: var(--paper-2); isolation: isolate; }
html.motion .story-frame { height: 100%; min-height: 380px; }
.story-pano { position: absolute; left: 0; bottom: 0; width: 100%; aspect-ratio: 3200 / 1200; transform: translate3d(var(--pan, 0px), 0, 0); will-change: transform; }
.pano-layer, .pano-far { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.story-pano [data-fade] { opacity: 0; }
.warm { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(250, 186, 120, 0.1), rgba(236, 150, 96, 0.34)); mix-blend-mode: multiply; pointer-events: none; }
.sun, .moon { position: absolute; left: var(--x, 10%); top: var(--y, 60%); width: 3.4%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; }
.sun { background: radial-gradient(circle at 40% 38%, #fbe7a7, #efc55f 70%); box-shadow: 0 0 0 1.4vw rgba(246, 214, 126, 0.26), 0 0 6vw 3vw rgba(246, 214, 126, 0.38); }
.sun::before { content: ""; position: absolute; left: 50%; top: 50%; width: 2600%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none;
  background: repeating-conic-gradient(from 4deg, rgba(255, 250, 232, 0) 0deg, rgba(255, 250, 232, 0.5) 2.5deg, rgba(255, 250, 232, 0) 6deg, rgba(255, 250, 232, 0) 16deg);
  -webkit-mask: radial-gradient(closest-side, #000 3%, rgba(0, 0, 0, 0.45) 22%, transparent 70%); mask: radial-gradient(closest-side, #000 3%, rgba(0, 0, 0, 0.45) 22%, transparent 70%); }
html.motion .sun::before { animation: turn 240s linear infinite; }
.pano-grain { position: absolute; inset: 0; pointer-events: none; background: url("../img/grain.png") 0 0 / 180px; }
.moon { width: 2.6%; opacity: 0; background: radial-gradient(circle at 38% 36%, #fffaf0, #f3e7c4 72%); box-shadow: 0 0 0 1vw rgba(252, 243, 212, 0.12), 0 0 5vw 2vw rgba(252, 243, 212, 0.22); }
/* The van, the plumber and the bins are sheets the size of the whole street (tools/street.py draws them in place), so they only
   need to arrive: the van drives in from the left, the others appear. */
.pano-sprite { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; filter: brightness(calc(1 - var(--night, 0) * 0.58)) saturate(calc(1 - var(--night, 0) * 0.35)); transition: translate 1.6s cubic-bezier(0.16, 0.84, 0.3, 1), opacity 500ms var(--out); }
.pano-sprite:not(.is-here) { opacity: 0; }
.day-van:not(.is-here) { translate: -26% 0; opacity: 0; transition: translate 1.6s cubic-bezier(0.16, 0.84, 0.3, 1), opacity 200ms linear 1.2s; }
.day-person:not(.is-here), .day-bins:not(.is-here) { translate: 0 0.8%; }
.story-note { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.note-dot { position: absolute; left: 0; top: 0; width: 16px; height: 16px; translate: -50% -50%; border-radius: 50%; background: var(--sheet); box-shadow: 0 0 0 5px rgba(255, 253, 248, 0.42), 0 2px 6px rgba(33, 44, 61, 0.3); scale: 0; transition: scale 400ms var(--settle), background 300ms var(--out); }
.note-card { position: absolute; left: 0; bottom: 26px; width: min(300px, 72vw); translate: -50% 0; background: var(--sheet); border-radius: var(--r-card); padding: 16px 18px 18px; box-shadow: 0 0 0 1px rgba(33, 44, 61, 0.04), 0 2px 4px rgba(33, 44, 61, 0.1), 0 30px 50px -24px rgba(20, 40, 40, 0.55); opacity: 0; scale: 0.92; filter: blur(4px); transform-origin: 50% 100%; transition: opacity 360ms var(--out), scale 460ms var(--settle), filter 360ms var(--out); pointer-events: none; }
.note-card::after { content: ""; position: absolute; left: 50%; bottom: -20px; width: 2px; height: 20px; translate: -1px 0; background: var(--sheet); border-radius: 2px; }
.note-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 8px; }
.note-head .spot { width: 34px; height: 34px; }
.note-when { margin: 0; font-size: var(--t-meta); color: var(--muted); }
.note-card h3 { font-size: 1.28rem; line-height: 1.15; }
.note-card p:not(.note-when) { font-size: 0.97rem; line-height: 1.42; margin: 0 0 10px; }
.story-note.is-now .note-card { opacity: 1; scale: 1; filter: none; }
.story-note.is-now .note-dot, .story-note.is-past .note-dot { scale: 1; }
.story-note.is-past .note-dot { background: var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.4 8.3l2.3 2.3 4.9-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.story-note.is-final .note-dot { display: none; }
.story-note.is-final .note-card { bottom: auto; top: 0; translate: -50% 0; }
.story-note.is-final .note-card::after { display: none; }
.story-clock { position: absolute; left: clamp(20px, 3vw, 44px); top: clamp(14px, 2.4vw, 34px); margin: 0; font: 400 clamp(2.6rem, 6vw, 5.6rem)/1 var(--serif); font-variant-numeric: tabular-nums; color: color-mix(in srgb, #fffdf8 calc(var(--night, 0) * 100%), var(--ink)); pointer-events: none; }
.story-clock .ampm { font-size: 0.42em; margin-left: 0.18em; }
.story-list { margin-top: clamp(28px, 4vw, 48px); max-width: 760px; }
html.motion .story-list { display: none; }

/* A list of short facts, set like a book page */
.facts { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s3); }
.facts li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--s3); align-items: start; }
.facts li::before { content: ""; width: 18px; height: 18px; margin-top: 4px; border-radius: 50%; background: var(--tint-sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.4' fill='none' stroke='%235f8f74' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.facts.cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 56px); }
.facts.no li::before { background: var(--tint-brick) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M6 6l6 6M12 6l-6 6' fill='none' stroke='%23c8654a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px no-repeat; }

/* Switching: files dropped in, and what was found */
.drop { position: relative; background: var(--sheet); border-radius: var(--r-widget); box-shadow: var(--paper-2); padding: clamp(18px, 2.6vw, 28px); }
.drop-scene { padding: clamp(24px, 4vw, 56px) clamp(16px, 3.5vw, 48px) clamp(120px, 14vw, 200px); --scene-min: 900px; }
/* The van and the boxes are at the right of moving day: keep them in view however narrow the frame. */
.drop-scene .scene { left: auto; right: 0; transform: none; }
.drop-zone { position: relative; min-height: 132px; border-radius: var(--r-card); background: var(--paper); box-shadow: inset 0 0 0 2px var(--teal-mist); display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 10px; padding: 18px; }
.drop-hint { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-weight: 600; transition: opacity 300ms var(--out); }
.drop.has-files .drop-hint { opacity: 0; }
.file { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; border-radius: 12px; background: var(--white); box-shadow: var(--paper-1); font-size: 0.93rem; font-weight: 600; }
.file .spot { width: 24px; height: 24px; }
html.motion .drop .file { opacity: 0; transform: translateY(-40px) rotate(-3deg); transition: opacity 500ms var(--out), transform 700ms var(--settle); transition-delay: calc(var(--i) * 260ms); }
html.motion .drop.has-files .file { opacity: 1; transform: none; }
.found { margin-top: var(--s4); }
.found-title { font-weight: 600; margin: 0 0 var(--s3); }
html.motion .drop .found > * { opacity: 0; transform: translateY(10px); transition: opacity 500ms var(--out), transform 600ms var(--out); transition-delay: calc(var(--i, 0) * 140ms + 1100ms); }
html.motion .drop.has-files .found > * { opacity: 1; transform: none; }
.drop .card-bar { margin-top: var(--s4); }

/* Questions and answers in rows, question on the left */
.qa { display: grid; gap: clamp(28px, 3.5vw, 44px); margin: 0; }
.qa-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s3) clamp(24px, 5vw, 80px); }
.qa dt { font: 400 clamp(1.3rem, 1.9vw, 1.65rem)/1.2 var(--serif); }
.qa dd { margin: 0; max-width: 40em; }

/* Folds: a paper row, its question on the left, one chevron at the right */
.folds { display: grid; gap: 10px; }
details.fold { background: var(--sheet); border-radius: var(--r-card); box-shadow: var(--paper-1); transition: box-shadow 240ms var(--out); }
details.fold:hover { box-shadow: var(--paper-2); }
details.fold summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: 20px 24px; font-weight: 600; font-size: 1.08rem; line-height: 1.35; }
details.fold summary::-webkit-details-marker { display: none; }
details.fold summary::after { content: ""; flex: none; width: 9px; height: 9px; border: solid var(--teal); border-width: 0 2px 2px 0; transform: translateY(-3px) rotate(45deg); transition: transform 240ms var(--out); }
details.fold[open] summary::after { transform: translateY(2px) rotate(-135deg); }
details.fold .fold-body { padding: 0 24px 22px; max-width: 46em; }
.fold-group + .fold-group { margin-top: clamp(40px, 5vw, 72px); }
.fold-group h2 { font-size: var(--t-sub); margin-bottom: var(--s4); }

/* Features, a group at a time: its drawing, name and line on the left, what's in it on the right */
.group { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 96px); padding: clamp(40px, 5vw, 72px) 0; }
.group-head { align-self: start; position: sticky; top: 108px; }
.group-head .spot { width: 56px; height: 56px; margin-bottom: var(--s4); }
.group-head h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.08; margin-bottom: 0.35em; }
.items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) clamp(24px, 3.5vw, 56px); }
.items li strong { display: block; font-weight: 600; margin-bottom: 2px; }
.items li span { color: var(--muted); font-size: 1rem; line-height: 1.45; display: block; }
.items li em { font-style: normal; font-size: var(--t-meta); font-weight: 600; color: var(--teal-deep); background: var(--teal-mist); border-radius: var(--r-pill); padding: 2px 8px; margin-left: 6px; white-space: nowrap; }

/* Paper cards with a drawing: for a handful of things side by side */
.icon-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.icon-cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.icon-cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.icon-cards li, .icon-cards > a { display: block; background: var(--sheet); border-radius: var(--r-card); box-shadow: var(--paper-1); padding: 22px 22px 24px; color: var(--ink); text-decoration: none; transition: box-shadow 240ms var(--out), transform 240ms var(--out); }
.icon-cards > a:hover { box-shadow: var(--paper-2); transform: translateY(-2px); }
.icon-cards .spot { width: 44px; height: 44px; margin-bottom: var(--s4); }
.icon-cards h3 { font-size: 1.35rem; line-height: 1.2; margin-bottom: 0.3em; }
.icon-cards p { font-size: 1rem; color: var(--muted); line-height: 1.45; }

/* Pricing */
.price { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.price-sheet { background: var(--sheet); border-radius: var(--r-sheet); box-shadow: var(--paper-3); padding: clamp(28px, 4vw, 56px); }
.price-figure { display: flex; align-items: flex-start; gap: 6px; font-family: var(--serif); line-height: 0.9; }
.price-figure .currency { font-size: clamp(1.6rem, 2.6vw, 2.4rem); margin-top: 0.25em; }
.price-figure .amount { font-size: clamp(5.5rem, 12vw, 10rem); }
.price-per { font-size: var(--t-lede); margin: var(--s3) 0 var(--s5); }
.price-min { color: var(--muted); }
.calc { margin-top: var(--s6); padding: var(--s5); border-radius: var(--r-card); background: var(--paper); }
.calc label { display: block; font-weight: 600; margin-bottom: var(--s3); }
.calc-row { display: flex; align-items: center; gap: var(--s4); }
.calc input[type="range"] { flex: 1; accent-color: var(--teal); height: 32px; }
.calc input[type="number"] { width: 110px; }
.calc-out { margin-top: var(--s4); font-size: 1.15rem; }
.calc-out strong { font-family: var(--serif); font-weight: 400; font-size: 2rem; }

/* Forms */
.form { display: grid; gap: var(--s5); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.field label, .field .label { display: block; font-weight: 600; margin-bottom: 6px; }
.field .hint { color: var(--muted); font-weight: 400; font-size: var(--t-small); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea { width: 100%; min-height: 50px; padding: 12px 16px; font: 400 1.05rem/1.4 var(--sans); color: var(--ink); background: var(--white); border: 1px solid var(--field-line); border-radius: 14px; transition: border-color 160ms var(--out), box-shadow 160ms var(--out); appearance: none; -webkit-appearance: none; }
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231f6f6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px; padding-right: 40px; }
textarea { min-height: 130px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-mist); }
.choice { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: var(--r-pill); background: var(--surface); width: 100%; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice label { margin: 0; text-align: center; font-weight: 600; font-size: 0.98rem; padding: 11px 10px; border-radius: var(--r-pill); cursor: pointer; transition: background 200ms var(--out), box-shadow 200ms var(--out), color 200ms var(--out); }
.choice input:checked + label { background: var(--sheet); box-shadow: var(--paper-1); color: var(--teal-deep); }
.choice input:focus-visible + label { outline: 2px solid var(--teal); outline-offset: 2px; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { color: var(--muted); font-size: var(--t-small); }
.form-error { color: var(--brick); font-weight: 600; }
.form-sheet { background: var(--sheet); border-radius: var(--r-sheet); box-shadow: var(--paper-2); padding: clamp(24px, 4vw, 52px); }

/* Prose: legal pages and anything read straight through */
.prose { max-width: 760px; }
.prose h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.15; margin: 1.6em 0 0.5em; }
.prose h3 { font-family: var(--sans); font-weight: 600; font-size: 1.1rem; margin: 1.4em 0 0.4em; }
.prose ul { padding-left: 1.2em; margin: 0 0 1em; }
.prose li { margin-bottom: 0.4em; }
.prose .updated { color: var(--muted); }

/* Doors: two ways in, side by side */
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 32px); }
.door { background: var(--sheet); border-radius: var(--r-sheet); box-shadow: var(--paper-2); padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; align-items: flex-start; }
.door .spot { width: 60px; height: 60px; margin-bottom: var(--s5); }
.door h2 { font-size: clamp(1.8rem, 2.8vw, 2.5rem); line-height: 1.1; margin-bottom: 0.4em; }
.door .btn { margin-top: auto; }
.door p:last-of-type { margin-bottom: var(--s5); }

/* Copies side by side: each company on its own */
.copies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); margin-top: clamp(32px, 4vw, 56px); }
.copy { background: rgba(255, 253, 248, 0.08); border-radius: var(--r-widget); padding: 22px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.copy-name { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #fffdf8; margin-bottom: 14px; }
.copy-name .mark { width: 26px; }
.copy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.copy li { background: var(--sheet); color: var(--ink); border-radius: 16px; padding: 10px 14px; font-size: 0.95rem; font-weight: 600; display: flex; justify-content: space-between; gap: 8px; }
.copy li span { color: var(--muted); font-weight: 400; }
.copy.a .mark-house { fill: var(--gold-pale); }
.copy.b .mark-house { fill: #c9a3d6; }
.copy.c .mark-house { fill: #a9d3e8; }
.copy .mark-lit { fill: var(--teal-ground); }

/* Closing call to action */
.closing { text-align: left; }
.closing .section-title { max-width: 14ch; }
.closing .btn-row { margin-top: clamp(24px, 3vw, 40px); }

/* The footer: the links on a paper sheet, then the lake town at sunset (tools/street.py, foot()), full width, the sheet's rounded edge
   resting on its sky. eaven's name stands behind the hills and rises as the page ends, while the sun goes down, the swallows fly and
   the van drives the shore road. Then the near shore's dusk carries on into the band with the fine print. */
.foot { margin-top: var(--gap-quiet); background: #1d3a37; }
.foot-sheet { position: relative; z-index: 2; padding: clamp(56px, 6vw, 96px) 0 clamp(56px, 6vw, 88px); background: var(--paper) url("../img/paper.png") 0 0 / 160px;
  border-radius: 0 0 var(--r-sheet) var(--r-sheet); box-shadow: 0 30px 50px -30px rgba(22, 50, 52, 0.45); }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--s6) clamp(24px, 3vw, 48px); }
.foot-brand .logo-svg { height: 2.4rem; }
.foot-brand p { color: var(--muted); max-width: 25em; margin: var(--s4) 0 var(--s5); }
.foot-brand .foot-clock { margin: var(--s5) 0 0; font: 400 0.8rem/1.4 var(--mono); color: var(--teal-deep); }
.foot-col { display: grid; align-content: start; gap: 2px; }
.foot-col h2 { font: 500 0.78rem/1.3 var(--mono); color: var(--muted); margin-bottom: var(--s3); }
.foot-col a { color: var(--ink); text-decoration: none; padding: 5px 12px; margin-left: -12px; border-radius: 12px; width: max-content; max-width: 100%; transition: background 160ms var(--out); }
.foot-col a:hover { background: var(--surface-hover); }

.foot-scene { position: relative; z-index: 1; margin-top: calc(-1 * var(--r-sheet)); height: clamp(380px, 43vw, 780px); overflow: hidden; container-type: size; background: #e9c4a8; }
.foot-scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("../img/grain.png") 0 0 / 180px; }
.foot-stage { position: absolute; left: 50%; bottom: 0; width: max(100cqw, 230.77cqh); aspect-ratio: 30 / 13; translate: -50% 0; --rise: 1; }
.foot-layer { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.foot-dusk { position: absolute; inset: 0 0 33% 0; background: linear-gradient(180deg, rgba(60, 70, 110, 0.55), rgba(120, 80, 110, 0.25) 60%, rgba(240, 150, 110, 0)); opacity: calc(var(--rise) * 0.5); pointer-events: none; }
.foot-sun { position: absolute; left: 86%; top: calc(53% + var(--rise) * 9%); width: 3.4%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, #fff6d8, #ffe7a8 60%, #f9cf7c); box-shadow: 0 0 0 1.4cqw rgba(255, 226, 160, 0.28), 0 0 9cqw 4cqw rgba(255, 210, 140, 0.45); }
/* The name: as wide as the scene allows, standing behind the hills, risen by --rise. Its bird is the logo's. */
.foot-word { position: absolute; left: 50%; bottom: 38%; width: min(62%, 88cqw); translate: -50% calc((1 - var(--rise)) * 62%); }
.foot-word svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0.4cqw 1.2cqw rgba(60, 50, 80, 0.25)); }
/* Swallows: they nest under eaves and come back to the same one every year. Four of them, crossing the evening sky. */
.foot-birds { position: absolute; inset: 0 0 34% 0; pointer-events: none; }
.foot-bird { position: absolute; inset: 0; }
.foot-bird i { position: absolute; left: 0; top: 0; width: 1.5%; display: block; }
.foot-bird svg { display: block; width: 100%; height: auto; fill: #3b4a5a; overflow: visible; }
.foot-bird.b2 i { width: 1.1%; }
.foot-bird.b3 i { width: 0.9%; }
.foot-bird.b4 i { width: 1.25%; }
html.motion .foot-bird { animation: swoop 26s linear infinite; }
html.motion .foot-bird.b2 { animation-duration: 31s; animation-delay: -9s; animation-name: swoop-2; }
html.motion .foot-bird.b3 { animation-duration: 37s; animation-delay: -20s; }
html.motion .foot-bird.b4 { animation-duration: 29s; animation-delay: -15s; animation-name: swoop-2; }
html.motion .foot-bird svg { animation: beat 420ms ease-in-out infinite alternate; transform-origin: 50% 60%; }
@keyframes swoop { 0% { transform: translate(-6%, 52%) rotate(8deg); } 22% { transform: translate(22%, 26%) rotate(-14deg); } 40% { transform: translate(44%, 40%) rotate(10deg); }
  60% { transform: translate(63%, 18%) rotate(-12deg); } 80% { transform: translate(84%, 34%) rotate(8deg); } 100% { transform: translate(106%, 12%) rotate(-10deg); } }
@keyframes swoop-2 { 0% { transform: translate(106%, 30%) rotate(-172deg) scaleY(-1); } 30% { transform: translate(72%, 14%) rotate(-196deg) scaleY(-1); }
  55% { transform: translate(48%, 36%) rotate(-166deg) scaleY(-1); } 78% { transform: translate(22%, 20%) rotate(-192deg) scaleY(-1); } 100% { transform: translate(-6%, 44%) rotate(-170deg) scaleY(-1); } }
@keyframes beat { from { transform: scaleY(1); } to { transform: scaleY(0.6); } }
html.motion .foot-glint { animation: glint 5s ease-in-out infinite alternate; }
@keyframes glint { 0% { translate: -0.3% 0; opacity: 0.55; } 50% { opacity: 1; } 100% { translate: 0.3% 0.2%; opacity: 0.7; } }

/* The near shore's dusk carries on into the band with the fine print. */
.foot-base { background: #1d3a37; color: rgba(255, 253, 248, 0.72); }
.foot-base-in { padding-top: clamp(20px, 2.4vw, 32px); padding-bottom: clamp(28px, 3vw, 44px); }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s2) var(--s5); padding-bottom: var(--s4); margin-bottom: var(--s4);
  border-bottom: 1px solid rgba(255, 253, 248, 0.14); }
.foot-legal p { margin: 0; color: #fffdf8; }
.foot-legal nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.foot-legal a { color: #fffdf8; text-decoration: none; }
.foot-legal a:hover { text-decoration: underline; }
.foot-base-in > p { max-width: 900px; margin: 0; font-size: var(--t-meta); line-height: 1.6; }
html.still .foot-stage { --rise: 1; }

/* The drawn icons move only when the link or button they sit on is pointed at: each its own way, once */
@media (prefers-reduced-motion: no-preference) {
  .spot .sp-lid { transform-origin: 96% 100%; }
  .spot .sp-letter { transform-origin: 50% 100%; }
  .spot :is(.sp-mark, .sp-seal, .sp-equals, .sp-suds, .sp-topcoin, .sp-dot) { transform-origin: 50% 50%; }
  .spot :is(.sp-bar, .sp-core, .sp-outer, .sp-drop, .sp-mop) { transform-origin: 50% 100%; }
  .spot .sp-msg { transform-origin: 0% 50%; }
  .spot .sp-page { transform-origin: 0% 50%; }
  .spot .sp-key { transform-origin: 22% 22%; }
  .spot .sp-wrench { transform-origin: 72% 28%; }
  .spot :is(.sp-hour, .sp-minute) { transform-box: view-box; transform-origin: 24px 23.2px; }
  .spot .sp-bell, .spot .sp-clapper { transform-box: view-box; transform-origin: 24px 8px; }
  .spot .sp-flap-left { transform-origin: 100% 100%; }
  .spot .sp-flap-right { transform-origin: 0% 100%; }
  .spot :is(.sp-back, .sp-front, .sp-handle) { transform-origin: 50% 100%; }
  :is(a, button, summary, label, .icon-cards li, .group-head, .door):hover .spot, .spot.is-playing {
    & .sp-lid { animation: sp-lid 900ms cubic-bezier(0.3, 1.2, 0.5, 1) both; }
    & .sp-dot { animation: sp-type 520ms ease-in-out 2 both; }
    & .sp-dot2 { animation-delay: 120ms; }
    & .sp-dot3 { animation-delay: 240ms; }
    & .sp-letter { animation: sp-rise 800ms cubic-bezier(0.3, 1.2, 0.5, 1) both; }
    & .sp-mark { animation: sp-pop 600ms cubic-bezier(0.3, 1.4, 0.5, 1) both; }
    & .sp-seal { animation: sp-stamp 560ms cubic-bezier(0.3, 1.2, 0.5, 1) both; }
    & .sp-key { animation: sp-turn 800ms cubic-bezier(0.4, 1.1, 0.5, 1) both; }
    & .sp-wrench { animation: sp-tighten 820ms ease-in-out both; }
    & .sp-front { animation: sp-hop 560ms cubic-bezier(0.3, 1.3, 0.5, 1) both; }
    & .sp-back { animation: sp-hop 560ms cubic-bezier(0.3, 1.3, 0.5, 1) 160ms both; }
    & .sp-bar { animation: sp-grow 640ms cubic-bezier(0.3, 1.25, 0.5, 1) both; }
    & .sp-bar2 { animation-delay: 90ms; }
    & .sp-bar3 { animation-delay: 180ms; }
    & .sp-lit { animation: sp-flicker 900ms steps(1, end) both; }
    & .sp-page { animation: sp-turn-page 900ms ease-in-out both; }
    & .sp-equals { animation: sp-press 420ms ease-out both; }
    & .sp-outer { animation: sp-flame 900ms ease-in-out both; }
    & .sp-core { animation: sp-core 900ms ease-in-out both; }
    & .sp-drop { animation: sp-drip 760ms cubic-bezier(0.3, 1.2, 0.5, 1) both; }
    & .sp-topcoin { animation: sp-toss 860ms cubic-bezier(0.35, 0.9, 0.4, 1) both; }
    & .sp-msg { animation: sp-message 420ms cubic-bezier(0.3, 1.3, 0.5, 1) both; }
    & .sp-msg2 { animation-delay: 160ms; }
    & .sp-msg3 { animation-delay: 320ms; }
    & .sp-hour { animation: sp-hour 900ms ease-in-out both; }
    & .sp-minute { animation: sp-minute 900ms ease-in-out both; }
    & .sp-bell { animation: sp-ring 900ms ease-out both; }
    & .sp-clapper { animation: sp-clap 900ms ease-out both; }
    & .sp-handle { animation: sp-lift 700ms cubic-bezier(0.3, 1.2, 0.5, 1) both; }
    & .sp-flap-left { animation: sp-flap-left 800ms cubic-bezier(0.3, 1.2, 0.5, 1) both; }
    & .sp-flap-right { animation: sp-flap-right 800ms cubic-bezier(0.3, 1.2, 0.5, 1) 80ms both; }
  }
  @keyframes sp-lid { 0% { transform: none; } 35% { transform: rotate(-38deg); } 60% { transform: rotate(-34deg); } 82% { transform: rotate(3deg); } 100% { transform: none; } }
  @keyframes sp-type { 0%, 100% { transform: none; opacity: 1; } 40% { transform: translateY(-45%); opacity: 0.6; } }
  @keyframes sp-rise { 0% { transform: none; } 45% { transform: translateY(-22%); } 70% { transform: translateY(-18%); } 100% { transform: none; } }
  @keyframes sp-pop { 0% { transform: none; } 40% { transform: scale(1.35); } 70% { transform: scale(0.92); } 100% { transform: none; } }
  @keyframes sp-stamp { 0% { transform: scale(1.5); opacity: 0.4; } 55% { transform: scale(0.9); opacity: 1; } 100% { transform: none; } }
  @keyframes sp-turn { 0% { transform: none; } 25% { transform: translate(4%, 4%); } 60% { transform: translate(4%, 4%) rotate(70deg); } 80% { transform: translate(4%, 4%) rotate(64deg); } 100% { transform: none; } }
  @keyframes sp-tighten { 0% { transform: none; } 25% { transform: rotate(-26deg); } 42% { transform: rotate(-6deg); } 68% { transform: rotate(-26deg); } 100% { transform: none; } }
  @keyframes sp-hop { 0% { transform: none; } 40% { transform: translateY(-14%); } 70% { transform: translateY(2%) scale(1.03, 0.97); } 100% { transform: none; } }
  @keyframes sp-grow { 0% { transform: scaleY(0.25); } 70% { transform: scaleY(1.06); } 100% { transform: none; } }
  @keyframes sp-flicker { 0% { opacity: 1; } 15% { opacity: 0.25; } 30% { opacity: 1; } 45% { opacity: 0.4; } 60%, 100% { opacity: 1; } }
  @keyframes sp-turn-page { 0% { transform: none; opacity: 1; } 50% { transform: scaleX(-1); opacity: 1; } 72% { transform: scaleX(-1); opacity: 0; } 73% { transform: none; opacity: 0; } 100% { transform: none; opacity: 1; } }
  @keyframes sp-press { 0%, 100% { transform: none; } 40% { transform: scale(0.78); } }
  @keyframes sp-flame { 0%, 100% { transform: none; } 25% { transform: scale(1.04, 1.1) skewX(-3deg); } 50% { transform: scale(0.98, 0.95) skewX(2deg); } 75% { transform: scale(1.02, 1.06) skewX(-1deg); } }
  @keyframes sp-core { 0%, 100% { transform: none; } 20% { transform: scale(0.85, 1.2); } 45% { transform: scale(1.1, 0.9); } 70% { transform: scale(0.92, 1.12); } }
  @keyframes sp-drip { 0% { transform: none; } 40% { transform: translateY(8%) scale(0.94, 1.08); } 70% { transform: translateY(-2%) scale(1.04, 0.96); } 100% { transform: none; } }
  @keyframes sp-toss { 0% { transform: none; } 35% { transform: translateY(-70%) scaleY(-1); } 65% { transform: translateY(-20%) scaleY(1); } 80% { transform: translateY(0); } 90% { transform: translateY(-8%); } 100% { transform: none; } }
  @keyframes sp-message { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: none; } }
  @keyframes sp-hour { 0% { transform: none; } 100% { transform: rotate(30deg); } }
  @keyframes sp-minute { 0% { transform: none; } 100% { transform: rotate(360deg); } }
  @keyframes sp-ring { 0%, 100% { transform: none; } 15% { transform: rotate(14deg); } 35% { transform: rotate(-11deg); } 55% { transform: rotate(7deg); } 75% { transform: rotate(-3deg); } }
  @keyframes sp-clap { 0%, 100% { transform: none; } 18% { transform: rotate(-10deg); } 38% { transform: rotate(14deg); } 58% { transform: rotate(-8deg); } 78% { transform: rotate(4deg); } }
  @keyframes sp-lift { 0% { transform: none; } 40% { transform: translateY(-22%); } 70% { transform: translateY(4%); } 100% { transform: none; } }
  @keyframes sp-flap-left { 0% { transform: none; } 45% { transform: rotate(-28deg); } 70% { transform: rotate(-22deg); } 100% { transform: none; } }
  @keyframes sp-flap-right { 0% { transform: none; } 45% { transform: rotate(28deg); } 70% { transform: rotate(22deg); } 100% { transform: none; } }
}

/* Smaller windows ----------------------------------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .nav, .top-sign { display: none; }
  .menu-button { display: inline-flex; align-items: center; }
  .top-actions { margin-left: auto; }
  .split-2, .price { grid-template-columns: minmax(0, 1fr); }
  .icon-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .group { grid-template-columns: minmax(0, 1fr); }
  .group-head { position: static; }
  .foot-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .page-head-grid { grid-template-columns: minmax(0, 1fr); }
  .print-wrap { max-width: 480px; }
  /* The process map turns to run top to bottom */
  .map { grid-auto-flow: row; grid-auto-columns: auto; gap: 0; }
  .map > li { grid-template-columns: 52px minmax(0, 1fr); justify-items: start; text-align: left; column-gap: var(--s4); padding: 0 0 22px; }
  .map > li > :not(.glyph) { grid-column: 2; }
  .map .glyph { grid-row: 1 / span 4; width: 52px; height: 44px; }
  .map .label { margin-top: 10px; max-width: none; }
  .map .trigger, .map .says { max-width: none; }
  .map .seg { margin-top: 8px; }
  .map > li:not(:last-child)::after { top: 48px; bottom: 2px; left: 25px; right: auto; width: 2px; height: auto; }
  .map > li:not(:last-child)::before { display: none; }
  .modes, .stops, .copies { grid-template-columns: minmax(0, 1fr); }
  .stops li:not(:last-child)::after { display: none; }
  .stops li { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--s5); }
  .stops li > :not(.spot) { grid-column: 2; }
  .stops .spot { grid-row: 1 / span 2; margin: 0; }
  .qa-row { grid-template-columns: minmax(0, 1fr); }
  .doors { grid-template-columns: minmax(0, 1fr); }
  .items { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  /* Phones: Apple's text and control sizes; the big serif headlines stay big */
  body { font-size: 17px; }
  .hero-agent-box { margin-top: 16px; }
  .hero-stage { border-radius: var(--r-widget); }
  .hero-stage .layers { left: 58%; transform: translateX(-58%); }
  .agent-asks { justify-content: flex-start; }
  .card { padding: 20px 18px; }
  .card-head .spot { width: 34px; height: 34px; }
  .lede { font-size: 1.12rem; }
  .top-in { height: 64px; }
  .menu-card { top: 60px; right: 12px; }
  .card-bar { flex-wrap: wrap; }
  .card-bar .note { flex-basis: 100%; }
  .agent-box { height: 56px; font-size: 1rem; padding-left: 20px; }
  .agent-go { width: 42px; height: 42px; }
  .form-row, .facts.cols { grid-template-columns: minmax(0, 1fr); }
  .icon-cards, .icon-cards.three { grid-template-columns: minmax(0, 1fr); }
  .float-card { position: relative; inset: auto; width: 100%; margin-top: var(--s4); }
  .phone-scene { justify-items: stretch; }
  .phone-scene .scene { left: 50%; transform: translateX(-50%); }
  .phone { margin: 0 auto; }
  .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-col:last-child { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-col:last-child h2 { grid-column: 1 / -1; }
  .rows li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .calc-row { flex-wrap: wrap; }
  .calc input[type="range"] { flex-basis: 100%; }
}

@media (max-width: 520px) {
  .top-actions > .btn { display: none; }
  .hero-side .btn-row .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* Pages built out for investors and buyers alike (2026-11-12) -------------------------------------------------------------- */

/* A ruled table on paper: the first column says what the row is; the column for us is a raised sheet. Scrolls sideways in its own
   box on a phone rather than squeezing. */
.table-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--edge)); padding: 8px var(--edge) 4px; -webkit-overflow-scrolling: touch; }
.table { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; font-size: 1rem; line-height: 1.45; }
.table th, .table td { text-align: left; vertical-align: top; padding: 18px 20px; border-bottom: 1px solid var(--field-line); }
.table thead th { font: 600 0.95rem/1.3 var(--sans); color: var(--muted); padding-top: 22px; }
.table tbody th { font-weight: 600; width: 22%; color: var(--ink); }
.table td { color: var(--muted); }
.table .ours { background: var(--sheet); color: var(--ink); box-shadow: inset 1px 0 0 rgba(33, 44, 61, 0.05), inset -1px 0 0 rgba(33, 44, 61, 0.05); }
.table thead .ours { color: var(--teal); font: 400 1.35rem/1.2 var(--serif); border-radius: 18px 18px 0 0; }
.table tbody tr:last-child .ours { border-radius: 0 0 18px 18px; }
.table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: 0; }
.table-note { margin-top: var(--s4); font-size: var(--t-small); color: var(--muted); max-width: 70em; }

/* The price, large, on its own sheet, with the calculator under it; what's in it beside. */
.price-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.price-card { position: relative; background: var(--sheet); border-radius: var(--r-sheet); box-shadow: var(--paper-3); padding: clamp(28px, 4vw, 56px); overflow: hidden; isolation: isolate; }
.price-card::after { content: ""; position: absolute; inset: auto -10% -40% 30%; height: 70%; z-index: -1; background: radial-gradient(closest-side, rgba(246, 214, 126, 0.32), transparent); pointer-events: none; }
.price-card .price-figure { font-size: clamp(5.5rem, 11vw, 9rem); }
.price-card .btn-row { margin-top: var(--s5); }
.price-badges { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s5) 0 0; padding: 0; list-style: none; }
.price-badges li { font: 600 0.88rem/1 var(--sans); color: var(--teal-deep); background: var(--teal-mist); border-radius: var(--r-pill); padding: 9px 14px; }
.calc-year { display: block; margin-top: 4px; font-size: var(--t-small); color: var(--muted); }

/* What a month costs at a few sizes: one strip, the price under each. */
.sizes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--field-line); }
.sizes li { padding: 22px 18px 4px 0; border-right: 1px solid var(--field-line); }
.sizes li + li { padding-left: 18px; }
.sizes li:last-child { border-right: 0; }
.sizes .homes { display: block; font-size: var(--t-small); color: var(--muted); }
.sizes .cost { display: block; font: 400 clamp(1.7rem, 2.6vw, 2.4rem)/1.1 var(--serif); margin-top: 6px; }
.sizes .each { display: block; font-size: var(--t-meta); color: var(--muted); margin-top: 6px; }

/* Everything in the price, in groups: plain lists in columns, no boxes. */
.included { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px) clamp(28px, 4vw, 64px); }
.included h3 { font-size: var(--t-sub); }
.included .facts { margin-top: var(--s4); gap: 10px; font-size: 1.02rem; }

/* Two columns of terms: a word on the left, what it means on the right. */
.terms-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) clamp(32px, 5vw, 80px); margin: 0; }
.terms-list div { border-top: 1px solid var(--field-line); padding-top: var(--s4); }
.terms-list dt { font: 400 var(--t-sub)/1.2 var(--serif); margin-bottom: var(--s2); }
.terms-list dd { margin: 0; color: var(--muted); }

/* A band of figures, each with where it comes from. */
.figures { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
.figures li { border-top: 2px solid var(--ink); padding-top: var(--s4); }
.figures .big { display: block; font: 400 clamp(2.8rem, 5vw, 4.6rem)/1 var(--serif); }
.figures .what { display: block; margin-top: var(--s3); max-width: 22em; }
.figures .from { display: block; margin-top: var(--s2); font-size: var(--t-meta); color: var(--muted); }

/* Connections: one row each, what it does and where it stands. */
.links-group + .links-group { margin-top: clamp(40px, 5vw, 72px); }
.links-group > h3 { font-size: var(--t-sub); margin-bottom: var(--s4); }
.links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 64px); }
.links li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--s4); padding: 18px 0; border-top: 1px solid var(--field-line); }
.links .name { font-weight: 600; }
.links .does { grid-column: 1 / -1; color: var(--muted); font-size: 1rem; }
.links .pill { align-self: start; }

/* For large portfolios: a teal sheet with what changes at that size. */
.large { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.large .facts li::before { background-color: rgba(255, 253, 248, 0.16); }
.large .lede { color: rgba(255, 253, 248, 0.86); }

/* A short story in steps, numbered down the side. */
.chapters { list-style: none; margin: 0; padding: 0; counter-reset: ch; display: grid; gap: clamp(28px, 3.4vw, 48px); max-width: 980px; }
.chapters li { counter-increment: ch; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--s5); }
.chapters li::before { content: counter(ch, decimal-leading-zero); font: 400 2.2rem/1 var(--serif); color: var(--teal); }
.chapters h3 { font-size: var(--t-sub); margin-bottom: var(--s2); }
.chapters p { color: var(--muted); margin: 0; max-width: 46em; }

@media (max-width: 980px) {
  .hero-agent { grid-template-columns: minmax(0, 1fr); }
  .hero-agent-words { grid-column: 1; grid-row: 1; padding-top: var(--s6); }
  .hero-agent-box { grid-row: 2; }
  .price-top, .large { grid-template-columns: minmax(0, 1fr); }
  .sizes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sizes li:nth-child(3n) { border-right: 0; }
  .sizes li:nth-child(4) { padding-left: 0; }
  .included { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sizes li { border-right: 0; padding-left: 0 !important; }
  .included, .terms-list, .links { grid-template-columns: minmax(0, 1fr); }
  .chapters li { grid-template-columns: 52px minmax(0, 1fr); gap: var(--s3); }
  .chapters li::before { font-size: 1.6rem; }
}
.terms-list.on-teal { margin-top: clamp(28px, 4vw, 48px); }
.terms-list.on-teal div { border-top-color: rgba(255, 253, 248, 0.22); }
.terms-list.on-teal dd { color: rgba(255, 253, 248, 0.82); }

/* An index of the product: one ruled row each, the name in the serif, what it is, and an arrow that moves on hover. */
.index { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--field-line); }
.index li { border-top: 1px solid var(--field-line); }
.index a { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) 40px; gap: var(--s5); align-items: baseline; padding: 24px 12px; margin: 0 -12px; border-radius: 14px; color: var(--ink); text-decoration: none; transition: background 200ms var(--out); }
.index a:hover { background: var(--sheet); }
.index-name { font: 400 clamp(1.5rem, 2.4vw, 2.1rem)/1.1 var(--serif); }
.index-what { color: var(--muted); }
.index-go { justify-self: end; width: 12px; height: 12px; border: solid var(--teal); border-width: 2px 2px 0 0; transform: rotate(45deg); transition: transform 240ms var(--out); }
.index a:hover .index-go { transform: translateX(4px) rotate(45deg); }
.terms-list.on-teal a { color: #fffdf8; }
@media (max-width: 760px) {
  .index a { grid-template-columns: minmax(0, 1fr) 24px; gap: 6px var(--s3); }
  .index-what { grid-column: 1; }
  .index-go { grid-row: 1; grid-column: 2; }
}
/* On a phone the comparison stacks: each extra is a block, what it costs here and elsewhere underneath, each labelled. */
@media (max-width: 760px) {
  .table-wrap { overflow: visible; margin: 0; padding: 0; }
  .table, .table tbody, .table tr, .table th, .table td { display: block; width: auto; min-width: 0; }
  .table thead { display: none; }
  .table tr { padding: 18px 0; border-bottom: 1px solid var(--field-line); }
  .table th, .table td { padding: 0; border: 0; }
  .table tbody th { width: auto; font-size: 1.05rem; margin-bottom: 10px; }
  .table td + td { margin-top: 8px; }
  .table td::before { content: attr(data-label); display: block; font-size: var(--t-meta); font-weight: 600; color: var(--muted); }
  .table .ours { background: var(--sheet); box-shadow: var(--paper-1); border-radius: 14px; padding: 12px 14px; }
  .table .ours::before { color: var(--teal); }
  .table tbody tr:last-child .ours { border-radius: 14px; }
}


/* The tech layer (2026-11-12): the agent's view laid over the paper world, in its own monospace, kept quiet ------------------ */

.note-when, .figures .from, .pin-time, .log-time, .agent-trace, .log-head { font-family: var(--mono); font-feature-settings: "zero" 0; letter-spacing: 0; }
.note-when { font-size: 0.8rem; }
.figures .from { font-size: 0.78rem; }

/* A faint blueprint grid on the teal sheets, fading out toward the bottom */
.sheet-teal::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255, 253, 248, 0.16) 1px, transparent 1.6px); background-size: 24px 24px;
  -webkit-mask: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.35) 70%, transparent); mask: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.35) 70%, transparent); }
.sheet-teal > * { position: relative; z-index: 1; }

/* Notes pinned to the opening's houses: a dot that pulses on the building, a short line, and the agent's note. */
.pin { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; z-index: 2; }
.pin-dot { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px rgba(255, 253, 248, 0.9), 0 2px 6px rgba(22, 63, 61, 0.4); }
.pin-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid rgba(255, 253, 248, 0.9); opacity: 0; }
html.motion .pin-dot::after { animation: pin-ping 2.8s var(--out) infinite; animation-delay: calc(var(--i) * 1.4s + 3s); }
@keyframes pin-ping { 0% { transform: scale(1); opacity: 0.9; } 80%, 100% { transform: scale(3.2); opacity: 0; } }
.pin-card { position: absolute; bottom: 18px; display: grid; grid-template-columns: auto auto; column-gap: 10px; align-items: baseline; padding: 10px 14px 11px; width: max-content; max-width: 260px;
  background: rgba(255, 253, 248, 0.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 18px; box-shadow: var(--paper-2); font-size: 0.86rem; line-height: 1.3; }
.pin-card.right { left: -18px; }
.pin-card.left { right: -18px; }
.pin-card::after { content: ""; position: absolute; bottom: -12px; width: 2px; height: 12px; background: rgba(255, 253, 248, 0.95); }
.pin-card.right::after { left: 17px; }
.pin-card.left::after { right: 17px; }
.pin-time { font-size: 0.76rem; color: var(--teal); font-weight: 500; }
.pin-what { font-weight: 600; color: var(--ink); }
.pin-where { grid-column: 1 / -1; color: var(--muted); font-size: 0.8rem; margin-top: 2px; }
html.motion [data-diorama] .pin { opacity: 0; translate: 0 8px; transition: opacity 600ms var(--out), translate 600ms var(--out); transition-delay: calc(var(--i) * 700ms + 900ms); }
html.motion [data-diorama].van-here .pin { opacity: 1; translate: 0 0; }
@media (max-width: 760px) { .pin-card { font-size: 0.78rem; padding: 8px 11px 9px; } .pin-where { display: none; } }

/* The agent at work: its steps, one line each, between the question and the card. */
.agent-trace { list-style: none; margin: var(--s4) auto 0; padding: 0; width: min(560px, 100%); min-height: 76px; display: grid; gap: 4px; font-size: 0.8rem; color: #2d4a52; }
.agent-trace li { display: flex; align-items: center; gap: 10px; opacity: 0; translate: 0 4px; transition: opacity 260ms var(--out), translate 260ms var(--out); }
.agent-trace li.is-on { opacity: 1; translate: 0 0; }
.agent-trace li::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(31, 111, 106, 0.35); border-top-color: var(--teal); }
html.motion .agent-trace li:not(.is-done)::before { animation: spin 700ms linear infinite; }
.agent-trace li.is-done::before { border-color: var(--teal); background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 6.2l1.8 1.8 3.8-4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
@keyframes spin { to { transform: rotate(360deg); } }

/* The activity log: a sheet like the portal's own, rows arriving at the top. */
.log-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.log { margin: 0; background: var(--sheet); border-radius: var(--r-widget); box-shadow: var(--paper-3); overflow: hidden; }
.log-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--field-line); font-size: 0.82rem; color: var(--muted); }
.log-name { color: var(--ink); font-weight: 500; }
.log-live { display: inline-flex; align-items: center; gap: 8px; color: var(--teal); }
.log-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 0 rgba(95, 143, 116, 0.5); }
html.motion .log-live::before { animation: live 2s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(95, 143, 116, 0.55); } 100% { box-shadow: 0 0 0 9px rgba(95, 143, 116, 0); } }
.log-rows { list-style: none; margin: 0; padding: 6px 0; }
.log-rows li { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 22px; border-bottom: 1px solid rgba(33, 44, 61, 0.06); }
.log-rows li:last-child { border-bottom: 0; }
.log-time { font-size: 0.8rem; color: var(--muted); }
.log-what { display: grid; font-size: 0.98rem; line-height: 1.35; }
.log-where { font-size: 0.84rem; color: var(--muted); }
html.motion .log-rows li.is-new { animation: log-in 520ms var(--out) both; }
@keyframes log-in { from { opacity: 0; transform: translateY(-10px); background: var(--gold-mist); } 60% { background: var(--gold-mist); } to { opacity: 1; transform: none; background: transparent; } }
@media (max-width: 980px) { .log-wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .log-rows li { grid-template-columns: 44px minmax(0, 1fr); } .log-rows .pill { grid-column: 2; } }
/* The agent's sky covers its whole frame, however tall the card makes it: cropped at the sides, never short at the top. */


/* The three plans: paper cards side by side, Growth raised; the one the calculator picks is outlined in teal. */
.plans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); align-items: stretch; }
.plan-card { display: flex; flex-direction: column; background: var(--sheet); border-radius: var(--r-widget); box-shadow: var(--paper-2); padding: clamp(24px, 3vw, 40px); outline: 2px solid transparent; outline-offset: -2px; transition: outline-color 240ms var(--out), box-shadow 240ms var(--out); }
.plan-card.is-main { box-shadow: var(--paper-3); }
.plan-card.is-picked { outline-color: var(--teal); }
.plan-name { font-size: var(--t-sub); }
.plan-for { color: var(--muted); margin: 6px 0 var(--s5); }
.plan-price { display: flex; align-items: flex-start; gap: 4px; font-family: var(--serif); line-height: 0.9; }
.plan-price .currency { font-size: 1.6rem; margin-top: 0.3em; }
.plan-price .amount { font-size: clamp(3.6rem, 6vw, 5rem); }
.plan-unit { align-self: flex-end; margin: 0 0 0.5em 8px; font: 400 1rem/1.2 var(--sans); color: var(--muted); }
.plan-terms { margin: var(--s3) 0 0; font-family: var(--mono); font-size: 0.82rem; color: var(--teal-deep); }
.plan-card .facts { margin: var(--s5) 0 var(--s6); flex: 1; font-size: 1rem; gap: 10px; }
.plan-card > .btn { align-self: flex-start; }
.plans-badges { justify-content: center; margin-top: clamp(24px, 3vw, 40px); }
.plans-table td { width: 26%; }
@media (max-width: 980px) { .plans { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; } }
@media (max-width: 760px) { .foot-word { bottom: 46%; } }


/* The opening's picture always covers its frame, whatever its shape, so the sky's top meets the frame's top. */
.hero-stage .layers { width: max(calc(max(100%, var(--scene-min)) + 72px), calc((100cqh + 40px) * 2400 / 1300)); }


/* The 3D scenes (src/assets/js/scenes3d.js): a still made from each scene shows first, cut out by its mask so the painted sky, the
   sun and eaven's name show through; once the live scene has drawn (desktop only), it takes the still's place. Every canvas is
   flipped left to right to match the stills (tools/street.py's view is the mirror of three.js's). */
.still3d { -webkit-mask-image: var(--mask); mask-image: var(--mask); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
img.still3d:not([style*="--mask"]) { -webkit-mask-image: none; mask-image: none; }
.live3d { display: block; transform: scaleX(-1); opacity: 0; transition: opacity 500ms var(--out); }
.is-live .live3d { opacity: 1; }
.is-live .still3d { visibility: hidden; }
.street3d { pointer-events: none; }
.street3d .pin { left: var(--x); top: var(--y); }
html .hero-stage.is-live .street3d .pin, html.motion .hero-stage.is-live .street3d .pin { left: 0; top: 0; translate: var(--px-x, 0px) var(--px-y, 0px); }
canvas.pano-layer { width: 100%; height: 100%; }
@media (max-width: 760px) { .street3d .pin { display: none; } }