/* sonua.io: house frame (Newsreader, paper) + app pages in the app's own identity.
   Design direction "C · Plates", see docs/WEBSITE.md. Fonts are self-hosted (OFL, site/fonts-license/). */

@font-face { font-family: "Newsreader"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/fonts/newsreader-latin-standard-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/fonts/newsreader-latin-ext-standard-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: italic; font-display: swap; font-weight: 200 800; src: url(/fonts/newsreader-latin-standard-italic.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: italic; font-display: swap; font-weight: 200 800; src: url(/fonts/newsreader-latin-ext-standard-italic.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 400; font-display: swap; src: url(/fonts/atkinson-hyperlegible-next-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 400; font-display: swap; src: url(/fonts/atkinson-hyperlegible-next-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 700; font-display: swap; src: url(/fonts/atkinson-hyperlegible-next-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 700; font-display: swap; src: url(/fonts/atkinson-hyperlegible-next-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap; src: url(/fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2"); }

:root {
  --paper: #F6F4EF;
  --ink: #171614;
  --ink-2: #4E493D;
  --ink-3: #8A8476;
  --rule: #DAD5CA;
  --violet: #B1A7DB;      /* brand accent, the band of the mark; on ink 8:1, on paper only for areas */
  --violet-fold: #8F83C2; /* the folds of the mark */
  --violet-deep: #57517D; /* same hue, dark enough for lines and text on paper (docs/BRAND.md) */
  /* Setlists identity, from apps/setlists/src/ui/theme.ts ("Stage Instrument") */
  --st-bg: #0B0B0D;
  --st-surface: #16161A;
  --st-line: #2E2E36;
  --st-lyric: #E8E4DA;
  --st-text-2: #A3A3AE;
  --st-chord: #FFC24A;
  --st-action: #5AC8FA;
}
* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); font-family: "Newsreader", Georgia, serif; font-optical-sizing: auto; }
body { margin: 0; font-size: 1.125rem; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:focus-visible { outline: 2px solid var(--violet-deep); outline-offset: 3px; }
.wrap { max-width: 84rem; margin: 0 auto; padding-inline: 2.5rem; }
.label { margin: 0 0 1.5rem; padding-top: 1rem; border-top: 1px solid var(--ink); font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; font-weight: 600; }

/* header */
.top { display: flex; justify-content: space-between; align-items: baseline; padding-block: 1.6rem 1.1rem; border-bottom: 1px solid var(--ink); }
.mark { display: inline-flex; align-items: baseline; gap: .45em; font-weight: 600; font-size: 1rem; letter-spacing: .32em; text-transform: uppercase; text-decoration: none; }
.mark-s { height: 1.2em; width: auto; flex: none; align-self: center; position: relative; top: -.08em; } /* S optically centred on the cap height, gap ~1.4x the letter spacing; the text keeps the baseline, so crumb and nav sit on the wordmark's baseline */
.top nav { display: flex; gap: 1.5rem; font-style: italic; color: var(--ink-2); }
.top nav a { text-decoration: none; }
.crumb { margin-left: .6rem; color: var(--ink-3); }

/* home: dark stage, the studio name as the headline, one plain sentence below */
.stage { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); }
.home .top { position: relative; z-index: 1; border-bottom-color: #3A3731; }
.home .top nav { color: #CFC9BC; }
.mission { position: relative; z-index: 1; padding: 8rem 0 6rem; max-width: 62rem; }
.mission h1 { text-wrap: balance; margin: 0; font-size: clamp(2.6rem, 7vw, 6.6rem); line-height: 1; font-weight: 340; letter-spacing: -.03em; }
.mission p { text-wrap: pretty; margin: 2.25rem 0 0; font-size: 1.35rem; color: #CFC9BC; max-width: 36rem; }
.mission p a { color: var(--paper); text-decoration-color: var(--violet); }
.shelf { margin-top: 5rem; padding-top: 0; border-top: 0; }
.no-label { display: flex; justify-content: space-between; font-style: italic; color: var(--ink-2); padding: 0 .25rem .75rem; }
.no-label span:first-child { color: var(--violet-deep); }

.plate { background: var(--st-bg); color: var(--st-lyric); border-radius: 2rem; overflow: hidden; display: grid; grid-template-columns: 1.7fr 1fr; min-height: 34rem; font-family: "Atkinson Hyperlegible Next", system-ui, sans-serif; text-decoration: none; }
.plate:focus-visible { outline: 3px solid var(--violet-deep); outline-offset: 4px; }
.plate-copy { padding: 3.25rem 3.5rem; display: flex; flex-direction: column; }
.app-name { font-weight: 700; font-size: 1.1rem; color: var(--st-text-2); display: flex; align-items: center; gap: .65rem; margin: 0; }
.key { border: 1.5px solid var(--st-chord); color: var(--st-chord); border-radius: 999px; padding: .05rem .55rem; font-size: .85rem; line-height: 1.4; }
.sheet { margin-top: 3.5rem; }
.chordline { white-space: nowrap; font-weight: 700; font-size: clamp(2rem, 3.6vw, 3.6rem); line-height: 1.12; margin: 0; padding-top: .9em; }
.chordline + .chordline { padding-top: .95em; }
.c { position: relative; display: inline-block; }
.c::before { content: attr(data-c); position: absolute; left: 0; bottom: 100%; font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 600; font-size: .58em; color: var(--st-chord); }
.plate-spec { display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; margin: 2.75rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--st-line); font-size: 1rem; }
.plate-spec dt { font-family: "IBM Plex Mono", monospace; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--st-text-2); }
.plate-spec dd { margin: .2rem 0 0; }
.go { margin-top: 1.5rem; color: var(--st-action); font-weight: 700; }
.plate-phone { align-self: end; justify-self: center; width: min(22rem, 86%); margin-top: 3rem; border-radius: 2.6rem 2.6rem 0 0; border: 9px solid #26262C; border-bottom: 0; overflow: hidden; height: 31rem; }
.plate-phone img { width: 100%; height: auto; display: block; }
.next { margin: 1.25rem 0 0; padding: 1.5rem .25rem; border-bottom: 1px solid var(--rule); font-style: italic; color: var(--ink-2); }
.next span { color: var(--ink-3); font-style: normal; margin-right: 1rem; }

.foot { padding: 5rem 0 4rem; }
.foot .row { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.foot p { margin: 0; max-width: 34rem; font-style: italic; color: var(--ink-2); }
.foot nav { display: flex; gap: 1.5rem; }
.foot .heart { color: var(--violet-fold); font-style: normal; } /* glyph, not emoji: same violet on every device */

/* legal pages (house style) */
.doc { max-width: 42rem; padding: 4rem 0 5rem; }
.doc h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 400; line-height: 1.1; margin: 0 0 .5rem; }
.doc .meta { font-style: italic; color: var(--ink-2); margin: 0 0 3rem; }
.doc h2 { font-size: 1.35rem; font-weight: 600; margin: 2.5rem 0 .5rem; }
.doc h3 { font-size: 1.1rem; font-weight: 600; margin: 1.5rem 0 .25rem; }
.doc p, .doc li { color: var(--ink); }
.doc address { font-style: normal; }
.doc .lang { display: flex; gap: 1rem; font-style: italic; margin-bottom: 2rem; }

/* app page: the app's own identity */
body.app { background: var(--st-bg); color: var(--st-lyric); font-family: "Atkinson Hyperlegible Next", system-ui, sans-serif; }
body.app .top { border-bottom-color: var(--st-line); color: var(--st-text-2); font-family: "Newsreader", serif; }
body.app .mark { color: var(--st-lyric); }
body.app a:focus-visible { outline-color: var(--st-action); }
.app-hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: 3rem; padding-top: 4rem; align-items: end; border-bottom: 1px solid var(--st-line); }
.app-hero .chordline { font-size: clamp(2.4rem, 4.6vw, 4.6rem); }
.app-hero .sheet { margin-top: 1.5rem; }
.lead { font-size: 1.3rem; color: var(--st-text-2); max-width: 32rem; margin: 2rem 0 0; }
.status { display: inline-flex; align-items: center; gap: .6rem; margin: 2rem 0 0; border: 1.5px solid var(--st-line); border-radius: 999px; padding: .65rem 1.15rem; font-weight: 700; }
.status::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--st-chord); }
.phones { display: flex; gap: 1rem; align-items: flex-end; }
.phones img { width: 50%; border-radius: 2rem 2rem 0 0; border: 7px solid #26262C; border-bottom: 0; display: block; height: 32rem; object-fit: cover; object-position: top; }
.phones img + img { height: 28rem; }
.band { padding: 4rem 0; border-bottom: 1px solid var(--st-line); }
.band > h2 { margin: 0 0 2rem; font-size: 1.7rem; }
.band > h2 small { font-size: 1rem; font-weight: 400; color: var(--st-text-2); margin-left: .5rem; }
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 3rem; }
.feats .n { font-family: "IBM Plex Mono", monospace; color: var(--st-chord); font-weight: 600; font-size: .95rem; }
.feats h3 { margin: .5rem 0 .4rem; font-size: 1.35rem; line-height: 1.2; }
.feats p { margin: 0; color: var(--st-text-2); }
.pricing { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 1rem; }
.tier { background: var(--st-surface); border-radius: 1.25rem; padding: 1.75rem; }
.tier small { display: block; color: var(--st-text-2); font-size: 1rem; }
.tier .amt { font-size: 2.8rem; font-weight: 700; line-height: 1; margin: .7rem 0 0; }
.tier p { margin: .7rem 0 0; }
.support { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; }
.support h2 { margin: 0; font-size: 1.7rem; }
.support .mail { display: inline-block; margin-top: .9rem; color: var(--st-action); font-size: 1.25rem; font-weight: 700; text-decoration: none; }
.qa div { border-top: 1px solid var(--st-line); padding: 1.1rem 0; }
.qa h3 { margin: 0 0 .3rem; font-size: 1.1rem; }
.qa p { margin: 0; color: var(--st-text-2); }
.app-foot { padding: 2rem 0 3rem; display: flex; justify-content: space-between; color: var(--st-text-2); flex-wrap: wrap; gap: 1rem; font-family: "Newsreader", serif; font-style: italic; }
.app-foot nav { display: flex; gap: 1.5rem; font-style: normal; color: var(--st-lyric); }
.app-foot a { color: var(--st-lyric); }

@media (max-width: 760px) {
  body { font-size: 1.0625rem; }
  .wrap { padding-inline: 1rem; }
  .top nav { gap: 1rem; font-size: 1rem; }
  .crumb { display: none; }
  .mission { padding: 5rem 0 3.5rem; }
  .mission p { font-size: 1.15rem; }
  .shelf { margin-top: 3rem; }
  .plate { grid-template-columns: 1fr; min-height: 0; border-radius: 1.4rem; }
  .plate-copy { padding: 1.75rem 1.5rem 0; }
  .sheet { margin-top: 1.5rem; }
  .chordline { font-size: 1.7rem; }
  .plate-spec { gap: .75rem 1.5rem; }
  .plate-phone { height: 20rem; width: 78%; border-width: 6px; }
  .foot { padding-top: 3rem; }
  .foot .row { flex-direction: column; }
  .doc { padding-top: 2.5rem; }
  .app-hero, .support { grid-template-columns: 1fr; gap: 2rem; padding-top: 2.5rem; }
  .app-hero .chordline { font-size: 2.05rem; }
  .status { margin-bottom: 0; }
  .phones img { height: 22rem; }
  .phones img + img { height: 19rem; }
  .band { padding: 2.75rem 0; }
  .feats, .pricing { grid-template-columns: 1fr; }
}

/* additions for the real pages */
.unlocks { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin: 1.5rem 0 0; padding: 0; color: var(--st-text-2); }
.unlocks li:first-child { color: var(--st-lyric); font-weight: 700; }
.unlocks li + li::before { content: "+ "; color: var(--st-chord); font-family: "IBM Plex Mono", monospace; }
.support .note { color: var(--st-text-2); margin: .6rem 0 0; }
.qa a { color: var(--st-action); }
h1.app-name { font-size: 1.4rem; }
.doc a { color: var(--violet-deep); }
.doc ul { padding-left: 1.2rem; }
.doc table { border-collapse: collapse; width: 100%; font-size: 1rem; }
.doc td, .doc th { text-align: left; vertical-align: top; padding: .5rem .75rem .5rem 0; border-top: 1px solid var(--rule); }
.doc hr { border: 0; border-top: 1px solid var(--ink); margin: 4rem 0 2rem; }

/* app page v2: problem/answer pairs, gig night steps */
.app-hero h1.sheet { margin: 1.5rem 0 0; font-weight: inherit; }
.app-hero h1 .chordline { display: block; }
.pains { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pain { background: var(--st-surface); border-radius: 1.25rem; padding: 1.75rem; }
.pain h3 { margin: 0 0 .75rem; font-size: 1.35rem; line-height: 1.25; color: var(--st-lyric); }
.pain p { margin: 0; color: var(--st-text-2); }
.pain p::before { content: "→ "; color: var(--st-chord); font-family: "IBM Plex Mono", monospace; }
.night { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; counter-reset: step; }
.night li { counter-increment: step; }
.night img { width: 100%; height: 22rem; object-fit: cover; object-position: top; border-radius: 1.5rem 1.5rem 0 0; border: 6px solid #26262C; border-bottom: 0; display: block; }
.night h3 { margin: 1.25rem 0 .4rem; font-size: 1.25rem; }
.night h3::before { content: counter(step, decimal-leading-zero) " "; font-family: "IBM Plex Mono", monospace; color: var(--st-chord); font-size: .95rem; margin-right: .35rem; }
.night p { margin: 0; color: var(--st-text-2); }
@media (max-width: 1000px) { .night { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .pains { grid-template-columns: 1fr; }
  .pain h3 { font-size: 1.2rem; }
  .night { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
  .night img { height: 15rem; border-width: 4px; border-radius: 1rem 1rem 0 0; }
  .night h3 { font-size: 1.05rem; }
  .night p { font-size: .98rem; }
}
.status-note { margin: .8rem 0 3rem; color: var(--st-text-2); }
.status-note a { color: var(--st-action); }
@media (max-width: 760px) { .status-note { margin-bottom: 0; } }