@layer brand {
/* Shared semantic colors: warm stone / crimson by default; midnight slate /
   violet in themes.css. Action fills are separate from decorative accent ink. */
:root {
  /* Materials. Muted ink remains readable; decorative colors never label controls. */
  --wf-base:#f6f4ee;--wf-secondary:#ece8de;
  --wf-paper:#f6f4ee;--wf-surface:#ffffff;--wf-soft:#faf8f5;
  --wf-surface-hover:#faf8f5;--wf-rule:#e3ddd2;--wf-border-hover:rgba(0,0,0,.12);
  --wf-ink:#18181b;--wf-muted:#52525b;--wf-tertiary:#68645b;--wf-decorative:#8c887b;
  --wf-highlight:#e11d48;--wf-highlight-hover:#be123c;--wf-highlight-ink:#ffffff;
  --wf-action:#e11d48;--wf-action-hover:#be123c;--wf-accent-ink:#be123c;--wf-focus:#be123c;
  --wf-nav-tint:rgba(225,29,72,.08);--wf-nav-indicator:#e11d48;
  --wf-control-border:#8f8b80;
  --wf-inverse:#29252b;--wf-inverse-ink:#ffffff;--wf-inverse-muted:#d5d0d7;--wf-inverse-rule:#59515c;
  --wf-sidebar:#ece8de;--wf-sidebar-ink:#18181b;--wf-sidebar-muted:#52525b;--wf-sidebar-hover:#e3ddd2;
  --wf-forest:#29252b;--wf-sage:#faf8f5;--wf-orange:#be123c;--wf-blue:#405773;
  --wf-shadow:#18181b;--wf-glow:#ffffff;
  --wf-card-shadow:0 1px 3px rgba(0,0,0,.05),0 10px 15px -3px rgba(0,0,0,.03);
  --wf-media:#0b1118;--wf-media-ink:#f1f5f9;--wf-media-rule:#536a84;
  --wf-sans: Arial, Helvetica, sans-serif;
  --wf-serif: Georgia, 'Times New Roman', serif;
  --wf-mono: 'Courier New', monospace;
  --paper: var(--wf-paper);
  --ink: var(--wf-ink);
  --muted: var(--wf-muted);
  --rule: var(--wf-rule);
  --orange: var(--wf-accent-ink);
  --green: var(--wf-soft);
  --serif: var(--wf-serif);
  --sans: var(--wf-sans);
  --mono: var(--wf-mono)}
.wf-mark { display: block; width: 34px; height: 34px; flex: none}
.wf-wordmark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--wf-sans); font-weight: 700; letter-spacing: -1px; line-height: 1}
.wf-wordmark:hover { color: var(--wf-orange)}
.wf-wordmark:focus-visible { outline: 2px solid var(--wf-orange); outline-offset: 6px}

/* The workspace uses the same materials with a denser working layout. */
body.wf-studio {
  --bg: var(--wf-paper);
  --panel: var(--wf-surface);
  --panel2: var(--wf-soft);
  --line: var(--wf-rule);
  --text: var(--wf-ink);
  --accent: var(--wf-orange);
  --mint: var(--wf-muted);
  color-scheme: light;
  font-family: var(--wf-sans);
  background: var(--bg);
  color: var(--text)}
.wf-studio ::selection { background: var(--wf-sage); color: var(--wf-ink)}
.wf-studio h1 { font-weight: 500; letter-spacing: -1.4px}
.wf-studio h2 { font-weight: 500}
.wf-studio .sidebar {
  --text: var(--wf-paper);
  --muted: var(--wf-muted);
  --line: var(--wf-rule);
  --accent: var(--wf-accent-ink);
  --mint: var(--wf-muted);
  background: var(--wf-forest);
  color: var(--wf-paper)}
.wf-studio .sidebar .wf-mark { filter: brightness(0) invert(1)}
.wf-studio .brand-sub { color: var(--wf-muted)}
.wf-studio .workspace { border-color: var(--wf-rule); background: var(--wf-inverse)}
.wf-studio .workspace-avatar { background: var(--wf-soft); color: var(--wf-forest)}
.wf-studio .workspace small,.wf-studio .nav-label,.wf-studio .sidebar .section-kicker,.wf-studio .sidebar .text-button,.wf-studio .credit-balance small { color: var(--wf-muted)}
.wf-studio .nav-item { color: var(--wf-muted)}
.wf-studio .nav-item:hover { background: var(--wf-inverse); color: var(--wf-paper)}
.wf-studio .nav-item.active { background: var(--wf-sage); color: var(--wf-forest)}
.wf-studio .nav-item.active svg { color: var(--wf-forest)}
.wf-studio .nav-item small { background: var(--wf-inverse); color: var(--wf-paper)}
.wf-studio .nav-group>summary,.wf-studio .sidebar-bottom { color: var(--wf-muted); border-color: var(--wf-rule)}
.wf-studio .sidebar .text-button:hover { color: var(--wf-accent-ink)}
.wf-studio .sidebar-home { color: var(--wf-muted)}
.wf-studio .sidebar-home:hover { color: var(--wf-accent-ink)}
.wf-studio .topbar { background: var(--wf-paper); border-color: var(--wf-rule)}
.wf-studio .breadcrumb { color: var(--wf-muted)}
.wf-studio .breadcrumb b { color: var(--wf-ink)}
.wf-studio .home-link { font-size: var(--wf-text-xs); color: var(--wf-muted); display: inline-flex; align-items: center; gap: var(--wf-space-2)}
.wf-studio .home-link:hover { color: var(--wf-orange)}
.wf-studio .button { border-radius: 3px; font-weight: 500}
.wf-studio .button.primary { background: var(--wf-forest); border-color: var(--wf-forest); color: var(--wf-paper)}
.wf-studio .button.primary:hover { background: var(--wf-inverse); filter: none}
.wf-studio .button.secondary { background: transparent; border-color: var(--wf-rule); color: var(--wf-ink)}
.wf-studio .button.secondary:hover { background: var(--wf-soft); filter: none}
.wf-studio .panel,.wf-studio .video-card,.wf-studio .kpi { border-radius: var(--wf-radius-sm)}
.wf-studio .eyebrow,.wf-studio .section-kicker { font-family: var(--wf-mono); font-size: 9px; color: var(--wf-muted)}
.wf-studio .brief-field { color: var(--wf-muted)}
.wf-studio input,.wf-studio select,.wf-studio textarea,.wf-studio #quick-idea {
  background: var(--wf-surface);
  color: var(--wf-ink);
  border-color: var(--wf-rule);
  border-radius: 3px}
.wf-studio input::placeholder,.wf-studio textarea::placeholder { color: var(--wf-muted); opacity: 1}
.wf-studio input[type=checkbox],.wf-studio input[type=radio] { accent-color: var(--wf-forest)}
.wf-studio .brief-field input:focus,.wf-studio .brief-field select:focus,.wf-studio .brief-field textarea:focus { border-color: var(--wf-orange); outline-color: var(--wf-orange)}
.wf-studio .search { background: var(--wf-surface)}
.wf-studio .search input { background: transparent}
.wf-studio .rate.high,.wf-studio .tag.mint { background: var(--wf-soft); color: var(--wf-ink); border-color: var(--wf-rule)}
.wf-studio .tag.orange { background: var(--wf-soft); color: var(--wf-accent-ink); border-color: var(--wf-rule)}
.wf-studio .notice { background: var(--wf-soft); color: var(--wf-muted); border-color: var(--wf-rule)}
.wf-studio .whatif-hero,.wf-studio .takeaways,.wf-studio .next-card { background: var(--wf-soft)}
.wf-studio .whatif-event { border-color: var(--wf-rule)}
.wf-studio .whatif-event b,.wf-studio .whatif-event span { color: var(--wf-forest)}
.wf-studio .whatif-hero h2,.wf-studio .takeaways h2 { font-family: var(--wf-serif); font-weight: 400}
.wf-studio .instagram-dot { background: transparent; border: 1.5px solid currentColor; box-shadow: none; position: relative}
.wf-studio .instagram-dot:after { content: ''; position: absolute; inset: 3px; border: 1px solid currentColor; border-radius: 50%}
.wf-studio dialog { background: var(--wf-surface); border-color: var(--wf-rule); border-radius: 5px; box-shadow: 0 22px 70px color-mix(in srgb,var(--wf-shadow) 21.96%,transparent)}
.wf-studio dialog::backdrop { background: color-mix(in srgb,var(--wf-inverse) 43.92%,transparent); backdrop-filter: blur(3px)}
.wf-studio .dialog-close { background: var(--wf-surface); color: var(--wf-ink)}
.wf-studio footer { color: var(--wf-muted); border-color: var(--wf-rule)}
.wf-studio .studio-footer { display: flex; align-items: center; gap: var(--wf-space-4)}
.wf-studio .studio-footer span { margin-left: auto}
.wf-studio .studio-footer>a { font-weight: 600; letter-spacing: -.4px; color: var(--wf-ink)}
.wf-studio .studio-footer a:hover { color: var(--wf-orange)}

/* Media keeps its own viewing surface. The UI does not recolor a creator's art. */
.wf-studio .board-image,.wf-studio .board-image svg,.wf-studio .direction-gallery img,.wf-studio .direction-comparison video,
.wf-studio .job-media video,.wf-studio video { background: var(--wf-media)}
.wf-studio .board-image svg { color: var(--wf-media-ink)}
.wf-studio .board-image>small { color: var(--wf-media-ink)}
.wf-studio .board-number { color: var(--wf-paper)}
.wf-studio .board-time { background: var(--wf-media); color: var(--wf-paper)}
.wf-studio .board-image:has(.illustrated-board) { background: transparent}
.wf-studio .illustrated-board { background: transparent}
.wf-studio .observed-views-chart { color: var(--wf-orange)}
.wf-studio .observed-views-chart text { fill: var(--wf-muted)}
.wf-studio .observed-views-chart>line { stroke: var(--wf-muted)}
.wf-studio .connect-steps .current b { background: var(--wf-forest); color: var(--wf-paper); border-color: var(--wf-forest)}

/* Sign in is the bridge from the public story to the working studio. */
.wf-studio .auth-wrap { position: relative; max-width: 1080px; margin: 35px auto; padding-top: 72px; gap: 55px; align-items: center}
.wf-studio .auth-wrap { grid-template-columns: minmax(0,1fr) minmax(0,440px)}
.wf-studio .auth-home { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding-bottom: 22px; border-bottom: 1px solid var(--wf-rule)}
.wf-studio .auth-home .wf-wordmark { font-size: 26px}
.wf-studio .auth-home .home-link { font-size: var(--wf-text-sm)}
.wf-studio .auth-art { position: relative; padding-block: 15px}
.wf-studio .auth-art .section-kicker { color: var(--wf-muted)}
.wf-studio .auth-art h1 { font-size: clamp(39px,4.4vw,62px); font-weight: 500; line-height: 1.07; margin-top: 19px; letter-spacing: -2.8px}
.wf-studio .auth-art h1 em { color: var(--wf-orange); font-family: var(--wf-serif); font-weight: 400}
.wf-studio .auth-art>p { margin-top: 20px; font-size: var(--wf-text-base); max-width: 350px}
.wf-studio .auth-illustration { display: block; width: min(100%,350px); height: 230px; object-fit: contain; object-position: 25% center; margin: 0 0 -15px -15px}
.wf-studio .auth-card { background: var(--wf-surface); padding: 35px; border-radius: var(--wf-radius-sm); border-color: var(--wf-rule)}
.wf-studio .auth-card h2 { font-family: var(--wf-serif); font-size: var(--wf-text-title); font-weight: 400; letter-spacing: -.9px}
.wf-studio .auth-tabs { border-bottom: 1px solid var(--wf-rule); margin-block: var(--wf-space-5); padding-bottom: 13px}
.wf-studio .auth-tabs .button { font-size: var(--wf-text-sm)}
.wf-studio .auth-card .brief-field { font-size: var(--wf-text-sm)}
.wf-studio .auth-card .brief-field input { font-size: var(--wf-text-base); min-height: 46px}
.wf-studio .auth-card #identity-form>.button { min-height: 44px}
.wf-studio .auth-card .field-help { font-size: var(--wf-text-sm); line-height: 1.75}
.wf-studio .auth-card small { display: block; padding-top: 17px; border-top: 1px solid var(--wf-rule); margin-top: 18px}
.wf-studio #auth-error,.wf-studio #connection-error,.wf-studio #direction-error { color: var(--wf-accent-ink)}
.wf-studio .auth-orbs { display: none}
.wf-studio .studio-footer { flex-wrap: wrap}
@media(max-width:900px) {
  .wf-studio .auth-wrap { gap: 30px}
  .wf-studio .auth-card { padding: 27px}
  .wf-studio .auth-art h1 { font-size: 44px}
}
@media(min-width:761px) and (max-width:1000px) {
  .wf-studio .auth-wrap { display: grid; grid-template-columns: 1fr 1fr; max-width: none; gap: var(--wf-space-5)}
  .wf-studio .auth-art { display: block}
  .wf-studio .auth-art h1 { font-size: 40px}
}
@media(max-width:760px) {
  .wf-studio .auth-wrap { margin: 0 auto; padding-top: 82px; display: flex; flex-direction: column; gap: var(--wf-space-5); align-items: stretch}
  .wf-studio .auth-home .wf-wordmark { font-size: 21px}
  .wf-studio .auth-home .wf-mark { width: 27px; height: 27px}
  .wf-studio .auth-home .home-link { font-size: var(--wf-text-xs)}
  .wf-studio .auth-art { display: block; padding: 5px 0}
  .wf-studio .auth-art h1 { font-size: 40px; line-height: 1.08; margin-top: 10px}
  .wf-studio .auth-art>p { font-size: var(--wf-text-control); margin-top: 14px}
  .wf-studio .auth-art .section-kicker { font-size: 8px}
  .wf-studio .auth-illustration { display: none}
  .wf-studio .auth-card { padding: 25px 21px}
  .wf-studio .top-actions { gap: 10px}
  .wf-studio .top-actions>.home-link { display: none}
  .wf-studio .studio-footer { flex-wrap: wrap; gap: 10px 17px}
  .wf-studio .studio-footer span { margin-left: 0}
  .wf-studio .auth-home { gap: 14px}
  .wf-studio .auth-home .home-link { max-width: 100px; text-align: right}
}
@media(prefers-reduced-motion:reduce) {
  .wf-studio * { scroll-behavior: auto; animation: none!important; transition: none!important}
}
}
@layer utilities {
/* Authentication visibility takes precedence over navigation geometry. */
.wf-studio.signed-out .sidebar,.wf-studio.signed-out .topbar,.wf-studio.signed-out .studio-footer,
.wf-studio[data-auth-pending] .sidebar,.wf-studio[data-auth-pending] .topbar,.wf-studio[data-auth-pending] .studio-footer { display: none}
.wf-studio.signed-out .app-shell,.wf-studio[data-auth-pending] .app-shell { margin-left: 0}
}

@layer components {
/* Profile prices remain readable inside small studio and landing layouts. */
.profile-pricing{width:100%;overflow-x:auto;margin:20px 0}
.profile-pricing table{width:100%;border-collapse:collapse;text-align:left;font-size:14px;line-height:1.6}
.profile-pricing caption{text-align:left;margin-bottom:12px;font-weight:700}
.profile-pricing th,.profile-pricing td{padding:10px 14px;border-bottom:1px solid var(--wf-rule);white-space:nowrap}
.profile-pricing thead th{font-weight:700}
.offer-promotion{margin:1.2rem 0;padding:1rem;border:1px solid var(--border,#dedbd2);border-radius:14px;background:var(--surface-soft,rgba(128,128,128,.045))}
.offer-badge{display:inline-block;padding:.35rem .65rem;border-radius:30px;background:#eadcff;color:#54257d;font-size:.75rem;font-weight:700;letter-spacing:.025em}
.offer-standard{font-size:.78rem;line-height:1.6;color:var(--muted,#696b64);margin:.7rem 0 .25rem}
.offer-standard s{font-size:1rem;margin-right:.3rem}
.offer-promotion .plan-price,.offer-promotion .public-price{margin:.25rem 0 .65rem}
.offer-promotion [data-offer-price]{font-weight:inherit}
.offer-countdown{font-size:.82rem;font-variant-numeric:tabular-nums;font-weight:650;color:inherit}
.offer-promotion [hidden]{display:none!important}
}