/* Motion Studio site. Structure from the measured design system (design-reference/DESIGN_SYSTEM.md);
   colours from the Motion Studio logo: warm greys + the orange accent stroke. Dark only. */
@font-face { font-family: "Darker Grotesque"; src: url(/fonts/DarkerGrotesque.woff2) format("woff2"); font-weight: 500 900; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(/fonts/InstrumentSans.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
:root {
  --bg: #000; --s1: #0b0b0c; --s2: #121213; --s3: #1a1a1c; --menu: #1a1a1a;
  --ink: #f2f1ef; --body: rgba(242,241,239,.62); --label: rgba(242,241,239,.72); --step: rgba(242,241,239,.5); --nav: #b3b1ad;
  --line: #2a2a2d; --hair: rgba(255,255,255,.06); --b10: rgba(255,255,255,.1); --b20: rgba(255,255,255,.2);
  --orange: #ff9e57; --orange-hover: #ffb27a; --orange-active: #e8753c; --peach: #ffd4a2; --ember: #b75a31; --cream: #faf8f5;
  --glow: rgba(255,158,87,.34);
  --display: "Darker Grotesque", "Arial Narrow", sans-serif;
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --expo: cubic-bezier(.16,1,.3,1); --std: cubic-bezier(.4,0,.2,1);
  --panel: var(--s2); --mute: var(--body); --blue: var(--orange);   /* aliases used by admin.html */
  --glass: linear-gradient(135deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.2) 16%, rgba(255,212,162,.3) 38%, rgba(255,255,255,.05) 58%, rgba(255,193,125,.34) 80%, rgba(255,255,255,.55) 100%);
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased }
a { color: var(--peach); text-decoration: none } a:hover { text-decoration: underline }
img, video { max-width: 100%; display: block }
h1, h2, h3 { font-family: var(--display); margin: 0; color: var(--ink) }
h1 { font-size: clamp(48px, 7vw, 88px); font-weight: 900; line-height: 1; letter-spacing: -1.5px; word-spacing: .05em; text-transform: uppercase }
h2 { font-size: clamp(32px, 4.2vw, 52px); font-weight: 900; line-height: 1; letter-spacing: -1.5px; word-spacing: .05em }
h3 { font-size: 22px; font-weight: 700; line-height: 28px }
p { margin: 0 }
.wrap { max-width: 1344px; margin: 0 auto; padding: 0 16px } @media (min-width: 768px) { .wrap { padding: 0 32px } }
.inner { max-width: 1280px; margin: 0 auto }
.mute { color: var(--body) }
.overline { font: 600 12px/16px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--peach) }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 8px }

/* generic card (admin, license pages) */
.card { background: var(--s2); border: 1px solid var(--b10); border-radius: 20px }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 28px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--ink); font: 600 16px/24px var(--sans); cursor: pointer; white-space: nowrap; text-decoration: none !important; transition: background .15s var(--std), border-color .15s, box-shadow .2s, transform .2s var(--expo) }
.btn:hover { background: rgba(255,255,255,.09) }
.btn.buy { background: var(--orange); border-color: rgba(255,255,255,.18); color: #151516; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 24px var(--glow) }
.btn.buy:hover { background: var(--orange-hover); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 12px 30px rgba(255,158,87,.5), 0 0 0 1px rgba(255,158,87,.2) }
.btn.buy:active { background: var(--orange-active); transform: none }
.btn.white { background: #fff; border-color: #fff; color: #000; min-height: 40px; padding: 8px 18px; font-size: 14px }
.btn.white:hover { transform: scale(1.03); background: #fff }
.btn.dark { background: var(--ink); border-color: var(--ink); color: #000 }
.btn.dark:hover { transform: scale(1.03); background: #fff }
.btn.sm { min-height: 40px; padding: 8px 18px; font-size: 14px }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--b20); background: rgba(255,255,255,.04); color: var(--ink); font: 500 14px/20px var(--sans); cursor: pointer; transition: background .15s, border-color .15s }
.pill:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.35) }

/* ---------- nav ---------- */
nav.top { position: sticky; top: 0; z-index: 1001; height: 56px; background: linear-gradient(180deg, rgba(23,23,23,.94), rgba(17,17,17,.88)), radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.1), transparent 72%), repeating-linear-gradient(135deg, rgba(255,255,255,.032), rgba(255,255,255,.032) 1px, transparent 0, transparent 10px); backdrop-filter: blur(18px) saturate(1.08); -webkit-backdrop-filter: blur(18px) saturate(1.08); border-bottom: 1px solid var(--hair); box-shadow: 0 16px 42px rgba(0,0,0,.18) }
nav.top .bar { display: flex; align-items: center; gap: 24px; height: 100%; padding: 0 16px; max-width: 1440px; margin: 0 auto }
@media (min-width: 768px) { nav.top { height: 70px } nav.top .bar { padding: 0 64px } }
.brand { white-space: nowrap; display: flex; align-items: center; gap: 10px; font: 900 24px/1 var(--display); letter-spacing: -.4px; color: var(--ink) !important; text-decoration: none !important }
.brand img { width: 34px; height: 34px }
nav.top .links { display: none; gap: 4px; margin-left: 8px }
nav.top .links a { color: var(--nav); font: 500 14px/21px var(--sans); padding: 8px 14px; border-radius: 999px; transition: color .2s, background .2s; text-decoration: none }
nav.top .links a:hover { color: #fff; background: #2d2d2d }
nav.top .cta { margin-left: auto }
@media (min-width: 900px) { nav.top .links { display: flex } }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; border-radius: 0 0 40px 40px; padding: 40px 0 72px; text-align: center }
@media (min-width: 768px) { .hero { border-radius: 0 0 56px 56px; padding: 56px 0 96px } }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, #050505 0%, #120c08 26%, #4a240f 56%, #c9632f 76%, #ffd4a2 91%, #faf8f5 100%) }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(to right, rgba(255,255,255,.28) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.2) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 28%, rgba(0,0,0,.5) 58%, rgba(0,0,0,.78) 100%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 28%, rgba(0,0,0,.5) 58%, rgba(0,0,0,.78) 100%) }
.hero .copy { padding: 24px 16px 40px; animation: rise .8s var(--expo) both }
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--b10); background: rgba(255,255,255,.05); color: var(--label); font: 500 13px/20px var(--sans); backdrop-filter: blur(6px) }
.badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px var(--orange) }
.hero h1 { margin: 22px auto 14px; max-width: 14ch }
.hero .lead { font: 500 clamp(20px, 2.4vw, 28px)/1.15 var(--sans); letter-spacing: -.02em; color: rgba(242,241,239,.82); max-width: 760px; margin: 0 auto }
.hl { position: relative; display: inline-block; color: var(--peach) }
.hl svg { position: absolute; left: -6%; bottom: -12px; width: 112%; animation: mark 5.6s ease-in-out infinite }
@keyframes mark { 50% { transform: translateY(-1.5px) } }
.hero .ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px }
.hero .fine { margin-top: 14px; font-size: 13.5px; color: var(--label) }
@keyframes rise { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }

/* arc carousel of style previews (geometry from the reference: .74 / 8° / 40%, .58 / 15° / 66%) */
.arc { position: relative; width: min(58%, 742px); margin: 8px auto 0; animation: rise .8s var(--expo) .1s both }
.arc::before { content: ""; display: block; aspect-ratio: 16/9 }
.arc .card { border: 0; position: absolute; left: 50%; top: 0; width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: 28px; background: var(--s1); box-shadow: 0 18px 40px rgba(0,0,0,.36); transition: transform .72s var(--expo); cursor: pointer }
.arc .card.on { box-shadow: 0 0 0 3px #fff, 0 18px 40px rgba(0,0,0,.36); cursor: default }
.arc video, .arc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.arc .cap { position: absolute; inset: 0 0 auto 0; z-index: 2; padding: 14px 14px 34px; background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,.12) 70%, transparent); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; text-align: left }
.arc .cap b { font: 600 18px/1.1 var(--sans) } .arc .cap small { display: block; font-size: 13px; color: rgba(255,255,255,.75); margin-top: 4px }
.arc .card:not(.on) .cap .btn { display: none }
.arc .nav { position: absolute; top: 50%; z-index: 50; width: 56px; height: 56px; border: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; cursor: pointer; background: radial-gradient(circle, rgba(0,0,0,.72) 0, rgba(0,0,0,.28) 40%, transparent 70%); transition: opacity .15s; font-size: 26px; line-height: 1 }
.arc .nav:hover { opacity: .8 } .arc .prev { left: -16px; transform: translate(-50%, -50%) } .arc .next { right: -16px; transform: translate(50%, -50%) }
@media (max-width: 640px) { .arc { width: 64% } .arc .cap .btn { display: none } .arc .cap b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block } .arc .cap > div { min-width: 0 } nav.top .cta .p { display: none } .arc .cap { padding: 28px 12px 10px } .arc .cap b { font-size: 14px } .arc .cap small { display: none } .arc .card { border-radius: 18px } }

/* ---------- sections ---------- */
section { padding: 96px 0 } @media (min-width: 768px) { section { padding: 128px 0 } }
.head { max-width: 760px }
.head.center { margin: 0 auto; text-align: center }
.head p { margin-top: 24px; color: var(--body); line-height: 32px }
.mt16 { margin-top: 64px }

/* style tiles */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px } @media (min-width: 768px) { .tiles { grid-template-columns: repeat(4, 1fr) } }
.tile { min-width: 0 }
.tile .m { position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: 12px; background: var(--s2) }
.tile video, .tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.tile p { margin-top: 10px; font: 500 14px/20px var(--sans) } .tile span { color: var(--body); font-size: 13px }
.tiles:not(.all) .tile:nth-child(n+13) { display: none }
.rowhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px }

/* feature list (48px icon boxes) */
.feats { display: grid; gap: 48px 40px } @media (min-width: 768px) { .feats { grid-template-columns: 1fr 1fr } }
.feat { display: grid; gap: 16px } @media (min-width: 640px) { .feat { grid-template-columns: 48px 1fr; gap: 24px } }
.ic { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,255,255,.1); color: var(--ink) }
.ic svg { width: 20px; height: 20px }
.feat p { margin-top: 8px; color: var(--body); line-height: 32px }

/* bento story cards */
.bento { display: grid; gap: 16px } @media (min-width: 768px) { .bento { grid-template-columns: repeat(12, 1fr) } .s6 { grid-column: span 6 } .s5 { grid-column: span 5 } .s7 { grid-column: span 7 } }
.story { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 24px; padding: 24px; border-radius: 28px; background: var(--s1); border: 1px solid rgba(255,255,255,.05); box-shadow: 0 20px 60px rgba(36,30,24,.12) }
@media (min-width: 768px) { .story { padding: 28px; gap: 28px } }
.story::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .8; background: radial-gradient(circle at 80% 15%, rgba(255,140,70,.3), transparent 34%), linear-gradient(135deg, transparent 55%, rgba(255,193,125,.1)); transition: opacity .5s var(--std), transform .5s var(--std) }
.story:hover::before { opacity: 1; transform: scale(1.05) }
.story .ic { position: relative; background: rgba(255,255,255,.07); border: 1px solid var(--line); color: var(--peach) }
.story h3 { position: relative; font-size: 24px } .story p { position: relative; margin-top: 12px; font-size: 14px; line-height: 32px; max-width: 560px }

/* glass stroke panel */
.glass { border: 2px solid transparent; background: linear-gradient(var(--s3), var(--s3)) padding-box, var(--glass) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 18px 40px rgba(0,0,0,.32) }

/* split: claude */
.split { display: grid; gap: 48px; align-items: center } @media (min-width: 1024px) { .split { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) } }
.checks { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px }
.checks li { display: flex; gap: 12px; color: var(--body) } .checks li b { color: var(--ink); font-weight: 600 }
.checks li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 4px; border-radius: 6px; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='%23151516' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat }
.flowcard { padding: 22px; border-radius: 28px; display: grid; gap: 10px; font-size: 14px }
.flowcard .r { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--hair) }
.flowcard .r i { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font: 700 12px var(--sans); flex: none; background: var(--ink); color: #000 }
.flowcard .r.cur i { background: var(--orange); color: #151516; box-shadow: 0 0 0 4px var(--glow) }
.flowcard .r small { margin-left: auto; color: var(--step) }

/* step timeline */
.steps { display: grid; gap: 56px } @media (min-width: 1024px) { .steps { grid-template-columns: .8fr 1.2fr; gap: 96px } }
.steps ol { list-style: none; margin: 0; padding: 0 0 0 32px; border-left: 1px solid var(--line) } @media (min-width: 768px) { .steps ol { padding-left: 48px } }
.steps li { position: relative; padding-bottom: 72px } .steps li:last-child { padding-bottom: 0 }
.steps li::before { content: ""; position: absolute; top: 3px; left: -42px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid #fff; background: radial-gradient(circle, #fff 0 5px, #000 5.5px) }
@media (min-width: 768px) { .steps li::before { left: -58px } }
.steps .lbl { font: 600 16px/24px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--step) }
.steps h3 { margin-top: 20px; font-size: clamp(36px, 5vw, 72px); line-height: .98; letter-spacing: -.055em; font-weight: 700 }
.steps li p { margin-top: 24px; line-height: 32px; max-width: 620px }

/* pricing */
.pricing { display: grid; gap: 20px; max-width: 1000px; margin: 64px auto 0 } @media (min-width: 860px) { .pricing { grid-template-columns: 1.15fr 1fr } }
.price { position: relative; padding: 36px; border-radius: 28px }
.price .tag { position: absolute; top: 24px; right: 24px }
.price .amt { font: 900 64px/1 var(--display); letter-spacing: -2px; margin: 18px 0 6px }
.price .amt s { font: 500 24px var(--sans); color: var(--step); margin-left: 10px }
.price ul { list-style: none; padding: 0; margin: 24px 0 28px; display: grid; gap: 10px }
.price li { display: flex; gap: 10px; font-size: 15px } .price li::before { content: "✓"; color: var(--orange); font-weight: 800 }
.price .btn { width: 100% }
.note { font-size: 13px; color: var(--step); text-align: center; margin-top: 12px }
.need { padding: 32px; border-radius: 28px; border: 1px solid var(--b10); background: var(--s2) }
.need h3 { margin-bottom: 18px } .need dl { margin: 0; display: grid; gap: 16px } .need dt { font-weight: 600 } .need dd { margin: 2px 0 0; color: var(--body); font-size: 14.5px }

/* faq */
.faq { max-width: 860px; margin: 56px auto 0; border-top: 1px solid var(--line) }
.faq details { border-bottom: 1px solid var(--line); padding: 28px 0 }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; font: 600 16px/28px var(--sans) }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: ""; flex: none; width: 20px; height: 20px; margin-top: 4px; background: var(--peach); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform .3s var(--std) }
.faq details[open] summary::after { transform: rotate(45deg) }
.faq details p { margin-top: 14px; max-width: 760px; line-height: 32px }
.faq summary:focus-visible { outline: 2px solid var(--peach); outline-offset: 4px }

/* closing band */
.band { position: relative; overflow: hidden; text-align: center; padding: 96px 24px; border-radius: 36px; background: var(--s2); border: 1px solid var(--b10); box-shadow: 0 40px 120px rgba(0,0,0,.45) }
@media (min-width: 768px) { .band { padding: 128px 48px } }
.band::before { content: ""; position: absolute; left: 50%; top: 0; width: 320px; height: 320px; border-radius: 50%; transform: translate(-50%, -50%); background: rgba(255,158,87,.28); filter: blur(90px); pointer-events: none }
.band h2 { position: relative; margin-top: 20px } .band p { position: relative; margin: 24px auto 0; max-width: 640px; line-height: 32px }
.band .ctas { position: relative; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 40px }

/* footer */
footer { padding: 72px 0 40px; font-size: 14px; color: var(--step) }
footer .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px } @media (min-width: 860px) { footer .cols { grid-template-columns: 2fr 1fr 1fr 1fr } }
footer h4 { color: #8f8b84; margin: 0 0 14px; font: 600 15px/1.4 var(--sans) }
footer a { color: var(--ink); display: block; margin: 0 0 12px; font-weight: 500; transition: color .2s } footer a:hover { color: var(--orange); text-decoration: none }
footer .legal { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px }

/* dialog */
dialog { border: 0; padding: 0; border-radius: 28px; width: min(460px, calc(100% - 32px)); color: var(--ink); background: transparent }
dialog::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(4px) }
dialog[open] { animation: rise .45s var(--expo) both }
.dlg { position: relative; padding: 30px; border-radius: 28px }
.dlg h3 { font-size: 30px; font-weight: 900; letter-spacing: -.5px } .dlg .sub { color: var(--body); margin: 8px 0 22px; font-size: 15px }
label.f { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; margin-bottom: 14px; color: var(--label) }
input[type=email], input[type=text] { font: inherit; font-size: 15px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--b20); background: rgba(255,255,255,.04); color: var(--ink); width: 100% }
input::placeholder { color: rgba(242,241,239,.4) }
input:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: transparent }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--body); margin: 6px 0 18px } .check input { margin-top: 3px; accent-color: var(--orange) }
.err { color: #ff7a5c; font-size: 14px; min-height: 20px; margin: -4px 0 10px }
.x { position: absolute; top: 16px; right: 16px; border: 1px solid var(--b10); background: rgba(255,255,255,.05); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 18px; color: var(--label) }
.secure { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--step); margin-top: 12px }

/* simple pages */
.doc { max-width: 820px; margin: 0 auto; padding: 72px 24px 104px }
.doc h1 { font-size: clamp(40px, 6vw, 64px); text-transform: none; margin-bottom: 12px }
.doc .upd { color: var(--step); font-size: 14px; margin-bottom: 36px }
.doc h2 { font-size: 28px; margin: 36px 0 10px; letter-spacing: -.5px }
.doc p, .doc li { color: var(--body); margin: 0 0 12px; line-height: 1.75 }
.doc ul, .doc ol { padding-left: 20px }
.panel { padding: 30px; margin-bottom: 18px; border-radius: 28px; background: var(--s2); border: 1px solid var(--b10) }
.panel.glass { border: 2px solid transparent }
.keybox { font: 600 clamp(18px, 3vw, 26px)/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; background: rgba(255,158,87,.08); border: 1px dashed rgba(255,158,87,.6); color: var(--peach); border-radius: 16px; padding: 20px; text-align: center; word-break: break-all }
.ok { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--orange); color: #151516; font-size: 28px; margin-bottom: 18px; box-shadow: 0 0 0 6px var(--glow) }
ol.how { padding-left: 20px } ol.how li { margin-bottom: 12px }

@media (prefers-reduced-motion: reduce) { .hero .copy, .arc, dialog[open] { animation: none } .hl svg { animation: none } .arc .card { transition: none } }

/* ---------- sub-pages: sunrise glow + fading grid behind the title, like the hero ---------- */
body:has(.doc) { background: radial-gradient(1100px 460px at 50% -120px, rgba(232,117,60,.28), transparent 70%), #000; background-repeat: no-repeat }
.doc { position: relative; isolation: isolate }
.doc::before { content: ""; position: absolute; left: 50%; top: 0; width: 100vw; height: 420px; transform: translateX(-50%); z-index: -1; pointer-events: none; background-image: linear-gradient(to right, rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.7), transparent 85%); mask-image: linear-gradient(180deg, rgba(0,0,0,.7), transparent 85%) }
.doc > h1, .doc > .upd, .doc > .card:first-child { animation: rise .7s var(--expo) both }
.doc h2:first-child { margin-top: 0 }
.doc .card.panel, .doc .panel { border-radius: 28px }
.doc .panel h2 { font-size: 26px }
.doc a:not(.btn) { color: var(--peach) }
.doc strong, .doc b { color: var(--ink) }
.doc.center { text-align: center; padding-top: 140px; padding-bottom: 160px }
.doc.center h1 { font-size: clamp(56px, 10vw, 120px); text-transform: uppercase; letter-spacing: -2px }
.panel.glass, .card.glass { border: 2px solid transparent; background: linear-gradient(var(--s3), var(--s3)) padding-box, var(--glass) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 18px 40px rgba(0,0,0,.32) }

/* ---------- AI crew around the headline (glossy 3D-looking characters) ---------- */
.titlewrap { position: relative; width: fit-content; max-width: 100%; margin: 0 auto }
.titlewrap h1 { position: relative; z-index: 2 }
.crew { position: absolute; z-index: 1; width: 92px; display: grid; justify-items: center; gap: 4px; opacity: 0; transform: rotate(var(--rot));
  animation: crew-in .86s var(--expo) var(--d) both, crew-bob 6.8s ease-in-out calc(var(--d) + .9s) infinite }
.crew.c2 { animation-duration: .86s, 8.2s } .crew.c3 { animation-duration: .86s, 7.4s } .crew.c4 { animation-duration: .86s, 9s }
.crew .bot { width: 100%; height: auto; filter: drop-shadow(0 16px 18px rgba(0,0,0,.45)); transition: transform .45s var(--expo), filter .45s }
.crew span { font: 600 11.5px/1 var(--sans); letter-spacing: .02em; color: var(--label); padding: 5px 10px; border-radius: 999px; background: rgba(20,20,22,.55); border: 1px solid var(--b10); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: color .3s, border-color .3s, background .3s }
.crew.talk .bot { transform: translateY(-4px) scale(1.08); filter: drop-shadow(0 18px 22px rgba(0,0,0,.5)) drop-shadow(0 0 18px rgba(255,158,87,.55)) }
.crew.talk span { color: #151516; background: var(--orange); border-color: transparent }
.crew.c1 { left: -160px; top: -74px } .crew.c2 { left: -104px; top: 64px; width: 72px }
.crew.c3 { right: -158px; top: -70px } .crew.c4 { right: -100px; top: 66px; width: 74px }
@keyframes crew-in { 0% { opacity: 0; transform: translateY(18px) scale(.3) rotate(var(--rot)) } 68% { opacity: 1; transform: translateY(-3px) scale(1.06) rotate(var(--rot)) } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(var(--rot)) } }
@keyframes crew-bob { 0%, 100% { transform: translateY(0) rotate(var(--rot)) } 40% { transform: translateY(-7px) rotate(calc(var(--rot) + 3deg)) } 75% { transform: translateY(3px) rotate(calc(var(--rot) - 2deg)) } }
.crew.c4 .notes { animation: notes 2.8s ease-in-out infinite; transform-origin: 50% 50% }
@keyframes notes { 50% { transform: translateY(-3px) } }
.crewchat { display: inline-flex; align-items: center; gap: 10px; max-width: min(560px, 92vw); margin: 4px auto 18px; padding: 8px 16px 8px 8px; border-radius: 999px; text-align: left; font-size: 14px; color: var(--label);
  border: 1.5px solid transparent; background: linear-gradient(rgba(26,26,28,.82), rgba(26,26,28,.82)) padding-box, var(--glass) border-box; box-shadow: 0 18px 40px -22px rgba(0,0,0,.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: rise .8s var(--expo) .5s both }
.crewchat .mini { width: 30px; height: 30px; flex: none }
.crewchat b { color: var(--peach); font-weight: 600; white-space: nowrap } .crewchat .msg { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.crewchat .dots { display: none; gap: 4px } .crewchat.typing .dots { display: inline-flex } .crewchat.typing .msg { display: none }
.crewchat .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--peach); animation: dot 1s ease-in-out infinite } .crewchat .dots i:nth-child(2) { animation-delay: .15s } .crewchat .dots i:nth-child(3) { animation-delay: .3s }
@keyframes dot { 0%, 100% { opacity: .3; transform: translateY(0) } 50% { opacity: 1; transform: translateY(-3px) } }
.hero h1 { margin-bottom: 18px }
@media (max-width: 1100px) { .crew.c1 { left: -118px } .crew.c3 { right: -116px } .crew.c2 { left: -86px } .crew.c4 { right: -84px } }
@media (max-width: 860px) { .titlewrap { padding-top: 102px; margin-top: 22px } .crew { width: 72px; top: 0 !important } .crew.c2, .crew.c4 { display: none } .crew.c1 { left: 14% } .crew.c3 { right: 14% } .crew span { font-size: 10.5px; padding: 4px 8px } }
@media (max-width: 480px) { .titlewrap { padding-top: 98px } .crew { width: 64px } .crew.c1 { left: 8% } .crew.c3 { right: 8% } .crewchat { font-size: 12.5px } .crewchat .mini { width: 24px; height: 24px } }
@media (prefers-reduced-motion: reduce) { .crew { animation: none; opacity: 1 } .crewchat { animation: none } .crew.c4 .notes, .crewchat .dots i { animation: none } }

/* ---------- sales copy additions ---------- */
.hero .anchor { margin: 18px auto 0; font: 500 clamp(15px, 1.7vw, 18px)/1.5 var(--sans); color: var(--label); max-width: 680px }
.hero .anchor s { color: rgba(242,241,239,.5); text-decoration-color: #ff7a5c; text-decoration-thickness: 2px }
.hero .anchor b { color: var(--ink); font-weight: 600 }
.vs { display: grid; gap: 16px; align-items: stretch } @media (min-width: 900px) { .vs { grid-template-columns: 1fr 1fr 1.15fr } }
.vsc { position: relative; padding: 28px; border-radius: 28px; background: var(--s2); border: 1px solid var(--b10); display: flex; flex-direction: column }
.vsc .who { font: 600 14px/1.4 var(--sans); color: var(--label); text-transform: uppercase; letter-spacing: .1em }
.vsc .cost { font: 900 clamp(30px, 2.6vw, 38px)/1.05 var(--display); white-space: nowrap; letter-spacing: -1px; margin-top: 10px; color: rgba(242,241,239,.6); text-decoration: line-through; text-decoration-color: rgba(255,122,92,.7); text-decoration-thickness: 2px }
.vsc .per { color: var(--step); font-size: 14px; margin-top: 2px }
.vsc ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; font-size: 15px; color: var(--body) }
.vsc ul li::before { content: "✕"; color: #ff7a5c; margin-right: 10px; font-weight: 700 }
.vsc.win .cost { color: var(--ink); text-decoration: none; font-size: clamp(44px, 4.4vw, 60px) }
.vsc.win .who { color: var(--peach) } .vsc.win ul { color: var(--ink) } .vsc.win ul li::before { content: "✓"; color: var(--orange) }
.vsc.win .tag { position: absolute; top: 22px; right: 22px; cursor: default; color: var(--ink) }

/* banner cards: name and button sit at the top as glass labels, so each film's own subtitles stay readable */
.arc .cap b { display: inline-block; padding: 7px 14px; border-radius: 999px; background: rgba(15,15,16,.55); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font: 600 14px/1.2 var(--sans) }
.arc .cap small { display: none }
.arc .cap .btn.white { min-height: 34px; padding: 6px 14px; font-size: 13px }

/* ---------- custom cursor (mouse/trackpad only; see partials/cursor.html) ---------- */
.cur-dot, .cur-ring { position: fixed; left: 0; top: 0; z-index: 2147483000; pointer-events: none; opacity: 0; transition: opacity .25s }
html.has-cur.cur-on .cur-dot, html.has-cur.cur-on .cur-ring { opacity: 1 }
html.has-cur, html.has-cur * { cursor: none !important }
html.has-cur.cur-text, html.has-cur.cur-text * { cursor: auto !important }
html.cur-text .cur-dot, html.cur-text .cur-ring { opacity: 0 !important }
.cur-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 12px rgba(255,158,87,.8) }
.cur-ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; display: grid; place-items: center }
.cur-ring::before { content: ""; position: absolute; inset: 0; border-radius: 999px; border: 1.5px solid rgba(255,212,162,.6); background: transparent;
  transition: inset .35s var(--expo), border-color .25s, background .25s, box-shadow .25s }
.cur-ring span { position: relative; font: 600 12.5px/1 var(--sans); color: #151516; white-space: nowrap; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .35s var(--expo) }
html.cur-link .cur-ring::before { inset: -12px; border-color: var(--orange); box-shadow: 0 0 22px rgba(255,158,87,.4) }
html.cur-link .cur-dot { transform-origin: center; }
html.cur-watch .cur-ring::before { inset: 0 -38px; background: var(--orange); border-color: var(--orange); box-shadow: 0 10px 30px rgba(255,158,87,.45) }
html.cur-watch .cur-ring span { opacity: 1; transform: scale(1) }
html.cur-watch .cur-dot { opacity: 0 !important }
html.cur-down .cur-ring::before { inset: 6px }