:root {
  color-scheme: light;
  --ink: #171717;
  --muted: #666762;
  --paper: #f7f6f2;
  --surface: #ffffff;
  --soft: #ecebe6;
  --line: #d9d8d1;
  --brand: #ff315f;
  --brand-dark: #dd1643;
  --orange: #ff8550;
  --cyan: #11bde4;
  --navy: #07132e;
  --navy-panel: #0d1d3f;
  --navy-line: rgba(167, 190, 235, 0.2);
  --navy-text: #f7f9ff;
  --navy-muted: #aebbd5;
  --shadow: 0 24px 70px rgba(26, 25, 22, 0.11);
}

[hidden] { display: none !important; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 16px/1.65 "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
img { max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 10px 14px; border-radius: 8px; background: var(--ink); color: #fff; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.site-header { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 28px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand img { width: 40px; height: 40px; border-radius: 12px; box-shadow: 0 8px 20px rgba(255, 49, 95, 0.17); }
.brand > span { display: grid; line-height: 1.05; }
.brand strong { font-size: 15px; letter-spacing: -0.02em; }
.brand small { margin-top: 5px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; }
nav { display: flex; align-items: center; gap: 24px; }
nav a { color: var(--muted); font-size: 13px; font-weight: 650; text-decoration: none; transition: color 180ms ease, background 180ms ease, transform 180ms ease; }
nav a:hover, nav a:focus-visible, nav a[aria-current="page"] { color: var(--ink); }
.nav-cta { padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff !important; }
.nav-cta:hover { background: var(--brand); transform: translateY(-1px); }

.eyebrow { margin: 0 0 20px; color: var(--brand); font-size: 11px; font-weight: 850; letter-spacing: 0.18em; text-transform: uppercase; }
h1, h2, h3 { margin-top: 0; line-height: 1.06; letter-spacing: -0.048em; }
h1 { font-size: clamp(54px, 7.2vw, 94px); }
h2 { font-size: clamp(40px, 5vw, 68px); }
h3 { font-size: 25px; }
.hero { min-height: 720px; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr); gap: 80px; align-items: center; padding-block: 88px; }
.hero-copy { position: relative; z-index: 2; }
.hero h1 { margin-bottom: 28px; }
.hero h1 em { color: var(--brand); font-style: normal; }
.lede { max-width: 720px; margin: 0; color: var(--muted); font-size: clamp(18px, 2vw, 22px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; border: 1px solid transparent; border-radius: 999px; font-size: 14px; font-weight: 760; text-decoration: none; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; }
.button:hover, .button:focus-visible { transform: translateY(-2px); }
.button-primary { background: var(--ink); color: #fff; box-shadow: 0 14px 26px rgba(23, 23, 23, 0.16); }
.button-primary:hover { background: var(--brand); box-shadow: 0 16px 34px rgba(255, 49, 95, 0.22); }
.button-secondary { border-color: var(--line); background: rgba(255,255,255,.58); }
.button-secondary:hover { background: #fff; }
.hero-note { max-width: 640px; margin: 22px 0 0; color: #7a7b76; font-size: 13px; }
.hero-visual { position: relative; min-height: 500px; display: grid; place-items: center; overflow: hidden; border-radius: 48% 48% 42% 42%; background: radial-gradient(circle at 62% 26%, rgba(17,189,228,.65), transparent 22%), radial-gradient(circle at 28% 75%, rgba(255,133,80,.55), transparent 24%), linear-gradient(145deg, #081632, #060d20); box-shadow: var(--shadow); }
.hero-visual > img { position: relative; z-index: 2; width: min(72%, 350px); border-radius: 24%; filter: drop-shadow(0 30px 45px rgba(0,0,0,.35)); transform: rotate(-4deg); }
.hero-orbit { position: absolute; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; }
.hero-orbit-one { width: 78%; aspect-ratio: 1; }
.hero-orbit-two { width: 110%; aspect-ratio: 1; }
.hero-status { position: absolute; z-index: 3; right: 24px; bottom: 34px; min-width: 180px; display: grid; grid-template-columns: 10px 1fr; column-gap: 10px; padding: 15px 18px; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; background: rgba(8,20,48,.8); color: #fff; backdrop-filter: blur(18px); }
.hero-status > span { grid-row: 1 / 3; align-self: center; width: 10px; height: 10px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 6px rgba(74,222,128,.12); }
.hero-status strong { font-size: 13px; }
.hero-status small { color: #aebbd5; font-size: 11px; }

.trust-strip { border-block: 1px solid var(--line); background: var(--surface); }
.trust-strip .shell { min-height: 76px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; }
.trust-strip span { padding: 0 20px; color: #6b6b66; font-size: 12px; font-weight: 750; text-align: center; text-transform: uppercase; letter-spacing: .08em; }
.trust-strip span + span { border-left: 1px solid var(--line); }
.section { padding-block: 120px; }
.section-heading { max-width: 780px; }
.section-heading h2 { margin-bottom: 0; }
.compact-heading { max-width: 720px; }
.compact-heading > p:last-child { color: var(--muted); font-size: 18px; }
.split-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; align-items: start; }
.about-grid { display: grid; gap: 18px; }
.story-card { min-height: 320px; display: flex; flex-direction: column; padding: 34px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: 0 18px 45px rgba(25,24,20,.05); }
.story-card-flow { background: var(--navy); color: #fff; }
.card-kicker { color: var(--brand); font-size: 11px; font-weight: 850; letter-spacing: .14em; }
.story-card h3 { max-width: 520px; margin: 56px 0 16px; font-size: 34px; }
.story-card p { color: var(--muted); }
.story-card-flow p { color: var(--navy-muted); }
.story-card a { margin-top: auto; font-size: 14px; font-weight: 760; text-decoration: none; }
.story-card a:hover { color: var(--brand); }

.process-section { background: var(--ink); color: #fff; }
.process-section .eyebrow { color: var(--orange); }
.process-section .compact-heading > p:last-child { color: #aaa9a3; }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 62px; background: #393936; border: 1px solid #393936; }
.process-grid article { min-height: 360px; display: flex; flex-direction: column; padding: 28px; background: #20201e; }
.process-grid article > span { color: var(--orange); font-size: 12px; font-weight: 850; }
.process-grid h3 { margin: 76px 0 16px; font-size: 30px; }
.process-grid p { color: #aaa9a3; }
.process-grid small { margin-top: auto; padding-top: 24px; border-top: 1px solid #3e3e3a; color: #dddcd5; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

.trust-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: 100px; }
.trust-copy { position: sticky; top: 40px; align-self: start; }
.trust-copy > p:not(.eyebrow) { color: var(--muted); font-size: 18px; }
.trust-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 30px; }
.trust-links a, .inline-link { font-size: 14px; font-weight: 760; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.control-list article { display: grid; grid-template-columns: 48px 1fr; gap: 22px; padding: 30px 0; border-top: 1px solid var(--line); }
.control-list article:last-child { border-bottom: 1px solid var(--line); }
.control-list article > span { color: var(--brand); font-size: 12px; font-weight: 850; }
.control-list h3 { margin-bottom: 8px; }
.control-list p { margin: 0; color: var(--muted); }

.faq-section { background: #ebeae4; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 60px; background: #cfcfc7; border: 1px solid #cfcfc7; }
.faq-grid article { min-height: 230px; padding: 32px; background: var(--paper); }
.faq-grid h3 { margin-bottom: 18px; }
.faq-grid p { color: var(--muted); }
.faq-grid a { font-weight: 700; }
.contact-section { display: grid; grid-template-columns: 1.2fr .8fr; gap: 80px; align-items: end; }
.contact-section h2 { max-width: 760px; margin-bottom: 18px; }
.contact-section > div > p:last-child { color: var(--muted); font-size: 18px; }
.contact-section address { display: grid; gap: 8px; padding: 30px; border-left: 3px solid var(--brand); background: var(--surface); font-style: normal; box-shadow: var(--shadow); }
.contact-section address a { margin-top: 12px; color: var(--brand-dark); font-weight: 760; }

footer { padding-block: 54px; border-top: 1px solid var(--line); background: var(--surface); }
.footer-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 34px 70px; }
.footer-brand { display: grid; line-height: 1.3; }
.footer-brand span { color: var(--muted); font-size: 12px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 20px; }
.footer-links a { color: var(--muted); font-size: 13px; text-decoration: none; }
.footer-links a:hover { color: var(--brand-dark); }
.footer-grid > p { grid-column: 1 / -1; margin: 0; padding-top: 28px; border-top: 1px solid var(--line); color: #7d7d77; font-size: 12px; }

/* Legal pages */
.legal { max-width: 860px; padding-block: 100px 130px; }
.legal h1 { margin-bottom: 14px; }
.updated { margin: 0 0 72px; color: var(--muted); }
.legal section { padding: 34px 0; border-top: 1px solid var(--line); }
.legal h2 { margin-bottom: 14px; font-size: 26px; letter-spacing: -.025em; }
.legal p, .legal li { color: var(--muted); }
.legal ul { padding-left: 22px; }
.legal li + li { margin-top: 12px; }
.legal a { color: var(--brand-dark); }

/* Publisher workspace */
.publisher-page { color: var(--navy-text); background: radial-gradient(circle at 82% 7%, rgba(17,189,228,.14), transparent 28rem), linear-gradient(180deg, #07142f, #050c20 72%); }
.publisher-page .site-header { border-color: var(--navy-line); }
.publisher-page .brand small, .publisher-page nav a { color: var(--navy-muted); }
.publisher-page nav a:hover, .publisher-page nav a:focus-visible { color: #fff; }
.publisher-page .eyebrow { color: var(--cyan); }
.publisher { padding-block: 80px 120px; }
.publisher-intro { max-width: 820px; margin-bottom: 58px; }
.publisher-intro h1 { margin-bottom: 28px; font-size: clamp(52px, 7vw, 88px); }
.publisher-intro > p:not(.eyebrow) { max-width: 720px; color: var(--navy-muted); font-size: 19px; }
.publisher-intro .inline-link { display: inline-block; margin-top: 16px; color: #fff; }
.workflow { display: grid; gap: 18px; }
.panel { padding: 30px; border: 1px solid var(--navy-line); border-radius: 22px; background: linear-gradient(145deg, rgba(15,35,75,.96), rgba(9,22,50,.9)); }
.panel-heading { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 28px; }
.panel-heading > span { color: var(--brand); font-size: 12px; font-weight: 850; letter-spacing: .14em; }
.panel-heading h2 { margin: 0 0 7px; font-size: 27px; }
.panel-heading p { margin: 0; color: var(--navy-muted); }
.account-empty { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px; border-radius: 14px; background: rgba(2,10,27,.4); }
.account-empty p { margin: 0; color: var(--navy-muted); }
.primary-button { min-height: 46px; display: inline-flex; justify-content: center; align-items: center; padding: 0 20px; border: 0; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 780; text-decoration: none; cursor: pointer; transition: background 180ms ease, transform 180ms ease; }
.primary-button:hover { background: var(--brand-dark); transform: translateY(-1px); }
.primary-button:focus-visible { outline: 3px solid rgba(17,189,228,.35); outline-offset: 3px; }
.primary-button:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.creator-card { display: grid; grid-template-columns: 54px 1fr auto; gap: 15px; align-items: center; padding: 18px; border: 1px solid rgba(17,189,228,.28); border-radius: 16px; background: rgba(17,189,228,.06); }
.creator-card img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.creator-card div { display: grid; }
.creator-card small, .creator-card span { color: var(--navy-muted); }
.connected-pill { padding: 6px 10px; border-radius: 999px; background: rgba(17,189,228,.13); color: #70dff7 !important; font-size: 12px; font-weight: 750; }
.upload-zone { min-height: 150px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; border: 1px dashed rgba(165,190,235,.42); border-radius: 16px; background: rgba(2,10,27,.35); cursor: pointer; transition: border-color 180ms ease, background 180ms ease; }
.upload-zone:hover { border-color: var(--cyan); background: rgba(17,189,228,.06); }
.upload-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-zone span { color: var(--navy-muted); font-size: 13px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
.field-grid label { display: grid; gap: 8px; color: #dce5fa; font-size: 13px; font-weight: 700; }
.field-grid label > span { display: flex; justify-content: space-between; }
.field-grid small { color: var(--navy-muted); font-weight: 500; }
.field-grid .wide { grid-column: 1 / -1; }
.publisher-page input, .publisher-page textarea, .publisher-page select { width: 100%; padding: 13px 14px; border: 1px solid var(--navy-line); border-radius: 10px; outline: none; background: #07132d; color: var(--navy-text); }
.publisher-page input:focus, .publisher-page textarea:focus, .publisher-page select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(17,189,228,.11); }
.toggle-field { grid-template-columns: auto 1fr !important; align-content: end; align-items: center; justify-content: start; padding-bottom: 12px; }
.toggle-field input, .confirm-row input { width: 18px; height: 18px; accent-color: var(--brand); }
.toggle-field > span { display: inline !important; }
.photo-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px,160px)); gap: 12px; margin-top: 18px; }
.photo-preview img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border: 1px solid var(--navy-line); border-radius: 14px; background: #07142e; }
.disclosure-options { padding: 16px; border: 1px solid var(--navy-line); border-radius: 14px; background: rgba(10,29,62,.72); }
.disclosure-options strong { display: block; margin-bottom: 12px; }
.disclosure-options .toggle-field { padding: 6px 0; }
.declaration { color: #fff; font-weight: 700; }
.review-box { margin-top: 24px; padding: 20px; border: 1px solid rgba(255,49,95,.28); border-radius: 14px; background: rgba(255,49,95,.06); }
.review-box p, .form-message { color: var(--navy-muted); }
.confirm-row { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; margin-top: 16px; color: #eaf0ff; }
.action { width: 100%; margin-top: 20px; }
.form-message { margin: 12px 0 0; font-size: 13px; }
.status-empty { min-height: 150px; display: grid; place-items: center; color: var(--navy-muted); }
.status-empty span { font-size: 28px; }
.publish-status { position: relative; min-height: 150px; display: flex; flex-direction: column; justify-content: center; padding-left: 72px; }
.status-orb { position: absolute; left: 10px; width: 42px; height: 42px; border: 4px solid rgba(17,189,228,.22); border-top-color: var(--cyan); border-radius: 50%; animation: spin 1s linear infinite; }
.publish-status small, .publish-status p { color: var(--navy-muted); }
.publish-status strong { margin-top: 4px; font-size: 22px; }
.publish-status p { margin: 7px 0 0; }
.publish-status.complete .status-orb { border-color: #34d399; animation: none; }
.publish-status.failed .status-orb { border-color: var(--brand); animation: none; }
.publisher-footer { border-color: var(--navy-line); background: #050c20; }
.publisher-footer .footer-links a, .publisher-footer .footer-brand span, .publisher-footer .footer-grid > p { color: var(--navy-muted); }
@keyframes spin { to { transform: rotate(360deg); } }

.callback-card { width: min(590px, calc(100% - 40px)); margin: 12vh auto; padding: 52px; border: 1px solid var(--line); border-radius: 26px; background: var(--surface); text-align: center; box-shadow: var(--shadow); }
.callback-card img { width: 92px; border-radius: 24px; }
.callback-card h1 { margin: 24px 0 18px; font-size: 42px; }
.callback-card p:not(.eyebrow) { color: var(--muted); }
.callback-card .eyebrow { margin-top: 26px; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { width: min(620px, 100%); min-height: 460px; }
  .split-section, .trust-section, .contact-section { grid-template-columns: 1fr; gap: 52px; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .trust-copy { position: static; }
  .trust-strip .shell { grid-template-columns: 1fr 1fr; }
  .trust-strip span { padding-block: 18px; }
  .trust-strip span:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .trust-strip span:nth-child(4) { border-top: 1px solid var(--line); }
}

@media (max-width: 760px) {
  .shell { width: min(100% - 32px, 1180px); }
  .site-header { min-height: auto; align-items: flex-start; padding-block: 18px; }
  nav { max-width: 58%; justify-content: flex-end; flex-wrap: wrap; gap: 10px 14px; }
  nav a:not(.nav-cta) { font-size: 12px; }
  .hero { min-height: 0; padding-block: 72px; }
  .hero h1 { font-size: clamp(48px, 14vw, 68px); }
  .hero-visual { min-height: 390px; border-radius: 32px; }
  .hero-status { right: 16px; bottom: 18px; }
  .section { padding-block: 84px; }
  .process-grid, .faq-grid { grid-template-columns: 1fr; }
  .process-grid article { min-height: 290px; }
  .process-grid h3 { margin-top: 48px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; }
  .footer-grid > p { grid-column: auto; }
  .field-grid { grid-template-columns: 1fr; }
  .field-grid .wide { grid-column: auto; }
  .account-empty { flex-direction: column; align-items: flex-start; }
  .creator-card { grid-template-columns: 48px 1fr; align-items: flex-start; }
  .connected-pill { grid-column: 2; }
  .publisher { padding-top: 64px; }
  .callback-card { padding: 36px 24px; }
}

@media (max-width: 480px) {
  .brand small { display: none; }
  .brand img { width: 36px; height: 36px; }
  nav { max-width: 62%; }
  nav a[href="#about"], nav a[href="#trust"] { display: none; }
  .nav-cta { padding: 8px 12px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .button { width: 100%; }
  .trust-strip .shell { grid-template-columns: 1fr; }
  .trust-strip span + span, .trust-strip span:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .story-card, .faq-grid article, .panel { padding: 24px; }
  .hero-visual { min-height: 340px; }
  .hero-status { left: 16px; right: 16px; }
  .contact-section address { padding: 24px; }
}