/* Soundnote landing site.
   Wears the ENKIDU LABS design system (warm paper + ink, one teal accent, condensed
   light display type over Inter) because Soundnote is an Enkidu Labs product and the
   two sites are read as one family. The APP at app.soundnote.com.au keeps its own
   teal-on-cool-white identity; that divergence is deliberate, not drift.

   The one colour borrowed from the app is the trust-layer amber
   (--inferred / --inferred-bg), taken verbatim from tailwind.config.js so the note
   preview shows the REAL highlight a clinician will see, not an approximation.

   No inline <style> or style="" anywhere on the site: the CSP in _headers has no
   'unsafe-inline' for scripts, and keeping styles external means the same is true
   for any future tightening of style-src. */

:root {
  /* Enkidu ink + neutrals (warm greige, never cold clinical white) */
  --ink: #1C1B18;
  --body-c: #3C3A34;
  --muted: #6E6A60;
  --border: #DED9CC;
  --hairline: #E6E2D7;

  /* Surfaces */
  --bg: #F0EEE6;
  --bg-soft: #E9E7DD;
  --surface: #F7F6F1;

  /* Teal, the single accent */
  --teal: #0F8F84;
  --teal-700: #0C6B63;
  --teal-800: #0A544E;
  --teal-100: #DCEAE6;
  --teal-50: #E9F1EF;

  /* Trust-layer amber, verbatim from the app's tailwind.config.js */
  --inferred: #C77A1E;
  --inferred-bg: #FAEEDA;
  --inferred-ink: #8A5511;

  --sh-md: 0 4px 16px rgba(28, 27, 24, .05);

  --r: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 100px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --font-head: 'Yanone Kaffeesatz', 'Inter', system-ui, sans-serif;
  --wrap: 1120px;
  --pad: clamp(20px, 5vw, 40px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--body-c);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-head);
  color: var(--ink);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: .004em;
}

/* The teal accent word inside a heading. Enkidu uses <em> for this. */
h1 em, h2 em { font-style: normal; color: var(--teal); font-weight: 400; }

a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* Skip link: visible only once focused. */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--teal); color: #fff; padding: 10px 18px;
  border-radius: 0 0 var(--r) 0; font-size: 14px; font-weight: 600; z-index: 50;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }

/* Eyebrow: uppercase teal label above each section heading.
   Enkidu's version prefixes a 26px teal rule (.eyebrow::before). Dropped here on
   2026-08-18: at this size it reads as a stray em dash rather than a design mark,
   which is exactly the punctuation Ahmed does not want in his copy. The label
   alone still does the job. Restore by re-adding the ::before if the family
   resemblance to enkidu.com.au matters more. */
.eyebrow {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal-700);
}
.eyebrow-center { justify-content: center; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 24px;
  border-radius: var(--r-pill);
  font-weight: 600; font-size: 15px;
  transition-property: transform, background-color, border-color, color;
  transition-duration: .16s;
  transition-timing-function: var(--ease);
}
.btn:active { transform: scale(.96); }
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-700); }
.btn-quiet { border: 1px solid var(--border); color: var(--ink); }
.btn-quiet:hover { border-color: var(--teal); color: var(--teal-700); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(240, 238, 230, .88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner {
  max-width: var(--wrap); margin: 0 auto;
  padding-left: var(--pad); padding-right: var(--pad);
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.brand-row { display: flex; align-items: center; gap: 16px; }
.nav-links { display: flex; align-items: center; gap: 26px; font-size: 14.5px; font-weight: 500; }
.nav-links .plain { display: inline-flex; align-items: center; min-height: 40px; }
.nav-links .plain:hover { color: var(--teal-700); }
.nav-links .btn { min-height: 40px; padding: 0 18px; font-size: 14px; }
/* Plain text since 2026-08-18, deliberately not a link. Kept quiet so it reads as
   attribution beside the lockup rather than as navigation competing with it. */
.umbrella { font-size: 12.5px; color: var(--muted); }
@media (max-width: 760px) {
  .nav-links .plain, .umbrella { display: none; }
}

.back {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
  font-size: 14px; font-weight: 500; color: var(--muted);
}
.back:hover { color: var(--teal-700); }

/* ---------- hero ---------- */
.hero { padding: clamp(64px, 10vh, 104px) 0 56px; }
.badge-row { display: flex; align-items: center; gap: 14px; margin: 26px 0 24px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--teal-50); color: var(--teal-800);
  border: 1px solid var(--teal-100);
  padding: 6px 14px; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 600;
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.hero h1 { font-size: clamp(40px, 5.8vw, 62px); max-width: 720px; text-wrap: balance; }
.lead { margin-top: 20px; max-width: 600px; font-size: 18.5px; color: var(--muted); text-wrap: pretty; }
.hero-cta { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }
.pilot-note { margin-top: 16px; font-size: 13.5px; color: var(--muted); }

/* ---------- note preview ----------
   The flagged line reproduces the app's real trust-layer span: amber wash plus a
   dotted amber underline. Anyone who has used the app should recognise it instantly. */
.preview {
  margin-top: 60px; max-width: 640px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 8px; box-shadow: var(--sh-md);
}
.preview-inner {
  background: #FDFDFB; border: 1px solid var(--hairline);
  border-radius: var(--r); padding: 24px 28px; font-size: 15px;
}
.preview-label {
  font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px;
}
.note-line { padding: 2.5px 0; color: var(--ink); }
.mark-inferred {
  background: var(--inferred-bg);
  border-bottom: 2px dotted var(--inferred);
  border-radius: 3px; padding: 0 3px;
}
.flag-chip {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-size: 13px; color: var(--inferred-ink);
  background: var(--inferred-bg); border: 1px solid rgba(199, 122, 30, .25);
  border-radius: var(--r); padding: 7px 13px;
}
.flag-chip svg { flex: none; }

/* ---------- sections ---------- */
.section { padding: clamp(64px, 9vh, 96px) 0; }
.section-soft { background: var(--bg-soft); }
.section-head { margin-bottom: 44px; }
.section-head h2 { font-size: clamp(28px, 3.8vw, 40px); margin-top: 16px; text-wrap: balance; }

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 820px) { .grid { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 30px 28px;
}
.icon-tile {
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: var(--r); background: var(--teal-50);
  border: 1px solid var(--teal-100); color: var(--teal-700);
}
.card h3 { font-size: 24px; font-weight: 400; margin-top: 16px; margin-bottom: 6px; }
.card p { font-size: 15.5px; color: var(--muted); text-wrap: pretty; }
.tag-soon {
  display: inline-block; margin-left: 10px; vertical-align: 3px;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 3px 10px;
}

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 44px; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
.step .num {
  font-size: 12px; font-weight: 600; letter-spacing: .14em;
  color: var(--teal-700); margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 23px; font-weight: 400; margin-bottom: 6px; }
.step p { font-size: 15px; color: var(--muted); text-wrap: pretty; }

/* ---------- contact ---------- */
.contact { text-align: center; }
.contact-inner { max-width: 600px; margin: 0 auto; }
.contact h2 { font-size: clamp(28px, 3.8vw, 40px); margin: 16px 0; text-wrap: balance; }
.contact p { color: var(--muted); margin-bottom: 30px; text-wrap: pretty; }

/* ---------- legal pages ---------- */
.page-head { padding: 64px 0 20px; }
.page-head h1 { font-size: clamp(34px, 5vw, 50px); margin-top: 16px; text-wrap: balance; }
.updated { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.prose { padding: 28px 0 80px; font-size: 16.5px; line-height: 1.7; }
.prose h2 { font-size: 25px; margin: 38px 0 10px; }
.prose p { margin-bottom: 14px; text-wrap: pretty; }
.prose ul { margin: 0 0 14px 20px; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--teal-700); font-weight: 600; }
.prose a:hover { text-decoration: underline; text-underline-offset: 3px; }
.callout {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--teal); border-radius: var(--r);
  padding: 18px 20px; margin: 20px 0; font-size: 15.5px;
}

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--hairline); padding: 44px 0 32px; font-size: 14px; color: var(--muted); }
.footer-top { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 30px; }
.footer-name { font-family: var(--font-head); font-weight: 400; font-size: 22px; color: var(--ink); }
.footer-blurb { max-width: 320px; font-size: 14px; margin-top: 6px; }
.footer-blurb a { color: var(--teal-700); font-weight: 600; }
.footer-blurb a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* gap 0 because each link carries its own 40px hit area below; 8px of gap on top
   of that would just space the footer out without making anything easier to tap. */
.footer-col { display: flex; flex-direction: column; gap: 0; }
.footer-col h2 {
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin-bottom: 4px;
}
/* 40px minimum touch target. Measured at 28px on a 375px viewport before this. */
.footer-col a { display: flex; align-items: center; min-height: 40px; width: fit-content; }
.footer-col a:hover { color: var(--teal-700); }
.footer-base {
  border-top: 1px solid var(--hairline); padding-top: 22px; font-size: 13px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.footer-base a { color: var(--teal-700); }
.footer-base a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- motion ----------
   Gentle staggered reveal. Delay is set by js/reveal.js via a data attribute rather
   than an inline style, so script-src and style-src stay free of 'unsafe-inline'.

   NOTE THE `.js` PREFIX, it is load-bearing. The reveal starts content at opacity 0,
   so hiding it unconditionally would blank the whole page whenever reveal.js is
   blocked, 404s, or JavaScript is off. js/reveal.js adds `js` to <html> itself, so
   the hidden state only ever exists in a browser that can undo it. */
.js .reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal[data-d="1"] { transition-delay: .1s; }
.js .reveal[data-d="2"] { transition-delay: .2s; }
.js .reveal[data-d="3"] { transition-delay: .3s; }
.js .reveal[data-d="4"] { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; transition-delay: 0s; }
  .btn:active { transform: none; }
}