/* The site's bands (docs/BRAND_REFRESH.md "Front page"), shared by the home page, the feature pages and the free tools: a section in
   its own light (data-tone), the dark ones meeting the page on layered curves, and the card a band lists small things
   on. A band's colors are its page's (outer/home.css, outer/feature-editorial.css). */

/* a dark band's words; a solid for masks, which read only its alpha; the curves a dark band meets the page on: a long
   swell for its top and foot, and an offset pair for the softer band beside it */
.site {
  --band-on-dark: var(--inv-strong);
  --band-on-dark-soft: color-mix(in srgb, var(--inv-strong) 84%, transparent);
  --band-on-dark-faint: color-mix(in srgb, var(--inv-strong) 68%, transparent);
  --band-line: color-mix(in srgb, var(--inv-strong) 16%, transparent);
  --band-solid: var(--ink);
  /* the accent on the deeper nights (kickers, small marks), lifted to read at 4.5:1 there */
  --band-accent: color-mix(in srgb, var(--site-accent-inv) 70%, var(--bg-panel));
  --wave-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V52C180 22 360 14 560 34S940 82 1140 62 1360 30 1440 36V100Z'/%3E%3C/svg%3E");
  --wave-foot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V44C1280 74 1100 86 900 66S520 18 320 34 80 70 0 60Z'/%3E%3C/svg%3E");
  --wave-top-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V40C220 60 420 74 640 54S1020 8 1220 18 1400 44 1440 48V100Z'/%3E%3C/svg%3E");
  --wave-foot-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V58C1240 40 1060 24 860 40S460 92 260 76 60 50 0 46Z'/%3E%3C/svg%3E");
}

/* ---------- Bands: each section in its own light (data-tone), the dark ones meeting the page on layered curves ---------- */
[data-tone="dark"] { position: relative; isolation: isolate; color: var(--band-on-dark-soft); }
[data-tone="dark"] :is(h2, h3) { color: var(--band-on-dark); }
[data-tone="dark"] :is(.kicker, .accent) { color: var(--site-accent-inv); }
[data-tone="dark"] .lead { color: var(--band-on-dark-soft); }
/* a dark band's ground (--tone-bg) reaches 70px past its box at each end on a curve, and a softer band of the same
   evening (--tone-edge) a little further out on its own, so the edge reads as layers */
[data-tone="dark"]::before, [data-tone="dark"]::after {
  content: ""; position: absolute; left: 50%; width: 100vw; translate: -50% 0; pointer-events: none;
  -webkit-mask: var(--mt) top / 100% 100px no-repeat, linear-gradient(var(--band-solid), var(--band-solid)) center / 100% calc(100% - 196px) no-repeat, var(--mf) bottom / 100% 100px no-repeat;
  mask: var(--mt) top / 100% 100px no-repeat, linear-gradient(var(--band-solid), var(--band-solid)) center / 100% calc(100% - 196px) no-repeat, var(--mf) bottom / 100% 100px no-repeat;
}
[data-tone="dark"]::before { z-index: -1; inset-block: -70px; --mt: var(--wave-top); --mf: var(--wave-foot); background: var(--tone-bg); }
[data-tone="dark"]::after { z-index: -2; inset-block: -104px; --mt: var(--wave-top-2); --mf: var(--wave-foot-2); background: var(--tone-edge); opacity: .55; }
/* The footer rises into the last band on the same curves and stands above it (positioned, after it), so a band's
   ground that reaches past its box never crosses the sign-up. Its first shade: the updates band's, else its own. */
.site-footer { position: relative; isolation: isolate; --footer-rise: var(--sand-800); }
.site-footer:not(:has(> .updates)) { --footer-rise: var(--sand-900); }
.site-footer::before, .site-footer::after { content: ""; position: absolute; left: 50%; width: 100vw; translate: -50% 0; bottom: 100%; pointer-events: none; background: var(--footer-rise); }
.site-footer::before { height: 70px; -webkit-mask: var(--wave-top) top / 100% 100% no-repeat; mask: var(--wave-top) top / 100% 100% no-repeat; }
.site-footer::after { z-index: -1; height: 104px; opacity: .35; -webkit-mask: var(--wave-top-2) top / 100% 100% no-repeat; mask: var(--wave-top-2) top / 100% 100% no-repeat; }
/* a light band's blooms on the page, fading out at both ends so the curves show */
[data-tone="light"] { position: relative; isolation: isolate; }
[data-tone="light"]::before {
  content: ""; position: absolute; z-index: -1; inset: 0; left: 50%; width: 100vw; translate: -50% 0; pointer-events: none; background: var(--tone-bg, none);
  -webkit-mask-image: linear-gradient(transparent, var(--band-solid) 18%, var(--band-solid) 82%, transparent); mask-image: linear-gradient(transparent, var(--band-solid) 18%, var(--band-solid) 82%, transparent);
}
/* On the feature pages, their directory and the free tools (outer/feature-editorial.css, outer/features-index.css,
   outer/tools.css): a light band is the page's part of the work (data-m) as two soft blooms on a faint wash of it */
:is(.feature-editorial, .features-index) [data-tone="light"] {
  --tone-bg: radial-gradient(36% 46% at 8% 20%, color-mix(in srgb, var(--m) 20%, transparent), transparent 70%),
    radial-gradient(34% 44% at 94% 80%, color-mix(in srgb, var(--m) 15%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--m) 8%, var(--home-page)), color-mix(in srgb, var(--m) 5%, var(--home-page)));
}
:is(.feature-editorial, .features-index) [data-tone="light"]::before { inset-block: -56px; --mt: var(--wave-top-2); --mf: var(--wave-foot);
  -webkit-mask: var(--mt) top / 100% 90px no-repeat, linear-gradient(var(--band-solid), var(--band-solid)) center / 100% calc(100% - 178px) no-repeat, var(--mf) bottom / 100% 90px no-repeat;
  mask: var(--mt) top / 100% 90px no-repeat, linear-gradient(var(--band-solid), var(--band-solid)) center / 100% calc(100% - 178px) no-repeat, var(--mf) bottom / 100% 90px no-repeat; }
:is(.feature-editorial, .features-index) [data-tone="light"]::after { content: ""; position: absolute; z-index: -2; left: 50%; width: 100vw; translate: -50% 0; inset-block: -88px; pointer-events: none;
  background: color-mix(in srgb, var(--m) 7%, var(--home-page)); --mt: var(--wave-top); --mf: var(--wave-foot-2);
  -webkit-mask: var(--mt) top / 100% 100px no-repeat, linear-gradient(var(--band-solid), var(--band-solid)) center / 100% calc(100% - 196px) no-repeat, var(--mf) bottom / 100% 100px no-repeat;
  mask: var(--mt) top / 100% 100px no-repeat, linear-gradient(var(--band-solid), var(--band-solid)) center / 100% calc(100% - 196px) no-repeat, var(--mf) bottom / 100% 100px no-repeat; }
:is(.feature-editorial, .features-index) [data-tone="light"]:nth-of-type(even)::before { --mt: var(--wave-top); --mf: var(--wave-foot-2); }
:is(.feature-editorial, .features-index) [data-tone="light"]:nth-of-type(even)::after { --mt: var(--wave-top-2); --mf: var(--wave-foot); }
:is(.feature-editorial, .features-index) [data-tone="light"] .spotlight:not(.spotlight--plain) { background: color-mix(in srgb, var(--bg-panel) 62%, transparent); }
/* and a dark band the opening's twilight again, a close-up's stage on it glass */
:is(.feature-editorial, .features-index) [data-tone="dark"] { --tone-edge: var(--home-away-edge);
  --tone-bg: radial-gradient(50% 36% at 50% 0, color-mix(in srgb, var(--home-night-glow) 18%, transparent), transparent 72%),
    radial-gradient(44% 36% at 50% 100%, color-mix(in srgb, var(--home-dawn-1) 26%, transparent), transparent 75%),
    linear-gradient(180deg, var(--home-night-1), var(--home-night-2) 55%, var(--home-night-3)); }
:is(.feature-editorial, .features-index) [data-tone="dark"] .spotlight { background: color-mix(in srgb, var(--bg-panel) 12%, transparent); box-shadow: inset 0 0 0 1px var(--band-line), 0 50px 100px -50px rgba(var(--shadow-rgb), .6); }
:is(.feature-editorial, .features-index) [data-tone="dark"] .kicker { color: var(--band-accent); }
:is(.feature-editorial, .features-index) [data-tone="dark"] .spotlight > figcaption { color: var(--band-on-dark-soft); }
:is(.feature-editorial, .features-index) [data-tone="dark"] .spotlight > figcaption a { color: var(--band-on-dark); }

/* ---------- A real screen cropped to the part that matters (--screen-* on the frame: its shape, and the screen's width
   and offsets as percentages of it); the feature pages' framed captures and the directory's tiles ---------- */
.screen-focus { position: relative; aspect-ratio: var(--screen-ratio); overflow: hidden; }
.screen-focus img { position: absolute; width: var(--screen-width); max-width: none; height: auto; left: var(--screen-left); top: var(--screen-top); }

/* ---------- A card: an icon in its part's color (data-m), a line and a sentence, the whole card the link ---------- */
.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
/* four cards run four abreast, never three and one */
.detail-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.detail-card { position: relative; display: grid; align-content: start; gap: 8px; height: 100%; padding: 28px 28px 30px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--bg-panel); color: inherit; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.detail-card:hover { border-color: color-mix(in srgb, var(--m) 35%, var(--line)); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.detail-card:focus-visible { outline: 2px solid var(--m); outline-offset: 3px; }
.detail-card__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--m) 10%, transparent); color: var(--m); }
.detail-card h3 { font-size: var(--fs-md); font-weight: 600; line-height: 1.35; letter-spacing: -.015em; color: var(--ink); }
.detail-card p { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-muted); }
.detail-card > .bg-icon:last-child { position: absolute; top: 30px; right: 26px; color: var(--m); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.detail-card:is(:hover, :focus-visible) > .bg-icon:last-child { opacity: 1; transform: none; }
/* a card with a picture of what it opens on top and its ways on under its words (pages/tools.html); its first way is
   the card's link, so the whole card answers to it */
.detail-card--shot { grid-template-rows: auto 1fr auto; gap: 0; padding: 0; overflow: hidden; }
.detail-card--shot:has(a:focus-visible) { outline: 2px solid var(--m); outline-offset: 3px; }
.detail-card__shot { height: 210px; overflow: hidden; padding: var(--space-5) var(--space-5) 0; background: color-mix(in srgb, var(--m) 10%, var(--home-page)); }
.detail-card__shot img { display: block; max-width: 100%; height: auto; margin-inline: auto; border-radius: var(--r-md) var(--r-md) 0 0; box-shadow: 0 18px 36px -24px rgba(var(--shadow-rgb), .45); }
.detail-card__copy { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-6) var(--space-6) var(--space-2); }
.detail-card .detail-card__note { font-size: var(--fs-xs); color: var(--caption); }
.detail-card__ways { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: var(--space-3) var(--space-6) var(--space-6); list-style: none; }
.detail-card__ways a { display: inline-flex; align-items: center; gap: var(--icon-gap-sm); font-size: var(--fs-sm); font-weight: 600; color: var(--ink); text-decoration: none; }
.detail-card__ways a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--m); }
.detail-card__ways .bg-icon { color: var(--m); }
.detail-card__ways li:first-child a::after { content: ""; position: absolute; inset: 0; }
.detail-card__ways li:not(:first-child) a { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .detail-card, .detail-card > .bg-icon:last-child { transition: none; } .detail-card:hover { transform: none; } }
@media (max-width: 980px) { .detail-grid, .detail-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .detail-grid, .detail-grid:has(> :nth-child(4):last-child) { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .detail-card { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; padding: 20px; }
  .detail-card__icon { grid-row: span 2; margin: 0; }
  .detail-card > .bg-icon:last-child { display: none; }
  /* a card with no icon of its own: its words take the whole card */
  .detail-card--plain { grid-template-columns: minmax(0, 1fr); }
  .detail-card--shot { grid-template-columns: minmax(0, 1fr); padding: 0; row-gap: 0; }
}
/* a compact card in a row of links: its icon beside the words at every width */
.detail-card--row { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 18px 44px 18px 20px; }
.detail-card--row .detail-card__icon { grid-row: span 2; width: 40px; height: 40px; margin: 0; }
.detail-card--row > .bg-icon:last-child { top: 20px; right: 18px; }

/* ---------- The night a page opens on (fragments/night-hero.html; the home hero draws its own, outer/home.css) ---------- */
/* the header over the night: no glass and light words until the page scrolls (with script, which brings both back);
   the phone's drawer keeps its own paper */
.js :is(.site--home, .site:has(.night-hero)) .site-header:not(.is-scrolled)::before { background: transparent; backdrop-filter: none; }
.js :is(.site--home, .site:has(.night-hero)) .site-header:not(.is-scrolled) :is(.brandmark, .site-nav__toggle) { color: color-mix(in srgb, var(--inv-strong) 92%, transparent); }
@media (min-width: 861px) {
  .js :is(.site--home, .site:has(.night-hero)) .site-header:not(.is-scrolled) :is(.site-nav__links a, .site-nav__signin) { color: color-mix(in srgb, var(--inv-strong) 92%, transparent); }
  .js :is(.site--home, .site:has(.night-hero)) .site-header:not(.is-scrolled) .site-nav__actions .btn--primary { background: var(--bg-panel); color: var(--ink); }
  .js .site--home .site-header:not(.is-scrolled) .site-nav__actions .btn--primary.is-quiet { background: transparent; color: var(--inv-strong); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-strong) 30%, transparent); }
}
/* the pages that open on it sit on the home page's warm paper, their bands reaching the window's edges */
body.site:has(.night-hero) { background: var(--home-page); }
/* the bands reach the window's edges; <main> keeps them from widening the page */
:is(.site--home, .site:has(.night-hero)) main { overflow-x: clip; }

/* The sky runs up under the header (--night-header, its bar and border) and turns to dawn in its last 210px, below the
   words. With a lead screen the night runs on behind it and the dawn starts at the screen's top edge (its ::before),
   so the words always stand on the night, however tall the screen. The parts of the work are drawn pale on it, as on
   the home hero's rail. */
/* above the chapter after it, whose curve rises behind the lead screen */
.night-hero {
  --night-header: 69px;
  --m-client: var(--home-night-client); --m-proposal: var(--home-night-proposal); --m-contract: var(--home-night-contract); --m-project: var(--home-night-project);
  --m-time: var(--home-night-time); --m-expense: var(--home-night-expense); --m-invoice: var(--home-night-invoice); --m-paid: var(--home-night-paid); --m-portal: var(--home-night-portal);
  position: relative; z-index: 1; isolation: isolate; padding: clamp(40px, 6vw, 84px) 0 220px; text-align: center; color: color-mix(in srgb, var(--inv-strong) 90%, transparent);
  clip-path: inset(calc(-1 * var(--night-header)) -100vw 0);
}
.night-hero:has(.night-hero__visual) { padding-bottom: 0; }
.night-hero::before, .night-hero::after { content: ""; position: absolute; left: 50%; width: 100vw; translate: -50% 0; top: calc(-1 * var(--night-header)); bottom: 0; pointer-events: none; }
/* the feature pages' own evening: the home page's night with the parts of the work in it, uneven -- the projects' mint
   low on the left, the contracts' lilac high on the right, the page's own part (--m) under the words */
.night-hero::before { z-index: -2;
  background: radial-gradient(30% 36% at 12% 30%, color-mix(in srgb, var(--home-night-project) 22%, transparent), transparent 70%),
    radial-gradient(26% 30% at 88% 12%, color-mix(in srgb, var(--home-night-contract) 30%, transparent), transparent 70%),
    radial-gradient(40% 28% at 58% 62%, color-mix(in srgb, var(--m, var(--home-night-invoice)) 22%, transparent), transparent 72%),
    radial-gradient(46% 40% at 50% 0, color-mix(in srgb, var(--home-night-glow) 26%, transparent), transparent),
    linear-gradient(to bottom, var(--home-night-1) 0, var(--home-night-2) 30%, var(--home-night-3) calc(100% - 320px), var(--home-night-4) calc(100% - 210px),
      color-mix(in srgb, var(--home-dawn-1) 85%, transparent) calc(100% - 130px), color-mix(in srgb, var(--home-dawn-2) 60%, transparent) calc(100% - 80px),
      color-mix(in srgb, var(--home-dawn-3) 40%, transparent) calc(100% - 32px), transparent); }
/* the ledger's grid in faint light hairlines round the words */
.night-hero::after { z-index: -1; background: var(--hero-texture); background-position: 50% 0;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 28%, var(--band-solid) 10%, transparent 75%); mask-image: radial-gradient(ellipse 60% 70% at 50% 28%, var(--band-solid) 10%, transparent 75%); }
.night-hero .intro { max-width: 980px; }
.night-hero .intro .kicker { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); color: color-mix(in srgb, var(--inv-strong) 86%, transparent); }
.night-hero .intro .kicker a { color: inherit; text-decoration: none; }
.night-hero .intro .kicker a:hover { color: var(--inv-strong); text-decoration: underline; text-underline-offset: 3px; }
.night-hero .intro .kicker span { opacity: .6; }
.night-hero h1 { margin-top: var(--space-5); font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: clamp(46px, 5.6vw, 82px); line-height: 1.02; letter-spacing: -.045em; color: var(--inv-strong); text-wrap: balance; }
/* the accent in the page's part of the work, from the pale petrol of the night */
.night-hero h1 .accent {
  padding-right: .08em; margin-right: -.08em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(100deg, var(--site-accent-inv), color-mix(in srgb, var(--m, var(--hl)) 82%, var(--bg-panel))); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.night-hero .intro .lead { max-width: 40em; margin: var(--space-5) auto 0; font-size: var(--fs-lead); line-height: 1.6; color: color-mix(in srgb, var(--inv-strong) 92%, transparent); text-wrap: balance; }
/* the page's chapters as glass pills on the night */
.night-hero__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-7); }
.night-hero__nav a { display: inline-flex; align-items: center; gap: var(--icon-gap-sm); min-height: 36px; padding: 6px 16px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--inv-strong) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-strong) 20%, transparent); font-size: var(--fs-sm); font-weight: 500; color: var(--inv-strong); text-decoration: none; transition: background-color .2s; }
.night-hero__nav a:hover { background: color-mix(in srgb, var(--inv-strong) 16%, transparent); }
.night-hero__nav a:focus-visible, .night-hero .intro .kicker a:focus-visible { outline: 2px solid var(--site-accent-inv); outline-offset: 2px; }
.night-hero__nav span { font-size: var(--fs-xs); color: var(--m, inherit); }
/* a way in, on the night: the white button, as on the home hero */
.night-hero .intro .page-head__cta { justify-content: center; }
.night-hero .intro .page-head__cta .btn--primary { background: var(--bg-panel); color: var(--ink); box-shadow: 0 10px 24px -12px rgba(var(--shadow-rgb), .5); }
.night-hero .intro .page-head__cta .btn--primary:hover { background: var(--site-accent-inv); }
.night-hero .intro .page-head__link { color: var(--inv-strong); }
.night-hero .intro .page-head__link .bg-icon { color: var(--site-accent-inv); }
.night-hero .intro .page-head__meta, .night-hero .intro .page-head__meta a { color: color-mix(in srgb, var(--inv-strong) 86%, transparent); }
/* the lead screen where the night turns to dawn: its stage a pane of glass, the screen lifted off it */
.night-hero__visual { position: relative; margin-top: clamp(36px, 5vw, 64px); color: var(--text); }
.night-hero__visual::before { content: ""; position: absolute; z-index: -1; left: 50%; width: 100vw; translate: -50% 0; inset-block: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent 0, color-mix(in srgb, var(--home-dawn-1) 80%, var(--home-night-4)) 15%,
    color-mix(in srgb, var(--home-night-contract) 60%, var(--home-dawn-1)) 28%, color-mix(in srgb, var(--home-dawn-3) 60%, var(--home-night-contract)) 40%,
    var(--home-page) 58%); }
.night-hero .night-hero__visual .spotlight { --spot-pad: clamp(14px, 2.4vw, 32px); background: color-mix(in srgb, var(--bg-panel) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-strong) 26%, transparent), 0 50px 100px -50px rgba(var(--shadow-rgb), .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.night-hero .night-hero__visual .spotlight .spotlight__shot { box-shadow: 0 40px 80px -40px rgba(var(--shadow-rgb), .6), 0 0 0 1px rgba(var(--shadow-rgb), .08); }
.night-hero__visual .spotlight > figcaption { color: var(--text-muted); }
@media (max-width: 600px) {
  .night-hero h1 { font-size: 44px; }
  .night-hero .intro .lead { font-size: var(--fs-body); }
  .night-hero__nav { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--site-gutter)); padding: 2px var(--site-gutter) 4px; scrollbar-width: none; }
  .night-hero__nav::-webkit-scrollbar { display: none; }
  .night-hero__nav a { flex: none; }
}
/* a tool's night (fragments/tool-page.html :: hero, the invoice generator): the tool is the page, so a short head and
   the tool up into view, on a phone too */
.night-hero--tool { padding-top: clamp(24px, 3vw, 44px); }
.night-hero--tool h1 { margin-top: var(--space-3); font-size: clamp(34px, 3.8vw, 52px); }
.night-hero--tool .intro .lead { margin-top: var(--space-3); font-size: var(--fs-body); }
.night-hero--tool .night-hero__visual { margin-top: clamp(20px, 2.4vw, 32px); }
/* the app in its window (fragments/feature-page.html :: screen), as the home hero shows it: about 0.9x of the capture's
   1280 CSS pixels in the wrap, so the app's own words stay readable; on a phone, the app on a phone, its top */
.app-window { max-width: 1160px; margin: 0 auto; overflow: hidden; border-radius: var(--r-2xl); background: var(--bg-panel); text-align: left;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-strong) 10%, transparent), 0 30px 60px -30px rgba(var(--shadow-rgb), .4), 0 70px 120px -60px rgba(var(--shadow-rgb), .35); }
.app-window__chrome { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 40px; padding-inline: 16px; border-bottom: 1px solid var(--line); background: var(--sand-50); }
.app-window__chrome::before { content: ""; justify-self: start; width: 8px; height: 8px; border-radius: 50%; background: var(--sand-300); box-shadow: 14px 0 var(--sand-300), 28px 0 var(--sand-300); }
.app-window__chrome span { min-width: 0; padding: 3px 18px; border-radius: var(--r-pill); background: var(--bg-panel); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-xs); color: var(--caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-window picture { display: block; aspect-ratio: 1280 / 800; background: var(--bg-app); }
.app-window picture img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
@media (max-width: 600px) {
  .app-window { max-width: 400px; border-radius: var(--r-xl); }
  .app-window__chrome { height: 34px; }
  .app-window picture { aspect-ratio: 390 / 560; }
}