/* =========================================================
   roundworthy.com: one stylesheet for every page.

   The colours are COPIES of the app's design tokens (theme/tokens.ts):
   the light set, and the dark set that follows the visitor's device.
   site/site.test.mjs fails if a copy stops matching the app.
   The logo's colours (--mark-*) are added by the build from lib/brand-mark.ts.
   ========================================================= */

@font-face { font-family: 'Cormorant Garamond'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/CormorantGaramond_600SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 600; font-style: italic; font-display: swap; src: url('/fonts/CormorantGaramond_600SemiBold_Italic.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/Inter_400Regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/Inter_600SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/JetBrainsMono_600SemiBold.woff2') format('woff2'); }

:root {
  color-scheme: light dark;
  --ink-900: #10201A;
  --ink-700: #2A3B33;
  --ink-500: #5A6862;
  --paper-bg: #EFE6D0;
  --paper-surface: #FBF6E9;
  --paper-band: #F2EAD6;
  --paper-rule: #E1D6B5;
  --forest-700: #0E3B2B;
  --forest-500: #1C5A3F;
  --brass-500: #A0782A;
  --brass-100: #EBDCB8;
  --band-great: #0E3B2B;
  --band-good: #3B7A4C;
  --band-mixed: #B98422;
  --band-risky: #C4837A;
  --band-poor: #9A2E2A;
  --text-heading: #0E3B2B;
  --text-link: #0E3B2B;
  --text-wordmark: #14422D;
  --on-forest-text: #FBF6E9;
  --on-forest-soft: #D9E6DE;

  /* The site's own roles, built from the tokens above. */
  --button-bg: var(--forest-700);
  --button-text: var(--on-forest-text);
  --closing-bg: var(--forest-700);
  --phone-edge: #10201A;
  --shadow-card: 0 1px 2px rgba(40,30,10,.04), 0 8px 22px -14px rgba(40,30,10,.18);
  --shadow-phone: 0 30px 60px -30px rgba(16,32,26,.45);

  --serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink-900: #F1EADB;
    --ink-700: #D6CFC0;
    --ink-500: #A9B0A2;
    --paper-bg: #0C1A14;
    --paper-surface: #13241C;
    --paper-band: #1A2E24;
    --paper-rule: #2A3F33;
    --forest-700: #2A6B4D;
    --forest-500: #5FA877;
    --brass-500: #D4B06A;
    --brass-100: rgba(212, 176, 106, 0.16);
    --band-great: #A8E6BE;
    --band-good: #5FA877;
    --band-mixed: #E3B24F;
    --band-risky: #D88878;
    --band-poor: #EE6E5C;
    --text-heading: #EDE5D3;
    --text-link: #9FCBB0;
    --text-wordmark: #EDE5D3;
    --on-forest-text: #F6F0E4;
    --on-forest-soft: rgba(246, 240, 228, 0.8);

    --closing-bg: var(--paper-surface);
    --phone-edge: #2A3F33;
    --shadow-card: none;
    --shadow-phone: 0 30px 60px -30px rgba(0,0,0,.7);
  }
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper-bg); color: var(--ink-900);
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--text-heading); letter-spacing: -0.01em; line-height: 1.12; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(42px, 7vw, 68px); letter-spacing: -0.02em; line-height: 1.02; }
h2 { font-size: clamp(30px, 4.4vw, 40px); }
h3 { font-size: 24px; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--text-link); text-underline-offset: 3px; }
a:focus-visible, .button:focus-visible { outline: 2px solid var(--brass-500); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: 1080px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--paper-surface); padding: 8px 12px; border-radius: 6px; z-index: 10; }
.skip-link:focus { left: 8px; }

/* ---- Header ---- */
.header-row { display: flex; align-items: center; gap: 20px; padding-top: 18px; padding-bottom: 18px; }
.lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.mark { width: 40px; height: 40px; display: block; flex-shrink: 0; }
.wordmark { font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1; letter-spacing: -0.01em; color: var(--text-wordmark); }
.site-nav { display: flex; gap: 24px; }
.site-nav a, .footer-nav a { color: var(--ink-700); text-decoration: none; font-size: 15px; padding: 6px 0; }
.site-nav a:hover, .footer-nav a:hover, .site-nav a[aria-current] { color: var(--text-heading); text-decoration: underline; }
/* On a phone the header keeps the logo; the page links are in the footer. */
@media (max-width: 720px) { .site-nav { display: none; } .wordmark { font-size: 26px; } .mark { width: 34px; height: 34px; } }

/* ---- Buttons and links ---- */
.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px;
  font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap;
  color: var(--button-text); background: var(--button-bg); border-radius: 10px;
  transition: transform .12s ease, filter .12s ease;
}
.button:hover { filter: brightness(1.12); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .button { transition: none; } .button:hover { transform: none; } }
/* The quieter button: an outline, for a link that stays on the page. */
.button-quiet { background: transparent; color: var(--text-heading); border: 1.5px solid var(--text-heading); }
.text-link { font-weight: 600; }

/* ---- Hero ---- */
.hero { padding: 28px 0 64px; }
.hero-grid { display: grid; gap: 48px; align-items: center; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--forest-500); margin-bottom: 16px; }
.lead { font-size: 19px; color: var(--ink-700); margin-top: 20px; max-width: 33em; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; }
.fine { font-size: 14px; color: var(--ink-500); margin-top: 16px; }
.store-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.store-badge { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--paper-rule); border-radius: 10px; background: var(--paper-surface); color: var(--ink-900); text-decoration: none; font-size: 14px; font-weight: 600; }
@media (min-width: 860px) {
  .hero { padding: 56px 0 96px; }
  .hero-grid { grid-template-columns: 1fr 320px; gap: 64px; }
}

/* ---- The phone: an app screen in a plain outline ---- */
.phone {
  position: relative; width: min(300px, 78vw); aspect-ratio: 408 / 862; margin: 0 auto;
  border: 9px solid var(--phone-edge); border-radius: 42px;
  overflow: hidden; background: var(--phone-edge); box-shadow: var(--shadow-phone);
}
.phone img:not(.notice-icon) { width: 100%; height: 100%; object-fit: cover; border-radius: 33px; }

/* A lock screen with one alert on it, drawn here so its words stay editable. */
.lock { height: 100%; border-radius: 33px; padding: 22% 12px 0; text-align: center; color: #F6F0E4; background: radial-gradient(120% 80% at 50% 0%, #2A6B4D 0%, #0E3B2B 45%, #0C1A14 100%); }
.lock-time { font-family: var(--serif); font-weight: 600; font-size: 76px; line-height: 1; letter-spacing: -0.02em; }
.lock-date { font-size: 14px; opacity: 0.85; margin-top: 6px; }
.notice { display: flex; gap: 10px; text-align: left; margin-top: 44px; padding: 12px; border-radius: 18px; background: rgba(251, 246, 233, 0.94); color: #10201A; box-shadow: 0 12px 30px -12px rgba(0,0,0,.5); }
.notice-icon { width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0; }
.notice-app { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #5A6862; display: flex; justify-content: space-between; }
.notice-app span { font-weight: 400; text-transform: none; letter-spacing: 0; }
.notice-title { font-size: 13.5px; font-weight: 600; line-height: 1.3; margin-top: 2px; }
.notice-body { font-size: 12.5px; line-height: 1.35; color: #2A3B33; margin-top: 2px; }

/* ---- Three promises ---- */
.band { background: var(--paper-band); border-top: 1px solid var(--paper-rule); border-bottom: 1px solid var(--paper-rule); padding: 44px 0; }
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.points li { position: relative; padding-left: 34px; }
.points h3 { font-size: 23px; margin-bottom: 4px; }
.points p { font-size: 15.5px; color: var(--ink-700); }
/* A small brass check in a soft brass disc, drawn in CSS so it stays on the tokens. */
.points li::before { content: ''; position: absolute; left: 0; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--brass-100); }
.points li::after { content: ''; position: absolute; left: 8px; top: 8px; width: 6px; height: 11px; border: solid var(--brass-500); border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (min-width: 860px) { .points { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

/* ---- Sections ---- */
.section { padding: 80px 0; }
.section-tight { padding-top: 0; }
.section-heading { margin-bottom: 36px; }

/* ---- How it works ---- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.steps li { background: var(--paper-surface); border: 1px solid var(--paper-rule); border-radius: 14px; box-shadow: var(--shadow-card); padding: 24px 24px 26px; }
.step-number { display: block; font-family: var(--mono); font-weight: 600; font-size: 13px; color: var(--brass-500); margin-bottom: 14px; }
.step-number::before { content: '0'; }
.steps h3 { margin-bottom: 8px; }
.steps p { font-size: 15.5px; color: var(--ink-700); }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

/* ---- Grades ---- */
.grades { display: grid; gap: 28px; align-items: center; }
.grades p { color: var(--ink-700); margin-top: 12px; max-width: 30em; }
.grade-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.grade { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 16px 12px 18px; background: var(--paper-surface); border: 1px solid var(--paper-rule); border-left: 6px solid var(--grade); border-radius: 10px; }
.grade-name { font-family: var(--serif); font-weight: 600; font-size: 22px; line-height: 1.1; color: var(--ink-900); }
.grade-range { font-family: var(--mono); font-weight: 600; font-size: 14px; color: var(--ink-700); }
.grade-great { --grade: var(--band-great); }
.grade-good { --grade: var(--band-good); }
.grade-mixed { --grade: var(--band-mixed); }
.grade-risky { --grade: var(--band-risky); }
.grade-poor { --grade: var(--band-poor); }
@media (min-width: 860px) { .grades { grid-template-columns: 1fr 1fr; gap: 64px; } }

/* ---- Feature showcase ----
   Small screens (and browsers without scripts): each feature is its words,
   then its own phone. Wide screens with scripts: the words scroll past one
   phone that stays put and changes screen (src/site.js picks which). */
.showcase-heading { max-width: 16em; }
.features { display: grid; gap: 72px; }
.feature { display: grid; gap: 32px; align-items: center; }
.feature h3 { font-size: clamp(28px, 4vw, 38px); }
.feature-text p:not(.eyebrow) { color: var(--ink-700); margin-top: 14px; max-width: 30em; }
.feature-text .fine { color: var(--ink-500); }
.stack { display: none; }
@media (min-width: 900px) {
  .feature { grid-template-columns: 1fr 1fr; gap: 64px; }
  .feature:nth-child(even) .feature-text { order: 2; }
  .js .showcase-grid { display: grid; grid-template-columns: 1fr 340px; gap: 80px; align-items: start; }
  .js .features { gap: 0; }
  .js .feature { grid-template-columns: 1fr; min-height: 78vh; align-content: center; }
  .js .feature:nth-child(even) .feature-text { order: 0; }
  .js .feature-phone { display: none; }
  .js .stack { display: block; position: sticky; top: max(24px, calc(50vh - 325px)); }
  .js .stack-phone { width: 300px; }
  /* The feature in the middle of the window is at full strength; its neighbours wait. */
  .js .feature .feature-text { opacity: 0.28; transition: opacity .5s ease; }
  .js .feature.is-current .feature-text { opacity: 1; }
}
.stack-screen { position: absolute; inset: 0; opacity: 0; transform: scale(1.05); transition: opacity .55s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.stack-screen.is-active { opacity: 1; transform: none; }
/* The alert drops onto the lock screen when its turn comes. */
.stack-screen .notice { opacity: 0; transform: translateY(-22px) scale(.96); transition: opacity .5s ease .35s, transform .7s cubic-bezier(.2,.9,.3,1.2) .35s; }
.stack-screen.is-active .notice { opacity: 1; transform: none; }

/* ---- Motion ----
   Entrance: the hero settles in as the page opens (no script needed).
   Reveal: things marked data-reveal ease in the first time they are seen,
   but only hide beforehand when scripts are running (.js), so nothing can
   stay invisible. All of it is switched off for visitors who ask their
   device for less motion. */
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes phone-in { from { opacity: 0; transform: translateY(60px) scale(.94) rotate(2deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-text > * { animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
  .hero-text > :nth-child(2) { animation-delay: .08s; }
  .hero-text > :nth-child(3) { animation-delay: .16s; }
  .hero-text > :nth-child(4) { animation-delay: .24s; }
  .hero-text > :nth-child(5) { animation-delay: .32s; }
  .hero-phone { animation: phone-in 1.1s cubic-bezier(.2,.7,.2,1) .15s both; }

  .js [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity .8s ease var(--delay, 0ms), transform .9s cubic-bezier(.2,.7,.2,1) var(--delay, 0ms); }
  .js [data-reveal="slide"] { transform: translateX(48px); }
  .js [data-reveal="rise"] { transform: translateY(70px) scale(.94); }
  .js [data-reveal].is-visible { opacity: 1; transform: none; }

  /* Where the browser can tie motion to the scrollbar: the hero's phone
     drifts up and tilts away as the page scrolls past it. */
  @supports (animation-timeline: scroll()) {
    @keyframes drift { to { transform: translateY(-70px) scale(.96); } }
    .hero-grid > .hero-phone { animation: phone-in 1.1s cubic-bezier(.2,.7,.2,1) .15s both, drift linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 90vh; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .stack-screen, .stack-screen .notice, .js .feature .feature-text { transition: none; }
  .stack-screen { transform: none; }
}

/* ---- The other pages: About, Contact, Support, Privacy, Terms ---- */
.narrow { max-width: 760px; }
.page-intro { padding: 40px 0 28px; }
.page-intro h1 { font-size: clamp(38px, 6vw, 56px); }
.prose { padding-bottom: 88px; }
.prose h2 { font-size: 30px; margin: 44px 0 12px; }
.prose h3 { font-size: 22px; margin: 28px 0 8px; }
.prose p { color: var(--ink-700); margin-top: 14px; }
.prose ul { color: var(--ink-700); padding-left: 22px; margin: 14px 0 0; }
.prose li { margin-top: 8px; }
.prose strong { color: var(--ink-900); font-weight: 600; }
.legal { font-size: 16px; }

.company-card { margin-top: 36px; background: var(--paper-surface); border: 1px solid var(--paper-rule); border-radius: 14px; box-shadow: var(--shadow-card); padding: 8px 22px; }
.company-card dl { margin: 0; }
.company-card div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--paper-rule); }
.company-card div:last-child { border-bottom: 0; }
.company-card dt { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); padding-top: 3px; }
.company-card dd { margin: 0; color: var(--ink-900); overflow-wrap: anywhere; }

.prose .contact-email { margin-top: 0; }
.prose .reasons { list-style: none; padding: 0; display: grid; gap: 14px; margin-top: 18px; }
.reasons li { background: var(--paper-surface); border: 1px solid var(--paper-rule); border-radius: 14px; padding: 18px 20px; margin: 0; }
.prose .reasons h3 { margin: 0 0 4px; }
.prose .reasons p { margin: 0; font-size: 15.5px; }
@media (min-width: 720px) { .prose .reasons { grid-template-columns: 1fr 1fr; } }

.faq { border-top: 1px solid var(--paper-rule); }
.faq details { border-bottom: 1px solid var(--paper-rule); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font-family: var(--serif); font-weight: 600; font-size: 23px; line-height: 1.2; color: var(--text-heading); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 16px; font-family: var(--sans); font-weight: 400; font-size: 26px; color: var(--brass-500); transition: transform .25s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 22px; max-width: 38em; }

/* ---- Closing band ---- */
.closing { background: var(--closing-bg); color: var(--on-forest-text); text-align: center; padding: 72px 0; border-top: 1px solid var(--paper-rule); }
.closing h2 { color: var(--on-forest-text); }
.closing p { color: var(--on-forest-soft); margin: 12px auto 28px; max-width: 30em; }
.button-on-forest { background: var(--paper-surface); color: var(--forest-700); }
@media (prefers-color-scheme: dark) { .button-on-forest { background: var(--button-bg); color: var(--button-text); } }

/* ---- Footer ---- */
.site-footer { padding: 48px 0 56px; font-size: 14.5px; color: var(--ink-500); }
.footer-grid { display: grid; gap: 28px; }
.lockup-small .mark { width: 30px; height: 30px; }
.lockup-small .wordmark { font-size: 24px; }
.footer-tagline { margin-top: 8px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 6px 22px; align-content: start; }
.footer-company p + p { margin-top: 4px; }
.footer-company a { color: var(--ink-700); }
@media (min-width: 860px) { .footer-grid { grid-template-columns: 1fr auto 1fr; gap: 48px; } .footer-company { text-align: right; } }

/* The logo, from lib/brand-mark.ts */
:root { --mark-sun: #E9B44C; --mark-wind: #0E3B2B; --mark-tee: #0E3B2B; }
@media (prefers-color-scheme: dark) { :root { --mark-sun: #E9B44C; --mark-wind: #FFFFFF; --mark-tee: #FBF6E9; } }