/* nudgefocus.co: Night Sky. One stylesheet for every page. Design system: site/DESIGN.md.
   Approved sources (Oct 15, 2026): design-options/d-dark/index.html (home) and
   design-options/d-dark/templates/article.css (article pages). Keep this file in sync with DESIGN.md.
   Sections: tokens, base, shared components (buttons, nav, QR card, clay phone, FAQ, footer, grain, motion),
   home (body.t-home), articles and hubs (every other page), then responsive rules.
   Scale: 80 / 56 / 36 / 28 / 21 / 17 / 15 / 13 desktop; 48 / 36 / 28 / 24 / 18 / 16 / 14 / 13 phone.
   Articles add 32 (h2), 20 (short answer), 18 (reading text), 16 (tables), 14 (notes). Dark only. */

/* ---------------------------------------------------------------- tokens */
:root {
  --page: #08090b;
  --s1: #101114;
  --s2: #17181c;
  --band: #121317;
  --line: rgba(255, 255, 255, .06);
  --ink: #f2f4f7;
  --body: #babec5;        /* reading text: 10.6:1 on page */
  --ink-2: #a3a7af;       /* 8.1:1 on page, 7.6:1 on cards */
  --ink-3: #8b8f97;       /* 6.1:1 on page, 5.6:1 on cards */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  --rose: 255, 95, 180;
  --violet: 132, 112, 255;
  --teal: 40, 210, 180;
  --amber: 255, 165, 70;
  --sky: 70, 170, 255;
  /* the breathing ring's colors as one line of light */
  --light: linear-gradient(90deg, rgba(var(--teal), 0), rgb(var(--teal)) 16%, rgb(var(--sky)) 38%, rgb(var(--violet)) 62%, rgb(var(--rose)) 84%, rgba(var(--rose), 0));
  --gap: 32px;
  --sec: 160px;
  --measure: 640px;
  --room: max(0px, (100vw - var(--measure)) / 2 - var(--gap)); /* free space beside the reading column */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .75 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.3l2.4 2.4 4.6-4.9'/%3E%3C/svg%3E");
  color-scheme: dark;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, .053, .184, .355, .536, .706, .851, .965, 1.046, 1.096, 1.121, 1.126, 1.117, 1.098, 1.076, 1.054, 1.033, 1.015, 1.002, .992, .987, .984, .984, .986, .988, .991, .994, .996, .999, 1, 1.001, 1.002, 1.002, 1.002, 1.002, 1.001, 1); }
}

/* ---------------------------------------------------------------- base */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
html:not(:has(> body.t-home)) { scroll-padding-top: 96px; } /* article anchors land below the floating nav */
body { background: var(--page); color: var(--ink); font: 500 17px/1.47 var(--font); letter-spacing: .01em; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.028em; line-height: 1.06; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: rgba(var(--violet), .45); color: #fff; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } /* buttons and cards keep their own radius */
/* only plain text links (no class) and FAQ questions get a softened outline */
:is(.prose, .crumbs, .hero, .foot, .faq) a:not([class]):focus-visible, .foot a.brand:focus-visible, summary:focus-visible { border-radius: 6px; }

.skip { position: absolute; left: 16px; top: -100px; z-index: 70; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--page); font-size: 15px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 16px; }

/* ---------------------------------------------------------------- shared components */
.h2 { font-size: 56px; }
.h3 { font-size: 36px; }
.sub { color: var(--ink-2); font-size: 21px; line-height: 1.42; }
.tag { display: inline-block; vertical-align: .32em; margin-left: 10px; padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; font-weight: 600; letter-spacing: .01em; line-height: 1.6; color: var(--ink-2); }
.tag.free { color: #8fe9d8; }

/* buttons: .btn (home, nav, CTA) and .pill (page bodies) are the same button */
.btn, .pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 999px; background: var(--ink); color: var(--page); font-size: 17px; font-weight: 600; letter-spacing: 0; text-decoration: none; transition: transform 160ms var(--ease), background 160ms var(--ease); }
.btn svg, .pill svg { width: 18px; height: 18px; fill: currentColor; margin-top: -3px; }
.btn:hover, .pill:hover { background: #fff; transform: translateY(-1px); }
.btn:active, .pill:active { transform: scale(.97); transition-duration: 100ms; }
button.pill { border: 0; font-family: inherit; line-height: inherit; cursor: pointer; }
/* the quieter second button (calculator, 404): glass, like the nav */
.pill.ghost { background: rgba(255, 255, 255, .07); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.12); }
.pill.ghost:hover { background: rgba(255, 255, 255, .12); }
.btn.sm { padding: 8px 16px; font-size: 15px; }
.btn.sm svg { width: 15px; height: 15px; }

/* nav: one floating glass pill */
.nav { position: fixed; top: 16px; left: 0; right: 0; z-index: 30; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }
.nav-in { position: relative; pointer-events: auto; display: flex; align-items: center; gap: 4px; padding: 8px; border-radius: 32px; background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03)), rgba(20, 21, 26, .45); -webkit-backdrop-filter: blur(18px) saturate(1.8); backdrop-filter: blur(18px) saturate(1.8); box-shadow: inset 0 1px 1px rgba(255,255,255,.22), inset 0 -1px 1px rgba(0,0,0,.35), 0 14px 40px -16px rgba(0, 0, 0, .9); }
.nav-in::before, .qr::before, .answer::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.08) 30%, rgba(255,255,255,0) 55%, rgba(255,255,255,.25)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.brand { display: flex; align-items: center; gap: 8px; padding: 0 12px 0 6px; font-weight: 600; font-size: 17px; letter-spacing: -.01em; text-decoration: none; }
.brand img { width: 26px; height: 26px; border-radius: 7px; }
.nav-in > a:not(.brand):not(.btn) { padding: 8px 12px; font-size: 15px; color: var(--ink-2); text-decoration: none; border-radius: 999px; transition: color 160ms var(--ease); }
.nav-in > a:not(.brand):not(.btn):hover { color: var(--ink); }

/* QR card: only useful on a computer. It drops from the nav's Download button on hover or keyboard focus
   (.qr-pop), and sits beside the hero and final Download buttons (.qr-inline). Touch screens never see it. */
.qr { position: relative; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 18px; color: inherit; text-decoration: none; text-align: left; background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03)), rgba(20, 21, 26, .4); -webkit-backdrop-filter: blur(18px) saturate(1.8); backdrop-filter: blur(18px) saturate(1.8); box-shadow: inset 0 1px 1px rgba(255,255,255,.22), inset 0 -1px 1px rgba(0,0,0,.35), 0 18px 40px -20px rgba(0,0,0,.8); }
.qr img { width: 76px; height: 76px; border-radius: 8px; background: #fff; padding: 5px; }
.qr b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.qr span { display: block; font-size: 13px; color: var(--ink-2); margin-top: 2px; max-width: 17ch; }
.qr.qr-sm { gap: 10px; padding: 7px 14px 7px 7px; border-radius: 15px; }
.qr.qr-sm img { width: 54px; height: 54px; padding: 4px; border-radius: 7px; }
.qr.qr-sm b { font-size: 14px; }
.qr.qr-sm span { font-size: 12px; }
.dl { position: relative; display: inline-flex; }
.qr.qr-pop { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .qr.qr-pop { display: flex; position: absolute; z-index: 40; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)), rgba(17, 18, 22, .96); top: calc(100% + 12px); left: 50%; right: auto; bottom: auto; width: max-content; pointer-events: none;
    opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity 180ms var(--ease), transform 280ms var(--ease), visibility 0s linear 280ms; }
  .dl:hover .qr-pop, .dl:focus-within .qr-pop { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
  .nav .qr.qr-pop { left: auto; right: -8px; transform: translateY(-6px); }
  .nav .dl:hover .qr-pop, .nav .dl:focus-within .qr-pop { transform: none; }
}
@media (hover: none), (pointer: coarse), (max-width: 899px) { .qr.qr-inline { display: none; } }

/* clay phone: a matte black iPhone drawn in CSS around a real app screen
   (screens are 720x1551 frameless art from the App Store set; iPhone screen is 1:2.168) */
.phone { --w: 280px; position: relative; width: var(--w); aspect-ratio: 1 / 2.079; padding: calc(var(--w) * .038); border-radius: calc(var(--w) * .205);
  background: linear-gradient(155deg, #3b3c42 0%, #1d1e22 22%, #0f1012 56%, #060607 100%);
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,.17), inset 1.5px 0 1px rgba(255,255,255,.07), inset 0 -2px 2px rgba(0,0,0,.7), inset -1.5px 0 1px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.045), 0 60px 90px -50px rgba(0,0,0,.95), 0 24px 40px -24px rgba(0,0,0,.9); }
.phone::before { content: ""; position: absolute; left: -2.5px; top: 18%; width: 3px; height: 22%; border-radius: 2px 0 0 2px;
  background: linear-gradient(#1c1d21 0 13%, transparent 13% 28%, #1c1d21 28% 61%, transparent 61% 69%, #1c1d21 69% 100%); }
.phone::after { content: ""; position: absolute; right: -2.5px; top: 27%; width: 3px; height: 12%; border-radius: 0 2px 2px 0; background: #1c1d21; }
.phone .screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--w) * .168); background: var(--sbg, #000); container-type: inline-size; box-shadow: 0 0 0 1px #000; }
.phone .screen > img { width: 100%; }
.shadow { position: absolute; left: 12%; right: 12%; bottom: -26px; height: 36px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.75), rgba(0,0,0,0)); filter: blur(6px); z-index: -1; }
/* the hero screen plays the app's own ShieldFlow clip from onboarding (feed, then You Drifted!) */
.screen .drift { width: 100%; height: 100%; object-fit: cover; }
.screen .island { position: absolute; left: 50%; top: 1.4%; width: 31%; aspect-ratio: 3.4; transform: translateX(-50%); border-radius: 999px; background: #000; }
/* the app's real breathing animation, laid exactly over the ring in the waiting-room screenshot (motion.js plays it) */
.screen .ring { position: absolute; left: 21.75%; top: 30.8%; width: 56.5%; aspect-ratio: 1; object-fit: cover; filter: contrast(1.1); }
.screen .label-mask { position: absolute; left: 28%; right: 28%; top: 59.2%; height: 4.6%; background: #000; overflow: hidden; }
.screen .label-mask span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; font-weight: 600; font-size: 4.9cqw; letter-spacing: 0; color: #fff; transition: transform 700ms var(--ease), opacity 700ms var(--ease); }
.screen .label-mask .out { opacity: 0; transform: translateY(-100%); }
.screen .label-mask[data-state="out"] .in { opacity: 0; transform: translateY(100%); }
.screen .label-mask[data-state="out"] .out { opacity: 1; transform: none; }

/* questions (build.py faq_html: .faq-wrap > .col > h2#faq + .faq > details) */
.faq-wrap .col { max-width: calc(var(--measure) + 2 * var(--gap)); margin: 0 auto; padding: 0 var(--gap); }
.prose .faq-wrap .col { max-width: none; padding: 0; }
.faq { margin-top: 20px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; display: block; padding: 22px 52px 22px 0; cursor: pointer; list-style: none; font-size: 19px; font-weight: 600; letter-spacing: -.012em; line-height: 1.35; color: var(--ink); transition: color 160ms var(--ease); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%;
  background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat, var(--s2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px var(--line); color: var(--ink-2); transition: transform 300ms var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover::after { color: var(--ink); }
.faq details p { padding: 0 52px 24px 0; font-size: 17px; line-height: 1.62; font-weight: 400; letter-spacing: 0; color: var(--body); }
.faq details a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .3); }
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .faq { interpolate-size: allow-keywords; }
    .faq details::details-content { height: 0; overflow: clip; transition: height 360ms var(--ease), content-visibility 360ms allow-discrete; }
    .faq details[open]::details-content { height: auto; }
  }
}

/* footer (build.py footer_html): brand + four link columns, then the Apple / not-affiliated line */
.foot { position: relative; display: grid; grid-template-columns: 1.8fr repeat(4, 1fr); gap: 32px; padding: 72px var(--gap) 48px; border-top: 1px solid var(--line); background: var(--page); font-size: 15px; } /* paints above the header light on short pages (404) */
.foot a.brand { display: flex; padding: 0; color: var(--ink); }
.foot small { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-3); text-wrap: balance; }
.foot .foot-h { font-size: 13px; font-weight: 600; color: var(--ink-3); margin-bottom: 12px; }
.foot a { display: block; text-decoration: none; color: var(--ink-2); padding: 3px 0; transition: color 160ms var(--ease); }
.foot a:hover { color: var(--ink); }
.foot .fine { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--ink-3); }

/* film grain over the whole page */
.grain { position: fixed; inset: -50%; width: 200%; height: 200%; z-index: 60; pointer-events: none; opacity: .055; background-image: var(--noise); animation: grain 1.1s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-2.5%, 1.5%); } 40% { transform: translate(1.5%, -3%); } 60% { transform: translate(-3%, -1.5%); } 80% { transform: translate(2.5%, 2.5%); } 100% { transform: translate(0, 0); } }

/* motion start states, only when JS runs (boot.js adds .js; no JS = everything visible).
   motion.js adds .ready after first paint and .in to [data-reveal] blocks as they enter. */
.js .rise { opacity: 0; transform: translateY(16px); }
.ready .rise { opacity: 1; transform: none; transition: opacity 600ms var(--ease) calc(var(--d, 0) * 70ms), transform 700ms var(--ease) calc(var(--d, 0) * 70ms); }
.js [data-reveal]:not(.phone-fig) { opacity: 0; transform: translateY(24px); }
.js [data-reveal]:not(.phone-fig).in { opacity: 1; transform: none; transition: opacity 600ms var(--ease) calc(var(--d, 0) * 80ms), transform 700ms var(--ease) calc(var(--d, 0) * 80ms); }
[data-par] { will-change: transform; }

/* ================================================================ home (body.t-home)
   Section rhythm: 160px between sections, 72px from a section heading to its content, 24-32px between cards. */

/* hero */
.home-hero { position: relative; min-height: 100vh; padding-bottom: 72px; overflow: hidden; display: flex; flex-direction: column; align-items: center;
  background: radial-gradient(120% 80% at 50% 0%, #182035 0%, #10141f 45%, #0a0b0e 100%); }
/* the hero melts into the page instead of ending on a hard line (above the background, under the phone) */
.home-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 240px; z-index: 1; pointer-events: none; background: linear-gradient(rgba(8, 9, 11, 0), var(--page)); }
.hero-copy { position: relative; z-index: 3; text-align: center; padding: 128px 24px 0; }
.home-hero .name { font-size: 17px; color: var(--ink-2); }
.home-hero h1 { font-size: 80px; margin-top: 14px; letter-spacing: -.035em; }
.home-hero .sub { max-width: 31ch; margin: 18px auto 0; }
.home-hero .btn { margin-top: 28px; }
/* the hero QR sits beside the Download button on computers (touch screens hide it) */
.hero-cta { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
.home-hero .hero-cta .btn { margin-top: 0; }
.rating { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--ink-2); }
.stars { color: #f4c75d; letter-spacing: 1px; font-size: 13px; }
.devices { position: relative; z-index: 2; flex: none; width: 560px; height: 620px; margin-top: 40px; }
.devices .phone { position: absolute; left: 50%; margin-left: calc(var(--w) / -2); top: 0; --w: 280px; }

/* hero background: the app's own onboarding video (Background1.mp4), treated like the app does it:
   blurred, dimmed, with grain, under a scrim 32% darker (20%, then 15% more) */
.bgv { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bgv video { position: absolute; mix-blend-mode: screen; }
.bgv-app { display: block; left: 50%; top: 4%; height: 104%; width: auto; max-width: none; transform: translateX(-50%) scale(1.875); filter: blur(40px) saturate(1.15) brightness(.75); opacity: .62; }
.bgv::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #000; opacity: .49; pointer-events: none; } /* Oct 16: 25% darker again (Evan) */
/* film grain on the video itself, a touch stronger than the page grain */
.bgv::after { content: ""; position: absolute; inset: -50%; z-index: 2; pointer-events: none; opacity: .07; background-image: var(--noise); animation: grain 1.1s steps(6) infinite; }

/* the apps Nudge locks: the app's 3D icons; Nudge's lock badge drops onto each top-right corner with the onboarding's spring
   (OnboardingView iconWithLock: 34pt badge on 88pt icons, 10pt outside the corner, falls 48pt from .3 scale) */
.wrap { padding: 0 var(--gap); }
.sec { padding-top: var(--sec); }
.head { text-align: center; max-width: 880px; margin: 0 auto 72px; padding: 0 20px; }
.head .sub { max-width: 46ch; margin: 18px auto 0; }
.apps { text-align: center; padding: 104px 20px 0; }
.locks { display: flex; justify-content: center; flex-wrap: wrap; gap: 28px; margin: 0 auto; list-style: none; }
.locks li { position: relative; flex: none; width: 88px; height: 88px; }
.locks .app { width: 100%; height: 100%; filter: drop-shadow(0 14px 18px rgba(0,0,0,.45)); }
.locks .lk { position: absolute; right: -10px; top: -10px; width: 34px; height: 34px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.55)); }
.js .locks .lk { opacity: 0; transform: translateY(-48px) scale(.3); }
.js .locks.in .lk { opacity: 1; transform: none; transition: transform 900ms var(--spring) calc(var(--i) * 140ms + 420ms), opacity 260ms ease-out calc(var(--i) * 140ms + 420ms); }

/* feature cards */
.feat { position: relative; border-radius: 24px; overflow: hidden; background: var(--s1); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px var(--line); }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tall { padding: 40px 40px 56px; display: flex; flex-direction: column; }
.tall h3 { font-size: 28px; letter-spacing: -.022em; }
.tall p { margin-top: 12px; color: var(--ink-2); max-width: 32ch; min-height: 3em; }
.stage { position: relative; margin: 44px auto 0; isolation: isolate; }
.stage .phone { --w: 256px; }
.light-rose { background-image: radial-gradient(70% 40% at 50% 100%, rgba(var(--rose), .14), rgba(0,0,0,0) 75%); }
.light-violet { background-image: radial-gradient(70% 40% at 50% 100%, rgba(var(--violet), .16), rgba(0,0,0,0) 75%); }
.light-teal { background-image: radial-gradient(70% 40% at 50% 100%, rgba(var(--teal), .13), rgba(0,0,0,0) 75%); }
.light-sky { background-image: radial-gradient(60% 60% at 80% 100%, rgba(var(--sky), .12), rgba(0,0,0,0) 75%); }

.feat-wide { display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 600px; margin-top: 24px; }
.feat-wide .txt { padding: 64px; }
.feat-wide p { margin-top: 14px; color: var(--ink-2); max-width: 36ch; }
.levels { margin-top: 32px; list-style: none; display: grid; gap: 8px; max-width: 440px; }
.levels li { display: grid; grid-template-columns: 124px 1fr; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; color: var(--ink-2); }
.levels b { color: var(--ink); font-weight: 600; font-size: 17px; }
.levels .tag { vertical-align: .1em; margin-left: 6px; }

/* Medium's escalating wait as one calm staircase: each unlock steps up 10s, then holds at 60s.
   One line in the breathing ring's colors (teal to rose), sliced per step with container units. */
.stair-box { padding: 0 64px 40px 0; }
.stair { --h: 240px; --grad: linear-gradient(90deg, rgb(var(--teal)), rgb(var(--sky)) 38%, rgb(var(--violet)) 68%, rgb(var(--rose)));
  position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; padding: 0; height: var(--h); margin: 44px 0 48px; list-style: none; container-type: inline-size; }
/* the color slices below assume 7 columns with no gap */
/* floor (solid) and 60s ceiling (dotted), painted under the line */
.stair::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, .09), rgba(255, 255, 255, .09)) 0 100% / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 2px, transparent 2px 7px) 0 0 / 100% 1px no-repeat; }
.stair li { position: relative; --y: calc(var(--i) / 6 * 100%); }
.stair li::before { content: ""; position: absolute; left: -1px; width: 2px; bottom: calc((var(--i) - 1) / 6 * 100% - 1px); height: calc(100% / 6 + 2px); border-radius: 1px; transform-origin: bottom; background: rgb(var(--sky)); }
.stair li:first-child::before { content: none; }
.stair-run { position: absolute; left: -1px; right: 0; bottom: calc(var(--y) - 1px); height: 2px; border-radius: 1px; transform-origin: left; background: rgb(var(--sky)); }
@supports (width: 1cqw) {
  .stair li::before, .stair-run { background: var(--grad) calc(var(--i) * -100cqw / 7 + 1px) 0 / 100cqw 100% no-repeat; }
}
.stair li:last-child .stair-run { -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent); }
.stair-dot { position: absolute; left: 50%; bottom: var(--y); width: 9px; height: 9px; margin: 0 0 -4.5px -4.5px; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 0 4px var(--s1); }
.stair li:last-child .stair-dot { box-shadow: 0 0 0 4px var(--s1), 0 0 16px 4px rgba(var(--rose), .35); }
.stair-v { position: absolute; left: -8px; right: -8px; bottom: calc(var(--y) + 16px); text-align: center; font-size: 15px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.stair li:last-child .stair-v { color: var(--ink); }
.stair-k { position: absolute; left: -8px; right: -8px; top: calc(100% + 16px); text-align: center; font-size: 13px; line-height: 1; color: var(--ink-3); }
.stair-box .stair-cap { max-width: none; margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.stair-cap span:last-child { white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .stair { --b: 250ms; --t: 190ms; --r: 60ms; }
  .js .stair:not(.in) li::before { transform: scaleY(0); }
  .js .stair:not(.in) .stair-run { transform: scaleX(0); }
  .js .stair:not(.in) .stair-k { opacity: 0; }
  .js .stair:not(.in) .stair-dot { opacity: 0; transform: scale(.3); }
  .js .stair:not(.in) .stair-v { opacity: 0; transform: translateY(6px); }
  .stair.in li::before { transition: transform var(--r) linear calc(var(--b) + var(--i) * var(--t)); }
  .stair.in .stair-run { transition: transform calc(var(--t) - var(--r)) linear calc(var(--b) + var(--i) * var(--t) + var(--r)); }
  .stair.in .stair-k { transition: opacity 500ms ease-out var(--b); }
  .stair.in .stair-dot { transition: opacity 200ms ease-out calc(var(--b) + var(--i) * var(--t) + var(--t) / 2), transform 500ms var(--ease) calc(var(--b) + var(--i) * var(--t) + var(--t) / 2); }
  .stair.in .stair-v { transition: opacity 400ms ease-out calc(var(--b) + var(--i) * var(--t) + var(--t) / 2 + 60ms), transform 600ms var(--ease) calc(var(--b) + var(--i) * var(--t) + var(--t) / 2 + 60ms); }
}

/* website chips */
.chips { position: relative; height: 440px; margin-right: 48px; }
.chip { position: absolute; display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px 11px 14px; border-radius: 999px; background: var(--s2); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px var(--line), 0 18px 30px -20px rgba(0,0,0,.9); font-size: 17px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.chip svg { width: 16px; height: 16px; fill: none; stroke: var(--ink-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.js .chips .chip { opacity: 0; transform: scale(.94); }
.js .chips.in .chip { opacity: 1; transform: none; transition: opacity 400ms ease-out calc(var(--d, 0) * 70ms + 150ms), transform 600ms var(--ease) calc(var(--d, 0) * 70ms + 150ms); }

/* two modes */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1180px; margin: 0 auto; }
.mode { padding: 48px; border-radius: 24px; background: var(--s1); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px var(--line); }
.mode img { width: 132px; margin-bottom: 28px; filter: drop-shadow(0 24px 30px rgba(0,0,0,.6)); }
.mode p { margin-top: 14px; color: var(--ink-2); max-width: 34ch; }

/* the one full-bleed tonal band */
.week-band { margin-top: var(--sec); padding: var(--sec) var(--gap); background: radial-gradient(60% 70% at 50% 0%, rgba(175, 155, 255, .1), rgba(0,0,0,0) 70%), var(--band); box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; max-width: 1180px; margin: 0 auto; list-style: none; }
.week li { text-align: center; }
.week img { width: 132px; margin: 0 auto; filter: drop-shadow(0 22px 30px rgba(0,0,0,.6)); }
.week b { display: block; margin-top: 20px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.week span { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-3); }
.week-note { margin-top: 56px; font-size: 13px; color: var(--ink-3); text-align: center; }

.rows { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 880px; margin: 0 auto; list-style: none; }
.rows li { padding: 36px 32px 36px; border-radius: 24px; background: var(--s1); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px var(--line); }
.rows img { width: 84px; margin-bottom: 24px; filter: drop-shadow(0 18px 22px rgba(0,0,0,.6)); }
.rows b { display: block; font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.rows .tag { vertical-align: .18em; }
.rows .d { display: block; margin-top: 8px; color: var(--ink-2); }

/* privacy card */
.vault { position: relative; margin: var(--sec) var(--gap) 0; border-radius: 24px; text-align: center; padding: 64px 32px 100px; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px var(--line);
  background: radial-gradient(50% 60% at 0% 100%, rgba(var(--teal), .1), rgba(0,0,0,0) 70%), radial-gradient(50% 60% at 100% 100%, rgba(var(--violet), .13), rgba(0,0,0,0) 70%), #0f1013; }
.vault img { width: 260px; margin: 0 auto; }
.vault .h2 { margin-top: 20px; }
.vault .sub { max-width: 46ch; margin: 24px auto 0; }
.points { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 36px; list-style: none; }
.points li { padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; }
.points li span { color: var(--ink-2); }

/* slow drifting light in the full-bleed band and the privacy card */
.week-band, .vault { position: relative; overflow: hidden; isolation: isolate; }
.week-band::before, .vault::before { content: ""; position: absolute; inset: -25%; z-index: -1; pointer-events: none; animation: roam 28s ease-in-out infinite alternate; }
.week-band::before { background: radial-gradient(30% 40% at 38% 22%, rgba(175, 155, 255, .13), rgba(0,0,0,0) 70%), radial-gradient(28% 38% at 66% 64%, rgba(var(--sky), .07), rgba(0,0,0,0) 70%); }
.vault::before { background: radial-gradient(26% 36% at 32% 72%, rgba(var(--teal), .1), rgba(0,0,0,0) 70%), radial-gradient(26% 36% at 70% 70%, rgba(var(--violet), .12), rgba(0,0,0,0) 70%); }
@keyframes roam { from { transform: translate3d(-4%, -3%, 0) rotate(-4deg); } to { transform: translate3d(5%, 4%, 0) rotate(6deg); } }

/* App Store reviews */
.revs { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gap); padding: 0 var(--gap) 8px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); }
.revs::-webkit-scrollbar { display: none; }
.rev { flex: 0 0 384px; scroll-snap-align: start; padding: 32px; border-radius: 24px; background: var(--s1); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px var(--line); }
.rev .stars { font-size: 15px; }
.rev b { display: block; margin-top: 14px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.rev small { display: block; margin-top: 4px; font-size: 15px; color: var(--ink-3); }
.rev p { margin-top: 14px; font-size: 17px; line-height: 1.5; color: #c9ccd2; }
.rev-ctl { display: flex; justify-content: center; gap: 12px; margin-top: 32px; }
.rev-ctl button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--s2); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px var(--line); cursor: pointer; display: grid; place-items: center; transition: background 160ms var(--ease); }
.rev-ctl button:hover { background: #22242a; }
.rev-ctl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* home questions: the shared FAQ, headed like a home section */
.t-home .faq-wrap { padding-top: var(--sec); }
.t-home .faq-wrap .col { max-width: calc(760px + 2 * var(--gap)); }
.t-home .faq-wrap h2 { margin: 0 0 72px; text-align: center; font-size: 56px; letter-spacing: -.028em; line-height: 1.06; }
.t-home .faq { margin-top: 0; }

/* finale: a clay phone rising from the bottom edge under the last call to action */
.finale { position: relative; text-align: center; padding-top: var(--sec); overflow: hidden; background: radial-gradient(55% 45% at 50% 100%, rgba(var(--amber), .08), rgba(0,0,0,0) 70%); }
.finale .sub { margin-top: 18px; }
.final-cta { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 36px; }
.finale .fine { margin-top: 14px; font-size: 13px; color: var(--ink-3); }
.table { position: relative; height: 430px; max-width: 1400px; margin: 72px auto 0; }
.table .phone { position: absolute; left: 50%; bottom: -170px; margin-left: calc(var(--w) / -2); --w: 270px; }

/* hero phone: no entrance motion (Oct 16, Evan: the Halo scan is the hero's one motion). The phone fades in.
   .rig stays as a plain 3D wrapper because js/scan.js leans the phone inside it and places its canvases around it. */
.devices { --pw: 280px; perspective: calc(var(--pw) * 3.6); perspective-origin: 50% 8%; }
.devices .phone { --w: var(--pw); }
.devices .rig { position: absolute; inset: 0; transform-style: preserve-3d; }
.js .devices { opacity: 0; }
.ready .devices { opacity: 1; transition: opacity 500ms ease-out 100ms; }

/* ---------------------------------------------------------------- HALO SCAN (home hero only; js/scan.js)
   Approved Oct 16 2026 (design-options/scan-lab/halo.html). js/scan.js adds two canvases to the hero's .devices
   and draws a ring of light into them each frame of the scan: .scan-halo-back sits under the rig (the ring's far
   half, which the phone's body hides as it passes behind) and .scan-halo-front over it (the near half, in front of
   the glass, plus the light the ring throws on the glass and the clay edge). Both are centred on the phone, sized
   from --pw (so they follow the 280 / 230 px hero phone), hidden between scans, and never take input. They hang
   past .devices on phones; .home-hero's overflow: hidden clips them, so the page never scrolls sideways.
   Nothing here animates: the script draws each frame and toggles .on. No scan under reduced motion. */
.scan-halo { position: absolute; left: 50%; top: calc(var(--pw) * -.6); width: calc(var(--pw) * 2); height: calc(var(--pw) * 3.3);
  margin-left: calc(var(--pw) * -1); pointer-events: none; visibility: hidden; }
.scan-halo.on { visibility: visible; }
@media (prefers-reduced-motion: reduce) { .scan-halo { display: none; } }

/* ================================================================ articles and hubs (every page but home) */

/* atmosphere: a quiet version of the home hero. The app's onboarding background (its poster frame), turned
   on its side into a wide band of light, blurred, dimmed and faded into the page under a scrim (Evan, Oct 15:
   25% darker). It breathes on the app's own 10 second rhythm (5s in, 5s out). No video here. */
body:not(.t-home) > main { position: relative; isolation: isolate; overflow-x: clip; }
body:not(.t-home) > main::before { content: ""; position: absolute; z-index: -2; left: 50%; top: 250px; width: 860px; height: 1388px; margin: -694px 0 0 -430px; pointer-events: none;
  background: url("/img/onboarding-bg-poster.webp") center / 100% 100% no-repeat;
  -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent); mask-image: radial-gradient(closest-side, #000 50%, transparent);
  filter: blur(52px) saturate(1.2) brightness(.8); opacity: .5; transform: rotate(-90deg); }
body:not(.t-home) > main::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 820px; pointer-events: none;
  background: linear-gradient(rgba(8, 9, 11, .475), rgba(8, 9, 11, .59) 45%, var(--page)); }
@keyframes breathe { from { opacity: .42; transform: rotate(-90deg) scale(.96); } to { opacity: .56; transform: rotate(-90deg) scale(1.04); } }
@media (prefers-reduced-motion: no-preference) { body:not(.t-home) > main::before { animation: breathe 5s ease-in-out infinite alternate; } }

/* crumbs + header */
.crumbs { position: relative; max-width: none; padding: 116px var(--gap) 0; text-align: center; font-size: 13px; color: rgba(255, 255, 255, .26); }
.crumbs a { color: var(--ink-3); text-decoration: none; transition: color 160ms var(--ease); }
.crumbs a:hover { color: var(--ink); }
.crumbs span { color: var(--ink-2); }

.prose { position: relative; max-width: calc(var(--measure) + 2 * var(--gap)); margin: 0 auto; padding: 0 var(--gap); }
.prose > header { margin: 36px calc(-1 * min(var(--room), 140px)) 0; text-align: center; }
.hero { padding: 36px var(--gap) 0; text-align: center; } /* hubs and 404 (section.hero > .col or .shell) */
.hero > * { max-width: calc(var(--measure) + 280px); margin: 0 auto; }
.kicker { display: block; font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--ink-2); }
.prose > header .kicker, .hero .kicker { display: inline-block; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.prose h1, .hero h1 { margin-top: 18px; font-size: 56px; letter-spacing: -.032em; line-height: 1.05; }
.prose > header .lede, .hero .lede { max-width: 36ch; margin: 18px auto 0; font-size: 21px; line-height: 1.42; color: var(--ink-2); }
.meta-line { margin-top: 20px; font-size: 15px; color: var(--ink-3); text-wrap: balance; } /* build.py keeps "N min read" whole and each "·" with the words before it */
.meta-line a { color: var(--ink-2); text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.25); }
.hero .lede a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.3); }
.cta-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
main > .hero:last-child { padding-bottom: 120px; } /* the 404 has nothing under its header */
/* pages without the closing call to action (help center and help articles) still get room before the footer */
body:not(.t-home) > main > :is(.related, .prose, .faq-wrap, section:not([class])):last-child { padding-bottom: 128px; }

/* the short answer: the page's anchor. Glass like the nav, lit along its top edge by the breathing ring's
   colors. On wide screens it steps out of the column by exactly its padding, so its text lines up. */
.answer { position: relative; isolation: isolate; margin: 56px calc(-1 * min(var(--room), 40px)) 0; padding: 28px 40px 32px; border-radius: 24px;
  background: var(--light) 50% 0 / 80% 1px no-repeat,
    radial-gradient(70% 110% at 50% 0%, rgba(var(--violet), .14), rgba(var(--violet), 0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.02) 70%), rgba(15, 16, 20, .8);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: inset 0 -1px 1px rgba(0,0,0,.4), 0 44px 80px -44px rgba(0,0,0,.95); }
.answer::before { background: linear-gradient(160deg, rgba(255,255,255,.3), rgba(255,255,255,.06) 30%, rgba(255,255,255,0) 60%, rgba(255,255,255,.12)); }
.answer::after { content: ""; position: absolute; z-index: -1; left: 18%; right: 18%; top: -14px; height: 28px; border-radius: 50%; pointer-events: none; background: var(--light); filter: blur(18px); opacity: .45; }
.answer .kicker { display: flex; align-items: center; gap: 9px; color: var(--ink-2); }
/* a tiny breathing ring */
.answer .kicker::before { content: ""; flex: none; width: 13px; height: 13px; border-radius: 50%;
  background: conic-gradient(from 200deg, rgb(var(--teal)), rgb(var(--sky)), rgb(var(--violet)), rgb(var(--rose)), rgb(var(--amber)), rgb(var(--teal)));
  -webkit-mask: radial-gradient(closest-side, transparent 50%, #000 56%); mask: radial-gradient(closest-side, transparent 50%, #000 56%); }
.answer p { margin-top: 12px; font-size: 20px; line-height: 1.6; font-weight: 400; letter-spacing: 0; color: var(--ink); }
.answer p + p { margin-top: 12px; }

/* reading text */
.prose > h2, .faq-wrap h2 { margin-top: 88px; font-size: 32px; letter-spacing: -.024em; line-height: 1.15; }
.prose > h3 { margin-top: 48px; font-size: 21px; letter-spacing: -.016em; line-height: 1.3; }
.prose > p, .prose li, .prose figcaption, .prose .callout { font-weight: 400; letter-spacing: 0; }
.prose > p { margin-top: 20px; font-size: 18px; line-height: 1.66; color: var(--body); }
.prose > h2 + p, .prose > h3 + p { margin-top: 14px; }
.prose a:where(:not(.pill)) { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 3px; transition: text-decoration-color 160ms var(--ease); }
.prose a:where(:not(.pill)):hover { text-decoration-color: currentColor; }
.prose strong { color: var(--ink); font-weight: 600; }
.path { padding: 1px 7px; border-radius: 6px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-weight: 500; white-space: nowrap;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* a chip that has to wrap keeps its chip look on each line */

/* lists: quiet dots; lists whose items open with a bold point become a ruled stack of points */
.prose ul, .prose ol { margin-top: 20px; list-style: none; font-size: 18px; line-height: 1.6; color: var(--body); }
.prose li { position: relative; padding-left: 28px; }
.prose li + li { margin-top: 10px; }
.prose ul > li::before { content: ""; position: absolute; left: 6px; top: calc(.8em - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.prose > ul:has(> li > strong:first-child) { margin-top: 24px; border-top: 1px solid var(--line); }
.prose > ul:has(> li > strong:first-child) > li { margin: 0; padding: 20px 8px 21px 40px; border-bottom: 1px solid var(--line); }
.prose > ul:has(> li > strong:first-child) > li::before { left: 6px; top: calc(20px + .8em - 6px); width: 12px; height: 12px; background: none; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
/* numbered steps */
.prose ol { counter-reset: n; border-top: 1px solid var(--line); }
.prose ol > li { counter-increment: n; margin: 0; padding: 20px 8px 21px 48px; border-bottom: 1px solid var(--line); }
.prose ol > li::before { content: counter(n); position: absolute; left: 0; top: calc(20px + .8em - 14px); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); background: var(--s2); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px var(--line); }

.prose .callout { margin-top: 28px; padding: 22px 26px; border-radius: 20px; background: var(--s1); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px var(--line); font-size: 17px; line-height: 1.6; color: var(--body); }
.prose .callout p + p { margin-top: 10px; }

/* notes: the source line under a table carries a check mark; the closing disclaimer sits under a rule */
.note, .prose > .note { margin-top: 20px; font-size: 14px; line-height: 1.55; font-weight: 400; letter-spacing: 0; color: var(--ink-3); }
.note a { color: var(--ink-2); }
.prose > .table-wrap + .note { display: flex; gap: 10px; margin-top: 14px; padding: 0 4px; }
.prose > .table-wrap + .note::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; background: var(--ink-3); -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
.prose > .note:last-child { margin-top: 72px; padding-top: 22px; border-top: 1px solid var(--line); }

/* comparison tables: a card that steps out of the column. "Nudge" (th.us) gets the app icon and a lit cap, and
   its column (or, in a list of apps, its row via td.us) a faint lift. Phones: two-column tables keep their
   columns side by side; wider tables scroll inside their card with the first column pinned. */
.prose > .table-wrap, .prose > .table-wrap + .note { margin-inline: calc(-1 * min(var(--room), 100px)); }
.prose > .table-wrap.wide, .prose > .table-wrap.wide + .note { margin-inline: calc(-1 * min(var(--room), 200px)); }
.table-wrap { position: relative; margin-top: 24px; border-radius: 20px; background: var(--s1); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px var(--line), 0 30px 60px -40px rgba(0,0,0,.9); overflow: hidden; overflow: clip; }
.prose > .answer + .table-wrap { margin-top: 48px; } /* room under the short answer's shadow; the two cards differ in width */
.prose > .answer + p { margin-top: 48px; } /* the same room when a paragraph follows, so its first lines clear the shadow */
table.compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 16px; line-height: 1.5; font-weight: 400; letter-spacing: 0; color: var(--body); }
.compare th, .compare td { padding: 18px 22px; text-align: left; vertical-align: top; }
.compare thead th { padding-top: 20px; padding-bottom: 16px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; color: var(--ink); }
.compare thead th:first-child { font-size: 13px; letter-spacing: .01em; color: var(--ink-3); }
/* in a two-column table the first header is a real column ("In Opal you used..."), not a corner label */
table.compare:not(:has(thead th:nth-child(3))) thead th:first-child { font-size: 17px; letter-spacing: -.01em; color: var(--ink); }
.compare tbody td { border-top: 1px solid var(--line); }
.compare tbody td:first-child { font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--ink-2); text-wrap: balance; }
.compare a { color: var(--ink); }
/* label tables (empty corner cell) keep a narrow label column; tables whose first column holds content size to fit */
table.compare:has(thead th:nth-child(3)):not(:has(thead th:nth-child(4))) th:first-child:empty { width: 22%; }
/* tables with 3+ answer columns scroll inside their card at any width when they don't fit (does nothing when they do) */
.table-wrap:has(thead th:nth-child(4)) { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
/* the Nudge column */
.compare :is(th, td).us::before { content: ""; display: inline-block; width: 22px; height: 22px; margin: -2px 10px 0 0; vertical-align: middle; border-radius: 6px; background: url("/img/nudge-icon-96.webp") center / cover; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.compare thead th.us { background: var(--light) 50% 0 / 100% 2px no-repeat, linear-gradient(rgba(var(--violet), .08), rgba(255,255,255,.04)); }
table.compare:has(thead th.us:nth-child(2)) tbody td:nth-child(2),
table.compare:has(thead th.us:nth-child(3)) tbody td:nth-child(3) { background: rgba(255, 255, 255, .035); color: var(--ink); }
.compare tbody tr:has(> td.us) > td { background: rgba(255, 255, 255, .04); color: var(--ink); }
.compare tbody tr:has(> td.us) > td:first-child { box-shadow: inset 2px 0 0 rgb(var(--violet)); }

/* the page's own app screen (build.py: meta "screen", see DESIGN.md): a card in the column on smaller
   screens, a margin figure beside the text on wide ones (it takes no space from the column there) */
.phone-fig { position: relative; isolation: isolate; display: grid; justify-items: center; margin: 32px 0 8px; padding: 44px 24px 0; border-radius: 24px; overflow: hidden;
  background: radial-gradient(70% 45% at 50% 100%, rgba(var(--violet), .16), rgba(0,0,0,0) 75%), var(--s1); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px var(--line); }
.phone-fig .phone { --w: 224px; }
.phone-fig figcaption { padding: 34px 0 24px; font-size: 14px; line-height: 1.4; color: var(--ink-2); text-align: center; text-wrap: balance; }
.phone-fig figcaption a { color: var(--ink); }
.phone-fig .tag { vertical-align: .08em; margin-left: 8px; }
.js .phone-fig .phone { transition: translate 900ms var(--ease); }
.js .phone-fig:not(.in) .phone { translate: 0 28px; }

/* other pages' plain screenshots and figures */
.prose > figure:not(.phone-fig) { margin-top: 40px; text-align: center; }
.prose .phone-img { width: min(300px, 72vw); margin: 0 auto; border-radius: 36px; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 40px 70px -40px rgba(0,0,0,.95); }
.prose figure:not(.phone-fig) figcaption { margin-top: 16px; font-size: 14px; color: var(--ink-3); }

/* changelog */
.log { margin-top: 48px; border-top: 1px solid var(--line); }
.log-entry { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 96px; }
.log-entry .v { font-size: 21px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.log-entry .d { margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.log-entry ul { margin-top: 0; font-size: 17px; }

/* the 16-second demo video (task-mode, instagram-without-reels): centered and rounded like .phone-img */
.video-wrap { width: min(300px, 72vw); margin: 40px auto 0; }
.demo-video { width: 100%; border-radius: 36px; background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 40px 70px -40px rgba(0,0,0,.95); }

/* screen time calculator (calculator.js fills it in): a card that steps out of the column like the short
   answer. The sliders are the system's own, tinted white, so on an iPhone they look like iPhone sliders. */
.calc { color-scheme: dark; margin: 48px calc(-1 * min(var(--room), 40px)) 0; padding: 32px 40px 36px; border-radius: 24px; background: var(--s1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px var(--line), 0 30px 60px -40px rgba(0,0,0,.9); }
.calc .row + .row { margin-top: 20px; }
.calc label { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 17px; font-weight: 600; letter-spacing: -.005em; color: var(--ink); }
.calc output { font-size: 21px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.calc input[type=range] { display: block; width: 100%; height: 28px; margin: 6px 0 0; accent-color: var(--ink); cursor: pointer; }
.calc .results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.calc .stat { padding: 18px 18px 20px; border-radius: 16px; background: var(--s2); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px var(--line); }
.calc .stat b { display: block; font-size: 28px; font-weight: 600; letter-spacing: -.024em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ink); }
.calc .stat span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.35; color: var(--ink-2); text-wrap: balance; }
.calc .big { margin-top: 24px; font-size: 19px; line-height: 1.55; font-weight: 400; letter-spacing: 0; color: var(--ink); }
.calc .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.calc .private { margin-top: 16px; font-size: 14px; line-height: 1.5; font-weight: 400; letter-spacing: 0; color: var(--ink-3); }

/* hubs (compare, guides, help) and pricing: section > .shell > .grid.two / .help-list > .card.
   Link cards match Keep reading. */
main > section:not([class]) { margin-top: 48px; }
main > section:not([class]) + section:not([class]) { margin-top: 56px; }
main > section:not([class]) > .shell { max-width: calc(var(--measure) + 200px + 2 * var(--gap)); margin: 0 auto; padding: 0 var(--gap); }
main > section:not([class]) > .shell > .kicker { margin: 0 0 14px 2px; }
.grid, .help-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.card { position: relative; isolation: isolate; display: block; overflow: hidden; padding: 24px 28px 28px; border-radius: 20px; text-decoration: none; color: var(--ink-2);
  background: var(--s1); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px var(--line); }
a.card { padding-right: 64px; transition: background 200ms var(--ease), transform 200ms var(--ease); }
.rel::after, a.card::after { content: ""; position: absolute; right: 22px; top: 22px; width: 20px; height: 20px; background: var(--ink-3); -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat; transition: transform 200ms var(--ease), background 200ms var(--ease); }
a.card:hover { background: var(--s2); transform: translateY(-2px); }
a.card:hover::after { background: var(--ink); transform: translateX(3px); }
.card .kicker { color: var(--ink-3); }
.card h3 { margin-top: 10px; font-size: 21px; letter-spacing: -.02em; line-height: 1.25; color: var(--ink); }
.card h3:first-child { margin-top: 0; }
.card p { margin-top: 8px; font-size: 16px; line-height: 1.55; font-weight: 400; letter-spacing: 0; }
.card .price { margin-top: 6px; font-size: 15px; font-weight: 500; color: var(--ink); }
.card ul { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); list-style: none; font-size: 16px; line-height: 1.5; font-weight: 400; letter-spacing: 0; color: var(--body); }
.card li { position: relative; padding-left: 22px; }
.card li + li { margin-top: 8px; }
.card li::before { content: ""; position: absolute; left: 4px; top: calc(.75em - 2.5px); width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); }
.card .glow { position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(70% 40% at 50% 100%, rgba(var(--violet), .12), rgba(0,0,0,0) 75%); }
/* side-by-side price cards share rows (kicker, name, price, list), so a two-line price doesn't push one list down.
   The absolutely positioned .glow takes no cell. Without subgrid, the cards keep their own rows. */
@media (min-width: 861px) {
  .grid.two > div.card:has(> .price) { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; align-content: start; }
}

/* keep reading (build.py related_html) */
.related { margin-top: 128px; }
.related .shell { max-width: calc(var(--measure) + 200px + 2 * var(--gap)); margin: 0 auto; padding: 0 var(--gap); }
.related-h { font-size: 28px; letter-spacing: -.022em; }
.rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.rel { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 136px; padding: 22px 24px 24px; border-radius: 20px; text-decoration: none;
  background: var(--s1); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px var(--line); transition: background 200ms var(--ease), transform 200ms var(--ease); }
.rel:hover { background: var(--s2); transform: translateY(-2px); }
.rel:hover::after { background: var(--ink); transform: translateX(3px); }
.rel-k { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.rel-t { font-size: 21px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--ink); }

/* closing call to action (build.py cta_band_html): the home finale without the phone */
.cta-band { position: relative; margin-top: 64px; text-align: center; overflow: hidden; }
.cta-band .shell { padding: 0 var(--gap); }
.cta-band .card-band { position: relative; isolation: isolate; max-width: 1180px; margin: 0 auto; padding: 128px 0 112px; }
.cta-band .glow { position: absolute; z-index: -1; left: -20%; right: -20%; top: 0; bottom: 0; pointer-events: none; background: radial-gradient(50% 62% at 50% 100%, rgba(var(--amber), .09), rgba(0,0,0,0) 72%); }
.cta-band h2 { font-size: 56px; }
.cta-band h2 > span { display: block; } /* build.py's default headline: one block per sentence, so each balances (Chrome stops balancing after a <br>) */
.cta-band .card-band > p:not(.fineprint) { max-width: 40ch; margin: 18px auto 0; font-size: 21px; line-height: 1.42; color: var(--ink-2); text-wrap: balance; }
.cta-band .fineprint { margin-top: 18px; font-size: 13px; color: var(--ink-3); }

/* ================================================================ reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain, .week-band::before, .vault::before, .bgv::after { animation: none; }
  .js .rise, .js .intro-phone, .js [data-reveal]:not(.phone-fig), .js .chips .chip { transform: none; }
  .js .rise, .js .intro-phone, .js .chips .chip { opacity: 1; }
  .js [data-reveal]:not(.phone-fig) { transition: opacity 150ms linear; }
  .js .locks .lk { transform: none; }
  .js .locks.in .lk { transition: opacity 150ms linear; }
  .js .phone-fig:not(.in) .phone { translate: none; }
  .qr.qr-pop { transition: opacity 120ms linear, visibility 0s linear 120ms; transform: translate(-50%, 0); }
  .nav .qr.qr-pop { transform: none; }
  .btn, .pill, .nav-in > a, .rev-ctl button, .rel, .rel::after, a.card, a.card::after, .faq summary::after, .screen .label-mask span { transition: none; }
  .ready .devices { transition: opacity 300ms linear; }
}

/* ================================================================ responsive */

/* wide screens: the article's app screen moves into the margin (from 1296px, so the phone keeps the 32px gutter) */
@media (min-width: 1296px) {
  .phone-fig { float: right; width: 236px; margin: 4px calc(-236px - 60px) 40px 0; padding: 0; overflow: visible; background: none; box-shadow: none; } /* bottom margin: room above a table that clears it */
  .phone-fig::before { content: ""; position: absolute; z-index: -1; left: -45%; right: -45%; top: 4%; bottom: 4%; pointer-events: none; background: radial-gradient(closest-side, rgba(var(--violet), .2), rgba(var(--violet), .06) 55%, rgba(var(--violet), 0)); }
  .phone-fig .phone { --w: 236px; }
  .phone-fig figcaption { padding: 34px 0 0; }
  /* tables step further into the margin than the phone's edge: one that would start beside the phone drops below it */
  .prose > .phone-fig ~ .table-wrap { clear: right; }
  /* the figure sits between an h2 and its paragraph (meta screen.after_h2); keep the h2 + p spacing */
  .prose > h2 + .phone-fig + p { margin-top: 14px; }
}

@media (max-width: 980px) {
  .trio, .feat-wide, .pair, .rows { grid-template-columns: 1fr; }
  .feat-wide .txt { padding: 48px 32px 0; }
  .stair-box { padding: 28px 32px 44px; }
  .chips { margin: 0 24px 24px; }
  .week { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .foot { grid-template-columns: repeat(4, 1fr); }
  .foot > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .locks { max-width: calc(80px * 4 + 28px * 3); row-gap: 28px; }
  .locks li { width: 80px; height: 80px; }
  .rel-grid { grid-template-columns: 1fr; gap: 12px; }
  .rel { min-height: 0; gap: 6px; padding: 20px 56px 20px 22px; }
  .rel::after, a.card::after { top: 50%; margin-top: -10px; }
  .rel-t { font-size: 19px; }
  .grid, .grid.three, .help-list { grid-template-columns: 1fr; gap: 12px; }
  .card { padding: 20px 22px 22px; }
  a.card { padding-right: 56px; }
  .card h3 { font-size: 19px; }
}

/* phones */
@media (max-width: 640px) {
  :root { --gap: 16px; --sec: 96px; }
  body { font-size: 16px; }
  .h2 { font-size: 36px; }
  .h3 { font-size: 28px; }
  .sub { font-size: 18px; }
  .nav { top: 10px; }
  .nav-in > a:not(.brand):not(.btn) { display: none; }
  .qr { display: none; }

  /* home */
  .home-hero { min-height: 720px; padding-bottom: 56px; }
  .hero-copy { padding: 112px 20px 0; }
  .home-hero .name { font-size: 15px; }
  .home-hero h1 { font-size: clamp(36px, 12.6vw, 48px); } /* "doomscrolling." stays on one line down to 320px */
  .devices { width: 100%; height: 500px; margin-top: 32px; --pw: 230px; } /* 230 = the hero phone width on phones; change both together */
  .devices .phone { --w: 230px; }
  .bgv-app { top: 10%; height: 96%; transform: translateX(-50%) scale(1.65); }
  .head { margin-bottom: 44px; }
  .apps { padding-top: 72px; }
  .locks { max-width: calc(64px * 4 + 22px * 3); gap: 24px 22px; }
  .locks li { width: 64px; height: 64px; }
  .locks .lk { width: 26px; height: 26px; right: -8px; top: -8px; }
  .tall { padding: 32px 26px 48px; }
  .tall h3 { font-size: 24px; }
  .stage .phone { --w: 230px; }
  .feat-wide .txt { padding: 36px 24px 0; }
  .levels li { grid-template-columns: 112px 1fr; }
  .stair-box { padding: 24px 24px 36px; }
  .stair { --h: 176px; margin: 36px 0 40px; }
  .stair-dot { width: 7px; height: 7px; margin: 0 0 -3.5px -3.5px; box-shadow: 0 0 0 3px var(--s1); }
  .stair li:last-child .stair-dot { box-shadow: 0 0 0 3px var(--s1), 0 0 12px 3px rgba(var(--rose), .35); }
  .stair-v { font-size: 13px; bottom: calc(var(--y) + 10px); }
  .stair-k { top: calc(100% + 14px); }
  .chips { height: 320px; }
  .chip { font-size: 14px; padding: 9px 14px 9px 12px; }
  .chips .chip:last-child { left: auto !important; right: 0; top: 86% !important; } /* "any site you add" stays inside the card (positions are inline) */
  .mode { padding: 32px; }
  .week { grid-template-columns: 1fr; row-gap: 12px; }
  .week li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; text-align: left; padding: 12px 16px; border-radius: 18px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px var(--line); }
  .week img { width: 64px; margin: 0; }
  .week b { margin-top: 0; }
  .rows li { padding: 28px 24px; }
  .rows img { width: 64px; margin-bottom: 18px; }
  .rows b { font-size: 19px; }
  .vault { padding: 48px 20px 72px; }
  .vault img { width: 190px; }
  .rev { flex-basis: 86%; padding: 24px; }
  .t-home .faq-wrap h2 { margin-bottom: 44px; font-size: 36px; }
  .table { height: 300px; margin-top: 48px; }
  .table .phone { --w: 190px; bottom: -120px; }

  /* articles and hubs */
  body:not(.t-home) > main::before { top: 210px; width: 520px; height: 840px; margin: -420px 0 0 -260px; filter: blur(40px) saturate(1.2) brightness(.8); }
  body:not(.t-home) > main::after { height: 640px; }
  .crumbs { padding-top: 88px; }
  .prose > header { margin-top: 28px; }
  .hero { padding-top: 28px; }
  main > .hero:last-child { padding-bottom: 88px; }
  body:not(.t-home) > main > :is(.related, .prose, .faq-wrap, section:not([class])):last-child { padding-bottom: 96px; }
  .prose h1, .hero h1 { margin-top: 14px; font-size: clamp(30px, 9.4vw, 40px); letter-spacing: -.03em; line-height: 1.08; }
  .prose > header .lede, .hero .lede { font-size: 18px; }
  .meta-line { margin-top: 16px; font-size: 14px; }
  .answer { margin-top: 36px; padding: 22px 20px 24px; border-radius: 20px; }
  .answer p { font-size: 18px; line-height: 1.58; }
  .prose > h2, .faq-wrap h2 { margin-top: 64px; font-size: 26px; }
  .prose > p, .prose ul, .prose ol { font-size: 17px; }
  .prose > ul:has(> li > strong:first-child) > li { padding: 18px 0 19px 32px; }
  .prose > ul:has(> li > strong:first-child) > li::before { left: 2px; top: calc(18px + .8em - 6px); }
  .prose ol > li { padding: 18px 0 19px 44px; }
  .prose ol > li::before { top: calc(18px + .8em - 14px); }
  .prose > .note:last-child { margin-top: 56px; }

  .table-wrap { border-radius: 18px; }
  .compare th, .compare td { padding: 14px 16px; }
  /* label + two columns: the label becomes a small heading over its two answers, side by side */
  table.compare:has(thead th:nth-child(3)):not(:has(thead th:nth-child(4))),
  table.compare:has(thead th:nth-child(3)):not(:has(thead th:nth-child(4))) :is(thead, tbody) { display: block; }
  table.compare:has(thead th:nth-child(3)):not(:has(thead th:nth-child(4))) tr { display: grid; grid-template-columns: 1fr 1fr; }
  table.compare:has(thead th:nth-child(3)):not(:has(thead th:nth-child(4))) thead th { width: auto; padding: 16px; font-size: 15px; }
  table.compare:has(thead th:nth-child(3)):not(:has(thead th:nth-child(4))) thead th:first-child { display: none; }
  table.compare:has(thead th:nth-child(3)):not(:has(thead th:nth-child(4))) tbody td { font-size: 15px; line-height: 1.45; }
  table.compare:has(thead th:nth-child(3)):not(:has(thead th:nth-child(4))) tbody td:first-child { grid-column: 1 / -1; padding: 16px 16px 2px; font-size: 13px; color: var(--ink-2); }
  table.compare:has(thead th:nth-child(3)):not(:has(thead th:nth-child(4))) tbody td:not(:first-child) { border-top: 0; padding-top: 8px; padding-bottom: 16px; }
  table.compare:has(thead th:nth-child(3)):not(:has(thead th:nth-child(4))) tbody td:last-child { box-shadow: inset 1px 0 0 var(--line); }
  /* the header row scrolls away on a long table, so every Nudge answer carries the app icon */
  table.compare:has(thead th.us:nth-child(2)):not(:has(thead th:nth-child(4))) tbody td:nth-child(2)::before,
  table.compare:has(thead th.us:nth-child(3)):not(:has(thead th:nth-child(4))) tbody td:nth-child(3)::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; border-radius: 4px; background: url("/img/nudge-icon-96.webp") center / cover; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
  /* wider tables scroll inside their card (rule above), first column pinned */
  table.compare:has(thead th:nth-child(4)) { min-width: 680px; }
  table.compare:has(thead th:nth-child(4)) :is(th, td):first-child { position: sticky; left: 0; z-index: 1; width: 128px; background: var(--s1); box-shadow: inset -1px 0 0 var(--line); }
  table.compare:has(thead th:nth-child(4)) tbody tr:has(> td.us) > td:first-child { background: #16171a; box-shadow: inset -1px 0 0 var(--line), inset 2px 0 0 rgb(var(--violet)); }

  .calc { margin-top: 36px; padding: 22px 20px 24px; border-radius: 20px; }
  .calc label { font-size: 16px; }
  .calc output { font-size: 19px; }
  .calc .results { grid-template-columns: 1fr; gap: 8px; margin-top: 24px; padding-top: 20px; }
  .calc .stat { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px; border-radius: 14px; }
  .calc .stat b { flex: none; font-size: 22px; }
  .calc .stat span { margin-top: 0; }
  .calc .big { font-size: 17px; }
  .calc .actions .pill { flex: 1 1 auto; }
  main > section:not([class]) { margin-top: 36px; }
  main > section:not([class]) + section:not([class]) { margin-top: 44px; }

  .phone-fig { padding-top: 36px; }
  .phone-fig .phone { --w: 204px; }
  .log-entry { grid-template-columns: 1fr; gap: 8px; }
  .faq summary { font-size: 17px; padding-right: 48px; }
  .faq details p { padding-right: 0; font-size: 16px; }

  .related { margin-top: 96px; }
  .related-h { font-size: 24px; }
  .cta-band .card-band { padding: 96px 0 80px; }
  .cta-band h2 { font-size: 36px; }
  .cta-band .card-band > p:not(.fineprint) { font-size: 18px; }

  .foot { grid-template-columns: 1fr 1fr; gap: 32px 16px; padding-top: 56px; }
  .foot a { padding: 5px 0; line-height: 1.3; } /* a long guide title wraps as one link, not two */
}
/* phones: a table wider than its card fades at the right edge until it's scrolled to the end, so the hidden columns
   are discoverable. Browsers without scroll-driven animations keep the plain card. */
@property --table-edge { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes table-edge { 0%, 90% { --table-edge: 48px; } 100% { --table-edge: 0px; } }
@media (max-width: 640px) {
  @supports (animation-timeline: scroll(self inline)) {
    .table-wrap:has(thead th:nth-child(4)) {
      -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--table-edge)), transparent);
      mask-image: linear-gradient(90deg, #000 calc(100% - var(--table-edge)), transparent);
      animation: table-edge linear both;
      animation-timeline: scroll(self inline);
    }
  }
}
/* small phones (320 to 400): long settings paths wrap inside their chip instead of running off the page */
@media (max-width: 400px) {
  .path { white-space: normal; }
}
/* the smallest phones (320 to 360): "Save my result as an image" stays on one line */
@media (max-width: 360px) {
  .calc .actions .pill { font-size: 16px; padding-inline: 16px; }
}