/* V9 uses local/system typography: Bahnschrift + Segoe UI + Consolas. */

:root {
  color-scheme: dark;
  --bg: #090908;
  --bg-deep: #030303;
  --panel: rgba(20, 18, 16, 0.92);
  --panel-strong: #1c1916;
  --panel-soft: rgba(244, 232, 214, 0.055);
  --line: rgba(238, 222, 198, 0.15);
  --line-strong: rgba(240, 163, 77, 0.50);
  --text: #f3eee6;
  --muted: #b9afa2;
  --dim: #7e756b;
  --accent: #f0a34d;
  --accent-strong: #d76b32;
  --accent-soft: rgba(240, 163, 77, 0.12);
  --violet: #d96755;
  --hot: #f4c76d;
  --good: #e8c56f;
  --danger: #ff6f5e;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
  --radius: 20px;
  --radius-sm: 12px;
  --max: 1180px;
}

:root[data-theme='ember'] {
  --bg: #120b0b;
  --bg-deep: #0b0707;
  --panel: rgba(39, 22, 23, 0.82);
  --panel-strong: #321d1f;
  --panel-soft: rgba(55, 30, 32, 0.56);
  --line: rgba(255, 196, 132, 0.18);
  --line-strong: rgba(255, 184, 105, 0.42);
  --text: #fff6ee;
  --muted: #c4a99a;
  --dim: #947b72;
  --accent: #ffc275;
  --accent-strong: #ef8f3e;
  --accent-soft: rgba(255, 194, 117, 0.14);
  --violet: #f29cb8;
  --hot: #ffe19e;
  --good: #9befb0;
  --danger: #ff8f8f;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  background:
    radial-gradient(circle at 72% 2%, var(--glow-a, rgba(30, 134, 174, 0.13)), transparent 31rem),
    radial-gradient(circle at 11% 58%, var(--glow-b, rgba(124, 88, 225, 0.09)), transparent 28rem),
    var(--bg);
  color: var(--text);
  font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
}
body::before {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  content: '';
  background-image: linear-gradient(var(--grid-line, rgba(119, 227, 255, 0.028)) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line, rgba(119, 227, 255, 0.028)) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 82%);
}
body::after {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  content: '';
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { line-height: 1.08; letter-spacing: -0.04em; }
h1 { font-size: clamp(3rem, 7vw, 6.8rem); margin-bottom: 1.4rem; }
h2 { font-size: clamp(2.1rem, 4.2vw, 4rem); margin-bottom: 1rem; }
h3 { font-size: 1.3rem; margin-bottom: 0.7rem; }
p { color: var(--muted); }

.shell { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.skip-link { position: fixed; left: 1rem; top: -100px; z-index: 100; padding: .7rem 1rem; background: var(--accent); color: #06121c; border-radius: 8px; font-weight: 800; }
.skip-link:focus { top: 1rem; }
.ambient { position: fixed; z-index: -1; pointer-events: none; filter: blur(2px); border-radius: 999px; opacity: .2; }
.ambient-a { width: 24rem; height: 24rem; top: 26rem; right: -15rem; background: var(--accent-strong); }
.ambient-b { width: 18rem; height: 18rem; top: 115rem; left: -10rem; background: var(--violet); }

.site-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--line); background: var(--theme-header, rgba(5, 13, 23, .76)); backdrop-filter: blur(20px); }
:root[data-theme='ember'] .site-header { background: var(--theme-header, rgba(18, 11, 11, .78)); }
.nav-wrap { min-height: 78px; display: flex; align-items: center; gap: 1.15rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; flex: 0 0 auto; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line-strong); border-radius: 11px; color: var(--bg-deep); background: linear-gradient(135deg, var(--accent), var(--violet)); box-shadow: 0 0 24px rgba(113, 233, 255, .18); font-weight: 900; font-size: .75rem; letter-spacing: -.08em; }
.brand-copy { display: grid; gap: 0; color: var(--text); font: 800 .72rem/1 'DM Mono', monospace; letter-spacing: .12em; white-space: nowrap; }
.brand-copy small { color: var(--accent); font-size: .56rem; letter-spacing: .22em; margin-top: .38rem; }
.primary-nav { display: flex; align-items: center; justify-content: center; gap: .18rem; margin-left: auto; }
.primary-nav a { color: var(--muted); padding: .65rem .7rem; border-radius: 9px; font-size: .76rem; font-weight: 700; transition: color .2s ease, background .2s ease, transform .2s ease; }
.primary-nav a:hover, .primary-nav a.active { color: var(--text); background: var(--accent-soft); }
.primary-nav a.active { box-shadow: inset 0 -2px var(--accent); }
.nav-tools { display: flex; align-items: center; gap: .65rem; }
.icon-button, .menu-toggle { border: 1px solid var(--line); color: var(--muted); background: var(--panel-soft); border-radius: 10px; }
.icon-button { width: 38px; height: 38px; font-size: 1.1rem; }
.icon-button:hover, .menu-toggle:hover { color: var(--text); border-color: var(--line-strong); }
.nav-cta, .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; border: 1px solid transparent; border-radius: 10px; padding: .78rem 1rem; font-size: .78rem; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; }
.nav-cta { color: #05121c; background: var(--accent); }
.nav-cta:hover, .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.24); }
.nav-cta span { font-size: 1rem; }
.menu-toggle { display: none; padding: .55rem .7rem; font-size: .72rem; font-weight: 800; }

.page-shell { min-height: 70vh; padding-top: 4rem; padding-bottom: 7rem; }
.boot-screen { display: grid; place-items: center; min-height: 50vh; gap: .8rem; color: var(--muted); font: .78rem 'DM Mono', monospace; }
.seo-fallback { min-height: 50vh; padding: 4rem 0; }
.seo-fallback h1 { max-width: 900px; }
.seo-fallback .muted { max-width: 620px; font-size: .82rem; }
.loader-dot { width: 12px; height: 12px; border: 2px solid var(--accent); border-right-color: transparent; border-radius: 999px; animation: spin .7s linear infinite; }
.page { animation: page-in .5s ease both; }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem; color: var(--accent); font: 500 .7rem 'DM Mono', monospace; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow::before { width: 24px; height: 1px; content: ''; background: currentColor; box-shadow: 0 0 10px currentColor; }
.kicker { max-width: 710px; color: var(--muted); font-size: clamp(1rem, 1.8vw, 1.2rem); }
.lead { max-width: 680px; font-size: 1rem; }
.hero { position: relative; min-height: 700px; display: grid; align-items: center; padding: 3rem 0 5rem; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr); gap: clamp(2rem, 7vw, 7rem); align-items: center; }
.hero h1 { max-width: 760px; }
.hero h1 .gradient { display: block; color: var(--accent); background: linear-gradient(120deg, var(--accent) 10%, var(--violet) 75%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0 2.2rem; }
.btn-primary { color: #06131c; background: var(--accent); box-shadow: 0 0 28px rgba(113, 233, 255, .15); }
.btn-secondary { color: var(--text); border-color: var(--line-strong); background: var(--accent-soft); }
.btn-quiet { color: var(--muted); border-color: var(--line); background: transparent; }
.btn-small { padding: .55rem .72rem; font-size: .7rem; }
.hero-proof { display: flex; flex-wrap: wrap; gap: .75rem; color: var(--dim); font: .68rem 'DM Mono', monospace; }
.hero-proof span { display: inline-flex; align-items: center; gap: .4rem; }
.hero-proof span::before { width: 6px; height: 6px; content: ''; border-radius: 999px; background: var(--good); box-shadow: 0 0 12px var(--good); }
.hero-art { position: relative; min-height: 530px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 28px; background: linear-gradient(160deg, rgba(12, 30, 47, .2), rgba(3, 9, 17, .9)), url('assets/creator/creator-studio.webp') center 18%/cover; box-shadow: var(--shadow); isolation: isolate; }
.hero-art::after { position: absolute; inset: 0; content: ''; background: linear-gradient(180deg, transparent 45%, rgba(3, 9, 17, .78)); z-index: -1; }
.hero-art::before { position: absolute; top: 1.1rem; left: 1.1rem; width: 78px; height: 78px; content: ''; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); opacity: .75; }
.hero-art-label { position: absolute; right: 1.25rem; bottom: 1.2rem; left: 1.25rem; display: flex; justify-content: space-between; align-items: end; gap: 1rem; }
.hero-art-label strong { display: block; max-width: 250px; color: var(--text); font-size: 1.05rem; }
.hero-art-label span { color: var(--accent); font: .66rem 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.floating-chip { position: absolute; top: 1.4rem; right: 1.4rem; display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(5, 14, 24, .74); color: var(--text); font: .65rem 'DM Mono', monospace; backdrop-filter: blur(8px); }
.floating-chip i { width: 7px; height: 7px; border-radius: 999px; background: var(--good); box-shadow: 0 0 10px var(--good); }

.metric-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metric { padding: 1.2rem 1rem; border-right: 1px solid var(--line); }
.metric:last-child { border-right: 0; }
.metric strong { display: block; color: var(--text); font-size: 1.35rem; }
.metric span { color: var(--dim); font: .64rem 'DM Mono', monospace; letter-spacing: .05em; text-transform: uppercase; }

.section { padding: 6.5rem 0 0; scroll-margin-top: 100px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2rem; }
.section-heading > div:first-child { max-width: 690px; }
.section-heading p { max-width: 620px; }
.section-link { color: var(--accent); font: .7rem 'DM Mono', monospace; white-space: nowrap; }
.section-link:hover { text-decoration: underline; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.card { position: relative; padding: 1.35rem; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(17, 38, 58, .78), rgba(7, 17, 29, .8)); box-shadow: 0 10px 40px rgba(0,0,0,.12); }
.card:hover { border-color: var(--line-strong); }
.card h3 { color: var(--text); }
.card p { font-size: .88rem; }
.card-icon { display: grid; place-items: center; width: 43px; height: 43px; margin-bottom: 1rem; border: 1px solid var(--line-strong); border-radius: 13px; color: var(--accent); background: var(--accent-soft); font-size: 1.1rem; }
.card-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.tag { display: inline-flex; padding: .33rem .5rem; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); font: .61rem 'DM Mono', monospace; }

.project-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.project-card { grid-column: span 6; overflow: hidden; padding: 0; }
.project-card.featured { grid-column: span 7; }
.project-card.tall { grid-column: span 5; }
.project-image { position: relative; min-height: 260px; overflow: hidden; background: var(--panel-strong); }
.project-image img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; transition: transform .5s ease; }
.project-card:hover .project-image img { transform: scale(1.035); }
.project-image::after { position: absolute; inset: 0; content: ''; background: linear-gradient(180deg, transparent 45%, rgba(2, 7, 13, .78)); pointer-events: none; }
.project-type { position: absolute; top: 1rem; left: 1rem; z-index: 1; padding: .38rem .52rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--accent); background: rgba(4, 13, 21, .74); font: .6rem 'DM Mono', monospace; text-transform: uppercase; }
.project-body { padding: 1.2rem 1.3rem 1.35rem; }
.project-body h3 { margin-bottom: .35rem; }
.project-body p { margin-bottom: 0; }
.project-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; }

.manifest-banner { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 2rem; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid rgba(145, 139, 255, .35); border-radius: 26px; background: linear-gradient(130deg, rgba(35, 25, 78, .88), rgba(8, 17, 34, .9)); }
.manifest-banner::before { position: absolute; width: 26rem; height: 26rem; right: -10rem; top: -13rem; content: ''; border: 1px solid rgba(165, 139, 255, .3); border-radius: 50%; box-shadow: 0 0 0 30px rgba(165, 139, 255, .04), 0 0 0 60px rgba(165, 139, 255, .03); }
.manifest-banner h2 { position: relative; }
.manifest-banner p { position: relative; max-width: 650px; }
.manifest-mark { display: grid; place-items: center; min-height: 230px; position: relative; }
.manifest-mark-card { width: 160px; height: 220px; transform: rotate(8deg); border: 2px solid rgba(240, 245, 255, .62); border-radius: 15px; background: linear-gradient(150deg, #d6fbff, #546cfa 46%, #271f70); box-shadow: 18px 22px 50px rgba(0,0,0,.45), 0 0 40px rgba(133, 126, 255, .24); }
.manifest-mark-card::before, .manifest-mark-card::after { display: block; content: ''; margin: 14px; border: 1px solid rgba(255,255,255,.5); border-radius: 10px; }
.manifest-mark-card::before { height: 85px; background: radial-gradient(circle at 52% 32%, #d7faff 0 7%, transparent 8%), radial-gradient(circle at 50% 50%, rgba(5,11,40,.7), transparent 45%), linear-gradient(135deg, #48e2e9, #4434ac); }
.manifest-mark-card::after { height: 8px; margin-top: 18px; background: rgba(255,255,255,.65); box-shadow: 0 18px rgba(255,255,255,.38), 0 36px rgba(255,255,255,.24); }

.split-feature { display: grid; grid-template-columns: .92fr 1.08fr; gap: 1rem; align-items: stretch; }
.feature-photo { min-height: 480px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: center 16%/cover url('assets/creator/creator-daylight.webp'); }
.feature-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.feature-copy p { max-width: 600px; }
.quote-line { margin: 1.5rem 0; padding-left: 1rem; border-left: 2px solid var(--accent); color: var(--text); font-size: 1.08rem; }

.software-hero { display: grid; grid-template-columns: .9fr 1.1fr; gap: 1rem; align-items: stretch; }
.software-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(21, 40, 58, .84), rgba(7, 15, 26, .88)); }
.console { overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #081421; box-shadow: var(--shadow); }
.console-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line); background: rgba(22, 44, 62, .66); }
.console-dots { display: flex; gap: .35rem; }
.console-dots i { width: 7px; height: 7px; border-radius: 99px; background: var(--danger); }
.console-dots i:nth-child(2) { background: var(--hot); }
.console-dots i:nth-child(3) { background: var(--good); }
.console-top span { color: var(--dim); font: .62rem 'DM Mono', monospace; }
.console-body { display: grid; grid-template-columns: 150px 1fr; min-height: 350px; }
.console-side { padding: .8rem; border-right: 1px solid var(--line); background: rgba(2, 8, 15, .34); }
.console-side p { margin: .25rem 0 .7rem; color: var(--dim); font: .6rem 'DM Mono', monospace; text-transform: uppercase; }
.console-side button { display: block; width: 100%; margin: .25rem 0; padding: .55rem .6rem; border: 1px solid transparent; border-radius: 7px; color: var(--muted); background: transparent; text-align: left; font-size: .68rem; }
.console-side button:hover, .console-side button.active { border-color: var(--line-strong); color: var(--text); background: var(--accent-soft); }
.console-main { padding: 1rem; }
.console-main h3 { margin-bottom: .2rem; font-size: 1.05rem; }
.console-main > p { margin-bottom: 1rem; font-size: .72rem; }
.console-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin-bottom: .8rem; }
.console-stat { padding: .7rem; border: 1px solid var(--line); border-radius: 9px; background: rgba(15, 34, 51, .7); }
.console-stat small { display: block; color: var(--dim); font: .56rem 'DM Mono', monospace; }
.console-stat strong { color: var(--text); font-size: 1rem; }
.pipeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.pipeline-col { min-height: 160px; padding: .45rem; border: 1px solid var(--line); border-radius: 9px; background: rgba(5, 14, 24, .62); }
.pipeline-col > span { display: block; margin-bottom: .5rem; color: var(--dim); font: .54rem 'DM Mono', monospace; text-transform: uppercase; }
.pipeline-item { margin: .35rem 0; padding: .48rem; border-left: 2px solid var(--accent); border-radius: 5px; background: var(--accent-soft); color: var(--text); font-size: .6rem; }
.pipeline-item:nth-child(3) { border-left-color: var(--violet); }
.pipeline-item:nth-child(4) { border-left-color: var(--hot); }
.software-modules { margin-top: 1rem; }
.module-pill { display: inline-flex; align-items: center; gap: .4rem; margin: .2rem .3rem .2rem 0; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .66rem; }
.module-pill::before { width: 6px; height: 6px; content: ''; border-radius: 99px; background: var(--good); }

.studio-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 1rem; }
.control-panel, .preview-panel { padding: 1.35rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.control-panel { align-self: start; position: sticky; top: 100px; }
.control-panel h3, .preview-panel h3 { margin-bottom: .25rem; }
.control-panel p, .preview-panel > p { font-size: .78rem; }
.field { display: grid; gap: .38rem; margin: .9rem 0; }
.field label { color: var(--muted); font: .62rem 'DM Mono', monospace; letter-spacing: .05em; text-transform: uppercase; }
.field input, .field select, .field textarea { width: 100%; padding: .75rem .8rem; border: 1px solid var(--line); border-radius: 9px; outline: none; color: var(--text); background: rgba(3, 11, 20, .72); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field input[type='color'] { min-height: 42px; padding: .25rem; }
.builder-preview { position: relative; min-height: 465px; display: grid; place-items: center; overflow: hidden; padding: 2rem; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(130deg, #081827, #111332); }
.builder-preview.layout-split { grid-template-columns: .9fr 1.1fr; display: grid; place-items: stretch; gap: 1rem; }
.builder-preview.layout-split .preview-site { align-self: center; }
.preview-site { width: min(100%, 510px); overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; background: #f4f8fb; color: #102033; box-shadow: 0 25px 60px rgba(0,0,0,.35); }
.preview-site[data-style='midnight'] { background: #0b1524; color: #edf8ff; }
.preview-site[data-style='ember'] { background: #281713; color: #fff5eb; }
.preview-site-bar { display: flex; align-items: center; justify-content: space-between; padding: .6rem .75rem; border-bottom: 1px solid rgba(70,90,110,.2); font-size: .55rem; }
.preview-site-logo { display: inline-flex; align-items: center; gap: .35rem; font-weight: 900; }
.preview-site-logo i { width: 12px; height: 12px; border-radius: 4px; background: var(--preview-accent, #f0a34d); }
.preview-site-nav { display: flex; gap: .4rem; color: currentColor; opacity: .55; font-size: .5rem; }
.preview-site-body { display: grid; grid-template-columns: 1fr .8fr; min-height: 260px; align-items: center; gap: 1.2rem; padding: 1.15rem; background: radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--preview-accent, #f0a34d) 18%, transparent), transparent 42%); }
.preview-site-copy p { color: currentColor; opacity: .62; font-size: .55rem; }
.preview-site-copy h4 { margin-bottom: .45rem; font-size: 1.25rem; }
.preview-site-copy strong { display: inline-flex; padding: .4rem .55rem; border-radius: 6px; color: #06131c; background: var(--preview-accent, #f0a34d); font-size: .55rem; }
.preview-site-visual { position: relative; aspect-ratio: 1 / 1; border-radius: 14px; background: linear-gradient(145deg, color-mix(in srgb, var(--preview-accent, #f0a34d) 75%, #111d45), #111d45); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.preview-site-visual::before { position: absolute; width: 58%; height: 58%; left: 20%; top: 20%; content: ''; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; box-shadow: 0 0 30px rgba(255,255,255,.2); }
.preview-site-visual::after { position: absolute; left: 31%; top: 43%; width: 38%; height: 14%; content: ''; border-radius: 99px; background: rgba(255,255,255,.75); transform: rotate(-24deg); }
.preview-side-note { display: grid; align-content: center; gap: .75rem; max-width: 210px; }
.preview-side-note strong { color: var(--accent); font-size: 1rem; }
.preview-side-note p { font-size: .72rem; }

.card-builder-grid, .listing-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 1rem; }
.builder-card-preview { min-height: 400px; display: grid; place-items: center; padding: 2rem; border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(circle at 30% 20%, rgba(113,233,255,.1), transparent 30%), #07111e; }
.business-card { width: min(100%, 510px); min-height: 290px; display: grid; grid-template-columns: .85fr 1.15fr; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 16px; color: #edf9ff; background: linear-gradient(140deg, #102b42, #07111f); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.business-card[data-style='warm'] { color: #fff4e9; background: linear-gradient(140deg, #4c2821, #181015); }
.business-card[data-style='clean'] { color: #132236; background: linear-gradient(140deg, #f7fbff, #dcebf4); }
.business-card-left { display: grid; align-content: space-between; padding: 1.3rem; border-right: 1px solid rgba(255,255,255,.16); background: radial-gradient(circle at 40% 30%, var(--preview-accent, #f0a34d), transparent 9%), radial-gradient(circle at 68% 70%, rgba(126,40,31,.7), transparent 7%); }
.business-card-left strong { font-size: 1.3rem; letter-spacing: -.07em; }
.business-card-left span { font: .55rem 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; opacity: .68; }
.business-card-right { display: flex; flex-direction: column; justify-content: center; padding: 1.3rem; }
.business-card-right h4 { margin-bottom: .3rem; font-size: 1.3rem; }
.business-card-right p { margin-bottom: 1rem; color: currentColor; opacity: .66; font-size: .72rem; }
.business-card-contact { display: grid; gap: .3rem; font: .62rem 'DM Mono', monospace; }

.listing-preview { min-height: 430px; padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: #f6f9fc; color: #162436; }
.listing-preview-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: .9rem; border-bottom: 1px solid #dbe5ec; }
.listing-preview-top strong { font-size: .78rem; }
.listing-badge { padding: .35rem .5rem; border-radius: 999px; color: #0e4a31; background: #c7f5dd; font: .56rem 'DM Mono', monospace; }
.listing-preview-body { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 1rem; min-height: 300px; }
.listing-image { display: grid; place-items: center; min-height: 220px; overflow: hidden; border-radius: 12px; background: linear-gradient(145deg, #182e46, #243e69); color: #bfefff; font-size: 3.2rem; }
.listing-image img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; }
.listing-copy h3 { color: #162436; font-size: 1.35rem; }
.listing-copy p { color: #637789; font-size: .72rem; }
.listing-price { color: #152e4a; font-size: 1.5rem; font-weight: 900; }
.listing-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }

.paint-game-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.canvas-card { padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.canvas-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.canvas-toolbar input[type='color'] { width: 36px; height: 32px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: transparent; }
.canvas-toolbar input[type='range'] { width: 105px; accent-color: var(--accent); }
.canvas-wrap { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 12px; background: #f9fbff; }
#paint-canvas { width: 100%; height: auto; aspect-ratio: 4 / 3; cursor: crosshair; touch-action: none; }
.game-card { padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.game-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.score-pill { padding: .4rem .55rem; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--accent); font: .65rem 'DM Mono', monospace; }
#pixel-game { width: 100%; aspect-ratio: 16 / 7; border: 1px solid var(--line-strong); border-radius: 12px; background: linear-gradient(#12263d, #08111d 68%, #101e2c 68%); image-rendering: pixelated; touch-action: manipulation; }
.game-controls { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: .75rem; }
.game-hint { color: var(--dim); font: .65rem 'DM Mono', monospace; }

.contact-panel { display: grid; grid-template-columns: .85fr 1.15fr; gap: 1rem; }
.contact-copy, .contact-form { padding: clamp(1.4rem, 4vw, 2.5rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.contact-copy { background: linear-gradient(145deg, rgba(17, 48, 68, .9), rgba(8, 18, 31, .85)); }
.contact-methods { display: grid; gap: .65rem; margin-top: 1.5rem; }
.contact-method { display: flex; align-items: center; gap: .75rem; padding: .7rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(2, 10, 19, .35); }
.contact-method b { color: var(--text); font-size: .8rem; }
.contact-method span { display: block; color: var(--muted); font-size: .74rem; }
.contact-method .card-icon { width: 34px; height: 34px; margin: 0; border-radius: 8px; font-size: .85rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .75rem; }
.form-grid .field.full { grid-column: 1 / -1; }
.form-status { min-height: 1.2rem; margin-top: .75rem; color: var(--good); font: .68rem 'DM Mono', monospace; }

.login-wrap { display: grid; place-items: center; min-height: 620px; }
.login-card { width: min(100%, 480px); padding: 1.5rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
.login-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; padding: .3rem; margin-bottom: 1.25rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(2, 9, 17, .35); }
.login-tabs button { padding: .6rem; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: .75rem; font-weight: 800; }
.login-tabs button.active { color: var(--text); background: var(--accent-soft); }
.demo-note { padding: .7rem; border-left: 2px solid var(--hot); color: var(--muted); background: rgba(255, 200, 107, .07); font-size: .72rem; }

.modal-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1rem; background: rgba(0, 4, 9, .75); backdrop-filter: blur(12px); animation: fade-in .2s ease both; }
.modal { width: min(100%, 560px); max-height: min(720px, calc(100vh - 2rem)); overflow: auto; padding: 1.4rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--panel-strong); box-shadow: var(--shadow); animation: modal-in .25s ease both; }
.modal-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.modal-close { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: transparent; }
.price-row { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: .95rem 0; border-bottom: 1px solid var(--line); }
.price-row:last-child { border-bottom: 0; }
.price-row strong { display: block; color: var(--text); }
.price-row span { color: var(--muted); font-size: .74rem; }
.price { color: var(--accent); font: 800 1.2rem 'DM Mono', monospace; white-space: nowrap; }
.toast-root { position: fixed; right: 1rem; bottom: 1rem; z-index: 90; display: grid; gap: .5rem; width: min(360px, calc(100% - 2rem)); }
.toast { padding: .8rem 1rem; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--text); background: var(--panel-strong); box-shadow: var(--shadow); font-size: .75rem; animation: toast-in .3s ease both; }

.site-footer { border-top: 1px solid var(--line); background: rgba(2, 8, 15, .42); }
.footer-grid { display: grid; grid-template-columns: 1.15fr .9fr .9fr; gap: 2rem; padding: 3.5rem 0; }
.footer-brand { margin-bottom: 1rem; }
.footer-lede { max-width: 320px; font-size: .78rem; }
.footer-label { margin-bottom: .7rem; color: var(--accent); font: .62rem 'DM Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
.footer-links { display: flex; flex-wrap: wrap; gap: .6rem 1rem; }
.footer-links a { color: var(--text); font-size: .75rem; }
.footer-links a:hover { color: var(--accent); }
.footer-stack { display: grid; gap: .5rem; justify-items: start; }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--line); color: var(--dim); font: .62rem 'DM Mono', monospace; }
.noscript-card { width: min(800px, calc(100% - 2rem)); margin: 2rem auto; padding: 1.5rem; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.pulse { animation: pulse 2.4s ease-in-out infinite; }
.mono { font-family: 'DM Mono', monospace; }
.muted { color: var(--muted); }
.good { color: var(--good); }
.accent { color: var(--accent); }
.hidden { display: none !important; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes page-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(113, 233, 255, .16); } 50% { box-shadow: 0 0 0 9px rgba(113, 233, 255, 0); } }

@media (max-width: 1020px) {
  .primary-nav a { padding-inline: .5rem; font-size: .68rem; }
  .nav-cta { padding-inline: .75rem; font-size: .7rem; }
  .hero-grid, .software-hero { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .hero-art { min-height: 440px; }
  .software-copy { min-height: 330px; }
}

@media (max-width: 780px) {
  .shell { width: min(var(--max), calc(100% - 28px)); }
  .nav-wrap { min-height: 68px; flex-wrap: wrap; }
  .menu-toggle { display: block; margin-left: auto; }
  .nav-tools { margin-left: 0; }
  .nav-tools .nav-cta { display: none; }
  .primary-nav { display: none; order: 5; width: 100%; padding: .4rem 0 .8rem; border-top: 1px solid var(--line); }
  .primary-nav.open { display: grid; grid-template-columns: repeat(2, 1fr); }
  .primary-nav a { padding: .7rem; }
  .page-shell { padding-top: 2.3rem; }
  .hero { padding-top: 1rem; }
  .hero-art { min-height: 380px; }
  .metric-strip { grid-template-columns: repeat(2, 1fr); }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .grid-3, .grid-4, .grid-2, .split-feature, .studio-grid, .card-builder-grid, .listing-grid, .paint-game-grid, .contact-panel { grid-template-columns: 1fr; }
  .project-card, .project-card.featured, .project-card.tall { grid-column: span 12; }
  .feature-photo { min-height: 350px; }
  .manifest-banner { grid-template-columns: 1fr; }
  .manifest-mark { min-height: 190px; }
  .control-panel { position: static; }
  .builder-preview { min-height: 410px; padding: 1rem; }
  .builder-preview.layout-split { display: grid; grid-template-columns: 1fr; }
  .preview-side-note { max-width: 100%; }
  .console-body { grid-template-columns: 1fr; }
  .console-side { display: flex; gap: .35rem; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .console-side p { display: none; }
  .console-side button { width: auto; min-width: max-content; }
  .pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .listing-preview-body { grid-template-columns: 1fr; padding-top: 1rem; }
  .listing-image { min-height: 160px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .field.full { grid-column: auto; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-bottom { flex-direction: column; }
}

@media (max-width: 460px) {
  h1 { font-size: 3.05rem; }
  h2 { font-size: 2.25rem; }
  .hero-actions { display: grid; }
  .hero-actions .btn { width: 100%; }
  .hero-art { min-height: 320px; }
  .console-main { padding: .7rem; }
  .console-stats { grid-template-columns: 1fr; }
  .business-card { grid-template-columns: 1fr; }
  .business-card-left { min-height: 120px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Live theme gallery, ambient pointer light, and interactive surfaces. */
.pointer-glow {
  position: fixed;
  top: var(--pointer-y, -20vh);
  left: var(--pointer-x, -20vw);
  z-index: 1;
  width: 260px;
  height: 260px;
  pointer-events: none;
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 68%);
  filter: blur(4px);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
  transition: opacity .25s ease;
}
.pointer-glow.active { opacity: .9; }
[data-tilt] { transform-style: preserve-3d; transition: transform .18s ease, border-color .2s ease, box-shadow .2s ease; }

.theme-shelf {
  position: fixed;
  top: 88px;
  right: 20px;
  z-index: 60;
  width: min(360px, calc(100vw - 40px));
  padding: 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel-strong) 93%, transparent);
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px) scale(.97);
  transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
}
.theme-shelf.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.theme-shelf-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.theme-shelf-head .eyebrow { margin-bottom: .55rem; }
.theme-shelf-head strong { display: block; color: var(--text); font-size: .95rem; }
.theme-shelf > p { margin: .5rem 0 1rem; font-size: .72rem; }
.theme-shelf-close { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: transparent; }
.theme-shelf-close:hover { color: var(--text); border-color: var(--line-strong); }
.theme-options, .theme-lab-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.theme-option { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: rgba(2, 10, 18, .28); text-align: left; font-size: .7rem; font-weight: 800; }
.theme-option:hover, .theme-option.active { color: var(--text); border-color: var(--line-strong); background: var(--accent-soft); box-shadow: 0 0 20px color-mix(in srgb, var(--theme-swatch) 14%, transparent); }
.theme-option i { flex: 0 0 auto; width: 17px; height: 17px; border: 2px solid rgba(255,255,255,.32); border-radius: 50%; background: var(--theme-swatch); box-shadow: 0 0 14px color-mix(in srgb, var(--theme-swatch) 55%, transparent); }
.theme-option.compact { min-height: 40px; }
.theme-lab { padding: clamp(1.2rem, 3vw, 2rem); background: linear-gradient(145deg, color-mix(in srgb, var(--panel-strong) 88%, transparent), var(--panel)); }
.theme-lab .section-heading { margin-bottom: 1.3rem; }
.theme-lab-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.theme-lab-grid .theme-option { min-height: 66px; flex-direction: column; align-items: flex-start; justify-content: space-between; }
.theme-lab-grid .theme-option i { width: 24px; height: 24px; }

.niche-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
.niche-card { width: 100%; min-height: 224px; display: flex; flex-direction: column; align-items: flex-start; padding: 1rem; color: var(--text); text-align: left; }
.niche-card:hover, .niche-card.active { border-color: var(--accent); box-shadow: 0 18px 42px color-mix(in srgb, var(--accent) 12%, transparent); }
.niche-card-icon { display: grid; place-items: center; width: 37px; height: 37px; margin-bottom: .9rem; border: 1px solid var(--line-strong); border-radius: 11px; color: var(--accent); background: var(--accent-soft); font-size: 1.1rem; }
.niche-card-label { margin-bottom: .45rem; color: var(--accent); font: .58rem 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.niche-card strong { display: block; margin-bottom: .5rem; font-size: .98rem; letter-spacing: -.035em; }
.niche-card > span:not(.niche-card-icon):not(.niche-card-label) { color: var(--muted); font-size: .69rem; line-height: 1.45; }
.niche-card em { margin-top: auto; padding-top: .85rem; color: var(--text); font: .6rem 'DM Mono', monospace; font-style: normal; }
.niche-stage-shell { padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--line-strong); border-radius: 26px; background: linear-gradient(145deg, color-mix(in srgb, var(--panel-strong) 84%, transparent), var(--panel)); box-shadow: var(--shadow); }
.niche-stage-shell > .section-heading { margin-bottom: 1.3rem; }
.niche-stage-status { color: var(--accent); font-size: .62rem; white-space: nowrap; }
.niche-site-preview { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--panel); box-shadow: 0 28px 80px rgba(0,0,0,.24); }
.niche-site-chrome { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem .85rem; border-bottom: 1px solid var(--line); color: var(--dim); background: color-mix(in srgb, var(--bg-deep) 76%, transparent); font: .58rem 'DM Mono', monospace; letter-spacing: .05em; }
.chrome-dots { display: flex; gap: .3rem; }
.chrome-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); }
.chrome-dots i:nth-child(2) { background: var(--hot); }
.chrome-dots i:nth-child(3) { background: var(--good); }
.chrome-lock { color: var(--good); }
.niche-site-shell { --niche-accent: var(--accent); --niche-secondary: var(--violet); --niche-surface: rgba(8, 20, 31, .7); color: var(--text); background: radial-gradient(circle at 82% 5%, color-mix(in srgb, var(--niche-accent) 13%, transparent), transparent 26rem), linear-gradient(145deg, color-mix(in srgb, var(--niche-accent) 6%, var(--panel-strong)), var(--panel)); }
.niche-site-shell[data-niche-style='field'] { --niche-accent: #74f7bf; --niche-secondary: #9ae7b4; }
.niche-site-shell[data-niche-style='mechanic'] { --niche-accent: #ffc278; --niche-secondary: #ff8cad; }
.niche-site-shell[data-niche-style='diesel'] { --niche-accent: #ff9d63; --niche-secondary: #ffc96d; }
.niche-site-shell[data-niche-style='warehouse'] { --niche-accent: #7be8ff; --niche-secondary: #88a9ff; }
.niche-site-shell[data-niche-style='restaurant'] { --niche-accent: #ff9e83; --niche-secondary: #ffd27b; }
.niche-site-shell[data-niche-style='photo'] { --niche-accent: #d8b0ff; --niche-secondary: #ff9fc8; }
.niche-site-shell[data-niche-style='pet'] { --niche-accent: #ff9fc8; --niche-secondary: #a9e7ff; }
.niche-site-shell[data-niche-style='dealer'] { --niche-accent: #f4d06f; --niche-secondary: #8fe9d0; }
.niche-site-shell[data-niche-style='auction'] { --niche-accent: #c6a2ff; --niche-secondary: #ff9fca; }
.niche-site-shell[data-niche-style='mobile'] { --niche-accent: #7db9ff; --niche-secondary: #7bf1d3; }
.niche-site-nav { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid color-mix(in srgb, var(--niche-accent) 16%, var(--line)); color: var(--muted); font-size: .66rem; }
.niche-site-nav strong { display: inline-flex; align-items: center; gap: .45rem; margin-right: auto; color: var(--text); font-size: .78rem; }
.niche-site-nav strong i { width: 12px; height: 12px; border: 2px solid var(--niche-accent); border-radius: 4px; transform: rotate(45deg); }
.niche-site-nav button { padding: .45rem .6rem; border: 1px solid color-mix(in srgb, var(--niche-accent) 38%, var(--line)); border-radius: 7px; color: var(--niche-accent); background: color-mix(in srgb, var(--niche-accent) 10%, transparent); font: .58rem 'DM Mono', monospace; }
.niche-site-hero { display: grid; grid-template-columns: minmax(0, 1fr) 245px; align-items: center; gap: 1rem; padding: clamp(1.4rem, 4vw, 3rem); }
.niche-site-hero .eyebrow { color: var(--niche-accent); }
.niche-site-hero h3 { max-width: 620px; margin-bottom: .8rem; color: var(--text); font-size: clamp(1.8rem, 4vw, 3.7rem); }
.niche-site-hero p { max-width: 640px; margin-bottom: 1.15rem; font-size: .78rem; }
.niche-site-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.niche-site-actions .btn-primary { color: var(--bg-deep); background: var(--niche-accent); box-shadow: 0 0 30px color-mix(in srgb, var(--niche-accent) 22%, transparent); }
.niche-trust { color: var(--dim); font: .57rem 'DM Mono', monospace; }
.niche-orbit { position: relative; min-height: 230px; display: grid; place-items: center; isolation: isolate; }
.niche-orbit::before { position: absolute; width: 184px; height: 184px; content: ''; border: 1px dashed color-mix(in srgb, var(--niche-accent) 45%, transparent); border-radius: 50%; animation: orbit-spin 18s linear infinite; }
.niche-orbit-ring { position: absolute; width: 132px; height: 132px; border: 1px solid color-mix(in srgb, var(--niche-secondary) 68%, transparent); border-radius: 50%; box-shadow: 0 0 30px color-mix(in srgb, var(--niche-secondary) 22%, transparent), inset 0 0 28px color-mix(in srgb, var(--niche-accent) 18%, transparent); transform: rotateX(64deg) rotateZ(18deg); animation: orbit-ring 8s ease-in-out infinite alternate; }
.niche-orbit-core { position: relative; z-index: 1; display: grid; place-items: center; width: 82px; height: 82px; border: 1px solid color-mix(in srgb, var(--niche-accent) 70%, white); border-radius: 26px; color: var(--bg-deep); background: linear-gradient(145deg, var(--niche-accent), var(--niche-secondary)); box-shadow: 0 18px 42px color-mix(in srgb, var(--niche-accent) 20%, transparent); font-size: 1.65rem; transform: rotate(-8deg); }
.niche-orbit > span { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--niche-accent); box-shadow: 0 0 18px var(--niche-accent); animation: orbit-float 4s ease-in-out infinite; }
.niche-orbit > span:first-of-type { top: 19%; right: 16%; }
.niche-orbit > span:last-of-type { bottom: 17%; left: 15%; animation-delay: -1.5s; background: var(--niche-secondary); box-shadow: 0 0 18px var(--niche-secondary); }
.niche-site-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(245px, .65fr); gap: 1rem; padding: 1.2rem; border-top: 1px solid color-mix(in srgb, var(--niche-accent) 15%, var(--line)); }
.niche-site-main { min-width: 0; }
.niche-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin-bottom: .7rem; }
.niche-stat-grid > div { padding: .75rem; border: 1px solid color-mix(in srgb, var(--niche-accent) 18%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--niche-accent) 5%, var(--niche-surface)); }
.niche-stat-grid small { display: block; margin-bottom: .3rem; color: var(--dim); font: .55rem 'DM Mono', monospace; text-transform: uppercase; }
.niche-stat-grid strong { color: var(--niche-accent); font-size: 1rem; }
.niche-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.niche-card-grid article { min-height: 150px; padding: .85rem; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--niche-accent) 4%, var(--niche-surface)); }
.niche-card-grid h4 { margin: .6rem 0 .35rem; color: var(--text); font-size: .8rem; }
.niche-card-grid p { margin: 0; font-size: .64rem; line-height: 1.45; }
.niche-mini-mark { color: var(--niche-accent); }
.niche-funnel-panel { align-self: start; padding: 1rem; border: 1px solid color-mix(in srgb, var(--niche-secondary) 27%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--niche-secondary) 6%, var(--niche-surface)); }
.niche-funnel-panel .eyebrow { margin-bottom: .75rem; color: var(--niche-secondary); }
.niche-funnel-panel h4 { margin-bottom: .35rem; color: var(--text); font-size: 1.15rem; }
.niche-funnel-panel > p { font-size: .67rem; }
.niche-funnel-steps { display: grid; gap: .35rem; margin: 1rem 0; }
.funnel-step { display: flex; align-items: center; gap: .55rem; padding: .55rem; border: 1px solid transparent; border-radius: 8px; color: var(--muted); background: transparent; text-align: left; font-size: .66rem; }
.funnel-step i { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 7px; color: var(--niche-accent); font: .57rem 'DM Mono', monospace; font-style: normal; }
.funnel-step:hover, .funnel-step.active { border-color: color-mix(in srgb, var(--niche-accent) 48%, var(--line)); color: var(--text); background: color-mix(in srgb, var(--niche-accent) 10%, transparent); }
.funnel-step.active i { color: var(--bg-deep); background: var(--niche-accent); }
.niche-funnel-status { min-height: 62px; margin-bottom: .85rem; padding: .65rem; border-left: 2px solid var(--niche-accent); color: var(--muted); background: color-mix(in srgb, var(--niche-accent) 6%, transparent); font-size: .64rem; line-height: 1.5; }
.niche-funnel-panel .btn-secondary { border-color: color-mix(in srgb, var(--niche-secondary) 45%, var(--line)); color: var(--text); background: color-mix(in srgb, var(--niche-secondary) 10%, transparent); }
.niche-site-footer { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 1.2rem; border-top: 1px solid var(--line); color: var(--dim); font: .56rem 'DM Mono', monospace; }
.niche-menu-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.niche-menu-list > div { display: flex; justify-content: space-between; gap: .4rem; padding: .7rem; border-radius: 9px; background: color-mix(in srgb, var(--niche-accent) 6%, var(--niche-surface)); font-size: .66rem; }
.niche-menu-list span { color: var(--text); }
.niche-menu-list b { color: var(--niche-accent); white-space: nowrap; }
.vehicle-lab { margin-top: .8rem; padding: 1rem; border: 1px solid color-mix(in srgb, var(--niche-accent) 30%, var(--line)); border-radius: 13px; background: color-mix(in srgb, var(--niche-accent) 5%, var(--niche-surface)); }
.vehicle-lab-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.vehicle-lab-head .eyebrow { margin-bottom: .55rem; color: var(--niche-accent); }
.vehicle-lab-head h4 { margin: 0; color: var(--text); font-size: 1rem; }
.api-badge { padding: .35rem .45rem; border: 1px solid color-mix(in srgb, var(--niche-accent) 40%, var(--line)); border-radius: 999px; color: var(--niche-accent); font: .52rem 'DM Mono', monospace; white-space: nowrap; }
.api-badge[data-state='error'] { color: var(--hot); border-color: color-mix(in srgb, var(--hot) 42%, var(--line)); }
.vehicle-fields { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .55rem; }
.vehicle-fields .field { margin: .75rem 0 .2rem; }
.vehicle-fields .field label { font-size: .52rem; }
.vehicle-fields .field select { padding: .6rem .5rem; font-size: .62rem; }
.vehicle-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; }
.vehicle-actions button:disabled { cursor: wait; opacity: .62; }
.vehicle-lab .form-status { min-height: 2rem; margin: .7rem 0 0; }
.api-credit { margin: .65rem 0 0; color: var(--dim); font-size: .58rem !important; }
.api-credit a { color: var(--niche-accent); text-decoration: underline; text-underline-offset: 2px; }

.architecture-panel { display: grid; grid-template-columns: 1.02fr .98fr; gap: 1.2rem; padding: clamp(1.2rem, 4vw, 2.4rem); background: linear-gradient(145deg, color-mix(in srgb, var(--panel-strong) 90%, transparent), var(--panel)); }
.architecture-copy { display: flex; flex-direction: column; justify-content: center; }
.architecture-copy h2 { margin-bottom: .8rem; }
.architecture-copy p { max-width: 680px; font-size: .84rem; }
.language-cloud { display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0 1.25rem; }
.language-cloud span { padding: .4rem .52rem; border: 1px solid var(--line); border-radius: 999px; color: var(--text); background: var(--accent-soft); font: .58rem 'DM Mono', monospace; }
.architecture-points { display: grid; gap: .45rem; }
.architecture-points > div { display: flex; align-items: center; gap: .65rem; color: var(--muted); font-size: .72rem; }
.architecture-points b { color: var(--accent); font: .58rem 'DM Mono', monospace; }
.architecture-visual { display: grid; align-content: center; min-height: 360px; padding: 1.1rem; border: 1px solid var(--line-strong); border-radius: 17px; background: radial-gradient(circle at 50% 10%, var(--accent-soft), transparent 45%), var(--bg-deep); }
.architecture-visual > .eyebrow { margin-bottom: 1.1rem; }
.architecture-tree { display: grid; gap: .65rem; justify-items: center; }
.arch-node { width: 100%; min-height: 55px; display: grid; place-items: center; padding: .55rem; border: 1px solid var(--line-strong); border-radius: 9px; color: var(--text); background: color-mix(in srgb, var(--panel-strong) 75%, transparent); text-align: center; font: .62rem 'DM Mono', monospace; }
.arch-node.root { width: 72%; color: var(--bg-deep); background: linear-gradient(135deg, var(--accent), var(--violet)); border-color: transparent; font-weight: 800; }
.arch-row { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.arch-connector { width: 1px; height: 20px; background: linear-gradient(var(--accent), var(--violet)); box-shadow: 0 0 12px var(--accent); }
.arch-connector.short { height: 13px; }
.arch-footer { display: flex; justify-content: space-between; width: 100%; padding-top: .55rem; color: var(--dim); font: .5rem 'DM Mono', monospace; letter-spacing: .05em; }
.warehouse-system { display: grid; grid-template-columns: .9fr 1.1fr; gap: 1rem; padding: clamp(1.2rem, 4vw, 2.2rem); background: linear-gradient(145deg, color-mix(in srgb, var(--panel-strong) 88%, transparent), var(--panel)); }
.warehouse-system h2 { margin-bottom: .7rem; }
.warehouse-system > div:first-child p { max-width: 560px; font-size: .82rem; }
.warehouse-system-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; align-content: center; }
.warehouse-system-grid > div { min-height: 125px; padding: .9rem; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.warehouse-system-grid span { display: block; margin-bottom: .6rem; color: var(--accent); font: .56rem 'DM Mono', monospace; }
.warehouse-system-grid strong { display: block; margin-bottom: .25rem; color: var(--text); }
.warehouse-system-grid p { margin: 0; font-size: .64rem; }
.fab-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.fab-card { display: grid; grid-template-columns: .88fr 1.12fr; overflow: hidden; padding: 0; }
.fab-card:hover { box-shadow: var(--shadow); }
.fab-image { min-height: 270px; overflow: hidden; background: var(--panel-strong); }
.fab-image img { width: 100%; height: 100%; min-height: 270px; object-fit: cover; transition: transform .5s ease; }
.fab-card:hover .fab-image img { transform: scale(1.05); }
.fab-body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 1.2rem; }
.fab-body .eyebrow { margin-bottom: .65rem; font-size: .58rem; }
.fab-body h3 { margin-bottom: .45rem; }
.fab-body p { font-size: .72rem; }
.fab-body .btn { margin-top: .5rem; }

@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes orbit-ring { from { transform: rotateX(64deg) rotateZ(18deg) translateY(-3px); } to { transform: rotateX(64deg) rotateZ(198deg) translateY(3px); } }
@keyframes orbit-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -10px, 0); } }

@media (max-width: 1020px) {
  .niche-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .theme-lab-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .architecture-panel, .warehouse-system { grid-template-columns: 1fr; }
  .niche-site-hero { grid-template-columns: minmax(0, 1fr) 190px; }
}

@media (max-width: 780px) {
  .theme-shelf { top: 76px; right: 14px; }
  .theme-lab-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .niche-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .niche-site-hero, .niche-site-body { grid-template-columns: 1fr; }
  .niche-orbit { min-height: 160px; order: -1; }
  .niche-orbit::before { width: 140px; height: 140px; }
  .niche-orbit-ring { width: 98px; height: 98px; }
  .niche-orbit-core { width: 64px; height: 64px; border-radius: 20px; font-size: 1.35rem; }
  .niche-card-grid { grid-template-columns: 1fr; }
  .niche-card-grid article { min-height: auto; }
  .vehicle-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .niche-site-footer { flex-direction: column; }
  .fab-grid { grid-template-columns: 1fr; }
  .fab-card { grid-template-columns: .9fr 1.1fr; }
}

@media (max-width: 460px) {
  .theme-lab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .niche-grid { grid-template-columns: 1fr; }
  .niche-card { min-height: 185px; }
  .niche-site-nav > span { display: none; }
  .niche-site-nav { gap: .6rem; }
  .niche-site-hero { padding: 1.2rem; }
  .niche-site-body { padding: .75rem; }
  .niche-stat-grid, .niche-menu-list, .vehicle-fields { grid-template-columns: 1fr; }
  .vehicle-lab-head { flex-direction: column; }
  .vehicle-actions { display: grid; }
  .vehicle-actions .btn { width: 100%; }
  .architecture-visual { min-height: 300px; padding: .7rem; }
  .arch-node { min-height: 48px; font-size: .55rem; }
  .arch-footer { flex-wrap: wrap; gap: .5rem; }
  .fab-card { grid-template-columns: 1fr; }
  .fab-image, .fab-image img { min-height: 190px; }
}

/* Hero portrait treatment: a quiet second presence behind the redline area. */
:root[data-theme='white'] { color-scheme: light; }
.hero { isolation: isolate; }
.hero-grid { position: relative; z-index: 2; }
.hero-portrait-ghost { position: absolute; z-index: 1; top: 50%; right: -84px; width: min(42vw, 520px); height: min(76vw, 760px); min-height: 520px; overflow: hidden; opacity: var(--ghost-opacity, .16); transform: translate3d(var(--ghost-x, 0px), calc(-50% + var(--ghost-y, 0px)), 0) scale(var(--ghost-scale, 1)) rotate(5deg); transition: opacity 1.15s ease, transform 1.15s ease, filter 1.15s ease; pointer-events: auto; mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 72%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 72%, transparent 100%); }
.hero-portrait-ghost::before { position: absolute; inset: 0; z-index: 1; content: ''; background: linear-gradient(90deg, var(--bg) 0%, transparent 28%, transparent 76%, var(--bg) 100%), linear-gradient(180deg, var(--bg) 0%, transparent 18%, transparent 72%, var(--bg) 100%); pointer-events: none; }
.hero-portrait-ghost img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: saturate(.72) contrast(1.12) brightness(.75); opacity: .78; animation: portrait-breathe 7s ease-in-out infinite; }
.hero-portrait-ghost:hover, .hero-portrait-ghost:focus-visible { opacity: 0; filter: blur(7px); transform: translate3d(calc(var(--ghost-x, 0px) + 36px), calc(-50% + var(--ghost-y, 0px)), 0) scale(calc(var(--ghost-scale, 1) * .96)) rotate(5deg); }
.hero-portrait-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.hero-art { z-index: 2; }
@keyframes portrait-breathe { 0%, 100% { opacity: .62; transform: scale(1); } 50% { opacity: .9; transform: scale(1.018); } }

/* Creator workspace. It is deliberately absent from public navigation. */
.creator-page { padding-bottom: 2rem; }
.creator-header { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding: 1rem 0 2.6rem; }
.creator-header h1 { max-width: 760px; margin-bottom: .8rem; font-size: clamp(2.6rem, 6vw, 5.4rem); }
.creator-header p { max-width: 720px; margin-bottom: 0; font-size: .9rem; }
.creator-header-actions { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }
.creator-layout { display: grid; grid-template-columns: 215px minmax(0, 1fr); gap: 1rem; align-items: start; }
.creator-sidebar { position: sticky; top: 98px; display: grid; gap: .35rem; padding: .85rem; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--panel-strong) 88%, transparent); }
.creator-sidebar-label { padding: .3rem .5rem .55rem; color: var(--dim); font: .58rem 'DM Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
.creator-tab { padding: .7rem .75rem; border: 1px solid transparent; border-radius: 9px; color: var(--muted); background: transparent; text-align: left; font-size: .73rem; font-weight: 800; }
.creator-tab:hover, .creator-tab.active { border-color: var(--line-strong); color: var(--text); background: var(--accent-soft); }
.creator-sidebar-note { display: grid; gap: .35rem; margin-top: .75rem; padding: .75rem; border-top: 1px solid var(--line); color: var(--dim); font-size: .63rem; line-height: 1.5; }
.creator-sidebar-note strong { color: var(--accent); font: .58rem 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.creator-main { min-width: 0; }
.creator-panel { display: none; padding: clamp(1.1rem, 3vw, 2rem); border: 1px solid var(--line-strong); border-radius: 20px; background: linear-gradient(145deg, color-mix(in srgb, var(--panel-strong) 88%, transparent), var(--panel)); box-shadow: 0 18px 60px rgba(0,0,0,.14); }
.creator-panel.active { display: block; animation: creator-panel-in .32s ease both; }
.creator-panel-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.creator-panel-heading .eyebrow { margin-bottom: .55rem; }
.creator-panel-heading h2 { margin: 0; font-size: clamp(1.65rem, 3.4vw, 2.8rem); }
.creator-panel-copy { max-width: 700px; font-size: .8rem; }
.creator-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .75rem; }
.creator-form-grid .field.full { grid-column: 1 / -1; }
.creator-form-grid .field { margin: .65rem 0; }
.creator-save-row { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.creator-save-row .form-status { margin: 0; }
.creator-home-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 1rem; align-items: start; }
.creator-check { display: flex; align-items: center; gap: .55rem; margin: .65rem 0; color: var(--muted); font-size: .72rem; }
.creator-check input { width: 17px; height: 17px; accent-color: var(--accent); }
.creator-live-preview { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--bg-deep); box-shadow: var(--shadow); }
.creator-preview-bar { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem .85rem; border-bottom: 1px solid var(--line); color: var(--dim); font-size: .57rem; }
.creator-preview-status { color: var(--hot); font: .57rem 'DM Mono', monospace; }
.creator-preview-canvas { position: relative; min-height: 500px; display: flex; align-items: center; overflow: hidden; padding: clamp(1.1rem, 3vw, 2.1rem); isolation: isolate; }
.creator-preview-canvas::after { position: absolute; inset: 0; z-index: -1; content: ''; background: radial-gradient(circle at 85% 50%, var(--accent-soft), transparent 34%), linear-gradient(140deg, var(--bg-deep), var(--panel-strong)); }
.creator-preview-copy { position: relative; z-index: 2; width: 66%; }
.creator-preview-copy h2 { margin-bottom: .8rem; font-size: clamp(1.65rem, 3.3vw, 3rem); }
.creator-preview-copy p { max-width: 420px; font-size: .7rem; }
.creator-preview-copy .hero-actions { margin: 1.1rem 0 0; gap: .45rem; }
.creator-preview-copy .btn { pointer-events: none; padding: .55rem .65rem; font-size: .58rem; }
.creator-preview-ghost { position: absolute; z-index: 1; top: 4%; right: -6%; width: 52%; height: 94%; opacity: var(--ghost-opacity, .16); overflow: hidden; mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 78%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 78%, transparent); transition: opacity .5s ease; }
.creator-preview-ghost img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: saturate(.7) contrast(1.15) brightness(.72); opacity: .8; }
.creator-preview-frame { position: absolute; right: 1rem; bottom: 1rem; z-index: 3; display: grid; gap: .25rem; max-width: 180px; padding: .6rem .7rem; border-left: 2px solid var(--accent); background: color-mix(in srgb, var(--bg-deep) 75%, transparent); }
.creator-preview-frame span { color: var(--accent); font: .52rem 'DM Mono', monospace; }
.creator-preview-frame strong { color: var(--text); font-size: .7rem; }
.creator-sections-list { display: grid; gap: .75rem; }
.creator-pages-list { display: grid; gap: .75rem; }
.creator-page-copy .eyebrow { display: block; margin-bottom: .3rem; font-size: .54rem; }
.creator-page-copy .creator-section-row-head { align-items: end; }
.creator-section-row { padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--accent) 4%, var(--panel)); }
.creator-section-row-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; }
.creator-section-row-head strong { color: var(--text); font-size: .85rem; }
.creator-section-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .75rem; }
.creator-section-fields .field { margin: .55rem 0; }
.creator-section-fields .field.full { grid-column: 1 / -1; }
.creator-add-section { margin-top: 1rem; padding: 1rem; border: 1px dashed var(--line-strong); border-radius: 14px; background: color-mix(in srgb, var(--accent) 3%, transparent); }
.creator-seo-note { display: grid; gap: .25rem; margin-top: 1rem; padding: .8rem; border-left: 2px solid var(--accent); color: var(--muted); background: var(--accent-soft); font-size: .7rem; }
.creator-seo-note strong { color: var(--accent); font: .58rem 'DM Mono', monospace; text-transform: uppercase; }
.creator-theme-grid { margin-bottom: 1.25rem; }
.creator-theme-grid .theme-option { min-height: 62px; flex-direction: column; align-items: flex-start; justify-content: space-between; }
.creator-theme-grid .theme-option i { width: 24px; height: 24px; }
.creator-custom-color { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--accent) 4%, transparent); }
.creator-custom-color .eyebrow { margin-bottom: .5rem; }
.creator-custom-color h3 { margin-bottom: .35rem; font-size: 1rem; }
.creator-custom-color p { margin: 0; font-size: .7rem; }
.creator-color-controls { display: flex; align-items: center; flex-wrap: wrap; justify-content: end; gap: .55rem; }
.creator-color-controls label { color: var(--muted); font: .58rem 'DM Mono', monospace; text-transform: uppercase; }
.creator-color-controls input[type='color'] { width: 52px; height: 42px; padding: 3px; border: 1px solid var(--line-strong); border-radius: 9px; background: transparent; }
.creator-json { width: 100%; min-height: 360px; padding: .9rem; border: 1px solid var(--line); border-radius: 11px; outline: none; resize: vertical; color: var(--text); background: color-mix(in srgb, var(--bg-deep) 85%, transparent); font: .68rem/1.55 'DM Mono', monospace; }
.creator-json:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.creator-data-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.creator-data-actions label { cursor: pointer; }
.creator-gate { min-height: 700px; display: grid; place-items: center; }
.creator-gate-card { width: min(100%, 650px); padding: clamp(1.3rem, 5vw, 3rem); border: 1px solid var(--line-strong); border-radius: 22px; background: radial-gradient(circle at 80% 0%, var(--accent-soft), transparent 32%), var(--panel); box-shadow: var(--shadow); }
.creator-gate-card h1 { margin-bottom: .9rem; font-size: clamp(2.5rem, 6vw, 5.3rem); }
.creator-gate-card > p { max-width: 560px; font-size: .84rem; }
.creator-login-form { max-width: 440px; margin-top: 1.4rem; }
.creator-login-form .btn { width: 100%; }
.creator-login-form .form-status { min-height: 1.5rem; }
.creator-gate-card .demo-note { margin-top: 1.2rem; }
@keyframes creator-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Light theme treatment for the white preset. */
:root[data-theme='white'] body::after { opacity: .018; }
:root[data-theme='white'] .card,
:root[data-theme='white'] .control-panel,
:root[data-theme='white'] .preview-panel,
:root[data-theme='white'] .contact-copy,
:root[data-theme='white'] .contact-form,
:root[data-theme='white'] .creator-panel,
:root[data-theme='white'] .creator-sidebar,
:root[data-theme='white'] .creator-gate-card { box-shadow: 0 18px 50px rgba(27, 65, 91, .1); }
:root[data-theme='white'] .field input,
:root[data-theme='white'] .field select,
:root[data-theme='white'] .field textarea { color: var(--text); background: rgba(255,255,255,.76); }
:root[data-theme='white'] .site-footer { background: rgba(232, 238, 245, .72); }

@media (max-width: 900px) {
  .hero-portrait-ghost { right: -120px; width: 48vw; opacity: calc(var(--ghost-opacity, .16) * .78); }
  .creator-layout { grid-template-columns: 1fr; }
  .creator-sidebar { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .creator-sidebar-label, .creator-sidebar-note { grid-column: 1 / -1; }
  .creator-home-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .hero-portrait-ghost { right: -150px; width: 70vw; min-height: 450px; opacity: calc(var(--ghost-opacity, .16) * .62); }
  .creator-header { display: block; }
  .creator-header-actions { justify-content: space-between; margin-top: 1rem; }
  .creator-form-grid, .creator-section-fields { grid-template-columns: 1fr; }
  .creator-form-grid .field.full, .creator-section-fields .field.full { grid-column: auto; }
  .creator-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creator-custom-color { display: block; }
  .creator-color-controls { justify-content: start; margin-top: .9rem; }
  .creator-preview-canvas { min-height: 450px; }
  .creator-preview-copy { width: 83%; }
  .creator-preview-frame { right: .65rem; bottom: .65rem; max-width: 145px; }
}

/* Public theme experiments and the live coding proof surface. */
.theme-shelf-custom { display: grid; grid-template-columns: auto 42px; align-items: center; gap: .45rem .7rem; margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--line); }
.theme-shelf-custom label { color: var(--text); font-size: .68rem; font-weight: 800; }
.theme-shelf-custom input[type='color'] { width: 42px; height: 30px; padding: 3px; border: 1px solid var(--line-strong); border-radius: 8px; background: transparent; }
.theme-shelf-custom span { grid-column: 1 / -1; color: var(--dim); font: .55rem 'DM Mono', monospace; }
.coding-lab-shell, .character-lab { padding: clamp(1.1rem, 3vw, 2.25rem); overflow: hidden; background: linear-gradient(145deg, color-mix(in srgb, var(--panel-strong) 90%, transparent), var(--panel)); }
.coding-flow-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 0 0 1.4rem; }
.coding-flow-step { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: 11px; color: var(--dim); background: color-mix(in srgb, var(--bg-deep) 48%, transparent); }
.coding-flow-step b { grid-row: span 2; align-self: center; color: var(--dim); font: .6rem 'DM Mono', monospace; }
.coding-flow-step strong { color: var(--muted); font-size: .76rem; }
.coding-flow-step span { color: var(--dim); font-size: .62rem; }
.coding-flow-step.active { border-color: var(--line-strong); background: var(--accent-soft); }
.coding-flow-step.active b, .coding-flow-step.active strong { color: var(--accent); }
.live-coding-grid { display: grid; grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr); gap: 1rem; align-items: start; }
.code-control-panel { padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--bg-deep) 62%, transparent); }
.code-control-panel h3 { margin-bottom: .35rem; }
.code-control-panel > .eyebrow { margin-bottom: .6rem; }
.code-control-panel .field { margin: .8rem 0; }
.code-control-panel textarea { min-height: 175px; resize: vertical; font: .7rem/1.6 'DM Mono', monospace; }
.code-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin-top: .8rem; }
.code-action-grid .btn { min-height: 48px; padding: .55rem .45rem; font-size: .62rem; }
.code-control-panel .form-status { min-height: 2.5rem; margin: .8rem 0 0; }
.code-control-panel .demo-note { margin: .9rem 0 0; font-size: .62rem; }
.code-output-stack { display: grid; gap: .75rem; }
.code-output-card { padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--bg-deep) 50%, transparent); }
.code-output-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: .65rem; }
.code-output-head .eyebrow { margin: .1rem 0 0; font-size: .58rem; }
.code-output { min-height: 88px; margin: 0; padding: .85rem; overflow: auto; border-left: 2px solid var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--bg-deep)); font: .75rem/1.6 'DM Mono', monospace; white-space: pre-wrap; }
.code-output-note { margin: .65rem 0 0; color: var(--dim); font-size: .64rem; }
.gui-output { min-height: 174px; display: grid; place-items: stretch; }
.gui-placeholder { min-height: 150px; display: grid; place-content: center; gap: .5rem; padding: 1rem; border: 1px dashed var(--line-strong); border-radius: 11px; color: var(--dim); text-align: center; }
.gui-placeholder span { color: var(--accent); font: .56rem 'DM Mono', monospace; letter-spacing: .13em; text-transform: uppercase; }
.gui-placeholder strong { color: var(--muted); font-size: .75rem; }
.generated-gui-card { display: grid; align-content: center; gap: .55rem; min-height: 174px; padding: 1rem; border: 1px solid var(--line-strong); border-radius: 11px; background: radial-gradient(circle at 88% 15%, var(--accent-soft), transparent 36%), var(--panel-strong); }
.generated-gui-card .eyebrow { margin: 0; font-size: .56rem; }
.generated-gui-card strong { color: var(--text); font-size: 1.05rem; }
.generated-gui-card p { margin: 0; max-width: 500px; font-size: .68rem; }
.generated-gui-card .btn { justify-self: start; margin-top: .2rem; }
.coding-game-canvas { width: 100%; height: auto; min-height: 160px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-deep); image-rendering: auto; }
.coding-game-controls { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; margin-top: .65rem; }
.coding-game-controls .game-hint { flex: 1 1 220px; }
.character-editor-grid { display: grid; grid-template-columns: minmax(230px, .65fr) minmax(0, 1.35fr); gap: 1rem; align-items: stretch; }
.character-controls { padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--bg-deep) 58%, transparent); }
.character-controls > .eyebrow { margin-bottom: .65rem; }
.character-controls .field { margin: .8rem 0; }
.character-controls input[type='color'] { width: 100%; height: 42px; padding: 3px; }
.range-readout { display: flex; justify-content: space-between; gap: .5rem; margin-top: .35rem; color: var(--dim); font: .56rem 'DM Mono', monospace; }
.range-readout strong { color: var(--accent); }
.character-controls .form-status { min-height: 2rem; margin-top: .8rem; }
.character-preview-panel { display: grid; grid-template-columns: minmax(210px, .88fr) minmax(0, 1.12fr); gap: .75rem; min-width: 0; }
.character-stage { --character-primary: #f0a34d; --character-cloak: #7e281f; --character-energy: .72; position: relative; min-height: 360px; overflow: hidden; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 16px; background: radial-gradient(circle at 50% 38%, var(--accent-soft), transparent 40%), linear-gradient(150deg, var(--bg-deep), var(--panel-strong)); isolation: isolate; }
.character-stage::before { position: absolute; inset: 10% 10% 8%; content: ''; border: 1px solid color-mix(in srgb, var(--character-primary) 20%, transparent); border-radius: 50%; transform: rotateX(65deg) rotateZ(-15deg); box-shadow: 0 0 48px color-mix(in srgb, var(--character-primary) 20%, transparent); }
.character-orbit { position: absolute; width: 190px; height: 190px; border: 1px dashed color-mix(in srgb, var(--character-primary) 55%, transparent); border-radius: 50%; transform: rotateX(66deg) rotateZ(20deg); animation: character-orbit 13s linear infinite; }
.character-orbit::before, .character-orbit::after { position: absolute; width: 9px; height: 9px; content: ''; border-radius: 50%; background: var(--character-primary); box-shadow: 0 0 18px var(--character-primary); }
.character-orbit::before { top: 12%; left: 10%; }
.character-orbit::after { right: 12%; bottom: 8%; background: var(--character-cloak); box-shadow: 0 0 18px var(--character-cloak); }
.character-avatar { position: relative; z-index: 1; width: 118px; height: 205px; filter: drop-shadow(0 20px 22px color-mix(in srgb, var(--character-primary) 22%, transparent)); transform: translateY(8px); }
.character-face, .character-hood, .character-body, .character-cape, .character-arm, .character-leg, .character-staff { position: absolute; display: block; }
.character-hood { top: 26px; left: 39px; width: 43px; height: 48px; border: 3px solid var(--character-primary); border-radius: 45% 45% 42% 42%; background: var(--character-cloak); box-shadow: 0 0 22px color-mix(in srgb, var(--character-primary) 30%, transparent); }
.character-face { top: 40px; left: 49px; width: 24px; height: 24px; border-radius: 50%; background: #d28f6f; box-shadow: inset -4px -2px rgba(55, 22, 28, .24); }
.character-body { top: 77px; left: 33px; width: 54px; height: 72px; border: 3px solid var(--character-primary); border-radius: 22px 22px 12px 12px; background: linear-gradient(145deg, var(--character-primary), color-mix(in srgb, var(--character-primary) 32%, var(--bg-deep))); }
.character-cape { top: 72px; left: 15px; width: 92px; height: 96px; clip-path: polygon(22% 0, 78% 0, 100% 100%, 50% 82%, 0 100%); background: linear-gradient(145deg, var(--character-cloak), color-mix(in srgb, var(--character-cloak) 18%, var(--bg-deep))); opacity: calc(.35 + var(--character-energy) * .5); transform-origin: top center; animation: cape-breathe 3.4s ease-in-out infinite; }
.character-stage.no-cape .character-cape { opacity: 0; transform: scale(.75) translateY(20px); }
.character-arm { top: 84px; width: 17px; height: 63px; border: 3px solid var(--character-primary); border-radius: 12px; background: color-mix(in srgb, var(--character-primary) 60%, var(--bg-deep)); }
.character-arm-left { left: 21px; transform: rotate(16deg); }
.character-arm-right { right: 20px; transform: rotate(-16deg); }
.character-leg { top: 139px; width: 19px; height: 62px; border: 3px solid var(--character-primary); border-radius: 9px; background: color-mix(in srgb, var(--character-cloak) 54%, var(--bg-deep)); }
.character-leg-left { left: 38px; transform: rotate(5deg); }
.character-leg-right { right: 38px; transform: rotate(-5deg); }
.character-staff { top: 69px; right: 9px; width: 4px; height: 129px; border-radius: 99px; background: var(--character-primary); box-shadow: 0 0 13px var(--character-primary); transform: rotate(8deg); }
.character-staff::before { position: absolute; top: -14px; left: -7px; width: 17px; height: 17px; content: ''; border: 2px solid var(--character-primary); border-radius: 50%; background: var(--bg-deep); box-shadow: 0 0 18px color-mix(in srgb, var(--character-primary) 65%, transparent); }
.character-stage[data-role='warrior'] .character-staff { opacity: .7; }
.character-stage[data-role='ranger'] .character-staff { transform: rotate(30deg); opacity: .55; }
.character-stage[data-role='mage'] .character-staff { height: 141px; box-shadow: 0 0 22px var(--character-primary); }
.character-name { position: absolute; right: .9rem; bottom: .8rem; left: .9rem; z-index: 2; color: var(--character-primary); font: .58rem 'DM Mono', monospace; letter-spacing: .12em; text-align: center; }
.character-code { min-height: 360px; margin: 0; padding: 1rem; overflow: auto; border: 1px solid var(--line); border-radius: 14px; color: var(--muted); background: color-mix(in srgb, var(--bg-deep) 78%, transparent); font: .67rem/1.7 'DM Mono', monospace; white-space: pre-wrap; }
@keyframes character-orbit { to { transform: rotateX(66deg) rotateZ(380deg); } }
@keyframes cape-breathe { 0%, 100% { transform: skewX(0deg) scaleY(1); } 50% { transform: skewX(-4deg) scaleY(1.03); } }

@media (max-width: 900px) {
  .live-coding-grid, .character-editor-grid { grid-template-columns: 1fr; }
  .character-preview-panel { grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr); }
}

@media (max-width: 620px) {
  .coding-flow-strip { grid-template-columns: 1fr; }
  .coding-flow-step { grid-template-columns: auto 1fr; }
  .code-action-grid { grid-template-columns: 1fr; }
  .character-preview-panel { grid-template-columns: 1fr; }
  .character-stage { min-height: 330px; }
  .character-code { min-height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  .character-orbit, .character-cape { animation: none; }
}

/* Guided Creator Studio navigation and clearer destructive actions. */
.creator-sidebar-more { display: grid; gap: .35rem; margin: .35rem 0 0; padding-top: .5rem; border-top: 1px solid var(--line); }
.creator-sidebar-more summary { display: grid; gap: .18rem; padding: .7rem .75rem; border: 1px solid transparent; border-radius: 9px; color: var(--text); background: color-mix(in srgb, var(--accent) 5%, transparent); cursor: pointer; list-style: none; font-size: .73rem; font-weight: 800; }
.creator-sidebar-more summary::-webkit-details-marker { display: none; }
.creator-sidebar-more summary::after { float: right; content: '+'; color: var(--accent); font: 800 1rem/1 'DM Mono', monospace; }
.creator-sidebar-more[open] summary::after { content: '−'; }
.creator-sidebar-more summary small { color: var(--dim); font: .57rem 'DM Mono', monospace; font-weight: 400; }
.creator-sidebar-more > .creator-tab { width: 100%; }
.creator-page-card-head-actions [data-custom-page-remove] { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 48%, var(--line)); background: color-mix(in srgb, var(--danger) 7%, transparent); }
.creator-page-card-head-actions [data-custom-page-remove]:hover { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }

/* Make the creator-only front-end entry point unmistakable after unlock. */
.front-editor-launcher { display: flex; grid-template-columns: none; align-items: center; justify-content: center; width: auto; min-width: 136px; min-height: 54px; padding: .7rem .85rem; gap: .45rem; }
.front-editor-launcher span { flex: 0 0 auto; }
.front-editor-launcher strong { font-size: .68rem; white-space: nowrap; }
.front-editor-launcher small { font-size: .52rem; white-space: nowrap; }

@media (max-width: 560px) {
  .front-editor-launcher { width: 54px; min-width: 54px; min-height: 54px; border-radius: 999px; }
  .front-editor-launcher strong, .front-editor-launcher small { display: none; }
}

/* Creator Studio v2: broad, nested, creator-friendly workspace. */
body[data-current-page='creator'] .shell { width: min(100%, 1680px); }
body { font-size: calc(1rem * var(--body-scale, 1)); line-height: var(--body-line, 1.55); font-family: var(--font-body, 'Manrope', ui-sans-serif, system-ui, sans-serif); }
h1, h2, h3, h4 { font-family: var(--font-heading, 'Manrope', ui-sans-serif, system-ui, sans-serif); font-weight: var(--heading-weight, 800); letter-spacing: var(--heading-tracking, -.04em); }
.shell { width: min(var(--max, 1180px), calc(100% - var(--page-gutter, 28px) * 2)); }
.section { margin-bottom: var(--section-gap, 0px); }
.btn { border-radius: var(--btn-radius, 10px); padding: var(--btn-py, .78rem) var(--btn-px, 1rem); font-weight: var(--btn-weight, 800); }
.btn-primary { color: var(--btn-primary-text, #06131c); background: var(--btn-primary-bg, var(--accent)); }
.btn-secondary { color: var(--btn-secondary-text, var(--text)); border-color: var(--btn-border, var(--line-strong)); background: var(--btn-secondary-bg, var(--accent-soft)); }
.btn-quiet { border-color: var(--btn-border, var(--line)); }
:root[data-motion='off'] .reveal,
:root[data-motion='off'] .page,
:root[data-motion='off'] .btn,
:root[data-motion='off'] .card,
:root[data-motion='off'] * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
:root[data-motion='off'] .reveal { opacity: 1 !important; transform: none !important; }
:root[data-pointer-glow='off'] #pointer-glow { display: none !important; }
:root[data-ambient='off'] body::before,
:root[data-ambient='off'] body::after,
:root[data-ambient='off'] .ambient { display: none; }

.custom-public-block { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .7fr); align-items: center; gap: clamp(1rem, 4vw, 3rem); width: 100%; max-width: var(--max, 1180px); min-height: 230px; margin: 0 auto; padding: clamp(1.35rem, 4vw, 3rem); overflow: hidden; border: var(--border-width, 1px) solid var(--line); border-radius: var(--radius, 20px); background: linear-gradient(145deg, color-mix(in srgb, var(--panel-strong) 80%, transparent), color-mix(in srgb, var(--panel) 88%, transparent)); box-shadow: 0 20px 70px rgba(0,0,0,var(--shadow-alpha, .18)); }
.custom-block-contained { max-width: 920px; }
.custom-block-wide { max-width: var(--max, 1180px); }
.custom-block-full { max-width: none; border-radius: 0; }
.custom-block-copy { position: relative; z-index: 1; }
.custom-block-copy h2, .custom-product-copy h2, .custom-cta-inner h2 { margin-bottom: .7rem; }
.custom-block-copy p, .custom-product-copy p, .custom-cta-inner p { max-width: 680px; margin-bottom: 0; }
.custom-public-block.align-center { text-align: center; }
.custom-public-block.align-center .custom-block-copy p, .custom-public-block.align-center .custom-product-copy p { margin-right: auto; margin-left: auto; }
.custom-public-block.align-right { text-align: right; }
.custom-public-block.align-right .custom-block-copy p, .custom-public-block.align-right .custom-product-copy p { margin-left: auto; }
.custom-block-image, .custom-block-orbit { min-height: 220px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius-sm, 12px); background: radial-gradient(circle at 50% 40%, var(--accent-soft), transparent 48%), var(--bg-deep); }
.custom-block-image img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; }
.custom-block-orbit { display: grid; place-items: center; position: relative; }
.custom-block-orbit::before { width: 150px; height: 150px; content: ''; border: 1px solid var(--line-strong); border-radius: 50%; box-shadow: 0 0 0 25px color-mix(in srgb, var(--accent) 4%, transparent), 0 0 60px var(--accent-soft); transform: rotateX(62deg) rotateZ(-18deg); }
.custom-block-orbit span { position: absolute; color: var(--accent); font-size: 2rem; text-shadow: 0 0 22px var(--accent); }
.custom-block-list { display: grid; gap: .45rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.custom-block-list li { padding: .65rem .75rem; border-left: 2px solid var(--accent); color: var(--muted); background: color-mix(in srgb, var(--accent) 5%, transparent); font-size: .78rem; }
.custom-block-stats, .custom-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.custom-stat-grid > div { display: grid; gap: .25rem; padding: .85rem; border: 1px solid var(--line); border-radius: var(--radius-sm, 12px); background: color-mix(in srgb, var(--bg-deep) 70%, transparent); }
.custom-stat-grid small { color: var(--accent); font: .6rem 'DM Mono', monospace; }
.custom-stat-grid strong { color: var(--text); font-size: 1.15rem; }
.custom-stat-grid span { color: var(--dim); font-size: .66rem; }
.custom-gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.custom-gallery-grid img { width: 100%; min-height: 180px; height: 100%; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius-sm, 12px); }
.custom-gallery-placeholder { display: grid; place-items: center; min-height: 180px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm, 12px); color: var(--dim); font: .62rem/1.7 'DM Mono', monospace; text-align: center; }
.custom-gallery-placeholder strong { color: var(--accent); }
.custom-product-copy { position: relative; z-index: 1; }
.custom-product-badge { display: inline-flex; margin: 0 0 .8rem .6rem; padding: .3rem .5rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--hot); font: .58rem 'DM Mono', monospace; }
.custom-product-price { margin-top: 1rem; color: var(--text); font-size: 2rem; font-weight: 800; }
.custom-form-preview { display: grid; gap: .35rem; margin-top: 1rem; padding: .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm, 12px); background: color-mix(in srgb, var(--bg-deep) 60%, transparent); }
.custom-form-preview span { color: var(--dim); font: .56rem 'DM Mono', monospace; }
.custom-form-preview strong { color: var(--text); font-size: .78rem; }
.custom-cta-inner { grid-column: 1 / -1; width: min(100%, 820px); margin: 0 auto; text-align: center; }
.custom-cta-inner p { margin-right: auto; margin-left: auto; }
.custom-public-block .hero-actions { margin-bottom: 0; }
.custom-page-audio { width: min(100%, 520px); margin-top: 1.25rem; }

.creator-engine-page { width: 100%; max-width: none; padding-bottom: 3rem; }
.creator-compact-header { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding: .25rem 0 1.35rem; border-bottom: 1px solid var(--line); }
.creator-compact-header h1 { margin: 0 0 .45rem; font-size: clamp(2.2rem, 4vw, 3.8rem); }
.creator-compact-header p { max-width: 760px; margin: 0; font-size: .78rem; }
.creator-compact-header .eyebrow { margin-bottom: .55rem; }
.creator-workbench { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: 1rem; }
.creator-engine-sidebar { position: sticky; top: 94px; min-height: calc(100vh - 125px); }
.creator-workbench-main { min-width: 0; }
.creator-panel { padding: clamp(1.15rem, 2.2vw, 2rem); }
.creator-panel-heading h2 { max-width: 920px; }
.creator-panel-heading-small { align-items: start; margin-bottom: 1rem; }
.creator-panel-heading-small h3 { margin: 0; color: var(--text); font-size: 1.1rem; }
.creator-panel-heading-small .creator-panel-copy { margin: .35rem 0 0; }
.creator-panel-meta { white-space: nowrap; }
.creator-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; margin-bottom: 1rem; }
.creator-stat-grid > div { display: grid; gap: .25rem; min-height: 100px; padding: .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm, 12px); background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.creator-stat-grid .eyebrow { margin: 0; font-size: .53rem; }
.creator-stat-grid strong { color: var(--text); font-size: 2rem; line-height: 1; }
.creator-stat-grid small { color: var(--dim); font: .59rem 'DM Mono', monospace; }
.creator-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(250px, .55fr); gap: 1rem; align-items: start; }
.creator-quick-card, .creator-engine-note, .creator-builder-preview, .creator-data-warning { padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm, 12px); background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.creator-quick-card { position: sticky; top: 94px; }
.creator-quick-card h3 { margin: .2rem 0 1rem; color: var(--text); font-size: 1.15rem; }
.creator-quick-card ol { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.creator-quick-card li { display: grid; grid-template-columns: 28px 1fr; gap: .55rem; align-items: start; color: var(--muted); font-size: .7rem; }
.creator-quick-card li b { color: var(--accent); font: .6rem 'DM Mono', monospace; }
.creator-quick-card .hero-actions { display: grid; margin-bottom: 0; }
.creator-engine-note { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.creator-engine-note > div { display: grid; gap: .2rem; min-width: 210px; }
.creator-engine-note .eyebrow { margin: 0; }
.creator-engine-note strong { color: var(--text); }
.creator-engine-note p { max-width: 720px; margin: 0; font-size: .72rem; }
.creator-subtabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1.15rem; padding: .35rem; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--bg-deep) 45%, transparent); }
.creator-subtab { padding: .58rem .75rem; border: 1px solid transparent; border-radius: 8px; color: var(--muted); background: transparent; font-size: .67rem; font-weight: 800; }
.creator-subtab:hover, .creator-subtab.active { border-color: var(--line-strong); color: var(--text); background: var(--accent-soft); }
.creator-subpanel { display: none; }
.creator-subpanel.active { display: block; animation: creator-panel-in .24s ease both; }
.creator-create-card, .creator-upload-card, .creator-color-library, .creator-button-samples, .creator-surface-sample { margin-top: 1rem; padding: 1rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm, 12px); background: color-mix(in srgb, var(--accent) 3%, transparent); }
.creator-form-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.creator-form-heading > div { display: grid; gap: .18rem; }
.creator-form-heading .eyebrow { margin: 0; }
.creator-form-heading strong { color: var(--text); font-size: .85rem; }
.creator-form-grid { gap: .25rem .85rem; }
.creator-form-grid .field { min-width: 0; }
.creator-form-grid .field input, .creator-form-grid .field select, .creator-form-grid .field textarea { border-radius: var(--radius-sm, 9px); }
.creator-field-help, .creator-control-copy small, .creator-upload-card p, .creator-quick-card p { display: block; color: var(--dim); font-size: .63rem; line-height: 1.5; }
.creator-panel .field { margin: .65rem 0; }
.creator-save-row { margin-top: 1rem; }
.creator-section-row, .creator-page-card, .creator-custom-page-card { padding: 1rem; border-radius: var(--radius-sm, 12px); }
.creator-page-card-head, .creator-block-card-head, .creator-section-row-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.creator-page-card-head strong, .creator-block-card-head strong, .creator-section-row-head strong { display: block; color: var(--text); font-size: .86rem; }
.creator-page-card-head .eyebrow, .creator-block-card-head .eyebrow, .creator-section-row-head .eyebrow { display: block; margin: 0 0 .25rem; font-size: .53rem; }
.creator-page-card-head-actions, .creator-block-actions, .creator-section-row-actions, .creator-media-actions, .creator-kit-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: .35rem; }
.creator-card-description { margin: .7rem 0; color: var(--muted); font-size: .7rem; }
.creator-custom-page-card { background: color-mix(in srgb, var(--accent) 4%, var(--panel)); }
.creator-block-stack { display: grid; gap: .65rem; margin-top: 1rem; }
.creator-block-stack-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line); }
.creator-block-stack-head > div { display: grid; gap: .2rem; }
.creator-block-stack-head .eyebrow { margin: 0; }
.creator-block-stack-head strong { color: var(--text); font-size: .78rem; }
.creator-block-card { padding: .8rem; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--bg-deep) 34%, transparent); }
.creator-block-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 .7rem; }
.creator-block-grid .field.full { grid-column: 1 / -1; }
.creator-block-grid .field { margin: .45rem 0; }
.creator-block-grid label, .creator-section-fields label { font-size: .56rem; }
.creator-section-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.creator-section-fields .field.full { grid-column: 1 / -1; }
.creator-rich-section { background: color-mix(in srgb, var(--accent) 3%, var(--panel)); }
.creator-empty-state { display: grid; gap: .3rem; padding: 1.2rem; border: 1px dashed var(--line); border-radius: var(--radius-sm, 12px); color: var(--muted); font-size: .72rem; }
.creator-empty-state strong { color: var(--text); }
.creator-design-callout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .65fr); gap: 1rem; align-items: center; margin-top: 1rem; padding: 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm, 12px); background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 7%, var(--panel)), var(--panel)); }
.creator-design-callout h3 { margin: .1rem 0 .35rem; color: var(--text); font-size: 1rem; }
.creator-design-callout p { margin: 0; font-size: .7rem; }
.creator-callout-controls { display: grid; gap: .6rem; }
.creator-design-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.creator-design-grid-secondary { margin-top: .65rem; }
.creator-design-control { min-width: 0; padding: .8rem; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--bg-deep) 36%, transparent); }
.creator-control-copy { display: grid; gap: .2rem; }
.creator-control-copy label { color: var(--text); font-size: .68rem; font-weight: 800; }
.creator-color-control { display: grid; grid-template-columns: 1fr 50px; gap: .7rem; align-items: center; }
.creator-color-control input[type='color'] { width: 50px; height: 40px; padding: 3px; border: 1px solid var(--line-strong); border-radius: 8px; background: transparent; }
.creator-range-line { display: grid; grid-template-columns: minmax(0, 1fr) 58px; gap: .65rem; align-items: center; margin-top: .6rem; }
.creator-range-line input[type='range'] { width: 100%; accent-color: var(--accent); }
.creator-range-line output { color: var(--accent); font: .63rem 'DM Mono', monospace; text-align: right; }
.creator-select-control { display: grid; gap: .45rem; }
.creator-design-control select { width: 100%; padding: .55rem .6rem; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--bg-deep); }
.creator-toggle-control { display: flex; align-items: flex-start; gap: .6rem; padding: .7rem; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: color-mix(in srgb, var(--bg-deep) 34%, transparent); font-size: .69rem; }
.creator-toggle-control input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: .08rem; accent-color: var(--accent); }
.creator-toggle-control span { display: grid; gap: .2rem; }
.creator-toggle-control strong { color: var(--text); }
.creator-color-library { border-style: solid; }
.creator-inline-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.creator-inline-form input:not([type='color']), .creator-inline-form select { flex: 1 1 180px; min-width: 0; padding: .65rem .7rem; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--bg-deep); }
.creator-inline-form input[type='color'] { width: 48px; height: 40px; padding: 3px; border: 1px solid var(--line-strong); border-radius: 8px; background: transparent; }
.creator-saved-colors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; margin-top: .8rem; }
.creator-saved-color { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .45rem; border: 1px solid var(--line); border-radius: 8px; }
.creator-saved-color > button:first-child { display: flex; align-items: center; gap: .5rem; min-width: 0; border: 0; color: var(--text); background: transparent; text-align: left; }
.creator-saved-color i { flex: 0 0 auto; width: 25px; height: 25px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--saved-color); }
.creator-saved-color span { display: grid; min-width: 0; gap: .1rem; }
.creator-saved-color strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .65rem; }
.creator-saved-color small { color: var(--dim); font: .55rem 'DM Mono', monospace; }
.creator-button-samples { border-style: solid; }
.creator-button-samples .eyebrow { margin-bottom: .7rem; }
.creator-button-samples .hero-actions { margin: 0; }
.creator-surface-sample { min-height: 145px; display: grid; place-items: center; border-style: solid; background: radial-gradient(circle at 70% 30%, var(--accent-soft), transparent 42%), color-mix(in srgb, var(--panel-strong) 78%, transparent); backdrop-filter: blur(var(--glass-blur, 24px)); box-shadow: 0 20px 70px rgba(0,0,0,var(--shadow-alpha, .22)); }
.creator-surface-sample > div { display: grid; gap: .3rem; text-align: center; }
.creator-surface-sample .eyebrow { margin: 0; }
.creator-surface-sample strong { color: var(--text); }
.creator-surface-sample span:last-child { color: var(--muted); font-size: .68rem; }
.creator-kit-list, .creator-product-list { display: grid; gap: .55rem; margin-top: 1rem; }
.creator-kit-card, .creator-product-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--accent) 3%, var(--panel)); }
.creator-kit-card > div:first-child, .creator-product-card > div:first-child { display: grid; gap: .2rem; }
.creator-kit-card .eyebrow, .creator-product-card .eyebrow { margin: 0; font-size: .52rem; }
.creator-kit-card strong, .creator-product-card strong { color: var(--text); font-size: .8rem; }
.creator-kit-card small, .creator-product-card small { color: var(--dim); font-size: .62rem; }
.creator-media-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin-top: 1rem; }
.creator-media-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm, 12px); background: color-mix(in srgb, var(--panel-strong) 72%, transparent); }
.creator-media-thumb { aspect-ratio: 1.35; overflow: hidden; background: var(--bg-deep); }
.creator-media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.creator-media-copy { display: grid; gap: .25rem; padding: .7rem .75rem .35rem; }
.creator-media-copy strong { overflow: hidden; color: var(--text); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.creator-media-copy span { font-size: .55rem; }
.creator-media-actions { justify-content: start; padding: .35rem .75rem .75rem; }
.creator-upload-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .85fr); gap: 1rem; align-items: center; border-style: solid; }
.creator-upload-card h3 { margin: .1rem 0 .3rem; color: var(--text); font-size: 1rem; }
.creator-upload-card p { margin: 0; }
.creator-upload-form { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.creator-upload-form > input:not([type='file']) { flex: 1 1 170px; min-width: 0; padding: .65rem .7rem; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--bg-deep); }
.file-button { display: inline-flex; align-items: center; justify-content: center; min-height: 39px; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: transparent; font-size: .67rem; font-weight: 800; cursor: pointer; }
.file-button:hover { border-color: var(--line-strong); color: var(--text); background: var(--accent-soft); }
.file-button input { display: none; }
.creator-upload-form .form-status { flex-basis: 100%; margin: .2rem 0 0; }
.creator-audio-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .8fr) auto; gap: 1rem; align-items: center; margin-top: 1rem; padding: .9rem; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--accent) 3%, var(--panel)); }
.creator-audio-card > div { display: grid; gap: .2rem; }
.creator-audio-card .eyebrow { margin: 0; font-size: .53rem; }
.creator-audio-card strong { color: var(--text); font-size: .75rem; }
.creator-audio-card small { color: var(--dim); font-size: .62rem; }
.creator-audio-card audio { width: 100%; min-width: 0; }
.creator-commerce-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr); gap: 1rem; align-items: start; }
.creator-commerce-layout .creator-create-card { margin-top: 0; }
.creator-builder-preview { position: sticky; top: 94px; display: grid; gap: .7rem; }
.creator-builder-preview h3 { margin: 0; color: var(--text); font-size: 1.15rem; }
.creator-builder-preview > p { margin: .2rem 0 0; font-size: .68rem; }
.creator-funnel-line { display: grid; grid-template-columns: 28px 1fr; gap: .1rem .55rem; padding: .65rem 0; border-top: 1px solid var(--line); }
.creator-funnel-line span { grid-row: span 2; color: var(--accent); font: .6rem 'DM Mono', monospace; }
.creator-funnel-line strong { color: var(--text); font-size: .74rem; }
.creator-funnel-line small { color: var(--dim); font-size: .62rem; }
.creator-subnote { display: flex; gap: .65rem; margin-top: 1rem; padding: .75rem; border-left: 2px solid var(--accent); color: var(--muted); background: var(--accent-soft); font-size: .67rem; }
.creator-subnote strong { flex: 0 0 auto; color: var(--accent); font: .57rem 'DM Mono', monospace; text-transform: uppercase; }
.creator-data-warning { display: flex; gap: .7rem; margin-top: 1rem; color: var(--muted); font-size: .68rem; }
.creator-data-warning strong { flex: 0 0 auto; color: var(--hot); }
.creator-login-page .creator-gate-card h1 { font-size: clamp(2.35rem, 5vw, 4.7rem); }
.creator-canvas-card { overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius, 20px); background: var(--bg-deep); box-shadow: 0 20px 70px rgba(0,0,0,var(--shadow-alpha, .22)); }
.creator-canvas-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem .9rem; border-bottom: 1px solid var(--line); }
.creator-canvas-toolbar > div:first-child { display: grid; gap: .18rem; }
.creator-canvas-toolbar .eyebrow { margin: 0; font-size: .53rem; }
.creator-canvas-toolbar strong { color: var(--text); font-size: .75rem; }
.creator-canvas-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: .4rem; }
.creator-inline-select select { max-width: 210px; padding: .55rem .6rem; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--panel-strong); font-size: .64rem; }
.creator-viewport-switcher { display: flex; gap: .3rem; padding: .55rem .75rem 0; }
.creator-viewport-switcher button { padding: .38rem .55rem; border: 1px solid transparent; border-radius: 7px; color: var(--dim); background: transparent; font: .58rem 'DM Mono', monospace; }
.creator-viewport-switcher button.active, .creator-viewport-switcher button:hover { border-color: var(--line-strong); color: var(--accent); background: var(--accent-soft); }
.creator-canvas-frame { display: grid; place-items: center; min-height: 410px; padding: 1.2rem; transition: width var(--motion-duration, 650ms) ease, min-height var(--motion-duration, 650ms) ease; }
.creator-canvas-frame[data-creator-viewport-frame='tablet'] { padding-right: 12%; padding-left: 12%; }
.creator-canvas-frame[data-creator-viewport-frame='mobile'] { padding-right: 28%; padding-left: 28%; }
.creator-mock-site { width: 100%; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--bg); box-shadow: 0 22px 60px rgba(0,0,0,.35); }
.creator-mock-topbar, .creator-mock-footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .7rem; border-bottom: 1px solid var(--line); color: var(--dim); font: .52rem 'DM Mono', monospace; }
.creator-mock-footer { border-top: 1px solid var(--line); border-bottom: 0; flex-wrap: wrap; }
.creator-mock-logo { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: var(--bg-deep); background: linear-gradient(135deg, var(--accent), var(--violet)); font-weight: 900; }
.creator-mock-nav { margin-left: auto; }
.creator-mock-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, .65fr); gap: 1rem; align-items: center; min-height: 310px; padding: clamp(1rem, 3vw, 2rem); background: radial-gradient(circle at 85% 28%, var(--accent-soft), transparent 40%), linear-gradient(145deg, var(--bg-deep), var(--panel-strong)); }
.creator-mock-copy { position: relative; z-index: 1; }
.creator-mock-copy .eyebrow { margin-bottom: .65rem; font-size: .52rem; }
.creator-mock-copy h3 { margin-bottom: .55rem; color: var(--text); font-size: clamp(1.2rem, 3vw, 2.4rem); }
.creator-mock-copy p { max-width: 440px; margin-bottom: 0; font-size: .65rem; }
.creator-mock-copy .hero-actions { margin: 1rem 0 0; gap: .35rem; }
.creator-mock-copy .btn { pointer-events: none; padding: .45rem .55rem; font-size: .52rem; }
.creator-mock-art { display: grid; place-items: end start; min-height: 220px; padding: .65rem; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 12px; background: radial-gradient(circle at 50% 35%, var(--accent-soft), transparent 45%), var(--panel-strong); background-position: center; background-size: cover; }
.creator-mock-art span { padding: .35rem .45rem; border: 1px solid var(--line); border-radius: 6px; color: var(--accent); background: rgba(3,8,18,.65); font: .5rem 'DM Mono', monospace; }
.creator-canvas-note { margin: 0; padding: .65rem .8rem .8rem; color: var(--dim); font-size: .62rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 1180px) {
  .creator-workbench { grid-template-columns: 210px minmax(0, 1fr); }
  .creator-dashboard-grid, .creator-commerce-layout { grid-template-columns: 1fr; }
  .creator-quick-card, .creator-builder-preview { position: static; }
}

@media (max-width: 860px) {
  body[data-current-page='creator'] .shell { width: min(100%, calc(100% - 28px)); }
  .creator-compact-header { display: block; }
  .creator-header-actions { justify-content: space-between; margin-top: 1rem; }
  .creator-workbench { grid-template-columns: 1fr; }
  .creator-engine-sidebar { position: static; min-height: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .creator-engine-sidebar .creator-sidebar-label, .creator-engine-sidebar .creator-sidebar-note { grid-column: 1 / -1; }
  .creator-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creator-upload-card, .creator-design-callout { grid-template-columns: 1fr; }
  .creator-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creator-block-grid, .creator-section-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  body[data-current-page='creator'] .shell { width: calc(100% - 20px); }
  .creator-panel { padding: 1rem; }
  .creator-engine-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creator-stat-grid, .creator-design-grid, .creator-saved-colors, .creator-media-grid, .creator-block-grid, .creator-section-fields { grid-template-columns: 1fr; }
  .creator-form-grid .field.full, .creator-block-grid .field.full, .creator-section-fields .field.full { grid-column: auto; }
  .creator-engine-note, .creator-data-warning, .creator-audio-card { display: grid; grid-template-columns: 1fr; }
  .creator-engine-note > div { min-width: 0; }
  .creator-canvas-toolbar { display: block; }
  .creator-canvas-actions { justify-content: start; margin-top: .7rem; }
  .creator-canvas-frame[data-creator-viewport-frame='mobile'] { padding-right: 14%; padding-left: 14%; }
  .creator-mock-body { grid-template-columns: 1fr; }
  .creator-mock-art { min-height: 130px; }
  .creator-mock-nav { display: none; }
  .creator-page-card-head, .creator-block-card-head, .creator-section-row-head, .creator-kit-card, .creator-product-card { display: block; }
  .creator-page-card-head-actions, .creator-block-actions, .creator-section-row-actions, .creator-kit-actions, .creator-media-actions { justify-content: start; margin-top: .65rem; }
}

/* Creator defaults and inline front-end editing. */
.creator-panel-heading-actions { display: flex; align-items: center; justify-content: end; flex-wrap: wrap; gap: .55rem; }
.creator-control-actions { display: flex; align-items: center; justify-content: end; flex-wrap: wrap; gap: .45rem; min-width: 0; }
.creator-field-label-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.creator-reset-button { flex: 0 0 auto; padding: .36rem .5rem; border: 1px solid var(--line); border-radius: 7px; color: var(--dim); background: transparent; font: .56rem 'DM Mono', monospace; text-transform: uppercase; }
.creator-reset-button:hover { border-color: var(--line-strong); color: var(--accent); background: var(--accent-soft); }
.creator-color-control { grid-template-columns: minmax(0, 1fr) auto; }
.creator-color-control .creator-control-actions input[type='color'] { width: 50px; height: 40px; }
.creator-range-line { grid-template-columns: minmax(0, 1fr) auto auto; }
.creator-range-line .creator-reset-button { align-self: center; }
.creator-toggle-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .55rem; }
.creator-toggle-row .creator-toggle-control { min-height: 100%; }
.creator-toggle-row > .creator-reset-button { margin-top: .7rem; }
.creator-panel-heading-actions .creator-reset-button { margin-top: .1rem; }
.creator-template-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .65rem; margin-bottom: 1rem; }
.creator-template-card { min-height: 190px; display: grid; align-content: start; gap: .65rem; padding: .9rem; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 7%, var(--panel)), color-mix(in srgb, var(--bg-deep) 70%, transparent)); text-align: left; transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.creator-template-card:hover, .creator-template-card.active { border-color: var(--line-strong); color: var(--text); background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 14%, var(--panel)), color-mix(in srgb, var(--bg-deep) 60%, transparent)); box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 10%, transparent); transform: translateY(-3px); }
.creator-template-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line-strong); border-radius: 11px; color: var(--accent); background: var(--accent-soft); font-size: 1.1rem; }
.creator-template-copy { display: grid; gap: .3rem; }
.creator-template-copy strong { color: var(--text); font-size: .75rem; }
.creator-template-copy small { color: var(--dim); font-size: .63rem; line-height: 1.45; }
.creator-template-apply { align-self: end; margin-top: auto; color: var(--accent); font: .57rem 'DM Mono', monospace; text-transform: uppercase; }
.creator-template-divider { display: flex; align-items: center; gap: .7rem; margin: .8rem 0 .7rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.creator-template-divider .eyebrow { margin: 0; }
.creator-template-divider strong { color: var(--text); font-size: .72rem; }

.front-editor-root { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.front-editor-launcher { position: fixed; top: 42%; right: 1rem; display: grid; gap: .16rem; width: 58px; min-height: 116px; padding: .6rem .45rem; border: 1px solid var(--line-strong); border-radius: 12px; color: var(--text); background: color-mix(in srgb, var(--panel-strong) 92%, transparent); box-shadow: 0 14px 40px rgba(0,0,0,.28); pointer-events: auto; text-align: center; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.front-editor-launcher:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel-strong)); transform: translateX(-3px); }
.front-editor-launcher span { color: var(--accent); font-size: 1.1rem; }
.front-editor-launcher strong { font-size: .6rem; line-height: 1.25; }
.front-editor-launcher small { color: var(--dim); font: .49rem 'DM Mono', monospace; text-transform: uppercase; }
.front-editor-panel { position: fixed; top: 94px; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; width: min(430px, calc(100vw - 2rem)); overflow: auto; padding: 1rem; border: 1px solid var(--line-strong); border-radius: 18px; color: var(--text); background: linear-gradient(145deg, color-mix(in srgb, var(--panel-strong) 96%, transparent), color-mix(in srgb, var(--bg-deep) 94%, transparent)); box-shadow: 0 24px 90px rgba(0,0,0,.42); backdrop-filter: blur(22px); pointer-events: auto; transform: translateX(calc(100% + 2rem)); transition: transform .32s ease; }
.front-editor-root.open .front-editor-panel { transform: translateX(0); }
.front-editor-panel-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem; align-items: start; }
.front-editor-panel-head .eyebrow { margin-bottom: .55rem; font-size: .56rem; }
.front-editor-panel-head h2 { margin-bottom: .45rem; font-size: 1.55rem; }
.front-editor-panel-head p { margin: 0; font-size: .68rem; line-height: 1.5; }
.front-editor-close { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: transparent; font-size: 1.2rem; line-height: 1; }
.front-editor-close:hover { border-color: var(--line-strong); color: var(--text); background: var(--accent-soft); }
.front-editor-draft-bar { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin: 1rem 0 .2rem; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: 9px; color: var(--dim); background: color-mix(in srgb, var(--bg-deep) 65%, transparent); font: .55rem 'DM Mono', monospace; text-transform: uppercase; }
.front-editor-status { color: var(--accent); }
.front-editor-section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.front-editor-section-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .7rem; }
.front-editor-section-head .eyebrow { margin: 0; font-size: .55rem; }
.front-editor-section-head .mono { font-size: .54rem; }
.front-editor-field { margin: .6rem 0; }
.front-editor-field input, .front-editor-field textarea, .front-editor-section select { background: color-mix(in srgb, var(--bg-deep) 80%, transparent); }
.front-editor-live-label { color: var(--good); font: .5rem 'DM Mono', monospace; letter-spacing: .08em; }
.front-editor-audio-toggle { margin-top: .8rem; }
.front-editor-help { margin: 0 0 .7rem; color: var(--dim); font-size: .64rem; line-height: 1.5; }
.front-editor-elements { display: grid; gap: .45rem; }
.front-editor-element-row { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .65rem; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--panel) 78%, transparent); }
.front-editor-element-row > div:first-child { display: grid; gap: .15rem; min-width: 0; }
.front-editor-element-row .eyebrow { margin: 0; font-size: .5rem; }
.front-editor-element-row strong { overflow: hidden; color: var(--text); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.front-editor-element-row small { color: var(--dim); font-size: .56rem; }
.front-editor-row-actions { display: flex; flex: 0 0 auto; gap: .3rem; }
.front-editor-row-actions .btn { padding: .42rem .5rem; font-size: .58rem; }
.front-editor-element-row.is-hidden { border-style: dashed; opacity: .68; }
.front-editor-safe-note { display: grid; gap: .25rem; margin-top: 1rem; padding: .7rem; border-left: 2px solid var(--good); color: var(--muted); background: color-mix(in srgb, var(--good) 7%, transparent); font-size: .62rem; line-height: 1.45; }
.front-editor-safe-note strong { color: var(--good); font: .53rem 'DM Mono', monospace; letter-spacing: .08em; }
.front-editor-actions { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: .4rem; margin-top: 1rem; }
.front-editor-actions .btn { min-width: 0; padding-inline: .5rem; font-size: .62rem; }
.front-editor-advanced { display: block; margin-top: .8rem; color: var(--accent); font: .6rem 'DM Mono', monospace; text-decoration: underline; text-underline-offset: 3px; }
.front-editor-empty { padding: .8rem; border: 1px dashed var(--line); border-radius: 9px; color: var(--dim); font-size: .64rem; }
.front-page-audio { display: block; width: min(100%, 520px); margin: 1rem auto 0; }
body[data-front-editor='available'][data-front-editor-open='open'] .front-editable-element { cursor: crosshair; outline: 1px dashed color-mix(in srgb, var(--accent) 0%, transparent); outline-offset: 5px; transition: outline-color .2s ease, opacity .2s ease; }
body[data-front-editor='available'][data-front-editor-open='open'] .front-editable-element:hover, body[data-front-editor='available'][data-front-editor-open='open'] .front-editable-element.front-editor-selected { outline-color: var(--accent); }
body[data-front-editor='available'][data-front-editor-open='open'] .front-editable-element.front-editor-hidden { opacity: .4; outline-color: var(--hot); }

/* Composition-level templates. They deliberately reuse the same rendered data and routes. */
:root[data-template='commerce'] body:not([data-current-page='creator'])::before,
:root[data-template='commerce'] body:not([data-current-page='creator'])::after,
:root[data-template='plain'] body:not([data-current-page='creator'])::before,
:root[data-template='plain'] body:not([data-current-page='creator'])::after,
:root[data-template='editorial'] body:not([data-current-page='creator'])::before,
:root[data-template='editorial'] body:not([data-current-page='creator'])::after { display: none; }
:root[data-template='commerce'] body:not([data-current-page='creator']) .site-header { border-bottom-color: var(--line-strong); background: var(--panel-strong); backdrop-filter: none; }
:root[data-template='commerce'] body:not([data-current-page='creator']) .hero { min-height: 620px; padding: 2rem 0 4rem; }
:root[data-template='commerce'] body:not([data-current-page='creator']) .hero-grid { grid-template-columns: minmax(0, .78fr) minmax(360px, 1.22fr); gap: clamp(1.5rem, 5vw, 5rem); }
:root[data-template='commerce'] body:not([data-current-page='creator']) .hero-copy { order: 2; }
:root[data-template='commerce'] body:not([data-current-page='creator']) .hero-art { order: 1; min-height: 560px; border-radius: 12px; box-shadow: 0 24px 60px rgba(15, 55, 80, .18); }
:root[data-template='commerce'] body:not([data-current-page='creator']) .hero h1 { font-size: clamp(2.8rem, 5.5vw, 5.6rem); }
:root[data-template='commerce'] body:not([data-current-page='creator']) .card,
:root[data-template='commerce'] body:not([data-current-page='creator']) .feature-copy,
:root[data-template='commerce'] body:not([data-current-page='creator']) .contact-copy,
:root[data-template='commerce'] body:not([data-current-page='creator']) .contact-form { border-radius: 10px; background: var(--panel-strong); box-shadow: 0 18px 48px rgba(24, 71, 98, .1); }
:root[data-template='commerce'] body:not([data-current-page='creator']) .metric-strip { margin-top: 1rem; border: 1px solid var(--line); background: var(--panel-strong); }
:root[data-template='commerce'] body:not([data-current-page='creator']) .manifest-banner,
:root[data-template='commerce'] body:not([data-current-page='creator']) .custom-public-block { border-radius: 12px; background: var(--panel-strong); box-shadow: 0 18px 50px rgba(24, 71, 98, .1); }
:root[data-template='commerce'] body:not([data-current-page='creator']) .project-grid { gap: 1.25rem; }
:root[data-template='commerce'] body:not([data-current-page='creator']) .project-card,
:root[data-template='commerce'] body:not([data-current-page='creator']) .project-card.featured,
:root[data-template='commerce'] body:not([data-current-page='creator']) .project-card.tall { grid-column: span 4; }

:root[data-template='plain'] body:not([data-current-page='creator']) { font-family: Arial, Helvetica, sans-serif; }
:root[data-template='plain'] body:not([data-current-page='creator']) .site-header { background: var(--bg); backdrop-filter: none; }
:root[data-template='plain'] body:not([data-current-page='creator']) .hero { min-height: auto; padding: 3rem 0 3.5rem; }
:root[data-template='plain'] body:not([data-current-page='creator']) .hero-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 2rem; }
:root[data-template='plain'] body:not([data-current-page='creator']) .hero h1 { max-width: 680px; font-family: Georgia, serif; font-size: clamp(2.8rem, 6vw, 5.2rem); letter-spacing: -.07em; }
:root[data-template='plain'] body:not([data-current-page='creator']) .hero-art { min-height: 420px; border-radius: 0; box-shadow: none; }
:root[data-template='plain'] body:not([data-current-page='creator']) .card,
:root[data-template='plain'] body:not([data-current-page='creator']) .feature-copy,
:root[data-template='plain'] body:not([data-current-page='creator']) .contact-copy,
:root[data-template='plain'] body:not([data-current-page='creator']) .contact-form,
:root[data-template='plain'] body:not([data-current-page='creator']) .manifest-banner,
:root[data-template='plain'] body:not([data-current-page='creator']) .custom-public-block { border-radius: 0; box-shadow: none; }
:root[data-template='plain'] body:not([data-current-page='creator']) .btn,
:root[data-template='plain'] body:not([data-current-page='creator']) .nav-cta { border-radius: 0; }
:root[data-template='plain'] body:not([data-current-page='creator']) .section { padding-top: 3.8rem; }
:root[data-template='plain'] body:not([data-current-page='creator']) .metric-strip { border-color: var(--line-strong); }

:root[data-template='editorial'] body:not([data-current-page='creator']) .site-header { background: color-mix(in srgb, var(--bg) 88%, transparent); }
:root[data-template='editorial'] body:not([data-current-page='creator']) .hero { min-height: 760px; padding: 4rem 0 6rem; }
:root[data-template='editorial'] body:not([data-current-page='creator']) .hero-grid { grid-template-columns: minmax(0, .84fr) minmax(360px, 1.16fr); gap: clamp(2rem, 6vw, 6rem); }
:root[data-template='editorial'] body:not([data-current-page='creator']) .hero-art { min-height: 640px; border-radius: 46px 46px 14px 46px; box-shadow: 0 28px 80px rgba(90, 26, 70, .28); }
:root[data-template='editorial'] body:not([data-current-page='creator']) .hero h1,
:root[data-template='editorial'] body:not([data-current-page='creator']) .section-heading h2,
:root[data-template='editorial'] body:not([data-current-page='creator']) .feature-copy h2 { font-family: Georgia, serif; letter-spacing: -.065em; }
:root[data-template='editorial'] body:not([data-current-page='creator']) .card,
:root[data-template='editorial'] body:not([data-current-page='creator']) .feature-copy,
:root[data-template='editorial'] body:not([data-current-page='creator']) .feature-photo,
:root[data-template='editorial'] body:not([data-current-page='creator']) .contact-copy,
:root[data-template='editorial'] body:not([data-current-page='creator']) .contact-form { border-radius: 30px; }
:root[data-template='editorial'] body:not([data-current-page='creator']) .manifest-banner,
:root[data-template='editorial'] body:not([data-current-page='creator']) .custom-public-block { border-radius: 34px; }
:root[data-template='editorial'] body:not([data-current-page='creator']) .metric-strip { border: 0; border-radius: 24px; background: color-mix(in srgb, var(--panel-strong) 72%, transparent); }
:root[data-template='editorial'] body:not([data-current-page='creator']) .metric { padding: 1.45rem 1rem; }

:root[data-template='utility'] body:not([data-current-page='creator']) .hero { min-height: auto; padding: 2.5rem 0 2rem; }
:root[data-template='utility'] body:not([data-current-page='creator']) .hero-grid { grid-template-columns: 1fr; gap: 1rem; }
:root[data-template='utility'] body:not([data-current-page='creator']) .hero-copy { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(230px, .65fr); column-gap: 2rem; align-items: end; }
:root[data-template='utility'] body:not([data-current-page='creator']) .hero-copy .eyebrow,
:root[data-template='utility'] body:not([data-current-page='creator']) .hero-copy h1,
:root[data-template='utility'] body:not([data-current-page='creator']) .hero-copy .kicker { grid-column: 1 / -1; }
:root[data-template='utility'] body:not([data-current-page='creator']) .hero-copy .hero-actions { grid-column: 1; }
:root[data-template='utility'] body:not([data-current-page='creator']) .hero-copy .hero-proof { grid-column: 2; justify-content: end; align-self: center; }
:root[data-template='utility'] body:not([data-current-page='creator']) .hero-art { min-height: 280px; border-radius: 8px; order: 2; }
:root[data-template='utility'] body:not([data-current-page='creator']) .hero-portrait-ghost { display: none; }
:root[data-template='utility'] body:not([data-current-page='creator']) .metric-strip { position: relative; z-index: 2; margin-top: -1rem; border: 1px solid var(--line-strong); background: var(--panel-strong); }
:root[data-template='utility'] body:not([data-current-page='creator']) .metric { padding: .95rem .8rem; }
:root[data-template='utility'] body:not([data-current-page='creator']) .card,
:root[data-template='utility'] body:not([data-current-page='creator']) .feature-copy,
:root[data-template='utility'] body:not([data-current-page='creator']) .feature-photo,
:root[data-template='utility'] body:not([data-current-page='creator']) .manifest-banner,
:root[data-template='utility'] body:not([data-current-page='creator']) .custom-public-block { border-radius: 8px; }
:root[data-template='utility'] body:not([data-current-page='creator']) .section { padding-top: 4.2rem; }
:root[data-template='utility'] body:not([data-current-page='creator']) .project-card,
:root[data-template='utility'] body:not([data-current-page='creator']) .project-card.featured,
:root[data-template='utility'] body:not([data-current-page='creator']) .project-card.tall { grid-column: span 4; }

@media (max-width: 900px) {
  .creator-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .front-editor-launcher { right: .7rem; }
  .front-editor-panel { right: .7rem; width: min(430px, calc(100vw - 1.4rem)); }
  :root[data-template='commerce'] body:not([data-current-page='creator']) .hero-grid,
  :root[data-template='plain'] body:not([data-current-page='creator']) .hero-grid,
  :root[data-template='editorial'] body:not([data-current-page='creator']) .hero-grid { grid-template-columns: 1fr; }
  :root[data-template='commerce'] body:not([data-current-page='creator']) .hero-copy { order: 1; }
  :root[data-template='commerce'] body:not([data-current-page='creator']) .hero-art,
  :root[data-template='editorial'] body:not([data-current-page='creator']) .hero-art { order: 2; min-height: 420px; }
  :root[data-template='utility'] body:not([data-current-page='creator']) .hero-copy { grid-template-columns: 1fr; }
  :root[data-template='utility'] body:not([data-current-page='creator']) .hero-copy .hero-actions,
  :root[data-template='utility'] body:not([data-current-page='creator']) .hero-copy .hero-proof { grid-column: auto; justify-content: start; }
  :root[data-template='commerce'] body:not([data-current-page='creator']) .project-card,
  :root[data-template='commerce'] body:not([data-current-page='creator']) .project-card.featured,
  :root[data-template='commerce'] body:not([data-current-page='creator']) .project-card.tall,
  :root[data-template='utility'] body:not([data-current-page='creator']) .project-card,
  :root[data-template='utility'] body:not([data-current-page='creator']) .project-card.featured,
  :root[data-template='utility'] body:not([data-current-page='creator']) .project-card.tall { grid-column: span 12; }
}

@media (max-width: 560px) {
  .creator-template-grid { grid-template-columns: 1fr; }
  .creator-panel-heading-actions { justify-content: start; }
  .creator-panel-meta { white-space: normal; }
  .front-editor-launcher { top: auto; right: .6rem; bottom: .7rem; width: 54px; min-height: 54px; border-radius: 999px; }
  .front-editor-launcher strong, .front-editor-launcher small { display: none; }
  .front-editor-panel { top: .6rem; right: .6rem; bottom: .6rem; width: calc(100vw - 1.2rem); border-radius: 14px; }
  .front-editor-actions { grid-template-columns: 1fr; }
  .front-editor-element-row { align-items: start; flex-direction: column; }
  .front-editor-row-actions { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .front-editor-panel, .front-editor-launcher, .creator-template-card { transition: none; }
}

/* Final front-editor visibility override: the creator entry should read as an action. */
.front-editor-launcher { display: flex; grid-template-columns: none; align-items: center; justify-content: center; width: auto; min-width: 136px; min-height: 54px; padding: .7rem .85rem; gap: .45rem; }
.front-editor-launcher span { flex: 0 0 auto; }
.front-editor-launcher strong { font-size: .68rem; white-space: nowrap; }
.front-editor-launcher small { font-size: .52rem; white-space: nowrap; }


/* V8 polish: route themes affect the full visual surface, not just the header. */
.card,
.feature-copy,
.software-copy,
.contact-copy,
.contact-form,
.control-panel,
.preview-panel,
.canvas-card,
.game-card,
.login-card,
.manifest-banner {
  background-color: var(--panel);
  border-color: var(--line);
}
.card,
.feature-copy,
.software-copy,
.contact-copy,
.manifest-banner {
  background-image: linear-gradient(145deg, var(--panel), var(--panel-strong));
}
.page-shell { position: relative; isolation: isolate; }
.page-shell::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: '';
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 8%, var(--accent-soft), transparent 28rem),
    radial-gradient(circle at 84% 24%, var(--glow-b), transparent 26rem),
    linear-gradient(180deg, var(--bg-deep), transparent 36rem);
  opacity: .74;
}
.hero h1 .gradient { padding-bottom: .12em; }
.manifest-home-shot { background-image: linear-gradient(145deg, rgba(3,8,18,.10), rgba(3,8,18,.72)), url('assets/work/manifest-login-live.png'); }
.manifest-engine-feature { background-image: linear-gradient(145deg, rgba(3,8,18,.08), rgba(3,8,18,.72)), url('assets/work/manifest-engine-dashboard.png'); }
.manifest-gallery-v2 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.manifest-capture { grid-column: span 6; padding: 0; overflow: hidden; }
.manifest-capture-featured { grid-column: span 12; }
.manifest-capture-image { min-height: 280px; overflow: hidden; background: var(--panel-strong); border-bottom: 1px solid var(--line); }
.manifest-capture-featured .manifest-capture-image { min-height: 460px; }
.manifest-capture-image img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; object-position: top center; }
.manifest-capture .project-body { min-height: 170px; }
.creator-canvas-size { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; padding: .65rem .75rem 0; }
.creator-canvas-size label { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; color: var(--dim); font: .58rem 'DM Mono', monospace; text-transform: uppercase; }
.creator-canvas-size input { width: 100%; accent-color: var(--accent); }
.creator-canvas-size strong { color: var(--accent); font-size: .58rem; }
.creator-canvas-stage { width: 100%; transition: width var(--motion-duration, 650ms) ease; }
.creator-mock-site[data-creator-mock-site] { transition: min-height var(--motion-duration, 650ms) ease; }
.site-footer { background: linear-gradient(180deg, color-mix(in srgb, var(--bg-deep) 72%, transparent), var(--bg-deep)); }
@media (max-width: 900px) {
  .manifest-capture, .manifest-capture-featured { grid-column: 1 / -1; }
  .manifest-capture-featured .manifest-capture-image { min-height: 280px; }
  .creator-canvas-size { grid-template-columns: 1fr; }
}


/* V8.2 — theme authority, technical display type, and lead inbox */
h1, h2, h3, h4,
.hero h1,
.page-intro h1,
.section-heading h2,
.feature-copy h2,
.contact-copy h2,
.creator-panel h1,
.creator-panel h2,
.creator-panel h3,
.creator-compact-header h1 {
  font-family: 'Oxanium', 'Manrope', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.035em;
}
.hero h1, .page-intro h1 { line-height: .98; }

/* The selected theme now owns the actual page canvas and surrounding surfaces. */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 78% 4%, var(--glow-a), transparent 32rem),
    radial-gradient(circle at 12% 62%, var(--glow-b), transparent 30rem),
    linear-gradient(180deg, var(--bg), var(--bg-deep));
  transition: background-color .35s ease, color .35s ease;
}
.page-shell::before {
  background:
    radial-gradient(circle at 14% 10%, var(--accent-soft), transparent 30rem),
    radial-gradient(circle at 88% 28%, var(--glow-b), transparent 28rem),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-deep) 88%, transparent), transparent 42rem);
  opacity: 1;
}
.card,
.feature-copy,
.software-copy,
.contact-copy,
.contact-form,
.manifest-banner,
.creator-panel,
.creator-canvas-card,
.niche-site-preview,
.login-card,
.canvas-card,
.game-card,
.theme-lab,
.warehouse-system,
.architecture-panel {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--panel) 94%, transparent),
    color-mix(in srgb, var(--panel-strong) 92%, transparent));
  border-color: var(--line);
}
.console,
.console-top,
.console-side,
.console-stat,
.pipeline-col,
.contact-method,
.login-tabs,
.theme-option,
.field input,
.field select,
.field textarea,
.creator-inline-select select,
.creator-mock-site,
.creator-mock-body {
  border-color: var(--line);
}
.console { background: var(--bg-deep); }
.console-top, .console-side, .console-stat, .pipeline-col,
.contact-method, .login-tabs, .theme-option,
.field input, .field select, .field textarea,
.creator-inline-select select {
  background: color-mix(in srgb, var(--panel-strong) 78%, transparent);
  color: var(--text);
}
.site-footer {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg-deep) 76%, transparent),
    var(--bg-deep));
}
.site-header { transition: background .35s ease, border-color .35s ease; }

.contact-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

.creator-leads-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--panel-strong) 78%, transparent);
}
.creator-leads-toolbar .eyebrow { margin: 0 0 .35rem; }
.creator-leads-toolbar strong { color: var(--text); }
.creator-leads-list { display: grid; gap: .85rem; margin-top: 1rem; }
.creator-lead-card {
  padding: 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
}
.creator-lead-card.status-contacted { border-left-color: var(--good); }
.creator-lead-card.status-closed { border-left-color: var(--dim); }
.creator-lead-card.status-archived { opacity: .68; border-left-color: var(--line-strong); }
.creator-lead-head { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.creator-lead-head h3 { margin: .3rem 0 .2rem; }
.creator-lead-head span, .creator-lead-head time { color: var(--dim); font-size: .7rem; }
.creator-lead-status {
  display: inline-flex;
  padding: .25rem .45rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--accent) !important;
  font: .55rem 'DM Mono', monospace;
  letter-spacing: .08em;
}
.creator-lead-contact { margin: .8rem 0; color: var(--accent); font: .68rem 'DM Mono', monospace; overflow-wrap: anywhere; }
.creator-lead-card p { margin-bottom: .8rem; white-space: pre-wrap; }
.creator-lead-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
.creator-lead-meta span { padding: .3rem .45rem; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); font: .58rem 'DM Mono', monospace; }
.creator-lead-actions { display: flex; flex-wrap: wrap; gap: .45rem; }

@media (max-width: 720px) {
  h1, .hero h1, .page-intro h1 { letter-spacing: -0.025em; }
  .creator-leads-toolbar, .creator-lead-head { flex-direction: column; align-items: stretch; }
  .creator-lead-head time { align-self: flex-start; }
}

/* V8.2.1 — FULL CANVAS THEME AUTHORITY
   The theme must visibly own the entire page, not only the header/accent chrome. */
body {
  background-color: var(--bg) !important;
  background-image:
    radial-gradient(circle at 76% 2%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 34rem),
    radial-gradient(circle at 10% 58%, color-mix(in srgb, var(--violet) 18%, transparent), transparent 32rem),
    linear-gradient(145deg,
      color-mix(in srgb, var(--bg) 76%, var(--accent) 24%) 0%,
      var(--bg) 42%,
      var(--bg-deep) 100%) !important;
  background-attachment: fixed !important;
}

/* A subtle page wash makes the selected palette visible through the open space
   between sections, cards, and galleries. */
.page-shell {
  border-radius: 0 0 calc(var(--radius) * 1.35) calc(var(--radius) * 1.35);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 84%, var(--accent) 16%),
      color-mix(in srgb, var(--bg) 94%, transparent) 34rem,
      color-mix(in srgb, var(--bg-deep) 82%, transparent) 100%) !important;
}
.page-shell::before {
  background:
    radial-gradient(circle at 14% 8%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 30rem),
    radial-gradient(circle at 88% 30%, color-mix(in srgb, var(--violet) 15%, transparent), transparent 28rem),
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg-deep) 28%, transparent)) !important;
}

/* Major public surfaces inherit the active palette instead of retaining the
   original Signal/dark-blue paint. */
.card,
.feature-copy,
.software-copy,
.contact-copy,
.contact-form,
.control-panel,
.preview-panel,
.canvas-card,
.game-card,
.login-card,
.manifest-banner,
.theme-lab,
.warehouse-system,
.architecture-panel,
.niche-stage-shell,
.niche-card,
.niche-site-preview,
.creator-panel,
.creator-canvas-card,
.creator-sidebar,
.creator-section-row,
.creator-create-card,
.creator-block-card,
.creator-media-card,
.creator-lead-card {
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--panel) 84%, var(--accent) 16%),
      color-mix(in srgb, var(--panel-strong) 92%, var(--bg-deep) 8%)) !important;
  border-color: var(--line) !important;
}

.metric-strip,
.console,
.console-top,
.console-side,
.console-stat,
.pipeline-col,
.contact-method,
.login-tabs,
.field input,
.field select,
.field textarea,
.creator-inline-select select,
.creator-mock-site,
.creator-mock-body,
.creator-leads-toolbar {
  background-color: color-mix(in srgb, var(--panel-strong) 86%, var(--accent) 14%) !important;
  border-color: var(--line) !important;
}

/* The footer should complete the page palette instead of returning to Signal. */
.site-footer {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 82%, var(--accent) 18%),
      var(--bg-deep)) !important;
  border-top-color: var(--line) !important;
}

/* Keep image/demo surfaces intentionally image-driven while making their trim
   respond to the theme. */
.hero-art,
.feature-photo,
.project-image,
.manifest-capture-image,
.builder-preview,
.preview-site,
.listing-preview,
.builder-card-preview {
  border-color: var(--line-strong) !important;
}

/* White is the one preset where the page must unmistakably become light. */
:root[data-theme='white'] body {
  background-image:
    radial-gradient(circle at 76% 2%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 34rem),
    radial-gradient(circle at 10% 58%, color-mix(in srgb, var(--violet) 10%, transparent), transparent 32rem),
    linear-gradient(145deg, #ffffff 0%, var(--bg) 48%, var(--bg-deep) 100%) !important;
}
:root[data-theme='white'] .page-shell {
  background: linear-gradient(180deg, #ffffff, var(--bg) 42%, var(--bg-deep)) !important;
}

body,
.page-shell,
.card,
.feature-copy,
.software-copy,
.contact-copy,
.contact-form,
.manifest-banner,
.site-footer,
.creator-panel {
  transition: background-color .32s ease, background .32s ease, border-color .32s ease, color .32s ease;
}

/* ================================================================
   V9 / BLACKLINE EDITORIAL SYSTEM
   One canvas across every route + simplified Creator workflow.
   This layer intentionally overrides the legacy per-page paint.
   ================================================================ */

:root {
  --font-body-v9: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  --font-display-v9: "Bahnschrift SemiCondensed", "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  --font-mono-v9: Consolas, "SFMono-Regular", "Liberation Mono", monospace;
  --v9-cut: 8px;
  --v9-shadow: 0 28px 80px rgba(0,0,0,.28);
}

html { background: var(--bg-deep); }
body {
  min-height: 100vh;
  color: var(--text);
  font-family: var(--font-body-v9) !important;
  background:
    linear-gradient(90deg, transparent 0 49.92%, color-mix(in srgb, var(--line) 38%, transparent) 50%, transparent 50.08%) 0 0 / 72px 72px,
    linear-gradient(0deg, transparent 0 49.92%, color-mix(in srgb, var(--line) 24%, transparent) 50%, transparent 50.08%) 0 0 / 72px 72px,
    radial-gradient(circle at 76% 7%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 34rem),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%) !important;
  background-attachment: fixed !important;
}
body::before,
body::after,
.ambient,
.pointer-glow { display: none !important; }

h1, h2, h3, h4, h5, h6,
.brand-copy,
.btn,
.nav-cta,
.primary-nav a {
  font-family: var(--font-display-v9) !important;
}
.mono,
.eyebrow,
.tag,
.form-status,
.story-issue,
.comic-kicker,
.inventory-live,
.creator-simple-header .creator-simple-kicker,
.creator-simple-question > span {
  font-family: var(--font-mono-v9) !important;
}

/* The body owns the canvas. The route shell no longer paints a second rectangle. */
.page-shell,
.page-shell::before {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.page-shell::before { display: none !important; }
.page-shell { padding-top: clamp(2rem, 4vw, 4.5rem); padding-bottom: clamp(5rem, 8vw, 8rem); }
.shell { width: min(var(--max, 1240px), calc(100% - clamp(28px, 5vw, 72px))) !important; }
body[data-current-page='creator'] .shell { width: min(100% - 24px, 1660px) !important; }

/* Public theme picker is intentionally retired; visual direction lives in Creator. */
.theme-shelf,
.icon-button[data-theme-toggle] { display: none !important; }

.site-header {
  border-bottom: 1px solid var(--line) !important;
  background: color-mix(in srgb, var(--bg-deep) 88%, transparent) !important;
  backdrop-filter: blur(18px) saturate(.8);
  box-shadow: 0 8px 36px rgba(0,0,0,.12);
}
.nav-wrap { min-height: 72px; gap: 1.2rem; }
.brand { gap: .65rem; }
.brand-mark {
  width: 38px; height: 38px;
  border: 1px solid var(--line-strong) !important;
  border-radius: 5px !important;
  color: var(--bg-deep) !important;
  background: var(--accent) !important;
  box-shadow: none !important;
  font: 800 .82rem var(--font-display-v9) !important;
}
.brand-copy {
  color: var(--text) !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  line-height: 1.05;
}
.brand-copy small {
  margin-top: .28rem;
  color: var(--accent) !important;
  font: 700 .55rem var(--font-mono-v9) !important;
  letter-spacing: .2em !important;
}
.primary-nav { gap: clamp(.45rem, 1vw, .9rem) !important; }
.primary-nav a {
  position: relative;
  padding: .5rem .2rem !important;
  color: var(--muted) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .015em;
}
.primary-nav a::after {
  position: absolute; left: .2rem; right: .2rem; bottom: 1px;
  height: 2px; content: ''; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .18s ease;
}
.primary-nav a:hover,
.primary-nav a.active { color: var(--text) !important; }
.primary-nav a:hover::after,
.primary-nav a.active::after { transform: scaleX(1); }
.nav-tools { gap: .7rem; }
.nav-cta,
.btn {
  border-radius: 4px !important;
  box-shadow: none !important;
  font-weight: 800 !important;
  letter-spacing: .015em;
}
.nav-cta {
  padding: .75rem 1rem !important;
  color: var(--bg-deep) !important;
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
}
.btn { min-height: 44px; }
.btn-primary {
  color: var(--bg-deep) !important;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}
.btn-primary:hover,
.nav-cta:hover { background: var(--hot) !important; border-color: var(--hot) !important; transform: translateY(-2px); }
.btn-secondary {
  color: var(--text) !important;
  background: color-mix(in srgb, var(--panel-strong) 82%, transparent) !important;
  border-color: var(--line-strong) !important;
}
.btn-secondary:hover { background: var(--accent-soft) !important; border-color: var(--accent) !important; }
.btn-quiet {
  color: var(--muted) !important;
  background: transparent !important;
  border-color: var(--line) !important;
}
.btn-quiet:hover { color: var(--text) !important; border-color: var(--line-strong) !important; }

/* Global editorial rhythm */
.page { animation: v9-page-in .34s ease both; }
@keyframes v9-page-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.eyebrow {
  color: var(--accent) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
}
h1, h2, h3 { color: var(--text); letter-spacing: -.035em !important; }
h1 { font-weight: 800 !important; line-height: .9 !important; }
h2 { font-weight: 800 !important; line-height: .98 !important; }
h3 { font-weight: 750 !important; line-height: 1.05 !important; }
p { color: var(--muted); }
.section { padding-top: clamp(5rem, 8vw, 8rem) !important; margin-bottom: 0 !important; }
.section-heading { border-top: 1px solid var(--line); padding-top: 1rem; align-items: start !important; }
.section-heading h2 { max-width: 850px; font-size: clamp(2.2rem, 4.5vw, 4.7rem); }
.section-heading p { max-width: 720px; font-size: clamp(.98rem, 1.35vw, 1.12rem); }
.section-link { color: var(--accent) !important; font-family: var(--font-mono-v9) !important; }

.card,
.control-panel,
.preview-panel,
.canvas-card,
.game-card,
.login-card,
.contact-copy,
.contact-form,
.manifest-banner,
.theme-lab,
.warehouse-system,
.architecture-panel,
.niche-stage-shell,
.niche-card,
.niche-site-preview,
.creator-panel,
.creator-sidebar,
.creator-gate-card {
  border-radius: var(--v9-cut) !important;
  border: 1px solid var(--line) !important;
  background: color-mix(in srgb, var(--panel) 94%, transparent) !important;
  box-shadow: none !important;
}
.card:hover { border-color: var(--line-strong) !important; transform: translateY(-2px); }
.card-icon {
  border-radius: 3px !important;
  color: var(--bg-deep) !important;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: none !important;
}
.tag {
  border-radius: 999px !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
  background: transparent !important;
}
.field input,
.field select,
.field textarea,
.creator-inline-select select {
  border-radius: 4px !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
  background: color-mix(in srgb, var(--bg-deep) 55%, var(--panel-strong) 45%) !important;
  box-shadow: none !important;
}
.field input:focus,
.field select:focus,
.field textarea:focus,
.creator-inline-select select:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent) !important;
  outline-offset: 1px;
  border-color: var(--accent) !important;
}

/* Generic route introductions now belong to the same system as home. */
.page-intro {
  position: relative;
  padding: clamp(2.5rem, 5vw, 5.4rem) 0 clamp(3rem, 6vw, 6rem) !important;
  border-bottom: 1px solid var(--line);
}
.page-intro::before {
  position: absolute; right: 0; top: 0;
  content: attr(data-route-label);
  color: var(--dim);
  font: .65rem var(--font-mono-v9);
}
.page-intro h1 { max-width: 980px !important; font-size: clamp(3.5rem, 8vw, 8rem) !important; }
.page-intro .kicker { max-width: 760px; font-size: clamp(1rem, 1.6vw, 1.25rem); }

/* ---------------- Home / story-driven case file ---------------- */
.story-hero { min-height: auto !important; padding: clamp(2rem, 4vw, 4rem) 0 clamp(4rem, 7vw, 6.5rem) !important; }
.story-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, .65fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: center;
}
.story-hero-copy { position: relative; }
.story-issue {
  display: block;
  margin: 1.1rem 0 2rem;
  color: var(--dim);
  font-size: .64rem;
  letter-spacing: .16em;
}
.story-hero h1 {
  margin: 0;
  max-width: 970px;
  font-size: clamp(4rem, 8.6vw, 9rem) !important;
  letter-spacing: -.07em !important;
}
.story-hero h1 span,
.story-hero h1 em { display: block; }
.story-hero h1 em {
  color: var(--accent);
  font-style: normal;
  text-shadow: none;
}
.story-hero .kicker {
  max-width: 700px;
  margin-top: 2rem;
  font-size: clamp(1.02rem, 1.5vw, 1.3rem);
  line-height: 1.55;
}
.story-credentials {
  display: flex; flex-wrap: wrap; gap: .45rem 1.1rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font: .62rem var(--font-mono-v9);
  letter-spacing: .11em;
}
.story-portrait { position: relative; padding: 0 0 3.8rem 1.2rem; }
.story-portrait-frame {
  position: relative;
  min-height: 570px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--panel-strong);
  box-shadow: var(--v9-shadow);
}
.story-portrait-frame::before {
  position: absolute; z-index: 2; inset: 0; content: '';
  background: linear-gradient(180deg, transparent 54%, rgba(0,0,0,.66));
  pointer-events: none;
}
.story-portrait-frame::after {
  position: absolute; z-index: 3; top: 16px; left: 16px;
  width: 72px; height: 72px; content: '';
  border-top: 2px solid var(--accent); border-left: 2px solid var(--accent);
}
.story-portrait-frame img { width: 100%; height: 100%; min-height: 570px; object-fit: cover; object-position: center 12%; filter: saturate(.62) contrast(1.1) brightness(.83); }
.story-portrait-caption {
  position: absolute; z-index: 4; left: 0; right: 1rem; bottom: 3.9rem;
  display: flex; align-items: end; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-deep) 90%, transparent);
  backdrop-filter: blur(12px);
}
.story-portrait-caption b,
.story-portrait-caption span { display: block; }
.story-portrait-caption b { font: 800 .78rem var(--font-display-v9); color: var(--text); }
.story-portrait-caption span,
.story-portrait-caption strong { color: var(--accent); font: 700 .58rem var(--font-mono-v9); letter-spacing: .08em; }
.story-note {
  position: absolute; z-index: 5; right: -1.5rem; bottom: 0;
  width: min(290px, 78%);
  padding: 1rem 1.1rem;
  color: #170f08;
  background: var(--accent);
  transform: rotate(-2deg);
  box-shadow: 0 12px 35px rgba(0,0,0,.25);
}
.story-note small { display: block; margin-bottom: .45rem; font: 800 .56rem var(--font-mono-v9); letter-spacing: .1em; opacity: .72; }
.story-note b { display: block; font: 800 1rem/1.15 var(--font-display-v9); }

.story-problem-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 58%, transparent);
}
.story-problem-strip article { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.6rem; border-right: 1px solid var(--line); }
.story-problem-strip article:last-child { border-right: 0; }
.story-problem-strip article > b { color: var(--accent); font: 800 2rem var(--font-display-v9); }
.story-problem-strip span { display: block; margin-bottom: .4rem; color: var(--dim); font: .58rem var(--font-mono-v9); letter-spacing: .12em; }
.story-problem-strip strong { display: block; color: var(--text); font: 700 1rem/1.3 var(--font-display-v9); }

.comic-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.comic-panel {
  position: relative;
  padding: .7rem .7rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  overflow: hidden;
}
.comic-panel:nth-child(2) { transform: translateY(2.4rem); }
.comic-frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1px solid var(--line); background: #090908; }
.comic-frame::after {
  position: absolute; inset: 0; content: '';
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay; pointer-events: none;
}
.comic-frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.08); transition: transform .45s ease, filter .45s ease; }
.comic-panel:hover img { transform: scale(1.025); filter: saturate(.9) contrast(1.08); }
.comic-kicker { display: block; margin: 1.15rem .55rem .55rem; color: var(--accent); font-size: .58rem; letter-spacing: .12em; }
.comic-panel h3 { margin: 0 .55rem .55rem; font-size: clamp(1.55rem, 2.4vw, 2.35rem); }
.comic-panel p { margin: 0 .55rem; font-size: .88rem; }

.manifest-story {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  min-height: 720px;
  padding-bottom: 1rem;
}
.manifest-story-copy { align-self: center; }
.manifest-story-copy h2 { margin: .8rem 0 1.2rem; font-size: clamp(2.8rem, 5.2vw, 5.6rem); }
.manifest-story-copy p { max-width: 650px; font-size: 1.05rem; }
.manifest-story-stack { position: relative; min-height: 620px; }
.manifest-story-shot {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #050505;
  box-shadow: 0 28px 70px rgba(0,0,0,.38);
}
.manifest-story-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.manifest-story-shot figcaption {
  position: absolute; left: .75rem; bottom: .75rem;
  padding: .45rem .55rem;
  color: #160f08;
  background: var(--accent);
  font: 800 .58rem var(--font-mono-v9);
  letter-spacing: .1em;
}
.manifest-story-shot.shot-a { width: 76%; height: 58%; left: 0; top: 1rem; transform: rotate(-2deg); z-index: 1; }
.manifest-story-shot.shot-b { width: 68%; height: 52%; right: 0; top: 8rem; transform: rotate(2.2deg); z-index: 2; }
.manifest-story-shot.shot-c { width: 72%; height: 47%; left: 12%; bottom: 0; transform: rotate(-.8deg); z-index: 3; }

.story-service-grid .card { min-height: 280px; }
.ops-teaser {
  display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(380px,1.15fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding: clamp(1.6rem, 4vw, 3.4rem);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
}
.ops-teaser-copy h2 { margin: .65rem 0 1rem; font-size: clamp(2.6rem, 4.4vw, 4.8rem); }
.ops-teaser-ui { border: 1px solid var(--line-strong); background: var(--bg-deep); box-shadow: var(--v9-shadow); }
.ops-teaser-top,
.ops-row { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; padding: .9rem 1rem; border-bottom: 1px solid var(--line); }
.ops-teaser-top { grid-template-columns: 1fr auto; color: var(--dim); font: .6rem var(--font-mono-v9); letter-spacing: .08em; }
.ops-row:last-child { border-bottom: 0; }
.ops-row span { color: var(--text); font-weight: 650; }
.ops-row b { color: var(--text); font: 800 1.3rem var(--font-display-v9); }
.ops-row i { min-width: 68px; color: var(--good); font: normal 700 .55rem var(--font-mono-v9); text-align: right; letter-spacing: .06em; }
.ops-row.low i { color: var(--danger); }
.story-contact { padding: clamp(2rem, 5vw, 4.5rem) !important; border-left: 4px solid var(--accent) !important; }
.story-contact h2 { max-width: 980px; font-size: clamp(2.8rem, 6vw, 6.2rem); }

/* ---------------- Business software / inventory proof ---------------- */
.software-story-grid {
  display: grid;
  grid-template-columns: minmax(270px, .65fr) minmax(0, 1.35fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.software-story-copy h2 { font-size: clamp(2.8rem, 5vw, 5.3rem); margin: .7rem 0 1rem; }
.story-callout { margin-top: 2rem; padding: 1rem; border-left: 3px solid var(--accent); background: var(--accent-soft); }
.story-callout b,
.story-callout span { display: block; }
.story-callout b { margin-bottom: .45rem; color: var(--accent); font: .58rem var(--font-mono-v9); letter-spacing: .11em; }
.story-callout span { color: var(--text); font-weight: 700; }
.inventory-app {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  box-shadow: var(--v9-shadow);
}
.inventory-app-top { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem 1.15rem; border-bottom: 1px solid var(--line); background: var(--bg-deep); }
.inventory-app-top strong { display: block; margin-top: .25rem; color: var(--text); font: 800 1.25rem var(--font-display-v9); }
.inventory-live { color: var(--accent); font-size: .58rem; letter-spacing: .09em; }
.inventory-toolbar { display: grid; grid-template-columns: minmax(180px,1fr) auto; gap: 1rem; align-items: end; padding: 1rem; border-bottom: 1px solid var(--line); }
.inventory-search span { display: block; margin-bottom: .4rem; color: var(--dim); font: .58rem var(--font-mono-v9); letter-spacing: .08em; text-transform: uppercase; }
.inventory-search input { width: 100%; min-height: 42px; padding: .65rem .75rem; color: var(--text); border: 1px solid var(--line); border-radius: 3px; background: var(--bg-deep); }
.inventory-stats { display: flex; border: 1px solid var(--line); }
.inventory-stats div { min-width: 82px; padding: .55rem .7rem; border-right: 1px solid var(--line); }
.inventory-stats div:last-child { border-right: 0; }
.inventory-stats small { display: block; color: var(--dim); font: .52rem var(--font-mono-v9); text-transform: uppercase; }
.inventory-stats b { display: block; margin-top: .12rem; color: var(--text); font: 800 1.2rem var(--font-display-v9); }
.inventory-table-wrap { overflow-x: auto; }
.inventory-table { width: 100%; min-width: 630px; border-collapse: collapse; }
.inventory-table th,
.inventory-table td { padding: .85rem 1rem; border-bottom: 1px solid var(--line); text-align: left; }
.inventory-table th { color: var(--dim); background: color-mix(in srgb, var(--panel-strong) 70%, transparent); font: 700 .55rem var(--font-mono-v9); letter-spacing: .08em; text-transform: uppercase; }
.inventory-table td { color: var(--muted); font-size: .84rem; }
.inventory-table td:first-child { color: var(--text); font-weight: 700; }
.inventory-status-pill { display: inline-flex; padding: .35rem .45rem; border: 1px solid var(--line); border-radius: 999px; color: var(--good); font: .54rem var(--font-mono-v9); letter-spacing: .06em; }
.inventory-status-pill.low { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.inventory-adjust { display: flex; gap: .35rem; }
.inventory-adjust button { width: 30px; height: 30px; color: var(--text); border: 1px solid var(--line); border-radius: 3px; background: transparent; cursor: pointer; }
.inventory-adjust button:hover { color: var(--bg-deep); background: var(--accent); border-color: var(--accent); }
.inventory-add-form { display: grid; grid-template-columns: minmax(180px,1fr) 110px 130px auto; gap: .6rem; padding: 1rem; border-top: 1px solid var(--line); }
.inventory-add-form input { min-width: 0; min-height: 42px; padding: .65rem .7rem; color: var(--text); border: 1px solid var(--line); border-radius: 3px; background: var(--bg-deep); }
.inventory-app > .form-status { padding: 0 1rem 1rem; }

/* ---------------- Simplified Creator ---------------- */
.creator-simple-page { padding: 1rem 0 3rem; }
.creator-simple-header {
  display: flex; justify-content: space-between; gap: 2rem; align-items: end;
  margin-bottom: 1.2rem;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  background: color-mix(in srgb, var(--panel) 95%, transparent);
}
.creator-simple-header h1 { margin: .35rem 0 .25rem; font-size: clamp(2.2rem, 4vw, 4rem); }
.creator-simple-header p { max-width: 780px; margin: 0; }
.creator-simple-kicker { color: var(--accent); font-size: .6rem; letter-spacing: .12em; }
.creator-simple-header-actions { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: flex-end; }
.creator-simple-layout { display: grid; grid-template-columns: 245px minmax(0,1fr); gap: 1rem; align-items: start; }
.creator-simple-nav {
  position: sticky; top: 88px;
  display: grid; gap: .4rem;
  padding: .7rem;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
}
.creator-simple-nav button {
  display: grid; grid-template-columns: 28px 1fr; gap: .65rem; align-items: center;
  width: 100%; min-height: 44px; padding: .65rem .7rem;
  color: var(--muted); text-align: left;
  border: 1px solid transparent; border-radius: 3px;
  background: transparent; cursor: pointer;
  font: 700 .8rem var(--font-body-v9);
}
.creator-simple-nav button span { color: var(--dim); font: .55rem var(--font-mono-v9); }
.creator-simple-nav button:hover { color: var(--text); background: var(--panel-soft); }
.creator-simple-nav button.active { color: var(--text); border-color: var(--line-strong); background: var(--accent-soft); }
.creator-simple-nav .creator-simple-nav-divider { height: 1px; margin: .35rem 0; background: var(--line); }
.creator-simple-main { min-width: 0; }
.creator-simple-panel {
  display: none;
  min-height: 630px;
  padding: clamp(1.2rem, 3vw, 2.3rem);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--panel) 95%, transparent);
}
.creator-simple-panel.active { display: block; animation: v9-page-in .22s ease both; }
.creator-simple-question { max-width: 900px; margin-bottom: 1.7rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.creator-simple-question > span { color: var(--accent); font-size: .62rem; letter-spacing: .14em; }
.creator-simple-question h2 { margin: .45rem 0 .65rem; font-size: clamp(2.2rem, 4vw, 4.1rem); }
.creator-simple-question p { max-width: 760px; margin: 0; }
.creator-simple-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.creator-simple-form-grid .field.full { grid-column: 1 / -1; }
.creator-simple-actions { display: flex; justify-content: space-between; gap: .7rem; flex-wrap: wrap; margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.creator-simple-route-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .55rem; margin-bottom: 1.2rem; }
.creator-simple-route { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .8rem .9rem; border: 1px solid var(--line); background: var(--panel-soft); }
.creator-simple-route span b,
.creator-simple-route span small { display: block; }
.creator-simple-route span b { color: var(--text); font-size: .84rem; }
.creator-simple-route span small { margin-top: .16rem; color: var(--dim); font-size: .7rem; }
.creator-simple-route input,
.creator-simple-toggle input { accent-color: var(--accent); width: 18px; height: 18px; }
.creator-simple-page-edit { margin-top: 1.2rem; padding: 1rem; border: 1px solid var(--line); border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--bg-deep) 38%, transparent); }
.creator-simple-page-edit-head { display: flex; justify-content: space-between; gap: 1rem; align-items: end; margin-bottom: 1rem; }
.creator-simple-page-edit-head strong { display: block; color: var(--text); font: 800 1.2rem var(--font-display-v9); }
.creator-simple-theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .75rem; }
.creator-simple-theme {
  min-height: 180px; padding: 1rem; text-align: left;
  color: var(--muted); border: 1px solid var(--line); border-radius: 4px;
  background: var(--panel-soft); cursor: pointer;
}
.creator-simple-theme::before { display: block; width: 100%; height: 54px; margin-bottom: 1rem; content: ''; border: 1px solid rgba(255,255,255,.14); }
.creator-simple-theme[data-simple-theme='blackline']::before { background: linear-gradient(115deg,#090908 0 68%,#f0a34d 68% 84%,#d76b32 84%); }
.creator-simple-theme[data-simple-theme='bone']::before { background: linear-gradient(115deg,#eee7da 0 68%,#b84c2c 68% 84%,#1d1915 84%); }
.creator-simple-theme[data-simple-theme='oxblood']::before { background: linear-gradient(115deg,#100909 0 68%,#df795f 68% 84%,#f0ad6d 84%); }
.creator-simple-theme b,
.creator-simple-theme small { display: block; }
.creator-simple-theme b { color: var(--text); font: 800 1.2rem var(--font-display-v9); }
.creator-simple-theme small { margin-top: .45rem; line-height: 1.4; }
.creator-simple-theme:hover,
.creator-simple-theme.active { border-color: var(--accent); background: var(--accent-soft); }
.creator-simple-toggle { display: flex; gap: .8rem; align-items: start; margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); }
.creator-simple-toggle span b,
.creator-simple-toggle span small { display: block; }
.creator-simple-toggle span b { color: var(--text); }
.creator-simple-toggle span small { margin-top: .3rem; color: var(--dim); }
.creator-simple-review { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.creator-simple-review > div { padding: 1rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.creator-simple-review small,
.creator-simple-review b { display: block; }
.creator-simple-review small { color: var(--dim); font: .56rem var(--font-mono-v9); letter-spacing: .08em; text-transform: uppercase; }
.creator-simple-review b { margin-top: .35rem; color: var(--text); font-size: .95rem; }
.creator-simple-review-actions,
.creator-simple-backup-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.2rem; }
.creator-simple-data { margin-top: 1.2rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.creator-simple-data summary { color: var(--muted); cursor: pointer; }
.creator-simple-data .creator-json { margin-top: 1rem; }

/* Creator login inherits the editorial system instead of the old CMS look. */
.creator-gate { min-height: 70vh; }
.creator-gate-card { border-left: 4px solid var(--accent) !important; }
.creator-gate-card h1 { font-size: clamp(3rem, 6vw, 6rem) !important; }

/* Footer closes the page with the same ink/paper system. */
.site-footer {
  border-top: 1px solid var(--line) !important;
  background: color-mix(in srgb, var(--bg-deep) 96%, transparent) !important;
}
.footer-label { color: var(--accent) !important; font-family: var(--font-mono-v9) !important; }
.footer-bottom { font-family: var(--font-mono-v9) !important; }

/* Bone is deliberately editorial rather than sterile white. */
:root[data-theme='bone'] body {
  background:
    linear-gradient(90deg, transparent 0 49.92%, rgba(29,25,21,.05) 50%, transparent 50.08%) 0 0 / 72px 72px,
    linear-gradient(0deg, transparent 0 49.92%, rgba(29,25,21,.035) 50%, transparent 50.08%) 0 0 / 72px 72px,
    linear-gradient(180deg, #f2ebdf, #e6ddce) !important;
}
:root[data-theme='bone'] .site-header { background: rgba(238,231,218,.93) !important; }
:root[data-theme='bone'] .story-portrait-caption { background: rgba(245,239,228,.92); }
:root[data-theme='bone'] .story-note,
:root[data-theme='bone'] .btn-primary,
:root[data-theme='bone'] .nav-cta { color: #fff8ef !important; }
:root[data-theme='bone'] .story-portrait-frame img { filter: saturate(.7) contrast(1.03) brightness(.94); }

@media (max-width: 1180px) {
  .primary-nav { gap: .35rem !important; }
  .primary-nav a { font-size: .66rem !important; }
  .nav-cta { padding-inline: .75rem !important; }
  .story-hero-grid { grid-template-columns: minmax(0,1fr) minmax(300px,.62fr); gap: 2.5rem; }
  .story-hero h1 { font-size: clamp(4rem, 8vw, 7.6rem) !important; }
  .story-portrait-frame,
  .story-portrait-frame img { min-height: 500px; }
}

@media (max-width: 980px) {
  .story-hero-grid,
  .manifest-story,
  .ops-teaser,
  .software-story-grid { grid-template-columns: 1fr; }
  .story-portrait { max-width: 650px; padding-left: 0; }
  .story-note { right: -.5rem; }
  .story-problem-strip { grid-template-columns: 1fr; }
  .story-problem-strip article { border-right: 0; border-bottom: 1px solid var(--line); }
  .story-problem-strip article:last-child { border-bottom: 0; }
  .comic-grid { grid-template-columns: 1fr 1fr; }
  .comic-panel:nth-child(2) { transform: none; }
  .comic-panel:last-child { grid-column: 1 / -1; max-width: 70%; }
  .manifest-story { min-height: auto; }
  .manifest-story-stack { min-height: 540px; }
  .ops-teaser-ui { max-width: 720px; }
  .creator-simple-layout { grid-template-columns: 1fr; }
  .creator-simple-nav { position: static; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
  .creator-simple-nav .creator-simple-nav-divider { display: none; }
  .creator-simple-nav button { grid-template-columns: 22px 1fr; }
}

@media (max-width: 760px) {
  .shell { width: calc(100% - 28px) !important; }
  body[data-current-page='creator'] .shell { width: calc(100% - 20px) !important; }
  .site-header { backdrop-filter: blur(14px); }
  .nav-wrap { min-height: 64px; }
  .brand-copy { font-size: .72rem !important; }
  .nav-tools .nav-cta { display: none; }
  .menu-toggle { display: inline-flex !important; border-radius: 3px !important; font-family: var(--font-mono-v9) !important; }
  .primary-nav.open { background: color-mix(in srgb, var(--bg-deep) 97%, transparent) !important; border: 1px solid var(--line) !important; border-radius: 3px !important; }
  .primary-nav.open a { font-size: .8rem !important; }
  .page-shell { padding-top: 1.8rem; }
  .section { padding-top: 4.2rem !important; }
  .section-heading { display: block !important; }
  .section-heading > .mono,
  .section-heading > .section-link { display: inline-block; margin-top: 1rem; }
  .story-hero { padding-top: .5rem !important; }
  .story-hero h1 { font-size: clamp(3.55rem, 17vw, 6.1rem) !important; }
  .story-issue { margin-bottom: 1.5rem; }
  .story-hero .kicker { font-size: 1rem; }
  .story-credentials { gap: .45rem .75rem; }
  .story-portrait { padding-bottom: 3rem; }
  .story-portrait-frame,
  .story-portrait-frame img { min-height: 440px; }
  .story-portrait-caption { right: 0; bottom: 3.2rem; }
  .story-note { right: -.2rem; width: 86%; }
  .comic-grid { grid-template-columns: 1fr; }
  .comic-panel:last-child { grid-column: auto; max-width: none; }
  .manifest-story-stack { min-height: 450px; }
  .manifest-story-shot.shot-a { width: 88%; height: 54%; }
  .manifest-story-shot.shot-b { width: 79%; height: 48%; top: 7rem; }
  .manifest-story-shot.shot-c { width: 84%; height: 43%; left: 7%; }
  .ops-teaser { padding: 1.2rem; }
  .inventory-toolbar { grid-template-columns: 1fr; }
  .inventory-stats { width: 100%; }
  .inventory-stats div { flex: 1; min-width: 0; }
  .inventory-add-form { grid-template-columns: 1fr 1fr; }
  .inventory-add-form #inventory-name { grid-column: 1 / -1; }
  .inventory-add-form .btn { grid-column: 1 / -1; }
  .creator-simple-header { display: block; }
  .creator-simple-header-actions { justify-content: flex-start; margin-top: 1rem; }
  .creator-simple-nav { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .creator-simple-form-grid,
  .creator-simple-route-list,
  .creator-simple-theme-grid,
  .creator-simple-review { grid-template-columns: 1fr; }
  .creator-simple-form-grid .field.full { grid-column: auto; }
  .creator-simple-panel { min-height: 0; padding: 1rem; }
  .creator-simple-page-edit-head { display: block; }
  .creator-simple-page-edit-head .field { margin-top: .8rem; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

@media (max-width: 480px) {
  .shell { width: calc(100% - 20px) !important; }
  .brand-mark { width: 34px; height: 34px; }
  .story-hero h1 { font-size: clamp(3.1rem, 17vw, 5rem) !important; }
  .story-portrait-frame,
  .story-portrait-frame img { min-height: 380px; }
  .story-portrait-caption { align-items: start; flex-direction: column; gap: .35rem; }
  .story-note { font-size: .9rem; }
  .story-problem-strip article { padding: 1.1rem; }
  .ops-teaser-top,
  .ops-row { gap: .55rem; padding-inline: .7rem; }
  .ops-row i { min-width: 58px; }
  .manifest-story-stack { min-height: 380px; }
  .inventory-add-form { grid-template-columns: 1fr; }
  .inventory-add-form #inventory-name,
  .inventory-add-form .btn { grid-column: auto; }
  .creator-simple-nav { grid-template-columns: 1fr 1fr; }
  .creator-simple-nav button { grid-template-columns: 20px 1fr; padding: .55rem; font-size: .72rem; }
  .hero-actions .btn { width: 100%; justify-content: space-between; }
  .grid-4 { grid-template-columns: 1fr !important; }
}

/* Small Creator markup alignment fixes for the V9 five-answer workspace. */
.creator-simple-header .creator-header-actions { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; justify-content: flex-end; }
.creator-simple-nav > .creator-sidebar-label { grid-column: 1 / -1; padding: .35rem .55rem .15rem; color: var(--dim); font: 700 .54rem var(--font-mono-v9); letter-spacing: .14em; }
.creator-simple-nav button > b { color: var(--accent); font: 800 .75rem var(--font-display-v9); }
.creator-simple-nav button > span { display: block; color: inherit; font: inherit !important; letter-spacing: 0 !important; }
.creator-simple-nav button > span small { display: block; margin-top: .14rem; color: var(--dim); font-size: .62rem; font-weight: 500; }
.creator-simple-route > a { flex: 0 0 auto; color: var(--accent); font: 700 .58rem var(--font-mono-v9); text-decoration: none; }
.creator-simple-route > a:hover { text-decoration: underline; }
.creator-simple-review > article { padding: 1rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.creator-simple-review > article > span,
.creator-simple-review > article > b,
.creator-simple-review > article > small { display: block; }
.creator-simple-review > article > span { color: var(--dim); font: .56rem var(--font-mono-v9); letter-spacing: .08em; text-transform: uppercase; }
.creator-simple-review > article > b { margin-top: .35rem; color: var(--text); font-size: .95rem; }
.creator-simple-review > article > small { margin-top: .3rem; color: var(--muted); }
@media (max-width: 760px) {
  .creator-simple-header .creator-header-actions { justify-content: flex-start; margin-top: 1rem; }
}
.story-hero-grid.no-portrait { grid-template-columns: minmax(0, 1fr); }
.story-hero-grid.no-portrait .story-hero-copy { max-width: 1120px; }
.inventory-status { display: inline-flex; padding: .35rem .45rem; border: 1px solid var(--line); border-radius: 999px; color: var(--good); font: .54rem var(--font-mono-v9); letter-spacing: .06em; }
.inventory-status.low { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }

/* ================================================================
   V9.1 FINISH PASS — wordless brand emblem + ambient portrait ghost
   ================================================================ */
.site-header .brand-emblem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 3px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 4px;
  background: #070707;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
.site-header .brand-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
  filter: saturate(.72) contrast(1.06) brightness(.92);
  transition: transform .22s ease, filter .22s ease;
}
.site-header .brand-emblem:hover .brand-logo,
.site-header .brand-emblem:focus-visible .brand-logo {
  transform: scale(1.055);
  filter: saturate(.9) contrast(1.06) brightness(1.02);
}

.story-hero {
  position: relative;
  isolation: isolate;
  overflow: visible;
}
.story-hero-grid {
  position: relative;
  z-index: 2;
}
.story-ghost {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 20%;
  width: min(44vw, 640px);
  height: min(78vw, 820px);
  min-height: 560px;
  overflow: hidden;
  opacity: var(--story-ghost-opacity, .16);
  transform: translate3d(var(--story-ghost-x, 0px), calc(-50% + var(--story-ghost-y, 0px)), 0) scale(var(--story-ghost-scale, 1));
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 72%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 72%, transparent 100%);
}
.story-ghost::after {
  position: absolute;
  inset: 0;
  content: '';
  background:
    linear-gradient(90deg, var(--bg) 0%, transparent 30%, transparent 72%, var(--bg) 100%),
    linear-gradient(180deg, var(--bg) 0%, transparent 18%, transparent 74%, var(--bg) 100%);
}
.story-ghost img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 10%;
  filter: grayscale(.22) saturate(.62) contrast(1.18) brightness(.66);
  opacity: 0;
  animation: v91-story-ghost-fade 10s ease-in-out infinite;
}
@keyframes v91-story-ghost-fade {
  0%, 100% { opacity: 0; transform: scale(1.018); }
  22% { opacity: .38; }
  43%, 62% { opacity: 1; transform: scale(1); }
  84% { opacity: .24; }
}
:root[data-theme='bone'] .story-ghost::after {
  background:
    linear-gradient(90deg, var(--bg) 0%, transparent 30%, transparent 72%, var(--bg) 100%),
    linear-gradient(180deg, var(--bg) 0%, transparent 18%, transparent 74%, var(--bg) 100%);
}
:root[data-theme='bone'] .story-ghost img { filter: grayscale(.18) saturate(.58) contrast(1.03) brightness(.98); }
@media (max-width: 980px) {
  .story-ghost { right: -2%; width: min(70vw, 580px); }
}
@media (max-width: 760px) {
  .site-header .brand-emblem { width: 40px; height: 40px; }
  .story-ghost { right: -22%; width: 92vw; min-height: 500px; }
}
@media (max-width: 480px) {
  .story-ghost { right: -34%; width: 112vw; }
}
@media (prefers-reduced-motion: reduce) {
  .story-ghost img { animation: none; opacity: .72; }
}

/* =========================================================
   V10 B2B SOFTWARE ENGINEERING REPOSITIONING
   ========================================================= */
.b2b-home .section { position: relative; }
.b2b-hero .story-hero-copy { max-width: 900px; }
.b2b-hero h1 { max-width: 1050px; }
.b2b-hero .kicker { max-width: 850px; }
.b2b-credentials { display: flex; flex-wrap: wrap; gap: .55rem !important; }
.b2b-credentials span {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 76%, transparent);
  padding: .46rem .66rem;
  border-radius: 999px;
  color: var(--muted);
  font: 700 .56rem var(--font-mono-v9);
  letter-spacing: .09em;
}

.b2b-capability-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 clamp(4.5rem, 8vw, 8rem);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  box-shadow: var(--v9-shadow);
}
.b2b-capability-strip article {
  min-height: 170px;
  padding: 1.55rem;
  border-right: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 1rem;
}
.b2b-capability-strip article:last-child { border-right: 0; }
.b2b-capability-strip article > b {
  color: var(--accent);
  font: 800 1.65rem var(--font-display-v9);
}
.b2b-capability-strip article span {
  display: block;
  color: var(--dim);
  font: 700 .58rem var(--font-mono-v9);
  letter-spacing: .11em;
  margin-bottom: .65rem;
}
.b2b-capability-strip article strong {
  display: block;
  color: var(--text);
  font: 700 1rem/1.35 var(--font-display-v9);
}

.b2b-problems { padding-top: clamp(1rem, 2vw, 2rem); }
.b2b-problem-grid { margin-top: 2rem; }

.b2b-stack-section {
  padding-top: clamp(4rem, 8vw, 8rem);
  padding-bottom: clamp(4rem, 8vw, 8rem);
}
.b2b-stack {
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 68%, transparent), color-mix(in srgb, var(--bg-deep) 78%, transparent));
}
.b2b-stack article {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) minmax(250px, .7fr);
  gap: 2rem;
  align-items: center;
  min-height: 155px;
  padding: 1.6rem 1.8rem;
  border-bottom: 1px solid var(--line);
  transition: background .2s ease, transform .2s ease;
}
.b2b-stack article:last-child { border-bottom: 0; }
.b2b-stack article:hover { background: var(--accent-soft); }
.b2b-stack article > span,
.b2b-stack article > strong {
  color: var(--dim);
  font: 700 .6rem/1.5 var(--font-mono-v9);
  letter-spacing: .1em;
}
.b2b-stack article > strong { color: var(--muted); text-align: right; }
.b2b-stack h3 { margin: 0 0 .4rem; font-size: clamp(1.5rem, 2.5vw, 2.2rem); }
.b2b-stack p { margin: 0; max-width: 680px; }

.b2b-case-study { padding-top: clamp(5rem, 9vw, 9rem); }
.case-proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 1.4rem 0 1.8rem;
}
.case-proof-row span {
  padding: .48rem .68rem;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--muted);
  font: 700 .56rem var(--font-mono-v9);
  letter-spacing: .08em;
}

.b2b-industry-section .card { min-height: 310px; }
.b2b-industry-section .card-icon {
  width: auto;
  min-width: 3rem;
  padding-inline: .7rem;
  font-size: .75rem;
  letter-spacing: .04em;
}

.b2b-process { padding-top: clamp(4rem, 8vw, 8rem); }
.b2b-process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--v9-shadow);
}
.b2b-process-grid article {
  min-height: 300px;
  padding: 1.65rem;
  border-right: 1px solid var(--line);
}
.b2b-process-grid article:last-child { border-right: 0; }
.b2b-process-grid b {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 2.4rem;
  border: 1px solid var(--line-strong);
  color: var(--accent);
  font: 800 .72rem var(--font-mono-v9);
}
.b2b-process-grid h3 { font-size: 1.45rem; margin-bottom: .75rem; }
.b2b-process-grid p { margin: 0; }

.b2b-web-section .ops-teaser { align-items: stretch; }
.b2b-web-proof {
  min-height: 360px;
  display: grid;
  align-content: center;
  gap: .65rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 88%, transparent), color-mix(in srgb, var(--bg-deep) 92%, transparent));
  box-shadow: var(--v9-shadow);
}
.b2b-web-proof span {
  display: block;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--text);
  font: 800 .7rem var(--font-mono-v9);
  letter-spacing: .1em;
}
.b2b-web-proof i { color: var(--accent); font-style: normal; text-align: center; }

.services-b2b-page .page-intro h1 { max-width: 1050px; }
.services-b2b-page .grid-2 > .card { min-height: 300px; }

@media (max-width: 1080px) {
  .b2b-capability-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b2b-capability-strip article:nth-child(2) { border-right: 0; }
  .b2b-capability-strip article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .b2b-stack article { grid-template-columns: 130px minmax(0, 1fr); }
  .b2b-stack article > strong { grid-column: 2; text-align: left; }
  .b2b-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b2b-process-grid article:nth-child(2) { border-right: 0; }
  .b2b-process-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 720px) {
  .b2b-capability-strip { grid-template-columns: 1fr; }
  .b2b-capability-strip article { border-right: 0; border-bottom: 1px solid var(--line); min-height: 0; }
  .b2b-capability-strip article:nth-child(2) { border-right: 0; }
  .b2b-capability-strip article:last-child { border-bottom: 0; }
  .b2b-stack article { grid-template-columns: 1fr; gap: .7rem; padding: 1.35rem 1rem; }
  .b2b-stack article > strong { grid-column: auto; text-align: left; }
  .b2b-process-grid { grid-template-columns: 1fr; }
  .b2b-process-grid article { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .b2b-process-grid article:last-child { border-bottom: 0; }
  .b2b-process-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .b2b-process-grid b { margin-bottom: 1.5rem; }
}

@media (max-width: 760px) {
  .story-ghost img { object-position: center 8%; }
  .story-portrait-frame img { object-position: center 10%; }
  .hero-art { background-position: center 14%; }
  .feature-photo { background-position: center 12%; }
}

/* =========================================================
   V11 — FULL-BLEED B2B SOFTWARE ENGINEERING HOMEPAGE
   ========================================================= */
body[data-current-page='home'] .page-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
body[data-current-page='home'] { overflow-x: hidden; }
.home-page-v11 {
  --v11-pad: clamp(22px, 5vw, 84px);
  --v11-wide: 1680px;
  width: 100%;
  overflow: clip;
  background:
    radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 30%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 42%, var(--bg) 100%);
}
.home-page-v11 h1,
.home-page-v11 h2,
.home-page-v11 h3 { letter-spacing: -.045em; }
.home-page-v11 .eyebrow { margin-bottom: 0; }

/* HERO */
.v11-hero {
  position: relative;
  min-height: min(940px, 100svh);
  padding: clamp(34px, 5vw, 74px) var(--v11-pad) 0;
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}
.v11-hero::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: '';
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--line) 70%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--line) 45%, transparent) 1px, transparent 1px);
  background-size: 9vw 100%, 100% 120px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.85), transparent 85%);
  opacity: .5;
}
.v11-hero::after {
  position: absolute;
  z-index: -1;
  content: '';
  width: min(42vw, 760px);
  aspect-ratio: 1;
  right: -12vw;
  top: 8%;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 0 0 70px color-mix(in srgb, var(--accent) 2%, transparent), 0 0 140px color-mix(in srgb, var(--accent) 9%, transparent);
}
.v11-hero-grid {
  width: min(var(--v11-wide), 100%);
  min-height: 760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(560px, 1.1fr);
  align-items: center;
  gap: clamp(30px, 5vw, 90px);
}
.v11-hero-copy { position: relative; z-index: 3; padding: 40px 0 110px; }
.v11-kicker-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: clamp(30px, 5vw, 70px); }
.v11-status { display: inline-flex; align-items: center; gap: .55rem; color: var(--dim); font: .62rem var(--font-mono-v9); letter-spacing: .12em; }
.v11-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 12px var(--good); }
.v11-hero h1 {
  max-width: 860px;
  margin: 0;
  font-size: clamp(4.9rem, 7.5vw, 9.7rem);
  line-height: .82;
  text-transform: uppercase;
}
.v11-hero h1 span,
.v11-hero h1 em { display: block; }
.v11-hero h1 span { color: var(--text); }
.v11-hero h1 em { color: var(--accent); font-style: normal; text-wrap: balance; }
.v11-lead { max-width: 770px; margin: 2rem 0 0; color: var(--muted); font-size: clamp(1rem, 1.35vw, 1.25rem); line-height: 1.7; }
.v11-techline { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); color: var(--dim); font: .64rem var(--font-mono-v9); letter-spacing: .11em; }
.v11-techline span::before { content: '/'; margin-right: .45rem; color: var(--accent); }
.v11-hero-visual { position: relative; min-height: 720px; align-self: end; }
.v11-photo-wide {
  position: absolute;
  inset: 7% -6vw 0 2%;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: #060b12;
  box-shadow: 0 40px 100px rgba(0,0,0,.32);
  clip-path: polygon(8% 0, 100% 0, 100% 88%, 86% 100%, 0 100%, 0 13%);
}
.v11-photo-wide::after { position: absolute; inset: 0; content: ''; background: linear-gradient(90deg, rgba(4,9,15,.4), transparent 35%), linear-gradient(0deg, rgba(4,9,15,.28), transparent 35%); pointer-events: none; }
.v11-photo-wide img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; filter: saturate(.88) contrast(1.04); }
.v11-system-card {
  position: absolute;
  z-index: 4;
  left: -12%;
  bottom: 11%;
  width: min(590px, 72%);
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--bg-deep) 92%, transparent);
  box-shadow: 0 24px 70px rgba(0,0,0,.46);
  backdrop-filter: blur(18px);
}
.v11-windowbar { min-height: 42px; display: flex; align-items: center; gap: 7px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.v11-windowbar span { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--line-strong); }
.v11-windowbar b { margin-left: auto; color: var(--dim); font: .57rem var(--font-mono-v9); letter-spacing: .14em; }
.v11-system-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: .8rem; padding: 1.15rem; }
.v11-system-flow div { display: grid; gap: .25rem; }
.v11-system-flow small { color: var(--accent); font: .6rem var(--font-mono-v9); }
.v11-system-flow b { color: var(--text); font-size: .82rem; letter-spacing: .04em; }
.v11-system-flow span { color: var(--dim); font: .6rem var(--font-mono-v9); }
.v11-system-flow i { color: var(--accent); font-style: normal; }
.v11-system-foot { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 1.15rem; border-top: 1px solid var(--line); }
.v11-system-foot span, .v11-system-foot strong { font: .56rem var(--font-mono-v9); letter-spacing: .1em; }
.v11-system-foot span { color: var(--dim); }
.v11-system-foot strong { color: var(--accent); }
.v11-founder-tag { position: absolute; right: -1vw; top: 11%; z-index: 4; padding: .9rem 1rem; border-left: 2px solid var(--accent); background: rgba(4,9,15,.72); backdrop-filter: blur(12px); }
.v11-founder-tag b, .v11-founder-tag span { display: block; }
.v11-founder-tag b { color: var(--text); font-size: .75rem; }
.v11-founder-tag span { margin-top: .2rem; color: var(--dim); font: .56rem var(--font-mono-v9); letter-spacing: .1em; }
.v11-marquee { position: relative; margin: 0 calc(var(--v11-pad) * -1); overflow: hidden; border-top: 1px solid var(--line); background: var(--accent); color: #071018; }
.v11-marquee div { width: max-content; display: flex; align-items: center; gap: 1.1rem; padding: .72rem 0; animation: v11-marquee 28s linear infinite; font: 800 .7rem var(--font-mono-v9); letter-spacing: .12em; }
.v11-marquee i { opacity: .55; font-style: normal; }
@keyframes v11-marquee { to { transform: translateX(-50%); } }

/* STATEMENT */
.v11-statement {
  width: min(var(--v11-wide), 100%);
  min-height: 580px;
  margin: 0 auto;
  padding: clamp(90px, 11vw, 180px) var(--v11-pad);
  display: grid;
  grid-template-columns: 110px minmax(0, 1.4fr) minmax(300px, .6fr);
  gap: clamp(30px, 6vw, 110px);
  align-items: end;
}
.v11-statement-index, .v11-arch-label { color: var(--dim); font: .62rem var(--font-mono-v9); letter-spacing: .12em; writing-mode: vertical-rl; transform: rotate(180deg); align-self: stretch; }
.v11-statement-copy h2 { max-width: 980px; margin: 1.5rem 0; font-size: clamp(3.7rem, 6vw, 7.8rem); line-height: .92; }
.v11-statement-copy p { max-width: 760px; color: var(--muted); font-size: clamp(1rem, 1.35vw, 1.22rem); }
.v11-statement-side { align-self: center; display: grid; gap: .6rem; padding: 1.5rem 0 1.5rem 1.5rem; border-left: 1px solid var(--line-strong); }
.v11-statement-side b { margin-bottom: .8rem; color: var(--accent); font: .6rem var(--font-mono-v9); letter-spacing: .13em; }
.v11-statement-side span { color: var(--text); font-size: clamp(1.15rem, 1.5vw, 1.6rem); font-weight: 700; }

/* PROBLEM FLOW */
.v11-problem-stage { position: relative; padding: clamp(70px, 9vw, 140px) var(--v11-pad); background: color-mix(in srgb, var(--panel-strong) 70%, var(--bg)); border-block: 1px solid var(--line); }
.v11-problem-stage::before { position:absolute; inset:0; content:''; background: linear-gradient(115deg, transparent 0 43%, color-mix(in srgb, var(--accent) 6%, transparent) 43% 61%, transparent 61%); pointer-events:none; }
.v11-problem-head { width: min(1180px, 100%); margin: 0 auto 4rem; }
.v11-problem-head h2 { max-width: 1000px; margin-top: 1.3rem; font-size: clamp(3.4rem, 5.6vw, 7rem); line-height: .92; }
.v11-problem-track { position: relative; z-index: 1; width: min(var(--v11-wide), 100%); margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: clamp(15px, 2.5vw, 42px); align-items: stretch; }
.v11-problem-track article { min-height: 250px; display: flex; flex-direction: column; justify-content: space-between; padding: 1.5rem; border-top: 2px solid var(--accent); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg-deep) 86%, transparent); }
.v11-problem-track article span { color: var(--accent); font: .6rem var(--font-mono-v9); letter-spacing: .14em; }
.v11-problem-track article b { max-width: 350px; margin: 1.8rem 0; color: var(--text); font-size: clamp(1.5rem, 2vw, 2.2rem); line-height: 1.05; }
.v11-problem-track article p { margin: 0; color: var(--muted); font-size: .88rem; }
.v11-track-arrow { display: grid; place-items: center; color: var(--accent); font-size: 2rem; }

/* ARCHITECTURE */
.v11-architecture { position: relative; width: min(var(--v11-wide), 100%); min-height: 900px; margin: 0 auto; padding: clamp(90px, 10vw, 160px) var(--v11-pad); display: grid; grid-template-columns: 90px minmax(320px, .62fr) minmax(600px, 1.38fr); gap: clamp(28px, 5vw, 85px); align-items: center; }
.v11-arch-intro h2 { margin: 1.4rem 0 1.3rem; font-size: clamp(3.2rem, 5vw, 6.5rem); line-height: .92; }
.v11-arch-intro p { max-width: 620px; color: var(--muted); }
.v11-arch-intro .section-link { display: inline-block; margin-top: 1.4rem; }
.v11-arch-map { position: relative; min-height: 620px; }
.v11-arch-map article { position: absolute; z-index: 2; width: min(310px, 34%); min-height: 170px; padding: 1.2rem; border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--bg-deep) 93%, transparent); box-shadow: 0 22px 60px rgba(0,0,0,.24); }
.v11-arch-map article > span { position: absolute; right: 1rem; top: .8rem; color: var(--accent); font: 700 2rem var(--font-mono-v9); opacity: .35; }
.v11-arch-map small { color: var(--accent); font: .58rem var(--font-mono-v9); letter-spacing: .13em; }
.v11-arch-map h3 { margin: 2rem 0 .75rem; color: var(--text); font-size: clamp(1.2rem, 1.4vw, 1.55rem); line-height: 1.1; }
.v11-arch-map p { margin: 0; color: var(--dim); font: .62rem var(--font-mono-v9); }
.arch-ui { left: 0; top: 5%; }
.arch-logic { left: 29%; top: 28%; }
.arch-api { right: 4%; top: 12%; }
.arch-data { right: 0; bottom: 4%; }
.v11-arch-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.v11-arch-lines path { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 8 10; opacity: .45; }
.v11-arch-lines circle { fill: var(--accent); opacity: .8; }

/* MANIFEST CASE STUDY */
.v11-case { position: relative; min-height: 1040px; padding: clamp(100px, 10vw, 170px) var(--v11-pad); background: #03070d; border-block: 1px solid var(--line); overflow: hidden; }
.v11-case::before { position:absolute; inset:0; content:''; background: radial-gradient(circle at 75% 45%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 33%); pointer-events:none; }
.v11-case-copy { position: relative; z-index: 4; width: min(650px, 44vw); margin-left: max(0px, calc((100vw - var(--v11-wide)) / 2)); }
.v11-case-copy h2 { margin: 1.4rem 0; color: #f7fbff; font-size: clamp(3.3rem, 5vw, 6.6rem); line-height: .9; }
.v11-case-copy p { color: #9daab8; font-size: 1rem; }
.v11-case-gallery { position: absolute; inset: 7% 0 0 43%; }
.v11-shot { position: absolute; overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: #07111d; box-shadow: 0 36px 100px rgba(0,0,0,.48); }
.v11-shot img { width: 100%; height: 100%; object-fit: cover; }
.v11-shot figcaption { position: absolute; inset: auto 0 0; display:flex; justify-content:space-between; gap:1rem; padding:.8rem 1rem; background: linear-gradient(180deg, transparent, rgba(0,0,0,.86)); color:#fff; }
.v11-shot figcaption b { font: .61rem var(--font-mono-v9); letter-spacing:.1em; }
.v11-shot figcaption span { color:#aab5c1; font: .55rem var(--font-mono-v9); }
.v11-shot-main { left: 10%; top: 10%; width: 74%; height: 56%; transform: rotate(1.2deg); }
.v11-shot-side { right: -7%; top: 46%; width: 47%; height: 39%; transform: rotate(-3deg); }
.v11-shot-float { left: -3%; bottom: 2%; width: 43%; height: 34%; transform: rotate(3.5deg); }

/* B2B LANES */
.v11-b2b-lanes { padding: clamp(90px, 10vw, 160px) var(--v11-pad); }
.v11-lanes-head { width: min(var(--v11-wide), 100%); margin: 0 auto 4rem; display:flex; align-items:end; justify-content:space-between; gap:2rem; }
.v11-lanes-head h2 { max-width: 950px; margin-top:1.4rem; font-size:clamp(3.4rem,5vw,6.7rem); line-height:.9; }
.v11-lane { width: min(var(--v11-wide), 100%); min-height: 170px; margin: 0 auto; display:grid; grid-template-columns: 90px minmax(0,1fr) 260px 50px; gap:2rem; align-items:center; padding: 1.7rem 1rem; border-top:1px solid var(--line); color:inherit; transition: .25s ease; }
.v11-lane:last-child { border-bottom:1px solid var(--line); }
.v11-lane:hover { padding-left:2rem; background: color-mix(in srgb,var(--accent) 5%,transparent); }
.lane-no { color:var(--accent); font:700 2.2rem var(--font-mono-v9); opacity:.55; }
.v11-lane small { color:var(--accent); font:.6rem var(--font-mono-v9); letter-spacing:.13em; }
.v11-lane h3 { max-width: 960px; margin:.6rem 0 0; color:var(--text); font-size:clamp(1.5rem,2.2vw,2.7rem); line-height:1.08; }
.v11-lane > strong { color:var(--dim); font:.63rem var(--font-mono-v9); letter-spacing:.08em; }
.v11-lane > i { color:var(--accent); font-size:1.6rem; font-style:normal; }

/* FOUNDER / PROCESS */
.v11-founder { min-height: 900px; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(460px,.9fr); border-block:1px solid var(--line); background:color-mix(in srgb,var(--panel) 50%,var(--bg)); }
.v11-founder-photo { position:relative; min-height:820px; overflow:hidden; }
.v11-founder-photo::after { position:absolute; inset:0; content:''; background:linear-gradient(90deg,transparent 60%, color-mix(in srgb,var(--bg) 76%,transparent)); pointer-events:none; }
.v11-founder-photo img { width:100%; height:100%; object-fit:cover; object-position:center 18%; filter:saturate(.85) contrast(1.04); }
.v11-founder-caption { position:absolute; left:var(--v11-pad); bottom:var(--v11-pad); z-index:2; display:grid; gap:.3rem; padding:1rem 1.2rem; border-left:2px solid var(--accent); background:rgba(3,8,14,.72); backdrop-filter:blur(12px); }
.v11-founder-caption span { color:#fff; font-size:.8rem; font-weight:800; }
.v11-founder-caption b { color:#aab4c0; font:.57rem var(--font-mono-v9); letter-spacing:.1em; }
.v11-founder-copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(60px,8vw,130px) var(--v11-pad) clamp(60px,8vw,130px) clamp(40px,6vw,100px); }
.v11-founder-copy h2 { margin:1.4rem 0 2.8rem; font-size:clamp(3.2rem,4.7vw,6rem); line-height:.92; }
.v11-process-list { display:grid; }
.v11-process-list > div { display:grid; grid-template-columns:50px 1fr; gap:1.3rem; padding:1.15rem 0; border-top:1px solid var(--line); }
.v11-process-list > div:last-child { border-bottom:1px solid var(--line); }
.v11-process-list b { color:var(--accent); font:.72rem var(--font-mono-v9); }
.v11-process-list span { color:var(--muted); font-size:.88rem; }
.v11-process-list strong { color:var(--text); }

/* WEBSITE LAYER */
.v11-web-layer { width:min(var(--v11-wide),100%); margin:0 auto; padding:clamp(90px,10vw,150px) var(--v11-pad); display:grid; grid-template-columns:minmax(0,.9fr) minmax(500px,1.1fr); gap:clamp(40px,7vw,110px); align-items:center; }
.v11-web-copy h2 { margin:1.4rem 0; font-size:clamp(3rem,4.7vw,6rem); line-height:.93; }
.v11-web-copy p { max-width:650px; color:var(--muted); }
.v11-web-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:.6rem; }
.v11-web-flow span { min-height:120px; display:grid; place-items:center; padding:1rem; border:1px solid var(--line-strong); background:var(--panel); color:var(--text); text-align:center; font:.62rem var(--font-mono-v9); letter-spacing:.09em; }
.v11-web-flow i { color:var(--accent); font-style:normal; }

/* FINAL CTA */
.v11-final-cta { width:100%; min-height:620px; padding:clamp(90px,10vw,160px) var(--v11-pad); display:grid; grid-template-columns:100px minmax(0,1fr) auto; gap:clamp(30px,6vw,100px); align-items:end; background:var(--accent); color:#061018; }
.v11-final-index { align-self:stretch; writing-mode:vertical-rl; transform:rotate(180deg); font:.64rem var(--font-mono-v9); letter-spacing:.12em; opacity:.6; }
.v11-final-cta .eyebrow { color:#061018; }
.v11-final-cta .eyebrow::before { background:#061018; box-shadow:none; }
.v11-final-cta h2 { max-width:1000px; margin:1.3rem 0; color:#061018; font-size:clamp(4rem,6.5vw,8.5rem); line-height:.85; }
.v11-final-cta p { max-width:700px; color:rgba(6,16,24,.7); font-size:1.05rem; }
.v11-final-actions { display:grid; gap:.8rem; min-width:280px; }
.v11-final-cta .btn-primary { background:#061018; color:#f7fbff; border-color:#061018; }
.v11-final-cta .btn-secondary { color:#061018; border-color:rgba(6,16,24,.35); background:transparent; }

/* Home custom sections keep sensible width */
.home-page-v11 .custom-section { width:min(var(--v11-wide),100%); margin:0 auto; padding-inline:var(--v11-pad); }

@media (max-width: 1180px) {
  .v11-hero-grid { grid-template-columns: 1fr 1fr; }
  .v11-hero h1 { font-size: clamp(4.4rem, 8vw, 8rem); }
  .v11-system-card { left:-4%; width:82%; }
  .v11-architecture { grid-template-columns:70px 1fr; }
  .v11-arch-map { grid-column:1/-1; margin-top:1rem; }
  .v11-case-copy { width:min(590px,50vw); }
  .v11-case-gallery { left:48%; }
  .v11-founder { grid-template-columns:1fr 1fr; }
}

@media (max-width: 900px) {
  .home-page-v11 { --v11-pad: 22px; }
  .v11-hero { min-height:auto; padding-top:40px; }
  .v11-hero-grid { min-height:auto; grid-template-columns:1fr; }
  .v11-hero-copy { padding:20px 0 20px; }
  .v11-kicker-row { margin-bottom:35px; }
  .v11-hero h1 { font-size:clamp(4.4rem,15vw,7rem); }
  .v11-hero-visual { min-height:620px; }
  .v11-photo-wide { inset:4% -22px 0 3%; }
  .v11-photo-wide img { object-position:64% center; }
  .v11-system-card { left:0; bottom:7%; width:80%; }
  .v11-founder-tag { right:0; }
  .v11-statement { grid-template-columns:1fr; min-height:auto; }
  .v11-statement-index, .v11-arch-label { writing-mode:horizontal-tb; transform:none; }
  .v11-statement-side { max-width:450px; }
  .v11-problem-track { grid-template-columns:1fr; }
  .v11-track-arrow { transform:rotate(90deg); min-height:34px; }
  .v11-architecture { grid-template-columns:1fr; min-height:auto; }
  .v11-arch-map { min-height:900px; }
  .v11-arch-map article { width:48%; }
  .arch-ui { left:0; top:2%; }
  .arch-api { right:0; top:20%; }
  .arch-logic { left:5%; top:48%; }
  .arch-data { right:2%; bottom:2%; }
  .v11-case { min-height:1420px; }
  .v11-case-copy { width:100%; margin:0; }
  .v11-case-gallery { inset:52% 0 0 0; }
  .v11-shot-main { left:2%; top:0; width:82%; height:42%; }
  .v11-shot-side { right:-10%; top:35%; width:58%; height:31%; }
  .v11-shot-float { left:-4%; bottom:0; width:57%; height:29%; }
  .v11-lane { grid-template-columns:55px 1fr 35px; gap:1rem; }
  .v11-lane > strong { grid-column:2; }
  .v11-lane > i { grid-row:1/3; grid-column:3; }
  .v11-founder { grid-template-columns:1fr; }
  .v11-founder-photo { min-height:680px; }
  .v11-founder-photo::after { background:linear-gradient(0deg,color-mix(in srgb,var(--bg) 70%,transparent),transparent 38%); }
  .v11-web-layer { grid-template-columns:1fr; }
  .v11-web-flow { grid-template-columns:1fr; }
  .v11-web-flow i { transform:rotate(90deg); justify-self:center; }
  .v11-final-cta { grid-template-columns:1fr; min-height:auto; }
  .v11-final-index { writing-mode:horizontal-tb; transform:none; }
  .v11-final-actions { min-width:0; max-width:420px; }
}

@media (max-width: 620px) {
  .v11-hero h1 { font-size:clamp(3.6rem,16vw,5.7rem); }
  .v11-kicker-row { align-items:flex-start; flex-direction:column; }
  .v11-hero-visual { min-height:540px; }
  .v11-photo-wide { inset:0 -22px 0 0; clip-path:polygon(0 0,100% 0,100% 90%,88% 100%,0 100%); }
  .v11-photo-wide img { object-position:63% center; }
  .v11-founder-tag { top:3%; }
  .v11-system-card { left:0; bottom:3%; width:95%; }
  .v11-system-flow { grid-template-columns:1fr; }
  .v11-system-flow i { display:none; }
  .v11-system-foot { display:grid; }
  .v11-statement-copy h2, .v11-problem-head h2, .v11-lanes-head h2, .v11-founder-copy h2, .v11-web-copy h2 { font-size:clamp(2.9rem,12vw,4.7rem); }
  .v11-arch-map { min-height:auto; display:grid; gap:1rem; }
  .v11-arch-map article { position:relative; inset:auto !important; width:100%; min-height:150px; }
  .v11-arch-lines { display:none; }
  .v11-case { min-height:1220px; }
  .v11-case-copy h2 { font-size:clamp(3rem,12vw,4.8rem); }
  .v11-case-gallery { inset:58% 0 0 0; }
  .v11-shot figcaption span { display:none; }
  .v11-lane { grid-template-columns:45px 1fr 28px; padding-inline:0; }
  .lane-no { font-size:1.4rem; }
  .v11-lane h3 { font-size:1.45rem; }
  .v11-founder-photo { min-height:560px; }
  .v11-founder-photo img { object-position:center 10%; }
  .v11-founder-copy { padding-inline:22px; }
  .v11-final-cta h2 { font-size:clamp(3.5rem,14vw,5.6rem); }
}

/* Hero refinement: fluid type and an in-flow portrait prevent collisions. */
.home-page-v11 .v11-hero { min-height: 0; padding-top: clamp(32px, 4vw, 64px); }
.home-page-v11 .v11-hero-grid { min-height: 0; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 80px); padding-bottom: clamp(40px, 5vw, 72px); }
.home-page-v11 .v11-hero-copy { min-width: 0; padding: 12px 0; }
.home-page-v11 .v11-kicker-row { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 28px; }
.home-page-v11 .v11-kicker-row .eyebrow { font-size: .65rem; letter-spacing: .13em; }
.home-page-v11 .v11-status { font-size: .58rem; letter-spacing: .1em; }
.home-page-v11 .v11-hero h1 { font-size: clamp(3rem, 5.4vw, 6rem); line-height: .98; letter-spacing: -.045em; text-transform: none; text-wrap: balance; }
.home-page-v11 .v11-hero h1 em { margin-top: .08em; text-wrap: balance; }
.home-page-v11 .v11-lead { max-width: 560px; margin-top: 24px; font-size: clamp(.95rem, 1.1vw, 1.08rem); line-height: 1.75; }
.home-page-v11 .v11-hero .hero-actions { gap: 12px; margin: 28px 0; }
.home-page-v11 .v11-techline { gap: 10px 16px; padding-top: 22px; font-size: .6rem; }
.home-page-v11 .v11-hero-visual { display: flex; flex-direction: column; min-width: 0; min-height: 0; align-self: center; padding: 0; }
.home-page-v11 .v11-photo-wide { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 1 / 1.08; clip-path: none; border-radius: 4px 4px 0 0; box-shadow: none; }
.home-page-v11 .v11-photo-wide img { display: block; object-position: 62% center; }
.home-page-v11 .v11-system-card { position: relative; inset: auto; width: 100%; border-top: 0; box-shadow: none; border-radius: 0 0 4px 4px; }
.home-page-v11 .v11-founder-tag { top: 20px; right: 20px; max-width: calc(100% - 40px); }
.home-page-v11 .v11-system-flow { grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px; padding: 18px; }
.home-page-v11 .v11-system-flow i { display: block; }
.home-page-v11 .v11-system-foot { flex-wrap: wrap; gap: 8px; padding: 14px 18px; }
.home-page-v11 .v11-marquee div { animation: none; width: 100%; justify-content: space-evenly; flex-wrap: wrap; gap: 12px 24px; padding: 16px 22px; font-size: .64rem; }
.home-page-v11 .v11-marquee i, .home-page-v11 .v11-marquee span:nth-of-type(n+8) { display: none; }
@media (max-width: 1000px) {
  .home-page-v11 .v11-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 28px; }
  .home-page-v11 .v11-hero h1 { font-size: clamp(2.8rem, 5.6vw, 4rem); }
  .home-page-v11 .v11-system-flow { gap: 6px; padding: 14px; }
  .home-page-v11 .v11-system-flow b { font-size: .7rem; }
  .home-page-v11 .v11-founder-tag { top: 12px; right: 12px; }
}
@media (max-width: 760px) {
  .home-page-v11 .v11-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .home-page-v11 .v11-hero-copy { padding: 0; }
  .home-page-v11 .v11-hero h1 { max-width: 600px; font-size: clamp(2.7rem, 9vw, 4.6rem); }
  .home-page-v11 .v11-kicker-row { margin-bottom: 24px; gap: 12px; }
  .home-page-v11 .v11-photo-wide { aspect-ratio: 1.25; }
  .home-page-v11 .v11-lead { margin-top: 20px; }
  .home-page-v11 .v11-hero .hero-actions { display: flex; }
  .home-page-v11 .v11-hero .hero-actions .btn { width: auto; min-height: 48px; }
  .home-page-v11 .v11-system-foot { display: flex; }
}
@media (max-width: 400px) {
  .home-page-v11 .v11-kicker-row .eyebrow { font-size: .58rem; }
  .home-page-v11 .v11-hero .hero-actions { display: grid; }
  .home-page-v11 .v11-hero .hero-actions .btn { width: 100%; }
  .home-page-v11 .v11-system-flow span { font-size: .55rem; }
}
/* Override the legacy !important shell width on the full-bleed homepage. */
body[data-current-page='home'] .page-shell { width: 100% !important; }
.home-page-v11 .v11-founder-tag { top: auto; bottom: 182px; right: 16px; }
@media (max-width: 1000px) { .home-page-v11 .v11-founder-tag { bottom: 190px; } }
.home-page-v11 .v11-founder-tag { position: static; order: -1; max-width: none; padding: 0 0 14px; border: 0; background: none; backdrop-filter: none; }

/* Staffing-focused service pages */
.staffing-home { --v11-wide: 1440px; }
.staffing-home .v11-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 5vw, 80px); }
.staffing-home .v11-hero h1 { max-width: 760px; font-size: clamp(3rem, 5.8vw, 6rem); line-height: 1.02; }
.staffing-home .v11-lead { max-width: 640px; }
.staffing-home .v11-photo-wide { aspect-ratio: 1 / 1.06; }
.staffing-founder-caption { display: grid; gap: 6px; padding: 20px; border: 1px solid var(--line); border-top: 0; background: var(--bg-deep); }
.staffing-founder-caption strong { font-size: 1rem; }
.staffing-founder-caption span { color: var(--muted); font-size: .8rem; }
.staffing-service-strip { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 0 calc(-1 * var(--v11-pad)); padding: 20px var(--v11-pad); border-top: 1px solid var(--line); background: var(--accent); color: #17120a; font: 700 .65rem var(--font-mono-v9); letter-spacing: .08em; }
.staffing-section { width: min(1440px, 100%); padding: clamp(48px, 6vw, 90px) clamp(22px, 5vw, 80px); margin: 0 auto; border-bottom: 1px solid var(--line); }
.staffing-section-heading { max-width: 790px; margin-bottom: 34px; }
.staffing-section h2, .staffing-contact h2 { margin: 16px 0; font-size: clamp(2rem, 3.2vw, 3.6rem); line-height: 1.1; letter-spacing: -.035em; }
.staffing-section p { color: var(--muted); font-size: 1rem; line-height: 1.75; }
.staffing-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }
.staffing-cards article { border-top: 2px solid var(--accent); padding: 22px 0 0; }
.staffing-number { color: var(--accent); font: .7rem var(--font-mono-v9); }
.staffing-cards h3, .staffing-code-grid h3 { font-size: 1.4rem; line-height: 1.2; margin: 16px 0 12px; }
.staffing-cards p { margin: 0; }
.staffing-project { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 48px; align-items: center; }
.staffing-project-status { display: block; color: var(--accent); font-size: .8rem; margin: 24px 0; }
.staffing-preview { min-width: 0; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-deep); overflow: hidden; box-shadow: 0 20px 60px #0003; }
.staffing-preview-bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 18px; border-bottom: 1px solid var(--line); font: .6rem var(--font-mono-v9); }
.staffing-preview-bar strong { color: var(--accent); }
.staffing-preview-bar span { color: var(--muted); }
.staffing-preview-body { display: grid; grid-template-columns: 145px minmax(0,1fr); }
.staffing-preview-body aside { display: flex; flex-direction: column; gap: 6px; padding: 22px 12px; border-right: 1px solid var(--line); font-size: .75rem; }
.staffing-preview-body aside b { margin: 0 8px 16px; }
.staffing-preview-body aside span { padding: 10px 8px; color: var(--muted); }
.staffing-preview-body aside .selected { color: var(--accent); background: var(--accent-soft); border-radius: 4px; }
.staffing-preview-body > div { padding: 24px; }
.staffing-preview-body .eyebrow { font-size: .56rem; letter-spacing: .08em; }
.staffing-preview-body h3 { font-size: 1.5rem; margin: 14px 0 20px; }
.staffing-preview ol { list-style: none; counter-reset: workflow; padding: 0; margin: 0; display: grid; gap: 12px; }
.staffing-preview li { counter-increment: workflow; display: grid; grid-template-columns: 26px 1fr; gap: 4px 10px; border: 1px solid var(--line); padding: 14px; border-radius: 4px; }
.staffing-preview li::before { content: counter(workflow, decimal-leading-zero); grid-row: 1/3; color: var(--accent); font: .7rem var(--font-mono-v9); padding-top: 3px; }
.staffing-preview li b { font-size: .85rem; }
.staffing-preview li span { grid-column: 2; font-size: .73rem; line-height: 1.5; color: var(--muted); }
.staffing-preview .staffing-preview-note { font-size: .7rem; margin: 0; padding: 14px 18px; border-top: 1px solid var(--line); }
.staffing-code-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.staffing-code-grid article { padding: 28px; border: 1px solid var(--line); background: var(--panel-soft); }
.staffing-code-grid .eyebrow { font-size: .65rem; }
.staffing-code-grid p { margin: 0; }
.staffing-value { background: var(--panel-soft); }
.staffing-local { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.staffing-contact { padding: clamp(48px,6vw,90px) clamp(22px,5vw,80px); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 36px; align-items: center; background: var(--accent-soft); }
.staffing-contact p { color: var(--muted); max-width: 660px; }
.staffing-contact .eyebrow { font-size: .62rem; line-height: 1.7; }
.staffing-contact-actions { display: grid; gap: 12px; }
.staffing-page .staffing-section { padding-inline: 0; }
.staffing-page .staffing-value { padding-inline: 28px; }
.staffing-about-photo { max-height: 500px; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; }
.staffing-about-photo img { display: block; width: 100%; height: 500px; object-fit: cover; object-position: center 30%; }
@media(max-width:1000px) {
 .staffing-project { grid-template-columns: 1fr; gap: 30px; }
 .staffing-contact { grid-template-columns: 1fr; }
 .staffing-contact-actions { max-width: 340px; }
 .staffing-cards { gap: 20px; }
}
@media(max-width:760px) {
 .staffing-home .v11-hero-grid { grid-template-columns: 1fr; }
 .staffing-home .v11-hero h1 { font-size: clamp(2.8rem,10vw,4.5rem); }
 .staffing-home .v11-photo-wide { aspect-ratio: 1.35; }
 .staffing-cards, .staffing-code-grid, .staffing-local { grid-template-columns: 1fr; }
 .staffing-cards { gap: 28px; }
 .staffing-code-grid article { padding: 22px; }
 .staffing-local { gap: 10px; }
 .staffing-preview-body { grid-template-columns: 1fr; }
 .staffing-preview-body aside { display: none; }
 .staffing-preview-body > div { padding: 20px; }
 .staffing-service-strip { display: grid; grid-template-columns: 1fr 1fr; font-size: .58rem; line-height: 1.6; }
 .staffing-page .staffing-value { padding-inline: 18px; }
}
/* Keep service-page introductions compact and readable. */
body:not([data-current-page='creator']) .page-intro h1 { font-size: clamp(2.5rem, 4.8vw, 4.8rem) !important; max-width: 1000px !important; line-height: 1.06; }
body:not([data-current-page='creator']) .page-intro { padding-block: 20px 36px; }
.staffing-page .page-intro .kicker { max-width: 800px; font-size: 1.05rem; line-height: 1.75; }

/* System review deliverables */
.staffing-audit-delivery { margin-top: 32px; padding: 24px; border: 1px solid var(--line); background: var(--panel-soft); }
.staffing-audit-delivery h3 { font-size: 1.4rem; margin: 0 0 10px; }
.staffing-audit-delivery p { max-width: 850px; }

/* Actual Fieldwork role screenshots */
.fieldwork-screen-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
.fieldwork-screen { margin: 0; min-width: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel-soft); }
.fieldwork-screen:first-child { grid-column: 1 / -1; }
.fieldwork-screen figcaption { padding: 24px; }
.fieldwork-screen h3 { margin: 12px 0 10px; font-size: 1.5rem; line-height: 1.2; }
.fieldwork-screen figcaption p { font-size: .9rem; margin: 0; max-width: 800px; }
.fieldwork-screen a { display: block; border-top: 1px solid var(--line); }
.fieldwork-screen a:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.fieldwork-screen img { display: block; width: 100%; height: auto; background: #f5f6ef; }
.fieldwork-expand { display: block; padding: 13px 20px; color: var(--accent); font-size: .8rem; border-top: 1px solid var(--line); }
.fieldwork-screen a:hover .fieldwork-expand { text-decoration: underline; }
.fieldwork-gallery .fieldwork-capture-note { font-size: .8rem; margin: 24px 0 0; }
@media(max-width:760px) { .fieldwork-screen-grid { grid-template-columns: 1fr; gap: 22px; } .fieldwork-screen figcaption { padding: 20px; } }

/* Patchwell: forest, mint and warm paper. Portrait has its own stable layout box. */
.staffing-home .v11-hero::after { display: none; }
.staffing-home .v11-hero::before { opacity: .22; }
.staffing-home .v11-hero h1 { font-size: clamp(3rem, 5.2vw, 5.6rem); line-height: 1.06; }
.staffing-home .v11-hero-visual { display: block; width: 100%; }
.staffing-home .v11-photo-wide { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 18px 18px 0 0; }
.staffing-home .v11-photo-wide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 22%; filter: none; }
.staffing-home .v11-photo-wide::after { display: none; }
.staffing-founder-caption { position: relative; margin: 0; border-radius: 0 0 18px 18px; padding: 22px; }
.staffing-service-strip { color: #102b27; }
.staffing-value { background: #edece2; color: #183c32; --text: #183c32; --muted: #455e52; --accent: #326a50; --line: #bdcdbd; }
.staffing-code-grid article, .staffing-audit-delivery { border-radius: 12px; }
.brand-mark { border-radius: 11px 11px 4px 11px !important; letter-spacing: -.06em; }
@media (max-width: 760px) {
 .staffing-home .v11-hero-grid { height: auto; grid-template-rows: auto auto; padding-bottom: 36px; }
 .staffing-home .v11-hero h1 { font-size: clamp(2.65rem, 10.4vw, 4.5rem); }
 .staffing-home .v11-hero-visual { min-height: 0; overflow: hidden; }
 .staffing-home .v11-photo-wide { aspect-ratio: 4 / 5; flex: none; }
 .staffing-home .v11-photo-wide img { object-position: 60% 20%; }
 .staffing-founder-caption { height: auto; }
}