/* Onkast marketing site: audience pages and product demonstrations. website/pages.css
   Loaded after styles.css on the homepage and the audience/information pages. Same tokens, same Archivo, same warm canvas and
   crimson. The three pathway colours (crimson Onkaster, yellow Creator, green Casting) are used as restrained accents only:
   a soft tint, a thin ring, a small label. Never a block of saturated colour behind content. No third-party requests. */

:root {
  --p-crimson: var(--crimson);
  --p-yellow: var(--gold);
  --p-green: var(--green);
  --card-line: rgba(20, 20, 20, 0.09);
  --shadow-soft: 0 14px 34px rgba(20, 20, 20, 0.08);
}

/* ─── Header: one nav for every page ─────────────────────────────────────── */
.site-header--cream nav a.is-here { opacity: 1; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.site-header nav a.nav-cta { opacity: 1; background: var(--ink); color: var(--white); padding: 8px 14px; border-radius: 999px; }
.site-header nav a.nav-cta:hover { text-decoration: none; background: #000; }

/* ─── Page hero (inner pages) ───────────────────────────────────────────── */
.page-hero { padding: 40px 0 8px; }
.page-hero .container { max-width: 880px; }
.page-hero h1 { font-size: clamp(36px, 6.4vw, 68px); line-height: 1.02; letter-spacing: -0.035em; margin: 10px 0 18px; }
.page-hero .lede { font-size: clamp(17px, 2.2vw, 20px); max-width: 640px; }
.page-hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.tag::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.tag--crimson { color: var(--p-crimson); }
.tag--yellow { color: #8a6a00; }
.tag--yellow::before { background: var(--p-yellow); }
.tag--green { color: #167a35; }
.tag--green::before { background: var(--p-green); }
.btn-ink { background: var(--ink); color: var(--white); }
.btn-ink:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(20, 20, 20, 0.3); }
.btn-line { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--white); }

/* ─── Sections ───────────────────────────────────────────────────────────── */
.block { padding: 72px 0; }
.block--tight { padding: 48px 0; }
.block--tint { background: var(--surface-alt); }
.block h2 { font-size: clamp(28px, 4.6vw, 46px); line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 14px; }
.block .lede { max-width: 620px; }
.block .head { margin-bottom: 36px; }
.block .head.center { text-align: center; }
.block .head.center .lede { margin-left: auto; margin-right: auto; }
@media (max-width: 640px) { .block { padding: 52px 0; } .block--tight { padding: 36px 0; } }

.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.split--flip > :first-child { order: 2; }
.split h3 { font-size: clamp(24px, 3.4vw, 34px); line-height: 1.1; margin-bottom: 12px; }
.split p { color: var(--body-text); font-size: 16.5px; line-height: 1.6; margin: 0 0 12px; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 28px; } .split--flip > :first-child { order: 0; } }

.points { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.points li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.points li::before { content: ''; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--accent, var(--crimson)); }
.points b { font-weight: 900; }
.points span { color: var(--body-text); display: block; font-size: 14.5px; }

/* ─── Pathway cards ──────────────────────────────────────────────────────── */
.path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .path-grid { grid-template-columns: 1fr; } }
.path { position: relative; display: flex; flex-direction: column; gap: 10px; background: var(--white); border: 1px solid var(--card-line); border-radius: var(--radius-lg); padding: 24px; text-decoration: none; color: var(--ink); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.path:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.path:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.path-icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; border: 1.5px solid; }
.path-icon svg { width: 28px; height: 28px; }
.path h3 { font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; }
.path p { margin: 0; color: var(--body-text); font-size: 15.5px; line-height: 1.55; }
.path .go { margin-top: auto; padding-top: 6px; font-weight: 900; font-size: 14.5px; }
.path--crimson .go { color: var(--p-crimson); }
.path--yellow .go { color: #8a6a00; }
.path--green .go { color: #167a35; }

/* ─── Story and differentiators ──────────────────────────────────────────── */
.story .shift { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 14px; margin: 8px 0 0; }
.story .shift > div { background: var(--white); border: 1px solid var(--card-line); border-radius: var(--radius-md); padding: 22px; }
.story .shift small { display: block; font-size: 12px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-text); margin-bottom: 8px; }
.story .shift b { display: block; font-size: clamp(20px, 3vw, 28px); line-height: 1.12; letter-spacing: -0.02em; }
.story .shift p { margin: 8px 0 0; color: var(--body-text); font-size: 15px; }
.story .shift > .arrow { display: grid; place-items: center; font-size: 28px; font-weight: 900; color: var(--crimson); background: none; border: 0; padding: 0; }
.story .shift .arrow span { display: inline-block; }
.story .shift .to { border-color: var(--crimson); }
@media (max-width: 760px) { .story .shift { grid-template-columns: 1fr; } .story .shift > .arrow { height: 26px; } .story .shift .arrow span { transform: rotate(90deg); } }
.diff-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 30px; }
@media (max-width: 760px) { .diff-grid { grid-template-columns: 1fr; } }
.diff { background: var(--white); border: 1px solid var(--card-line); border-radius: var(--radius-md); padding: 20px 22px; }
.diff h3 { font-size: 19px; letter-spacing: -0.02em; margin-bottom: 6px; }
.diff p { margin: 0; color: var(--body-text); font-size: 15px; line-height: 1.55; }
.fineprint { font-size: 13px; line-height: 1.5; color: var(--muted-text); max-width: 640px; margin: 16px 0 0; }
.demo-note { font-size: 12.5px; line-height: 1.45; color: var(--muted-text); text-align: center; margin: 14px auto 0; max-width: 300px; }

/* ─── Phones and product demonstrations ──────────────────────────────────── */
/* App UI replicas (HTML and CSS, drawn from the real screens; sample names and Cast Calls only) */
.screen { font-size: 1em; line-height: 1.35; color: var(--ink); padding: 1.157em 0.992em 0.992em; text-align: left; }
.ui-title { font-weight: 900; font-size: 1.818em; letter-spacing: -0.03em; margin: 0.496em 0.331em 0.165em; }
.ui-title i { color: var(--crimson); font-style: normal; }
.ui-sub { margin: 0 0.331em 0.826em; color: var(--muted-text); font-size: 0.992em; }
.ui-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--surface-alt); border-radius: 82.562em; padding: 0.248em; margin: 0 0.165em 0.826em; }
.ui-seg span { text-align: center; padding: 0.579em 0.331em; font-weight: 700; font-size: 0.992em; color: var(--muted-text); border-radius: 82.562em; }
.ui-seg span.on { background: var(--ink); color: var(--white); }
.ui-row { background: var(--white); border-radius: 1.322em; padding: 0.909em 0.992em; margin-bottom: 0.661em; border: 1px solid var(--card-line); }
.ui-row b { display: block; font-size: 1.116em; letter-spacing: -0.01em; }
.ui-row small { display: block; color: var(--muted-text); font-size: 0.95em; margin-top: 1px; }
.ui-row .meta-closed { color: #8b4a00; font-weight: 700; }
.ui-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.331em; margin-top: 0.744em; padding-top: 0.744em; border-top: 1px solid var(--card-line); text-align: center; }
.ui-stats strong { display: block; font-size: 1.322em; font-weight: 900; }
.ui-stats span { font-size: 0.868em; color: var(--muted-text); }
.ui-chip { display: inline-block; font-size: 0.868em; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.248em 0.661em; border-radius: 82.562em; background: var(--surface-alt); color: var(--ink); }
.ui-chip--crimson { background: rgba(212, 0, 15, 0.12); color: var(--crimson); }
.ui-chip--green { background: rgba(34, 167, 75, 0.15); color: #167a35; }
.ui-chip--amber { background: rgba(242, 194, 0, 0.28); color: #6b5200; }
.ui-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.661em; margin-top: 0.826em; }
.ui-btn { text-align: center; padding: 0.826em 0.496em; border-radius: 0.992em; font-weight: 900; font-size: 1.033em; border: 0.124em solid var(--ink); }
.ui-btn--fill { background: var(--crimson); border-color: var(--crimson); color: var(--white); }
.ui-person { display: flex; align-items: center; gap: 0.826em; }
.ui-avatar { width: 3.306em; height: 3.306em; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-weight: 900; color: var(--white); background: #8a8580; box-shadow: 0 0 0 0.165em var(--white), 0 0 0 0.331em var(--crimson); }
.ui-thumb { height: 7.603em; border-radius: 0.992em; margin: 0.826em 0 0.331em; position: relative; overflow: hidden; background: #3d3935; display: grid; place-items: center; }
.ui-thumb::after { content: ''; width: 0; height: 0; border-left: 1.405em solid rgba(255, 255, 255, 0.92); border-top: 0.909em solid transparent; border-bottom: 0.909em solid transparent; margin-left: 0.331em; }
.ui-thumb em { position: absolute; left: 0.661em; bottom: 0.496em; font-style: normal; font-size: 0.826em; font-weight: 700; color: rgba(255, 255, 255, 0.85); }
.ui-qa { font-size: 0.992em; margin: 0.661em 0.165em 0; color: var(--body-text); }
.ui-qa b { display: block; color: var(--ink); font-size: 0.95em; }
.ui-timer { display: flex; align-items: center; gap: 0.826em; margin: 0.661em 0 0.165em; }
.ui-ring { position: relative; width: 3.802em; height: 3.802em; flex: 0 0 auto; display: grid; place-items: center; }
.ui-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ui-ring span { position: relative; width: 2.975em; height: 2.975em; border-radius: 50%; background: var(--white); display: grid; place-items: center; font-weight: 900; font-size: 0.909em; }
.ui-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.248em; margin: 0.331em 0.165em 0.992em; text-align: center; }
.ui-week div { padding: 0.413em 0; border-radius: 0.826em; font-size: 0.868em; color: var(--muted-text); font-weight: 700; }
.ui-week div b { display: block; font-size: 1.157em; color: var(--ink); font-weight: 900; }
.ui-week div.sel { background: var(--ink); color: rgba(255, 255, 255, 0.7); }
.ui-week div.sel b { color: var(--white); }
.ui-week div.dot::after { content: ''; display: block; width: 0.413em; height: 0.413em; margin: 0.248em auto 0; border-radius: 50%; background: var(--crimson); }
.ui-ev { display: grid; grid-template-columns: 0.331em 1fr; gap: 0.826em; background: var(--white); border: 1px solid var(--card-line); border-radius: 1.157em; padding: 0.826em 0.992em 0.826em 0; margin-bottom: 0.661em; overflow: hidden; }
.ui-ev::before { content: ''; background: var(--crimson); }
.ui-ev b { display: block; font-size: 1.074em; }
.ui-ev small { display: block; color: var(--muted-text); font-size: 0.95em; }
.ui-prompt { background: var(--white); border: 1px solid var(--card-line); border-radius: 1.322em; padding: 0.992em; min-height: 6.942em; font-size: 1.074em; color: var(--ink); }
.ui-prompt i { color: var(--muted-text); font-style: normal; }
.ui-draft { margin-top: 0.826em; background: var(--white); border-radius: 1.322em; padding: 0.992em; border: 1px solid var(--card-line); }
.ui-draft b { display: block; font-size: 1.24em; letter-spacing: -0.02em; margin-bottom: 0.496em; }
.ui-tags { display: flex; flex-wrap: wrap; gap: 0.413em; }
.ui-share { display: grid; gap: 0.579em; margin-top: 0.331em; }
.ui-share div { display: flex; align-items: center; justify-content: space-between; gap: 0.661em; background: var(--white); border: 1px solid var(--card-line); border-radius: 1.157em; padding: 0.826em 0.992em; font-weight: 700; font-size: 1.033em; }
.ui-share small { color: var(--muted-text); font-weight: 400; }
.share-trio { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 1.818em; align-items: center; }
@media (max-width: 52.893em) { .share-trio { grid-template-columns: 1fr; } }
.photo { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.photo--tall { width: 100%; max-width: 42.975em; margin: 0 auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 64%; }

/* ─── Steps ──────────────────────────────────────────────────────────────── */
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; list-style: none; margin: 0; padding: 0; }
.steps--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .steps, .steps--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps, .steps--3 { grid-template-columns: 1fr; } }
.steps li { counter-increment: s; background: var(--white); border: 1px solid var(--card-line); border-radius: var(--radius-md); padding: 20px; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 900; font-size: 14px; margin-bottom: 12px; background: var(--accent, var(--crimson)); color: var(--white); }
.steps--yellow li::before { color: var(--ink); }
.steps h3 { font-size: 18px; letter-spacing: -0.02em; margin-bottom: 6px; }
.steps p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--body-text); }

/* ─── Feature cards ──────────────────────────────────────────────────────── */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 960px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .feat-grid { grid-template-columns: 1fr; } }
.feat { background: var(--white); border: 1px solid var(--card-line); border-radius: var(--radius-md); padding: 20px; }
.feat h3 { font-size: 17.5px; letter-spacing: -0.02em; margin-bottom: 6px; }
.feat p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--body-text); }
.feat .what { display: block; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--muted-text); }

/* ─── Pricing ────────────────────────────────────────────────────────────── */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; } }
.price { background: var(--white); border: 1px solid var(--card-line); border-radius: var(--radius-lg); padding: 26px; display: flex; flex-direction: column; gap: 6px; }
.price--pro { background: var(--ink); color: var(--white); border-color: var(--ink); }
.price small { font-size: 12px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--crimson); }
.price--pro small { color: rgba(255, 255, 255, 0.78); }
.price .amount { font-size: clamp(38px, 5vw, 52px); font-weight: 900; letter-spacing: -0.04em; line-height: 1; margin-top: 4px; }
.price .amount span { font-size: 16px; font-weight: 700; letter-spacing: 0; color: var(--muted-text); margin-left: 6px; }
.price--pro .amount span { color: rgba(255, 255, 255, 0.72); }
.price p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--body-text); }
.price--pro p { color: rgba(255, 255, 255, 0.85); }
.price .note { font-size: 13px; color: var(--muted-text); }
.price--pro .note { color: rgba(255, 255, 255, 0.72); }
.notice { background: var(--white); border: 1px solid var(--card-line); border-left: 4px solid var(--ink); border-radius: var(--radius-sm); padding: 16px 18px; font-size: 14.5px; line-height: 1.55; color: var(--body-text); max-width: 760px; }
.notice b { color: var(--ink); }
.pricing-teaser .price-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px) { .pricing-teaser .price-mini { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pricing-teaser .price-mini { grid-template-columns: 1fr; } }
.price-mini > div { background: var(--white); border: 1px solid var(--card-line); border-radius: var(--radius-md); padding: 18px; }
.price-mini b { display: block; font-size: 26px; letter-spacing: -0.03em; font-weight: 900; }
.price-mini span { display: block; font-size: 13.5px; color: var(--body-text); margin-top: 2px; }
.price-mini small { display: block; font-size: 11.5px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-text); margin-bottom: 6px; }

/* ─── FAQ ────────────────────────────────────────────────────────────────── */
.faq-list { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; }
.faq-list h2 { font-size: 20px; letter-spacing: -0.02em; margin: 26px 0 4px; }
.faq-list details { background: var(--white); border: 1px solid var(--card-line); border-radius: var(--radius-sm); padding: 0 18px; }
.faq-list summary { cursor: pointer; padding: 16px 0; font-weight: 700; font-size: 16px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; font-weight: 900; font-size: 20px; line-height: 1; color: var(--crimson); }
.faq-list details[open] summary::after { content: '\2212'; }
.faq-list summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.faq-list details p { margin: 0 0 16px; color: var(--body-text); font-size: 15px; line-height: 1.6; }

/* ─── Calls to action ────────────────────────────────────────────────────── */
.cta-band { background: var(--ink); color: var(--white); border-radius: var(--radius-lg); padding: 40px 32px; text-align: center; }
.cta-band h2 { color: var(--white); font-size: clamp(26px, 4.4vw, 42px); margin-bottom: 10px; }
.cta-band p { color: rgba(255, 255, 255, 0.82); max-width: 560px; margin: 0 auto 22px; font-size: 16.5px; }
.cta-band .btn-primary { background: var(--crimson); color: var(--white); }
.cta-band .btn-line { color: var(--white); border-color: rgba(255, 255, 255, 0.7); }
.cta-band .btn-line:hover { background: var(--white); color: var(--ink); }
.cta-band .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.invite { background: var(--white); border: 1px solid var(--card-line); border-radius: var(--radius-lg); padding: 28px; display: grid; gap: 10px; max-width: 760px; }
.invite h3 { font-size: 22px; letter-spacing: -0.02em; }
.invite p { margin: 0; color: var(--body-text); font-size: 15.5px; line-height: 1.55; }
.invite .q { font-weight: 700; color: var(--ink); border-left: 3px solid var(--green); padding-left: 12px; }

/* ─── Footer with the three routes ───────────────────────────────────────── */
.site-footer .foot-routes { margin-bottom: 8px; }
.site-footer .foot-routes a { margin: 0 10px; }
.site-footer .foot-note { max-width: 560px; margin: 12px auto 0; font-size: 12px; line-height: 1.5; }

/* ─── Motion respects the viewer ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) { .path, .path:hover { transition: none; transform: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM PASS (2026-10-30): one iPhone system, route heroes, journey, makers, motifs, buttons, pricing
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── The iPhone: one construction, one proportion, everywhere ──────────────
   Everything inside is sized in cqw (a percentage of the phone's own width) so the frame, island, corners and the app UI scale
   together at any size. Screen proportion is the real iPhone 17 screen, 1206 x 2622, and a screenshot is never stretched:
   it fills the screen box at exactly that ratio. */
.device { --dw: 280px; position: relative; width: min(var(--dw), 100%); aspect-ratio: 100 / 211.4; margin: 0 auto; container-type: inline-size; }
.device-body { position: absolute; inset: 0; border-radius: 16.5cqw; padding: 2.6cqw;
  background: #161618;
  box-shadow: inset 0 0 0 0.45cqw #6a6a6e, inset 0 0 0 0.9cqw #0b0b0c, 0 3.5cqw 7cqw rgba(20, 20, 20, 0.28), 0 1cqw 2.4cqw rgba(20, 20, 20, 0.18); }
.device-body::before, .device-body::after { content: ''; position: absolute; width: 1.1cqw; background: #3a3a3d; border-radius: 0.6cqw; }
.device-body::before { left: -0.9cqw; top: 22cqw; height: 7cqw; box-shadow: 0 11cqw 0 #2a2a2c, 0 21cqw 0 #2a2a2c; }
.device-body::after { right: -0.9cqw; top: 33cqw; height: 15cqw; background: #3a3a3d; }
.device-screen { position: relative; width: 100%; height: 100%; border-radius: 13.8cqw; overflow: hidden; background: #F7F3EE; isolation: isolate; }
.device-screen > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.device-screen .island { position: absolute; z-index: 5; top: 3.2cqw; left: 50%; width: 29cqw; height: 8.6cqw; margin-left: -14.5cqw; border-radius: 99cqw; background: #000; }
.device-screen .home-bar { position: absolute; z-index: 5; bottom: 2cqw; left: 50%; width: 34cqw; height: 1.15cqw; margin-left: -17cqw; border-radius: 99cqw; background: rgba(20, 20, 20, 0.88); }
.device-screen::after { content: ''; position: absolute; inset: 0; z-index: 6; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 0.3cqw rgba(255, 255, 255, 0.08), inset 0 0 6cqw rgba(0, 0, 0, 0.04); }
.device--sm { --dw: 220px; }
.device--lg { --dw: 320px; }
.device--tilt-l { transform: rotate(-5deg); }
.device--tilt-r { transform: rotate(5deg); }

/* HTML demonstration screens: a status bar, content that scales with the phone, and the real tab bar */
.device .screen { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 0; font-size: 4.5cqw; line-height: 1.32; background: #F7F3EE; }
.device .ui-status { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: 13.6cqw; padding: 3.4cqw 8cqw 0 9cqw; font-weight: 900; font-size: 4.6cqw; letter-spacing: -0.01em; }
.device .ui-status span:last-child { display: inline-flex; gap: 1.4cqw; align-items: center; }
.device .ui-status svg { height: 3.4cqw; width: auto; fill: var(--ink); }
.device .ui-body { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 1cqw 4.4cqw 0; }
.device .ui-tabbar { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-around; height: 21cqw; padding: 3.2cqw 1.6cqw 0; background: #fff; border-top: 0.3cqw solid #EDE9E3; }
.device .ui-tabbar svg { width: 7.2cqw; height: 7.2cqw; margin-top: 1.6cqw; stroke: #C0B8B0; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.device .ui-tabbar svg.on { stroke: var(--crimson); stroke-width: 2.2; }
.device .ui-tabbar .plus { width: 13.4cqw; height: 9.8cqw; border-radius: 3.4cqw; background: var(--crimson); display: grid; place-items: center; }
.device .ui-tabbar .plus svg { stroke: #fff; width: 5.2cqw; height: 5.2cqw; margin: 0; stroke-width: 2.4; }

/* A freestanding poster (not an app screen): a 9:16 Cast Call poster with real depth */
.poster { display: block; width: min(var(--dw, 280px), 100%); margin: 0 auto; aspect-ratio: 9 / 16; border-radius: 4.4% / 2.5%; overflow: hidden; box-shadow: 0 30px 60px rgba(20, 20, 20, 0.3), 0 8px 18px rgba(20, 20, 20, 0.18); background: var(--crimson); }
.poster img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ─── Buttons: one primary, one secondary, side by side where they fit ──── */
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.actions .btn { flex: 0 1 auto; min-width: 0; white-space: nowrap; height: 52px; padding: 0 22px; font-size: 15.5px; display: inline-flex; align-items: center; justify-content: center; }
.btn-red { background: var(--crimson); color: #fff; box-shadow: 0 6px 14px rgba(20, 20, 20, 0.16); }
.btn-red:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(20, 20, 20, 0.22); }
.btn-quiet { background: transparent; color: var(--ink); border: 2px solid rgba(20, 20, 20, 0.85); }
.btn-quiet:hover { background: var(--ink); color: #fff; }
.on-dark .btn-quiet, .btn-quiet--light { color: #fff; border-color: rgba(255, 255, 255, 0.75); }
.on-dark .btn-quiet:hover, .btn-quiet--light:hover { background: #fff; color: var(--ink); }
@media (max-width: 520px) { .actions { flex-wrap: nowrap; } .actions .btn { flex: 1 1 0; padding: 0 12px; font-size: 14.5px; height: 50px; } }
@media (max-width: 340px) { .actions { flex-wrap: wrap; } .actions .btn { flex: 1 1 100%; } }
.hero-note { margin: 16px 0 0; max-width: 520px; font-size: 13px; line-height: 1.5; color: var(--muted-text); }

/* ─── Route heroes: one responsive system, route-specific personality ────── */
.route-hero { position: relative; overflow: hidden; padding: 28px 0 72px; background: var(--canvas); border-top: 6px solid var(--accent, var(--crimson)); }
.route-hero--crimson { --tint: rgba(212, 0, 15, 0.13); --accent: var(--crimson); }
.route-hero--yellow { --tint: rgba(242, 194, 0, 0.26); --accent: var(--gold); }
.route-hero--green { --tint: rgba(34, 167, 75, 0.18); --accent: var(--green); }
.route-hero .container { position: relative; z-index: 1; }
.route-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 40px; align-items: center; padding-top: 32px; }
.route-copy .tag { margin-bottom: 14px; display: flex; }
.route-copy h1 { font-size: clamp(40px, 6.6vw, 78px); line-height: 0.98; letter-spacing: -0.04em; margin-bottom: 18px; text-wrap: balance; }
.route-copy .lede { font-size: clamp(17px, 2vw, 20px); max-width: 540px; margin-bottom: 26px; }
.route-visual { position: relative; display: grid; place-items: center; min-height: 360px; }
.route-visual .device + .device { position: absolute; }
.route-visual--pair { height: clamp(420px, 52vw, 600px); }
.route-visual--pair .device:nth-child(1) { --dw: clamp(165px, 17vw, 212px); position: absolute; left: 0; top: 10%; transform: rotate(-6deg); z-index: 2; }
.route-visual--pair .device:nth-child(2), .route-visual--pair .poster:nth-child(2) { --dw: clamp(185px, 19vw, 236px); position: absolute; right: 0; top: 0; transform: rotate(4deg); }
@media (max-width: 900px) {
  .route-hero { padding-bottom: 48px; }
  .route-hero-grid { grid-template-columns: 1fr; gap: 28px; padding-top: 20px; }
  .route-visual { min-height: 0; }
  .route-visual--pair { height: clamp(360px, 92vw, 430px); }
  .route-visual--pair .device:nth-child(1) { --dw: 44vw; left: 3%; }
  .route-visual--pair .device:nth-child(2), .route-visual--pair .poster:nth-child(2) { --dw: 46vw; right: 3%; }
}

/* ─── Which one are you: three clear invitations ───────────────────────────
   Default: a clean white card, black type, the approved black icon with a thin pathway-coloured ring. Hover, keyboard focus or a
   press turns the whole card into the solid pathway colour (never a gradient), with the type and icon switched for contrast.
   Nothing stays selected: choosing navigates. */
.pathways2 { position: relative; padding: 84px 0 76px; background: var(--canvas); }
.pathways2 .head { margin-bottom: 38px; }
.pathways2 h2 { font-size: clamp(32px, 5.2vw, 56px); letter-spacing: -0.04em; line-height: 1; }
.p2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .p2-grid { grid-template-columns: 1fr; gap: 12px; } .p2 { min-height: 0; padding: 22px 22px 18px; gap: 12px; } }
.p2 { --a: var(--crimson); --on: #fff; --surface: #fff; --text: var(--ink); --body: var(--body-text); --gap: #fff; --ringc: var(--a); --lab: var(--ink); --btn-bg: var(--ink); --btn-fg: #fff; --edge: rgba(20, 20, 20, 0.1);
  position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 286px; padding: 26px 26px 22px; border-radius: 26px; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1.5px solid var(--edge); touch-action: manipulation; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease; }
.p2--yellow { --a: var(--gold); --on: var(--ink); }
.p2--green { --a: var(--green); --on: var(--ink); }
.p2-top { display: flex; align-items: center; gap: 18px; }
.p2-badge { position: relative; flex: 0 0 auto; width: 52px; height: 52px; margin: 5px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; box-shadow: 0 0 0 2px var(--gap), 0 0 0 4px var(--ringc); transition: box-shadow 0.18s ease; }
.p2-badge svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.p2-label { font-size: 12px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lab); }
.p2 h3 { font-size: clamp(26px, 2.6vw, 32px); line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.p2 p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--body); max-width: 34ch; }
.p2-go { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; font-weight: 900; font-size: 14.5px; }
.p2-go i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--btn-bg); color: var(--btn-fg); font-style: normal; transition: background-color 0.18s ease, color 0.18s ease; }
.p2:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.p2:is(:focus-visible, :active) { --surface: var(--a); --text: var(--on); --body: var(--on); --gap: var(--a); --ringc: var(--on); --lab: var(--on); --btn-bg: var(--on); --btn-fg: var(--a); --edge: var(--a); }
@media (hover: hover) { .p2:hover { --surface: var(--a); --text: var(--on); --body: var(--on); --gap: var(--a); --ringc: var(--on); --lab: var(--on); --btn-bg: var(--on); --btn-fg: var(--a); --edge: var(--a); transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .p2, .p2-badge, .p2-go i { transition: none; } .p2:hover { transform: none; } }

/* ─── The journey: WATCH, DISCOVER, APPLY, TAKE PART ─────────────────────── */
.journey { position: relative; overflow: hidden; padding: 80px 0 64px; background: var(--crimson); color: #fff; }
.journey .container { position: relative; z-index: 1; }
.journey h2 { color: #fff; font-size: clamp(34px, 6vw, 68px); line-height: 0.98; letter-spacing: -0.04em; max-width: 14ch; text-wrap: balance; }
.journey .kicker { display: block; margin-bottom: 14px; font-size: 12px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.journey .sub { margin: 14px 0 0; color: #fff; font-size: clamp(18px, 2.2vw, 22px); font-weight: 800; max-width: 680px; text-wrap: balance; }
.journey .sub--2 { max-width: 640px; margin-top: 8px; font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, 0.92); }
.j-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 54px; align-items: start; }
.j-stage { position: relative; text-align: center; }
.j-stage:nth-child(2) { margin-top: 28px; } .j-stage:nth-child(3) { margin-top: 56px; } .j-stage:nth-child(4) { margin-top: 84px; }
.j-word { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 13px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; }
.j-word b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--crimson); font-size: 12px; letter-spacing: 0; }
.j-note { margin: 18px auto 0; max-width: 240px; font-size: 15px; line-height: 1.45; color: #fff; }
.j-note strong { color: #fff; }
.j-video { position: relative; width: min(100%, 250px); margin: 0 auto; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 46px rgba(0, 0, 0, 0.5); background: #000; }
.j-video img { display: block; width: 100%; height: 100%; object-fit: cover; }
.j-video i { position: absolute; left: 50%; top: 50%; margin: -9px 0 0 -6px; border-left: 15px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; z-index: 1; }
.j-thought { position: relative; display: inline-block; margin-top: 22px; padding: 11px 16px; border-radius: 18px; background: #fff; color: var(--ink); font-weight: 900; font-size: 16px; letter-spacing: -0.01em; }
.j-thought::before { content: ''; position: absolute; left: 50%; top: -7px; margin-left: -7px; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); border-radius: 3px; }
.j-fine { margin: 32px 0 0; color: rgba(255, 255, 255, 0.85); font-size: 12.5px; max-width: 560px; }
.j-cta { margin-top: 30px; }
@media (max-width: 960px) {
  .j-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 38px -24px 0; padding: 4px 24px 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .j-track::-webkit-scrollbar { display: none; }
  .j-stage, .j-stage:nth-child(n) { flex: 0 0 min(72vw, 260px); margin-top: 0; scroll-snap-align: center; }
}

/* ─── Makers: Creators, Brands, Casting Companies and Agencies ───────────── */
.makers { position: relative; overflow: hidden; padding: 84px 0; background: var(--canvas); }
.makers .container { position: relative; z-index: 1; }
.makers-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.makers-copy .kicker { display: block; margin-bottom: 14px; font-size: 12px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--crimson); line-height: 1.5; }
.makers-copy h2 { font-size: clamp(34px, 5.4vw, 60px); line-height: 0.99; letter-spacing: -0.04em; margin-bottom: 18px; text-wrap: balance; }
.makers-copy .lede { max-width: 440px; margin-bottom: 24px; }
.makers-steps { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.makers-steps li { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 16px; }
.makers-steps li::before { content: ''; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--crimson); }
.makers-visual { position: relative; padding: 0 0 8%; }
.makers-photo { position: relative; width: 100%; max-width: 520px; margin: 0 auto; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; box-shadow: 0 30px 60px rgba(20, 20, 20, 0.28); }
.makers-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 74%; }
.makers-visual .poster { --dw: clamp(120px, 15vw, 168px); position: absolute; right: -2%; bottom: 0; transform: rotate(6deg); z-index: 2; }
.makers-chip { position: absolute; left: 4%; bottom: 14%; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 99px; background: #fff; font-weight: 900; font-size: 13.5px; box-shadow: 0 14px 28px rgba(20, 20, 20, 0.25); }
.makers-chip::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
@media (max-width: 900px) {
  .makers { padding: 56px 0 64px; }
  .makers-grid { grid-template-columns: 1fr; gap: 30px; }
  .makers-photo { aspect-ratio: 5 / 4; max-width: 100%; }
  .makers-photo img { object-position: 50% 78%; }
  .makers-visual .poster { --dw: 30vw; right: 2%; }
  .makers-chip { left: 3%; bottom: 12%; font-size: 12.5px; }
}

/* ─── The product, scene by scene ────────────────────────────────────────── */
.scenes { padding: 84px 0; background: var(--canvas); }
.scene-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 22px; margin-top: 44px; align-items: start; }
.scene h3 { font-size: 22px; letter-spacing: -0.03em; line-height: 1.1; margin: 22px 0 6px; text-align: center; }
.scene p { margin: 0 auto; max-width: 270px; text-align: center; font-size: 15px; line-height: 1.5; color: var(--body-text); }
@media (max-width: 900px) {
  .scene-row { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 34px -24px 0; padding: 4px 24px 16px; scrollbar-width: none; }
  .scene-row::-webkit-scrollbar { display: none; }
  .scene { flex: 0 0 min(70vw, 270px); scroll-snap-align: center; }
}

/* ─── Pricing, elevated ──────────────────────────────────────────────────── */
.price-home { position: relative; overflow: hidden; padding: 84px 0; background: var(--canvas); }
.price-home h2 { font-size: clamp(32px, 5vw, 54px); letter-spacing: -0.04em; line-height: 1; margin-bottom: 12px; }
.price-home .lede { max-width: 480px; margin-bottom: 34px; }
.ph-grid { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 16px; align-items: stretch; }
@media (max-width: 900px) { .ph-grid { grid-template-columns: 1fr; } }
.ph { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 26px; border-radius: 26px; background: #fff; border: 1px solid var(--card-line); overflow: hidden; }
.ph small { font-size: 12px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--crimson); }
.ph .amt { font-size: clamp(40px, 5vw, 56px); font-weight: 900; letter-spacing: -0.05em; line-height: 1; margin-top: 4px; }
.ph .amt span { font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--muted-text); margin-left: 6px; }
.ph p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--body-text); }
.ph--pro { background: #141414; color: #fff; border-color: #141414; }
.ph--pro small { color: #fff; } .ph--pro p, .ph--pro .amt span { color: rgba(255, 255, 255, 0.78); }
.ph--free { background: #fff; }
.price-home .strip { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 9px 16px; border-radius: 99px; background: #141414; color: #fff; font-weight: 900; font-size: 13.5px; }
.price-home .strip::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--crimson); }
.price-home .fine { margin: 20px 0 0; font-size: 13px; color: var(--muted-text); }

/* ─── Section-leading kickers (a label that never duplicates the heading) ─── */
.kicker-line { display: block; margin-bottom: 12px; font-size: 12px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--crimson); }
.final-motifs { position: relative; }

/* Makers on solid brand crimson, white type */
.makers--red { background: var(--crimson); color: #fff; }
.makers--red .makers-copy .kicker { color: #fff; }
.makers--red h2 { color: #fff; }
.makers--red .makers-photo { box-shadow: 0 24px 48px rgba(20, 20, 20, 0.35); }

/* Homepage pricing grid */
.ph-grid { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 16px; align-items: stretch; }
@media (max-width: 900px) { .ph-grid { grid-template-columns: 1fr; } }
.pathways2 .head.center, .scenes .container > .kicker-line { text-align: left; }
.pathways2 .head.center { text-align: center; }
.scenes .scene-row { margin-top: 48px; }
.scenes .tag { margin-bottom: 20px; }
.j-cta { display: flex; }

.ui-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5em; margin-top: 0.6em; }
.ui-facts div { background: var(--surface-alt); border-radius: 0.9em; padding: 0.6em 0.5em; font-weight: 900; font-size: 0.95em; text-align: center; }
.ui-facts small { display: block; margin: 0 0 0.15em; font-weight: 700; color: var(--muted-text); font-size: 0.78em; }
.scene .poster { --dw: 292px; margin-top: 26px; }

/* Homepage hero on phones: the hero reorders its children (headline, phone, supporting line, action), so the actions row takes the action's slot */
.split .kicker-line, .share-trio .kicker-line { font-size: 12px; line-height: 1.4; margin: 0 0 12px; color: var(--crimson); }


/* Makers, redesigned: numbered steps instead of bullets; the photo sits in a figure with its caption beneath */
.makers--red .makers-steps { gap: 12px; margin-bottom: 28px; }
.makers--red .makers-steps li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; border: 1.5px solid rgba(255, 255, 255, 0.55); font-size: 17px; font-weight: 900; letter-spacing: -0.01em; }
.makers--red .makers-steps li::before { content: counter(m); counter-increment: m; width: 34px; height: 34px; margin: 0; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--crimson); font-size: 15px; font-weight: 900; }
.makers--red .makers-steps { counter-reset: m; }
.makers-fig { margin: 0; position: relative; }
.makers-fig .makers-photo { margin: 0 auto; }
.photo-credit { display: block; margin: 10px auto 0; max-width: 520px; font-size: 12px; font-weight: 700; color: var(--muted-text); text-align: left; }
.makers--red .photo-credit { color: rgba(255, 255, 255, 0.85); max-width: 58%; margin-left: 0; }
.makers-visual { padding: 0 0 6%; }
.makers-visual .poster { right: 0; bottom: 0; }
@media (max-width: 900px) { .makers--red .makers-photo { aspect-ratio: 4 / 3; } .makers-visual .poster { --dw: 34vw; right: 2%; bottom: 0; } .makers--red .photo-credit { max-width: 52%; } .makers { padding: 64px 0 72px; } .makers-chip { left: 4%; bottom: 17%; } }
.makers-chip { bottom: 16%; }
.kicker-plain { display: block; margin-bottom: 14px; font-size: 12px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--crimson); }
.ui-stage { background: var(--crimson); color: #fff; border-radius: 1.4em; padding: 1.2em 1.1em 1.1em; margin: 0 0 0.7em; }
.ui-stage small { display: block; font-weight: 700; font-size: 0.85em; opacity: 0.9; }
.ui-stage b { display: block; margin-top: 0.3em; font-size: 1.55em; line-height: 1.08; letter-spacing: -0.03em; }
.ui-stage .ui-edit { display: inline-block; margin-top: 0.6em; padding: 0.3em 0.7em; border-radius: 99em; background: rgba(20, 20, 20, 0.35); font-size: 0.8em; font-weight: 900; }
.ui-intro { margin: 0 0.2em 0.7em; color: var(--body-text); font-size: 0.95em; }
.ui-block { background: #fff; border: 1px solid var(--card-line); border-radius: 1.1em; padding: 0.75em 0.85em; margin-bottom: 0.55em; }
.ui-block > small { display: block; font-weight: 900; font-size: 0.78em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-text); margin-bottom: 0.3em; }
.ui-block p { margin: 0; font-size: 0.95em; line-height: 1.4; }
.device .ui-body { display: flex; flex-direction: column; }
.device .ui-body > * { flex: 0 0 auto; }
.device .ui-body > .ui-btns:last-child { margin-top: auto; margin-bottom: 4.5cqw; }

/* Casting side of the story: the real Create sheet and the poster, then the review section follows closely */
.casting { padding: 76px 0 28px; }
.casting h2 { font-size: clamp(34px, 5.4vw, 64px); line-height: 0.99; letter-spacing: -0.04em; max-width: 16ch; text-wrap: balance; }
.casting .scene-row--two { grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; gap: 30px 64px; }
.casting .scene .device { --dw: min(100%, 260px); }
.casting .scene h3, .casting .scene p { max-width: 300px; margin-inline: auto; }
.one-place { padding-top: 40px; }
@media (max-width: 900px) { .casting { padding: 52px 0 20px; } .one-place { padding-top: 28px; } .casting .scene-row--two { display: flex; } .journey { padding: 56px 0 44px; } }

/* ─── App screens drawn from the real implemented UI (em units follow the device width; 1em is about 17.5pt at 390pt wide) ─── */
.u-hdr, .u-top { display: flex; align-items: center; justify-content: space-between; margin: 0.3em 0 0.5em; }
.u-round { width: 2.3em; height: 2.3em; border-radius: 50%; background: #fff; border: 1px solid var(--card-line); display: grid; place-items: center; }
.u-round svg { width: 1.05em; height: 1.05em; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.u-stage { font-weight: 800; font-size: 0.8em; } .u-stage--crimson { color: var(--crimson); } .u-stage--gold { color: #8a6c00; } .u-stage--green { color: #167a35; }
.u-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.15em; margin-bottom: 0.7em; }
.u-hero--tight { margin-top: -0.5em; }
.u-av { width: 4.4em; height: 4.4em; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 1.1em; color: #fff; background: #8a8580; box-shadow: 0 0 0 0.16em #F7F3EE, 0 0 0 0.3em var(--crimson); margin-bottom: 0.5em; }
.u-av--sm { width: 3.6em; height: 3.6em; } .u-av--xs { width: 2.2em; height: 2.2em; font-size: 0.7em; box-shadow: 0 0 0 0.12em #fff, 0 0 0 0.24em #F2C200; margin: 0; }
.u-name { font-weight: 900; font-size: 1.3em; letter-spacing: -0.03em; }
.u-hero small, .u-by small, .u-stats small, .u-n small { color: var(--muted-text); font-size: 0.78em; }
.u-outline { margin-top: 0.55em; padding: 0.45em 1.1em; border-radius: 99px; border: 1.5px solid #E4DED5; background: #fff; font-weight: 800; font-size: 0.82em; }
.u-sec { margin: 0 0.1em 0.7em; } .u-sec i { display: block; font-style: normal; font-weight: 800; font-size: 0.68em; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(20, 20, 20, 0.45); margin-bottom: 0.35em; }
.device .u-sec p { margin: 0; font-size: 0.82em; } .u-sec--plain i { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 0.9em; }
.u-qa { padding: 0.45em 0; border-top: 1px solid var(--card-line); } .u-qa:first-of-type { border-top: 0; padding-top: 0; } .u-qa b { display: block; font-size: 0.8em; } .u-qa p { margin-top: 0.1em; }
.u-bar { margin-top: auto; margin-inline: -4.4cqw; padding: 0.7em 4.4cqw 1.3em; border-top: 1px solid var(--card-line); background: #fff; display: flex; align-items: center; justify-content: space-between; }
.u-txt { color: var(--crimson); font-weight: 800; font-size: 0.85em; } .u-act { display: inline-flex; align-items: center; gap: 0.6em; } .u-spacer { flex: 1; }
.u-accept { background: var(--crimson); color: #fff; border-radius: 0.7em; padding: 0.55em 1.3em; font-size: 0.82em; font-weight: 800; }
.u-msg { width: 2.3em; height: 2.3em; border-radius: 0.7em; border: 1px solid var(--card-line); display: grid; place-items: center; } .u-msg svg { width: 1em; height: 1em; stroke: rgba(20, 20, 20, 0.65); fill: none; stroke-width: 2; stroke-linejoin: round; }
.u-wait { text-align: right; line-height: 1.2; } .u-wait b { display: block; font-size: 0.82em; } .u-wait small { color: var(--muted-text); font-size: 0.74em; }
.u-stats { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; margin: 0.6em 0 0.5em; } .u-stats b { display: block; font-size: 0.95em; font-weight: 900; }
.device .u-bio { margin: 0 0.3em 0.7em; text-align: center; font-size: 0.74em; line-height: 1.4; }
.u-tabs { border-bottom: 1px solid var(--card-line); margin-bottom: 0.5em; padding-bottom: 0.4em; display: flex; } .u-tabs i { width: 50%; display: grid; place-items: center; padding-bottom: 0.4em; border-bottom: 2px solid var(--crimson); margin-bottom: -0.45em; } .u-tabs svg { width: 1.2em; height: 1.2em; stroke: var(--ink); fill: none; stroke-width: 1.8; }
.u-crop { position: relative; overflow: hidden; width: 100%; border-radius: 0.6em; } .u-crop img { position: absolute; max-width: none; height: auto; display: block; }
.u-cover { margin-bottom: 0.6em; border-radius: 0.9em; } .u-title { display: block; font-weight: 900; font-size: 1.15em; letter-spacing: -0.03em; line-height: 1.12; margin-bottom: 0.45em; }
.u-by { display: flex; align-items: center; gap: 0.6em; margin-bottom: 0.5em; } .u-by b { font-size: 0.82em; display: block; } .u-by em { margin-left: auto; font-style: normal; font-weight: 900; font-size: 0.62em; letter-spacing: 0.06em; text-transform: uppercase; background: #F2C200; border-radius: 99px; padding: 0.25em 0.8em; }
.u-chips { display: flex; flex-wrap: wrap; gap: 0.35em; margin-bottom: 0.6em; } .u-chips span { background: #EDE9E3; border-radius: 99px; padding: 0.3em 0.8em; font-size: 0.66em; font-weight: 700; }
.u-offer { margin-top: auto; margin-inline: -4.4cqw; padding: 0.75em 4.4cqw 1.3em; background: #fff; border-top: 1px solid var(--card-line); }
.u-offer-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.6em; } .u-offer-row b { color: var(--crimson); font-size: 0.78em; } .u-offer-row span { color: rgba(20, 20, 20, 0.6); font-size: 0.74em; font-weight: 600; }
.u-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; } .u-btn { text-align: center; padding: 0.85em 0; border-radius: 0.9em; border: 1px solid #E4DED5; font-weight: 800; font-size: 0.9em; color: rgba(20, 20, 20, 0.75); } .u-btn--fill { background: var(--crimson); border-color: var(--crimson); color: #F7F3EE; }
.device .ui-body:has(> .u-panel) { background: #7a756f; padding-top: 3cqw; } .u-panel { margin-inline: -4.4cqw; flex: 1 1 auto; background: #F7F3EE; border-radius: 6cqw 6cqw 0 0; padding: 0.7em 4.4cqw 0; overflow: hidden; }
.u-ptitle { display: flex; align-items: center; gap: 0.4em; } .u-ptitle i svg { width: 1.2em; height: 1.2em; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; } .u-ptitle b { font-weight: 900; font-size: 1.9em; letter-spacing: -0.05em; } .u-ptitle em { color: var(--crimson); font-style: normal; }
.u-psub { display: block; color: var(--muted-text); font-size: 0.8em; margin: 0 0 0.6em 1.2em; }
.u-ptabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 0.5em; } .u-ptabs span { text-align: center; font-weight: 600; font-size: 0.8em; color: var(--muted-text); padding-bottom: 0.5em; position: relative; } .u-ptabs span.on { color: var(--ink); font-weight: 800; } .u-ptabs span.on::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: 0; height: 2px; background: var(--crimson); border-radius: 1px; }
.u-cal-head { display: flex; align-items: center; justify-content: space-between; padding: 0.3em 0.4em 0.6em; } .u-cal-head b { font-size: 0.95em; } .u-cal-head i { color: var(--crimson); font-style: normal; font-size: 1.3em; font-weight: 700; line-height: 1; }
.u-cal-dow, .u-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; } .u-cal-dow span { font-size: 0.6em; font-weight: 700; color: var(--muted-text); padding-bottom: 0.5em; }
.u-cal-grid .d { position: relative; font-size: 0.85em; font-weight: 500; height: 2.5em; display: flex; flex-direction: column; align-items: center; padding-top: 0.45em; } .u-cal-grid .d u { width: 0.38em; height: 0.38em; border-radius: 50%; margin-top: 0.15em; visibility: hidden; } .u-cal-grid .d.dot u { visibility: visible; }
.u-cal-grid .d:nth-child(1) { grid-column: 1; }
.u-nsec { font-size: 0.66em; font-weight: 800; letter-spacing: 0.1em; color: var(--muted-text); margin: 0.5em 0.2em 0.5em; }
.u-n { display: flex; gap: 0.7em; align-items: flex-start; background: #fff; border-radius: 0.9em; padding: 0.8em; margin-bottom: 0.55em; } .u-n > i { flex: 0 0 auto; width: 2.3em; height: 2.3em; border-radius: 50%; display: grid; place-items: center; } .u-n > i svg { width: 1.1em; height: 1.1em; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.u-n > div { flex: 1; min-width: 0; } .u-n b { display: block; font-size: 0.82em; } .device .u-n p { margin: 0.1em 0 0.2em; font-size: 0.78em; color: var(--body-text); } .u-n u { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--crimson); margin-top: 0.3em; }

.scene-row--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 18px; }
.one-place .scene-row--four .scene h3 { font-size: 20px; }
.free-pill { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 9px 16px 9px 12px; border-radius: 99px; background: var(--ink); color: #fff; font-weight: 900; font-size: 14px; letter-spacing: 0.01em; }
.free-pill svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #fff; stroke: var(--ink); fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.casting-lede { margin: 14px 0 0; max-width: 560px; font-size: clamp(17px, 2vw, 20px); font-weight: 700; color: var(--ink); }

@media (max-width: 900px) { .scene-row--four { display: flex; } .one-place .scene-row--four .scene { flex: 0 0 min(70vw, 270px); } }
/* Tighter hand-off from the review section to pricing */
.one-place { padding-bottom: 32px; }
.price-home { padding-top: 36px; }
@media (max-width: 900px) { .one-place { padding-bottom: 12px; } .price-home { padding: 28px 0 60px; } }

.device .screen p { max-width: none; text-align: left; margin-inline: 0; line-height: 1.35; }
.device .u-bio { text-align: center; } .device .u-sec p { font-size: 0.82em; margin: 0; } .device .u-qa p { font-size: 0.82em; margin: 0.1em 0 0; } .device .u-n p { font-size: 0.78em; margin: 0.1em 0 0.2em; }
.device .ui-body > .u-panel { flex: 1 1 auto; }

/* Pro 7-day free trial (only rendered when the release gate is on): solid crimson badge, no gradient, glow or urgency */
.trial-badge { display: inline-block; align-self: flex-start; margin: 8px 0 2px; padding: 5px 12px; border-radius: 99px; background: var(--crimson); color: #fff; font-weight: 900; font-size: 12.5px; letter-spacing: 0.04em; }
.trial-line { font-weight: 700; color: #fff !important; }

/* Real applicant list (cast-call-detail.tsx Review tab + ApplicantCard.tsx). 1em is about 17.5pt on a 390pt-wide phone. */
.u-photo { object-fit: cover; display: block; }
img.u-av { width: 4.4em; height: 4.4em; border-radius: 50%; margin-bottom: 0.5em; background: #ddd; } img.u-av--sm { width: 3.6em; height: 3.6em; }
.l-top { display: flex; align-items: center; justify-content: space-between; margin: 0.3em 0 0.7em; } .l-right { display: inline-flex; align-items: center; gap: 0.55em; }
.l-top .u-round { border-radius: 0.75em; border: 0; box-shadow: 0 0.2em 0.6em rgba(20, 20, 20, 0.08); }
.l-share { display: inline-flex; align-items: center; gap: 0.35em; height: 2.3em; padding: 0 0.9em; border-radius: 99px; background: var(--crimson); color: #fff; font-weight: 900; font-size: 0.85em; } .l-share svg { width: 1em; height: 1em; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.l-title { display: block; font-weight: 900; font-size: 1.48em; line-height: 1.08; letter-spacing: -0.04em; margin-bottom: 0.55em; }
.l-status { display: flex; align-items: center; gap: 0.8em; flex-wrap: wrap; font-weight: 700; font-size: 0.74em; margin-bottom: 0.9em; } .l-open { display: inline-flex; align-items: center; gap: 0.4em; } .l-open u { width: 0.55em; height: 0.55em; border-radius: 50%; background: #22A74B; } .l-new { color: var(--crimson); }
.l-close { margin-left: auto; background: var(--crimson); color: #F7F3EE; font-weight: 900; border-radius: 99px; padding: 0.55em 0.95em; }
.l-tabs { display: grid; grid-template-columns: repeat(3, auto); gap: 0.25em; background: #EDE9E3; border-radius: 99px; padding: 0.3em; margin-bottom: 0.3em; } .l-tabs span { text-align: center; font-weight: 600; font-size: 0.74em; color: rgba(20, 20, 20, 0.5); padding: 0.6em 0.3em; border-radius: 99px; white-space: nowrap; } .l-tabs span.on { background: #141414; color: #F7F3EE; font-weight: 800; }
.l-group { margin: 0.9em 0 0.15em; font-weight: 800; font-size: 0.68em; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(20, 20, 20, 0.5); }
.l-row { display: flex; gap: 0.75em; align-items: flex-start; padding: 0.85em 0; border-bottom: 1px solid #E4DED5; }
.l-av { flex: 0 0 auto; width: 2.85em; height: 2.85em; border-radius: 50%; box-shadow: 0 0 0 0.12em #F7F3EE, 0 0 0 0.24em var(--crimson); margin: 0.25em 0.25em 0 0.25em; object-fit: cover; }
.l-av--letter { display: grid; place-items: center; background: #8a8580; color: #fff; font-weight: 900; font-size: 1.05em; }
.l-body { flex: 1; min-width: 0; } .l-name { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6em; } .l-name b { font-size: 0.91em; font-weight: 800; } .l-st { font-weight: 800; font-size: 0.68em; } .l-st--new { color: var(--crimson); } .l-st--gold { color: #8a6c00; }
.l-meta, .l-traits { display: block; font-size: 0.71em; color: rgba(20, 20, 20, 0.55); margin-top: 0.2em; } .l-traits { color: rgba(20, 20, 20, 0.62); }
.l-actions { display: flex; align-items: center; gap: 0.55em; margin-top: 0.65em; }
.l-accept { background: #141414; color: #F7F3EE; border-radius: 99px; padding: 0.4em 0.9em; font-weight: 900; font-size: 0.74em; } .l-reject { border: 1.5px solid rgba(212, 0, 15, 0.35); color: var(--crimson); border-radius: 99px; padding: 0.33em 0.8em; font-weight: 900; font-size: 0.74em; }
.l-msg { margin-left: auto; width: 1.75em; height: 1.75em; border-radius: 50%; background: #EDE9E3; display: grid; place-items: center; } .l-msg svg { width: 0.8em; height: 0.8em; stroke: rgba(20, 20, 20, 0.6); fill: none; stroke-width: 2; stroke-linejoin: round; }
.l-wait small { display: block; font-size: 0.71em; font-weight: 600; color: rgba(20, 20, 20, 0.55); margin: 0; } .l-wait b { font-size: 0.71em; color: rgba(20, 20, 20, 0.8); }

/* Closing call to action: headline, then the button, then a quiet availability line */
.final-cta h2 { font-size: clamp(30px, 4.8vw, 54px); line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; margin-bottom: 30px; }
.final-cta .cta-break { display: inline; }
.avail-line { margin: 16px 0 0; font-weight: 600; font-size: 14px; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.92); }

/* Pricing page: no status box. A quiet line under the cards carries the availability and payment facts. */
.price-fine { margin: 18px 0 0; max-width: 640px; font-size: 13.5px; line-height: 1.5; color: var(--muted-text); } .price-fine a { color: inherit; text-decoration: underline; }
.block--snug { padding: 28px 0 40px; } @media (max-width: 640px) { .block--snug { padding: 22px 0 32px; } }

/* Closing headline: exactly two lines on every phone. Each line is unbreakable and the size follows the width, so the longer line
   ("Extraordinary opportunities.", about 14 em wide) always fits between the side gutters with no overflow. Desktop is unchanged. */
.final-cta .cta-l { white-space: nowrap; }
@media (max-width: 760px) {
  .final-cta .container { padding-inline: 14px; }
  .final-cta h2 { font-size: calc((100vw - 28px) / 14.4); letter-spacing: -0.045em; line-height: 1.1; text-wrap: nowrap; }
}
/* Creator hero: the bold opening sentences sit inside the normal lede */
.route-hero .lede strong { font-weight: 900; color: var(--ink); }