/* Pricing page, editorial layer: the full-bleed opening (the raw recording behind, the finished reel in a phone,
   a giant wordmark), the statement that lights up word by word like 4reel's captions, light bands for "Made in
   4reel" and the plans, big step numerals and the numbers band. Loaded after scenes.css. */

/* ---------- opening ---------- */
.hx { position: relative; min-height: max(720px, 100svh); margin-top: -61px; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; background: #0d0e10; }
.hx-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: grayscale(1) contrast(1.15) brightness(.55) blur(1px); transform: scale(1.04); }
/* duotone: the grey recording turns into 4reel orange, dark at the edges where the text sits */
.hx-shade { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, #0d0e10e6 0%, #0d0e1000 30%, #0d0e1000 55%, #0d0e10 100%), linear-gradient(90deg, #0d0e10f0 0%, #0d0e1099 45%, #0d0e1000 75%), #ff6a13;
  mix-blend-mode: multiply; }
[dir="rtl"] .hx-shade { background: linear-gradient(180deg, #0d0e10e6 0%, #0d0e1000 30%, #0d0e1000 55%, #0d0e10 100%), linear-gradient(270deg, #0d0e10f0 0%, #0d0e1099 45%, #0d0e1000 75%), #ff6a13; }
.hx-in { position: relative; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; gap: 24px 48px; padding-top: 120px; }
.hx-copy { grid-column: 1; max-width: 560px; }
.hx-copy h1 { font-size: clamp(36px, 4.4vw, 56px); margin: 0 0 20px; }
.hx-copy .lead { font-size: 18px; color: #d4d6db; margin-bottom: 28px; }
.hx-copy .cta { gap: 24px; }
.hx-proof { grid-column: 1; align-self: end; list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: #d4d6db; font-size: 15px; }
.hx-proof .pn { color: var(--dim); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; margin-inline-end: 6px; }
.hx-phone { grid-column: 2; grid-row: 1 / 4; align-self: end; width: min(250px, 22vw); }
.hx-year { grid-column: 1; color: var(--dim); font-size: 13px; }
.hx-mark { position: relative; margin: -0.18em 0 -0.2em; padding-inline: 16px; text-align: center; font: 800 clamp(120px, 21vw, 320px)/1 var(--font-display); letter-spacing: -.06em;
  color: #f1f2f4; direction: ltr; user-select: none; pointer-events: none; }
.hx-mark::after { content: "."; color: var(--accent); }

/* underlined text link with an arrow, the secondary action everywhere on the page */
.ln { display: inline-flex; align-items: center; gap: 24px; padding: 8px 0; border-bottom: 1px solid currentColor; color: var(--text); text-decoration: none; font-weight: 500; transition: gap .2s ease-out, color .2s ease-out; }
.ln svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .ln svg { transform: scaleX(-1); }
.ln:hover { gap: 32px; color: var(--accent2); }

/* ---------- statement: words light up as you read, the current one in orange (like word-by-word captions) ---------- */
.statement-sec { padding: 120px 0 40px; }
.statement { margin: 0; max-width: 1000px; font: 500 clamp(28px, 3.6vw, 48px)/1.22 var(--font-display); letter-spacing: -.02em; color: #ffffff2e; }
.statement .w { transition: color .25s ease-out; }
.statement .w.lit { color: var(--text); }
.statement .w.now { color: var(--accent); }

/* ---------- light bands (Made in 4reel, the plans) ---------- */
.band-light { --bg: #f4f3ef; --bg2: #ebeae5; --panel: #ffffff; --panel2: #f1f0ec; --line: #0000001a; --line2: #0000002b;
  --text: #111214; --muted: #5d6068; --dim: #8b8e95; color: var(--text); background: var(--bg); padding: 120px 0; margin-top: 96px; }
.band-light h2 { color: var(--text); }

/* Made in 4reel: a sticky title beside a stack of moments */
.mw-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 48px; align-items: start; }
.mw-head { position: sticky; top: 120px; }
.mw-head .l-kicker { text-align: start; }
.mw-head h2 { font-size: clamp(40px, 5vw, 64px); line-height: 1; margin: 0 0 32px; }
.mw-list { display: grid; gap: 48px; }
.mw-item { margin: 0; }
.mw-img { overflow: hidden; border-radius: 4px; aspect-ratio: 5 / 4; background: #000; }
.mw-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform: scale(1.06); transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.mw-item.in .mw-img img { transform: none; }
.mw-item figcaption { display: flex; justify-content: space-between; gap: 16px; padding-top: 12px; font-size: 15px; }
.mw-item figcaption span { color: var(--muted); }

/* ---------- steps: big numerals ---------- */
.made .st-n { font: 500 56px/1 var(--font-display); letter-spacing: -.04em; color: #ffffff1f; margin-bottom: 12px; transition: color .3s ease-out; }
.made .st.on .st-n { color: var(--text); }

/* ---------- numbers ---------- */
.numbers { padding: 120px 0 0; }
.nb-k { display: block; color: var(--muted); font-size: 15px; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 40px; }
.nb-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.nb b { display: block; font: 500 clamp(56px, 7vw, 104px)/1 var(--font-display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.nb:first-child b { color: var(--accent); }
.nb span { display: block; margin-top: 12px; color: var(--muted); font-size: 15px; max-width: 16em; }

/* ---------- plans on the light band ---------- */
.plans-band { padding-top: 104px; }
.plans-band .l-head { padding-top: 0; }
.plans-band .tier { --btn: #111214; --btn-text: #fff; box-shadow: none; }
.plans-band .tier.pro { --bg: #0d0e10; --panel: #17181b; --line: #ffffff14; --line2: #ffffff24; --text: #f1f2f4; --muted: #9aa0a8; --dim: #6c727b;
  color: var(--text); background: #141518; border-color: #141518; }
.plans-band .allow { background: var(--panel2); }
.plans-band .tier.pro .allow { background: #00000040; }
/* Creator: light like Starter, only a quiet "Most popular" tag */
.plans-band .tier.creator { --c: var(--text); background: var(--panel); border-color: var(--line); }
.plans-band .tier.creator .badge { background: #0000000f; color: var(--muted); }
/* Pro: the flagship. Black, an orange edge and a light from the top, raised above the other two */
/* the edge light (the "shiny button" idea, on the whole card): an orange → white arc runs around the border,
   sparkles follow it, a slow sheen turns inside; hovering widens the arc */
@property --pro-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --pro-p { syntax: "<percentage>"; initial-value: 6%; inherits: false; }
.plans-band .tier.pro { --c: var(--accent2); --btn: var(--accent); --btn-text: var(--on-accent); isolation: isolate; overflow: hidden;
  border: 1px solid transparent;
  background: radial-gradient(120% 60% at 50% 0%, #3a1c0b, #0b0b0c 60%) padding-box,
    conic-gradient(from var(--pro-a), #ff6a1340, #ff6a13 var(--pro-p), #fff calc(var(--pro-p) * 2), #ff6a13 calc(var(--pro-p) * 3), #ff6a1340 calc(var(--pro-p) * 4)) border-box;
  box-shadow: 0 0 0 4px #ff6a131a, 0 40px 80px -40px #ff6a1366;
  animation: pro-turn 4s linear infinite; transition: --pro-p .8s cubic-bezier(.25,1,.5,1); }
.plans-band .tier.pro:hover, .plans-band .tier.pro:focus-within { --pro-p: 18%; }
.plans-band .tier.pro::before { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: inherit; pointer-events: none; opacity: .35;
  background: radial-gradient(circle at 2px 2px, #fff .5px, transparent 0) 0 0 / 4px 4px;
  -webkit-mask-image: conic-gradient(from calc(var(--pro-a) + 45deg), #000, transparent 10% 90%, #000); mask-image: conic-gradient(from calc(var(--pro-a) + 45deg), #000, transparent 10% 90%, #000);
  animation: pro-turn 4s linear infinite; }
.plans-band .tier.pro::after { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 160%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; opacity: .12;
  background: linear-gradient(-50deg, transparent, #ff6a13, transparent); -webkit-mask-image: radial-gradient(circle at bottom, transparent 40%, #000); mask-image: radial-gradient(circle at bottom, transparent 40%, #000);
  animation: pro-sheen 12s linear infinite; }
@keyframes pro-turn { to { --pro-a: 360deg; } }
@keyframes pro-sheen { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .plans-band .tier.pro, .plans-band .tier.pro::before, .plans-band .tier.pro::after { animation: none; } }
.plans-band .tier.pro .badge { background: var(--accent); color: var(--on-accent); font-weight: 600; border: 0; }
.plans-band .tier.pro .cost b { color: #fff; }
@media (max-width: 1020px) { .plans-band .tier.pro { order: -2; } }
.plans-band .feats { color: var(--muted); }
.plans-band .feats li.hi { color: var(--c); }
.plans-band .trust { color: var(--muted); }

@media (max-width: 860px) {
  .hx { min-height: auto; }
  .hx-in { grid-template-columns: 1fr; grid-template-rows: auto; padding-top: 104px; gap: 32px; }
  .hx-phone { grid-column: 1; grid-row: auto; width: min(240px, 70%); justify-self: center; margin: 0; }
  .hx-proof, .hx-year { grid-column: 1; }
  .statement-sec { padding-top: 80px; }
  .band-light { padding: 80px 0; margin-top: 72px; }
  .mw-grid { grid-template-columns: 1fr; }
  .mw-head { position: static; }
  .mw-list { gap: 32px; }
  .nb-row { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .made .st-n { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .statement .w, .mw-img img, .ln { transition: none; }
  .mw-img img { transform: none; }
}