/* Beautiful Software: shared brand tokens and components. See BRAND.md ("Gallery"). */

:root {
  /* Studio */
  --white: #FFFFFF;
  --black: #000000;

  /* One colour per app; --app is the app a page is about */
  --earshot: #FF5A36;
  --panes: #2F5BEA;
  --squeeze: #3DDC97;
  --squeeze-ink: #0B3B26;
  --app: var(--earshot);

  --color-bg: var(--white);
  --color-bg-alt: #F3F3F3;
  --color-surface: var(--white);
  --color-text: var(--black);
  --color-text-secondary: #555555;
  --color-link: var(--black);
  --color-line: rgba(0, 0, 0, 0.12);
  --color-band-bg: var(--app);
  --color-band-text: var(--black);
  --color-band-text-secondary: #3A1408;
  --color-band-line: rgba(0, 0, 0, 0.22);
  --color-action: var(--app);
  --color-action-hover: color-mix(in oklab, var(--app), var(--black) 12%);
  --color-on-action: var(--black);
  --color-tile-muted-bg: #F0F0F0;
  --color-tile-muted-fg: var(--black);
  --color-highlight: rgba(255, 90, 54, 0.14);
  --shadow-window: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 30px 60px -30px rgba(0, 0, 0, 0.35);

  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --page-max: 72rem;
  --gutter: clamp(16px, 4vw, 40px);
  --section-space: clamp(4rem, 10vw, 7.5rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--black);
    --color-bg-alt: #121212;
    --color-surface: #161616;
    --color-text: var(--white);
    --color-text-secondary: #A3A3A3;
    --color-link: var(--white);
    --color-line: rgba(255, 255, 255, 0.14);
    --color-tile-muted-bg: #242424;
    --color-tile-muted-fg: var(--white);
    --color-highlight: rgba(255, 90, 54, 0.2);
    --shadow-window: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 30px 60px -30px rgba(0, 0, 0, 0.9);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
h2 { font-size: clamp(1.875rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -0.035em; }
h3 { font-family: var(--font-body); font-size: 1.125rem; font-weight: 600; line-height: 1.3; }

p, ul, ol { margin: 0; }
p { text-wrap: pretty; }
svg { display: block; max-width: 100%; }

a { color: var(--color-link); text-underline-offset: 0.2em; text-decoration-thickness: from-font; }
:focus-visible { outline: 3px solid var(--color-text); outline-offset: 3px; }
::selection { background: var(--app); color: var(--black); }

.wrap { width: min(100% - 2 * var(--gutter), var(--page-max)); margin-inline: auto; }
.section { padding-block: var(--section-space); }
.section-alt { background: var(--color-bg-alt); }
.section-head { max-width: 38rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-head p { margin-top: 16px; }
.lede { font-size: clamp(1.125rem, 2vw, 1.3125rem); line-height: 1.5; color: var(--color-text-secondary); max-width: 34rem; }
.muted { color: var(--color-text-secondary); }
.small { font-size: 0.875rem; line-height: 1.5; }
.prose { max-width: 38rem; }
.prose h2 + p { margin-top: 24px; }
.prose p + p { margin-top: 1em; }

/* Placeholder text still to be filled in before launch */
.todo { background: var(--color-highlight); border-radius: 4px; padding: 0 4px; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 10;
  padding: 8px 14px; border-radius: 8px;
  background: var(--color-surface); color: var(--color-text);
}
.skip-link:focus { top: 16px; }

/* Header */

.site-header { padding-block: 20px; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--color-text); text-decoration: none; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem; line-height: 1; letter-spacing: -0.02em;
}
.brand svg { width: 30px; height: 30px; flex: none; }
.logo-tile { fill: var(--color-text); }
.logo-frame { fill: none; stroke: var(--color-bg); stroke-width: 4.5; }

.site-nav { display: flex; align-items: center; gap: clamp(14px, 3vw, 28px); font-size: 0.9375rem; }
.site-nav a { color: var(--color-text-secondary); text-decoration: none; }
.site-nav a:hover { color: var(--color-text); }
@media (max-width: 640px) { .site-nav .hide-sm { display: none; } }
@media (max-width: 400px) { .site-nav .hide-xs { display: none; } }

/* Buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 26px; border-radius: 999px;
  font: 600 1rem/1 var(--font-body); text-decoration: none; white-space: nowrap;
  transition: background-color 150ms ease, transform 100ms ease;
}
.btn:active { transform: scale(0.98); }
.btn-buy { background: var(--color-action); color: var(--color-on-action); }
.btn-buy:hover { background: var(--color-action-hover); }
.btn-block { width: 100%; }
.text-link { font-weight: 600; text-decoration: underline; text-underline-offset: 0.25em; }
.text-link:hover { text-decoration-thickness: 2px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }

/* App tiles: macOS-style icons, one colour and symbol per app */

.tile { width: 56px; height: 56px; flex: none; }
.tile-bg { fill: var(--tile-bg, var(--app)); }
.tile-fg { fill: var(--tile-fg, var(--white)); }
.tile-stroke { stroke: var(--tile-fg, var(--white)); }
.tile.earshot { --tile-bg: var(--earshot); --tile-fg: var(--white); }
.tile.panes { --tile-bg: var(--panes); --tile-fg: var(--white); }
.tile.squeeze { --tile-bg: var(--squeeze); --tile-fg: var(--squeeze-ink); }

.app-badge { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.02em; }
.app-badge .tile { width: 44px; height: 44px; }

/* Mac window mock-up */

.mac-window {
  background: var(--color-surface); border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow-window); font-size: 0.875rem;
}
.mac-titlebar {
  position: relative; display: flex; gap: 8px;
  padding: 13px 14px; border-bottom: 1px solid var(--color-line);
}
.mac-dot { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; }
.mac-dot.min { background: #FEBC2E; }
.mac-dot.max { background: #28C840; }
.mac-title {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 0.8125rem; font-weight: 600; color: var(--color-text-secondary);
}

.transcript-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--color-line); }
.file-icon {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--earshot); color: var(--white);
}
.file-icon svg { width: 18px; height: 18px; }
.file-name { font-weight: 600; }
.file-meta { font-size: 0.8125rem; color: var(--color-text-secondary); }
.status-pill {
  margin-left: auto; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  font-size: 0.75rem; font-weight: 600;
  background: var(--color-tile-muted-bg); color: var(--color-tile-muted-fg);
}
.transcript-lines { list-style: none; padding: 8px 0; margin: 0; }
.transcript-lines li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 12px; padding: 8px 18px; line-height: 1.5; }
.transcript-lines li.is-current { background: var(--color-highlight); }
.transcript-lines time {
  padding-top: 2px; font-family: var(--font-mono); font-size: 0.75rem;
  font-variant-numeric: tabular-nums; color: var(--color-text-secondary);
}
.transcript-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--color-line); }
.mini-btn {
  padding: 6px 12px; border-radius: 7px; font-size: 0.8125rem; font-weight: 600;
  background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-line);
}

/* Lists */

.checklist { list-style: none; padding: 0; display: grid; gap: 10px; }
.checklist li { display: flex; gap: 10px; }
.checklist svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--color-text); }

/* Questions */

.faq { border-top: 1px solid var(--color-line); }
.faq details { border-bottom: 1px solid var(--color-line); }
.faq summary {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1.0625rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; font-weight: 400; font-size: 1.5rem; line-height: 1;
  color: var(--color-text-secondary); transition: transform 200ms ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { max-width: 40rem; padding-bottom: 20px; color: var(--color-text-secondary); }

/* Footer */

.site-footer { padding-block: 3rem 2.5rem; border-top: 1px solid var(--color-line); font-size: 0.9375rem; }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-blurb { margin-top: 14px; max-width: 26rem; color: var(--color-text-secondary); }
.footer-grid h2 { margin-bottom: 10px; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; }
.footer-grid ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.footer-grid ul a { color: var(--color-text-secondary); text-decoration: none; }
.footer-grid ul a:hover { color: var(--color-text); text-decoration: underline; }
.fine-print { max-width: 46rem; margin-top: 2.5rem; font-size: 0.8125rem; color: var(--color-text-secondary); }
.fine-print a { color: inherit; }

/* Policy pages */

.legal { padding-block: clamp(2.5rem, 7vw, 5rem) var(--section-space); }
.legal .prose { max-width: 42rem; }
.legal h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
.legal .updated { margin-top: 12px; color: var(--color-text-secondary); }
.legal h2 { margin-top: 2.75rem; font-size: 1.5rem; letter-spacing: -0.02em; }
.legal h2 + p, .legal p + p, .legal p + ul, .legal ul + p { margin-top: 1rem; }
.legal ul { padding-left: 1.25rem; }
.legal li + li { margin-top: 0.4rem; }
.legal .summary { margin-top: 2rem; padding: 20px 22px; border-radius: 14px; background: var(--color-bg-alt); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}