/* KATANO App skin over the original Creators composition.
   Geometry, responsive rules, animation keyframes and timers stay in creators.css.
   Sources, read only: creator-shell.css; workspace-reference.css;
   workspace-discovery.css; discovery-polish.css (including its final hover rules);
   workspace-heading-controls.css; workspace-buttons.css.
   Separate tokens keep dark foregrounds on the App's green actions. */
:root {
  color-scheme: dark;
  --app-canvas: #171717;
  --app-card: #1a1a1a;
  --app-surface: #1b1b1b;
  --app-menu: #191919;
  --app-highlight: #212121;
  --app-hover: #252525;
  --app-pill: #2d2d2d;
  --app-text: #ededed;
  --app-control-text: #e0e0e0;
  --app-muted: #999;
  --app-navigation-text: #b5b5b5;
  --app-icon: #848484;
  --app-border: #ffffff0d;
  --app-control-border: #2b2b2b;
  --app-hover-border: #ffffff24;
  --app-focus: #b8dfa9;
  --app-action-text: #1c3219;
  --app-action-background:
    radial-gradient(ellipse at 50% 0, #d5edbc 0, transparent 68%),
    linear-gradient(180deg, #b8dfa9 0%, #a4ca94 100%);
  --app-action-border: #cce6bd80;
  --app-action-shadow: inset 0 1px 0 #e7f7d83b, 0 1px 2px #0002;
  --app-action-hover-shadow: inset 0 1px 0 #f1ffe14d, 0 1px 3px #0003;
  --app-control-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Page canvas and the same locally hosted Inter used by the App. */
body,
.hero,
.results,
.site-footer,
.footer-inner {
  background: var(--app-canvas);
  color: var(--app-text);
}
body {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-weight: 400;
  font-optical-sizing: auto;
  font-synthesis: none;
  letter-spacing: -0.01em;
}
h1,
h2,
h3,
.hero h1,
.section-heading h2,
.benefits > h2,
.results h2,
.invitation-card h2,
.footer-inner > h2 {
  font-weight: 600;
  letter-spacing: -0.02em;
}
.campaign-info h3,
.brief-preview h3,
.benefit-copy h3,
.quote-person h3,
.story-caption strong {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.hero-copy > p,
.benefit-copy p,
.story-quote > p,
.format-copy p,
.faq-question {
  letter-spacing: -0.02em;
}
.nav-link,
.nav-popover a,
.nav-popover button,
.campaign-owner,
.campaign-meta,
.demo-note,
.material-caption,
.pending-label,
.footer-main nav,
.footer-legal button {
  font-weight: 400;
}
.button,
.workflow-tabs button,
.period-tabs button,
.filter-track b,
.faq-question,
.receipt-preview > strong {
  font-weight: 500;
}

/* Header, menus and navigation use the App's neutral controls. */
.site-header {
  background: rgba(23, 23, 23, 0.91);
}
.site-header.is-scrolled {
  background: rgba(23, 23, 23, 0.96);
  border-color: #ffffff0f;
}
.nav-link,
.footer-main nav,
.footer-social,
.footer-legal button {
  color: var(--app-navigation-text);
}
.nav-link {
  transition: color 140ms;
}
.nav-link:hover,
.footer-main nav a:hover,
.footer-social:hover,
.footer-legal button:hover {
  color: var(--app-text);
}
.nav-popover {
  background: var(--app-menu);
  color: var(--app-control-text);
  border-color: #e0e0e00f;
  box-shadow: 0 4px 12px #0000001f;
}
.nav-popover :is(a, button) {
  color: var(--app-control-text);
  transition:
    background-color 0.15s var(--app-control-ease),
    color 0.15s var(--app-control-ease);
}
.nav-popover :is(a, button):hover {
  background: var(--app-highlight);
  color: var(--app-text);
}
.preview-tag {
  color: var(--app-navigation-text);
  border-color: var(--app-control-border);
}
.menu-toggle span,
.dialog-close span,
.mobile-menu-close span {
  background: var(--app-control-text);
}
.skip-link {
  background: var(--sage);
  color: var(--app-action-text);
}

/* Exactly the App's existing green-action finish, on existing green actions only. */
.button-primary,
.visual-button {
  background: var(--app-action-background);
  border-color: var(--app-action-border);
  color: var(--app-action-text);
  box-shadow: var(--app-action-shadow);
}
.button-primary {
  transition:
    filter 130ms ease,
    box-shadow 130ms ease;
}
.button-primary:hover {
  opacity: 1;
  filter: brightness(1.045);
  box-shadow: var(--app-action-hover-shadow);
}
.button-primary:active {
  opacity: 1;
  filter: brightness(0.98);
}
.button-quiet,
.button-dark,
.button-glass {
  background: #e0e0e00f;
  color: var(--app-control-text);
  border-color: #e0e0e00f;
  box-shadow: none;
  transition:
    background-color 0.15s var(--app-control-ease),
    color 0.15s var(--app-control-ease),
    border-color 0.15s var(--app-control-ease);
}
.button-quiet:hover,
.button-dark:hover,
.button-glass:hover {
  background: #e0e0e01a;
  color: var(--app-text);
  border-color: var(--app-hover-border);
  opacity: 1;
}
.button-quiet:active,
.button-dark:active,
.button-glass:active {
  background: var(--app-hover);
  opacity: 1;
}

/* Text hierarchy: the same App foregrounds without changing the original scale. */
.hero-copy > p,
.workflow-caption,
.campaign-owner,
.campaign-meta,
.demo-kicker,
.demo-note,
.material-caption,
.pending-label,
.submit-preview > p,
.receipt-preview > p,
.receipt-preview > span:not(.demo-kicker),
.receipt-preview small,
.brands-group > span,
.brands-group i,
.brands-area > .material-caption,
.results > p,
.results > .material-caption,
.benefit-copy p,
.brief-preview > p,
.filter-track b,
.format-copy p,
.collage-caption,
.stories .section-heading > .material-caption,
.quote-person > div > span,
.story-invite > p,
.invitation-card > p,
.invitation-note,
.faq-answer p,
.faq-more,
.copyright,
.preview-dialog p,
.mobile-menu-actions > span {
  color: var(--app-muted);
}
.format-copy strong,
.faq-more .inline-link,
.inline-link {
  color: var(--app-text);
}
.format-copy strong {
  font-weight: 600;
}
.eyebrow {
  background: var(--app-pill);
  color: var(--app-navigation-text);
}
.brands-group > span,
.brands-group > span:nth-child(2n),
.brands-group i {
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: -0.01em;
}

/* Workflow cards: retain border widths, crops, receipt shape and all positions. */
.workflow-tabs button {
  color: var(--app-muted);
  transition:
    color 140ms,
    opacity 140ms;
}
.workflow-tabs button + button {
  border-left-color: var(--app-control-border);
}
.workflow-tabs button[aria-selected="true"],
.workflow-tabs button:hover {
  color: var(--app-text);
}
.workflow-progress,
.receipt-steps i {
  background: var(--app-pill);
}
.workflow-progress span,
.receipt-steps i:first-child,
.receipt-steps i:nth-child(2) {
  background: var(--sage);
}
.campaign-card {
  background: var(--app-card);
  color: var(--app-text);
  border-color: var(--app-card);
  box-shadow: inset 0 0 0 1px var(--app-border);
}
.campaign-art {
  background: var(--app-hover);
}
.campaign-art:after {
  background: linear-gradient(transparent 20%, #00000070);
}
.art-label {
  background: #141414ce;
  color: var(--app-text);
  box-shadow: inset 0 0 0 1px var(--app-hover-border);
}
.art-icon {
  stroke: var(--app-text);
}
.submit-preview,
.receipt-preview {
  background: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-border);
  box-shadow: none;
}
.submission-shape {
  background: var(--app-elevated, #202020);
  color: var(--app-text);
}
.submission-shape > span:first-child {
  color: var(--app-muted);
}
.shape-action {
  background: var(--app-hover);
  color: var(--app-text);
  border-color: var(--app-control-border);
  box-shadow: none;
}
.submission-icons,
.format-copy > .icon,
.round-icon {
  color: var(--app-icon);
}
.period-tabs {
  background: var(--app-menu);
}
.period-tabs button {
  color: var(--app-muted);
  transition:
    background-color 0.15s var(--app-control-ease),
    color 0.15s var(--app-control-ease),
    border-color 0.15s var(--app-control-ease);
}
.period-tabs button[aria-selected="true"] {
  background: var(--app-hover);
  color: var(--app-text);
  border-color: var(--app-control-border);
  box-shadow: none;
}
.period-tabs button:hover {
  color: var(--app-text);
}

/* Existing benefit illustrations, recolored rather than rearranged. */
.benefit-card {
  background: var(--app-surface);
  color: var(--app-text);
  box-shadow: inset 0 0 0 1px var(--app-border);
}
.brief-preview,
.filter-track {
  background: var(--app-menu);
  color: var(--app-text);
  border-color: var(--app-border);
  box-shadow: none;
}
.brief-head > span:first-child {
  color: var(--sage);
  font-weight: 500;
}
.round-icon {
  border-color: var(--app-control-border);
}
.filter-track span {
  color: var(--app-text);
}
.review-orbit {
  border-color: var(--app-pill);
  box-shadow: 0 0 0 1px var(--app-border);
}
.review-orbit > div {
  border-color: var(--sage);
  border-left-color: #a4ca94;
}
.review-orbit .icon {
  color: var(--sage);
}
.creative-bars i {
  background: linear-gradient(#b8dfa9, #a4ca94);
}
.status-track > span {
  background: #203521;
  color: #b1dca2;
}
.status-track > span:nth-child(3n + 2),
.status-track > span:nth-child(3n) {
  background: var(--app-pill);
  color: var(--app-text);
}
.format-copy {
  border-bottom-color: var(--app-control-border);
}

/* Media placeholders keep their original graphics and silhouette. */
.story-video {
  background: var(--app-surface);
  color: var(--app-text);
  box-shadow: inset 0 0 0 1px var(--app-border);
}
.story-video-1 {
  background: var(--app-menu);
}
.story-video-2 {
  background: var(--app-hover);
}
.story-video-3 {
  background: var(--app-card);
}
.story-video:before {
  border-color: var(--app-hover-border);
}
.story-video:after {
  border-color: #e0e0e00f;
}
.story-label {
  background: var(--app-menu);
  border-color: var(--app-hover-border);
  color: var(--app-control-text);
}
.story-symbol {
  background: #e0e0e00f;
  border-color: var(--app-hover-border);
  color: var(--app-control-text);
  transition:
    background-color 0.15s var(--app-control-ease),
    color 0.15s var(--app-control-ease);
}
.story-video:hover .story-symbol {
  background: #e0e0e01a;
  color: var(--app-text);
}
.story-caption > span {
  color: var(--app-navigation-text);
}
.story-video:focus-visible {
  outline-color: var(--app-focus);
  box-shadow: inset 0 0 0 11px var(--app-menu);
}
.story-quote {
  background: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-border);
  box-shadow: none;
}
.avatar-placeholder {
  background: var(--app-pill);
  color: var(--app-muted);
}
.invitation-card {
  background: var(--app-surface);
  color: var(--app-text);
  box-shadow: inset 0 0 0 1px var(--app-border);
}
.invitation-features > span {
  color: var(--app-navigation-text);
}
.invitation-features .icon {
  color: var(--sage);
}
.faq-item {
  background: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-border);
}
.faq-question {
  color: var(--app-text);
  transition: background-color 0.15s var(--app-control-ease);
}
.faq-question:hover {
  background: var(--app-highlight);
}
.faq-question .icon {
  color: var(--app-muted);
}
.footer-shape {
  border-color: var(--app-pill);
  box-shadow: 8px 8px 0 var(--app-surface);
}

/* Dialogs, mobile navigation and motion controls share the App menu treatment. */
.motion-toggle,
.motion-tooltip,
.preview-dialog {
  background: var(--app-menu);
  color: var(--app-control-text);
  border-color: #e0e0e00f;
  box-shadow: 0 4px 12px #0000001f;
}
.motion-toggle:hover {
  background: var(--app-highlight);
}
.pause-symbol i {
  background: var(--app-control-text);
}
.motion-toggle[aria-pressed="true"] .pause-symbol {
  border-left-color: var(--app-control-text);
}
.preview-dialog::backdrop {
  background: #0009;
}
.dialog-close:hover,
.mobile-menu-close:hover {
  background: var(--app-highlight);
}
.mobile-menu[open],
.mobile-menu::backdrop {
  background: var(--app-canvas);
  color: var(--app-text);
}
.mobile-audience {
  background: var(--app-menu);
}
.mobile-audience button {
  color: var(--app-muted);
}
.mobile-audience span {
  background: var(--app-hover);
  color: var(--app-text);
  box-shadow: inset 0 0 0 1px var(--app-control-border);
}
.mobile-menu nav > button,
.mobile-menu summary {
  color: var(--app-text);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.mobile-menu details > a,
.mobile-menu details > button {
  color: var(--app-navigation-text);
}
.mobile-menu details > a:hover,
.mobile-menu details > button:hover {
  color: var(--app-text);
}

/* Keep every original focus offset, clipped-media ring and reduced-motion rule. */
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline-color: var(--app-focus);
}
.button-primary:focus-visible {
  outline-color: #d6eccc;
}

/* Preserve the original two-line hero at 320 px with the App's 600 weight. */
@media (max-width: 360px) {
  .hero h1 {
    letter-spacing: -0.03em;
  }
}