/* Athanova. Night, ivory, verdigris (the patina copper turns into) and star gold. One stylesheet, no inline styles (the CSP forbids them). */
@font-face { font-family: 'Schibsted Grotesk'; src: url('/fonts/schibsted-grotesk-latin-wght-normal.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('/fonts/instrument-sans-latin-wght-normal.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
:root {
  --ink: #101216; --ink-2: #33373f; --muted: #636873; --paper: #f6f5f1; --paper-2: #eeede7; --white: #ffffff; --line: rgba(16, 18, 22, 0.1); --line-2: rgba(16, 18, 22, 0.18);
  --accent: #17695a; --accent-2: #0f5246; --accent-soft: rgba(23, 105, 90, 0.08); --gold: #9a7a2c;
  --night: #0b0d10; --night-2: #13161b; --night-3: #1a1e25; --night-ink: #eceae4; --night-muted: #9ca1ab; --night-line: rgba(236, 234, 228, 0.1);
  --glow: #6fd6bd; --star: #e3c06a;
  --head: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif; --body: 'Instrument Sans', -apple-system, 'Segoe UI', sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --maxw: 1160px; --gutter: clamp(16px, 4vw, 40px); --r: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ink: #eceae4; --ink-2: #c4c6cc; --muted: #959aa5; --paper: #0e1014; --paper-2: #13161b; --white: #171a20; --line: rgba(236, 234, 228, 0.09); --line-2: rgba(236, 234, 228, 0.18); --accent: #6fd6bd; --accent-2: #93e3cf; --accent-soft: rgba(111, 214, 189, 0.08); --gold: #e3c06a; --night: #08090c; --night-2: #111318; --night-3: #171a20; }
}
:root[data-theme="dark"] { --ink: #eceae4; --ink-2: #c4c6cc; --muted: #959aa5; --paper: #0e1014; --paper-2: #13161b; --white: #171a20; --line: rgba(236, 234, 228, 0.09); --line-2: rgba(236, 234, 228, 0.18); --accent: #6fd6bd; --accent-2: #93e3cf; --accent-soft: rgba(111, 214, 189, 0.08); --gold: #e3c06a; --night: #08090c; --night-2: #111318; --night-3: #171a20; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.65 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--accent); text-underline-offset: 3px; }
::selection { background: var(--glow); color: #08090c; }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--white); padding: 8px 12px; z-index: 100; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 12px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 16px; }
/* the four-point star from the mark, before each label */
.eyebrow::before { content: ''; flex: none; width: 9px; height: 9px; background: var(--gold); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
h1, h2, h3 { font-family: var(--head); margin: 0; letter-spacing: -0.025em; text-wrap: balance; }
p, li { text-wrap: pretty; }
h1 { font-size: clamp(40px, 6.3vw, 76px); line-height: 0.98; font-weight: 760; letter-spacing: -0.035em; }
.h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.05; font-weight: 720; margin-bottom: 20px; }
h3 { font-size: 19px; font-weight: 650; margin-bottom: 8px; letter-spacing: -0.015em; }
.accent { color: var(--accent); }
.lede { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-2); max-width: 60ch; margin: 20px 0 32px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 10px; background: var(--ink); color: var(--paper); font: 600 16px var(--body); text-decoration: none; border: 1px solid var(--ink); cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.5); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }
.btn-big { padding: 16px 26px; font-size: 17px; border-radius: 12px; }
.btn-sm { padding: 9px 15px; font-size: 14.5px; border-radius: 9px; }
/* on night surfaces the primary button is the glow */
.head .btn, .hero .btn, .cta .btn-light { background: var(--glow); border-color: var(--glow); color: #06221c; }
.head .btn:hover, .hero .btn:hover, .cta .btn-light:hover { background: #8fe3cd; border-color: #8fe3cd; box-shadow: 0 10px 30px -12px rgba(111, 214, 189, 0.55); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--white); border-color: var(--ink); }
.btn-outline-light { background: transparent; color: var(--night-ink); border-color: rgba(236, 234, 228, 0.3); }
.btn-outline-light:hover { background: rgba(236, 234, 228, 0.06); border-color: var(--night-ink); }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.actions.center { justify-content: center; }

.head { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--night) 96%, transparent); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border-bottom: 1px solid var(--night-line); }
.head-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 20px var(--head); color: var(--ink); text-decoration: none; letter-spacing: -0.025em; }
.brand img { border-radius: 8px; }
.head .brand { color: var(--night-ink); }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { color: var(--night-muted); text-decoration: none; font-size: 14.5px; font-weight: 500; transition: color 0.15s; }
.nav a:hover { color: var(--night-ink); }
.nav a.btn { color: #06221c; }
.menu-btn { display: none; background: none; border: 1px solid var(--night-line); border-radius: 9px; padding: 8px 13px; font: 600 14px var(--body); color: var(--night-ink); cursor: pointer; }
@media (max-width: 820px) {
  .menu-btn { display: inline-block; }
  .nav { display: none; position: absolute; top: 66px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--night); border-bottom: 1px solid var(--night-line); padding: 8px var(--gutter) 18px; }
  .nav.open { display: flex; }
  .nav a { padding: 12px 0; border-top: 1px solid var(--night-line); }
  .nav a.btn { margin-top: 12px; border-top: 0; }
}

/* the hero: night, a faint star field, the nova rising behind the ask */
.hero { position: relative; overflow: hidden; color: var(--night-ink); padding: clamp(64px, 10vw, 132px) 0 clamp(56px, 8vw, 96px);
  background:
    radial-gradient(ellipse 55% 50% at 78% 8%, rgba(111, 214, 189, 0.16), transparent 70%),
    radial-gradient(ellipse 35% 30% at 82% 4%, rgba(227, 192, 106, 0.12), transparent 70%),
    var(--night); }
.hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(236, 234, 228, 0.7), transparent 60%),
    radial-gradient(1px 1px at 28% 68%, rgba(236, 234, 228, 0.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 64% 18%, rgba(227, 192, 106, 0.8), transparent 60%),
    radial-gradient(1px 1px at 86% 44%, rgba(236, 234, 228, 0.55), transparent 60%),
    radial-gradient(1px 1px at 72% 82%, rgba(236, 234, 228, 0.4), transparent 60%),
    radial-gradient(1px 1px at 44% 36%, rgba(236, 234, 228, 0.35), transparent 60%),
    radial-gradient(1px 1px at 92% 12%, rgba(236, 234, 228, 0.6), transparent 60%),
    radial-gradient(1px 1px at 6% 86%, rgba(236, 234, 228, 0.4), transparent 60%); }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(111, 214, 189, 0.35), rgba(227, 192, 106, 0.35), transparent); }
.hero-mark { position: absolute; right: max(-60px, calc((100vw - var(--maxw)) / 2 - 80px)); top: 40px; width: min(44vw, 540px); height: auto; opacity: 0.05; pointer-events: none; }
.hero-inner { position: relative; max-width: 960px; }
.hero .eyebrow { color: var(--glow); }
.hero .eyebrow::before { background: var(--star); }
.hero .accent { display: inline-block; color: transparent; background: linear-gradient(100deg, var(--glow) 10%, var(--star) 90%); -webkit-background-clip: text; background-clip: text; }
.hero .lede { color: var(--night-muted); }
.ask { background: linear-gradient(180deg, rgba(23, 26, 32, 0.92), rgba(17, 19, 24, 0.92)); border: 1px solid var(--night-line); border-radius: 18px; padding: clamp(16px, 2.6vw, 24px); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(236, 234, 228, 0.05); scroll-margin-top: 90px; }
.ask-label { display: block; font: 600 15px var(--body); color: var(--night-ink); margin-bottom: 10px; }
.ask-row { display: grid; gap: 12px; }
@media (min-width: 720px) { .ask-row { grid-template-columns: 1fr auto; align-items: stretch; } }
.ask textarea, .ask input { width: 100%; min-width: 0; background: #090a0d; color: var(--night-ink); border: 1px solid rgba(236, 234, 228, 0.13); border-radius: 11px; padding: 14px 15px; font: 16px/1.5 var(--body); resize: vertical; transition: border-color 0.15s, box-shadow 0.15s; }
.ask textarea { min-height: 58px; }
.ask textarea:focus, .ask input:focus { outline: none; border-color: var(--glow); box-shadow: 0 0 0 3px rgba(111, 214, 189, 0.16); }
.ask textarea::placeholder { color: #666b75; }
.ask-more { margin-top: 16px; }
.ask-grid { display: grid; gap: 12px; }
@media (min-width: 640px) { .ask-grid { grid-template-columns: 1fr 1fr; } }
.ask-grid label { display: grid; gap: 6px; font-size: 13.5px; color: var(--night-muted); }
.ask-send { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.ask-send .muted { color: var(--night-muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ask-err { color: #ff9a8a; margin: 10px 0 0; font-size: 15px; }
.ask-err:empty { display: none; }
.ask-done h2 { font: 700 24px var(--head); margin: 4px 0 6px; }
.ask-done p { color: var(--night-muted); margin: 0 0 16px; }
.ask-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 0; font-size: 13.5px; color: var(--night-muted); }
.ask-chips button { background: rgba(236, 234, 228, 0.04); color: var(--night-ink); border: 1px solid rgba(236, 234, 228, 0.12); border-radius: 99px; padding: 6px 13px; font: 500 13.5px var(--body); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.ask-chips button:hover { border-color: var(--glow); background: rgba(111, 214, 189, 0.07); }
.ask.sent .ask-row, .ask.sent .ask-label, .ask.sent .ask-chips, .ask.sent .ask-more { display: none !important; }
.hero-alt { margin: 18px 0 0; color: var(--night-muted); font-size: 15px; }
.hero-alt a { color: var(--glow); }

/* the promises, as a quiet night band with star marks */
.vows-strip { background: var(--night-2); color: var(--night-ink); border-bottom: 1px solid var(--night-line); }
.vows-strip-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; padding-top: 18px; padding-bottom: 18px; font: 500 14.5px var(--body); }
.vows-strip-inner span { display: inline-flex; align-items: center; }
.vows-strip-inner span::before { content: ''; width: 9px; height: 9px; margin-right: 10px; background: var(--star); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }

.section { padding: clamp(72px, 10vw, 124px) 0; }
.section.alt { background: var(--paper-2); }
.grid4 { display: grid; gap: 14px; }
@media (min-width: 640px) { .grid4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .grid4 { grid-template-columns: repeat(4, 1fr); } }
.cell, .el, .tier, .formula li { transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.cell:hover, .el:hover, .formula li:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.35); }
.cell { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; }
.cell h3 { display: flex; align-items: center; gap: 10px; }
.cell h3::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); }
.cell ul { margin: 6px 0 0; padding: 0; list-style: none; }
.cell li { padding: 8px 0; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 15.5px; }

.letter p { font-size: clamp(17px, 1.5vw, 19px); color: var(--ink-2); margin: 0 0 18px; }
.letter strong { color: var(--ink); }
.letter .sign { font: 700 22px var(--head); color: var(--ink); margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-direction: column; }
.sign span { font: 500 12px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 4px; }

.formula { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .formula { grid-template-columns: 1fr 1fr; } .formula li:last-child { grid-column: 1 / -1; } }
.formula li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; align-items: start; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.op { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font: 600 14px var(--head); letter-spacing: 0.04em; }
.formula h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.formula small { font: 500 11.5px var(--mono); color: var(--gold); letter-spacing: 0.08em; font-style: italic; }
.formula p { margin: 0; color: var(--ink-2); }
.after { margin: 24px 0 0; color: var(--ink-2); max-width: 70ch; }

.elements { display: grid; gap: 14px; }
@media (min-width: 640px) { .elements { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .elements { grid-template-columns: repeat(4, 1fr); } }
.el { border: 1px solid var(--line); border-radius: var(--r); padding: 26px; background: var(--white); }
.glyph { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; margin-bottom: 16px; display: block; }
.el-earth .glyph { color: #8a6d3b; }
.el-water .glyph { color: #3f7fa6; }
.el-air .glyph { color: #7a86b8; }
.el-fire .glyph { color: #c0533a; }
.el-sub { font: 500 11.5px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: -4px 0 12px; }
.el p:last-child { margin: 0; color: var(--ink-2); }
.fifth { margin: 28px 0 0; max-width: 72ch; color: var(--ink-2); font-size: 18px; padding: 20px 24px; border-left: 2px solid var(--gold); background: var(--white); border-radius: 0 var(--r) var(--r) 0; }
.fifth b { color: var(--gold); }

.tiers { display: grid; gap: 14px; }
@media (min-width: 640px) { .tiers { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .tiers { grid-template-columns: repeat(4, 1fr); } }
.tier { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; }
.tier p { margin: 0 0 6px; color: var(--ink-2); }
.tier .price { font: 760 32px var(--head); color: var(--ink); letter-spacing: -0.03em; margin: 4px 0 2px; }
.tier .muted { margin-bottom: 16px; color: var(--muted); font: 500 12px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.tier.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 24px 50px -34px rgba(23, 105, 90, 0.6); }
.tier.crown { background: var(--night); color: var(--night-ink); border-color: var(--night); background-image: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(227, 192, 106, 0.16), transparent 70%); }
.tier.crown .price { color: var(--star); }
.tier.crown p, .tier.crown .muted { color: var(--night-muted); }
.terms { display: grid; gap: 28px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .terms { grid-template-columns: repeat(3, 1fr); } }
.terms h3 { font-size: 17px; }
.terms p { margin: 0; color: var(--ink-2); font-size: 15.5px; }

.two { display: grid; gap: 28px; }
@media (min-width: 900px) { .two { grid-template-columns: 1fr 1.2fr; gap: 72px; } }
.proofnote p { font-size: 18px; color: var(--ink-2); margin: 0 0 16px; }
.proofnote .strong { font: 700 23px var(--head); color: var(--ink); letter-spacing: -0.02em; margin-top: 8px; }

.vows { margin: 0; padding: 0; list-style: none; counter-reset: v; max-width: 820px; }
.vows li { counter-increment: v; padding: 18px 0 18px 60px; border-top: 1px solid var(--line); position: relative; color: var(--ink-2); font-size: 17.5px; }
.vows li:last-child { border-bottom: 1px solid var(--line); }
.vows li::before { content: counter(v, upper-roman); position: absolute; left: 0; top: 19px; font: 500 13px var(--mono); color: var(--gold); width: 44px; letter-spacing: 0.06em; }
.vows b { color: var(--ink); }

details { border-top: 1px solid var(--line); padding: 18px 0; }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; font: 600 18px var(--head); letter-spacing: -0.015em; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
summary::after { content: '+'; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--accent); font: 400 18px/1 var(--body); transition: transform 0.2s; }
details[open] summary::after { transform: rotate(45deg); }
summary::-webkit-details-marker { display: none; }
details p { color: var(--ink-2); margin: 12px 0 0; max-width: 64ch; }

.cta { position: relative; overflow: hidden; background: radial-gradient(ellipse 60% 70% at 50% 115%, rgba(111, 214, 189, 0.18), transparent 70%), radial-gradient(ellipse 30% 40% at 50% 110%, rgba(227, 192, 106, 0.16), transparent 70%), var(--night); color: var(--night-ink); padding: clamp(72px, 10vw, 124px) 0; text-align: center; }
.cta-inner { max-width: 760px; }
.cta .h2 { color: var(--night-ink); margin-bottom: 12px; }
.cta p { color: var(--night-muted); font-size: 18px; margin: 0 0 30px; }

.foot { padding: 40px 0 48px; border-top: 1px solid var(--line); }
.foot-inner { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; align-items: flex-start; }
.foot-brand p, .foot p { margin: 10px 0 0; font-size: 14px; }
.house { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); text-decoration: none; }
.house:hover { color: var(--ink); }
.foot nav { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 14.5px; }
.foot nav a { color: var(--ink-2); text-decoration: none; }
.foot nav a:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

/* legal and 404 pages */
.legal h2 { font-size: 22px; margin: 34px 0 10px; }
.legal p, .legal li { color: var(--ink-2); }