/* Amia, Overnight. Every page has its own hour of the day: the sky, the clock, the moon and
   the sun follow it, and every colour on the page is computed from that hour (sky.js). The
   look is the time of day, not the viewer's theme, so colours are set explicitly here.
   Layout: one centred column for statements, a 1180px grid for detail. */
:root {
  --top: #1a2047;
  --mid: #232a5a;
  --hor: #2f3266;
  --ink: #eef0f8;
  --mute: rgba(238, 240, 248, .76);
  --line: rgba(238, 240, 248, .2);
  --card: rgba(18, 22, 48, .42);
  --card-line: rgba(238, 240, 248, .16);
  --btn: #eef0f8;
  --btn-ink: #10132a;
  --work: #2f8cff;
  --needs: #ff9f0a;
  --done: #2fbf5b;
  --paper: rgba(255, 255, 255, .78);
  --paper-ink: #151a2e;
  --paper-mute: #4a5068;
  --display: "Darker Grotesque", "Avenir Next Condensed", "Helvetica Neue", sans-serif;
  --text: "SUSE", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --wrap: 1180px;
  --gut: clamp(16px, 4vw, 52px);
  color-scheme: dark;
}
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--top); color: var(--ink); font: 350 17px/1.55 var(--text); -webkit-font-smoothing: antialiased; overflow-x: clip; }
*, *::before, *::after { box-sizing: border-box; }
a { color: inherit; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ill { font-size: 12.5px; opacity: .8; }

/* ---------- The sky ---------- */
.sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sky-grad { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--top) 0%, var(--mid) 58%, var(--hor) 100%); }
.sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The sun and moon: in the open sky behind the page on wide screens; on a phone they ride the
   header bar above its glass, so they stay sharp and never sit behind text. */
.orbs { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.moon, .sun { position: absolute; left: 0; top: 0; border-radius: 50%; opacity: 0; will-change: transform, opacity; transform-origin: 50% 50%; }
.moon { width: 54px; height: 54px; background: radial-gradient(circle at 38% 36%, #fbfaf4, #dfe2ea 62%, #c9cdd8); box-shadow: 0 0 40px 10px rgba(220, 226, 255, .18); }
.sun { width: 96px; height: 96px; background: radial-gradient(circle, #fff6dc 0%, #ffd889 46%, rgba(255, 196, 120, 0) 72%); }
.clock { position: absolute; right: var(--gut); top: calc(100% + 10px); margin: 0; display: flex; align-items: center; gap: 8px; font: 400 15px/1 var(--text); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--mute); pointer-events: none; }
.clock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .8; }
main, .site-head, .site-foot { position: relative; z-index: 1; }

/* ---------- Header ---------- */
.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--card); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); transition: background .3s, box-shadow .3s; }
.site-head.is-stuck { background: var(--card); box-shadow: 0 1px 0 var(--card-line); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); }
.head-in { max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 16px var(--gut); display: flex; align-items: center; gap: 24px; }
.mark { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; font: 500 28px/1 var(--display); letter-spacing: .01em; }
.mark-slot:empty { display: none; }
/* The Dawn wordmark: the smiling face is the dot on the i (a dotless ı under it). */
.word { display: inline-block; }
.word-i { position: relative; display: inline-block; }
.word-dot { position: absolute; left: 50%; top: .1em; width: .3em; height: .3em; transform: translateX(-50%); }
.word-dot svg { display: block; width: 100%; height: 100%; }
.mark-slot svg, .mark-slot img { width: 26px; height: 26px; display: block; }
.nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); }
.nav a { color: var(--mute); text-decoration: none; font-size: 15px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 26px; border-radius: 999px; background: var(--btn); color: var(--btn-ink); border: 1px solid var(--btn); font: 500 15.5px/1 var(--text); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .2s; }
.btn:hover { transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 14px; }
.btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.menu-btn svg { width: 20px; height: 20px; }
.menu { display: none; }
.nav-dd { position: relative; }
.nav-dd-btn { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: var(--mute); font: 350 15px/1.55 var(--text); cursor: pointer; }
.nav-dd-btn svg { width: 12px; height: 12px; transition: transform .2s; }
.nav-dd-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-dd-btn:hover, .nav-dd-btn.is-current, .nav-dd-btn[aria-expanded="true"] { color: var(--ink); }
.nav-dd-panel { position: absolute; top: calc(100% + 20px); left: -16px; min-width: 230px; display: grid; gap: 2px; padding: 8px; border-radius: 20px; background: var(--card); border: 1px solid var(--card-line); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); box-shadow: 0 24px 60px rgba(10, 12, 30, .22); }
.nav-dd-panel[hidden] { display: none; }
.nav-dd-panel a { padding: 11px 12px; border-radius: 12px; color: var(--ink); }
.nav-dd-panel a:hover, .nav-dd-panel a[aria-current="page"] { background: var(--line); }

/* ---------- Shared type ---------- */
.page { display: block; }
.page[hidden] { display: none !important; }
.wrap { max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding-inline: var(--gut); }
.center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.h-xl { margin: 0; font: 400 clamp(76px, 13.5vw, 210px)/.82 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.h-lg { margin: 0; font: 400 clamp(48px, 7vw, 104px)/.88 var(--display); letter-spacing: -.015em; text-wrap: balance; }
.h-md { margin: 0; font: 450 clamp(30px, 3.6vw, 48px)/.95 var(--display); letter-spacing: -.005em; text-wrap: balance; }
.h-sm { margin: 0; font: 500 clamp(22px, 2.2vw, 28px)/1.05 var(--display); }
.lede { margin: 22px 0 0; max-width: 44ch; color: var(--mute); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; text-wrap: balance; }
.fine { margin: 16px 0 0; color: var(--mute); font-size: 14px; }
.ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.sec { padding-top: clamp(120px, 15vw, 220px); }
.sec-tight { padding-top: clamp(70px, 9vw, 120px); }
.hero { padding-top: clamp(40px, 7vw, 100px); padding-bottom: 40px; }
.face { display: block; height: auto; }
.glass { background: var(--card); border: 1px solid var(--card-line); border-radius: 26px; -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); }
.h-lg + .grid3 { margin-top: 48px; }
.grid3 h3 { margin: 0 0 8px; font: 500 clamp(24px, 2.3vw, 30px)/1.05 var(--display); }
.grid3 p { margin: 0; color: var(--mute); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 16px; padding: 22px 0; border-top: 1px solid var(--line); }
.steps li::before { content: counter(s); grid-row: span 2; font: 400 44px/.9 var(--display); color: var(--mute); font-variant-numeric: tabular-nums; }
.steps b { font: 500 26px/1.05 var(--display); }
.steps span { color: var(--mute); }

/* ---------- Segmented control ---------- */
.seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; border: 1px solid var(--line); }
.seg button { white-space: nowrap; border: 0; background: none; color: var(--mute); font: 450 14.5px/1 var(--text); padding: 11px 18px; min-height: 42px; border-radius: 999px; cursor: pointer; }
.seg button[aria-checked="true"] { background: var(--ink); color: var(--btn-ink); }

/* ---------- Plans ---------- */
.cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 44px; border-top: 1px solid var(--line); }
/* Every plan shares the grid's rows, so the price, each line and the button sit level across plans. */
.col { display: grid; grid-row: span var(--rows); grid-template-rows: subgrid; padding: 26px 20px 24px; border-left: 1px solid var(--line); min-width: 0; }
.col:first-child { border-left: 0; padding-left: 0; }
.col h3 { margin: 0; font: 500 34px/1 var(--display); }
.col .purpose { margin: 6px 0 0; color: var(--mute); font-size: 13.5px; line-height: 1.4; }
.col .price { margin: 14px 0 0; font: 400 clamp(50px, 5.2vw, 76px)/.8 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.col .per { margin: 6px 0 0; color: var(--mute); font-size: 13px; }
.col .row { margin: 14px 0 0; font-size: 13.5px; }
.col .row dt { color: var(--mute); font-size: 12.5px; }
.col .row dd { margin: 2px 0 0; }
.col .row small { display: block; color: var(--mute); font-size: 12.5px; }
.col .btn { justify-self: start; align-self: end; margin-top: 22px; }
.note { margin: 16px auto 0; max-width: 80ch; text-align: center; color: var(--mute); font-size: 14px; }
.packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pack { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 14px 16px; min-height: 74px; border-radius: 20px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.pack b { font: 500 30px/1 var(--display); font-variant-numeric: tabular-nums; }
.pack span { color: var(--mute); font-size: 12.5px; min-height: 1.2em; }
.pack:hover, .pack[aria-pressed="true"] { border-color: var(--ink); }
.custom { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 16px; padding: 16px 18px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.field { display: inline-flex; align-items: center; gap: 4px; padding: 0 14px; min-height: 46px; border-radius: 12px; border: 1px solid var(--line); font-size: 20px; }
.field input { width: 6ch; border: 0; background: transparent; color: var(--ink); font: 500 26px/1 var(--display); outline: none; font-variant-numeric: tabular-nums; }
.field:focus-within { border-color: var(--ink); }
.custom output { flex: 1 1 220px; min-width: 0; color: var(--mute); font-size: 14px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.split > div:first-child { display: flex; flex-direction: column; gap: 16px; }
.every { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 24px; color: var(--mute); }
.every li { padding-left: 18px; position: relative; }
.every li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); opacity: .7; }

/* ---------- Questions ---------- */
.qa { border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font: 500 clamp(22px, 2.1vw, 27px)/1.15 var(--display); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-3px, -3px); transition: transform .25s; opacity: .7; }
.qa details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.qa p { margin: 0 0 20px; max-width: 70ch; color: var(--mute); }
.qa-group { margin-top: 56px; }
.qa-group > h2 { margin: 0 0 8px; font: 450 clamp(26px, 2.6vw, 34px)/1 var(--display); }

/* ---------- Paper: long reading stays legible under any sky ---------- */
.paper { max-width: 820px; margin: 0 auto; padding: clamp(28px, 5vw, 64px); border-radius: 30px; background: var(--paper); color: var(--paper-ink); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); box-shadow: 0 30px 80px rgba(16, 20, 50, .12); }
.paper h1 { margin: 0; font: 450 clamp(48px, 6vw, 80px)/.9 var(--display); }
.paper h2 { margin: 36px 0 10px; font: 500 28px/1.05 var(--display); }
.paper p, .paper li { color: var(--paper-mute); }
.paper p { margin: 12px 0; }
.paper ul { padding-left: 1.2em; }
.paper .meta { color: var(--paper-mute); font-size: 14px; margin-top: 10px; }
.paper .draft { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: #fff3dc; color: #6b4500; font-size: 14px; }
.paper a { color: var(--paper-ink); }

/* ---------- Footer ---------- */
.site-foot { margin-top: clamp(120px, 14vw, 200px); padding-bottom: 40px; }
.foot-in { max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 34px var(--gut) 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 24px; }
.foot-in h2 { margin: 0 0 10px; font: 600 13px/1 var(--text); color: var(--mute); }
.foot-in ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-in a { text-decoration: none; color: var(--ink); }
.foot-in a:hover { text-decoration: underline; }
.foot-in .mark { font-size: 32px; }
.foot-in p { margin: 10px 0 0; color: var(--mute); font-size: 14px; max-width: 34ch; }
.foot-legal { max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 30px auto 0; padding: 0 var(--gut); color: var(--mute); font-size: 12.5px; display: grid; gap: 6px; }
.foot-legal code { font-size: 12px; }

@media (max-width: 1100px) {
  .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .col:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
  .col:nth-child(n + 4) { border-top: 1px solid var(--line); }
}
@media (max-width: 980px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .every { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .head-in { gap: 12px; }
  .nav { display: none; }
  .menu-btn { display: inline-grid; place-items: center; }
  /* Four or fewer items stay on the bar (no menu button); more open from the menu button. */
  .site-head[data-phone="bar"] .nav { display: flex; gap: 18px; }
  .site-head[data-phone="bar"] .menu-btn, .site-head[data-phone="bar"] .clock { display: none; }
  .menu-group { margin: 10px 12px 2px; color: var(--mute); font: 600 12.5px/1 var(--text); }
  .menu:not([hidden]) { display: grid; gap: 4px; position: fixed; z-index: 40; left: 12px; right: 12px; top: calc(76px + env(safe-area-inset-top, 0px)); padding: 12px; border-radius: 24px; background: var(--card); border: 1px solid var(--card-line); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); }
  .menu a { padding: 14px 12px; border-radius: 14px; text-decoration: none; font: 500 26px/1 var(--display); }
  .menu a[aria-current="page"] { background: var(--line); }
  .grid3 { grid-template-columns: minmax(0, 1fr); }
  .cols { grid-template-columns: minmax(0, 1fr); }
  .col, .col:nth-child(3n + 1) { border-left: 0; padding-inline: 0; }
  .col + .col { border-top: 1px solid var(--line); }
  .col .row:empty { display: none; }
  .packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .every { grid-template-columns: minmax(0, 1fr); }
  /* In the bar itself, so no text ever scrolls under it. */
  .clock { position: static; }
  .orbs { z-index: 31; }
  .moon { box-shadow: 0 0 22px 5px rgba(220, 226, 255, .24); }
}
@media (max-width: 359px) {
  .clock { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}