/* Atlas, the public site. Same paper, ink, highlighter and AI spectrum as the app
   (tokens copied from server/web/static/app.css and docs/DESIGN.md), on a page of its own. */
@font-face { font-family: "Bricolage"; src: url("fonts/bricolage.woff") format("woff"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Schibsted"; src: url("fonts/schibsted.woff") format("woff"); font-weight: 400 900; font-display: swap; }

:root {
  color-scheme: light dark;
  --paper: #f7f6f3; --sheet: #fdfdfb; --raised: #ffffff; --ink: #1c1b19; --ink-2: #5a5752; --ink-3: #6e6b65;
  --rule: #e9e7e2; --rule-strong: #d8d5ce; --tint: rgba(28, 27, 25, 0.045);
  --night: #1c1b19; --night-ink: #f3f2ee; --night-muted: #a9a59d; --night-sheet: #262522; --night-rule: #3a3936;
  --mark: #ffd84d; --mark-soft: rgba(255, 216, 77, 0.55);
  --accent: #1f64b8; --ring: rgba(42, 120, 214, 0.35);
  --series1: #2a78d6; --series1-soft: rgba(42, 120, 214, 0.12); --cmp-line: #aca391;
  --good-ink: #147034;
  --glass: rgba(252, 252, 250, 0.72); --glass-line: rgba(28, 27, 25, 0.08);
  --ai-colors: #3d8bff, #7a5cff, #c45cf0, #ff5f9e, #ff8a3d, #ffc93c, #36c6a8, #3d8bff;
  --display: "Bricolage", ui-sans-serif, system-ui, sans-serif;
  --text: "Schibsted", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow-app: 0 1px 2px rgba(28, 27, 25, 0.05), 0 24px 60px -12px rgba(28, 27, 25, 0.18), 0 0 0 1px rgba(28, 27, 25, 0.07);
  --ease: cubic-bezier(.2, 0, 0, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111110; --sheet: #181817; --raised: #1f1f1d; --ink: #f3f2ee; --ink-2: #b6b2aa; --ink-3: #86827b;
    --rule: #292826; --rule-strong: #3a3936; --tint: rgba(255, 255, 255, 0.055);
    --night: #0c0c0b; --night-sheet: #1a1a18; --night-rule: #2e2d2a;
    --mark: #f5cf45; --mark-soft: rgba(245, 207, 69, 0.3);
    --accent: #6ea8f0; --ring: rgba(110, 168, 240, 0.4);
    --series1: #3987e5; --series1-soft: rgba(57, 135, 229, 0.16); --cmp-line: #787062;
    --good-ink: #5fd07d;
    --glass: rgba(30, 30, 32, 0.7); --glass-line: rgba(255, 255, 255, 0.08);
    --shadow-app: 0 1px 2px rgba(0, 0, 0, 0.4), 0 30px 70px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.07);
  }
}
:root[data-theme="dark"] {
  --paper: #111110; --sheet: #181817; --raised: #1f1f1d; --ink: #f3f2ee; --ink-2: #b6b2aa; --ink-3: #86827b;
  --rule: #292826; --rule-strong: #3a3936; --tint: rgba(255, 255, 255, 0.055);
  --night: #0c0c0b; --night-sheet: #1a1a18; --night-rule: #2e2d2a;
  --mark: #f5cf45; --mark-soft: rgba(245, 207, 69, 0.3);
  --accent: #6ea8f0; --ring: rgba(110, 168, 240, 0.4);
  --series1: #3987e5; --series1-soft: rgba(57, 135, 229, 0.16); --cmp-line: #787062;
  --good-ink: #5fd07d;
  --glass: rgba(30, 30, 32, 0.7); --glass-line: rgba(255, 255, 255, 0.08);
  --shadow-app: 0 1px 2px rgba(0, 0, 0, 0.4), 0 30px 70px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.07);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.55 var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 6px; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-left)) 0 max(16px, env(safe-area-inset-right)); }
@media (min-width: 720px) { .wrap { padding: 0 32px; } }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: var(--paper); text-decoration: none; }
.skip:focus { top: 12px; }

h1, h2 { font-family: var(--display); font-weight: 700; font-stretch: 92%; letter-spacing: -0.03em; text-wrap: balance; }
h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.02; }
h3 { font-family: var(--display); font-weight: 650; font-stretch: 92%; font-size: 1.3125rem; line-height: 1.2; letter-spacing: -0.015em; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 999px;
  background: var(--ink); color: var(--paper); font: 600 1rem var(--text); text-decoration: none; letter-spacing: -0.01em;
  transition: transform .2s var(--ease), box-shadow .2s ease, background-color .2s ease; }
.btn:hover { box-shadow: 0 8px 22px -6px rgba(28, 27, 25, .35); transform: translateY(-1px); }
.btn:active { transform: scale(.98); }
.btn.sm { min-height: 38px; padding: 0 16px; font-size: 0.9375rem; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--rule-strong); }
.btn.ghost:hover { background: var(--tint); box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* nav */
.nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 78%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.nav.scrolled { border-bottom-color: var(--rule); }
.nav-in { display: flex; align-items: center; gap: 24px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 1.375rem/1 var(--display); font-stretch: 90%; letter-spacing: -0.02em; text-decoration: none; }
.brand svg { width: 24px; height: 24px; }
.nav nav { display: flex; gap: 4px; margin-left: 12px; }
.nav nav a, .link { padding: 8px 12px; border-radius: 999px; color: var(--ink-2); font-weight: 500; font-size: 0.9375rem; text-decoration: none; }
.nav nav a:hover, .link:hover { color: var(--ink); background: var(--tint); }
.nav-act { margin-left: auto; display: flex; align-items: center; gap: 6px; }
@media (max-width: 820px) { .nav nav { display: none; } }

/* hero */
.hero { padding: clamp(48px, 9vw, 104px) 0 clamp(56px, 8vw, 96px); }
.hero h1 { max-width: 11.5em; font-size: clamp(2.875rem, 8.4vw, 6.25rem); line-height: .96; letter-spacing: -0.045em; }
.lede { max-width: 34em; margin-top: 24px; color: var(--ink-2); font-size: clamp(1.125rem, 1.9vw, 1.3125rem); line-height: 1.5; }
.hero .cta { margin-top: 32px; }
.works { margin-top: 18px; color: var(--ink-3); font-size: 0.9375rem; }

/* the app preview */
.app { position: relative; margin-top: clamp(48px, 7vw, 80px); border-radius: 22px; background: var(--sheet); box-shadow: var(--shadow-app); overflow: hidden; }
.app figcaption { position: absolute; right: 16px; bottom: 12px; color: var(--ink-3); font-size: 0.75rem; }
.app-bar { display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 16px; border-bottom: 1px solid var(--rule); }
.dots { display: flex; gap: 7px; } .dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--rule-strong); }
.app-shop { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 10px; box-shadow: 0 0 0 1px var(--rule); font-weight: 600; font-size: 0.875rem; }
.app-shop b { width: 20px; height: 20px; border-radius: 6px; background: var(--ink); position: relative; }
.app-shop b::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--mark); }
.ask-btn { position: relative; isolation: isolate; overflow: hidden; margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 15px 0 8px;
  border-radius: 999px; font: 600 0.8125rem var(--text); box-shadow: 0 0 18px rgba(122, 92, 255, .25); }
.ask-btn::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -2; width: 240%; aspect-ratio: 1; background: conic-gradient(from 0deg, var(--ai-colors)); transform: translate(-50%, -50%); }
.ask-btn::after { content: ""; position: absolute; inset: 1.5px; z-index: -1; border-radius: inherit; background: var(--sheet); }
.app-body { display: grid; grid-template-columns: 200px 1fr; min-height: 520px; }
.app-side { display: grid; align-content: start; gap: 2px; padding: 18px 12px; border-right: 1px solid var(--rule); background: color-mix(in srgb, var(--paper) 60%, var(--sheet)); }
.app-side span { padding: 8px 12px; border-radius: 10px; color: var(--ink-2); font-size: 0.875rem; font-weight: 500; }
.app-side .on { color: var(--ink); font-weight: 600; background: color-mix(in srgb, var(--accent) 13%, transparent); }
.app-main { padding: clamp(22px, 3.5vw, 40px) clamp(20px, 3.5vw, 44px) 40px; min-width: 0; }
.app-page { display: flex; align-items: center; gap: 9px; color: var(--ink-2); font-size: 0.9375rem; }
.app-page i { width: 7px; height: 7px; border-radius: 50%; background: var(--mark); }
.app-head { max-width: 17em; margin-top: 10px; font: 700 clamp(1.75rem, 3.6vw, 2.875rem)/1.04 var(--display); font-stretch: 92%; letter-spacing: -0.035em; min-height: 2.08em; }
.app-sub { margin-top: 12px; color: var(--ink-2); font-size: 1rem; min-height: 1.55em; }
mark { color: inherit; background: linear-gradient(transparent 58%, var(--mark-soft) 58%, var(--mark-soft) 92%, transparent 92%) no-repeat 0 0 / 100% 100%; padding: 0 .04em; }
.swap { transition: opacity .35s var(--ease), transform .35s var(--ease); }
.swap.out { opacity: 0; transform: translateY(6px); }
@media (prefers-reduced-motion: no-preference) {
  mark.sweep { animation: sweep .7s .15s var(--ease) both; }
}
@keyframes sweep { from { background-size: 0 100%; } }

.figs { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 28px; border-top: 2px solid var(--ink); }
.fig { position: relative; padding: 14px 16px 16px; border-left: 1px solid var(--rule); display: grid; gap: 2px; min-width: 0; }
.fig:first-child { border-left: 0; padding-left: 0; }
.fig dt { color: var(--ink-2); font-size: 0.8125rem; font-weight: 500; }
.fig .v { font: 700 1.75rem/1.1 var(--display); font-stretch: 92%; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fig .d { color: var(--ink-3); font-size: 0.8125rem; }
.fig .d.up { color: var(--good-ink); font-weight: 600; }
.why { position: absolute; top: 10px; right: 8px; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px 0 7px; border-radius: 999px;
  background: var(--glass); box-shadow: 0 0 0 1px var(--glass-line), 0 4px 12px rgba(90, 80, 240, .16); font: 600 0.6875rem var(--text); }
.why svg { width: 11px; height: 11px; fill: #7a5cff; }

.season { margin-top: 26px; }
.season svg { display: block; width: 100%; height: 150px; overflow: visible; }
.season .grid { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.season .last { fill: none; stroke: var(--cmp-line); stroke-width: 2; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.season .now { fill: none; stroke: var(--series1); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.season .now-area { fill: var(--series1-soft); }
.season .ahead { fill: none; stroke: var(--series1); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; opacity: .7; vector-effect: non-scaling-stroke; }
.season .today { fill: var(--mark); opacity: .9; }
.season .dot { fill: var(--series1); stroke: var(--sheet); stroke-width: 3; vector-effect: non-scaling-stroke; }
.season-k { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; color: var(--ink-2); font-size: 0.8125rem; }
.season-k span { display: inline-flex; align-items: center; gap: 7px; }
.season-k i { width: 16px; height: 0; border-top: 2.5px solid var(--series1); }
.season-k .k-last { border-top: 2px dashed var(--cmp-line); }
.season-k .k-ahead { border-top: 2px dotted var(--series1); }
@media (prefers-reduced-motion: no-preference) {
  .season .now { stroke-dasharray: 400; stroke-dashoffset: 400; }
  .season.drawn .now { animation: draw 1.4s .2s var(--ease) forwards; }
  .season .ahead, .season .dot, .season .now-area { opacity: 0; transition: opacity .6s ease 1.4s; }
  .season.drawn .ahead { opacity: .7; } .season.drawn .dot, .season.drawn .now-area { opacity: 1; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }

@media (max-width: 860px) {
  .app-body { grid-template-columns: 1fr; min-height: 0; }
  .app-side { display: none; }
  .figs { grid-template-columns: repeat(2, 1fr); }
  .fig:nth-child(3) { border-left: 0; padding-left: 0; }
  .fig:nth-child(n + 3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 520px) {
  .app { border-radius: 18px; margin-left: -4px; margin-right: -4px; }
  .app-shop, .dots { display: none; }
  .ask-btn { margin-left: 0; }
  .app-bar { justify-content: flex-end; }
  .fig .v { font-size: 1.5rem; }
  .app figcaption { position: static; padding: 0 20px 16px; }
}

/* features: an index of rows, ruled like the app's lists */
.features { padding: clamp(64px, 10vw, 128px) 0; }
.features h2 { max-width: 13em; }
.intro { max-width: 36em; margin-top: 18px; color: var(--ink-2); font-size: 1.125rem; }
.index { margin-top: 48px; border-top: 2px solid var(--ink); display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
.index li { display: grid; gap: 8px; padding: 26px 0 28px; border-bottom: 1px solid var(--rule); align-content: start; }
.index p { max-width: 34em; }
.index p { color: var(--ink-2); }
@media (max-width: 1080px) { .index { grid-template-columns: 1fr; } }
@media (min-width: 641px) and (max-width: 1080px) { .index li { grid-template-columns: 13em 1fr; gap: 6px 28px; } }
@media (max-width: 640px) { .index li { padding: 20px 0 22px; } }

/* Ask Atlas: the one dark sheet on the page, with the spectrum */
.ask { position: relative; padding: clamp(72px, 10vw, 128px) 0; background: var(--night); color: var(--night-ink); overflow: hidden; isolation: isolate; }
.ask::before { content: ""; position: absolute; z-index: -1; right: -20%; top: -30%; width: 80vmax; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--ai-colors)); filter: blur(120px); opacity: .22; }
.ask-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.ask-copy h2 { margin-top: 24px; max-width: 11em; }
.ask-copy > p { margin-top: 20px; max-width: 32em; color: var(--night-muted); font-size: 1.125rem; }
.ticks { margin-top: 26px; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 5px; width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(from 0deg, var(--ai-colors)); }
.ticks li::after { content: ""; position: absolute; left: 5px; top: 8.5px; width: 6px; height: 3.5px; border: 2px solid var(--night); border-top: 0; border-right: 0; transform: rotate(-45deg); }
@media (max-width: 940px) { .ask-in { grid-template-columns: 1fr; } }

.orb { position: relative; display: inline-block; flex: none; width: 56px; height: 56px; border-radius: 50%; isolation: isolate; }
.orb::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, var(--ai-colors)); filter: blur(3px) saturate(1.2); }
.orb::after { content: ""; position: absolute; inset: -18%; z-index: -1; border-radius: 50%; background: conic-gradient(from 90deg, var(--ai-colors)); filter: blur(14px); opacity: .5; }
.orb i { position: absolute; inset: 14%; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .35) 34%, rgba(255, 255, 255, 0) 60%),
              radial-gradient(circle at 70% 75%, rgba(80, 60, 220, .55), rgba(80, 60, 220, 0) 60%), rgba(255, 255, 255, .28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.orb.sm { width: 20px; height: 20px; } .orb.sm::before { filter: blur(1.5px); } .orb.sm::after { inset: -10%; filter: blur(4px); } .orb.sm i { inset: 18%; }
@media (prefers-reduced-motion: no-preference) {
  .orb::before { animation: spin 5s linear infinite; }
  .orb::after { animation: spin 7s linear infinite reverse, glow 3.2s ease-in-out infinite; }
  .orb i { animation: breathe 3.2s ease-in-out infinite; }
  .ask-btn::before { animation: spin-c 6s linear infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-c { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes glow { 50% { opacity: .9; transform: scale(1.15); } }
@keyframes breathe { 50% { transform: scale(.92); } }

.chat { display: grid; gap: 14px; padding: 22px; border-radius: 26px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); }
.q { justify-self: end; max-width: 80%; padding: 10px 16px; border-radius: 20px 20px 6px 20px; background: linear-gradient(135deg, #2f7cf6, #5b5ff2); color: #fff; font-weight: 500; }
.a { padding: 20px 22px; border-radius: 20px; background: var(--night-sheet); box-shadow: inset 0 0 0 1px var(--night-rule); }
.verdict { display: flex; align-items: center; gap: 8px; color: #ffcf6b; font-weight: 600; font-size: 0.875rem; }
.verdict i { width: 8px; height: 8px; border-radius: 50%; background: #ffcf6b; }
.a-head { margin-top: 8px; font: 650 1.3125rem/1.25 var(--display); font-stretch: 92%; letter-spacing: -0.015em; }
.a ul { margin-top: 14px; display: grid; gap: 10px; }
.a li { padding-left: 16px; position: relative; color: #dcd9d2; font-size: 0.9375rem; line-height: 1.5; }
.a li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--night-muted); }
.rule { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--night-muted); font-size: 0.75rem; white-space: nowrap; }
.a-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; font-size: 0.8125rem; color: var(--night-muted); }
.a-foot span { padding: 3px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--night-rule); }
.a-foot .ok { color: #7ee09a; box-shadow: inset 0 0 0 1px rgba(126, 224, 154, .35); }
.bar { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 8px 0 18px; border-radius: 999px; color: var(--night-muted); }
.bar::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -2; width: 160%; aspect-ratio: 1; background: conic-gradient(from 0deg, var(--ai-colors)); transform: translate(-50%, -50%); opacity: .8; }
.bar::after { content: ""; position: absolute; inset: 1.5px; z-index: -1; border-radius: inherit; background: #1f1e1c; }
.send { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #f3f2ee; color: #1c1b19; }
.send svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .bar::before { animation: spin-c 5s linear infinite; }
  .chat.play .q { animation: rise .5s var(--ease) both; }
  .chat.play .a { animation: rise .6s .45s var(--ease) both; }
  .chat.play .a li { animation: rise .5s var(--ease) both; }
  .chat.play .a li:nth-child(1) { animation-delay: .9s; } .chat.play .a li:nth-child(2) { animation-delay: 1.05s; } .chat.play .a li:nth-child(3) { animation-delay: 1.2s; }
  .chat.play .a-foot { animation: rise .5s 1.4s var(--ease) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 520px) { .chat { padding: 14px; border-radius: 22px; } .a { padding: 18px; } .rule { display: block; width: max-content; margin: 4px 0 0; } }

/* how it works: a real sequence, so it's numbered */
.how { padding: clamp(64px, 10vw, 128px) 0 clamp(40px, 6vw, 72px); }
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; margin-top: 44px; }
.steps li { counter-increment: s; padding-top: 18px; border-top: 2px solid var(--ink); }
.steps li::before { content: counter(s); display: block; margin-bottom: 18px; font: 700 3rem/1 var(--display); font-stretch: 90%; color: var(--ink); }
.steps li:first-child::before { background: linear-gradient(transparent 55%, var(--mark-soft) 55%, var(--mark-soft) 92%, transparent 92%); width: max-content; padding: 0 .06em; }
.steps p { margin-top: 10px; color: var(--ink-2); max-width: 26em; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; gap: 36px; } }

.trust { padding: clamp(40px, 6vw, 72px) 0 clamp(64px, 10vw, 112px); }
.trust-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 40px; align-items: start; }
.trust h2 { font-size: clamp(1.75rem, 3vw, 2.375rem); max-width: 10em; }
.trust dl { display: grid; gap: 0; border-top: 1px solid var(--rule-strong); }
.trust dl div { display: grid; grid-template-columns: 9em 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.trust dt { font-weight: 650; }
.trust dd { color: var(--ink-2); }
@media (max-width: 820px) { .trust-in { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .trust dl div { grid-template-columns: 1fr; gap: 4px; } }

.end { padding: clamp(72px, 10vw, 120px) 0; background: var(--sheet); border-top: 1px solid var(--rule); }
.end h2 { max-width: 12em; font-size: clamp(2.25rem, 5.4vw, 4rem); }
.end p { margin-top: 18px; max-width: 32em; color: var(--ink-2); font-size: 1.125rem; }
.end .cta { margin-top: 30px; }

.foot { padding: 28px 0 calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); background: var(--sheet); color: var(--ink-3); font-size: 0.875rem; }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.brand.small { font-size: 1.0625rem; color: var(--ink); } .brand.small svg { width: 18px; height: 18px; }

@media (prefers-reduced-transparency: reduce) { .nav, .chat { -webkit-backdrop-filter: none; backdrop-filter: none; } .nav { background: var(--paper); } }
@media (prefers-contrast: more) { :root { --ink-2: #3b3936; --ink-3: #4a4844; } .btn.ghost { box-shadow: inset 0 0 0 2px var(--ink); } }
@media (forced-colors: active) { .btn { border: 2px solid ButtonText; } mark { background: Mark; } }

/* the preview's page switcher */
.peek { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: clamp(48px, 7vw, 80px); }
.peek + .app { margin-top: 16px; }
.peek button { min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--tint); color: var(--ink-2); font: 500 0.9375rem var(--text); cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .2s var(--ease); }
.peek button:hover { color: var(--ink); }
.peek button:active { transform: scale(.97); }
.peek button.on { background: var(--ink); color: var(--paper); font-weight: 600; }
.app-head mark { white-space: nowrap; }

/* pricing: three ruled columns, the middle one on a sheet with the highlighter */
.pricing { padding: clamp(64px, 10vw, 120px) 0; border-top: 1px solid var(--rule); }
.pricing h2 { max-width: 13em; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 28px 26px 30px; border-top: 2px solid var(--ink); }
.plan.best { border-radius: 0 0 22px 22px; background: var(--sheet); box-shadow: 0 1px 2px rgba(28, 27, 25, .05), 0 18px 44px -18px rgba(28, 27, 25, .2); }
.pick { position: absolute; top: -14px; left: 26px; padding: 3px 10px; border-radius: 999px; background: var(--mark); color: #1c1b19; font-size: 0.8125rem; font-weight: 650; }
.plan h3 { font-size: 1.5rem; }
.who { margin-top: 6px; color: var(--ink-2); min-height: 3.1em; }
.price { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; }
.amt { font: 700 3.25rem/1 var(--display); font-stretch: 90%; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.per { color: var(--ink-3); font-size: 0.9375rem; }
.plan .btn { margin-top: 22px; width: 100%; }
.plan ul { display: grid; gap: 10px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--rule); }
.plan li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 0.9688rem; }
.plan li svg { width: 16px; height: 16px; margin-top: 3px; color: var(--good-ink); }
.plan.best li svg { color: var(--accent); }
.plan li .soon { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-2); font-size: 0.75rem; font-style: normal; font-weight: 600; vertical-align: 1px; }
.fine { max-width: 46em; margin-top: 32px; color: var(--ink-3); font-size: 0.9375rem; }
@media (max-width: 940px) {
  .plans { grid-template-columns: 1fr; gap: 36px; max-width: 30rem; }
  .plan.best { order: -1; }
  .who { min-height: 0; }
}

/* light or dark */
.theme { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: var(--tint); color: var(--ink-2); cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .25s var(--ease); }
.theme:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 9%, transparent); }
.theme:active { transform: scale(.94); }
.theme svg { width: 18px; height: 18px; grid-area: 1 / 1; transition: opacity .25s ease, transform .35s var(--ease); }
.theme .moon { opacity: 0; transform: rotate(-60deg) scale(.6); }
:root[data-theme="dark"] .theme .sun { opacity: 0; transform: rotate(60deg) scale(.6); }
:root[data-theme="dark"] .theme .moon { opacity: 1; transform: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme .sun { opacity: 0; transform: rotate(60deg) scale(.6); }
  :root:not([data-theme="light"]) .theme .moon { opacity: 1; transform: none; }
}
/* the dark Ask Atlas section keeps its night look in both modes; in dark mode lift it a touch */
:root[data-theme="dark"] .ask { background: #0a0a09; }
@media (max-width: 520px) { .nav-act .link { display: none; } }
:root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; }

/* The morning brief: a ruled planner page, the one place on the page that's paper on paper.
   Text sits on the rules (32px), the date is the page heading, the number gets the highlighter. */
.brief { padding: clamp(64px, 10vw, 128px) 0 clamp(24px, 4vw, 48px); }
.brief-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.brief-copy h2 { max-width: 11em; }
.brief-copy > p { margin-top: 20px; max-width: 32em; color: var(--ink-2); font-size: 1.125rem; }
.brief-points { margin-top: 28px; border-top: 2px solid var(--ink); }
.brief-points li { padding: 14px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); max-width: 34em; }
.brief-points strong { color: var(--ink); font-weight: 650; }

.sheet { --line: 32px; position: relative; padding: 28px clamp(22px, 3.4vw, 40px) 26px clamp(46px, 5.6vw, 72px); border-radius: 18px;
  background-color: var(--sheet); box-shadow: var(--shadow-app);
  background-image:
    linear-gradient(90deg, transparent calc(clamp(30px, 3.8vw, 50px) - 1px), color-mix(in srgb, var(--mark) 70%, transparent) calc(clamp(30px, 3.8vw, 50px) - 1px), color-mix(in srgb, var(--mark) 70%, transparent) calc(clamp(30px, 3.8vw, 50px) + 1px), transparent calc(clamp(30px, 3.8vw, 50px) + 1px)),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px) var(--line));
  background-position: 0 0, 0 calc(28px + var(--line) * 2);
  background-repeat: no-repeat; background-size: 100% 100%, 100% calc(100% - 28px - var(--line) * 2 - 26px); }
.sheet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; height: calc(var(--line) * 2); border-bottom: 2px solid var(--ink); }
.sheet-day { font: 700 clamp(1.5rem, 2.6vw, 2rem)/1 var(--display); font-stretch: 92%; letter-spacing: -0.03em; }
.sheet-shop { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.sheet-shop::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--mark); box-shadow: 0 0 0 3px var(--ink); }
.sheet-lead { margin-top: var(--line); font: 700 clamp(1.3125rem, 2.3vw, 1.75rem)/var(--line) var(--display); font-stretch: 92%; letter-spacing: -0.025em; text-wrap: pretty; }
.sheet-why { color: var(--ink-2); line-height: var(--line); }
.sheet-k { margin-top: var(--line); font: 650 0.9375rem/var(--line) var(--text); letter-spacing: 0; color: var(--ink); }
.sheet-list li { display: flex; align-items: center; gap: 12px; line-height: var(--line); font-size: 0.9688rem; }
.tick { flex: none; width: 15px; height: 15px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.sheet-note { margin-top: calc(var(--line) / 2); color: var(--ink-3); font-size: 0.75rem; line-height: calc(var(--line) / 2); text-align: right; }
@media (prefers-reduced-motion: no-preference) {
  .sheet .sheet-lead mark { background-size: 0 100%; transition: background-size .8s .2s var(--ease); }
  .sheet.inked .sheet-lead mark { background-size: 100% 100%; }
}
@media (max-width: 940px) { .brief-in { grid-template-columns: 1fr; } .sheet { max-width: 36rem; } }
@media (max-width: 520px) {
  .sheet { padding: 22px 18px 20px 40px; border-radius: 16px;
    background-image: linear-gradient(90deg, transparent 25px, color-mix(in srgb, var(--mark) 70%, transparent) 25px, color-mix(in srgb, var(--mark) 70%, transparent) 27px, transparent 27px),
      repeating-linear-gradient(to bottom, transparent 0 calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px) var(--line));
    background-position: 0 0, 0 calc(22px + var(--line) * 2); background-repeat: no-repeat; background-size: 100% 100%, 100% calc(100% - 22px - var(--line) * 2 - 20px); }
  .sheet-shop { display: none; }
}

/* footer links */
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-left: auto; margin-right: 24px; }
.foot-links a { color: var(--ink-2); text-decoration: none; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 520px) { .foot-links { margin: 0; width: 100%; order: 3; } }
.hero h1 { max-width: 12.5em; font-size: clamp(2.625rem, 6.4vw, 5.125rem); line-height: .98; letter-spacing: -0.04em; }
.sheet-list li { align-items: flex-start; }
.tick { margin-top: calc((var(--line) - 15px) / 2); }