/* seizesleep.com. Adapted from Seize Mind: web/public/style.css. The night
   palette from SeizeSleep/Views/Theme.swift: nothing white, nothing bright.
   The site is always dark, so there is no light palette and
   prefers-color-scheme is ignored on purpose. */
:root {
  --bg: #08090c;                 /* Night.background */
  --card: #111217;               /* Night.surface */
  --card-raised: #1a1b21;        /* Night.surfaceRaised */
  --ink: #b8b2a7;                /* Night.text */
  --muted: #807c75;              /* Night.textSecondary */
  --faint: #5a5753;              /* Night.textTertiary */
  --accent: #c79e6b;             /* Night.accent, a lamp, not a notification */
  --accent-dim: rgba(199, 158, 107, 0.18);
  --line: rgba(255, 255, 255, 0.07);           /* Night.hairline */
  --line-strong: rgba(184, 178, 167, 0.24);
  --link: var(--accent);
  --link-line: rgba(199, 158, 107, 0.45);
  --shadow-strong: rgba(0, 0, 0, 0.7);
  --max: 1180px;                 /* the studio plate width, tottestudios.com uses the same */
  --gutter: clamp(20px, 5vw, 56px);
  --prose: 70ch;                 /* long text keeps a reading measure inside the wide plate */
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  display: flex; flex-direction: column;      /* the footer sits at the bottom of short pages */
  background: var(--bg);
  color: var(--ink);
  /* Larger than the day sites: this is read at arm's length, often at night. */
  font: clamp(17px, 0.98rem + 0.3vw, 20px)/1.65 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
strong { color: var(--ink); font-weight: 650; }
em { font-style: italic; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* Header: brand on the left, the shared Totté Studios menu on the right. The
   menu is a native <details> disclosure, so it opens without script. /menu.js
   adds Escape, outside press and tabbing away (see _headers). The menu's
   Appearance section is left out, because this site has one palette. */
header.site { padding: clamp(14px, 2vw, 24px) 0; }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 8px; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; font-weight: 650; font-size: 17px; letter-spacing: -0.01em; }
.brand-sub { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0.01em; }

/* studio-menu:css:start v2. Generated from Totté Studios Project/brand/studio-menu, do not edit by hand. */
.menu{position:relative;font-family:inherit;line-height:1.4;text-align:start}
.menu summary{display:inline-flex;align-items:center;gap:7px;list-style:none;cursor:pointer;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--menu-ink,var(--ink));background:var(--menu-surface,var(--surface));border:1px solid var(--menu-line,var(--line));padding:7px 14px;border-radius:999px;-webkit-tap-highlight-color:transparent;transition:border-color .15s ease,background .15s ease;user-select:none;-webkit-user-select:none}
.menu summary::-webkit-details-marker{display:none}
.menu summary::marker{content:""}
.menu summary:hover,.menu[open] summary{border-color:var(--menu-line-strong,var(--line-strong))}
.menu summary:focus-visible{outline:2px solid var(--menu-ink,var(--ink));outline-offset:2px}
.menu summary .chev{transition:transform .2s ease}
.menu[open] summary .chev{transform:rotate(180deg)}
.menu .menu-panel{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:60;width:min(288px,calc(100vw - 32px));max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px);overflow-y:auto;overscroll-behavior:contain;background:var(--menu-panel,var(--bg-top));color:var(--menu-ink,var(--ink));border:1px solid var(--menu-line,var(--line));border-radius:16px;padding:12px;box-shadow:0 24px 60px -24px var(--menu-shadow,rgba(10,12,16,.35));text-align:start}
.menu[open] .menu-panel{animation:menuIn .16s ease}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.menu .menu-head{margin:2px 4px 8px;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--menu-muted,var(--muted))}
.menu .menu-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 11px;border-radius:11px;color:var(--menu-ink,var(--ink));text-decoration:none;transition:background .12s ease}
.menu .menu-item:hover{background:var(--menu-surface,var(--surface));text-decoration:none}
.menu .menu-item:focus-visible{outline:2px solid var(--menu-ink,var(--ink));outline-offset:-2px}
.menu .mi-text{min-width:0}
.menu .mi-name{display:block;font-weight:600;font-size:14.5px;letter-spacing:-.01em;color:var(--menu-ink,var(--ink))}
.menu .mi-sub{display:block;font-size:11.5px;color:var(--menu-muted,var(--muted));margin-top:1px}
.menu .mi-arrow{flex:none;color:var(--menu-muted,var(--muted));transition:transform .15s ease,color .15s ease}
.menu .menu-item:hover .mi-arrow{transform:translateX(3px);color:var(--menu-ink,var(--ink))}
.menu .mi-here{flex:none;width:7px;height:7px;margin-inline-end:4px;border-radius:50%;background:var(--menu-ink,var(--ink))}
[dir=rtl] .menu .mi-arrow{transform:scaleX(-1)}
[dir=rtl] .menu .menu-item:hover .mi-arrow{transform:scaleX(-1) translateX(3px)}
.menu .menu-site+.menu-studio,.menu .menu-appearance,.menu .menu-lang{margin-top:8px;padding-top:10px;border-top:1px solid var(--menu-line,var(--line))}
.menu .seg{display:flex;gap:4px;margin:8px 4px 2px;padding:4px;background:var(--menu-surface,var(--surface));border:1px solid var(--menu-line,var(--line));border-radius:12px}
.menu .seg button{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;font:inherit;font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--menu-muted,var(--muted));background:transparent;border:0;border-radius:9px;padding:7px 6px;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s ease,color .15s ease;box-shadow:none}
.menu .seg button:hover{color:var(--menu-ink,var(--ink))}
.menu .seg button:focus-visible{outline:2px solid var(--menu-ink,var(--ink));outline-offset:1px}
.menu .seg button.is-active{background:var(--menu-seg-active,var(--menu-panel,var(--bg-top)));color:var(--menu-ink,var(--ink));box-shadow:0 1px 2px rgba(10,12,16,.14)}
.menu .lang-select{position:relative;display:flex;align-items:center;margin:8px 4px 2px;color:var(--menu-muted,var(--muted))}
.menu .lang-select .globe{position:absolute;inset-inline-start:.65rem;width:15px;height:15px;pointer-events:none}
.menu .lang-select .lchev{position:absolute;inset-inline-end:.65rem;width:13px;height:13px;pointer-events:none}
.menu .lang-select select{appearance:none;-webkit-appearance:none;width:100%;margin:0;cursor:pointer;font:inherit;font-size:13px;font-weight:600;color:var(--menu-ink,var(--ink));background:var(--menu-surface,var(--surface));border:1px solid var(--menu-line,var(--line));border-radius:11px;padding-block:.5rem;padding-inline:2.1rem 1.9rem;transition:border-color .15s ease}
.menu .lang-select select:hover{border-color:var(--menu-line-strong,var(--line-strong))}
.menu .lang-select select:focus-visible{outline:2px solid var(--menu-ink,var(--ink));outline-offset:2px}
.menu .lang-select select option{background:var(--menu-panel,var(--bg-top));color:var(--menu-ink,var(--ink))}
@media (prefers-reduced-motion:reduce){.menu summary,.menu summary .chev,.menu .mi-arrow,.menu .seg button{transition:none}.menu[open] .menu-panel{animation:none}}
/* studio-menu:css:end */
/* studio-menu:site:start. Seize Sleep colours for the shared menu, written by web/tools/apply-studio-menu.mjs.
   The pill and the hover rows are the raised surface, the panel the plain one. */
.menu { --menu-panel: var(--card); --menu-surface: var(--card-raised); --menu-shadow: var(--shadow-strong); }
/* studio-menu:site:end */

main { flex: 1 0 auto; padding: 8px 0 clamp(40px, 6vw, 80px); }
h1 { font-size: clamp(32px, 4.8vw, 56px); line-height: 1.1; letter-spacing: -0.02em; margin: 24px 0 8px; text-wrap: balance; color: var(--ink); }
h2 { font-size: clamp(21px, 1.7vw, 26px); line-height: 1.3; letter-spacing: -0.01em; margin: 40px 0 8px; padding-top: 16px; border-top: 1px solid var(--line); scroll-margin-top: 24px; color: var(--ink); }
p, ul { margin: 0 0 14px; }
ul { padding-left: 22px; }
li { margin-bottom: 8px; }
li::marker { color: var(--accent); }
.meta { color: var(--muted); font-size: 16px; margin-bottom: 24px; }
.lead { font-size: 20px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; margin: 16px 0; }
.card dl { margin: 0; }
.card dt { font-size: 13px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); margin-top: 14px; }
.card dt:first-child { margin-top: 0; }
.card dd { margin: 4px 0 0; }

.short li::marker { color: var(--accent); }

/* Landing page. One column with the icon on top on a phone, copy beside a
   large icon on a desktop. */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center;
  gap: clamp(20px, 4vw, 56px); text-align: center;
  padding: clamp(24px, 5vw, 72px) 0 clamp(8px, 2vw, 24px);
}
.hero-icon {
  order: -1; justify-self: center;
  width: clamp(120px, 22vw, 300px); height: auto; aspect-ratio: 1;
  border-radius: 22.37%;
  /* A soft amber spill, like a lamp on a bedside table, not a white glow. */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 80px var(--accent-dim);
}
.hero h1 { font-size: clamp(42px, 6.8vw, 92px); margin: 4px 0 8px; }
.latin { color: var(--muted); font-style: italic; margin: 0; font-size: clamp(17px, 1.3vw, 21px); letter-spacing: 0.01em; }
.tagline { font-size: clamp(21px, 2vw, 30px); font-weight: 600; letter-spacing: -0.01em; margin-bottom: 12px; text-wrap: balance; color: var(--accent); }
.hero-text { font-size: clamp(18px, 1.3vw, 22px); max-width: 52ch; margin-inline: auto; }
.status { display: inline-block; margin: 12px 0 0; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); font-weight: 600; font-size: 16px; }
@media (min-width: 880px) {
  .hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); text-align: left; }
  .hero-icon { order: 0; justify-self: end; }
  .hero-text { margin-inline: 0; }
}

/* What the app does, in plain words. Two columns when there is room. */
.features { margin-top: clamp(28px, 4vw, 56px); }
.features h2 { margin-top: 0; }
.features ul {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 10px clamp(20px, 3vw, 40px); padding-left: 0; list-style: none; margin: 16px 0 0;
}
.features li { position: relative; padding-left: 26px; margin: 0; }
.features li::before { content: ""; position: absolute; left: 4px; top: 0.72em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

.panels {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(16px, 2.5vw, 28px); margin-top: clamp(28px, 4vw, 56px);
}
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: clamp(18px, 2.5vw, 30px); min-width: 0; }
.panel h2 { margin: 0 0 10px; padding: 0; border: 0; font-size: clamp(19px, 1.5vw, 22px); }
.panel p:last-child, .panel ul:last-child { margin: 0; }
.panel ul { padding-left: 20px; }
.note { color: var(--muted); font-size: 16px; }
.panel .note strong { color: var(--ink); }

/* Long documents: the privacy policy. A reading column, and on a wide screen
   a contents list that stays put while you scroll. */
.doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
.prose { max-width: var(--prose); min-width: 0; }
.toc { display: none; }
@media (min-width: 1000px) {
  .doc { grid-template-columns: 240px minmax(0, 1fr); }
  .toc { display: block; position: sticky; top: 24px; }
}
.toc-head { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 30px 0 10px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc li { margin: 0; }
.toc a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; font-size: 15px; line-height: 1.35; }
.toc a:hover, .toc a:focus-visible { color: var(--ink); border-left-color: var(--accent); outline: none; }

footer.site { border-top: 1px solid var(--line); padding: 20px 0 clamp(32px, 4vw, 48px); color: var(--muted); font-size: 15px; }
footer.site .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; }
footer.site nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
footer.site a { color: var(--muted); text-decoration-color: var(--line-strong); }
footer.site a:hover { color: var(--ink); }
footer.site .legal { margin: 0; max-width: 60ch; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}