/* Brand V1.0: shared readable type and restrained accents. */
body { font-size: var(--font-body); }
.header { gap: 24px; }
.desktop-nav { gap: 24px; }
.desktop-nav a, .header-login { font-size: var(--font-navigation); }
.prototype-pill { font-size: 12px; letter-spacing: 0; }
.btn, .btn-small, .text-link, .text-button { font-size: var(--font-control); }
.btn { min-height: 48px; }
.btn-small { min-height: 44px; }
.btn-primary { color: var(--text-on-accent); background: var(--accent-primary); border-color: var(--accent-primary); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.eyebrow { font-size: 12px; letter-spacing: 1.1px; }
.page-intro h1 { font-size: clamp(40px, 4.4vw, 56px); }
.section-heading h2 { font-size: 40px; }
.section-description, .page-intro p, .hero-description, .tool-content p,
.workflow p, .workflow-steps p, .preview-detail > p, .learn-card p, .price-card p,
.auth-story > p, .auth-panel > p, .job-description, .direction-summary > p,
.result-details > p, .balance-card > p, .sample-info > p, dialog p,
.brand-body-example, .brand-rule-grid p { font-size: 16px; line-height: 1.75; }
.page-intro p { max-width: 680px; }
.showcase-caption p, .closing p, .footer p, .footer nav, .review-index a p,
.library-card-copy p { font-size: 14px; line-height: 1.7; }
.showcase-caption h3, .project-card-info h3 { font-size: 20px; line-height: 1.25; }
.tool-content h3 { font-size: 27px; }
.workflow-steps h3 { font-size: 22px; }
.panel-head h2 { font-size: 21px; }
.field-label, .workspace-tabs a, .workspace-tabs button, .admin-sidebar a,
.library-tabs a, .scene-expand, .scene-library-link, .choice, .chip { font-size: 14px; }
.field-label { flex-wrap: wrap; gap: 7px; }
.field-label > span, .panel-head > span, .soon-label, .status-tag, .page-status,
.settings-notice, .quote-fine, .auth-panel .auth-fine, .sample-info .sample-disclosure,
.hero-upload-hint, .footer-note, .upload-helper, .consent, .notice, .flow-notice,
.flow-notice > span:last-of-type, .flow-notice strong, .flow-notice > a,
.result-facts dt, .detail-list dt, .artwork-top span, .artwork-bottom,
.media-tools > span, .media-label, .job-proof { font-size: 12px; line-height: 1.65; letter-spacing: 0; }
.field-error { color: var(--error); font-size: 14px; line-height: 1.6; }
.settings-notice, .quote-fine, .hero-upload-hint, .footer-note { color: var(--text-muted); }
.chip { padding: 9px 12px; min-height: 40px; }
.chip.selected, .choice.selected { color: var(--text-primary); background: #293222; border-color: var(--accent-primary); }
.choice { min-height: 48px; }
.scene-choice { height: 96px; }
.scene-choice span { font-size: 12px; line-height: 1.3; left: 7px; right: 7px; text-align: left; }
.scene-filters .chip { font-size: 12px; min-height: 36px; }
.scene-expand { min-height: 44px; }
.scene-grid-expanded { max-height: 346px; }
input[type=text], input[type=email], input[type=search], textarea, select { font-size: 16px; }
.upload-zone strong { font-size: 16px; }
.upload-zone p, .upload-zone .upload-overlay { font-size: 12px; }
.upload-helper button { font-size: 12px; }
.upload-helper { flex-wrap: wrap; }
.upload-zone { min-height: 166px; }
.upload-zone img { height: 166px; }
.preview-meta span, .track-info span { font-size: 12px; }
.preview-meta strong, .detail-list dd, .quote-line, .result-facts dd { font-size: 14px; }
.state-shortcuts > span { font-size: 12px; letter-spacing: .5px; }
.state-shortcuts > a { font-size: 14px; min-height: 34px; align-items: center; }
.table-detail { font-size: 14px; }
table { font-size: 14px; }
th, td small, .table-foot, .stat span, .stat small { font-size: 12px; line-height: 1.6; }
.access-row p { font-size: 16px; }
.access-row small { font-size: 12px; }
.badge { font-size: 12px; line-height: 1.5; }
.badge:not(.refund):not(.pending) { color: var(--success); background: #1e3021; }
.badge.refund, .notice-warning { color: var(--warning); background: #2b261b; border-color: #685937; }
.badge.pending { color: var(--text-secondary); background: var(--bg-card); }
.job-badge.lime, .job-emblem.lime { color: var(--success); }
.job-badge.amber, .job-emblem.amber { color: var(--warning); }
.job-badge.red, .job-emblem.red { color: var(--error); }
.job-emblem.red { border-color: var(--error); }
.job-stages li { font-size: 14px; }
.job-stages li > span, .flow-stepper a { font-size: 12px; }
.quote-number > strong, .balance-number { color: var(--text-primary); }
.quote-number > span:first-of-type, .balance-number > span { color: var(--accent-primary); padding: 4px 8px; font-size: 12px; background: #293222; border: 1px solid #53653c; border-radius: 4px; }
.tool-card, .tool-card.featured { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-default); }
.project-card, .learn-card, .price-card, .library-card, .stat { background: var(--bg-card); }
.tool-card.featured { border-top: 2px solid var(--accent-primary); }
.tool-card.featured .tool-icon, .tool-card.featured .status-tag { color: var(--accent-primary); }
.tool-content p { opacity: 1; color: var(--text-secondary); }
.tool-content .text-link, .tool-card:not(.featured) .text-link { border-color: var(--border-default); color: var(--text-primary); font-size: 14px; }
.photo-frame, .film-frame { border-color: #68735b; }
.film-frame { background: #2b3424; color: var(--accent-primary); }
.film-frame:before, .film-frame:after { opacity: .5; }
.price-card.highlight { background: var(--bg-card); }
.toast { background: var(--accent-primary); color: var(--text-on-accent); font-size: 14px; }
.review-index a h3 { font-size: 22px; }
.review-index h2 { font-size: 12px; }
.design-palette > div { font-size: 12px; }
.library-card-copy h2 { font-size: 23px; line-height: 1.2; }
.library-card-copy p { min-height: 72px; }
.library-card-copy .text-link { font-size: 14px; }
.library-scene > span, .library-scene > b { font-size: 12px; max-width: calc(100% - 20px); }
.library-scene > b { top: auto; bottom: 10px; right: 10px; }
.audit-table td small { font-size: 12px; }
.audit-table td:first-child > strong { font-size: 16px; }

/* Conversion-oriented hero: keep the brand, clarify the product. */
.hero { padding-top: 34px; padding-bottom: 32px; min-height: 0; gap: 42px; }
.hero-copy { padding-bottom: 0; min-width: 0; }
.hero-product-name { font-size: 16px; color: var(--text-primary); font-weight: 600; letter-spacing: -.2px; display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.hero-product-name > span { color: var(--accent-primary); }
.hero h1 { font-size: clamp(56px, 4.7vw, 70px); line-height: 1.04; letter-spacing: -3.7px; }
.hero h1 em { letter-spacing: -3px; }
.hero-description { margin: 21px 0 23px; max-width: 465px; font-size: 17px; }
.hero-description strong { color: var(--text-primary); font-weight: 400; }
.hero-actions { gap: 12px; margin-top: 20px; }
.hero-actions .btn { font-size: 14px; padding: 14px 19px; gap: 20px; }
.hero-upload-hint { margin-top: 11px; }
[data-owner-only][hidden] { display: none !important; }
.hero-copy > label { display:block; margin: 18px 0 8px; }
.hero-copy > select { max-width: 240px; }
.faq-item { border-bottom: 1px solid var(--border-default); padding: 18px 0; }
.faq-item summary { cursor: pointer; font-weight: 600; }
.faq-item p { margin-top: 12px; color: var(--text-secondary); }
#hero-upload-error:empty { min-height: 0; margin: 0; }
.hero-flow { display: flex; align-items: center; gap: 14px; list-style: none; padding: 0; margin: 24px 0 15px; color: var(--text-primary); flex-wrap: wrap; }
.hero-flow li { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; }
.hero-flow li > span { font: 12px var(--mono); color: var(--text-muted); }
.hero-flow li[aria-hidden] { color: var(--text-muted); }
.hero-lookbook { display: inline-flex; align-items: center; gap: 15px; font-size: 14px; color: var(--text-secondary); }
.hero-lookbook:hover { color: var(--accent-primary); }
.hero-visual { height: 500px; margin-bottom: 26px; }
.frame-top { font-size: 12px; letter-spacing: .5px; left: 26px; right: 26px; }
.hero-play { position: absolute; top: 43%; left: 50%; transform: translate(-50%,-50%); z-index: 3; background: #1518109e; color: var(--text-primary); border: 1px solid #ffffff6b; border-radius: 9px; backdrop-filter: blur(12px); padding: 13px 17px; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.hero-play:hover { border-color: var(--accent-primary); background: #28331ed9; }
.hero-play > span:first-child { font-size: 26px; line-height: 1; }
.hero-visual .visual-caption { left: 26px; bottom: 160px; }
.visual-caption > p { font-size: 12px; letter-spacing: .6px; margin-bottom: 9px; }
.visual-caption h2 { font-size: 32px; }
.hero-sample-label { position: absolute; z-index: 3; left: 26px; bottom: 104px; right: 26px; font: 12px/1.5 var(--font); color: var(--text-primary); background: #101110c9; border: 1px solid #ffffff2b; border-radius: 4px; padding: 7px 10px; width: fit-content; max-width: calc(100% - 52px); }
.floating-audio { left: -18px; right: 18px; bottom: -24px; padding: 15px 17px; gap: 13px; }
.track-info { white-space: normal; max-width: 230px; }
.track-info strong { font-size: 14px; line-height: 1.4; margin-bottom: 4px; }
.track-info span { font-size: 12px; line-height: 1.4; }
.floating-audio .waveform { min-width: 65px; }
.hero-visual.is-video { height: auto; }
.hero-visual.is-video:after { display: none; }
.hero-visual.is-video .hero-art { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: contain; background: #080a07; }
.hero-visual.is-video .hero-sample-label { top: 15px; bottom: auto; pointer-events: none; }
.hero-visual.is-video .floating-audio { position: static; margin: 12px 0 0; }
.hero-video-error { position: absolute; inset: 0; background: #101110d9; padding: 25px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; z-index: 3; }
.hero-video-error h2 { font-size: 30px; }
.hero-video-error p { font-size: 16px; margin: 14px 0; }
.section-line { margin-top: 18px; }
.section-line > span { font-size: 12px; letter-spacing: .7px; }
.capability-list { gap: 25px; font-size: 14px; flex-wrap: wrap; }

/* Living brand specification. */
.token-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 17px; margin-top: 28px; }
.token-card { padding: 20px; border: 1px solid var(--border-default); border-radius: 9px; background: var(--bg-card); }
.token-card i { display: block; height: 55px; border-radius: 5px; border: 1px solid #ffffff25; margin-bottom: 18px; }
.token-card h2 { font: 14px/1.5 var(--mono); letter-spacing: -.3px; overflow-wrap: anywhere; }
.token-card code { display: block; font: 14px var(--mono); color: var(--text-secondary); margin-top: 10px; }
.token-card p { font-size: 14px; line-height: 1.6; margin-top: 10px; color: var(--text-secondary); }
.brand-type-section, .brand-rules { margin-top: 50px; padding-top: 32px; border-top: 1px solid var(--border-default); }
.brand-type-section h2, .brand-rules h2 { font-size: 36px; margin: 15px 0; }
.brand-body-example { max-width: 700px; }
.brand-rule-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; margin-top: 30px; }
.brand-rule-grid h3 { font-size: 24px; margin-bottom: 13px; }
.brand-rule-grid p { color: var(--text-secondary); }

@media (max-width:1200px) {
  .prototype-pill { display: none; }
  .section-line { align-items: flex-start; flex-direction: column; }
  .capability-list { width: 100%; justify-content: space-between; }
  .hero { gap: 30px; }
  .hero-actions .btn { gap: 12px; padding: 14px 16px; }
}
@media (max-width:1000px) {
  .hero h1 { font-size: 55px; letter-spacing: -3px; }
  .hero h1 em { letter-spacing: -2.7px; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { padding: 12px 13px; gap: 9px; }
  .hero-visual { height: 510px; }
  .frame-top { flex-wrap: wrap; gap: 5px 12px; }
  .hero-sample-label { bottom: 104px; }
  .hero-visual .visual-caption { bottom: 160px; }
  .floating-audio { left: -10px; right: 10px; }
  .track-info { max-width: 190px; }
  .token-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width:900px) {
  .header { height: 76px; justify-content: space-between; }
  .header-actions { margin-left: auto; }
  .header-actions > .btn { display: none; }
  .mobile-menu { display: inline-flex; }
  .desktop-nav { display: none; position: absolute; top: 75px; left: 0; right: 0; padding: 13px 25px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-default); }
  .header.menu-open .desktop-nav { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
  .desktop-nav a { padding: 13px 0; font-size: 15px; }
  .desktop-nav a.active:after { display: none; }
}
@media (max-width:800px) {
  .hero { padding-top: 28px; gap: 30px; }
  .hero h1 { font-size: 64px; }
  .hero-visual { height: 480px; margin: 0 7px 25px 10px; }
  .hero-description { max-width: none; }
  .hero-actions .btn { padding: 14px 20px; gap: 20px; }
  .hero-visual .visual-caption { bottom: 160px; }
  .hero-sample-label { bottom: 104px; }
  .frame-top { flex-wrap: nowrap; }
  .track-info { max-width: 240px; }
  .sample-feature { grid-template-columns: 1fr; }
  .sample-poster { min-height: 350px; height: 350px; }
  .sample-info h3 br { display: none; }
  .sample-info h3 { max-width: 480px; }
  .flow-notice { gap: 9px; }
  .preview-meta { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .token-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .brand-rule-grid { grid-template-columns: 1fr; }
  .library-card-copy p { min-height: 96px; }
}
@media (max-width:520px) {
  .header { height: 72px; padding: 0 20px; }
  .desktop-nav { top: 71px; }
  .header-login { font-size: 14px; }
  .hero { padding-top: 24px; padding-bottom: 20px; gap: 24px; }
  .hero-product-name { font-size: 14px; margin-bottom: 14px; }
  .hero h1 { font-size: clamp(38px,11.8vw,56px); letter-spacing: -2.3px; }
  .hero h1 em { letter-spacing: -2px; }
  .hero-description { font-size: 16px; line-height: 1.65; margin: 18px 0 21px; }
  .hero-actions { align-items: stretch; gap: 10px; }
  .hero-actions .btn { font-size: 14px; padding: 12px 14px; gap: 10px; min-height: 48px; }
  .hero-actions .btn-quiet { border-color: var(--border-default); }
  .hero-upload-hint { font-size: 12px; }
  .hero-flow { gap: 9px; margin-top: 20px; }
  .hero-flow li { font-size: 14px; gap: 5px; }
  .hero-flow li > span { font-size: 12px; }
  .hero-lookbook { font-size: 14px; }
  .hero-visual { height: 430px; margin: 0 4px 24px; }
  .frame-top { top: 23px; left: 22px; right: 22px; font-size: 12px; }
  .frame-top > span:last-child { display: none; }
  .hero-play { top: 33%; font-size: 14px; white-space: nowrap; padding: 12px 14px; }
  .hero-visual .visual-caption { left: 22px; bottom: 175px; }
  .visual-caption h2 { font-size: 28px; }
  .visual-caption > p { font-size: 12px; }
  .hero-sample-label { left: 22px; right: 22px; bottom: 110px; max-width: calc(100% - 44px); font-size: 12px; line-height: 1.5; }
  .floating-audio { left: -4px; right: 4px; padding: 13px; gap: 10px; }
  .round-symbol { width: 32px; height: 32px; }
  .track-info { max-width: 180px; }
  .track-info strong { font-size: 12px; }
  .track-info span { font-size: 12px; }
  .floating-audio .waveform { min-width: 35px; }
  .section-heading h2 { font-size: 32px; }
  .page-intro h1 { font-size: 38px; }
  .page-intro p { font-size: 16px; }
  .capability-list { grid-template-columns: 1fr 1fr; font-size: 14px; gap: 15px; }
  .section-line > span { font-size: 12px; letter-spacing: .4px; }
  .btn-small { font-size: 14px; }
  .workspace-tabs { gap: 23px; }
  .workspace-tabs a, .workspace-tabs button { font-size: 14px; }
  .workspace-tabs .soon-label { display: none; }
  .panel-head h2 { font-size: 20px; }
  .panel-head { gap: 10px; flex-wrap: wrap; }
  .field-label { font-size: 14px; }
  .choice { font-size: 14px; line-height: 1.4; padding: 10px 5px; min-height: 50px; }
  .scene-choice { height: 100px; }
  .scene-choice span { font-size: 12px; }
  .scene-filters .chip { font-size: 12px; min-height: 38px; }
  .consent { font-size: 12px; }
  .preview-title h3 { font-size: 29px; }
  .preview-title p { font-size: 14px; }
  .preview-meta { gap: 12px; }
  .preview-meta strong { font-size: 14px; }
  .flow-notice > span:last-of-type { font-size: 12px; }
  .flow-stepper { flex-wrap: wrap; gap: 12px; }
  .flow-stepper a { font-size: 12px; }
  .quote-line { font-size: 14px; }
  .job-description { font-size: 16px; }
  .job-top { flex-wrap: wrap; }
  .job-top > .eyebrow, .job-badge, .job-stages li { font-size: 12px; }
  .media-empty p { font-size: 14px; }
  .media-label { left: 12px; right: 12px; font-size: 12px; }
  .media-tools .btn { font-size: 14px; }
  .media-tools > span { font-size: 12px; }
  .footer nav { font-size: 14px; gap: 16px; }
  .library-card-copy h2 { font-size: 21px; min-height: 50px; }
  .library-card-copy p { font-size: 14px; min-height: 120px; }
  .library-card-copy .text-link { font-size: 14px; flex-wrap: wrap; }
  .library-tabs { gap: 18px; }
  .library-tabs a { font-size: 14px; }
  .library-tabs a > span { font-size: 12px; }
  .library-scene > span, .library-scene > b { font-size: 12px; }
  .library-scene > b { left: 9px; right: auto; }
  .design-palette { grid-template-columns: 1fr; }
  .design-palette > div { font-size: 12px; }
  .stat-grid { grid-template-columns: 1fr; gap: 10px; }
  .stat { display: grid; grid-template-columns: 1fr auto; gap: 7px 15px; padding: 16px; align-items: center; }
  .stat strong { font-size: 28px; grid-column: 2; grid-row: 1/3; margin: 0; }
  .stat span, .stat small { font-size: 12px; }
  .credit-ledger th { font-size: 12px; }
  .credit-ledger td { font-size: 14px; }
  .token-grid { gap: 12px; }
  .token-card { padding: 15px; }
  .token-card h2 { font-size: 12px; }
  .brand-type-section h2, .brand-rules h2 { font-size: 32px; }
}
@media (max-width:360px) {
  .hero-actions .btn { width: 100%; justify-content: space-between; }
  .hero-flow { gap: 8px; }
  .hero-flow li { font-size: 12px; }
  .hero-visual { height: 425px; }
  .floating-audio .waveform { display: none; }
  .track-info { max-width: none; }
  .preview-meta { grid-template-columns: 1fr; }
  .library-tabs { flex-wrap: wrap; gap: 0 20px; }
  .library-card-copy h2, .library-card-copy p { min-height: 0; }
  .token-grid { grid-template-columns: 1fr; }
}