/* Pricing page scenes, built from a finished 4reel reel (assets/reel): the phone in the opening, close-ups from the
   reel, the sticky "how a reel gets made" steps (a clip per step), the tool rail, the round FAQ buttons and the
   closing card. scenes.js plays the clip in view and lights the steps; without JS the posters show. */

/* ---------- the phone: a finished reel playing, the way people will see it ---------- */
.phone { position: relative; aspect-ratio: 9 / 16; border-radius: 40px; padding: 10px; background: linear-gradient(180deg, #2a2d33, #16181c);
  border: 1px solid #ffffff1f; box-shadow: 0 0 0 1px #000 inset, 0 40px 80px -40px #000; }
.phone video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 30px; background: #000; }
.phone::after { content: ""; position: absolute; top: 18px; left: 50%; width: 30%; height: 22px; transform: translateX(-50%); border-radius: 12px; background: #000; }

/* ---------- opening: text on one side, the reel on the other ---------- */
.l-hero.split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px; align-items: center; text-align: start; padding-top: 72px; }
.l-hero.split h1 { margin-inline: 0; font-size: clamp(40px, 5.2vw, 64px); }
.l-hero.split .lead { margin-inline: 0; }
.l-hero.split .cta, .l-hero.split .l-proof { justify-content: flex-start; }
.l-hero.split .l-proof { flex-direction: column; gap: 8px; }
.h-phone { position: relative; width: min(340px, 100%); justify-self: center; }
.l-hero.split { overflow-x: clip; }
.h-phone::before { content: ""; position: absolute; inset: 10% -20% 0; background: radial-gradient(50% 50% at 50% 60%, #ff6a1333, transparent 70%); z-index: -1; }

/* ---------- close-ups from the reel ---------- */
.cu-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cu { margin: 0; position: relative; overflow: hidden; border-radius: 20px; border: 1px solid var(--line); background: #000; aspect-ratio: 4 / 5; }
.cu img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.cu:hover img { transform: scale(1.03); }
.cu figcaption { position: absolute; inset: auto 0 0; padding: 48px 20px 20px; background: linear-gradient(180deg, transparent, #000000d9 55%); }
.cu figcaption b { display: block; font: 600 19px/1.25 var(--font-display); }
.cu figcaption span { display: block; margin-top: 4px; color: #c9ccd2; font-size: 14px; }

/* ---------- how a reel gets made ---------- */
.made-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.st-list { position: relative; list-style: none; margin: 0; padding: 0 0 0 0; padding-inline-start: 40px; }
.st-line { position: absolute; inset-inline-start: 7px; top: 12px; bottom: 12px; width: 2px; background: var(--line2); border-radius: 2px; }
.st-line i { position: absolute; inset-inline: 0; top: 0; height: var(--fill, 0%); background: var(--accent); border-radius: 2px; transition: height .4s ease-out; }
.st { position: relative; padding: 24px 0 72px; color: var(--muted); transition: color .3s ease-out; }
.st:last-child { padding-bottom: 24px; }
.st-dot { position: absolute; inset-inline-start: -40px; top: 30px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line2); transition: border-color .3s ease-out, background-color .3s ease-out; }
.st.on .st-dot { border-color: var(--accent); background: var(--accent); }
.st-n { display: block; color: var(--dim); font: 500 13px/1 ui-monospace, "SF Mono", Menlo, monospace; margin-bottom: 8px; }
.st h3 { margin: 0 0 8px; font: 600 24px/1.2 var(--font-display); letter-spacing: -.015em; color: var(--muted); transition: color .3s ease-out; }
.st.on h3 { color: var(--text); }
.st p { margin: 0; font-size: 16px; max-width: 30em; }
.st-img { display: none; }
.made-frame { align-self: stretch; }
.made-sticky { position: sticky; top: calc(50vh - min(280px, 32vh) + 30px); height: min(560px, 64vh); }
.sf { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: translateY(12px); transition: opacity .45s ease-out, transform .45s ease-out; }
.sf .phone { height: 100%; }
.sf .sf.on { opacity: 1; transform: none; }

/* the AI section after the steps: the assistant card runs full width */
.bento .b-card.wide { grid-column: 1 / -1; }
/* ---------- tool rail ---------- */
.rail-wrap { position: relative; }
.rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 16px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.r-card { flex: 0 0 272px; scroll-snap-align: start; display: flex; flex-direction: column; min-height: 248px; padding: 24px; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--line); outline: none; transition: background-color .25s ease-out, border-color .25s ease-out; }
.r-card svg { width: 24px; height: 24px; fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s ease-out; }
.r-card h3 { margin: auto 0 8px; font: 600 20px/1.2 var(--font-display); letter-spacing: -.015em; }
.r-card p { margin: 0; color: var(--muted); font-size: 15px; transition: color .25s ease-out; }
/* one card carries the orange: the one under the pointer or keyboard focus, else the first */
.r-card:hover, .r-card:focus-visible, .rail:not(:hover):not(:focus-within) .r-card:first-child { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.r-card:hover svg, .r-card:focus-visible svg, .rail:not(:hover):not(:focus-within) .r-card:first-child svg { stroke: var(--on-accent); }
.r-card:hover p, .r-card:focus-visible p, .rail:not(:hover):not(:focus-within) .r-card:first-child p { color: #3d1d06; }
.rail-nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.rn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line2); background: transparent; color: var(--text); cursor: pointer; transition: background-color .15s ease-out; }
.rn:hover { background: #ffffff12; }
.rn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .rn svg { transform: scaleX(-1); }

/* ---------- FAQ: round +/− buttons that fill orange when open ---------- */
.faq details { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 4px 0; }
.faq summary { align-items: center; padding: 20px 0; }
.faq summary::after { content: "+"; flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line2);
  color: var(--text); font-size: 18px; transition: background-color .2s ease-out, border-color .2s ease-out; }
.faq summary:hover::after { border-color: var(--accent); }
.faq details[open] summary::after { content: "−"; background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.faq p { max-width: 44em; }

/* ---------- closing card: a soft orange light rising from its bottom edge ---------- */
.p-final { position: relative; overflow: hidden; padding: 72px 28px 80px; background: var(--panel); }
.p-final::before { content: ""; position: absolute; inset: auto -10% -60% -10%; height: 120%; background: radial-gradient(50% 50% at 50% 50%, #ff6a1359, transparent 70%); pointer-events: none; }
.p-final > * { position: relative; }

/* ---------- smaller screens: no sticky scenes, everything in reading order ---------- */
@media (max-width: 860px) {
  .l-hero.split { grid-template-columns: 1fr; gap: 40px; text-align: center; padding-top: 48px; }
  .l-hero.split .cta, .l-hero.split .l-proof { justify-content: center; }
  .l-hero.split .l-proof { flex-direction: row; }
  .l-hero.split h1, .l-hero.split .lead { margin-inline: auto; }
  .h-phone { width: min(280px, 80%); }
  .cu-row { grid-template-columns: 1fr; }
  .cu { aspect-ratio: 1 / 1; }
  .made-grid { grid-template-columns: 1fr; }
  .made-frame { display: none; }
  .st { padding-bottom: 40px; color: var(--muted); }
  .st h3 { color: var(--text); }
  .st-img { display: block; margin-top: 16px; }
  .st-img .phone { width: min(260px, 80%); margin-inline: auto; }
  .r-card { flex-basis: 240px; min-height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .sf, .st-line i, .st, .st h3 { transition: none; }
}