/* Cool paper for reading, slate bands for the header, the hero and anything 9:16; wine only for action and rules. */
:root {
  --bg-paper: #F2F4F7;
  --bg-surface: #FFFFFF;
  --bg-subtle: #E6EAF0;
  --bg-studio: #1E2A38;
  --bg-studio-deep: #141B24;
  --bg-studio-elevated: #2A3747;
  --text-primary: #1B2430;
  --text-secondary: #4A5563;
  --text-muted: #5F6B7A;
  --text-on-studio: #FFFFFF;
  --text-on-studio-muted: #B8C2CE;
  --accent-primary: #7A1F2B;
  --accent-primary-hover: #5E1621;
  --accent-primary-soft: #F3E7E9;
  --accent-brass: #E8C987;
  --accent-signal: #4F6D9A;
  --accent-secondary: #7A1F2B;
  --accent-secondary-light: #C9D3E6;
  --border-hairline: #D5DBE3;
  --border-strong: #B9C2CE;
  --border-input: #6B7685;
  --border-studio: #3A4757;
  --danger: #A3271F;
  --danger-bg: #FBEDEC;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --font-display: "IBM Plex Serif", "IBM Plex Serif Fallback", Georgia, serif;
  --font-sans: "IBM Plex Sans", "IBM Plex Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, monospace;
  /* The burned-in subtitles use Inter (see AssSubtitles and app/assets/fonts), so the 9:16 preview does too. */
  --font-caption: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --shadow-lift: 0 1px 0 rgb(17 22 20 / .04), 0 18px 40px -28px rgb(17 22 20 / .35);
  --header-h: 64px;
  --gutter: 24px;

  --c-opening: #3A4250;
  --c-break: #4A5568;
  --c-promo: #6B6A5C;
  --c-questions: #55666E;
  --c-content: var(--accent-secondary-light);
  --c-closing: #2C323C;

  /* Refined landing: slate headings, translucent rules on slate, one thin accent rule, more air, one easing. */
  --text-heading: #1E2A38;
  --border-on-dark: rgb(255 255 255 / .10);
  --rule-accent: 2px;
  --space-section: 128px;
  --space-head: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 160ms;
  --dur: 480ms;
}
@media (max-width: 860px) { :root { --space-section: 72px; --space-head: 40px; } }


*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 32px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
[id] { scroll-margin-top: 96px; }
/* The home sections linked from the header and footer start right below the fixed header: the scroll-padding above
   already clears it; the extra [id] margin is for pages with sticky tabs under the header. */
#como-funciona, #exemplos, #precos, #perguntas { scroll-margin-top: 0; }
#testar { scroll-margin-top: 280px; }
body { margin: 0; background: var(--bg-paper); color: var(--text-primary); font: 400 1rem/1.6 var(--font-sans); -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; display: block; }
a { color: var(--accent-primary); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-primary-hover); }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; letter-spacing: -.01em; font-weight: 600; }
h1, h2 { font-family: var(--font-display); font-weight: 500; color: var(--text-heading); }
h1 { font-size: clamp(2.125rem, 1.6rem + 1.8vw, 3rem); line-height: 1.15; }
h2 { font-size: clamp(1.75rem, 1.4rem + 1.3vw, 2.5rem); line-height: 1.12; letter-spacing: -.02em; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
code { font: .82em var(--font-mono); background: var(--bg-subtle); padding: 1px 5px; border-radius: var(--radius-xs); }
.display { font-family: var(--font-display); font-weight: 600; letter-spacing: -.015em; line-height: 1.1; }
.lp-section .display { font-weight: 500; }
.display em, .brand em { font-style: italic; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.wrap { width: 100%; max-width: calc(1200px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 520px) { :root { --gutter: 20px; } }
@media (max-width: 360px) { :root { --gutter: 16px; } }
.muted { color: var(--text-muted); }
.small { font-size: .875rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kicker, .eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; color: var(--accent-primary); font: 500 .75rem/1.4 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; }
.kicker.on-dark { color: var(--accent-brass); }
.legal-ref { color: var(--accent-secondary); font: 500 .82rem/1.4 var(--font-mono); letter-spacing: .02em; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 1px solid var(--accent-primary); border-radius: var(--radius-xs); background: var(--accent-primary); color: #fff; font: 500 .9375rem/1.2 var(--font-sans); letter-spacing: .005em; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--accent-primary-hover); border-color: var(--accent-primary-hover); color: #fff; }
.btn:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.btn:disabled { opacity: .7; cursor: progress; }
.btn.sm { min-height: 36px; padding: 0 14px; font-size: .875rem; }
.btn.xs { min-height: 28px; padding: 0 10px; font-size: .76rem; }
.btn.lg { min-height: 52px; padding: 0 24px; font-size: 1rem; }
.btn.ghost { background: transparent; border-color: var(--border-strong); color: var(--text-primary); }
.btn.ghost:hover { background: var(--bg-surface); border-color: var(--text-primary); color: var(--text-primary); }
/* On the slate bands the primary action is white and the secondary is a white outline: wine on slate is too dim. */
.btn.on-dark { background: #fff; border-color: #fff; color: var(--bg-studio); }
.btn.on-dark:hover { background: var(--bg-subtle); border-color: var(--bg-subtle); color: var(--bg-studio); }
.btn.on-dark:focus-visible { outline-color: #fff; }
.btn.ghost.on-dark { background: transparent; border-color: rgb(255 255 255 / .35); color: #fff; }
.btn.ghost.on-dark:hover { background: rgb(255 255 255 / .08); border-color: #fff; color: #fff; }
input:where(:not([type="checkbox"], [type="radio"])), textarea, select { width: 100%; padding: 12px 14px; border: 1px solid var(--border-input); border-radius: var(--radius-xs); background: var(--bg-surface); color: var(--text-primary); font: 400 1rem/1.4 var(--font-sans); }
input[type="checkbox"], input[type="radio"] { width: auto; padding: 0; border: 0; background: transparent; flex-shrink: 0; accent-color: var(--accent-primary); cursor: pointer; }
input:where(:not([type="checkbox"], [type="radio"])):focus, textarea:focus, select:focus { outline: 2px solid var(--accent-primary); outline-offset: -1px; border-color: transparent; }
textarea { resize: vertical; font-size: .9rem; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }

/* Header */
.hd { position: sticky; top: 0; z-index: 20; background: var(--bg-studio); border-bottom: 1px solid var(--border-on-dark); color: #fff; }
.hd-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: calc(var(--header-h) - 1px); }
.brand { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--text-primary); font: 600 1.02rem/1 var(--font-sans); letter-spacing: -.01em; text-decoration: none; }
.brand:hover { color: var(--text-primary); }
.brand em { font: italic 400 1.28rem/1 var(--font-display); letter-spacing: 0; }
.brand-mark { flex: none; }
.brand-cut { color: var(--accent-primary); }
.hd .brand-cut, .ft .brand-cut { color: #C8FF3D; }
.hd .brand, .hd .brand:hover, .ft .brand { color: #fff; }
.nav { display: flex; align-items: center; gap: 28px; font-size: .9rem; white-space: nowrap; }
.nav-links { display: contents; }
.nav a:not(.btn) { color: var(--text-on-studio-muted); text-decoration: none; }
.nav a:not(.btn):hover { color: #fff; }
.nav-menu { position: relative; display: none; margin: 0; }
.nav-menu summary { padding: 6px 0; color: var(--text-on-studio-muted); font-weight: 500; list-style: none; cursor: pointer; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu[open] summary, .nav-menu summary:hover { color: #fff; }
.nav-menu-panel { position: absolute; top: calc(100% + 12px); right: 0; display: grid; min-width: 200px; padding: 8px; border: 1px solid var(--border-hairline); border-top: var(--rule-accent) solid var(--accent-primary); border-radius: var(--radius-xs); background: var(--bg-surface); }
.nav .nav-menu-panel a, .nav-menu-panel button { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: var(--radius-xs); background: none; color: var(--text-secondary); font: inherit; text-align: left; cursor: pointer; }
.nav .nav-menu-panel a:hover, .nav-menu-panel button:hover { background: var(--bg-subtle); color: var(--text-primary); }
.nav a:focus-visible, .nav-menu summary:focus-visible, .hd .brand:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nav .nav-menu-panel a:focus-visible { outline-color: var(--text-primary); outline-offset: -2px; }
.nav-menu-account { display: none !important; }
@media (max-width: 1100px) {
  .nav { gap: 20px; }
  .nav .nav-links, .nav .nav-sign-out { display: none; }
  .nav-menu { display: block; }
}
@media (max-width: 520px) {
  .nav { gap: 14px; }
  .brand { font-size: .94rem; white-space: nowrap; }
  .brand em { font-size: 1.16rem; }
  .nav > .nav-account { display: none; }
  .nav-menu-account { display: block !important; }
  .nav-menu { position: static; }
  .nav-menu-panel { top: calc(100% + 4px); right: var(--gutter); }
  .nav .btn { padding: 0 12px; }
}
@media (max-width: 360px) {
  .hd-in, .nav { gap: 10px; }
  .brand { gap: 8px; }
  .brand em { font-size: 1.1rem; }
  .nav .btn { padding: 0 10px; }
}

.flash { margin: 16px 0 0; padding: 12px 16px; border: 1px solid var(--border-hairline); border-left: 4px solid var(--accent-primary); border-radius: var(--radius-xs); background: var(--bg-surface); }
.flash.alert { border-color: #F0C9C5; border-left-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.flash.alert[data-label]::before { content: attr(data-label) ". "; font-weight: 700; }
.ft { padding: 40px 0 56px; background: var(--bg-studio-deep); font-size: .88rem; color: var(--text-on-studio-muted); }
.ft a { color: #fff; text-decoration: underline; }
.ft a:hover { color: var(--bg-subtle); }
.ft a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
main > :last-child:not(.lp-section, .closing) { margin-bottom: 96px; }
.ft-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 40px; }
.ft-note { max-width: 560px; margin: 14px 0 0; }
.ft-ops { margin: 0; font-size: .8rem; }
.ft-ops a { color: #fff; }

/* Home: the form that takes a link or an MP4. The form itself has no frame: each field carries its own border. */
.command { display: grid; gap: 16px; }
.command-url { display: flex; align-items: center; gap: 10px; padding: 0 6px 0 14px; border: 1.5px solid var(--border-input); border-radius: var(--radius-lg); background: var(--bg-surface); }
.command-url:focus-within { outline: 3px solid var(--accent-primary); outline-offset: 1px; }
.command-icon { flex: none; color: #C4302B; }
.command-url input { flex: 1 1 0; min-width: 0; padding: 14px 4px; border: 0; background: transparent; font-size: 1rem; }
.command-url input:focus { outline: 0; }
.command .rights-check { margin: 0; }
.command .btn { justify-self: start; }
@media (max-width: 640px) { .command .btn { justify-self: stretch; } }

.recent { margin-top: 56px; padding-bottom: 72px; }
.rule-label { display: flex; justify-content: space-between; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border-hairline); color: var(--text-muted); font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }



/* Waiting / failure states */
.state { max-width: 640px; padding-top: 72px; }
.state h1 { font: 600 clamp(2rem, 1.5rem + 2vw, 2.8rem)/1.1 var(--font-display); }
.progress { padding-left: 1.2em; color: var(--text-secondary); }
.progress li { margin-bottom: 6px; }
.spinner { width: 32px; height: 32px; margin-bottom: 20px; border: 2px solid var(--border-hairline); border-top-color: var(--accent-primary); border-radius: 50%; animation: spin .8s linear infinite; }
.spinner.sm { display: inline-block; width: 14px; height: 14px; margin: 0 6px -2px 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.notify { margin: 28px 0; padding: 20px; border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); background: var(--bg-surface); }
.notify label { display: block; margin-bottom: 12px; font-weight: 600; }
.notify-row { display: flex; gap: 8px; }
.notify-row .btn { flex: none; }
.notify .muted { margin: 10px 0 0; font-size: .85rem; }
@media (max-width: 480px) { .notify-row { flex-direction: column; } }

/* Video: studio header + timeline */
.video-head { padding: 48px 0 40px; background: var(--bg-studio); color: var(--text-on-studio); }
.video-head a { color: var(--text-on-studio); }
.video-head-grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 40px; align-items: center; }
.video-frame { position: relative; margin: 0; }
.video-frame img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--border-studio); border-radius: var(--radius-md); }
.video-frame figcaption { position: absolute; left: 10px; bottom: 10px; padding: 3px 8px; border-radius: var(--radius-xs); background: rgb(18 22 29 / .85); color: var(--accent-secondary-light); font-size: .72rem; }
.video-channel { margin: 0 0 12px; color: var(--text-on-studio-muted); font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.video-info h1 { margin: 0 0 20px; font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.5rem); color: #fff; }
.video-facts { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 16px; }
.video-facts div { padding: 0 20px; border-left: 1px solid var(--border-studio); }
.video-facts div:first-child { padding-left: 0; border-left: 0; }
.video-facts dt { color: var(--text-on-studio-muted); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.video-facts dd { margin: 2px 0 0; font-size: .95rem; }
.video-facts .legal-ref { color: var(--accent-secondary-light); font-size: .9rem; }
.video-source { margin: 0; font-size: .82rem; }
.video-source a { color: var(--text-on-studio-muted); }

@media (max-width: 820px) { .video-head-grid { grid-template-columns: 1fr; gap: 24px; } .video-head { padding-top: 24px; } }
@media (max-width: 520px) { .video-facts { gap: 14px 28px; } .video-facts div { padding: 0; border-left: 0; } }

.timeline-card { margin-top: 40px; padding-top: 24px; background: linear-gradient(var(--border-studio), var(--border-studio)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
.timeline-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; }
.timeline-head h2 { margin: 0 auto 0 0; color: var(--text-on-studio-muted); font: 600 .74rem var(--font-sans); letter-spacing: .14em; text-transform: uppercase; }
.callout { margin: 0; color: var(--text-on-studio); font-size: .92rem; }
.callout strong { color: var(--accent-secondary-light); font-weight: 600; }
.callout a { color: var(--text-on-studio-muted); }

.timeline { position: relative; height: 36px; margin: 16px 0 6px; border-radius: var(--radius-xs); background: var(--bg-studio-elevated); }
.tl-block:first-child { border-radius: var(--radius-xs) 0 0 var(--radius-xs); }
.tl-block:last-of-type { border-radius: 0 var(--radius-xs) var(--radius-xs) 0; }
.tl-block { position: absolute; top: 0; bottom: 0; left: var(--from); width: var(--size); background: var(--c); border-right: 1px solid var(--bg-studio); }
.timeline .tl-content { background: linear-gradient(180deg, var(--accent-secondary-light), var(--accent-secondary)); }
.timeline-tick { position: absolute; top: -4px; bottom: -4px; left: var(--at); z-index: 1; width: 10px; translate: -50% 0; }
.timeline-tick::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: 2px; background: var(--bg-studio); opacity: .75; transition: background .12s, box-shadow .12s; }
.timeline-tick::after { position: absolute; bottom: calc(100% + 6px); left: 50%; width: max-content; max-width: min(300px, 80vw); padding: 6px 10px; border-radius: var(--radius-xs); background: #fff; color: var(--bg-studio); font: 500 .76rem/1.35 var(--font-sans); translate: -50% 0; pointer-events: none; }
.timeline-tick:hover, .timeline-tick:focus-visible, .timeline-tick.is-active { z-index: 2; outline: none; }
.timeline-tick:hover::after, .timeline-tick:focus-visible::after { content: attr(data-tip); }
.timeline-tick:hover::before, .timeline-tick:focus-visible::before, .timeline-tick.is-active::before { top: 0; bottom: 0; background: #fff; opacity: 1; }
.timeline-tick.is-active::before { box-shadow: 0 0 0 2px var(--accent-secondary); }
.is-highlighted { animation: target-pulse 1.8s ease-out; }
@keyframes target-pulse { 0%, 35% { box-shadow: 0 0 0 3px var(--accent-secondary); } 100% { box-shadow: 0 0 0 3px transparent; } }
.tl-scale { display: flex; justify-content: space-between; margin-bottom: 14px; color: var(--text-on-studio-muted); font-size: .68rem; }
.tl-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 0; list-style: none; color: var(--text-on-studio); font-size: .82rem; }
.tl-legend strong { font-weight: 500; }
.tl-legend .mono { color: var(--text-on-studio-muted); font-size: .74rem; }
.tl-legend .dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 1px; background: var(--c); }
.tl-legend .tl-content strong { color: var(--accent-secondary-light); }
.tl-opening { --c: var(--c-opening); } .tl-break { --c: var(--c-break); } .tl-promo { --c: var(--c-promo); }
.tl-questions { --c: var(--c-questions); } .tl-content { --c: var(--c-content); } .tl-closing { --c: var(--c-closing); }

/* Video: package tabs */
.tab-group { scroll-margin-top: var(--header-h); }
.tabs-bar { position: sticky; top: var(--header-h); z-index: 10; margin: 0 0 40px; border-bottom: 1px solid var(--border-hairline); background: var(--bg-paper); }
.tabs { display: flex; justify-content: space-between; gap: 18px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.tabs::-webkit-scrollbar { display: none; }
.tabs-bar::before, .tabs-bar::after { content: ""; position: absolute; top: 0; bottom: 1px; width: 56px; pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 1; }
.tabs-bar::before { left: 0; background: linear-gradient(to right, var(--bg-paper) 35%, rgba(250, 249, 245, 0)); }
.tabs-bar::after { right: 0; background: linear-gradient(to left, var(--bg-paper) 35%, rgba(250, 249, 245, 0)); }
.tabs-bar.fade-start::before, .tabs-bar.fade-end::after { opacity: 1; }

.tabs a { flex: none; margin-bottom: -1px; scroll-margin: 0 40px; padding: 18px 0 14px; border-bottom: 2px solid transparent; color: var(--text-secondary); font-size: .86rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.tabs a:hover { color: var(--text-primary); }
.tabs a span { margin-left: 6px; color: var(--text-muted); font: 500 .74rem var(--font-mono); }
.tabs a[aria-selected="true"] { border-bottom-color: var(--accent-primary); color: var(--text-primary); font-weight: 600; }
.tabs a[aria-selected="true"] span { color: var(--accent-primary); }
.panel-lede { max-width: 680px; margin-bottom: 32px; color: var(--text-secondary); }
@media (max-width: 640px) { .tabs-bar { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); } .tabs { gap: 22px; padding: 0 var(--gutter); } }

/* Clip station: monitor on the left, editor on the right */
.clips { display: grid; gap: 32px; }
.clip { display: grid; grid-template-columns: 320px minmax(0, 1fr); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); background: linear-gradient(90deg, var(--bg-studio) 0 320px, var(--bg-surface) 320px); overflow: hidden; scroll-margin-top: 110px; }
.phone { position: sticky; top: 132px; align-self: start; padding: 24px 28px 28px; }
.phone-screen { position: relative; container-type: inline-size; aspect-ratio: 9 / 16; border: 1px solid var(--border-studio); border-radius: var(--radius-sm); overflow: hidden; background: #000; color: #fff; }
.phone-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(6px) brightness(.5); transform: scale(1.15); }
.phone-video { position: absolute; left: 0; right: 0; top: 50%; aspect-ratio: 16 / 9; transform: translateY(-50%); overflow: hidden; background: #000; }
.phone-video img { position: absolute; top: 50%; left: 50%; height: 100%; width: auto; aspect-ratio: 16 / 9; object-fit: cover; transform: translate(-50%, -50%); border: 0; pointer-events: none; }
.phone-video iframe, .phone-video video { position: absolute; top: 50%; left: 50%; height: 100%; width: auto; aspect-ratio: 16 / 9; object-fit: cover; transform: translate(-50%, -50%); border: 0; pointer-events: auto; }
.phone-bg, .phone-top, .phone-legal-card, .phone-caption, .phone-time { pointer-events: none; }
.layout-center_crop .phone-video { top: 0; bottom: 0; aspect-ratio: auto; transform: none; }
.layout-article_card .phone-screen { background: var(--bg-studio); }
.layout-article_card .phone-video { top: 0; height: 57.3%; aspect-ratio: auto; transform: none; }
.layout-center_crop .phone-bg, .layout-article_card .phone-bg, .layout-article_card .phone-top span { display: none; }
.phone-top { position: absolute; top: 0; left: 0; right: 0; padding: 20px 14px 28px; background: linear-gradient(rgb(0 0 0 / .75), transparent); text-align: center; }
.layout-article_card .phone-top { padding: 12px 14px 0; background: none; }
.phone-top strong { display: block; font: 800 .92rem/1.2 var(--font-caption); letter-spacing: -.01em; }
.phone-top span { display: inline-block; margin-top: 6px; color: #C9D3E6; font: 500 .68rem var(--font-mono); }
/* Same proportions as the MP4 (AssSubtitles, 1080x1920): the card ends above the footer and the source line closes it. */
.phone-legal-card { display: none; position: absolute; left: 7.4%; right: 7.4%; top: 59%; bottom: 8.4%; flex-direction: column; overflow: hidden; padding-top: 8px; border-top: 2px solid #C9D3E6; text-align: center; font-size: 3.7cqw; line-height: 1.3; }
.phone-legal-card strong { display: block; margin-bottom: 4px; color: #C9D3E6; }
.phone-legal-card span { min-height: 0; overflow: hidden; }
.phone-legal-card .phone-legal-source { display: block; margin-top: auto; padding-top: 6px; font-size: 2.4cqw; color: #9AA5B8; }
.layout-article_card .phone-legal-card { display: flex; }
/* The one-line context strip the MP4 burns above the footer on the 9:16 stages (AssSubtitles::STRIP, box from y 1750 to 1810). */
.phone-legal-strip { position: absolute; left: 5.6%; right: 5.6%; bottom: 5.7%; z-index: 2; display: flex; gap: .35em; align-items: baseline; justify-content: center; margin: 0; padding: .25em .4em; background: rgb(15 22 31 / .84); color: #fff; font: 600 2.96cqw/1.25 var(--font-sans); white-space: nowrap; pointer-events: none; }
.phone-legal-strip strong { flex: none; color: #FFD54A; font-weight: 600; }
.phone-legal-strip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.phone-legal-strip small { flex: none; color: #B4B4B4; font-size: 1em; }
.layout-article_card .phone-legal-strip, .ratio-16x9 .phone-legal-strip, .phone:not(.ratio-16x9) .phone-top span { display: none; }
.phone-caption { position: absolute; left: 10px; right: 10px; top: 69.8%; margin: 0; font: 800 1.12rem/1.15 var(--font-caption); text-align: center; text-transform: uppercase; text-shadow: 0 2px 0 #000, 0 0 8px rgb(0 0 0 / .8); -webkit-text-stroke: .5px #000; }
.layout-center_crop .phone-caption { top: 70.8%; }
.layout-article_card .phone-caption { top: 42.7%; }
.phone-caption .is-current { color: #C9D3E6; display: inline-block; transform: scale(1.18); transition: transform .1s; }
.style-hormozi .phone-caption { font-size: 1.26rem; -webkit-text-stroke: 1px #000; }
.style-karaoke .phone-caption span { color: #FFFFFF; }
.style-karaoke .phone-caption .is-sung, .style-karaoke .phone-caption .is-current { color: #C9D3E6; transform: none; }
.style-minimal .phone-caption { left: 50%; right: auto; width: max-content; max-width: 84%; padding: 4px 10px; border-radius: var(--radius-xs); background: rgb(18 22 29 / .55); font: 600 .88rem/1.3 var(--font-caption); text-transform: none; text-shadow: none; -webkit-text-stroke: 0; transform: translateX(-50%); }
.style-minimal .phone-caption .is-current { color: #f5d58a; transform: none; }
.phone-play { position: absolute; top: 50%; left: 50%; z-index: 3; display: grid; place-items: center; width: 56px; height: 56px; padding: 0 0 0 4px; border: 1px solid rgb(255 255 255 / .5); border-radius: 50%; background: rgb(18 22 29 / .55); backdrop-filter: blur(6px); color: #fff; cursor: pointer; pointer-events: auto; touch-action: manipulation; transform: translate(-50%, -50%); transition: background .15s, opacity .15s; }
.phone-play:hover { background: var(--accent-primary); border-color: var(--accent-primary); }
.phone.is-playing .phone-play, .phone.is-loading .phone-play, .phone.is-ready .phone-play { opacity: 0; pointer-events: none; }
.phone-unmute { position: absolute; top: 12px; right: 10px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--accent-secondary-light); border-radius: 999px; background: rgb(18 22 29 / .88); color: var(--accent-secondary-light); font: 600 .68rem/1 var(--font-sans); letter-spacing: .04em; cursor: pointer; pointer-events: auto; touch-action: manipulation; box-shadow: 0 4px 12px rgb(0 0 0 / .45); }
.phone-unmute:hover { background: var(--accent-secondary); color: var(--bg-studio); }
.phone-time { display: block; margin-top: 8px; color: rgb(255 255 255 / .75); font-size: .66rem; text-align: center; }
.phone-watermark { position: absolute; left: 0; right: 0; bottom: .8%; z-index: 2; color: rgb(255 255 255 / .82); font-size: 2.6cqw; line-height: 1.2; font-weight: 600; letter-spacing: .02em; text-align: center; text-shadow: 0 1px 3px rgb(0 0 0 / .6); pointer-events: none; }

.clip-body { min-width: 0; padding: 28px 32px 28px; }
.clip-rank { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 10px; font-size: .78rem; }
.clip-no { color: var(--accent-secondary); font: 600 1.6rem/1 var(--font-display); }
.score { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.score::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: currentColor; }
.score-help { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 16px; height: 16px; border: 1px solid currentColor; border-radius: 999px; font: 700 .68rem/1 var(--font-sans); letter-spacing: 0; text-transform: none; vertical-align: middle; cursor: help; position: relative; opacity: .8; pointer-events: auto; }
.score-help:hover, .score-help:focus, .score-help:focus-visible { opacity: 1; outline: none; box-shadow: 0 0 0 2px rgb(201 211 230 / .45); }
.score-help::after { content: attr(data-tooltip); position: absolute; top: calc(100% + 8px); left: -8px; z-index: 30; width: min(300px, 80vw); padding: 10px 12px; border-radius: var(--radius-xs); background: #fff; color: #1b2420; box-shadow: 0 10px 28px -8px rgb(0 0 0 / .45); font: 400 .78rem/1.45 var(--font-sans); letter-spacing: 0; text-align: left; text-transform: none; white-space: normal; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s; }
.score-help:hover::after, .score-help:focus::after, .score-help:focus-visible::after { opacity: 1; visibility: visible; }
/* Inside clipped rows the popover spans the row itself, so it always fits the card width. */
.score-row { position: relative; }
.score-row .score-help { position: static; }
.score-row .score-help::after { left: 0; width: min(320px, 100%); }

.score-high { color: var(--accent-primary); } .score-mid { color: var(--accent-secondary); } .score-low { color: var(--text-muted); }
.clip-body h3 { margin-bottom: 12px; font: 600 1.85rem/1.12 var(--font-display); letter-spacing: -.01em; }
.legal { margin-bottom: 16px; color: var(--text-secondary); font: italic 400 1.05rem/1.45 var(--font-display); }
.legal strong { display: block; margin-bottom: 2px; font-style: normal; }
.legal-tooltip-wrap { position: relative; display: inline-block; text-decoration: underline dotted rgba(201, 211, 230, .75); text-underline-offset: 3px; cursor: help; outline: none; }
.legal-tooltip-wrap:focus-visible { border-radius: 3px; box-shadow: 0 0 0 2px rgb(201 211 230 / .45); }
.legal-tooltip-popover { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: max-content; max-width: min(340px, 85vw); padding: 10px 14px; border: 1px solid rgba(201, 211, 230, .45); border-radius: 10px; background: #1C1917; color: #F7F6F3; box-shadow: 0 12px 28px rgba(0, 0, 0, .28); font: italic 400 .98rem/1.45 var(--font-display); letter-spacing: 0; text-align: left; text-transform: none; white-space: normal; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s; }
.legal-tooltip-popover cite { display: block; margin-top: 6px; color: #C9D3E6; font: normal 600 .72rem/1.3 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; }
.legal-tooltip-wrap:hover .legal-tooltip-popover, .legal-tooltip-wrap:focus .legal-tooltip-popover, .legal-tooltip-wrap:focus-within .legal-tooltip-popover { opacity: 1; visibility: visible; }
@media (max-width: 640px) { .legal-tooltip-popover { position: fixed; top: auto; right: 16px; bottom: 16px; left: 16px; width: auto; max-width: none; } }
.hook { margin-bottom: 20px; padding: 2px 0 2px 16px; border-left: 2px solid var(--accent-secondary); color: var(--text-primary); }
.hook strong { display: block; color: var(--text-muted); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
details { margin: 0 0 16px; }
summary { cursor: pointer; color: var(--text-secondary); font-size: .9rem; font-weight: 600; }
summary:hover { color: var(--text-primary); }
details p { margin-top: 8px; color: var(--text-secondary); font-size: .94rem; }

.caption-box { display: grid; gap: 8px; justify-items: start; margin-bottom: 16px; }
.caption-box label { font-size: .82rem; font-weight: 600; }
.clip-editor, .clip-editor-invite{ margin: 0; border-bottom: 1px solid var(--border-hairline); }
.clip-editor > summary, .clip-editor-invite > summary{ display: flex; align-items: center; justify-content: space-between; padding: 14px 0; color: var(--text-primary); list-style: none; }
.clip-editor > summary::-webkit-details-marker, .clip-editor-invite > summary::-webkit-details-marker{ display: none; }
.clip-editor > summary::after, .clip-editor-invite > summary::after{ content: "+"; color: var(--text-muted); font: 400 1.1rem var(--font-mono); }
.clip-editor[open] > summary::after, .clip-editor-invite[open] > summary::after{ content: "−"; }
.clip-editor[open], .clip-editor-invite[open]{ padding-bottom: 20px; }

/* Trim & Style Studio */
.editor-form { display: grid; gap: 24px; margin-top: 4px; }
.editor-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.editor-form legend { margin-bottom: 10px; padding: 0; color: var(--text-muted); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.trim { display: grid; gap: 10px; }
.trim-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.trim-row > label { width: 44px; color: var(--text-secondary); font-size: .85rem; font-weight: 600; }
.trim-group { display: inline-flex; align-items: stretch; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-surface); overflow: hidden; }
.nudge { min-width: 46px; padding: 0 10px; border: 0; border-right: 1px solid var(--border-hairline); background: var(--bg-paper); color: var(--text-secondary); font: 500 .78rem var(--font-mono); cursor: pointer; }
.trim-value + .nudge { border-left: 1px solid var(--border-hairline); }
.nudge:last-child { border-right: 0; }
.nudge:hover { background: var(--accent-primary-soft); color: var(--accent-primary); }
.nudge:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: -2px; }
.trim-value { display: grid; justify-items: center; min-width: 112px; padding: 6px 12px; }
.trim-at { color: var(--text-primary); font: 600 1.02rem/1.2 var(--font-mono); font-variant-numeric: tabular-nums; }
.trim-value input { width: 84px; padding: 0; border: 0; background: transparent; color: var(--text-muted); font: 400 .68rem var(--font-mono); text-align: center; }
.trim-value input:focus { outline: 0; color: var(--text-primary); }
.trim-duration { margin: 0; font-size: .85rem; color: var(--text-secondary); }
.trim-duration strong { margin: 0 6px; color: var(--text-primary); }
.trim-duration .is-invalid { color: var(--danger); }
.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.choices legend { grid-column: 1 / -1; }
@media (max-width: 760px) { .choices { grid-template-columns: 1fr; } }
.choice { position: relative; display: grid; gap: 4px; align-content: start; padding: 10px 10px 12px; border: 1px solid var(--border-hairline); border-radius: var(--radius-md); background: var(--bg-surface); cursor: pointer; transition: border-color .15s; }
.choice:hover { border-color: var(--border-strong); }
.choice:has(input:checked) { border-color: var(--accent-primary); box-shadow: inset 0 0 0 1px var(--accent-primary); }
.choice input { position: absolute; opacity: 0; }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent-secondary); outline-offset: 2px; }
.choice strong { margin-top: 6px; font-size: .86rem; font-weight: 600; }
.choice small { color: var(--text-secondary); font-size: .74rem; line-height: 1.4; }
.choice-sample { position: relative; display: grid; place-items: center; height: 64px; border-radius: var(--radius-sm); background: var(--bg-studio); color: #fff; font: 800 1.05rem var(--font-caption); }
.sample-hormozi b { color: #C9D3E6; font-size: 1.15em; -webkit-text-stroke: .5px #000; }
.sample-karaoke { padding-bottom: 12px; color: #FFFFFF; } .sample-karaoke b { color: #C9D3E6; }
.sample-karaoke::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; background: linear-gradient(90deg, #C9D3E6 58%, rgb(255 255 255 / .2) 58%); }
.sample-minimal { font: 600 .88rem var(--font-caption); } .sample-minimal b { color: #f5d58a; font-weight: 600; }
.choice-frame { position: relative; display: block; width: 36px; height: 64px; margin: 0 auto; border-radius: var(--radius-xs); overflow: hidden; background: var(--bg-studio); box-shadow: 0 0 0 1px var(--border-strong); }
.choice-frame i { position: absolute; left: 0; right: 0; background: var(--accent-primary); }
.choice-frame b { position: absolute; left: 6px; right: 6px; height: 3px; background: #C9D3E6; }
.frame-blurred_stage { background: linear-gradient(#2A3344, #1B212B); } .frame-blurred_stage i { top: 36%; height: 28%; background: var(--accent-signal); } .frame-blurred_stage b { top: 70%; }
.frame-center_crop i { inset: 0; background: linear-gradient(160deg, #2A3A5C, var(--accent-primary)); } .frame-center_crop i::after { content: ""; position: absolute; left: 50%; top: 26%; width: 14px; height: 14px; border-radius: 50%; background: rgb(255 255 255 / .35); transform: translateX(-50%); } .frame-center_crop b { top: 72%; }
.frame-article_card i { top: 16%; height: 52%; background: var(--accent-signal); } .frame-article_card b { top: 76%; height: 1px; } .frame-article_card::after { content: ""; position: absolute; left: 8px; right: 8px; top: 82%; height: 6px; background: repeating-linear-gradient(rgb(255 255 255 / .5) 0 1px, transparent 1px 3px); }
.hook-field { display: grid; gap: 6px; align-content: start; }
.hook-field label { font-size: .85rem; font-weight: 600; }
.hook-field input, .hook-field select { padding: 10px 12px; font-size: .95rem; }
.editor-form .actions { align-items: center; margin-top: 0; }
.form-error { margin: 0; padding: 10px 14px; border-left: 2px solid var(--danger); background: #FBF1EF; color: var(--danger); font-size: .88rem; }
.form-ok { margin: 0; padding: 10px 14px; border-left: 2px solid var(--accent-primary); background: var(--accent-primary-soft); color: var(--accent-primary); font-size: .88rem; }

.render { display: block; padding-top: 20px; }
.render form { display: inline; }
.render-done { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; }
.render-done video { width: 120px; aspect-ratio: 9 / 16; height: auto; border-radius: var(--radius-sm); background: #000; }
.render-done video.is-horizontal { width: 200px; aspect-ratio: 16 / 9; }
.render-done:has(video.is-horizontal) { grid-template-columns: 200px 1fr; }
.render .video-mode-form { display: grid; gap: 10px; justify-items: start; margin-top: 4px; }
.render-done .video-mode-form { margin-top: 12px; }
.video-mode-picker { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
.video-mode-picker legend { width: 100%; margin-bottom: 6px; padding: 0; color: var(--text-muted); font: 600 .68rem/1.4 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; }
.video-mode-option { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--border-hairline); border-radius: 999px; background: var(--bg-surface); color: var(--text-secondary); font-size: .8rem; cursor: pointer; }
.video-mode-option input { margin: 0; accent-color: var(--accent-primary); }
.video-mode-option:has(input:checked) { border-color: var(--accent-primary); background: var(--accent-primary-soft); color: var(--text-primary); font-weight: 600; }
.video-mode-form .when-horizontal, .video-mode-form:has(input[value="horizontal"]:checked) .when-vertical { display: none; }
.video-mode-form:has(input[value="horizontal"]:checked) .when-horizontal { display: inline; }
.render-wait { color: var(--text-secondary); }
.render-error { color: var(--danger); font-size: .9rem; }
.render-other-formats { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .75rem; font-size: .9rem; color: var(--text-secondary); }
.render-all { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 1.5rem; }
.render-all p { margin: 0; color: var(--text-secondary); font-size: .88rem; flex: 1 1 16rem; }
@media (max-width: 760px) {
  .clip { grid-template-columns: 1fr; background: var(--bg-surface); }
  .phone { position: static; padding: 20px 0; background: var(--bg-studio); }
  .phone-screen { width: min(260px, 70%); margin: 0 auto; }
  .clip-body { padding: 22px 18px; }
  .clip-body h3 { font-size: 1.55rem; }
}

/* Weekly schedule */

.prayer { color: var(--text-primary); font: italic 400 1.15rem/1.5 var(--font-display); }

/* Cell guide */

.ref { margin-left: 4px; color: var(--accent-secondary); font: 500 .76rem var(--font-mono); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* Summary & quotes */
.summary { max-width: 720px; font-size: 1.05rem; line-height: 1.7; }
.quotes-title { margin: 48px 0 18px; font: 600 1.8rem var(--font-display); }
.quotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; }
.quote { display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 4 / 5; margin: 0; padding: 24px; border-radius: var(--radius-sm); background: var(--bg-studio); color: var(--text-on-studio); }
.quote:nth-child(3n + 2) { background: var(--accent-primary); }
.quote:nth-child(3n) { border: 1px solid var(--border-hairline); background: var(--bg-surface); color: var(--text-primary); }
.quote blockquote { margin: 0; font: 600 1.4rem/1.2 var(--font-display); }
.quote figcaption { color: var(--accent-secondary-light); font: 500 .7rem var(--font-mono); }
.quote:nth-child(3n) figcaption { color: var(--accent-secondary); }

/* Checkout dialog */
.checkout { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 32px; border: 1px solid var(--border-hairline); border-top: var(--rule-accent) solid var(--accent-primary); border-radius: var(--radius-xs); background: var(--bg-surface); color: var(--text-primary); }
.checkout::backdrop { background: rgb(18 22 29 / .6); }
/* Same card as a page (/checkout/:token): keep it clear of the sticky header and let it grow with the page instead of scrolling inside. */
section.checkout { max-height: none; overflow: visible; margin: 48px auto 72px; }
@media (max-width: 520px) { .checkout { padding: 24px 20px; } }
.checkout h1, .checkout h2 { margin: 0 0 12px; font: 500 2rem/1.15 var(--font-display); letter-spacing: -.02em; }
.checkout form { display: grid; gap: 12px; }
.plans { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.plans legend { padding: 0; margin-bottom: 6px; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-secondary); }
.checkout .plans[hidden], .checkout-chosen[hidden], .checkout-payment[hidden] { display: none; }
.checkout-payment { display: grid; gap: 12px; }
.checkout-chosen { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--accent-primary); border-radius: var(--radius-xs); background: var(--accent-primary-soft); }
.checkout-chosen-label { margin: 0; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-secondary); }
.checkout-chosen-plan { margin: 0; font-size: 1rem; }
.checkout-chosen small { color: var(--text-secondary); }
.checkout-back { justify-self: start; margin-bottom: 4px; padding: 0; border: 0; background: none; color: var(--accent-primary); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.plan-option { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--border-hairline); border-radius: var(--radius-xs); cursor: pointer; }
.plan-option:has(input:checked) { border-color: var(--accent-primary); box-shadow: inset 0 0 0 1px var(--accent-primary); }
.plan-option input { width: auto; margin-top: 4px; accent-color: var(--accent-primary); }
.plan-option span { display: grid; gap: 2px; }
.plan-option small { color: var(--text-secondary); }
.plan-option .plan-retention { margin-top: 4px; color: var(--text-primary); font-weight: 600; }
.plan-badge { font-style: normal; display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: var(--radius-xs); background: var(--accent-primary-soft); color: var(--accent-primary); font-size: .72rem; font-weight: 700; }
.payment-methods { margin: 4px 0 0; padding: 0; border: 0; display: grid; gap: 8px; }
.payment-methods legend { padding: 0; margin-bottom: 6px; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-secondary); }
.payment-method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 520px) { .payment-method-grid { grid-template-columns: 1fr; } }
.payment-method-option { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--border-hairline); border-radius: var(--radius-xs); background: var(--bg-surface); cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.payment-method-option:has(input:checked) { border-color: var(--accent-primary); background: var(--accent-primary-soft); box-shadow: inset 0 0 0 1px var(--accent-primary); }
.payment-method-option input { margin-top: 3px; }
.payment-method-option span { display: grid; gap: 2px; }
.payment-method-option strong { font-size: .92rem; color: var(--text-primary); line-height: 1.25; }
.payment-method-option small { font-size: .78rem; color: var(--text-secondary); line-height: 1.35; }
.terms-consent { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-hairline); border-radius: var(--radius-xs); background: var(--bg-subtle); font-size: .8rem; line-height: 1.45; color: var(--text-secondary); cursor: pointer; }
.terms-consent input[type="checkbox"] { width: 16px; height: 16px; margin-top: 2px; }
.checkout label[for] { font-size: .88rem; font-weight: 600; }
/* First-steps guide on the account page */
.onboarding { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 28px; border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); background: var(--bg-surface); color: var(--text-primary); box-shadow: 0 30px 80px rgb(18 22 29 / .35); overflow-y: auto; }
.onboarding::backdrop { background: rgb(18 22 29 / .6); }
.onboarding-head .eyebrow { margin-bottom: 10px; }
.onboarding-head h2 { margin: 12px 0 6px; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2rem); line-height: 1.1; }
.onboarding-head p.muted { margin: 0 0 18px; }
.onboarding-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.onboarding-progress li { height: 3px; border-radius: 2px; background: var(--border-hairline); }
.onboarding-progress li.done { background: var(--accent-primary); }
.onboarding-form { display: grid; gap: 14px; }
.onboarding-form label { display: grid; gap: 6px; font-size: .88rem; font-weight: 600; color: var(--text-secondary); }
.onboarding-form p { margin: 0; }
.onboarding-alert { padding: 10px 12px; border: 1px solid var(--danger); border-left-width: 3px; border-radius: var(--radius-xs); background: #FBF1EF; color: var(--danger); font-size: .9rem; }
.onboarding-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.onboarding-skip { display: flex; justify-content: flex-end; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-hairline); }
.onboarding-demo { margin: 0 0 14px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-hairline); background: var(--bg-studio); }
.onboarding-demo video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; }
@media (max-width: 520px) { .onboarding { padding: 20px 18px; } .onboarding-actions .btn { flex: 1 1 100%; } }
.order h1 { font: 600 clamp(2rem, 1.5rem + 2vw, 2.8rem)/1.1 var(--font-display); }
.checkout-price { margin: 0 0 8px; }
.retention-pill { display: inline-block; margin: 8px 0 20px; padding: 8px 12px; border: 1px solid var(--border-hairline); border-left: 3px solid var(--accent-primary); border-radius: var(--radius-xs); background: var(--bg-paper); color: var(--text-primary); font-size: .875rem; }
.paid-box, .payment-pending, .pix-pending { padding: 16px; border: 1px solid var(--border-hairline); border-left: 3px solid var(--accent-primary); border-radius: var(--radius-xs); background: var(--bg-paper); }
.paid-box p, .payment-pending p, .pix-pending p { margin: 0 0 8px; }
.pix-box { display: grid; gap: 16px; margin: 8px 0 0; }
.pix-qr { width: 220px; max-width: 100%; }
.pix-qr svg, .pix-qr img { display: block; width: 100%; height: auto; padding: 10px; border: 1px solid var(--border-hairline); border-radius: var(--radius-xs); background: #fff; }
.pix-copy { display: grid; gap: 10px; min-width: 0; }
.pix-copy p { margin: 0; }
/* The whole Pix code stays visible: it wraps anywhere and the box grows with it. */
#pix-payload { field-sizing: content; min-height: 0; resize: none; font: 400 .8125rem/1.5 var(--font-mono); overflow-wrap: anywhere; word-break: break-all; }
.pix-copy .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.checkout-help { margin: 28px 0 0; color: var(--text-secondary); font-size: .875rem; }
.checkout-help a { color: var(--text-primary); font-weight: 600; text-decoration: underline; }

@media print {
  .hd, .ft, .tabs, .actions, .video-head, .checkout { display: none !important; }

}

/* Video page: header actions */
.video-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 22px; }
.package-download { background: var(--accent-secondary); border-color: var(--accent-secondary); color: var(--bg-studio); }
.package-download:hover { background: var(--accent-secondary-light); border-color: var(--accent-secondary-light); color: var(--bg-studio); }
.btn.package-share, .btn.package-buy { border-color: var(--border-studio); color: var(--text-on-studio); }
.btn.package-share:hover, .btn.package-buy:hover { border-color: var(--text-on-studio); background: transparent; color: #fff; }
.package-note { flex: 1 1 220px; margin: 0; color: var(--text-on-studio-muted); font-size: .8rem; }
.no-clips { flex: 1 1 100%; max-width: 560px; padding: 16px 18px; border: 1px solid var(--border-studio); border-radius: var(--radius-sm); color: var(--text-on-studio-muted); font-size: .9rem; line-height: 1.55; }
.no-clips p { margin: 0 0 10px; }
.no-clips .no-clips-title { color: var(--text-on-studio); font-weight: 700; font-size: 1rem; }
.no-clips-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0 !important; }
.no-clips .btn.ghost, .lp .no-clips .btn.ghost { border-color: rgb(255 255 255 / .35); background: transparent; color: #fff; }
.no-clips .btn.ghost:hover, .lp .no-clips .btn.ghost:hover { border-color: #fff; background: rgb(255 255 255 / .08); color: #fff; }

/* Video: transcript search, any passage becomes a 9:16 clip */
.transcript-toolbar { position: sticky; top: calc(var(--header-h) + 52px); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 12px 0; background: var(--bg-paper); }
.transcript-query { flex: 1 1 320px; }
.transcript-scope { display: inline-flex; margin: 0; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.transcript-scope label { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--bg-surface); font-size: .85rem; cursor: pointer; }
.transcript-scope label + label { border-left: 1px solid var(--border-hairline); }
.transcript-scope label:has(input:checked) { background: var(--accent-primary-soft); color: var(--accent-primary); font-weight: 600; }
.transcript-scope input { width: auto; accent-color: var(--accent-primary); }
.transcript-count { min-width: 9ch; color: var(--accent-primary); font-size: .9rem; font-weight: 600; text-align: right; }
.transcript-keywords { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 24px; }
.transcript-keywords > span { margin-right: 4px; color: var(--text-muted); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.keyword { padding: 5px 11px; border: 1px solid var(--border-strong); border-radius: var(--radius-xs); background: var(--bg-surface); color: var(--text-secondary); font: 500 .82rem var(--font-sans); cursor: pointer; }
.keyword:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.keyword[aria-pressed="true"] { border-color: var(--accent-primary); background: var(--accent-primary); color: #fff; }
.excerpts { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border-hairline); }
.excerpt { display: grid; grid-template-columns: 210px minmax(0, 1fr) auto; gap: 8px 24px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--border-hairline); }
.excerpt-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; }
.excerpt-meta .mono { color: var(--text-primary); font-size: .82rem; text-decoration: none; }
.excerpt-meta .mono:hover { color: var(--accent-primary); text-decoration: underline; }
.chapter-badge { padding: 2px 8px; border-left: 3px solid var(--c, var(--border-strong)); background: var(--bg-subtle); color: var(--text-secondary); font-size: .72rem; font-weight: 600; letter-spacing: .04em; }
.chapter-badge.tl-content { color: var(--accent-primary); }
.excerpt-text { margin: 0; max-width: 68ch; color: var(--text-primary); font-size: .95rem; line-height: 1.6; }
.excerpt-text mark { padding: 0 2px; border-radius: 2px; background: rgb(122 31 43 / .28); color: inherit; }
.excerpt .btn { white-space: nowrap; }
.transcript-empty { padding: 32px 0; color: var(--text-muted); text-align: center; }
@media (max-width: 820px) { .excerpt { grid-template-columns: 1fr; } .excerpt-meta { flex-direction: row; flex-wrap: wrap; align-items: center; } .excerpt .btn { justify-self: start; } .transcript-toolbar { top: var(--header-h); } }

/* Home, signed in: back to the last video, unlock a blocked one */
.inline-form { display: inline; margin: 0; }
.nav-account { font-weight: 500; color: #fff !important; }
.hero-return { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; margin: 0 0 18px; padding: 10px 12px; border: 1px solid var(--accent-primary); border-radius: var(--radius-xs); background: var(--bg-surface); color: var(--text-primary); text-decoration: none; }
.hero-return:hover { background: var(--bg-subtle); }
.hero-return:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.hero-return img { width: 96px; height: 54px; border-radius: var(--radius-xs); object-fit: cover; }
.hero-return-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hero-return-kicker { color: var(--accent-primary); font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.hero-return-title { overflow: hidden; font-size: .95rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.hero-return-channel { overflow: hidden; color: var(--text-secondary); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) { .hero-return { grid-template-columns: auto minmax(0, 1fr); } .hero-return img { width: 72px; height: 40px; } .hero-return-cta { grid-column: 1 / -1; } }
.hero-unlock { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: center; margin: 0 0 18px; padding: 12px; border: 1px solid var(--accent-secondary); border-radius: var(--radius-xs); background: var(--bg-surface); scroll-margin-top: 88px; }
.hero-unlock img { width: 96px; height: 54px; border-radius: var(--radius-xs); object-fit: cover; }
.hero-unlock-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hero-unlock-text p { margin: 0; color: var(--text-primary); font-size: .9rem; line-height: 1.4; }
.hero-unlock-actions { display: flex; flex-wrap: wrap; gap: 8px; grid-column: 1 / -1; }
@media (max-width: 520px) { .hero-unlock { align-items: start; } .hero-unlock img { width: 72px; height: 40px; } .hero-unlock-actions .btn { flex: 1 1 100%; } }

/* --- Galeria de 6 Templates Visuais & Customizador de Cortes ([t668u]) --- */
.clip-template-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.16rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(27, 67, 50, 0.09);
  color: var(--emerald, #14213D);
  border: 1px solid rgba(27, 67, 50, 0.22);
}

.template-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.65rem;
  width: 100%;
}

.template-preset-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--line, #E4DFD3);
  background: #FFFDF9;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.template-preset-card:has(input:checked) {
  border-color: var(--emerald, #14213D);
  background: rgba(27, 67, 50, 0.05);
  box-shadow: 0 0 0 2px rgba(27, 67, 50, 0.14);
}

.preset-badge {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: rgba(182, 141, 64, 0.15);
  color: #8A6421;
  font-weight: 700;
}

.color-swatch-row,
.caption-pos-row,
.visual-toggles-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  width: 100%;
}

.color-swatch-choice {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.7rem;
}

.color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}

.visual-toggles-row {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--line, #E4DFD3);
}

.toggle-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--ink-2, #2B332E);
  cursor: pointer;
}

/* Live Phone Monitor Template Presets & Customizer */
.phone.ratio-16x9 {
  aspect-ratio: 16 / 9;
  max-width: 100%;
}

.phone.hide-header-card .phone-top {
  display: none !important;
}

.phone.hide-legal-card .phone-legal-card,
.phone.hide-legal-card .phone-legal-strip,
.phone.hide-legal-card .phone-legal-pill {
  display: none !important;
}

.phone.pos-bottom .phone-caption {
  top: auto !important;
  bottom: 11% !important;
}

.phone.pos-middle .phone-caption {
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%);
}

.phone.pos-raised .phone-caption {
  top: auto !important;
  bottom: 26% !important;
}

/* As in the MP4 (AssSubtitles#effective_caption_y): on the article card a low caption goes back above the card. */
.phone.layout-article_card.pos-bottom .phone-caption,
.phone.layout-article_card.pos-raised .phone-caption {
  top: 42.7% !important;
  bottom: auto !important;
}

.phone.highlight-navy .phone-caption,
.phone.template-sobrio .phone-caption {
  --active-word-color: #C9D3E6;
}

.phone.highlight-bordo .phone-caption{
  --active-word-color: #E8C4C9;
}

.phone.highlight-white .phone-caption{
  --active-word-color: #FFFFFF;
  color: #FFFFFF;
}

/* Cards on the cool gray (sign in, sign up, e-mail code). The landing has its own sheet, landing.css. */
.panel-card { border: 1px solid var(--border-hairline); border-radius: var(--radius-xs); background: var(--bg-surface); color: var(--text-primary); }
.panel-card.is-focus { border-top: var(--rule-accent) solid var(--accent-primary); }

/* Sign in, sign up and e-mail code: one 440px sheet on the cool gray, wine rule on top, no shadow. */
.auth-section { max-width: calc(440px + 2 * var(--gutter)); padding-top: 72px; padding-bottom: 96px; }
.auth-card { padding: 32px; }
.auth-card h1 { margin: 0 0 12px; font-size: 2rem; letter-spacing: -.02em; overflow-wrap: anywhere; }
.auth-intro { margin-bottom: 24px; }
.auth-intro a, .auth-note a { font-weight: 600; }
.auth-field { margin-bottom: 20px; }
.auth-field label { display: block; margin-bottom: 6px; color: var(--text-primary); font-weight: 600; }
.auth-field input { min-height: 48px; }
.auth-hint { margin: 6px 0 0; }
.auth-code { font-family: var(--font-mono); font-size: 1.5rem; letter-spacing: .35em; text-align: center; }
.auth-errors { margin-bottom: 20px; list-style: none; }
.auth-terms { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 20px; font-size: .95rem; }
.auth-card .btn { width: 100%; }
.auth-note { margin: 20px 0 0; text-align: center; }
.auth-alt { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border-hairline); }
.auth-alt h2 { margin: 0 0 8px; font-size: 1.1rem; }
@media (max-width: 520px) {
  .auth-section { padding-top: 40px; padding-bottom: 56px; }
  .auth-card { padding: 24px 20px; }
}

/* Teacher footer (name, subject and school) shown on every clip preview, as it is burned into the MP4. */
/* Footer and the site address on their own lines, where the MP4 burns them (bottom at y 1860 and 1905 of 1920). */
.phone-footer { position: absolute; left: 8.3%; right: 8.3%; bottom: 3.1%; z-index: 2; color: rgb(255 255 255 / .85); font: 600 3.15cqw/1.2 var(--font-sans); text-align: center; pointer-events: none; }

/* Declaração de direitos sobre o vídeo (link e upload): label.rights-check wins over the forms' generic label rules. */
label.rights-check { flex: 1 1 100%; display: flex; align-items: flex-start; gap: 10px; margin: 12px 0; font-size: .875rem; font-weight: 400; line-height: 1.45; color: var(--text-secondary); text-align: left; cursor: pointer; }
.rights-check input { appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--border-input); border-radius: 6px; background: var(--bg-surface) center / 14px no-repeat; cursor: pointer; }
.rights-check input:checked { border-color: var(--accent-primary); background-color: var(--accent-primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.rights-check input:focus-visible { outline: 3px solid var(--accent-primary); outline-offset: 2px; }
/* The file picker: the native input is hidden but still takes the focus, so Tab, Enter and Space reach it. */
.upload-field { display: grid; gap: 8px; text-align: left; }
.upload-field-label { font-size: .9rem; color: var(--text-secondary); }
.upload-field-zone { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 12px; border: 1.5px dashed var(--border-input); border-radius: var(--radius-lg); }
.upload-field.is-over .upload-field-zone { border-style: solid; border-color: var(--accent-primary); }
.upload-field-input { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; }
.upload-field-button { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 18px; border: 1.5px solid currentColor; border-radius: 999px; color: var(--text-primary); font-size: .9rem; font-weight: 700; cursor: pointer; }
.upload-field-input:focus-visible + .upload-field-button { outline: 3px solid var(--accent-primary); outline-offset: 2px; }
.upload-field-name { min-width: 0; overflow-wrap: anywhere; color: var(--text-secondary); font-size: .9rem; }
.upload-field.has-file .upload-field-name { color: var(--text-primary); font-weight: 600; }
.upload-field-drop { color: var(--text-muted); font-size: .85rem; }
@media (hover: none), (max-width: 640px) { .upload-field-drop { display: none; } }