/* ==========================================================================
   NUVE — nuvesound.com

   Brand kept: the logo, the smoke, Bebas Neue + Questrial, monochrome,
   hairline restraint. What changed is how they are used.

   Roles are strict, because Questrial ships a single weight — hierarchy
   comes from the caps/lowercase contrast between the two faces, plus size
   and colour, never from faked bolding.
     Bebas Neue  -> every heading, label and button
     Questrial   -> every piece of running text
   ========================================================================== */

:root {
  --paper:     #FFFFFF;
  --paper-2:   #F6F8F7;
  --ink:       #0D0F0E;
  --body:      #34393A;
  --muted:     #6E7472;
  --hair:      #E3E7E4;
  --hair-2:    #EFF2F0;
  --dark:      #0C0E0D;
  --dark-2:    #151817;
  --on-dark:   rgba(255,255,255,.88);
  --on-dark-2: rgba(255,255,255,.64);

  --head: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --text: "Questrial", "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;

  --maxw: 1240px;
  --edge: clamp(20px, 5vw, 64px);
  --head-h: 68px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.band--dark :focus-visible, .foot :focus-visible, .hero :focus-visible { outline-color: #fff; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--edge); }

/* ---------- type roles ---------- */

h1, h2, h3, h4 {
  font-family: var(--head);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
  line-height: 1;
  letter-spacing: 0.005em;
}

.display   { font-size: clamp(2.1rem, 5.4vw, 3.6rem); line-height: 0.98; }
.display-s { font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.02; }
h3         { font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: 0.02em; }

.eyebrow {
  font-family: var(--head);
  font-size: 0.875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 20px;
  line-height: 1.4;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
.lede { font-size: 1.125rem; line-height: 1.6; max-width: 58ch; }
.small { font-size: 0.9375rem; }
.dim { color: var(--muted); }

/* ---------- bands ---------- */

.band { padding-block: clamp(64px, 9vw, 128px); }
.band--paper2 { background: var(--paper-2); }
.band--dark { background: var(--dark-2); color: var(--on-dark); }
.band--dark h1, .band--dark h2, .band--dark h3, .band--dark h4 { color: #fff; }
.band--dark .eyebrow { color: var(--on-dark-2); }
.band--dark .lede { color: var(--on-dark); }
.band--flush { padding-top: 0; }

/* ---------- sticky header ---------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.93);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.site-head.is-stuck {
  border-bottom-color: var(--hair);
  box-shadow: 0 1px 16px rgba(13,15,14,.05);
}
.head-in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--edge);
  min-height: var(--head-h);
  display: flex;
  align-items: center;
  gap: 24px;
  position: relative;
}
.head-logo { display: block; margin-right: auto; line-height: 0; }
.head-logo img { height: 30px; width: auto; }

.site-nav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 32px); }
.site-nav a {
  font-family: var(--head);
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--body);
  text-decoration: none;
  padding-block: 6px;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.site-nav a.btn { color: var(--ink); border: 1px solid var(--ink); }
.site-nav a.btn:hover { color: #fff; }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  background: none;
  border: 1px solid var(--hair);
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--ink); position: relative; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--ink);
}
.nav-toggle span::before { top: -5px; }
.nav-toggle span::after { top: 5px; }

@media (max-width: 880px) {
  .nav-toggle { display: grid; }
  .site-nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--paper);
    border-bottom: 1px solid var(--hair);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px var(--edge) 22px;
    display: none;
  }
  .site-head.nav-open .site-nav { display: flex; }
  .site-nav a { padding-block: 15px; border-bottom: 1px solid var(--hair-2); }
  .site-nav a:hover { border-bottom-color: var(--hair-2); }
  .site-nav a.btn { margin-top: 16px; justify-content: center; }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  background: var(--dark) url("../img/nuve/smoke.webp") center / cover no-repeat;
  color: #fff;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,14,13,.5) 0%, rgba(12,14,13,.15) 36%, rgba(12,14,13,.8) 100%);
}
.hero-in {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(64px, 11vh, 140px) var(--edge) clamp(56px, 9vh, 110px);
}
.hero-logo { width: clamp(140px, 21vw, 248px); margin-bottom: clamp(30px, 5vh, 54px); }
.hero h1 {
  color: #fff;
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: 0.96;
  max-width: 17ch;
  margin: 0 0 22px;
}
.hero .lede { color: rgba(255,255,255,.82); max-width: 52ch; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: clamp(28px, 4.5vh, 42px); }
.hero-meta {
  margin-top: clamp(38px, 6.5vh, 64px);
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.16);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px clamp(18px, 3vw, 40px);
}
@media (max-width: 820px) { .hero-meta { grid-template-columns: 1fr; gap: 10px; } }
.hero-meta span {
  font-family: var(--head);
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  font-family: var(--head);
  font-size: 1.0625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .16s, color .16s, border-color .16s;
}
.btn:hover { background: var(--ink); color: #fff; }
.btn--solid { background: var(--ink); color: #fff; }
.btn--solid:hover { background: #000; border-color: #000; }

.btn--light { border-color: rgba(255,255,255,.5); color: #fff; background: transparent; }
.btn--light:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn--light-solid { background: #fff; color: var(--ink); border-color: #fff; }
.btn--light-solid:hover { background: rgba(255,255,255,.85); border-color: rgba(255,255,255,.85); color: var(--ink); }

.btn--sm { min-height: 44px; font-size: 0.9375rem; padding: 0 20px; }

.textlink {
  font-family: var(--head);
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hair);
  padding-bottom: 3px;
  transition: border-color .16s;
  display: inline-block;
}
.textlink:hover { border-bottom-color: var(--ink); }
.textlink::after { content: " \2192"; }
.band--dark .textlink { color: #fff; border-bottom-color: rgba(255,255,255,.3); }
.band--dark .textlink:hover { border-bottom-color: #fff; }

/* ---------- section heads ---------- */

/* ---------- intro ---------- */

.intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.intro-copy { max-width: 54ch; }
.intro-copy p { margin-bottom: 1.15em; font-size: 1.0625rem; }
@media (max-width: 940px) { .intro { grid-template-columns: 1fr; } }

/* ---------- grids ---------- */

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4.5vw, 64px); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

/* ---------- services ---------- */

.svc { display: flex; flex-direction: column; }
.svc p { flex: 1; }
.svc-media { margin-bottom: 26px; overflow: hidden; }
.svc-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .5s ease; }
.svc:hover .svc-media img { transform: scale(1.03); }
.svc-n {
  font-family: var(--head);
  font-size: 0.8125rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--hair);
}
.svc h3 { margin-bottom: 12px; }
.svc p { font-size: 0.9375rem; }
.svc .textlink { margin-top: 20px; font-size: 0.875rem; align-self: flex-start; }

/* ---------- app blocks ---------- */

.app { display: flex; flex-direction: column; }
.app-top {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--hair);
}
.app-top h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
.tag {
  font-family: var(--head);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--hair);
  padding: 4px 10px;
  white-space: nowrap;
}
.tag--live { color: var(--ink); border-color: var(--ink); }
.app-claim { font-size: 1.0625rem; color: var(--ink); margin-bottom: 16px; }
.feats { list-style: none; margin: 0 0 26px; padding: 0; }
.feats li {
  font-size: 0.9375rem;
  padding: 11px 0;
  border-bottom: 1px solid var(--hair-2);
  display: flex;
  gap: 12px;
}
.feats li::before {
  content: "";
  flex: none;
  width: 8px; height: 1px;
  background: var(--muted);
  margin-top: 0.82em;
}
.app-actions { margin-top: auto; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* launch day: delete `is-prelaunch` from the .app and the button appears */
.is-prelaunch .store-link { display: none; }
.app:not(.is-prelaunch) .tag--soon { display: none; }

/* ---------- app screens ---------- */

.screens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 34px); }
.screens figure { margin: 0; }
.screens img {
  width: 100%;
  height: auto;
  aspect-ratio: 620 / 1347;
  border-radius: 18px;
  border: 1px solid var(--hair);
  background: var(--dark);
}
.band--dark .screens img { border-color: rgba(255,255,255,.14); }
.screens figcaption {
  font-family: var(--head);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 14px;
}
.band--dark .screens figcaption { color: var(--on-dark-2); }
@media (max-width: 860px) { .screens { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- split ---------- */

@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.quoteline {
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--on-dark-2);
  border-left: 1px solid rgba(255,255,255,.22);
  padding-left: 20px;
  margin-top: 28px;
  max-width: 46ch;
}

/* ---------- testimonial carousel ---------- */

.car { position: relative; }
.car-track {
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.car-track::-webkit-scrollbar { display: none; }
.car-slide {
  /* two slides fit the field exactly on wide screens, so no quote is cut mid-word
     at the right edge; on narrow screens one slide with a peek of the next */
  flex: 0 0 calc((100% - clamp(20px, 3vw, 40px)) / 2);
  scroll-snap-align: start;
  border-top: 1px solid var(--hair);
  padding-top: 28px;
  margin: 0;              /* blockquote carries a UA margin of 1em 40px */
}
.car-q { font-size: 1.0625rem; line-height: 1.68; color: var(--ink); margin: 0 0 24px; }
.car-who { display: flex; align-items: center; gap: 14px; }
.car-who img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; background: var(--hair-2); }
.car-name {
  font-family: var(--head);
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.2;
}
.car-role { font-size: 0.8125rem; color: var(--muted); line-height: 1.3; }
@media (max-width: 760px) { .car-slide { flex-basis: 86%; } }

.car-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 36px; flex-wrap: wrap; }
.car-btns { display: flex; gap: 10px; }
.car-btn {
  width: 46px; height: 46px;
  border: 1px solid var(--hair);
  background: none; cursor: pointer;
  display: grid; place-items: center;
  font-size: 1.05rem; color: var(--ink);
  transition: border-color .16s, background-color .16s, color .16s;
}
.car-btn:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.car-dots { display: flex; gap: 8px; }
.car-dot { width: 24px; height: 2px; border: 0; padding: 0; background: var(--hair); cursor: pointer; transition: background-color .2s; }
.car-dot[aria-selected="true"] { background: var(--ink); }

/* ---------- notify form ---------- */

.notify { max-width: 460px; }
.notify-row { display: flex; }
.notify input[type="email"] {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--text); font-size: 1rem;
  min-height: 52px; padding: 0 18px;
  border: 1px solid rgba(255,255,255,.28);
  border-right: 0;
  background: rgba(255,255,255,.06);
  color: #fff;
}
.notify input::placeholder { color: rgba(255,255,255,.42); }
.notify .fine { font-size: 0.8125rem; color: var(--on-dark-2); margin-top: 14px; }
@media (max-width: 520px) {
  .notify-row { flex-wrap: wrap; }
  .notify input[type="email"] { border-right: 1px solid rgba(255,255,255,.28); flex-basis: 100%; }
  .notify .btn { margin-top: 10px; width: 100%; }
}

/* ---------- footer ---------- */

.foot { background: var(--dark); color: var(--on-dark); padding-block: clamp(56px, 8vw, 96px) 40px; }
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 64px);
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot-logo { width: 128px; margin-bottom: 22px; }
.foot .foot-h { color: #fff; font-size: 0.875rem; letter-spacing: 0.2em; margin-bottom: 18px; }
.foot-list { list-style: none; margin: 0; padding: 0; }
.foot-list li { margin-bottom: 11px; }
.foot-list a {
  font-size: 0.9375rem; color: var(--on-dark); text-decoration: none;
  border-bottom: 1px solid transparent; transition: color .15s, border-color .15s;
}
.foot-list a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.4); }
.foot-base {
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding-top: 26px;
  font-family: var(--head); font-size: 0.8125rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--on-dark-2);
}
.foot-base a { text-decoration: none; }
.foot-base a:hover { color: #fff; }

/* ---------- inner page header ---------- */

.pagehead { border-bottom: 1px solid var(--hair); padding-block: clamp(48px, 7vw, 84px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .car-track { scroll-behavior: auto; }
}

/* disabled carousel arrows must read as disabled */
.car-btn:disabled { opacity: .3; cursor: default; }
.car-btn:disabled:hover { border-color: var(--hair); background: none; color: var(--ink); }

/* the pre-launch app shows "Get notified"; once shipped it shows Download */
.app:not(.is-prelaunch) .notify-jump { display: none; }

/* ---------- inline product video (same frame as the screens) ---------- */

.screens video,
.reels video {
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 1304;
  border-radius: 18px;
  border: 1px solid var(--hair);
  background: var(--dark);
  display: block;
  object-fit: cover;
}
.band--dark .screens video, .band--dark .reels video { border-color: rgba(255,255,255,.14); }

.reels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  max-width: 860px;
}
.reels figure { margin: 0; }
.reels figcaption {
  font-family: var(--head);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 14px;
}
@media (max-width: 720px) { .reels { grid-template-columns: 1fr 1fr; } }

/* app identity row */
.app-id { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.app-id img { width: 62px; height: 62px; border-radius: 14px; flex: none; }

/* price table */
@media (max-width: 780px) { .tiers { grid-template-columns: 1fr 1fr; } }
.tier { border-top: 1px solid var(--hair); padding-top: 20px; }
.tier h4 { font-size: 0.875rem; letter-spacing: 0.2em; color: var(--muted); margin-bottom: 12px; }
.tier .amt { font-family: var(--head); font-size: clamp(1.6rem,3vw,2.1rem); color: var(--ink); line-height: 1; }
.tier .per { font-size: 0.875rem; color: var(--muted); margin-top: 8px; }

/* app icon beside the app name */
.app-top .app-ico { width: 40px; height: 40px; border-radius: 9px; flex: none; align-self: center; }
.app-id img { border-radius: 14px; }

/* ---------- legal / long-form pages ---------- */

.legal { max-width: 68ch; }
.legal h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  margin: 0 0 14px;
}
.legal section { padding-block: clamp(30px, 4vw, 44px) 0; }
.legal section + section { border-top: 1px solid var(--hair); margin-top: clamp(30px, 4vw, 44px); }
.legal p { margin-bottom: 1.1em; }
.legal ul { list-style: none; margin: 0 0 1.1em; padding: 0; }
.legal ul li {
  padding: 10px 0 10px 18px;
  border-bottom: 1px solid var(--hair-2);
  position: relative;
  font-size: 0.9688rem;
}
.legal ul li::before {
  content: ""; position: absolute; left: 0; top: 1.15em;
  width: 8px; height: 1px; background: var(--muted);
}
.legal ul li strong { color: var(--ink); }
.legal .updated {
  font-family: var(--head);
  font-size: 0.875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0;
}
.legal-nav {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: clamp(40px, 5vw, 60px);
  padding-top: 28px;
  border-top: 2px solid var(--ink);
}

/* unconfirmed content — must be resolved before publishing */
.todo {
  display: inline-block;
  background: #FFF6D6;
  border: 1px dashed #C2971F;
  color: #6B5210;
  padding: 1px 7px;
  font-family: var(--head);
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
}
.todo-note {
  background: #FFF6D6;
  border: 1px solid #E0C878;
  border-left: 3px solid #C2971F;
  padding: 18px 20px;
  margin: 0 0 clamp(30px,4vw,44px);
  max-width: 68ch;
}
.todo-note p { color: #5C460E; font-size: 0.9375rem; margin: 0; }
.todo-note p + p { margin-top: 10px; }
.todo-note strong { color: #3D2E06; }

/* ---------- DAW compatibility strip ---------- */
.daws {
  display: flex; flex-wrap: wrap; gap: 10px 0;
  list-style: none; margin: 24px 0 0; padding: 0;
}
.daws li {
  font-family: var(--head);
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.daws li:not(:last-child)::after { content: "·"; color: var(--muted); margin: 0 12px; }

/* ---------- big stat ---------- */
.stat { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.stat-n {
  font-family: var(--head);
  font-size: clamp(3.4rem, 11vw, 7rem);
  line-height: 0.86;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.stat-t { font-size: 1.125rem; max-width: 26ch; color: var(--body); }

/* ---------- numbered steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(22px,3vw,40px); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.step-n {
  font-family: var(--head);
  font-size: 0.8125rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rec, var(--muted));
  color: var(--muted);
  display: block;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--hair);
}
.step h3 { margin-bottom: 10px; }
.step p { font-size: 0.9375rem; }

/* ---------- feature block ---------- */
.fblock + .fblock { margin-top: clamp(40px,5vw,64px); padding-top: clamp(40px,5vw,64px); border-top: 1px solid var(--hair); }
.fblock-label {
  font-family: var(--head); font-size: 0.8125rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 14px;
}
.fblock h3 { font-size: clamp(1.3rem,2.6vw,1.75rem); margin-bottom: 14px; }

/* ---------- export formats ---------- */
.formats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(20px,2.6vw,34px); }
@media (max-width: 900px) { .formats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .formats { grid-template-columns: 1fr; } }
.fmt { border-top: 1px solid var(--hair); padding-top: 20px; }
.fmt-badge {
  font-family: var(--head); font-size: 0.6875rem; letter-spacing: 0.18em;
  text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--hair);
  color: var(--muted); display: inline-block; margin-bottom: 14px;
}
.fmt-badge.is-pro { color: var(--ink); border-color: var(--ink); }
.fmt-ext {
  font-family: var(--head); font-size: 1.5rem; color: var(--ink);
  letter-spacing: 0.02em; display: block; margin-bottom: 4px;
}
.fmt h3 { font-size: 0.875rem; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 12px; }
.fmt p { font-size: 0.9063rem; margin: 0; }

/* ---------- pricing tiers with feature lists ---------- */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(20px,2.6vw,32px); }
@media (max-width: 1000px) { .plans { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .plans { grid-template-columns: 1fr; } }
.plan { border-top: 2px solid var(--hair); padding-top: 22px; display: flex; flex-direction: column; }
.plan.is-best { border-top-color: var(--ink); }
.plan-name { font-family: var(--head); font-size: 1.25rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.plan-note { font-size: 0.8125rem; color: var(--muted); margin: 4px 0 14px; }
.plan-amt { font-family: var(--head); font-size: clamp(1.9rem,3.4vw,2.5rem); color: var(--ink); line-height: 1; }
.plan-per { font-size: 0.875rem; color: var(--muted); margin: 6px 0 18px; }
.plan-desc { font-size: 0.9063rem; margin-bottom: 16px; }
.plan ul { list-style: none; margin: 0 0 18px; padding: 0; }
.plan ul li {
  font-size: 0.875rem; line-height: 1.5; padding: 9px 0 9px 16px;
  border-top: 1px solid var(--hair-2); position: relative; color: var(--body);
}
.plan ul li::before { content: ""; position: absolute; left: 0; top: 1.1em; width: 7px; height: 1px; background: var(--muted); }
.plan .plan-foot { margin-top: auto; font-family: var(--head); font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq { max-width: 74ch; }
.faq details { border-top: 1px solid var(--hair); }
.faq details:last-of-type { border-bottom: 1px solid var(--hair); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 20px 36px 20px 0; position: relative;
  font-family: var(--head); font-size: clamp(1.05rem,2vw,1.25rem);
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--text); font-size: 1.3rem; color: var(--muted); line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq summary:hover { color: var(--muted); }
.faq .answer { padding: 0 0 24px; font-size: 0.9688rem; }
.faq .answer p { margin-bottom: 0.9em; }
.faq .answer ul { list-style: none; margin: 0 0 .9em; padding: 0; }
.faq .answer ul li { padding: 8px 0 8px 16px; border-top: 1px solid var(--hair-2); position: relative; }
.faq .answer ul li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 7px; height: 1px; background: var(--muted); }

/* ---------- iPad / iPhone reel variants (same recordings, device-matched) ---------- */
/* The originals were captured twice: 600x1304 on iPhone and 1440x1080 on iPad.
   Narrow viewports get the phone capture, wide viewports the iPad one, so the
   frame in the picture matches the frame the visitor is holding. */
.reels .reel-pad { display: none; }
.reels video.reel-pad {
  aspect-ratio: 4 / 3;
  border-radius: 14px;
}
@media (min-width: 900px) {
  .reels { grid-template-columns: repeat(3, minmax(0,1fr)); max-width: 1100px; }
  .reels .reel-phone { display: none; }
  .reels .reel-pad { display: block; }
}

/* ---------- four feels (tall UI crops, 480x1044) ---------- */
.feels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(14px, 2vw, 26px);
  max-width: 720px;
  margin-top: 28px;
}
.feels figure { margin: 0; }
.feels img {
  width: 100%; height: auto;
  aspect-ratio: 480 / 1044;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--hair);
  background: var(--paper);
}
.feels figcaption { margin-top: 13px; }
.feels figcaption b {
  display: block; font-weight: 400;
  font-family: var(--head); font-size: 0.9375rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink);
}
.feels figcaption span {
  display: block; margin-top: 6px;
  font-size: 0.8125rem; line-height: 1.45; color: var(--body);
}
@media (max-width: 640px) { .feels { grid-template-columns: 1fr 1fr; max-width: 420px; } }

/* ---------- preset card + 16-step grid ---------- */
.presetrow {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  margin-top: 30px;
}
@media (max-width: 780px) { .presetrow { grid-template-columns: 1fr; } }

.preset {
  border: 1px solid var(--hair);
  border-radius: 16px;
  background: var(--paper);
  padding: 20px 20px 18px;
}
.band--paper2 .preset { background: var(--paper); }
.preset-name {
  font-family: var(--head); font-size: 1.125rem; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--ink); line-height: 1;
}
.preset-tag {
  display: inline-block; margin-top: 10px;
  font-family: var(--head); font-size: 0.6875rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--hair); border-radius: 999px; padding: 5px 11px;
}
.preset-desc { font-size: 0.875rem; line-height: 1.55; color: var(--body); margin: 14px 0 0; }
.preset-meta {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair-2);
  font-family: var(--head); font-size: 0.6875rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}

.stepwrap { overflow-x: auto; }
.stepgrid {
  display: grid;
  grid-template-columns: 46px repeat(16, minmax(13px, 1fr));
  gap: 3px;
  align-items: center;
  min-width: 340px;
}
.stepgrid + .stepgrid { margin-top: 3px; }
.steplabel {
  font-family: var(--head); font-size: 0.6875rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); line-height: 1;
  padding-right: 6px; text-align: right;
}
.cell {
  aspect-ratio: 1; border-radius: 3px;
  background: var(--hair-2); border: 1px solid transparent;
}
.cell.accent { background: var(--ink); }
.cell.normal { background: var(--body); }
.cell.ghost  { background: transparent; border-color: var(--muted); }
/* beat ruler: same column track as the grid, so 1/2/3/4 sit over the downbeats */
.stepruler {
  display: grid;
  grid-template-columns: 46px repeat(16, minmax(13px, 1fr));
  gap: 3px;
  min-width: 340px;
  margin-bottom: 7px;
}
.stepruler span {
  font-family: var(--head); font-size: 0.6875rem; letter-spacing: 0.1em;
  color: var(--muted); line-height: 1; text-align: center;
}

.steplegend {
  display: flex; gap: 20px; flex-wrap: wrap; margin-top: 18px;
  font-family: var(--head); font-size: 0.6875rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.steplegend span { display: inline-flex; align-items: center; gap: 8px; }
.steplegend i { width: 11px; height: 11px; border-radius: 3px; display: block; border: 1px solid transparent; }
.steplegend i.accent { background: var(--ink); }
.steplegend i.normal { background: var(--body); }
.steplegend i.ghost  { border-color: var(--muted); }

/* ---------- split feature block: copy one side, the phone the other ---------- */
/* alternate which side the phone sits on down the run */
@media (max-width: 820px) {
}

/* ---------- rhythm section sub-blocks ---------- */
.rhythm + .rhythm { margin-top: clamp(44px,5vw,70px); padding-top: clamp(44px,5vw,70px); border-top: 1px solid var(--hair); }
.rhythm-note { font-size: 0.9375rem; line-height: 1.6; color: var(--body); margin-top: 22px; max-width: 62ch; }

/* ============================================================
   TWO-COLUMN SECTION SYSTEM
   The page was one narrow left column in a 1240px field, which
   left the right half empty and pushed everything into a very
   long stack. These two primitives put the naming on the left
   and the substance on the right, so a section reads as one
   object instead of a run of fragments.
   ============================================================ */

/* --- section header: title left, lede right, rule underneath --- */
.shead {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
  padding-bottom: clamp(24px, 3vw, 40px);
  border-bottom: 1px solid var(--hair);
  margin-bottom: clamp(36px, 5vw, 64px);
}
.shead h2 { margin: 8px 0 0; }
.shead .lede { margin: 0; max-width: 54ch; }
.band--dark .shead { border-bottom-color: rgba(255,255,255,.16); }

/* --- content block: sticky naming rail left, content right --- */
.rx {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}
.rx-intro { position: sticky; top: calc(var(--head-h) + 24px); align-self: start; }
.rx-intro h3, .rx-intro .rx-h { font-size: clamp(1.3rem, 2.3vw, 1.65rem); margin: 10px 0 14px; }
.rx-intro > p { font-size: 0.9375rem; line-height: 1.6; color: var(--body); }
.band--dark .rx-intro > p { color: var(--on-dark); }
.rx-rule { height: 1px; background: var(--hair); margin: 22px 0; }
.band--dark .rx-rule { background: rgba(255,255,255,.16); }
.rx-spec {
  font-family: var(--head); font-size: 0.6875rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); line-height: 1.9;
}
.rx + .rx { margin-top: clamp(44px, 6vw, 84px); padding-top: clamp(44px, 6vw, 84px); border-top: 1px solid var(--hair); }
.band--paper2 .rx + .rx { border-top-color: var(--hair); }
.rx .screens { max-width: none; }
.rx .presetrow { margin-top: 0; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
.rx > .rx-body > * + * { margin-top: clamp(24px, 3vw, 38px); }

@media (max-width: 900px) {
  .shead, .rx { grid-template-columns: 1fr; gap: 18px; }
  .shead { align-items: start; }
  .rx-intro { position: static; }
  .rx { gap: clamp(24px, 4vw, 34px); }
}

/* --- app-page hero: name and headline left, promise and actions right --- */
.phead-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
}
.phead-grid .lede { margin: 0; max-width: 48ch; }
.phead-grid .hero-cta { margin-top: 28px; }

/* --- headline statistic: the number is the left rail --- */
.statrow { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.statrow .stat-n { display: block; font-family: var(--head); font-size: clamp(4rem, 9vw, 8.5rem); line-height: 0.82; color: var(--ink); letter-spacing: -0.01em; }
.statrow .stat-t { font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1.3; color: var(--ink); max-width: 24ch; margin-top: 16px; }
.statrow .lede { margin: 0; }

/* --- feature row: one screenshot beside its detail list --- */
.rx-feat { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(24px, 3.5vw, 52px); align-items: center; }
.rx-feat figure { margin: 0; }
.rx-feat img { width: 100%; height: auto; aspect-ratio: 620 / 1348; border-radius: 20px; border: 1px solid var(--hair); background: var(--paper); }
.rx-feat .feats { margin: 0; }

@media (max-width: 900px) {
  .phead-grid, .statrow { grid-template-columns: 1fr; gap: 22px; align-items: start; }
  .rx-feat { grid-template-columns: 1fr; }
  .rx-feat figure { max-width: 230px; }
}

/* feels grid uses the full page now that the header sits above it */
.feels--wide { max-width: none; }

/* Section headers get the wider half — a 320px rail chops a display heading
   into four lines. Only the .rx naming rails stay narrow. */
.shead { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.statrow { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
.step h3 { font-size: clamp(1rem, 1.5vw, 1.125rem); }
@media (max-width: 900px) { .shead { grid-template-columns: 1fr; } .statrow { grid-template-columns: 1fr; } }

/* the reels sit directly above the first naming rail — give them room so the
   video caption and the block label don't read as a repeated line */
.reels + .rx { margin-top: clamp(48px, 6vw, 88px); padding-top: clamp(48px, 6vw, 88px); border-top: 1px solid var(--hair); }

/* a 300px phone next to four bullets leaves the list floating in air:
   shrink the shot, top-align the pair, and tighten the gutter */
.rx { gap: clamp(26px, 3.6vw, 56px); }
.rx-feat { grid-template-columns: minmax(0, 232px) minmax(0, 1fr); align-items: start; gap: clamp(22px, 3vw, 40px); }
.rx-feat .feats li:first-child { border-top: 0; padding-top: 0; }

/* The .rx-feat tightening above was appended after the responsive block, so it
   won the cascade at every width and left the bullet list ~100px wide on a
   phone. Restate the stacking rules last so they hold. */
@media (max-width: 900px) {
  .rx-feat { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 30px); }
  .rx-feat figure { max-width: 230px; }
  .reels + .rx { margin-top: clamp(34px, 6vw, 56px); padding-top: clamp(34px, 6vw, 56px); }
}

/* ============================================================
   SECOND PASS — the same two-column system on every page
   ============================================================ */

/* --- section header with no rule: used where the section IS the header
   (a closing call to action, a notify band, the "also from Nuve" hand-off) --- */
.shead--bare { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; align-items: start; }
.shead--bare .hero-cta { margin-top: 28px; }
.shead--bare .lede + .hero-cta { margin-top: 30px; }
.shead .lede + .small { margin-top: 14px; }
.shead .display { margin-top: 8px; }

/* a ruled section header can also carry the lede under the title on the left
   when the right half holds something other than text (a form) */
.shead > div > .lede { margin-top: 20px; }

/* --- a ruled break between stacked blocks whatever their class --- */
.rx--rule { margin-top: clamp(44px, 6vw, 84px); padding-top: clamp(44px, 6vw, 84px); border-top: 1px solid var(--hair); }
.band--dark .rx--rule, .band--dark .rx + .rx { border-top-color: rgba(255,255,255,.16); }
.band--dark .fblock-label, .band--dark .rx-spec { color: var(--on-dark-2); }
.band--dark .rx-intro > p, .band--dark .grid-2 p { color: var(--on-dark); }
.band--dark .rx-intro h3 { color: #fff; }
.band--dark .feats li { border-bottom-color: rgba(255,255,255,.12); color: var(--on-dark); }
.band--dark .feats li::before { background: var(--on-dark-2); }

/* --- the phone next to its list: centre the pair so a four-line list
   does not sit at the top of a 500px screenshot with air underneath --- */
.rx-feat { align-items: center; }
@media (max-width: 900px) { .rx-feat { align-items: start; } }

/* --- screenshot rows sized to their count: classes, not inline styles,
   so the phone breakpoints still apply --- */
.screens--2, .rx .screens--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
.screens--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.screens--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) {
  .screens--3, .screens--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* a row of three phones cannot split into two columns without an orphan,
   so on a phone it becomes a swipe strip that bleeds to the screen edge */
@media (max-width: 720px) {
  .reels, .screens--3 {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 14px;
    margin-inline: calc(-1 * var(--edge));
    padding-inline: var(--edge);
    scroll-padding-inline: var(--edge);
    max-width: none;
  }
  .reels::-webkit-scrollbar, .screens--3::-webkit-scrollbar { display: none; }
  .reels > figure, .screens--3 > figure { flex: 0 0 min(230px, 62%); scroll-snap-align: start; }
}

/* --- preset card + step grid: the .rx override above was winning at every
   width; restate the stack last so it holds on a phone --- */
@media (max-width: 780px) {
  .presetrow, .rx .presetrow { grid-template-columns: 1fr; }
}

/* --- the four steps on a dark band, without per-element inline styles --- */
.band--dark .step-n { border-bottom-color: rgba(255,255,255,.18); color: rgba(255,255,255,.52); }
.band--dark .step p { color: var(--on-dark); }

/* --- three-up facts row (a shorter cousin of .steps) --- */
.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .steps--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps--3 { grid-template-columns: 1fr; } }

/* --- page header on the paper pages: the meta strip in ink, not white --- */
.hero-meta--paper { border-top-color: var(--hair); margin-top: clamp(34px, 5vw, 52px); }
.hero-meta--paper span { color: var(--muted); }
.app-id-name { margin: 0; font-family: var(--head); text-transform: uppercase; color: var(--ink); line-height: 1; }
.app-id .eyebrow { margin: 0 0 6px; }

/* --- app cards: the price/platform line sits under the list as meta,
   not as two more bullets --- */
.app-meta {
  font-family: var(--head); font-size: 0.8125rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); line-height: 1.7;
  margin: 0 0 24px;
}

/* --- two-plan pricing (VoxCodex): same .plan anatomy, two columns --- */
.plans--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .plans--2 { grid-template-columns: 1fr; } }
.plan-note--pad { min-height: 1.3em; }

/* --- portrait pair (the studio intro): two 2:3 photos side by side --- */
.photos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 32px);
}
.photos figure { margin: 0; }
.photos img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.photos figcaption, .figcap {
  font-family: var(--head); font-size: 0.8125rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); margin-top: 14px;
}
.band--dark .photos figcaption { color: var(--on-dark-2); }
@media (max-width: 520px) { .photos { grid-template-columns: 1fr; max-width: 360px; } }

/* --- a single service photo beside its description --- */
.svc-shot { margin: 0; max-width: 420px; }
.rx-feat .svc-shot img, .svc-shot img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0; border: 0; background: var(--hair-2); }

/* --- static testimonial grid (studio page) --- */
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px) clamp(32px, 5vw, 72px); }
.quotes .car-slide { flex: none; }
@media (max-width: 760px) { .quotes { grid-template-columns: 1fr; } }

/* --- contact form --- */
.form { max-width: 620px; }
.form-row { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-family: var(--head); font-size: 0.8125rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted);
}
.field input, .field select, .field textarea {
  font-family: var(--text); font-size: 1rem; color: var(--ink);
  min-height: 52px; padding: 12px 16px;
  border: 1px solid var(--hair); background: var(--paper); border-radius: 0;
  width: 100%;
}
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.form .btn { margin-top: 6px; }
.form .fine { font-size: 0.8125rem; color: var(--muted); margin-top: 16px; }
.form-stack > * + * { margin-top: 18px; }

/* --- contact details rail --- */
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { padding: 14px 0; border-top: 1px solid var(--hair); }
.contact-list li:last-child { border-bottom: 1px solid var(--hair); }
.contact-list .k {
  display: block; font-family: var(--head); font-size: 0.75rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.contact-list a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hair); }
.contact-list a:hover { border-bottom-color: var(--ink); }

/* --- app card head: name row, then the status tag on its own line, so two
   cards with different tag lengths still share one header height --- */
.app-top { flex-direction: column; align-items: flex-start; gap: 12px; }
.app-name { display: flex; align-items: center; gap: 14px; }

/* --- tablet: a phone screenshot and its list still fit side by side, so
   keep the pair together between 600 and 900px instead of stacking --- */
@media (min-width: 601px) and (max-width: 900px) {
  .rx-feat { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); align-items: center; gap: clamp(22px, 3vw, 40px); }
  .rx-feat figure { max-width: none; }
}

/* ============================================================
   APP CARDS (homepage)
   The apps are dark, visual products; a card that is all grey text
   sells neither. Each card leads with the product on a dark panel,
   the phone rising out of the bottom edge, then names and one claim.
   ============================================================ */
.appcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 40px); }
.appcard {
  display: flex; flex-direction: column;
  border: 1px solid var(--hair); border-radius: 24px; overflow: hidden;
  background: var(--paper);
}
.appcard-visual {
  position: relative; display: block; height: clamp(260px, 30vw, 400px);
  background: var(--dark); overflow: hidden;
}
.appcard-visual::before {
  /* a soft cast of the app's own accent behind the phone */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 50% 100%, color-mix(in srgb, var(--glow, #fff) 28%, transparent), transparent 70%);
}
.appcard-visual img {
  /* anchored to the top so the rounded phone top and the app's own
     header are what you see; the bottom runs off the panel edge */
  position: absolute; left: 50%; top: clamp(28px, 3vw, 44px); transform: translateX(-50%);
  width: clamp(190px, 19vw, 250px); height: auto; aspect-ratio: 620 / 1348;
  border-radius: 30px; border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 30px 60px rgba(0,0,0,.5);
  transition: transform .5s ease;
}
.appcard-visual:hover img { transform: translateX(-50%) translateY(-6px); }
.appcard .app-actions .textlink { font-size: 0.8125rem; }
.appcard-body { padding: clamp(22px, 2.6vw, 34px); display: flex; flex-direction: column; flex: 1; }
.appcard-id { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.appcard-ico { width: 54px; height: 54px; border-radius: 13px; flex: none; }
.appcard-id h3 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin: 0 0 6px; line-height: 1; }
.appcard-claim { font-size: 1.0625rem; line-height: 1.55; color: var(--ink); margin: 0 0 20px; }
.appcard-facts {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
.appcard-facts li {
  padding: 12px 12px 12px 0; font-size: 0.875rem; line-height: 1.4; color: var(--body);
}
.appcard-facts li + li { padding-left: 12px; border-left: 1px solid var(--hair-2); }
.appcard-meta { font-size: 0.8125rem; color: var(--muted); margin: 14px 0 22px; }
.appcard .app-actions { margin-top: auto; }
.appcard:not(.is-prelaunch) .tag--soon,
.appcard:not(.is-prelaunch) .notify-jump { display: none; }
.appcard.is-prelaunch .store-link { display: none; }
@media (max-width: 820px) {
  .appcards { grid-template-columns: 1fr; }
  .appcard-visual { height: 250px; }
  .appcard-visual img { width: 180px; }
  .appcard-facts { grid-template-columns: 1fr; }
  .appcard-facts li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--hair-2); }
}
/* on a phone the long status tag must be allowed to wrap inside the card */
.appcard-id > div { min-width: 0; }
.appcard-id .tag { white-space: normal; line-height: 1.5; }

/* ============================================================
   APP-PAGE HERO
   Both app pages opened with 1,300px of text before the first
   screenshot. This leads with the product the way the homepage
   cards do: dark ground, copy left, the phone rising out of the
   bottom edge on the right with the app's accent cast behind it.
   ============================================================ */
.apphero { background: var(--dark); color: #fff; overflow: hidden; position: relative; }
.apphero .wrap {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 64px); align-items: end;
  padding-top: clamp(52px, 7vw, 96px);
}
.apphero-copy { padding-bottom: clamp(44px, 6vw, 84px); min-width: 0; }
.apphero .app-id { margin-bottom: clamp(28px, 4vw, 44px); }
.apphero .app-id .eyebrow { color: var(--on-dark-2); }
.apphero .app-id-name { color: #fff; }
.apphero h1 { color: #fff; margin: 0 0 22px; }
.apphero .lede { color: var(--on-dark); max-width: 46ch; }
.apphero .hero-cta { margin-top: 28px; }
.apphero .hero-meta { border-top-color: rgba(255,255,255,.16); margin-top: clamp(34px, 5vw, 52px); }
.apphero .hero-meta span { color: var(--on-dark-2); }
.apphero-visual { position: relative; height: clamp(380px, 42vw, 600px); min-width: 0; }
.apphero-visual::before {
  content: ""; position: absolute; inset: -10% -20% 0;
  background: radial-gradient(55% 60% at 50% 95%, color-mix(in srgb, var(--glow, #fff) 26%, transparent), transparent 70%);
}
.apphero-visual img {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: clamp(230px, 23vw, 310px); height: auto; aspect-ratio: 620 / 1348;
  border-radius: 36px; border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 40px 80px rgba(0,0,0,.55);
}
.apphero-visual figcaption {
  position: absolute; left: 0; right: 0; bottom: 18px; text-align: center;
  font-family: var(--head); font-size: 0.6875rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--on-dark-2);
}
.apphero + .band--paper2 { border-top: 0; }
@media (max-width: 900px) {
  .apphero .wrap { grid-template-columns: 1fr; gap: 0; }
  .apphero-copy { padding-bottom: clamp(28px, 5vw, 40px); }
  .apphero-visual { height: 300px; }
  .apphero-visual img { width: 200px; }
  .apphero-visual figcaption { display: none; }
}
/* in the narrow copy column the three-up meta strip wrapped into a block of
   four-line fragments; stack it as three clean lines instead */
.apphero .hero-meta { grid-template-columns: 1fr; gap: 8px; }
.apphero-visual figcaption { display: none; }
/* about: a single photo, given room rather than a half-width slot */
.photos--one { grid-template-columns: minmax(0, 560px); }
.photos--one img { aspect-ratio: 4 / 5; }

/* ============================================================
   SELECTED WORK — album covers on a slow, continuous marquee
   The track is rendered twice so the loop is seamless; it pauses
   on hover/focus, and reduced-motion viewers get a static row
   they can scroll by hand.
   ============================================================ */
.work { --work-tile: clamp(200px, 22vw, 280px); --work-gap: clamp(18px, 2.4vw, 32px); }
.work .shead { margin-bottom: clamp(30px, 4vw, 48px); }
.work-marquee {
  position: relative; overflow: hidden;
  /* bleed to the viewport edges so covers run off both sides */
  margin-inline: calc(-1 * var(--edge));
  padding-inline: var(--edge);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.work-track {
  display: flex; gap: var(--work-gap); width: max-content;
  animation: work-scroll var(--work-dur, 48s) linear infinite;
  will-change: transform;
}
.work-marquee:hover .work-track,
.work-marquee:focus-within .work-track { animation-play-state: paused; }
@keyframes work-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - var(--work-gap) / 2)); } }

.work-item { list-style: none; width: var(--work-tile); flex: none; margin: 0; }
.work-item a { display: block; color: inherit; text-decoration: none; }
.work-cover {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.12);
  background: var(--dark-2);
  box-shadow: 0 24px 50px rgba(0,0,0,.45);
  transition: transform .45s ease;
}
.work-item:hover .work-cover { transform: translateY(-6px); }
.work-meta { margin-top: 16px; }
.work-title {
  font-family: var(--head); font-size: 1.125rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: #fff; line-height: 1.05;
}
.work-artist { font-size: 0.9375rem; color: var(--on-dark); margin-top: 4px; }
.work-credit {
  display: inline-block; margin-top: 10px;
  font-family: var(--head); font-size: 0.6875rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--on-dark-2);
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 5px 11px;
}
.work-credit b { font-weight: 400; color: #fff; }

/* until the real artwork lands, the tile says so — in the same amber as .todo */
.work-cover.is-placeholder { outline: 1px dashed rgba(224,176,72,.55); outline-offset: -6px; }
.work-item .todo-badge {
  position: absolute; inset: auto 12px 12px; text-align: center;
  font-family: var(--head); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(224,176,72,.9);
}
.work-art { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .work-track { animation: none; width: auto; overflow-x: auto; padding-bottom: 8px; }
  .work-track > .work-item.is-dup { display: none; }
  .work-marquee { mask-image: none; -webkit-mask-image: none; }
}
@media (max-width: 720px) {
  .work { --work-tile: 200px; }
  .work-marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
}

/* --- work marquee, once JS takes over: a real scroll container the visitor
   can drag, swipe or wheel through, while it keeps drifting on its own --- */
.work-marquee.is-js { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.work-marquee.is-js::-webkit-scrollbar { display: none; }
.work-marquee.is-js.is-dragging { cursor: grabbing; }
.work-marquee.is-js.is-dragging .work-item a,
.work-marquee.is-js.is-dragging .work-cover { pointer-events: none; }
.work-marquee.is-js .work-track { animation: none; }
.work-marquee.is-js .work-item.is-dup { display: block; }   /* the loop needs the copy even under reduced motion */
.work-marquee.is-js .work-cover { user-select: none; -webkit-user-drag: none; }
.work-nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: clamp(22px, 3vw, 32px); }
.work-nav .car-btn { border-color: rgba(255,255,255,.22); color: #fff; }
.work-nav .car-btn:hover { border-color: #fff; background: #fff; color: var(--ink); }

/* --- ChordCodex: three feature columns that line up under the three reels --- */
.feat3 {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 40px); max-width: 1100px;
  margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(34px, 4vw, 52px);
  border-top: 1px solid var(--hair);
}
.feat3 h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); margin: 10px 0 10px; }
.feat3 > div > p { font-size: 0.9375rem; line-height: 1.6; color: var(--body); margin-bottom: 16px; }
.feat3 .feats { margin: 0; }
.feat3 .feats li { font-size: 0.875rem; }
@media (max-width: 720px) { .feat3 { grid-template-columns: 1fr; } }

/* ============================================================
   WORKFLOW — four numbered steps on one connecting line, then
   the file that actually crosses the AirDrop, shown as a file.
   ============================================================ */
.flow {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 40px); position: relative;
}
/* the line the numbers sit on */
.flow::before {
  content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,.28) 78%, transparent);
}
.flow-step { position: relative; padding-top: 0; }
.flow-n {
  position: relative; display: inline-grid; place-items: center;
  width: 60px; height: 60px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28); background: var(--dark);
  margin-bottom: 22px;
}
.flow-n b {
  font-family: var(--head); font-weight: 400; font-size: 1.5rem; letter-spacing: .04em;
  color: #fff; line-height: 1;
}
.flow-step h3 { font-size: clamp(1.2rem, 1.9vw, 1.45rem); color: #fff; margin-bottom: 10px; }
.flow-step p { font-size: 0.9375rem; line-height: 1.6; color: var(--on-dark); }
.flow-tag {
  display: inline-block; margin-top: 16px;
  font-family: var(--head); font-size: 0.6875rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-dark-2); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 5px 11px;
}
/* the step that is the whole point: filled marker, brighter tag */
.flow-step.is-key .flow-n { background: #fff; border-color: #fff; }
.flow-step.is-key .flow-n b { color: var(--ink); }
.flow-step.is-key .flow-tag { color: #fff; border-color: rgba(255,255,255,.5); }

/* the file */
.midifile {
  margin-top: clamp(40px, 5vw, 64px);
  border: 1px solid rgba(255,255,255,.16); border-radius: 18px;
  background: var(--dark-2);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px); align-items: center;
  padding: clamp(20px, 2.6vw, 30px) clamp(22px, 3vw, 36px);
}
.midifile-name { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; }
.midifile-ext {
  grid-row: 1 / span 2; width: 56px; height: 68px; border-radius: 8px 8px 8px 8px;
  border: 1px solid rgba(255,255,255,.3); display: grid; place-items: center;
  font-family: var(--head); font-size: 0.8125rem; letter-spacing: .1em; color: #fff;
  position: relative; background: rgba(255,255,255,.04);
}
.midifile-ext::before { content: ""; position: absolute; top: -1px; right: -1px; width: 16px; height: 16px; background: var(--dark-2); border-left: 1px solid rgba(255,255,255,.3); border-bottom: 1px solid rgba(255,255,255,.3); border-radius: 0 8px 0 4px; }
.midifile-title { font-family: var(--head); font-size: 1.25rem; letter-spacing: .04em; color: #fff; line-height: 1; align-self: end; }
.midifile-sub { font-size: 0.8125rem; color: var(--on-dark-2); align-self: start; }
.midifile-tracks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.midifile-tracks li {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--head); font-size: 0.75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-2);
}
.midifile-tracks li span { color: #fff; }
.midifile-tracks li i { width: 26px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.22); flex: none; }
.midifile-tracks li:nth-child(1) i { background: rgba(255,255,255,.35); width: 14px; }
.midifile-tracks li:nth-child(2) i { background: #c88838; }
.midifile-tracks li:nth-child(3) i { background: #8a5cf6; }
.midifile-tracks li:nth-child(4) i { background: #4fa3ff; }
.midifile-quote {
  font-size: 0.9375rem; line-height: 1.7; color: var(--on-dark);
  border-left: 1px solid rgba(255,255,255,.22); padding-left: 18px; margin: 0;
}
@media (max-width: 900px) {
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow::before { display: none; }
  .midifile { grid-template-columns: 1fr; }
  .midifile-quote { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.14); padding-top: 16px; }
}
@media (max-width: 520px) { .flow { grid-template-columns: 1fr; } }


/* ============================================================
   READABILITY PASS
   Questrial has one light weight, so small grey text on it reads
   thin. Running text sits at 16-17px everywhere, line-height is
   opened up, measure is capped, and the small sizes that had crept
   in for lists, cards and answers are lifted back to body size.
   ============================================================ */
body { font-size: 17px; line-height: 1.7; }
p { max-width: 68ch; }
.lede { font-size: 1.1875rem; line-height: 1.65; max-width: 56ch; }
.feats li, .plan ul li, .fmt p, .svc p, .step p, .flow-step p,
.rx-intro > p, .feat3 > div > p, .feat3 .feats li, .appcard-facts li,
.midifile-quote, .car-role, .work-artist, .preset-desc, .rhythm-note, .small { font-size: 1rem; line-height: 1.6; }
.faq .answer { font-size: 1.0625rem; line-height: 1.7; }
.faq summary { font-size: clamp(1.1rem, 2vw, 1.3rem); }
.car-q { font-size: 1.125rem; line-height: 1.7; }
.appcard-claim { font-size: 1.125rem; }
.plan-desc { font-size: 1rem; }
.feats li { padding: 12px 0; }
.fine, .appcard-meta { font-size: 0.875rem; }
/* eyebrows and labels stay small but gain a touch of contrast */
.eyebrow, .fblock-label, .step-n, .rx-spec, .work-credit, .flow-tag, .preset-tag { color: var(--muted); }
.band--dark .eyebrow, .band--dark .fblock-label, .band--dark .rx-spec, .apphero .eyebrow { color: var(--on-dark-2); }

/* --- app cards: the three facts as black tiles, the product link as the primary button --- */
.appcard-facts {
  border: 0; gap: 8px;
}
.appcard-facts li {
  background: var(--ink); color: #fff; border: 0 !important; border-radius: 10px;
  padding: 16px 14px !important; text-align: center;
  font-family: var(--head); font-size: 0.9375rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.25;
  display: grid; place-items: center; min-height: 64px;
}
.appcard .app-actions { gap: 12px; }
.btn--go { padding-inline: 26px; }
.btn--go span { display: inline-block; margin-left: 8px; transition: transform .2s ease; }
.btn--go:hover span { transform: translateX(4px); }
@media (max-width: 820px) {
  .appcard-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .appcard-facts li { font-size: 0.8125rem; padding: 12px 8px !important; min-height: 56px; }
  .appcard-facts li + li { border-top: 0 !important; }
}
@media (max-width: 460px) {
  .appcard-facts { grid-template-columns: 1fr; }
  .appcard .app-actions .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   CHECK BULLETS + CARDS
   The dash bullets read as dividers, not items. Every feature list
   now uses a filled check mark; the feature columns and the plans
   become bordered cards, with the recommended plan inverted.
   ============================================================ */
:root { --check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10.5l3.2 3.2L15.5 6.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }

/* the mark itself: a filled disc with a white check, colour follows the card */
.feats li::before,
.plan ul li::before {
  content: ""; flex: none; position: static;
  width: 20px; height: 20px; border-radius: 50%; margin-top: 0.2em;
  background: var(--ink);
  -webkit-mask: none; mask: none;
}
.feats li::after,
.plan ul li::after {
  content: ""; position: absolute; left: 0; top: 0.2em; width: 20px; height: 20px;
  background: #fff;
  -webkit-mask: var(--check) center / 14px 14px no-repeat;
          mask: var(--check) center / 14px 14px no-repeat;
}
.feats li { position: relative; gap: 14px; border-bottom: 0; padding: 8px 0; }
.feats li::after { left: 0; }
.plan ul li { display: flex; gap: 14px; padding: 8px 0; border-top: 0; }
.plan ul li::after { top: calc(8px + 0.2em); }
.band--dark .feats li::before, .flow .feats li::before { background: #fff; }
.band--dark .feats li::after { background: var(--ink); }

/* --- three feature columns as cards --- */
.feat3 { max-width: none; border-top: 0; padding-top: 0; gap: clamp(18px, 2.4vw, 28px); }
.feat3 > div {
  background: var(--paper); border: 1px solid var(--hair); border-radius: 20px;
  padding: clamp(24px, 2.6vw, 34px);
  display: flex; flex-direction: column;
}
.band--paper2 .feat3 > div { background: var(--paper); }
.feat3 .fblock-label {
  display: inline-block; align-self: flex-start;
  background: var(--ink); color: #fff; border-radius: 999px; padding: 6px 12px;
  font-size: 0.6875rem; letter-spacing: .16em;
}
.feat3 h3 { margin-top: 18px; font-size: clamp(1.3rem, 2vw, 1.55rem); }
.feat3 > div > p { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--hair-2); }
.feat3 .feats li { font-size: 1rem; }

/* --- plans as cards, the recommended one inverted --- */
.plans { gap: clamp(16px, 2vw, 24px); align-items: stretch; }
.plan {
  border: 1px solid var(--hair); border-top-width: 1px; border-radius: 20px;
  padding: clamp(22px, 2.4vw, 30px); background: var(--paper);
}
.plan.is-best { border-color: var(--ink); background: var(--ink); color: #fff; position: relative; }
.plan.is-best .plan-name, .plan.is-best .plan-amt, .plan.is-best .plan-desc, .plan.is-best ul li { color: #fff; }
.plan.is-best .plan-note, .plan.is-best .plan-per, .plan.is-best .plan-foot { color: rgba(255,255,255,.7); }
.plan.is-best ul li::before { background: #fff; }
.plan.is-best ul li::after { background: var(--ink); }
.plan.is-best::before {
  content: "Best value"; position: absolute; top: -13px; left: 24px;
  background: #fff; color: var(--ink); border: 1px solid var(--ink); border-radius: 999px;
  padding: 5px 12px; font-family: var(--head); font-size: 0.6875rem; letter-spacing: .16em; text-transform: uppercase;
}
.plan-name { font-size: 1.375rem; }
.plan-amt { font-size: clamp(2.4rem, 4vw, 3.2rem); margin-top: 6px; }
.plan-per { margin: 6px 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--hair-2); }
.plan.is-best .plan-per { border-bottom-color: rgba(255,255,255,.18); }
.plan-desc { margin-bottom: 14px; }
.plan .plan-foot {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--hair-2);
}
.plan.is-best .plan-foot { border-top-color: rgba(255,255,255,.18); }
/* the check must sit exactly on its disc: the disc is offset by the li padding */
.feats li::after { top: calc(8px + 0.2em); }
/* price sits tight on its period line; the launch note pins to the card foot */
.plan-amt { margin-bottom: 0; }
.plan ul { margin-bottom: 22px; }
.plan .plan-foot { margin-top: auto; }
/* The iPad captures predate the amber palette; show the phone recordings at
   every width until new iPad recordings arrive. */
.reels .reel-pad { display: none !important; }
.reels .reel-phone { display: block !important; }
@media (min-width: 900px) { .reels { grid-template-columns: repeat(3, minmax(0,1fr)); max-width: 900px; } }
/* the icon + name on each app card is a link to the app page, like the image above it */
a.appcard-id { color: inherit; text-decoration: none; }
a.appcard-id h3 { transition: color .15s ease; }
a.appcard-id:hover h3 { color: var(--muted); }
a.appcard-id .appcard-ico { transition: transform .25s ease; }
a.appcard-id:hover .appcard-ico { transform: translateY(-2px); }
/* static screenshots in the reel slots (VoxCodex has no recordings yet) */
.reels img.reel-phone { width: 100%; height: auto; aspect-ratio: 620 / 1348; border-radius: 18px; border: 1px solid var(--hair); background: var(--dark); display: block; }
.flow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .flow--3 { grid-template-columns: 1fr; } }

/* ============================================================
   TESTIMONIALS — quotes as cards with a large opening mark
   ============================================================ */
.car-slide {
  border-top: 0; padding: clamp(24px, 2.6vw, 34px) clamp(24px, 2.6vw, 34px) clamp(22px, 2.4vw, 30px);
  background: var(--paper); border: 1px solid var(--hair); border-radius: 22px;
  display: flex; flex-direction: column; position: relative;
}
.car-slide::before {
  content: "\201C"; position: absolute; top: 10px; left: clamp(20px, 2.4vw, 30px);
  font-family: var(--head); font-size: 5.5rem; line-height: 1; color: var(--hair);
  pointer-events: none;
}
.car-q { position: relative; padding-top: 30px; font-size: 1.125rem; line-height: 1.7; color: var(--ink); flex: 1; }
.car-who { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--hair-2); gap: 14px; }
.car-who img { width: 52px; height: 52px; border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--hair); }
.car-name { font-family: var(--head); font-size: 1.0625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.car-role { font-size: 0.9375rem; }
.car-track { gap: clamp(16px, 2vw, 24px); padding: 4px; }
.car-foot { margin-top: 28px; }
.car-btn { border-radius: 50%; width: 48px; height: 48px; background: var(--paper); }
.car-dot { width: 28px; height: 3px; border-radius: 2px; }

/* ============================================================
   CONTACT — the form as one card, the studio details as a list
   ============================================================ */
.contact-list { margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.contact-list > div { padding: 14px 0; border-top: 1px solid var(--hair); }
.contact-list dt { font-family: var(--head); font-size: 0.6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.contact-list dd { margin: 0; font-size: 1.0625rem; color: var(--ink); }
.contact-list dd a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--hair); transition: border-color .15s; }
.contact-list dd a:hover { border-bottom-color: var(--ink); }
.contact-list dd span { display: block; font-size: 0.9375rem; color: var(--muted); margin-top: 2px; }

.form--card {
  max-width: none;
  background: var(--paper); border: 1px solid var(--hair); border-radius: 22px;
  padding: clamp(22px, 2.8vw, 36px);
  box-shadow: 0 30px 60px -40px rgba(13,15,14,.25);
}
.field input, .field select, .field textarea {
  border-radius: 12px; background: var(--paper-2); border-color: var(--hair);
  min-height: 54px; padding: 14px 16px;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; background: var(--paper); border-color: var(--ink); box-shadow: 0 0 0 3px rgba(13,15,14,.08);
}
.field textarea { min-height: 150px; }
.form--card .btn { margin-top: 4px; }
.form--card .fine { margin-top: 14px; }
@media (max-width: 560px) { .form--card .btn { width: 100%; justify-content: center; } }
/* the reel row sits centred under its header, on both app pages */
.reels { margin-inline: auto; }
.reels--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; }
@media (min-width: 900px) { .reels--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; } }

/* ---------- page addresses (nuvestudios.io) ---------- */
.pageurl {
  margin: 10px 0 0;
  font-size: 0.9375rem;
  color: var(--muted);
}
.pageurl a {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hair);
  padding-bottom: 1px;
}
.pageurl a:hover { border-bottom-color: var(--ink); }
.foot-url { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.95em; }
.foot-url { text-transform: none; letter-spacing: 0.04em; }
/* reel captions sit centered under their video */
.reels figure { text-align: center; }
.reels figcaption { text-align: center; margin-top: 16px; }

/* inline "Pro" marker on feature bullets */
.pro-tag {
  display: inline-block; vertical-align: 1px; margin-left: 6px;
  font-family: var(--head); font-style: normal; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1; padding: 4px 6px 3px; border-radius: 4px;
  background: var(--ink); color: #fff;
}
.band--dark .pro-tag { background: #fff; color: var(--ink); }

/* ---------- work tiles link to the Spotify playlist ---------- */
.work-item a { cursor: pointer; }
.work-item a:focus-visible .work-cover { outline: 2px solid #fff; outline-offset: 4px; }
.work-art::after {
  content: "Listen"; position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 6px);
  font-family: var(--head); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); background: #fff; padding: 8px 14px 7px; border-radius: 999px;
  opacity: 0; transition: opacity .25s ease, transform .25s ease; pointer-events: none;
}
.work-item:hover .work-art::after, .work-item a:focus-visible .work-art::after { opacity: 1; transform: translate(-50%, 0); }
.work-item:hover .work-title { text-decoration: underline; text-underline-offset: 3px; }
.work-nav { align-items: center; }
.work-listen {
  margin-right: auto; display: inline-flex; align-items: center; gap: 10px;
  color: #fff; text-decoration: none; font-size: 0.9375rem;
  border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 2px;
}
.work-listen:hover { border-bottom-color: #fff; }
.work-listen svg { flex: none; color: #1DB954; }
@media (max-width: 720px) { .work-nav { flex-wrap: wrap; } .work-listen { flex-basis: 100%; margin-bottom: 8px; } }
.work-marquee.is-js .work-item a { -webkit-user-drag: none; }
.work-nav .car-btn { background: transparent; }
.work-nav .car-btn:hover { background: #fff; }

/* Netlify reCAPTCHA widget */
.captcha { margin: 14px 0 4px; min-height: 78px; }
.notify .captcha { margin: 16px 0 0; }

/* Contact: form only, no intro column */
.contact-solo { max-width: 860px; }