/* ═══════════════════════════════════════════════════════════════════════
   THE FILM, AND THE PAPER IT WRITES ON
   The homepage hero plays one deal from messy call notes to a signed
   proposal. It is a fixed stage (600x480 beside the box, 380x624 under it)
   scaled to whatever width it is given, so it never reflows mid-shot.
   film.js drives every frame from one clock. Without JS, or under
   prefers-reduced-motion, what this file styles by default IS the still
   frame: notes read, proposal written, priced and ready to sign.

   .paper and its children are shared with /sample-proposal, so the film
   and the full sample look like the same document, because they are.
   ═══════════════════════════════════════════════════════════════════════ */

.film { container-type: inline-size; margin: 0; min-width: 0; }
.film-box { position: relative; width: 100%; aspect-ratio: 600 / 560; overflow: hidden; }
.film-stage {
  position: absolute; left: 0; top: 0; width: 600px; height: 560px;
  transform-origin: 0 0; transform: scale(var(--s, 1));
  --s: tan(atan2(100cqw, 600px));
  font-family: var(--font); color: var(--text);
}
.film-card { position: absolute; background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(22,21,31,.06), 0 18px 40px -22px rgba(22,21,31,.35); }

/* ── Left: the call notes, then the activity once it is sent ── */
.fl-notes, .fl-activity { left: 0; top: 70px; width: 214px; height: 330px; padding: 14px 15px; }
.fl-notes { transform: rotate(-1.2deg); background: #fffdf8; }
.fl-cap { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--faint); margin-bottom: 12px; }
.fl-cap .dotty { width: 7px; height: 7px; border-radius: 50%; background: var(--brass); flex: 0 0 auto; }
.fl-cap em { font-style: normal; margin-left: auto; font-variant-numeric: tabular-nums; }
.fl-notes p { margin: 0 0 9px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.fl-notes mark { color: inherit; border-radius: 3px; padding: 0 1px;
  background: linear-gradient(color-mix(in srgb, var(--violet) 24%, transparent), color-mix(in srgb, var(--violet) 24%, transparent)) no-repeat 0 0 / calc(var(--h, 1) * 100%) 100%; }
.fl-notes .scrawl { color: var(--faint); }

.fl-activity { opacity: 0; visibility: hidden; }
.fa-head { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 600; margin-bottom: 10px; }
.fa-row { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; color: var(--ink); padding: 6px 0; border-bottom: 1px solid var(--line); }
.fa-row em { font-style: normal; margin-left: auto; color: var(--faint); font-size: 11px; font-variant-numeric: tabular-nums; }
.fa-row .pill { font-size: 10.5px; color: var(--violet); background: var(--violet-soft); border-radius: 999px; padding: 2px 7px; }
.fa-bars { padding: 10px 0 4px; display: grid; gap: 7px; }
.fa-bar { display: grid; grid-template-columns: 54px 1fr 44px; gap: 7px; align-items: center; font-size: 11px; color: var(--muted); }
.fa-bar i { display: block; height: 6px; border-radius: 3px; background: var(--bg-2); overflow: hidden; }
.fa-bar i b { display: block; height: 100%; width: calc(var(--w, 0) * 100%); background: var(--violet); border-radius: 3px; }
.fa-bar em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.fa-bar.hot em { color: var(--violet); font-weight: 600; }
.fa-signed { margin-top: 8px; padding: 9px 10px; border-radius: 9px; background: color-mix(in srgb, var(--green) 9%, var(--paper)); font-size: 12px; color: var(--green); }
.fa-signed b { display: block; font-size: 13px; }
.fa-signed code { display: block; margin-top: 3px; font-size: 10px; color: var(--muted); font-family: ui-monospace, "SF Mono", Menlo, monospace; white-space: nowrap; overflow: hidden; }

/* ── Right: the proposal writing itself ── */
.fl-doc { left: 230px; top: 0; width: 370px; height: 560px; padding: 0; overflow: hidden; }

.paper { background: var(--paper); color: var(--text); }
.paper .pp-bar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--faint); }
.paper .pp-bar .lg { width: 16px; height: 12px; flex: 0 0 auto; }
.paper .pp-state { margin-left: auto; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; border-radius: 999px; padding: 2px 8px;
  color: var(--violet); background: var(--violet-soft); }
.paper .pp-state[data-s="sent"] { color: #6b4e17; background: color-mix(in srgb, var(--brass) 22%, var(--paper)); }
.paper .pp-state[data-s="signed"] { color: #fff; background: var(--green); }

.fl-doc .pp-body { padding: 14px 18px 0; }
.fl-doc .pp-title { font-family: var(--display); font-weight: 500; font-size: 19px; line-height: 1.2; color: var(--ink); margin: 0 0 3px; min-height: 23px; font-variation-settings: "opsz" 72, "SOFT" 30; }
.fl-doc .pp-client { font-size: 11px; color: var(--muted); margin: 0 0 10px; min-height: 14px; }
.fl-doc .pp-sec { margin: 0 0 7px; }
.fl-doc .pp-sec h5 { margin: 0 0 1px; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.fl-doc .pp-sec p { margin: 0; font-size: 11.5px; line-height: 1.42; color: var(--text); min-height: 16px; }
.fl-doc .typing::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--violet); }

.pp-price { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11px; margin-top: 4px; }
.pp-price td:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 10px; }
.pp-price th { text-align: left; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 600; padding: 0 0 4px; border-bottom: 1px solid var(--line); }
.pp-price th:last-child, .pp-price td:last-child { text-align: right; }
.pp-price td { padding: 4px 0; border-bottom: 1px solid var(--line); color: var(--text); }
.pp-price td small { color: var(--faint); font-size: 10px; }
.pp-price tr.neg td:last-child { color: var(--green); }
.pp-price tr.tot td { border-bottom: 0; padding-top: 7px; font-weight: 600; color: var(--ink); }
.pp-price tr.tot td:last-child { font-family: var(--display); font-weight: 500; font-size: 18px; }

.pp-stamp { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 10.5px; font-weight: 600; color: var(--green);
  border: 1px dashed color-mix(in srgb, var(--green) 55%, transparent); border-radius: 6px; padding: 3px 8px; transform: rotate(-2deg); transform-origin: 0 50%; }

.pp-sign { position: relative; display: flex; align-items: flex-end; gap: 12px; margin-top: 10px; padding-top: 8px; }
.pp-sign .field { flex: 1; border-bottom: 1.5px solid var(--ink); height: 34px; position: relative; background: color-mix(in srgb, var(--brass) 12%, transparent); border-radius: 5px 5px 0 0; }
.pp-sign .field small { position: absolute; right: 7px; bottom: 4px; font-size: 9.5px; color: #7a5a25; letter-spacing: .04em; }
.pp-sign .sig { position: absolute; left: 12px; bottom: 1px; font-family: var(--display); font-style: italic; font-size: 22px; color: var(--ink); line-height: 1; clip-path: inset(0 calc(var(--sig, 1) * 100%) 0 0); }
.pp-sign .who { font-size: 10px; color: var(--muted); width: 96px; line-height: 1.35; }
.pp-sign .signed { position: absolute; left: 128px; top: 2px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green);
  border: 2px solid var(--green); border-radius: 6px; padding: 2px 8px; transform: rotate(-6deg); opacity: 0; background: var(--paper); }

/* ── Under the box: 380 wide, notes on top, the document below ── */
@container (max-width: 519px) {
  .film-box { aspect-ratio: 380 / 730; }
  .film-stage { width: 380px; height: 730px; --s: tan(atan2(100cqw, 380px)); }
  .fl-notes, .fl-activity { top: 0; width: 380px; height: 176px; padding: 12px 15px; }
  .fl-notes { transform: none; }
  .fl-notes .fl-body { columns: 2; column-gap: 16px; }
  .fl-notes p { font-size: 12.5px; margin-bottom: 7px; break-inside: avoid; }
  .fl-activity { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; align-content: start; }
  .fl-activity .fa-head { grid-column: 1 / -1; margin-bottom: 4px; }
  .fl-activity .fa-rows { grid-column: 1; }
  .fl-activity .fa-bars { grid-column: 2; grid-row: 2 / span 2; padding-top: 4px; }
  .fl-activity .fa-signed { grid-column: 1; margin-top: 6px; }
  .fa-bar { grid-template-columns: 50px 1fr 46px; }
  .fa-bar em { white-space: nowrap; }
  .fl-doc { left: 0; top: 188px; width: 380px; height: 542px; }
}

/* The strip under the film: what it is, where the full one is, and a pause. */
.film-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--muted); }
.film-foot a { color: var(--violet); font-weight: 600; text-decoration: none; }
.film-foot a:hover { text-decoration: underline; text-underline-offset: 2px; }
.film-btn { margin-left: auto; font: inherit; font-size: 12px; color: var(--muted); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; cursor: pointer; }
.film-btn:hover { color: var(--ink); border-color: var(--line-2); }
.film-btn[hidden] { display: none; }

/* ═══════════════ /sample-proposal: the same paper, full size ═══════════════ */
.sample-note { display: flex; gap: 12px; align-items: flex-start; background: color-mix(in srgb, var(--brass) 14%, var(--paper)); border: 1px solid color-mix(in srgb, var(--brass) 45%, transparent);
  border-radius: 12px; padding: 13px 16px; font-size: 14.5px; color: #5e4419; max-width: 820px; }
.sample-note b { color: #4a3510; }
.sample-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; align-items: start; }
.sample-in { position: sticky; top: 84px; }
.sample-in .film-card { position: static; transform: none; width: auto; height: auto; }
.sample-in .fl-notes p { font-size: 14px; }
.sample-in .k { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 600; margin: 0 0 8px; }
.sample-in .arrow { font-size: 13px; color: var(--muted); margin: 14px 2px 0; line-height: 1.5; }

.paper.full { border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.paper.full .pp-bar { padding: 13px 26px; font-size: 13px; }
.paper.full .pp-body { padding: 34px 44px 40px; }
.paper.full .pp-cover { border-bottom: 1px solid var(--line); padding-bottom: 22px; margin-bottom: 26px; }
.paper.full .pp-kicker { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--violet); font-weight: 600; margin: 0 0 8px; }
.paper.full h1 { font-family: var(--display); font-weight: 500; font-size: clamp(28px, 4vw, 38px); line-height: 1.12; color: var(--ink); margin: 0 0 14px; font-variation-settings: "opsz" 72, "SOFT" 30; }
.paper.full .pp-meta { display: grid; grid-template-columns: repeat(4, auto); gap: 6px 28px; justify-content: start; font-size: 13.5px; color: var(--muted); margin: 0; }
.paper.full .pp-meta dt { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.paper.full .pp-meta dd { margin: 0; color: var(--ink); }
.paper.full .pp-meta div { display: grid; gap: 2px; }
.paper.full h2 { font-family: var(--display); font-weight: 500; font-size: 22px; color: var(--ink); margin: 30px 0 8px; }
.paper.full h2 .n { color: var(--faint); margin-right: 8px; font-size: 17px; }
.paper.full p, .paper.full li { font-size: 15.5px; line-height: 1.65; color: var(--text); }
.paper.full p { margin: 0 0 12px; }
.paper.full ul { margin: 0 0 12px; padding-left: 20px; }
.paper.full li { margin-bottom: 5px; }
.paper.full .pp-price { font-size: 14.5px; margin-top: 8px; }
.paper.full .pp-price th { font-size: 11px; padding-bottom: 8px; }
.paper.full .pp-price td { padding: 10px 0; vertical-align: top; }
.paper.full .pp-price td small { display: block; font-size: 12.5px; margin-top: 2px; }
.paper.full .pp-price tr.tot td:last-child { font-size: 26px; }
.paper.full .pp-stamp { font-size: 12.5px; margin-top: 12px; padding: 5px 11px; }
.paper.full .pp-flag { display: block; margin-top: 3px; font-size: 12px; color: #7a5a25; }
.paper.full .pp-flag::before { content: "To confirm: "; font-weight: 600; }
.pp-sched { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0 4px; }
.pp-sched div { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--muted); }
.pp-sched b { display: block; color: var(--ink); font-variant-numeric: tabular-nums; font-size: 15px; }
.pp-signers { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 12px; }
.pp-signers .pp-sign { margin: 0; }
.pp-signers .pp-sign .field { height: 46px; }
.pp-signers .pp-sign .who { width: auto; }
.paper.full .pp-signers .order { font-size: 11px; line-height: 1.4; color: var(--faint); margin: 0 0 6px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }

.sample-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sample-how > div { border-top: 2px solid var(--violet-soft); padding-top: 12px; font-size: 15px; color: var(--muted); line-height: 1.55; }
.sample-how b { display: block; color: var(--ink); margin-bottom: 4px; }

@media (max-width: 900px) {
  .sample-grid { grid-template-columns: 1fr; }
  .sample-in { position: static; }
  .sample-how { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .paper.full .pp-body { padding: 24px 18px 28px; }
  .paper.full .pp-bar { padding: 11px 18px; }
  .paper.full .pp-meta { grid-template-columns: 1fr 1fr; }
  .pp-sched { grid-template-columns: 1fr 1fr; }
  .pp-signers { grid-template-columns: 1fr; }
  .paper.full .pp-price { font-size: 13.5px; }
  .paper.full .pp-price tr.tot td:last-child { font-size: 21px; }
}
.sample-cta { max-width: 720px; text-align: center; }
.sample-cta h2.display { margin-left: auto; margin-right: auto; }
.sample-cta .section-lead { margin: 0 auto 20px; }
.sample-cta .ask { text-align: left; margin: 0 auto; }

/* ── Wide stage (the v3 hero gives the film the full width): notes, the
      proposal and what happened after sending sit side by side. ── */
@container (min-width: 900px) {
  .film-box { aspect-ratio: 1120 / 560; }
  .film-stage { width: 1120px; height: 560px; --s: tan(atan2(100cqw, 1120px)); }
  .fl-notes { left: 30px; top: 80px; width: 270px; height: 330px; }
  .fl-doc { left: 345px; top: 0; width: 430px; height: 560px; }
  .fl-activity { left: 820px; top: 80px; width: 270px; height: 380px; }
  .fl-doc .pp-title { font-size: 21px; }
  .fl-doc .pp-sec p { font-size: 12.5px; }
  .pp-price { font-size: 12px; }
}

/* What was handed over: the recording, their document, your notes. */
.fl-files { display: flex; flex-wrap: wrap; gap: 5px; margin: -4px 0 10px; }
.fl-files span { font-size: 10.5px; color: var(--ink-2); background: var(--bg-2); border-radius: 6px; padding: 3px 7px; white-space: nowrap; }
.fl-files i { font-style: normal; color: var(--faint); }
@container (max-width: 519px) {
  .fl-notes { height: 206px; }
  .fl-files { margin: -6px 0 6px; }
  .fl-doc { top: 216px; height: 514px; }
  .film-box { aspect-ratio: 380 / 730; }
}