/* Hymnphony, option C: "Score"
   A printed score: white and cool grey paper, navy type, gold for small details.
   At night (dark theme) the same score on deep navy ink: off-white type, softened staff lines, gold #DFBE6B.
   Fonts: Montserrat (headings and text), Cormorant Garamond (wordmark and italic pull lines only).
   See SYSTEM.md for the tokens, components, dark mode and scroll animation. */

:root {
  color-scheme: light;

  --navy: #2F4A6E;
  --navy-deep: #22395A;
  --navy-night: #1B2F4B;
  --gold: #C99A3F;
  --gold-light: #DFBE6B;

  --ink: #22385A;
  --text: #45556B;
  --muted: #56667C;
  --line: #D3DAE3;
  --hair: #E4E9EF;
  --staff: #DDE3EA;
  --paper: #FFFFFF;
  --mist: #F4F6F9;

  /* theme helpers (added with dark mode) */
  --on-navy: #FFFFFF;                       /* text and icons on a var(--navy) fill */
  --band: #2F4A6E;                          /* the navy closing band */
  --header-bg: rgba(255, 255, 255, .94);
  --staff-ink: #2F4A6E;                     /* the miniature staff in .eyebrow */
  --shadow-device: rgba(31, 51, 80, .10);
  --shadow-soft: 0 10px 30px rgba(31, 51, 80, .06);
  --device-tone: brightness(1);             /* filter on the framed device PNGs */
  --show-moon: block;                       /* theme switch icons */
  --show-sun: none;

  --sans: 'Montserrat', Arial, sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;

  --wrap: 1240px;
  --gutter: 40px;
  --gap: 32px;
  --section: 128px;
  --header: 76px;

  /* motion */
  --ease-out: cubic-bezier(.2, .65, .25, 1);
  --ease-draw: cubic-bezier(.65, .05, .25, 1);
}

/* ---------- Dark theme ----------
   The same variables, night values. Applied when the device prefers dark and the visitor has not chosen light,
   or when the visitor chose dark (data-theme="dark" on <html>, set by the theme switch). Keep both blocks identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --navy: #D3DEEE;
    --navy-deep: #E2E9F4;
    --navy-night: #F2F6FB;
    --gold: #DFBE6B;
    --gold-light: #E8CD85;
    --ink: #EEF2F8;
    --text: #B8C3D2;
    --muted: #94A2B6;
    --line: #2C3D57;
    --hair: #1F2E45;
    --staff: #26374F;
    --paper: #0E1A2B;
    --mist: #122137;
    --on-navy: #0E1A2B;
    --band: #1A2D49;
    --header-bg: rgba(14, 26, 43, .86);
    --staff-ink: rgba(211, 222, 238, .62);
    --shadow-device: rgba(0, 0, 0, .42);
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, .25);
    --device-tone: brightness(.93);
    --show-moon: none;
    --show-sun: block;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --navy: #D3DEEE;
  --navy-deep: #E2E9F4;
  --navy-night: #F2F6FB;
  --gold: #DFBE6B;
  --gold-light: #E8CD85;
  --ink: #EEF2F8;
  --text: #B8C3D2;
  --muted: #94A2B6;
  --line: #2C3D57;
  --hair: #1F2E45;
  --staff: #26374F;
  --paper: #0E1A2B;
  --mist: #122137;
  --on-navy: #0E1A2B;
  --band: #1A2D49;
  --header-bg: rgba(14, 26, 43, .86);
  --staff-ink: rgba(211, 222, 238, .62);
  --shadow-device: rgba(0, 0, 0, .42);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, .25);
  --device-tone: brightness(.93);
  --show-moon: none;
  --show-sun: block;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 16px); background: var(--paper); }
::selection { background: rgba(201, 154, 63, .28); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover, a:focus { text-decoration: none; }
button, input, select, textarea, summary { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong, b { font-weight: 600; color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--navy); color: var(--on-navy); padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 15px; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Type ---------- */

.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--navy); line-height: 1.4;
  margin-bottom: 24px;
}
/* a miniature five-line staff, gold on the middle line */
.eyebrow::before {
  content: ""; flex: none; width: 28px; height: 13px;
  background:
    linear-gradient(to bottom,
      var(--staff-ink) 0 1px, transparent 1px 3px,
      var(--staff-ink) 3px 4px, transparent 4px 6px,
      var(--gold) 6px 7px, transparent 7px 9px,
      var(--staff-ink) 9px 10px, transparent 10px 12px,
      var(--staff-ink) 12px 13px);
  opacity: .9;
}
.eyebrow.light { color: #fff; }
.eyebrow.light::before {
  background:
    linear-gradient(to bottom,
      #fff 0 1px, transparent 1px 3px,
      #fff 3px 4px, transparent 4px 6px,
      var(--gold-light) 6px 7px, transparent 7px 9px,
      #fff 9px 10px, transparent 10px 12px,
      #fff 12px 13px);
}

.display {
  font-size: clamp(42px, 4.5vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--navy);
}
.display .sub {
  display: block;
  margin-top: 14px;
  font-size: 0.56em;
  line-height: 1.22;
  letter-spacing: -0.015em;
  font-weight: 400;
  color: var(--muted);
  text-wrap: balance;
}

.title {
  font-size: clamp(30px, 3.1vw, 44px);
  line-height: 1.14;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--navy);
  text-wrap: balance;
}
h3 { font-size: 18px; line-height: 1.4; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; }
.lede { font-size: 19px; line-height: 1.7; color: var(--text); }
.small { font-size: 15px; line-height: 1.6; color: var(--muted); }

.pull {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(25px, 2.3vw, 32px);
  line-height: 1.28;
  letter-spacing: -0.005em;
  color: var(--navy);
}

/* ---------- Five-line rule (the recurring motif) ---------- */

.staff-rule {
  height: 17px;
  background: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 4px);
}
.staff-rule.wide { width: 100%; }
.staff-rule.short { width: 56px; height: 13px; background: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 3px); }

/* ---------- Buttons and links ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 26px; border-radius: 999px;
  font-size: 15px; font-weight: 600; letter-spacing: 0.01em; line-height: 1;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-sm { min-height: 44px; padding: 0 22px; font-size: 14px; }
.btn-primary { background: var(--navy); color: var(--on-navy); }
.btn-primary:hover { background: var(--navy-night); }
.btn-ghost { border-color: var(--line); color: var(--navy); background: var(--paper); }
.btn-ghost:hover { border-color: var(--navy); }

.arrow-link {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  font-size: 15px; font-weight: 600; color: var(--navy); letter-spacing: 0.005em;
}
.arrow-link svg { width: 18px; height: 18px; flex: none; transition: transform .2s ease; }
.arrow-link:hover svg { transform: translateX(4px); }
.arrow-link:hover { color: var(--navy-night); }

.inline-link { color: var(--navy); font-weight: 600; }
.inline-link:hover { color: var(--gold); }

/* store buttons: drawn, not badges */
.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 0 26px 0 20px; border-radius: 999px;
  border: 1px solid var(--navy);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.store svg { width: 22px; height: 22px; flex: none; }
.store span { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.store small { font-size: 11px; font-weight: 500; letter-spacing: 0.02em; opacity: .85; }
.store b { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: inherit; }
.store-dark { background: var(--navy); color: var(--on-navy); }
.store-dark:hover { background: var(--navy-night); border-color: var(--navy-night); }
.store-light { background: var(--paper); color: var(--navy); }
.store-light:hover { background: var(--mist); }
.on-dark .store-dark { background: #fff; color: var(--band); border-color: #fff; }
.on-dark .store-dark:hover { background: #EEF2F7; }
.on-dark .store-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.on-dark .store-light:hover { border-color: #fff; background: rgba(255,255,255,.06); }

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--hair);
}
.header-inner { display: flex; align-items: center; height: var(--header); gap: 40px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--navy); flex: none; min-height: 44px; }
.brand img { width: 30px; height: 30px; }
.wordmark {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 23px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  padding-top: 2px;
}
.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: 6px; }
.nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-size: 14px; font-weight: 500; color: var(--text); letter-spacing: 0.005em;
  transition: color .2s ease;
}
/* The owner never wants underlines: the current page gets a small gold dot, hover only changes colour. */
.nav a::after {
  content: ""; position: absolute; left: 50%; bottom: 9px; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: var(--gold); transform: scale(0); transition: transform .25s ease;
}
.nav a:hover { color: var(--navy); }
.nav a[aria-current="page"]::after { transform: scale(1); }
.nav a[aria-current="page"] { color: var(--navy); font-weight: 600; }
.header-cta { flex: none; }

.menu-toggle {
  display: none; margin-left: auto;
  width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper);
  align-items: center; justify-content: center; flex-direction: column; gap: 5px; cursor: pointer; padding: 0;
}
.menu-toggle span { display: block; width: 18px; height: 1.5px; background: var(--navy); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed; left: 0; right: 0; top: var(--header); bottom: 0; z-index: 49;
  background: var(--paper); overflow-y: auto;
  padding: 8px 20px 40px;
  border-top: 1px solid var(--hair);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu ul { border-bottom: 1px solid var(--hair); }
.mobile-menu li + li { border-top: 1px solid var(--hair); }
.mobile-menu a.m-link {
  display: flex; align-items: center; justify-content: space-between; min-height: 60px;
  font-size: 20px; font-weight: 500; color: var(--navy); letter-spacing: -0.01em;
}
.mobile-menu a.m-link svg { width: 18px; height: 18px; color: var(--muted); }
.mobile-menu a.m-link[aria-current="page"] { font-weight: 600; }
.mobile-menu .m-foot { padding-top: 28px; display: grid; gap: 16px; }
.mobile-menu .m-foot .btn { width: 100%; min-height: 54px; font-size: 16px; }
.mobile-menu .m-foot .staff-rule { margin-bottom: 8px; }

/* ---------- Sections ---------- */

.section { padding: var(--section) 0; position: relative; }
.section.mist { background: var(--mist); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.divider { padding-top: 0; padding-bottom: 0; }
.divider .staff-rule { margin: 0; }

.head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; margin-bottom: 72px; }
.head-main { grid-column: 1 / span 7; }
.head-side { grid-column: 9 / span 4; }
.head-side p + p { margin-top: 16px; }
.head-side .pull + p { margin-top: 18px; }

/* ---------- Hero ---------- */

.hero { position: relative; overflow: hidden; background: var(--paper); }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.hero-copy { grid-column: 1 / span 6; padding: 104px 24px 168px 0; }
.hero-copy .display { margin-bottom: 30px; }
.display .main { display: block; text-wrap: balance; }
.hero-copy .lede { max-width: 33em; margin-bottom: 40px; }
.hero-note { margin-top: 22px; font-size: 14px; color: var(--muted); letter-spacing: 0.01em; }
.hero-note span { white-space: nowrap; }
.hero-note i { font-style: normal; color: var(--gold); padding: 0 3px; }

.hero-media { grid-column: 7 / span 6; position: relative; }
.hero-media img { position: absolute; max-width: none; }
/* the iPad stays inside the grid (right edge on the last column) and rises from the staff; its foot is cropped by .hero */
.hero-ipad { width: min(600px, calc(100% - 24px)); left: auto; right: 0; top: auto; bottom: -64px; filter: var(--device-tone); }
.hero-iphone { width: 236px; left: -24px; top: auto; bottom: 0; filter: var(--device-tone) drop-shadow(0 30px 40px var(--shadow-device)); }

/* the staff the devices rise from: five lines, full bleed, behind the imagery */
.hero-staff {
  position: absolute; z-index: 1; pointer-events: none;
  left: 0; right: 0; bottom: 0; height: 57px;
  background: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 14px);
}

.fade-in { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
.fade-in.d2 { animation-delay: .12s; }
.fade-in.d3 { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fade-in { animation: none; } html { scroll-behavior: auto; } }

/* ---------- Measures (highlights) ---------- */

.measures { position: relative; z-index: 3; background: var(--paper); }
.measure-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-left: 1px solid var(--line); position: relative; }
.measure-row::after { /* final double bar */
  content: ""; position: absolute; top: 0; bottom: 0; right: -9px; width: 4px; background: var(--navy);
}
.measure-row li { padding: 40px 32px 44px; border-right: 1px solid var(--line); }
.measure-row li:last-child { border-right-color: var(--navy); }
.measure-row strong { display: block; font-size: 30px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; color: var(--navy); margin-bottom: 10px; }
.measure-row span { display: block; font-size: 15px; line-height: 1.5; color: var(--muted); }
.measures .bottom-hair { border-bottom: 1px solid var(--hair); }

/* ---------- Split (text + device) ---------- */

.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.split-media { grid-column: 1 / span 6; position: relative; margin-left: -24px; }
.split-copy { grid-column: 7 / span 6; }
.split.rev .split-media { grid-column: 7 / span 6; grid-row: 1; margin: 0 -24px 0 0; }
.split.rev .split-copy { grid-column: 1 / span 6; grid-row: 1; }
.split-copy .title { margin-bottom: 26px; }
.split-copy > p { margin-bottom: 18px; max-width: 34em; }
.split-copy .arrow-link { margin-top: 18px; }

.device-ipad { width: 100%; max-width: 600px; margin: 0 auto; }
.device-phone { width: 100%; max-width: 320px; margin: 0 auto; }
.device-ipad, .device-phone, .view-media img, .rail figure img, .gallery figure img { filter: var(--device-tone); }

/* devices rest on a fine five-line staff that fades in and out */
.stand { position: relative; }
.stand::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 3.6%; height: 41px; pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 10px);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent);
}
.stand.is-phone-media::before { bottom: 2.4%; }
.stand img { position: relative; }

/* points: rows separated by hairlines, a short gold bar marks each */
.points { margin-top: 30px; border-top: 1px solid var(--line); }
.points li { position: relative; padding: 18px 0 18px 30px; border-bottom: 1px solid var(--hair); font-size: 16.5px; line-height: 1.6; }
.points li::before { content: ""; position: absolute; left: 2px; top: 25px; width: 3px; height: 13px; border-radius: 2px; background: var(--gold); }
.points li strong { color: var(--ink); }

/* ---------- Key features ---------- */

.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 56px; row-gap: 64px; }
.feature { padding-top: 30px; border-top: 1px solid var(--line); position: relative; }
.feature::before { content: ""; position: absolute; left: 0; top: -1px; width: 40px; height: 1px; background: var(--navy); }
.feature .icon { width: 30px; height: 30px; color: var(--gold); margin-bottom: 22px; }
.feature h3 { margin-bottom: 10px; }
.feature p { font-size: 16px; line-height: 1.65; }
.after-grid { margin-top: 64px; }

/* ---------- Three ways to read ---------- */

.views { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 56px; position: relative; }
.views-staff {
  position: absolute; left: 0; right: 0; top: 452px; height: 41px; pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 10px);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 160px);
          mask-image: linear-gradient(to right, transparent, #000 160px);
}
.views-staff::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 8px; border-left: 1px solid var(--navy); border-right: 3px solid var(--navy); }
.view { position: relative; }
.view-media { height: 500px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 36px; }
.view-media img { max-height: 100%; width: auto; }
.view-media img.is-phone { height: 100%; }
.view-media img.is-pad { width: 100%; height: auto; }
.view .num { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.view h3 { font-size: 20px; margin-bottom: 10px; }
.view p { font-size: 16px; }

/* ---------- A look inside (rail) ---------- */

.rail-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; margin-bottom: 56px; }
.rail-head .head-main { grid-column: 1 / span 6; }
.rail-head .head-side { grid-column: 8 / span 5; }
.rail-controls { display: flex; gap: 10px; margin-top: 28px; }
.round-btn {
  width: 48px; height: 48px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  transition: border-color .2s ease, background-color .2s ease;
}
.round-btn:hover { border-color: var(--navy); }
.round-btn svg { width: 18px; height: 18px; }
.round-btn[disabled] { opacity: .4; cursor: default; border-color: var(--line); }

/* .rail: a row of screenshots that always fits the page width. Any number of items share the row on desktop,
   three to a row on tablets, two on phones. (It used to scroll sideways; it no longer does.) */
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 28px;
  width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
}
.rail::-webkit-scrollbar { display: none; }
.rail li { min-width: 0; }
.rail li::after { content: ""; display: block; }
.rail figure img { width: 100%; margin-bottom: 20px; }
.rail figcaption { border-top: 1px solid var(--line); padding-top: 16px; }
.rail figcaption b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 4px; line-height: 1.4; }
.rail figcaption span { display: block; font-size: 14px; line-height: 1.5; color: var(--muted); }
.rail-controls[hidden] { display: none; }
.rail-note { margin-top: 40px; font-size: 14px; color: var(--muted); }

/* ---------- Who it's for ---------- */

.who { align-items: start; }
.who-intro { grid-column: 1 / span 5; position: sticky; top: calc(var(--header) + 48px); }
.who-intro .title { margin-bottom: 24px; }
.who-intro p { margin-bottom: 20px; }
.who-list { grid-column: 7 / span 6; border-top: 1px solid var(--line); }
.who-list li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; padding: 26px 0; border-bottom: 1px solid var(--hair); }
.who-list h3 { font-size: 18px; }
.who-list p { font-size: 16px; }

/* ---------- Hymn books & traditions ---------- */

.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 56px; margin-top: 112px; }
.pillar .staff-rule { margin-bottom: 26px; }
.pillar h3 { margin-bottom: 10px; }
.pillar p { font-size: 16px; }
.note-line { margin-top: 26px; font-size: 16px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 30px; }

/* ---------- FAQ ---------- */

.faq-grid { align-items: start; }
.faq-intro { grid-column: 1 / span 4; }
.faq-intro .title { margin-bottom: 24px; }
.faq-list { grid-column: 6 / span 7; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 76px; padding: 18px 0;
  font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1.4; letter-spacing: -0.005em;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--navy); }
.faq-list .plus { position: relative; flex: none; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line); transition: border-color .2s ease, background-color .2s ease; }
.faq-list .plus::before, .faq-list .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--navy); transform: translate(-50%, -50%); transition: transform .25s ease; }
.faq-list .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-list details[open] .plus { background: var(--navy); border-color: var(--navy); }
.faq-list details[open] .plus::before, .faq-list details[open] .plus::after { background: var(--on-navy); }
.faq-list details[open] .plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-list .answer { padding: 0 64px 28px 0; font-size: 16.5px; }

/* ---------- Closing call ---------- */

.closing { background: var(--band); color: #fff; position: relative; overflow: hidden; }
.closing .grid { align-items: center; position: relative; z-index: 2; }
.closing-copy { grid-column: 1 / span 6; padding: 120px 0; }
.closing .title { color: #fff; margin-bottom: 22px; }
.closing p { color: rgba(255,255,255,.86); margin-bottom: 38px; max-width: 30em; }
.closing .fine { margin: 22px 0 0; font-size: 14px; color: rgba(255,255,255,.74); }
.closing-art { grid-column: 8 / span 5; position: relative; height: 129px; }
.closing-staff {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.28) 0 1px, transparent 1px 32px);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 140px);
          mask-image: linear-gradient(to right, transparent, #000 140px);
}
.closing-staff::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 10px; border-left: 1px solid rgba(255,255,255,.6); border-right: 4px solid #fff; }
.closing-mark { position: absolute; z-index: 1; top: 50%; left: 52%; width: 152px; height: 152px; transform: translate(-50%, -50%); }
.closing-mark img { width: 100%; height: 100%; }

/* ---------- Footer ---------- */

.site-footer { background: var(--paper); padding: 96px 0 0; }
.footer-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-bottom: 72px; }
.footer-brand { grid-column: 1 / span 4; }
.footer-brand .brand { margin-bottom: 20px; }
.footer-brand p { font-size: 15px; line-height: 1.65; color: var(--muted); margin-bottom: 28px; max-width: 26em; }
.footer-brand .stores { gap: 10px; }
.footer-brand .store { min-height: 50px; padding: 0 20px 0 16px; }
.footer-brand .store b { font-size: 15px; }
.footer-brand .store small { font-size: 10px; }
.footer-brand .store svg { width: 20px; height: 20px; }
.socials { display: flex; gap: 8px; margin-top: 28px; }
.socials a {
  width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.socials a:hover { border-color: var(--navy); background: var(--navy); color: var(--on-navy); }
.socials svg { width: 18px; height: 18px; }
.footer-cols { grid-column: 5 / span 8; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 32px; }
.footer-cols h2 { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--navy); margin-bottom: 18px; }
.footer-cols li a { display: inline-flex; align-items: center; min-height: 36px; font-size: 15px; white-space: nowrap; color: var(--muted); transition: color .2s ease; }
.footer-cols li a:hover { color: var(--navy); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; padding: 26px 0 34px; border-top: 1px solid var(--hair); font-size: 14px; color: var(--muted); }
.credit a { color: var(--navy); }
.credit a b { font-weight: 700; color: var(--navy); }
.credit a:hover, .credit a:hover b { color: var(--navy-night); }

/* ---------- Features page ---------- */

.page-hero .hero-copy { padding: 96px 0 160px; }
.page-hero .display { font-size: clamp(38px, 3.9vw, 56px); line-height: 1.08; }
.page-hero .hero-ipad { width: min(600px, calc(100% - 24px)); left: auto; right: 0; top: auto; bottom: -64px; }

.onpage { background: var(--paper); border-bottom: 1px solid var(--hair); }
.onpage .wrap { display: flex; align-items: center; gap: 28px; }
.onpage-label { flex: none; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.onpage ul { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.onpage ul::-webkit-scrollbar { display: none; }
.onpage a { display: inline-flex; align-items: center; min-height: 64px; padding: 0 14px; font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; transition: color .2s ease; }
.onpage a:hover { color: var(--navy); }

.fsec .split { align-items: center; }
.fsec .split-copy { grid-column: 1 / span 6; }
.fsec .split-media { grid-column: 8 / span 5; }
.fsec .split.rev .split-copy { grid-column: 7 / span 6; grid-row: 1; }
.fsec .split.rev .split-media { grid-column: 1 / span 5; grid-row: 1; }
.account-note { margin-top: 26px; font-size: 15px; color: var(--muted); padding-left: 30px; position: relative; }
.account-note::before { content: ""; position: absolute; left: 0; top: 9px; width: 16px; height: 9px; background: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 2px); }

.conditions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 56px; row-gap: 64px; }
.condition .staff-rule { margin-bottom: 26px; }
.condition h3 { margin-bottom: 10px; }
.condition p { font-size: 16px; }

.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; row-gap: 72px; }
.gallery figure img { width: 100%; margin-bottom: 16px; }
.gallery figcaption { border-top: 1px solid var(--line); padding-top: 16px; }
.gallery figcaption b { display: block; font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.gallery figcaption span { display: block; font-size: 15px; color: var(--muted); line-height: 1.5; }

.status-grid { align-items: start; }
.status-intro { grid-column: 1 / span 4; position: sticky; top: calc(var(--header) + 48px); }
.status-intro .title { margin-bottom: 24px; }
.status-intro p { margin-bottom: 18px; }
.status-foot { margin-top: 24px; font-size: 15px; color: var(--muted); }
.fsec .pull { margin-bottom: 12px; }
.status-wrap { grid-column: 6 / span 7; }
.status-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.status-table caption { text-align: left; }
.status-table th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--navy); padding: 0 0 16px; border-bottom: 1px solid var(--navy); }
.status-table th:last-child, .status-table td:last-child { text-align: right; }
.status-table td { padding: 17px 0; border-bottom: 1px solid var(--hair); color: var(--ink); line-height: 1.5; vertical-align: middle; }
.status-table td + td { padding-left: 24px; white-space: nowrap; }
.status { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--navy); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--gold); }
.status.planned { color: var(--muted); font-weight: 500; }
.status.planned::before { background: transparent; border: 1.5px solid var(--muted); width: 7px; height: 7px; }

/* ---------- Brand mark (inline SVG, follows the theme) ---------- */

.brand .mark { width: 30px; height: 30px; flex: none; display: block; }
.mark rect { fill: currentColor; }
.mark .mark-c { fill: var(--gold); }
/* pages that still use the <img> mark get the white mark at night */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand img[src$="hymnphony-mark-color.svg"] { content: url("../assets/hymnphony-mark-white.svg"); }
}
:root[data-theme="dark"] .brand img[src$="hymnphony-mark-color.svg"] { content: url("../assets/hymnphony-mark-white.svg"); }

/* gold strokes and fills written into inline icons follow the theme gold */
svg [stroke="#C99A3F"] { stroke: var(--gold); }
svg [fill="#C99A3F"] { fill: var(--gold); }

/* ---------- Theme switch (sun / moon) ---------- */

.theme-toggle {
  flex: none; position: relative;
  width: 44px; height: 44px; border-radius: 999px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--paper); color: var(--navy);
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.theme-toggle:hover { border-color: var(--navy); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .i-moon { display: var(--show-moon); }
.theme-toggle .i-sun { display: var(--show-sun); }
.site-header .theme-toggle { margin: 0 -24px 0 -16px; }
.mobile-menu .m-theme {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding-bottom: 12px;
  font-size: 15px; font-weight: 500; color: var(--muted);
}

/* ---------- Header on scroll ---------- */

.site-header { transition: box-shadow .3s ease; }
.site-header.is-scrolled { box-shadow: var(--shadow-soft); }
.scroll-progress {
  position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; pointer-events: none;
  background: var(--gold); transform: scaleX(0); transform-origin: 0 50%;
}

/* ---------- FAQ: the answer settles in when opened ---------- */

.faq-list details[open] .answer { animation: answer-in .45s var(--ease-out) both; }
@keyframes answer-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Scroll animation ----------
   site.js puts .anim on <html> (only when JavaScript runs and motion is allowed), marks elements with .rv
   (rise and fade), .draw (staff lines drawing in from the left) and .px (parallax), and adds .in on entry.
   Without JavaScript none of these classes exist, so nothing is ever hidden. */

.anim .rv {
  opacity: 0; transform: translate3d(0, 26px, 0);
  transition: opacity .8s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: var(--rv-delay, 0s);
}
.anim .rv.rv-fade { transform: none; }
.anim .rv.in { opacity: 1; transform: none; }

/* staff lines draw in from the left: their line pattern grows from zero width (the box itself stays put,
   so it can still be observed); a closing barline (::after) appears once the lines have arrived */
.anim .draw { background-size: 0% 100% !important; background-repeat: no-repeat !important; transition: background-size 1.5s var(--ease-draw); transition-delay: var(--rv-delay, 0s); }
.anim .draw.in { background-size: 100% 100% !important; }
.anim .draw::after { opacity: 0; transition: opacity .5s ease calc(var(--rv-delay, 0s) + 1.2s); }
.anim .draw.in::after { opacity: 1; }

/* small details that draw with their element */
.anim .eyebrow.rv::before { clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--ease-draw) calc(var(--rv-delay, 0s) + .15s); }
.anim .eyebrow.rv.in::before { clip-path: inset(0 0 0 0); }
.anim .stand.rv::before { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s var(--ease-draw) calc(var(--rv-delay, 0s) + .2s); }
.anim .stand.rv.in::before { clip-path: inset(0 0 0 0); }
.anim .feature.rv::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease-draw) calc(var(--rv-delay, 0s) + .25s); }
.anim .feature.rv.in::before { transform: none; }
.anim .points .rv::before { transform: scaleY(0); transition: transform .5s var(--ease-out) calc(var(--rv-delay, 0s) + .3s); }
.anim .points .rv.in::before { transform: none; }

.px { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .anim .rv, .anim .draw, .anim .rv::before, .anim .draw::after { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .anim .draw { background-size: 100% 100% !important; }
  .px { transform: none !important; }
  .faq-list details[open] .answer { animation: none; }
  .scroll-progress { display: none; }
}
/* motion switched off by the page (<html data-motion="off">, used by the /admin editor) */
[data-motion="off"] .fade-in, [data-motion="off"] .faq-list details[open] .answer { animation: none; }
[data-motion="off"] .scroll-progress { display: none; }

@media print {
  .anim .rv, .anim .draw, .anim .rv::before, .anim .draw::after { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .anim .draw { background-size: 100% 100% !important; }
  .scroll-progress { display: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  :root { --gap: 24px; }
  .header-inner { gap: 28px; }
  .site-header .theme-toggle { margin: 0 -12px 0 -8px; }
  .nav a { padding: 0 10px; }
  .hero-iphone { width: 212px; }
  .features, .conditions { column-gap: 40px; }
  .rail { gap: 20px; }
  .onpage-label { display: none; }
  .onpage .wrap { padding-top: 8px; padding-bottom: 8px; }
  .onpage ul { margin-left: -12px; }
  .onpage a { min-height: 48px; padding: 0 12px; }
  .footer-top { display: block; }
  .footer-brand { margin-bottom: 56px; }
}

@media (max-width: 1040px) {
  .nav, .header-cta, .site-header .theme-toggle { display: none; }
  .menu-toggle { display: inline-flex; }
}

@media (max-width: 960px) {
  :root { --gutter: 32px; --section: 96px; }
  .hero-copy, .page-hero .hero-copy { grid-column: 1 / -1; padding: 72px 0 40px; }
  .hero-media { grid-column: 1 / -1; height: 560px; }
  .hero-ipad, .page-hero .hero-ipad { width: min(470px, 72%); left: auto; right: 0; top: auto; bottom: -64px; }
  .hero-iphone { left: 0; top: auto; bottom: 0; width: 210px; }
  .head, .rail-head { display: block; margin-bottom: 56px; }
  .head-side, .rail-head .head-side { margin-top: 24px; max-width: 36em; }
  .split, .fsec .split { display: flex; flex-direction: column; }
  .split-media, .split.rev .split-media, .fsec .split-media, .fsec .split.rev .split-media { order: 2; width: 100%; max-width: 480px; margin: 56px auto 0; }
  .fsec .split-media.is-phone-media { max-width: 420px; }
  .fsec .split-media.is-phone-media img { max-width: 280px; }
  .features, .conditions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .views { column-gap: 24px; }
  .view-media { height: 360px; }
  .views-staff { top: 320px; }
  .who-intro, .faq-intro, .status-intro { position: static; margin-bottom: 48px; }
  .who, .faq-grid, .status-grid { display: block; }
  .pillars { column-gap: 32px; margin-top: 88px; }
  .closing-copy { grid-column: 1 / -1; padding: 96px 0 56px; }
  .closing-art { grid-column: 1 / -1; margin-bottom: 96px; }
  .closing-mark { left: 62%; }
  .footer-top { display: block; }
  .footer-brand { margin-bottom: 56px; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rail { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 24px; }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; --section: 80px; --header: 68px; }
  body { font-size: 16px; }
  .wordmark { font-size: 21px; }
  .brand img, .brand .mark { width: 28px; height: 28px; }
  .display { font-size: 40px; }
  .display .sub { font-size: 23px; margin-top: 14px; }
  .title { font-size: 30px; }
  .lede { font-size: 17px; }
  .pull { font-size: 25px; }
  .eyebrow { margin-bottom: 20px; }
  .hero-copy, .page-hero .hero-copy { padding: 52px 0 36px; }
  .hero-copy .lede { margin-bottom: 32px; }
  .stores { flex-direction: column; align-items: stretch; }
  .store { justify-content: center; }
  .hero-media { height: 400px; }
  .hero-ipad, .page-hero .hero-ipad { width: 78%; right: 0; bottom: -40px; }
  .hero-iphone { width: 138px; left: 0; top: auto; bottom: 0; }
  .hero-staff { height: 41px; background: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 10px); }
  .measure-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .measure-row::after { display: none; }
  .measure-row li { padding: 26px 18px 28px; }
  .measure-row li:nth-child(2) { border-right-color: var(--line); }
  .measure-row li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .measure-row li:last-child { border-right-color: var(--line); }
  .measure-row strong { font-size: 24px; }
  .measure-row span { font-size: 14px; }
  .split-copy .title { margin-bottom: 20px; }
  .features, .conditions { grid-template-columns: 1fr; row-gap: 0; }
  .feature { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 18px; padding: 26px 0 28px; }
  .feature .icon { grid-row: 1 / span 2; width: 28px; height: 28px; margin: 0; }
  .feature h3 { margin-bottom: 6px; }
  .condition { padding-bottom: 36px; }
  .views { grid-template-columns: 1fr; row-gap: 64px; }
  .views-staff { display: none; }
  .view-media { height: 380px; position: relative; margin-bottom: 28px; }
  .view-media::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 41px;
    background: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 10px);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 25%, #000 75%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 25%, #000 75%, transparent);
  }
  .view-media img { position: relative; }
  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 16px; }
  .rail figure img, .gallery figure img { margin-bottom: 14px; }
  .rail figcaption, .gallery figcaption { padding-top: 12px; }
  .rail figcaption b, .gallery figcaption b { font-size: 15px; }
  .rail figcaption span, .gallery figcaption span { font-size: 14px; }
  .rail-head { margin-bottom: 40px; }
  .who-list li { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .faq-list summary { font-size: 17px; min-height: 68px; }
  .faq-list .answer { padding-right: 0; font-size: 16px; }
  .closing-copy { padding: 80px 0 48px; }
  .closing-art { height: 97px; margin-bottom: 80px; }
  .closing-staff { background: repeating-linear-gradient(to bottom, rgba(255,255,255,.28) 0 1px, transparent 1px 24px); }
  .closing-mark { width: 112px; height: 112px; left: 58%; }
  .site-footer { padding-top: 72px; }
  .footer-cols { gap: 36px 20px; }
  .footer-cols li a { min-height: 44px; white-space: normal; line-height: 1.35; }
  .after-grid { margin-top: 36px; }
  .footer-cols h2 { margin-bottom: 8px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .page-hero .display { font-size: 34px; }
  .pillars { grid-template-columns: 1fr; row-gap: 40px; margin-top: 72px; }
  .gallery { gap: 44px 16px; }
  .onpage .wrap { padding-top: 10px; padding-bottom: 10px; }
  .onpage ul { gap: 0 2px; }
  .onpage a { min-height: 44px; padding: 0 12px; }
  .status-table td { font-size: 15px; }
  .status-table td + td { padding-left: 12px; }
  .status { font-size: 13px; gap: 8px; }
  .points li { font-size: 16px; }
}

/* ---------- No horizontal lines (the owner's request, 13 Oct 2026) ----------
   The five-line staff motif, the drawn rules and the hairlines above features and clauses are all switched off.
   Spacing takes their place. */
.staff-rule, .hero-staff, .views-staff, .closing-staff, .cta-staff, .key-staff, .step-staff, .bar-staff,
.divider { display: none !important; }
.eyebrow::before, .eyebrow.light::before, .stand::before, .feature::before, .clause::before,
.account-note::before { display: none !important; content: none !important; }
.eyebrow { gap: 0 !important; }
.feature, .clause, .pillar, .condition { border-top: 0 !important; }
.feature { padding-top: 8px; }
/* ...and the same on the inner pages: no rule above cards, clauses, items or notices. */
.contact-card::before, .platform::before, .notice::before, .item::before, .aud::before, .clause::before { display: none !important; content: none !important; }
.contact-card, .platforms, .platform, .platform + .platform, .notice, .item, .aud, .clause, .toc ol,
.legal-meta dl > div, .taps { border-top: 0 !important; }
.scroll-progress { display: none !important; }

/* the light/dark switch: one contrast icon (never a sun and moon) that turns over with the mode */
.theme-toggle .i-contrast { display: block; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
:root[data-theme="dark"] .theme-toggle .i-contrast { transform: rotate(180deg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .i-contrast { transform: rotate(180deg); } }