/* ============================================================
   Scene Voice — site mockup
   Palette is the app's own, unchanged (web/app.css): warm greige
   family, ink instead of black, TVA orange as the single accent.
   Layout language after payard.io: full-bleed colour fields, a
   floating pill nav, huge tight display type with a ghosted
   second line, large-radius cards, a repeating marquee band.
   Single theme by choice — the site wears the app's LIGHT paper
   identity, and every colour is painted explicitly so the page
   holds on any host background.
   ============================================================ */
:root {
  --chrome:  #E2DAC9;
  --panel:   #ECE5D6;
  --paper:   #F5F0E5;
  --raised:  #FAF6ED;
  --bg:      #E7E0D1;
  --sunken:  #DAD1BE;   /* app.css --bg-panel-2 */
  --ink:     #514A41;
  --ink-dim: #6B6356;
  --line:    #D8CFBC;
  --orange:  #F0623B;
  /* Ghosted display line: the field's own colour lifted, never a new hue. */
  --ghost-on-ink:    rgba(245, 240, 229, 0.34);
  --ghost-on-orange: rgba(250, 246, 237, 0.42);
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* The script pane's own typewriter face, borrowed for labels. */
  --script: "Courier Prime", "Courier New", Courier, monospace;
  --pad: clamp(20px, 5vw, 64px);
  /* The floating-window shadow, after payard.io: offset LEFT and down, wide
     blur, generous spread — that asymmetry is what makes a panel read as
     hovering rather than merely raised. Cast in ink rather than black so it
     stays inside the palette. */
  --float: -8px 10px 54px 12px rgba(81, 74, 65, 0.13);
  --float-deep: -10px 14px 64px 14px rgba(81, 74, 65, 0.20);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
.hidden { display: none; }

/* ---------- Type scale ---------- */
.display {
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.94;
  text-wrap: balance;
}
h1.display { font-size: clamp(2.6rem, 8.4vw, 6.5rem); }
h2.display { font-size: clamp(2.1rem, 5.6vw, 4rem); }
.eyebrow {
  font-family: var(--script);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.lead { font-size: clamp(1.05rem, 1.9vw, 1.35rem); line-height: 1.5; }

/* ---------- Field blocks ---------- */
.field { padding: clamp(52px, 6.5vw, 92px) var(--pad); }
.field--ink    { background: var(--ink);    color: var(--paper); }
.field--paper  { background: var(--paper);  color: var(--ink); }
.field--panel  { background: var(--panel);  color: var(--ink); }
.field--chrome { background: var(--chrome); color: var(--ink); }
.field--orange { background: var(--orange); color: var(--raised); }
.inner { max-width: 1240px; margin: 0 auto; }
.inner--tight { max-width: 940px; }

/* ---------- Floating pill nav ---------- */
.nav {
  position: fixed;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: calc(100% - 24px);
  max-width: 1240px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 6px 22px rgba(43, 39, 34, 0.13);
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 10px;
  text-decoration: none;
  color: var(--ink);
  margin-right: 2px;
}
.nav-brand svg { width: 26px; height: 20px; color: var(--ink); flex: 0 0 auto; }
.nav-brand span { font-weight: 300; font-size: 1.02rem; letter-spacing: 0.01em; white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  text-decoration: none;
  color: var(--ink);
  font-size: 0.92rem;
  padding: 8px 15px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}
.nav-links a:hover { background: var(--panel); }
.nav-cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  background: var(--orange);
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  padding: 13px 24px;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 22px rgba(43, 39, 34, 0.16);
  transition: transform 0.18s ease, filter 0.18s ease;
}
.nav-cta:hover { transform: translateY(-1px); filter: brightness(1.05); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 16px 30px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease, background 0.18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--orange { background: var(--orange); color: #FFFFFF; }
.btn--orange:hover { filter: brightness(1.05); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { filter: brightness(1.12); }
.btn--outline-ink { background: transparent; color: var(--paper); border-color: rgba(245, 240, 229, 0.4); }
.btn--outline-ink:hover { background: rgba(245, 240, 229, 0.1); }

/* ---------- Hero ---------- */
.hero {
  padding-top: clamp(100px, 11vw, 132px);
  padding-bottom: clamp(44px, 5.5vw, 72px);
}
/* The mark and the wordmark lock up together, both in the house orange
   (Kasra). Weight 300 and 0.015em tracking are the wordmark's own settings
   from site.css — the identity is unchanged, only its colour and position. */
.hero-lockup { display: flex; align-items: center; gap: clamp(11px, 1.3vw, 18px); margin-bottom: 22px; }
.hero-mark { width: clamp(48px, 5.5vw, 68px); height: auto; color: var(--orange); flex: 0 0 auto; }
.hero-wordmark {
  font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  letter-spacing: 0.015em;
  line-height: 1;
  color: var(--orange);
}
.hero h1 { margin-bottom: 20px; }
.hero h1 .ghost { color: var(--ghost-on-ink); display: block; }
.hero .lead { max-width: 34em; color: rgba(245, 240, 229, 0.86); }
.hero .lead strong { color: var(--paper); font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid rgba(245, 240, 229, 0.2);
  color: rgba(245, 240, 229, 0.66);
}
.hero-meta .eyebrow { color: rgba(245, 240, 229, 0.66); }

/* ---------- Voice marquee ---------- */
.marquee {
  background: var(--orange);
  color: #FFFFFF;
  padding: 13px 0;
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid rgba(81, 74, 65, 0.14);
  border-bottom: 1px solid rgba(81, 74, 65, 0.14);
}
.marquee-track { display: inline-flex; gap: 0; animation: slide 68s linear infinite; }
.marquee-track span {
  font-size: clamp(1.15rem, 2.2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  padding-right: 26px;
}
.marquee-track span::after { content: "·"; padding-left: 26px; opacity: 0.55; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Section heads ---------- */
.head { max-width: 34em; margin-bottom: clamp(24px, 3vw, 38px); }
.head .eyebrow { display: block; color: var(--orange); margin-bottom: 12px; }
.head p { margin-top: 14px; color: var(--ink-dim); font-size: 1.05rem; }
.field--ink .head p { color: rgba(245, 240, 229, 0.78); }

/* ---------- Audience cards ----------
   THE COLOUR LADDER. These three were panel / chrome / ink: two neighbouring
   rungs and then a cliff — no logic a reader could feel (Kasra).
   They now take the WIDEST evenly-spaced ladder the app's greige ramp
   allows — raised #FAF6ED → panel #ECE5D6 → sunken #DAD1BE, steps of 18 and
   20 in value, about double the old adjacent gap — ordered by how far into
   production each reader is: the writer at the page (the brightest surface
   in the app is the script page itself), the filmmaker in prep, the actor on
   the day. Depth encodes the script's journey, evenly, and the float shadow
   does the separating where the tint is closest to the ground. */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.card {
  border-radius: 30px;
  padding: clamp(24px, 2.4vw, 34px);
  display: flex;
  flex-direction: column;
  box-shadow: var(--float);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--float-deep); }
.card--step1 { background: var(--raised); }
.card--step2 { background: var(--panel); }
.card--step3 { background: var(--sunken); }
.card h3 { font-size: clamp(1.7rem, 2.4vw, 2.25rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.card .role { font-family: var(--script); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); margin-top: 8px; }
.card p.body { margin-top: 18px; color: var(--ink-dim); }
.card p.body strong { color: var(--ink); font-weight: 600; }

/* ---------- Screens ---------- */
.screens { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.screen { display: flex; flex-direction: column; gap: 13px; }
.screen-frame {
  background: var(--raised);
  border-radius: 28px;
  padding: 12px;
  overflow: hidden;
  box-shadow: var(--float);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.screen:hover .screen-frame { transform: translateY(-4px); box-shadow: var(--float-deep); }
.screen-frame img { border-radius: 18px; width: 100%; }
/* Caption ABOVE the screen it names, centred over it (Kasra). On the orange
   field white is the highest-contrast text the locked palette allows —
   3.24:1 — so the title carries the weight at a size that reads as large
   type, and the line under it is set up in size and weight to match. */
.screen figcaption { text-align: center; padding: 0 4px; }
.screen figcaption b {
  display: block;
  font-size: 1.43rem;          /* 40% up from 1.02rem */
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  margin-bottom: 4px;
}
.screen figcaption span { display: block; font-size: 1.05rem; font-weight: 500; color: #FFFFFF; }
/* The eyebrow is orange by default — invisible on an orange field. */
.field--orange .head .eyebrow { color: var(--raised); }

/* ---------- Privacy ---------- */
.privacy {
  background: var(--ink);
  color: var(--paper);
  border-radius: 36px;
  padding: clamp(30px, 3.6vw, 56px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 4vw, 60px);
  align-items: start;
}
.privacy h2 { font-size: clamp(1.9rem, 4.2vw, 3.2rem); }
.privacy .eyebrow { display: block; color: var(--orange); margin-bottom: 18px; }
.privacy p { color: rgba(245, 240, 229, 0.84); }
.privacy p + p { margin-top: 18px; }
.privacy strong { color: var(--paper); font-weight: 600; }
.privacy .footnote { font-size: 0.98rem; color: rgba(245, 240, 229, 0.62); }

/* ---------- Features: floating windows past a fixed heading ----------
   Payard's Services section holds its title still (position: sticky) while
   white panels ride up past it. Four feature groups is exactly the shape
   that wants: the heading stays put as the windows pass. */
.features-layout {
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  gap: clamp(28px, 4vw, 76px);
  align-items: start;
}
.features-sticky { position: sticky; top: 104px; }
.features-sticky .head { margin-bottom: 0; }
/* The display scale is set for a full-width band; in a 340px column it has to
   come down or it breaks into one word per line. */
.features-sticky h2.display { font-size: clamp(1.9rem, 2.7vw, 2.6rem); }
.features-count {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(81, 74, 65, 0.22);
  font-family: var(--script);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.features-stack { display: flex; flex-direction: column; gap: 16px; }
.fgroup {
  background: var(--raised);
  border-radius: 26px;
  box-shadow: var(--float);
  overflow: hidden;              /* clips the orange head band to the radius */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fgroup:hover { transform: translateY(-3px); box-shadow: var(--float-deep); }
/* FOUR LEVELS INSIDE EACH WINDOW, so a group is scannable instead of a slab
   of prose (Kasra): the number, the group name, a one-line summary of what
   the part IS, then each feature as a short bold term with its explanation
   underneath. The terms form a column the eye can run down without reading
   a word of the descriptions. */
/* The head is a full-bleed ORANGE band across the top of each card (Kasra),
   so the card's padding moves onto the head and the list, and the hairline
   goes — the colour edge is the divider now. White is the most contrast the
   locked palette allows on orange (3.24:1): the title clears it as large bold
   type, and the line beneath is sized and weighted to match rather than being
   set as small body copy. */
.fgroup-head {
  background: var(--orange);
  color: #FFFFFF;
  display: flex; align-items: flex-start; gap: 16px;
  padding: clamp(20px, 2.1vw, 28px) clamp(24px, 2.8vw, 40px);
}
.fgroup-head h3 { font-size: clamp(1.3rem, 1.9vw, 1.7rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; color: #FFFFFF; }
.fgroup-sub { margin-top: 5px; font-size: 1.02rem; font-weight: 500; color: #FFFFFF; }
.fgroup-head .num { font-family: var(--script); font-size: 0.78rem; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.82); margin-left: auto; flex: 0 0 auto; padding-top: 6px; }
.fgroup ul { list-style: none; columns: 2; column-gap: 40px; padding: clamp(24px, 2.8vw, 40px); }
.fgroup li { break-inside: avoid; margin-bottom: 15px; }
.fgroup li:last-child { margin-bottom: 0; }
.fgroup li b {
  display: block;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.fgroup li span { display: block; font-size: 0.87rem; line-height: 1.45; color: var(--ink-dim); }

/* ---------- Beta ---------- */
.beta { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(34px, 5vw, 70px); align-items: center; }
.beta h2 .ghost { color: var(--ghost-on-orange); display: block; }
.beta > .beta-copy p { margin-top: 24px; max-width: 26em; color: rgba(250, 246, 237, 0.92); font-size: 1.1rem; }
.beta-card {
  background: var(--raised);
  color: var(--ink);
  border-radius: 30px;
  padding: clamp(24px, 2.6vw, 36px);
  box-shadow: var(--float-deep);
}
.beta-card .eyebrow { color: var(--orange); display: block; margin-bottom: 14px; }
.beta-card h3 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.beta-card p { margin-top: 14px; color: var(--ink-dim); font-size: 0.98rem; }
.beta-card .btn { width: 100%; margin-top: 24px; }
.beta-divider { display: flex; align-items: center; gap: 14px; margin: 22px 0 18px; color: var(--ink-dim); }
.beta-divider::before, .beta-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.beta-divider span { font-family: var(--script); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; }
.beta-card form { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.beta-card label { font-family: var(--script); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); }
.beta-card input {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 15px 22px;
  width: 100%;
}
.beta-card input::placeholder { color: var(--ink-dim); opacity: 0.75; }
.beta-card .btn--ink { margin-top: 2px; }

/* ---------- Footer ---------- */
footer { background: var(--ink); color: rgba(245, 240, 229, 0.72); padding: 38px var(--pad); }
.foot {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 0.95rem;
}
.foot svg { width: 30px; height: 23px; color: var(--paper); }
.foot .spacer { flex: 1; }
.foot a { color: var(--paper); text-decoration: none; border-bottom: 1px solid rgba(245, 240, 229, 0.35); padding-bottom: 1px; }
.foot a:hover { border-bottom-color: var(--orange); }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
/* --- iPad landscape and below: the sticky column has nothing to hold
       against once the windows go full width. --- */
@media (max-width: 1080px) {
  .screens { grid-template-columns: repeat(2, 1fr); }
  .features-layout { grid-template-columns: 1fr; }
  .features-sticky { position: static; }
  .features-sticky .head { margin-bottom: 32px; }
  .features-sticky h2.display { font-size: clamp(2rem, 4.4vw, 3rem); }
  .features-count { display: inline-block; }
}
/* --- iPad portrait: three cards across gets too narrow, one across runs
       the measure past 90 characters. Two, with the third leading row 2. --- */
@media (max-width: 900px) {
  .cards   { grid-template-columns: repeat(2, 1fr); }
  .privacy { grid-template-columns: 1fr; }
  .beta    { grid-template-columns: 1fr; }
}
/* --- Below the smallest tablet: one column everywhere, compact nav. --- */
@media (max-width: 680px) {
  .nav-links { display: none; }
  .cards     { grid-template-columns: 1fr; }
  .fgroup ul { columns: 1; }
  .screens   { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .screens { grid-template-columns: 1fr; }
  .nav-brand span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .card, .nav-cta { transition: none; }
}

/* ============================================================
   SUB-PAGES (support, thanks) — same system, page-specific bits
   ============================================================ */
.page-head { max-width: 30em; }
/* The hero scale is set for the home page's one big statement; a utility
   page's title at 104px reads as shouting. */
.page-head h1.display, .page-min h1.display { font-size: clamp(2.2rem, 5vw, 3.7rem); }
.page-head .eyebrow { display: block; color: var(--orange); margin-bottom: 12px; }
.field--ink .page-head .eyebrow { color: var(--orange); }
.page-head p { margin-top: 16px; font-size: 1.08rem; }
.field--ink .page-head p { color: rgba(245, 240, 229, 0.82); }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.qa {
  background: var(--raised);
  border-radius: 26px;
  box-shadow: var(--float);
  padding: clamp(24px, 2.4vw, 34px);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.qa:hover { transform: translateY(-3px); box-shadow: var(--float-deep); }
.qa h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 10px; }
.qa p { font-size: 0.94rem; line-height: 1.5; color: var(--ink-dim); }
.qa strong { color: var(--ink); font-weight: 600; }

.form-card {
  background: var(--raised);
  border-radius: 30px;
  box-shadow: var(--float);
  padding: clamp(26px, 3vw, 40px);
  max-width: 620px;
}
.form-card .field-row + .field-row { margin-top: 18px; }
.form-card label {
  display: block;
  font-family: var(--script);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 8px;
}
.form-card input, .form-card textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 14px 20px;
}
.form-card input { border-radius: 999px; }
.form-card textarea { border-radius: 20px; min-height: 150px; resize: vertical; line-height: 1.5; }
.form-card input::placeholder, .form-card textarea::placeholder { color: var(--ink-dim); opacity: 0.75; }
.form-card .btn { margin-top: 22px; }

/* A SHORT PAGE has to fill the window or the body's paper shows below the
   footer as an unfinished band. The field grows, the footer stays put — and
   `.inner` needs an explicit width, because as a flex item it would otherwise
   shrink to its content and `margin: 0 auto` would centre it out of line with
   every other section on the site. */
.short-page { min-height: 100vh; display: flex; flex-direction: column; }
.short-page > .field { flex: 1 0 auto; display: flex; align-items: center; }
.short-page > .field > .inner { width: 100%; }
.short-page > footer { flex: 0 0 auto; }

/* Same ladder the home page's cards use, so the two pages agree. */
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .grid-3 { grid-template-columns: 1fr; } }