@font-face { font-family: "Atkinson Hyperlegible"; src: url("/fonts/atkinson_regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/fonts/atkinson_bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/fonts/atkinson_italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/fonts/atkinson_bold_italic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }

/*
  Layout: a single long page. Nav; hero showing the three ways to send a message; features in two
  columns; the six looks with a switcher that re-colours the whole page; privacy; FAQ; footer.
  Dark-first by design: the page wears whichever look is chosen (Up front by default).
*/
/*
  Colours. Each look has the app's own night and day palette. The page follows the visitor's light or
  dark setting unless they pick one with the toggle (data-theme on <html>); the look switcher sets
  data-look. Muted text is kept well above 4.5:1 against every background it sits on.
*/
:root, :root[data-look="upfront"] { --bg: #13161C; --surf: #1C212A; --surf2: #232934; --text: #ECEFF4; --muted: #D5D9E0; --line: #2C323E; --accent: #FF8A6B; --onaccent: #3A1206; color-scheme: dark; }
:root[data-look="seat"] { --bg: #14171A; --surf: #1E2328; --surf2: #262E35; --text: #EAF0F2; --muted: #D3D9DB; --line: #2B333A; --accent: #66D9C2; --onaccent: #00352D; }
:root[data-look="spotlight"] { --bg: #160F14; --surf: #22171E; --surf2: #2C1F27; --text: #F4ECEF; --muted: #DCD3D7; --line: #33242D; --accent: #FFD27A; --onaccent: #3A2600; }
:root[data-look="eyes"] { --bg: #121418; --surf: #1B1F25; --surf2: #242931; --text: #EEF0F3; --muted: #D6D9DD; --line: #2A3038; --accent: #7FB7FF; --onaccent: #00234D; }
:root[data-look="voice"] { --bg: #121519; --surf: #1B2026; --surf2: #242A31; --text: #EDF1F4; --muted: #D5DADE; --line: #2A3038; --accent: #F2A7C8; --onaccent: #4A1030; }
:root[data-look="board"] { --bg: #1A1714; --surf: #26211C; --surf2: #302924; --text: #F2E8D8; --muted: #DCD2C2; --line: #3A3229; --accent: #D9A441; --onaccent: #2A1C00; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]), :root[data-look]:not([data-theme="dark"]) { --bg: #F4F5F7; --surf: #E9EBEF; --surf2: #DEE1E7; --text: #1C1E24; --muted: #33363D; --line: #D3D7DE; --onaccent: #FFFFFF; color-scheme: light; }
  :root:not([data-theme="dark"]), :root[data-look="upfront"]:not([data-theme="dark"]) { --accent: #A3401F; }
  :root[data-look="seat"]:not([data-theme="dark"]) { --accent: #006B5D; }
  :root[data-look="spotlight"]:not([data-theme="dark"]) { --accent: #7A5900; }
  :root[data-look="eyes"]:not([data-theme="dark"]) { --accent: #1F5FAF; }
  :root[data-look="voice"]:not([data-theme="dark"]) { --accent: #A23C70; }
  :root[data-look="board"]:not([data-theme="dark"]) { --bg: #F5EEE2; --surf: #EAE1D1; --surf2: #E0D5C2; --text: #2A231C; --muted: #3E352B; --line: #D3C6B3; --accent: #7D5A12; }
}
:root[data-theme="light"], :root[data-look][data-theme="light"] { --bg: #F4F5F7; --surf: #E9EBEF; --surf2: #DEE1E7; --text: #1C1E24; --muted: #33363D; --line: #D3D7DE; --onaccent: #FFFFFF; color-scheme: light; }
:root[data-theme="light"], :root[data-look="upfront"][data-theme="light"] { --accent: #A3401F; }
:root[data-look="seat"][data-theme="light"] { --accent: #006B5D; }
:root[data-look="spotlight"][data-theme="light"] { --accent: #7A5900; }
:root[data-look="eyes"][data-theme="light"] { --accent: #1F5FAF; }
:root[data-look="voice"][data-theme="light"] { --accent: #A23C70; }
:root[data-look="board"][data-theme="light"] { --bg: #F5EEE2; --surf: #EAE1D1; --surf2: #E0D5C2; --text: #2A231C; --muted: #3E352B; --line: #D3C6B3; --accent: #7D5A12; }
:root[data-theme="dark"], :root[data-look="upfront"][data-theme="dark"] { --bg: #13161C; --surf: #1C212A; --surf2: #232934; --text: #ECEFF4; --muted: #D5D9E0; --line: #2C323E; --accent: #FF8A6B; --onaccent: #3A1206; color-scheme: dark; }
:root[data-look="seat"][data-theme="dark"] { --bg: #14171A; --surf: #1E2328; --surf2: #262E35; --text: #EAF0F2; --muted: #D3D9DB; --line: #2B333A; --accent: #66D9C2; --onaccent: #00352D; }
:root[data-look="spotlight"][data-theme="dark"] { --bg: #160F14; --surf: #22171E; --surf2: #2C1F27; --text: #F4ECEF; --muted: #DCD3D7; --line: #33242D; --accent: #FFD27A; --onaccent: #3A2600; }
:root[data-look="eyes"][data-theme="dark"] { --bg: #121418; --surf: #1B1F25; --surf2: #242931; --text: #EEF0F3; --muted: #D6D9DD; --line: #2A3038; --accent: #7FB7FF; --onaccent: #00234D; }
:root[data-look="voice"][data-theme="dark"] { --bg: #121519; --surf: #1B2026; --surf2: #242A31; --text: #EDF1F4; --muted: #D5DADE; --line: #2A3038; --accent: #F2A7C8; --onaccent: #4A1030; }
:root[data-look="board"][data-theme="dark"] { --bg: #1A1714; --surf: #26211C; --surf2: #302924; --text: #F2E8D8; --muted: #DCD2C2; --line: #3A3229; --accent: #D9A441; --onaccent: #2A1C00; }
:root { --font: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 17px; line-height: 1.6; transition: background .4s, color .4s; }
a { color: var(--accent); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 1080px; margin: 0 auto; padding-inline: 20px; }
section { padding-block: 72px; }
h1, h2, h3 { line-height: 1.15; text-wrap: balance; margin: 0; }
h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 14px; }
.lede { color: var(--muted); max-width: 60ch; margin: 0; }

/* Nav */
header.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); }
header.top .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding-block: 12px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 19px; }
.brand svg { width: 30px; height: 30px; color: var(--accent); }
header.top nav { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
header.top nav a { color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 700; }
header.top nav a:hover { color: var(--text); }
.theme { font: inherit; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surf); color: var(--text); cursor: pointer; }
.theme:hover { border-color: var(--accent); }
.theme svg { width: 18px; height: 18px; }
header.top .brand + .theme { margin-left: auto; }
@media (max-width: 560px) { header.top nav { margin-left: 0; gap: 14px; width: 100%; } header.top nav a { font-size: 14px; } }

/* Hero */
.hero { padding-block: 56px 40px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; align-items: center; }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); } }
.hero h1 { font-size: clamp(36px, 6vw, 64px); overflow-wrap: anywhere; letter-spacing: -.01em; margin-bottom: 18px; }
.hero .lede { font-size: 19px; }
.hero .note { margin-top: 16px; font-size: 17px; color: var(--text); max-width: 52ch; }
.stage { background: var(--surf); border-radius: 28px; padding: 14px; margin: 0; }
section.faq { padding-top: 24px; }
.stage svg { width: 100%; height: auto; display: block; }
.stage figcaption { font-size: 14px; color: var(--muted); text-align: center; padding: 6px 10px 2px; }
.modes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 4px 6px 6px; }
.modes button { font: inherit; font-size: 14px; font-weight: 700; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--text); cursor: pointer; }
.modes button[aria-pressed="true"] { background: var(--accent); color: var(--onaccent); border-color: var(--accent); }

/* Features */
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin-top: 28px; }
@media (max-width: 760px) { .features { grid-template-columns: minmax(0, 1fr); } }
.feature { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); }
.feature svg { width: 30px; height: 30px; color: var(--accent); margin-top: 2px; }
.feature h3 { font-size: 18px; margin-bottom: 2px; }
.feature p { margin: 0; color: var(--muted); font-size: 16px; }

/* Looks */
.looks { background: var(--surf); }
.switcher { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 22px; }
.switcher button { font: inherit; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--text); cursor: pointer; }
.switcher button svg { width: 20px; height: 20px; }
.switcher button[aria-pressed="true"] { background: var(--accent); color: var(--onaccent); border-color: var(--accent); }
.switcher button:hover, .modes button:hover { border-color: var(--accent); }
.switcher button[aria-pressed="true"]:hover, .modes button[aria-pressed="true"]:hover { filter: brightness(1.06); }
header.top nav a:focus-visible, .brand:focus-visible { color: var(--text); }
.lookview { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: center; }
@media (max-width: 860px) { .lookview { grid-template-columns: minmax(0, 1fr); } }
.scene { background: var(--bg); border-radius: 22px; padding: 12px; }
.scene svg { width: 100%; height: auto; display: block; border-radius: 12px; }
.scene p { margin: 8px 0 2px; text-align: center; font-size: 14px; font-weight: 700; color: var(--muted); }
.lookview h3 { font-size: 28px; margin-bottom: 8px; }
.lookview .says { color: var(--accent); font-weight: 700; margin: 14px 0 0; }
.tabicons { display: flex; gap: 14px; margin-top: 18px; color: var(--muted); }
.tabicons svg { width: 26px; height: 26px; }

/* Privacy */
.privacy .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
@media (max-width: 760px) { .privacy .wrap { grid-template-columns: minmax(0, 1fr); } }
.privacy ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.privacy li { padding-left: 26px; position: relative; }
.privacy li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }

/* FAQ */
details { border-top: 1px solid var(--line); padding: 16px 0; }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; font-weight: 700; font-size: 18px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::after { content: "+"; color: var(--accent); font-size: 22px; line-height: 1; }
details[open] summary::after { content: "–"; }
details p { color: var(--muted); margin: 10px 0 0; max-width: 70ch; }

footer { border-top: 1px solid var(--line); padding-block: 32px 48px; color: var(--muted); font-size: 15px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
footer .mail { font-weight: 700; color: var(--text); }

@media (prefers-reduced-motion: reduce) { body { transition: none; } }

/* Long-form pages (the privacy policy, not found): a readable column in the same type. */
.brand img { width: 30px; height: 30px; display: block; }
main.doc { padding-block: 48px 72px; }
main.doc .wrap { max-width: 720px; }
main.doc h1 { font-size: clamp(32px, 5vw, 44px); margin-bottom: 20px; }
main.doc h2 { font-size: 24px; margin: 36px 0 10px; }
main.doc p, main.doc li { color: var(--text); }
main.doc ul { padding-left: 22px; display: grid; gap: 8px; }
main.doc em { color: var(--muted); }