:root {
  --ink: #080d14;
  --panel: #0e1621;
  --panel-2: #121d2a;
  --line: #223247;
  --muted: #90a0b7;
  --soft: #c8d3e3;
  --white: #f4f7fb;
  --teal: #20d573;
  --teal-soft: #74f4bb;
  --violet: #8a2be2;
  --violet-soft: #bd80ff;
  --amber: #ffa502;
  --amber-soft: #ffd27b;
  --radius-lg: 24px;
  --radius-md: 16px;
  --shadow-teal: 0 0 45px rgba(32, 213, 115, 0.18);
  --shadow-violet: 0 0 45px rgba(138, 43, 226, 0.18);
  --shadow-amber: 0 0 45px rgba(255, 165, 2, 0.14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--white); font-family: 'DM Sans', sans-serif; line-height: 1.55; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.site-shell { position: relative; min-height: 100vh; overflow: hidden; }
.ambient { position: absolute; pointer-events: none; border-radius: 999px; filter: blur(20px); opacity: .22; }
.ambient-one { top: 8rem; right: -12rem; width: 34rem; height: 34rem; background: radial-gradient(circle, rgba(32,213,115,.38), transparent 68%); }
.ambient-two { top: 60rem; left: -14rem; width: 32rem; height: 32rem; background: radial-gradient(circle, rgba(138,43,226,.30), transparent 66%); }
.site-header, .section-pad, .signal-rail, .site-footer { width: min(1180px, calc(100% - 64px)); margin: 0 auto; }
.site-header { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 28px 0; border-bottom: 1px solid rgba(137,160,190,.12); }
.brand-lockup { display: inline-flex; align-items: center; gap: 12px; letter-spacing: .16em; font-family: 'Space Grotesk', sans-serif; font-size: 12px; }
.brand-name { color: var(--soft); white-space: nowrap; }
.brand-name b { color: var(--white); font-weight: 600; }
.brand-mark { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid var(--teal); border-radius: 9px 9px 12px 12px; color: var(--teal); box-shadow: inset 0 0 10px rgba(32,213,115,.16), 0 0 16px rgba(32,213,115,.18); font: 700 11px 'Space Grotesk', sans-serif; letter-spacing: 0; transform: rotate(-1deg); }
.brand-mark::before, .brand-mark::after { content: ''; position: absolute; top: -6px; width: 9px; height: 9px; border-top: 2px solid var(--teal); transform: rotate(45deg); }
.brand-mark::before { left: 6px; } .brand-mark::after { right: 6px; }
.primary-nav { display: flex; align-items: center; gap: 28px; font-size: 13px; color: var(--muted); }
.primary-nav a { transition: color .25s ease; } .primary-nav a:hover { color: var(--white); }
.nav-cta { color: var(--teal) !important; border: 1px solid rgba(32,213,115,.45); padding: 10px 14px; border-radius: 10px; box-shadow: 0 0 20px rgba(32,213,115,.08); }
.nav-cta span { padding-left: 6px; font-size: 15px; }
.menu-toggle { display: none; background: none; border: 0; padding: 8px; } .menu-toggle span:not(.sr-only) { display: block; width: 22px; height: 2px; background: var(--soft); margin: 4px; }
.section-pad { padding-top: 120px; padding-bottom: 120px; }
.hero { min-height: 650px; display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: 60px; padding-top: 86px; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--teal); font: 600 11px 'Space Grotesk', sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow.purple { color: var(--violet-soft); } .eyebrow.amber { color: var(--amber-soft); }
.pulse-dot, .square-dot { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; background: var(--teal); border-radius: 50%; box-shadow: 0 0 0 5px rgba(32,213,115,.10), 0 0 16px var(--teal); }
.eyebrow.purple .square-dot { background: var(--violet); box-shadow: 0 0 0 5px rgba(138,43,226,.11), 0 0 16px var(--violet); border-radius: 2px; }
.eyebrow.amber .square-dot { background: var(--amber); box-shadow: 0 0 0 5px rgba(255,165,2,.10), 0 0 16px var(--amber); border-radius: 2px; }
.hero h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; margin: 0; letter-spacing: -.045em; }
.hero h1 { max-width: 660px; font-size: clamp(4rem, 7vw, 6.7rem); line-height: .94; margin: 25px 0 28px; font-weight: 600; }
.hero h1 em, h2 em { color: var(--teal); font-style: normal; }
.hero-lede { max-width: 560px; color: var(--soft); font-size: 18px; line-height: 1.65; margin: 0 0 34px; }
.hero-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 50px; padding: 0 20px; border-radius: 10px; border: 1px solid transparent; font: 700 13px 'Space Grotesk', sans-serif; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.button:hover { transform: translateY(-3px); } .button-primary { color: #06110c; background: var(--teal); box-shadow: 0 0 28px rgba(32,213,115,.24); } .button-primary:hover { box-shadow: 0 0 38px rgba(32,213,115,.42); }
.button-secondary { color: var(--white); border-color: rgba(32,213,115,.55); background: rgba(32,213,115,.07); } .button-secondary:hover { background: rgba(32,213,115,.15); }
.text-link, .story-link { color: var(--soft); font-size: 14px; } .text-link span, .story-link span { color: var(--teal); padding-left: 7px; transition: padding .25s ease; } .text-link:hover span, .story-link:hover span { padding-left: 12px; }
.hero-proof { display: flex; align-items: center; gap: 10px; margin-top: 48px; color: var(--muted); font-size: 12px; }
.proof-avatar { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--teal); border-radius: 50%; color: var(--teal); font: 700 9px 'Space Grotesk', sans-serif; }
.hero-visual { position: relative; min-height: 510px; display: grid; place-items: center; }
.hero-logo-frame { position: relative; z-index: 3; width: min(380px, 72%); aspect-ratio: 1; border-radius: 50%; padding: 14px; background: linear-gradient(145deg, rgba(32,213,115,.22), rgba(138,43,226,.28) 46%, rgba(255,165,2,.13)); box-shadow: 0 0 90px rgba(32,213,115,.10); }
.hero-logo-frame::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(32,213,115,.40); border-radius: 50%; animation: spin 18s linear infinite; }
.hero-logo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 4px solid var(--panel); filter: saturate(.88) contrast(1.05); }
.hero-orbit { position: absolute; border: 1px solid rgba(32,213,115,.22); border-radius: 50%; transform: rotate(-20deg); }
.orbit-a { width: 540px; height: 230px; } .orbit-b { width: 490px; height: 320px; border-color: rgba(138,43,226,.25); transform: rotate(60deg); }
.signal-card { position: absolute; z-index: 4; display: flex; flex-direction: column; gap: 7px; min-width: 168px; padding: 15px 17px; border: 1px solid rgba(126,158,191,.30); border-radius: 13px; background: rgba(11,21,31,.86); backdrop-filter: blur(14px); box-shadow: 0 20px 45px rgba(0,0,0,.25); }
.signal-card strong { font: 600 15px 'Space Grotesk', sans-serif; } .signal-card small { color: var(--muted); font-size: 10px; }.mini-label { color: var(--teal); font: 600 9px 'Space Grotesk', sans-serif; letter-spacing: .16em; }.signal-card-top { top: 70px; right: -8px; }.signal-card-bottom { bottom: 66px; left: -6px; }.signal-line { display: flex; align-items: end; gap: 3px; height: 22px; }.signal-line i { display: block; width: 9px; border-radius: 2px; background: var(--teal); box-shadow: 0 0 8px rgba(32,213,115,.4); }.signal-line i:nth-child(1) { height: 8px; }.signal-line i:nth-child(2) { height: 15px; }.signal-line i:nth-child(3) { height: 11px; }.signal-line i:nth-child(4) { height: 19px; }.signal-line i:nth-child(5) { height: 14px; }.signal-line i:nth-child(6) { height: 22px; }.signal-line i:nth-child(7) { height: 17px; }.mode-chip { display: inline-flex; align-items: center; gap: 7px; color: var(--amber-soft); font-size: 10px; }.mode-chip .pulse-dot { width: 5px; height: 5px; background: var(--amber); box-shadow: none; }
.hero-crosshair { position: absolute; z-index: 2; color: var(--teal); font: 22px 'Space Grotesk', sans-serif; opacity: .8; }.crosshair-one { top: 28px; left: 20%; }.crosshair-two { bottom: 35px; right: 20%; color: var(--violet-soft); }
.signal-rail { display: flex; align-items: center; gap: 28px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font: 500 11px 'Space Grotesk', sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; }.signal-rail b { color: var(--teal); padding-left: 8px; }.signal-rail .rail-label { color: var(--soft); font-size: 10px; letter-spacing: .16em; }.signal-rail .rail-accent { color: var(--amber); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 45px; margin-bottom: 46px; }.section-heading h2, .community-copy h2, .system-copy h2 { margin-top: 18px; font-size: clamp(2.8rem, 5vw, 4.5rem); line-height: .98; font-weight: 600; }.section-heading p { max-width: 335px; margin: 0 0 4px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.track-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.track-card { position: relative; overflow: hidden; min-height: 360px; display: flex; flex-direction: column; padding: 24px; border: 1px solid; border-radius: var(--radius-lg); background: linear-gradient(155deg, rgba(21,35,48,.9), rgba(9,17,26,.94)); transition: transform .3s ease, box-shadow .3s ease; }.track-card:hover { transform: translateY(-8px); }.track-card::after { content: ''; position: absolute; width: 180px; height: 180px; right: -72px; bottom: -72px; border-radius: 50%; filter: blur(8px); opacity: .15; }.track-card-teal { border-color: rgba(32,213,115,.75); box-shadow: var(--shadow-teal); }.track-card-teal::after { background: var(--teal); }.track-card-violet { border-color: rgba(138,43,226,.80); box-shadow: var(--shadow-violet); }.track-card-violet::after { background: var(--violet); }.track-card-amber { border-color: rgba(255,165,2,.80); box-shadow: var(--shadow-amber); }.track-card-amber::after { background: var(--amber); }.card-topline, .card-footer { display: flex; align-items: center; justify-content: space-between; }.track-number { color: var(--muted); font: 600 11px 'Space Grotesk', sans-serif; letter-spacing: .16em; }.card-arrow { color: var(--soft); font-size: 19px; }.track-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 62px; height: 62px; margin: 55px 0 22px; border: 1px solid currentColor; border-radius: 18px; font: 400 30px 'Space Grotesk', sans-serif; }.track-card-teal .track-icon { color: var(--teal); }.track-card-violet .track-icon { color: var(--violet-soft); }.track-card-amber .track-icon { color: var(--amber); }.track-card h3 { position: relative; z-index: 1; font-size: 27px; line-height: 1.07; }.track-card p { position: relative; z-index: 1; margin: 15px 0 28px; color: var(--muted); font-size: 14px; }.card-footer { position: relative; z-index: 1; margin-top: auto; padding-top: 17px; border-top: 1px solid rgba(144,160,183,.18); color: var(--soft); font-size: 11px; }.track-card-teal .footer-arrow { color: var(--teal); }.track-card-violet .footer-arrow { color: var(--violet-soft); }.track-card-amber .footer-arrow { color: var(--amber); }
.story-section { padding-bottom: 110px; }.filter-row { display: flex; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; }.filter-button { border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; color: var(--muted); background: transparent; font-size: 12px; transition: all .22s ease; }.filter-button:hover, .filter-button.active { border-color: var(--teal); color: var(--teal); background: rgba(32,213,115,.08); }.story-grid { display: grid; grid-template-columns: 1.38fr .81fr .81fr; gap: 16px; }.story-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(14,22,33,.75); transition: transform .3s ease, border-color .3s ease; }.story-card:hover { transform: translateY(-5px); border-color: rgba(200,211,227,.5); }.story-card.hidden { display: none; }.story-featured { grid-row: span 2; display: grid; grid-template-rows: 250px 1fr; }.story-art { position: relative; min-height: 150px; overflow: hidden; }.art-teal { background: linear-gradient(135deg, #0e584a, #092a33 68%, #09151d); }.art-violet { background: linear-gradient(135deg, #321274, #160c35); }.art-amber { background: linear-gradient(135deg, #693b05, #24170b); }.art-mix { background: linear-gradient(135deg, #163d4f, #27184c); }.art-grid { position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(rgba(116,244,187,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(116,244,187,.3) 1px, transparent 1px); background-size: 31px 31px; transform: perspective(300px) rotateX(50deg) scale(1.4); transform-origin: center bottom; }.art-orb { position: absolute; right: 16%; top: 16%; width: 120px; height: 120px; border: 1px solid var(--teal); border-radius: 50%; box-shadow: 0 0 35px rgba(32,213,115,.4), inset 0 0 30px rgba(32,213,115,.24); }.art-orb::after { content: ''; position: absolute; inset: 22px; border-radius: 50%; border: 1px dashed rgba(116,244,187,.7); }.art-word { position: absolute; bottom: 20px; left: 24px; color: var(--teal-soft); font: 700 27px/1 'Space Grotesk', sans-serif; letter-spacing: -.08em; }.art-cube { position: absolute; right: 18%; top: 22%; color: var(--violet-soft); font-size: 90px; filter: drop-shadow(0 0 18px rgba(138,43,226,.8)); transform: rotate(18deg); }.art-glow { position: absolute; left: 18%; bottom: 10%; width: 85px; height: 20px; border-radius: 50%; background: var(--violet); filter: blur(17px); }.art-bulb { position: absolute; right: 20%; top: 19%; color: var(--amber); font-size: 80px; filter: drop-shadow(0 0 14px rgba(255,165,2,.72)); }.art-rays { position: absolute; left: 15%; bottom: 25%; color: var(--amber-soft); font: 700 28px 'Space Grotesk', sans-serif; transform: rotate(-24deg); }.art-stack { position: absolute; right: 20%; top: 24%; color: var(--teal-soft); font-size: 90px; filter: drop-shadow(0 0 16px rgba(32,213,115,.45)); }.art-scan { position: absolute; inset: 20% 0 auto; height: 1px; background: var(--teal); box-shadow: 0 0 14px var(--teal); transform: rotate(-18deg); }.story-content { padding: 20px; }.story-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font: 500 10px 'Space Grotesk', sans-serif; letter-spacing: .08em; text-transform: uppercase; }.tag { padding: 5px 8px; border: 1px solid; border-radius: 5px; }.tag-teal { color: var(--teal); border-color: rgba(32,213,115,.5); }.tag-violet { color: var(--violet-soft); border-color: rgba(189,128,255,.5); }.tag-amber { color: var(--amber); border-color: rgba(255,165,2,.5); }.story-card h3 { margin: 17px 0 14px; font-size: 19px; line-height: 1.15; }.story-featured h3 { max-width: 590px; font-size: clamp(25px, 3vw, 34px); }.story-card p { margin: 0 0 23px; color: var(--muted); font-size: 14px; }.story-link { display: inline-block; color: var(--soft); font-size: 12px; }
.system-section { padding-top: 30px; }.system-panel { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; align-items: center; overflow: hidden; padding: 60px; border: 1px solid rgba(32,213,115,.48); border-radius: var(--radius-lg); background: linear-gradient(120deg, rgba(15,31,34,.98), rgba(14,21,35,.96)); box-shadow: var(--shadow-teal); }.system-panel::before { content: ''; position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(32,213,115,.25) 1px, transparent 1px), linear-gradient(90deg, rgba(32,213,115,.25) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(90deg, #000, transparent 66%); }.system-copy, .system-map { position: relative; z-index: 1; }.system-copy h2 { font-size: clamp(2.7rem, 4.5vw, 4.3rem); }.system-copy p { max-width: 420px; margin: 25px 0 30px; color: var(--muted); font-size: 15px; }.system-map { min-height: 350px; }.map-node { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 3px; width: 140px; padding: 15px; border: 1px solid; border-radius: 12px; background: rgba(8,13,20,.8); box-shadow: 0 0 22px rgba(0,0,0,.25); }.map-node strong { font: 600 12px 'Space Grotesk', sans-serif; letter-spacing: .12em; }.map-node small { color: var(--muted); font-size: 10px; }.node-icon { font-size: 23px; }.node-idea { top: 32px; left: 4%; color: var(--teal); border-color: rgba(32,213,115,.6); }.node-make { right: 0; top: 120px; color: var(--violet-soft); border-color: rgba(189,128,255,.6); }.node-scale { left: 17%; bottom: 16px; color: var(--amber); border-color: rgba(255,165,2,.6); }.map-center { position: absolute; inset: 96px 26% auto; display: grid; place-items: center; width: 132px; height: 132px; border: 1px dashed rgba(32,213,115,.7); border-radius: 50%; color: var(--teal); background: rgba(32,213,115,.05); text-align: center; box-shadow: 0 0 35px rgba(32,213,115,.14); font: 700 25px 'Space Grotesk', sans-serif; }.map-center small { display: block; color: var(--muted); font: 500 9px/1.2 'DM Sans', sans-serif; letter-spacing: .08em; text-transform: uppercase; }.map-line { position: absolute; height: 1px; background: linear-gradient(90deg, var(--teal), rgba(32,213,115,.06)); transform-origin: left center; opacity: .7; }.line-one { left: 25%; top: 113px; width: 120px; transform: rotate(20deg); }.line-two { left: 46%; top: 168px; width: 110px; transform: rotate(-26deg); background: linear-gradient(90deg, var(--violet-soft), rgba(189,128,255,.06)); }.line-three { left: 31%; top: 240px; width: 130px; transform: rotate(-44deg); background: linear-gradient(90deg, var(--amber), rgba(255,165,2,.06)); }
.signal-section { padding-top: 120px; }.metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.metric-card { padding: 34px 28px; border-right: 1px solid var(--line); }.metric-card:last-child { border-right: 0; }.metric-value { display: block; margin-bottom: 7px; color: var(--white); font: 600 clamp(3.2rem, 6vw, 5.5rem)/.95 'Space Grotesk', sans-serif; }.metric-label { display: block; color: var(--muted); font-size: 13px; }.metric-bar { height: 3px; margin-top: 25px; background: rgba(32,213,115,.14); }.metric-bar i { display: block; height: 100%; background: var(--teal); box-shadow: 0 0 10px var(--teal); }.metric-bar.violet { background: rgba(138,43,226,.16); }.metric-bar.violet i { background: var(--violet); box-shadow: 0 0 10px var(--violet); }.metric-bar.amber { background: rgba(255,165,2,.16); }.metric-bar.amber i { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.community-section { padding-top: 110px; padding-bottom: 95px; }.community-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr .92fr; gap: 70px; align-items: center; padding: 64px; border: 1px solid rgba(138,43,226,.64); border-radius: var(--radius-lg); background: linear-gradient(125deg, rgba(31,19,62,.86), rgba(12,19,30,.97) 64%); box-shadow: var(--shadow-violet); }.community-grid-mark { position: absolute; right: -4%; top: -24%; width: 460px; height: 460px; border: 1px solid rgba(189,128,255,.23); border-radius: 50%; box-shadow: 0 0 0 45px rgba(189,128,255,.03), 0 0 0 90px rgba(189,128,255,.025), 0 0 0 135px rgba(189,128,255,.02); }.community-copy, .community-form { position: relative; z-index: 1; }.community-copy h2 { font-size: clamp(2.8rem, 5vw, 4.5rem); }.community-copy h2 em { color: var(--violet-soft); }.community-copy p { max-width: 470px; margin: 24px 0 0; color: var(--soft); font-size: 16px; line-height: 1.7; }.community-form { padding: 24px; border: 1px solid rgba(189,128,255,.25); border-radius: 14px; background: rgba(8,13,20,.5); }.community-form label { display: block; margin-bottom: 13px; color: var(--soft); font: 600 13px 'Space Grotesk', sans-serif; }.form-row { display: flex; gap: 8px; }.form-row input { min-width: 0; flex: 1; height: 50px; padding: 0 15px; border: 1px solid var(--line); border-radius: 9px; color: var(--white); background: var(--panel); outline: none; }.form-row input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(32,213,115,.11); }.form-row .button { min-width: 96px; padding: 0 15px; }.community-form small { display: block; margin-top: 14px; color: var(--muted); font-size: 11px; }.community-form.success { border-color: rgba(32,213,115,.7); }.community-form.success small { color: var(--teal-soft); }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0 30px; border-top: 1px solid var(--line); color: var(--muted); font: 500 10px 'Space Grotesk', sans-serif; letter-spacing: .12em; text-transform: uppercase; }.site-footer .brand-lockup { font-size: 10px; }.site-footer .brand-mark { width: 28px; height: 28px; font-size: 9px; }
.toast { position: fixed; z-index: 30; right: 24px; bottom: 24px; max-width: 300px; padding: 14px 16px; border: 1px solid rgba(32,213,115,.6); border-radius: 10px; color: var(--white); background: #101d1a; box-shadow: var(--shadow-teal); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s ease, transform .25s ease; font-size: 13px; }.toast.visible { opacity: 1; transform: translateY(0); }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }.reveal.is-visible { opacity: 1; transform: translateY(0); }.reveal-delay-1 { transition-delay: .10s; }.reveal-delay-2 { transition-delay: .18s; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .site-header, .section-pad, .signal-rail, .site-footer { width: min(100% - 40px, 720px); }.hero { grid-template-columns: 1fr; padding-top: 72px; }.hero-copy { max-width: 650px; }.hero-visual { min-height: 460px; }.section-heading { align-items: start; flex-direction: column; gap: 20px; }.section-heading p { max-width: 500px; }.track-grid { grid-template-columns: 1fr; }.track-card { min-height: 290px; }.track-icon { margin-top: 35px; }.story-grid { grid-template-columns: 1fr 1fr; }.story-featured { grid-row: auto; grid-column: span 2; grid-template-columns: 1fr 1fr; grid-template-rows: auto; }.system-panel { grid-template-columns: 1fr; padding: 44px; }.system-map { min-height: 330px; }.community-card { grid-template-columns: 1fr; gap: 30px; padding: 44px; }.primary-nav { gap: 18px; } }
@media (max-width: 650px) { .site-header, .section-pad, .signal-rail, .site-footer { width: calc(100% - 32px); }.site-header { padding: 20px 0; }.menu-toggle { display: block; }.primary-nav { position: absolute; top: 78px; right: 0; left: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(8,13,20,.97); box-shadow: 0 18px 30px rgba(0,0,0,.3); }.primary-nav.open { display: flex; }.primary-nav a { padding: 13px 12px; }.nav-cta { text-align: center; margin-top: 6px; }.hero { min-height: auto; padding-top: 60px; }.hero h1 { font-size: clamp(3.3rem, 16vw, 5.6rem); }.hero-lede { font-size: 16px; }.hero-visual { min-height: 380px; margin: 16px -16px 0; }.hero-logo-frame { width: min(280px, 66%); }.orbit-a { width: 420px; height: 180px; }.orbit-b { width: 380px; height: 250px; }.signal-card { min-width: 132px; padding: 11px 12px; }.signal-card-top { top: 28px; right: 0; }.signal-card-bottom { bottom: 28px; left: 0; }.signal-card strong { font-size: 12px; }.signal-rail { gap: 18px; font-size: 9px; }.signal-rail .rail-label { display: none; }.section-pad { padding-top: 85px; padding-bottom: 85px; }.section-heading h2, .community-copy h2, .system-copy h2 { font-size: 3rem; }.story-grid { grid-template-columns: 1fr; }.story-featured { grid-column: auto; display: block; }.story-featured .story-art { min-height: 205px; }.story-card h3, .story-featured h3 { font-size: 23px; }.system-panel, .community-card { padding: 28px 22px; }.system-map { margin: 0 -16px; transform: scale(.88); transform-origin: top center; min-height: 300px; }.node-make { right: 2%; }.map-center { right: 25%; }.metrics-grid { grid-template-columns: 1fr; }.metric-card { border-right: 0; border-bottom: 1px solid var(--line); }.metric-card:last-child { border-bottom: 0; }.community-section { padding-top: 82px; }.form-row { flex-direction: column; }.form-row .button { width: 100%; }.site-footer { flex-wrap: wrap; justify-content: center; padding-bottom: 24px; text-align: center; }.site-footer .brand-lockup { width: 100%; justify-content: center; }.ambient-one { right: -20rem; }.ambient-two { left: -20rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.reveal { opacity: 1; transform: none; transition: none; }.hero-logo-frame::before { animation: none; }.track-card, .story-card, .button { transition: none; } }

/* Start Here page */
.active-nav { color: var(--teal) !important; }
.start-hero { min-height: 610px; display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: 70px; padding-top: 90px; }
.start-hero-copy h1 { max-width: 680px; margin: 24px 0 28px; font: 600 clamp(3.4rem, 6vw, 5.7rem)/.96 'Space Grotesk', sans-serif; letter-spacing: -.055em; }
.start-hero-copy h1 em { color: var(--teal); font-style: normal; }
.start-note { display: flex; align-items: center; gap: 14px; max-width: 350px; margin-top: 42px; padding-top: 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.note-number { color: var(--teal); font: 600 11px 'Space Grotesk', sans-serif; letter-spacing: .14em; }
.start-map { position: relative; min-height: 470px; }
.start-map-ring { position: absolute; inset: 47px 12px 45px 8px; border: 1px solid rgba(32,213,115,.34); border-radius: 50%; transform: rotate(-19deg); box-shadow: 0 0 50px rgba(32,213,115,.08), inset 0 0 55px rgba(138,43,226,.05); }
.start-map-ring::before, .start-map-ring::after { content: ''; position: absolute; inset: 35px 70px; border: 1px dashed rgba(138,43,226,.42); border-radius: 50%; transform: rotate(62deg); }
.start-map-ring::after { inset: 72px 24px; border-color: rgba(255,165,2,.35); transform: rotate(-47deg); }
.start-map-center { inset: 142px auto auto 35%; width: 148px; height: 148px; border-color: rgba(32,213,115,.82); background: radial-gradient(circle, rgba(32,213,115,.12), rgba(8,13,20,.88) 68%); }
.start-orbit-label { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 3px; min-width: 154px; padding: 14px 15px; border: 1px solid var(--line); border-radius: 11px; background: rgba(8,13,20,.86); backdrop-filter: blur(12px); box-shadow: 0 15px 35px rgba(0,0,0,.22); }
.start-orbit-label span { font: 600 10px 'Space Grotesk', sans-serif; letter-spacing: .12em; }
.start-orbit-label strong { font: 600 15px 'Space Grotesk', sans-serif; }
.start-orbit-label small { color: var(--muted); font-size: 10px; }
.label-make { top: 48px; left: 2%; color: var(--teal); border-color: rgba(32,213,115,.6); }
.label-automate { top: 188px; right: 0; color: var(--violet-soft); border-color: rgba(189,128,255,.6); }
.label-grow { bottom: 36px; left: 15%; color: var(--amber); border-color: rgba(255,165,2,.6); }
.path-section { padding-top: 70px; }
.path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.path-card { min-height: 415px; display: flex; flex-direction: column; padding: 26px; border: 1px solid; border-radius: var(--radius-lg); background: linear-gradient(155deg, rgba(21,35,48,.95), rgba(9,17,26,.98)); transition: transform .3s ease, box-shadow .3s ease; }
.path-card:hover { transform: translateY(-7px); }
.path-card-teal { border-color: rgba(32,213,115,.7); box-shadow: var(--shadow-teal); }.path-card-violet { border-color: rgba(138,43,226,.8); box-shadow: var(--shadow-violet); }.path-card-amber { border-color: rgba(255,165,2,.8); box-shadow: var(--shadow-amber); }
.path-number { font: 600 10px 'Space Grotesk', sans-serif; letter-spacing: .14em; color: var(--muted); }
.path-card-icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 54px 0 22px; border: 1px solid currentColor; border-radius: 17px; font: 400 27px 'Space Grotesk', sans-serif; }.path-card-teal .path-card-icon { color: var(--teal); }.path-card-violet .path-card-icon { color: var(--violet-soft); }.path-card-amber .path-card-icon { color: var(--amber); }
.path-card h3 { font-size: 26px; line-height: 1.05; }.path-card p { margin: 15px 0 22px; color: var(--muted); font-size: 14px; }.path-details { margin-top: auto; padding: 14px 0 18px; border-top: 1px solid rgba(144,160,183,.18); }.path-details span { display: block; margin-bottom: 5px; color: var(--muted); font: 600 9px 'Space Grotesk', sans-serif; letter-spacing: .13em; text-transform: uppercase; }.path-details strong { color: var(--soft); font: 500 12px 'DM Sans', sans-serif; }.button-small { align-self: flex-start; min-height: 40px; padding: 0 14px; font-size: 11px; color: var(--white); border-color: var(--line); background: rgba(255,255,255,.03); }.path-card-teal .button-small:hover { border-color: var(--teal); color: var(--teal); }.path-card-violet .button-small:hover { border-color: var(--violet-soft); color: var(--violet-soft); }.path-card-amber .button-small:hover { border-color: var(--amber); color: var(--amber); }
.promise-section { padding-top: 10px; }.promise-panel { position: relative; overflow: hidden; padding: 58px; border: 1px solid rgba(32,213,115,.5); border-radius: var(--radius-lg); background: linear-gradient(120deg, rgba(15,31,34,.95), rgba(14,21,35,.96)); box-shadow: var(--shadow-teal); }.promise-panel::after { content: ''; position: absolute; right: -100px; top: -170px; width: 470px; height: 470px; border: 1px solid rgba(32,213,115,.2); border-radius: 50%; box-shadow: 0 0 0 45px rgba(32,213,115,.025), 0 0 0 90px rgba(32,213,115,.02); }.promise-panel h2 { position: relative; z-index: 1; margin: 18px 0 35px; font: 600 clamp(2.8rem, 5vw, 4.6rem)/.98 'Space Grotesk', sans-serif; }.promise-panel h2 em { color: var(--teal); font-style: normal; }.promise-steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); max-width: 800px; margin-bottom: 30px; border-top: 1px solid rgba(144,160,183,.2); border-bottom: 1px solid rgba(144,160,183,.2); }.promise-steps > div { padding: 20px 20px 20px 0; border-right: 1px solid rgba(144,160,183,.2); }.promise-steps > div:not(:first-child) { padding-left: 20px; }.promise-steps > div:last-child { border-right: 0; }.promise-steps span { display: block; margin-bottom: 12px; color: var(--teal); font: 600 10px 'Space Grotesk', sans-serif; letter-spacing: .12em; }.promise-steps strong { font: 600 16px 'Space Grotesk', sans-serif; }.promise-steps p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
@media (max-width: 900px) { .start-hero { grid-template-columns: 1fr; gap: 20px; }.start-map { min-height: 420px; max-width: 600px; width: 100%; margin: 0 auto; }.path-grid { grid-template-columns: 1fr; }.path-card { min-height: 330px; }.path-card-icon { margin-top: 32px; }.promise-panel { padding: 44px; } }
@media (max-width: 650px) { .start-hero { padding-top: 58px; }.start-hero-copy h1 { font-size: clamp(3.1rem, 15vw, 5rem); }.start-map { min-height: 355px; transform: scale(.88); transform-origin: top center; margin-bottom: -42px; }.start-map-center { left: 30%; }.label-make { left: 0; }.label-automate { right: -5px; }.label-grow { left: 8%; }.path-section { padding-top: 40px; }.promise-panel { padding: 30px 22px; }.promise-steps { grid-template-columns: 1fr; }.promise-steps > div, .promise-steps > div:not(:first-child) { padding: 15px 0; border-right: 0; border-bottom: 1px solid rgba(144,160,183,.2); }.promise-steps > div:last-child { border-bottom: 0; } }

/* AI Content learning track */
.breadcrumb { display: flex; gap: 10px; margin-bottom: 30px; color: var(--muted); font: 500 11px 'Space Grotesk', sans-serif; letter-spacing: .08em; }.breadcrumb a { color: var(--teal); }.breadcrumb span { opacity: .55; }
.track-hero { min-height: 650px; display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: 70px; padding-top: 86px; }.track-hero-copy h1 { max-width: 650px; margin: 22px 0 28px; font: 600 clamp(3.5rem, 6.5vw, 6rem)/.92 'Space Grotesk', sans-serif; letter-spacing: -.06em; }.track-hero-copy h1 em { color: var(--teal); font-style: normal; }
.track-hero-visual { position: relative; min-height: 450px; display: grid; place-items: center; }.production-window { width: min(440px, 90%); border: 1px solid rgba(32,213,115,.56); border-radius: 16px; overflow: hidden; background: rgba(10,20,28,.91); box-shadow: var(--shadow-teal), 20px 20px 0 rgba(138,43,226,.05); transform: rotate(3deg); }.window-bar { display: flex; align-items: center; gap: 6px; padding: 14px 15px; border-bottom: 1px solid var(--line); }.window-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }.window-dot:nth-child(2) { background: var(--violet); }.window-dot:nth-child(3) { background: var(--amber); }.window-bar small { margin-left: auto; color: var(--muted); font: 500 9px 'Space Grotesk', sans-serif; letter-spacing: .1em; }.production-canvas { position: relative; height: 290px; overflow: hidden; background: linear-gradient(145deg, #0d4d48, #111b36 55%, #28113d); }.canvas-grid { position: absolute; inset: 0; opacity: .32; background-image: linear-gradient(rgba(116,244,187,.28) 1px, transparent 1px), linear-gradient(90deg, rgba(116,244,187,.28) 1px, transparent 1px); background-size: 31px 31px; transform: perspective(330px) rotateX(53deg) scale(1.55); transform-origin: center bottom; }.canvas-label { position: absolute; left: 25px; bottom: 28px; color: var(--white); font: 700 32px/.9 'Space Grotesk', sans-serif; letter-spacing: -.08em; }.canvas-label span { color: var(--teal); }.canvas-shape { position: absolute; border: 1px solid; transform: rotate(28deg); }.shape-one { top: 55px; right: 66px; width: 120px; height: 150px; border-color: var(--teal); box-shadow: 0 0 28px rgba(32,213,115,.35), inset 0 0 22px rgba(32,213,115,.12); }.shape-one::after { content: ''; position: absolute; inset: 16px; border: 1px dashed rgba(116,244,187,.6); }.shape-two { top: 89px; right: 113px; width: 90px; height: 90px; border-color: var(--violet-soft); box-shadow: 0 0 24px rgba(138,43,226,.4); transform: rotate(12deg); }.canvas-arrow { position: absolute; right: 27px; bottom: 23px; color: var(--amber); font: 700 39px 'Space Grotesk', sans-serif; }.production-footer { display: flex; align-items: center; gap: 8px; padding: 14px 15px; color: var(--muted); font: 500 10px 'Space Grotesk', sans-serif; letter-spacing: .07em; text-transform: uppercase; }.production-footer i { flex: 1; height: 1px; background: var(--line); }.production-footer strong { color: var(--teal); }.visual-caption { position: absolute; right: 0; bottom: 25px; display: flex; gap: 10px; align-items: center; padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px; background: rgba(8,13,20,.9); color: var(--muted); font-size: 11px; line-height: 1.45; }.visual-caption b { color: var(--white); font-weight: 500; }.visual-caption .pulse-dot { width: 5px; height: 5px; box-shadow: none; }
.first-win-section { padding-top: 35px; }.first-win-panel { position: relative; overflow: hidden; padding: 58px; border: 1px solid rgba(255,165,2,.58); border-radius: var(--radius-lg); background: linear-gradient(125deg, rgba(48,32,10,.82), rgba(15,21,31,.98) 60%); box-shadow: var(--shadow-amber); }.first-win-panel::after { content: ''; position: absolute; right: -110px; bottom: -170px; width: 430px; height: 430px; border: 1px solid rgba(255,165,2,.22); border-radius: 50%; box-shadow: 0 0 0 45px rgba(255,165,2,.025), 0 0 0 90px rgba(255,165,2,.02); }.first-win-panel h2 { margin: 18px 0 20px; font: 600 clamp(2.8rem, 5vw, 4.6rem)/.98 'Space Grotesk', sans-serif; }.first-win-panel h2 em { color: var(--amber); font-style: normal; }.first-win-layout { position: relative; z-index: 1; display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }.first-win-layout p { max-width: 440px; color: var(--soft); font-size: 15px; line-height: 1.7; }.output-stack { display: flex; flex-direction: column; gap: 10px; }.output-card { display: grid; grid-template-columns: 92px 1fr; column-gap: 15px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; background: rgba(8,13,20,.68); }.output-card span { grid-row: span 2; color: var(--amber); font: 600 9px 'Space Grotesk', sans-serif; letter-spacing: .1em; }.output-card strong { font: 600 14px 'Space Grotesk', sans-serif; }.output-card small { margin-top: 4px; color: var(--muted); font-size: 11px; }.output-video { margin-left: 28px; border-color: rgba(138,43,226,.45); }.output-video span { color: var(--violet-soft); }.output-carousel { margin-left: 56px; border-color: rgba(32,213,115,.45); }.output-carousel span { color: var(--teal); }
.curriculum-section { padding-top: 105px; }.lesson-list { border-top: 1px solid var(--line); }.lesson-row { display: grid; grid-template-columns: 72px 1fr 90px; gap: 25px; align-items: center; padding: 25px 0; border-bottom: 1px solid var(--line); transition: padding .25s ease, background .25s ease; }.lesson-row:hover { padding-left: 15px; background: rgba(255,255,255,.018); }.lesson-index { color: var(--muted); font: 600 20px 'Space Grotesk', sans-serif; }.lesson-current .lesson-index { color: var(--teal); }.lesson-main h3 { margin: 4px 0 7px; font-size: 22px; }.lesson-main p { max-width: 670px; margin: 0; color: var(--muted); font-size: 13px; }.lesson-tag { color: var(--muted); font: 600 9px 'Space Grotesk', sans-serif; letter-spacing: .13em; }.lesson-current .lesson-tag { color: var(--teal); }.lesson-status { justify-self: end; color: var(--muted); font: 500 11px 'Space Grotesk', sans-serif; }.lesson-current .lesson-status { color: var(--teal); }.lesson-status span { padding-left: 8px; }
.principles-section { padding-top: 35px; }.principles-panel { display: grid; grid-template-columns: .82fr 1.18fr; gap: 70px; padding: 58px; border: 1px solid rgba(138,43,226,.58); border-radius: var(--radius-lg); background: linear-gradient(125deg, rgba(31,19,62,.86), rgba(12,19,30,.97) 68%); box-shadow: var(--shadow-violet); }.principles-panel h2 { margin: 18px 0 0; font: 600 clamp(2.7rem, 4.5vw, 4.2rem)/.98 'Space Grotesk', sans-serif; }.principles-panel h2 em { color: var(--violet-soft); font-style: normal; }.principle-list > div { padding: 15px 0 17px; border-bottom: 1px solid rgba(144,160,183,.2); }.principle-list > div:last-child { border-bottom: 0; }.principle-list span { display: inline-block; width: 38px; color: var(--violet-soft); font: 600 10px 'Space Grotesk', sans-serif; }.principle-list strong { font: 600 15px 'Space Grotesk', sans-serif; }.principle-list p { margin: 6px 0 0 38px; color: var(--muted); font-size: 12px; }
@media (max-width: 900px) { .track-hero { grid-template-columns: 1fr; gap: 28px; }.track-hero-visual { min-height: 400px; max-width: 600px; }.first-win-layout, .principles-panel { grid-template-columns: 1fr; gap: 28px; }.first-win-panel, .principles-panel { padding: 44px; } }
@media (max-width: 650px) { .breadcrumb { margin-bottom: 22px; }.track-hero { padding-top: 58px; }.track-hero-copy h1 { font-size: clamp(3rem, 14vw, 5rem); }.track-hero-visual { min-height: 330px; }.production-window { width: 95%; }.production-canvas { height: 220px; }.canvas-label { font-size: 25px; }.shape-one { right: 40px; width: 90px; height: 120px; }.shape-two { right: 75px; width: 65px; height: 65px; }.visual-caption { right: -4px; bottom: 4px; }.first-win-panel, .principles-panel { padding: 30px 22px; }.output-video { margin-left: 14px; }.output-carousel { margin-left: 28px; }.lesson-row { grid-template-columns: 42px 1fr; gap: 12px; }.lesson-status { grid-column: 2; justify-self: start; }.lesson-main h3 { font-size: 19px; }.lesson-main p { font-size: 12px; } }

/* Multi-Agent AI Workflows track */
.workflow-hero .track-hero-copy h1 em { color: var(--violet-soft); }.workflow-hero .track-hero-copy .hero-lede { max-width: 530px; }.workflow-hero-visual { position: relative; min-height: 470px; display: grid; place-items: center; }.workflow-console { width: min(460px, 94%); overflow: hidden; border: 1px solid rgba(138,43,226,.7); border-radius: 16px; background: rgba(11,15,27,.94); box-shadow: var(--shadow-violet); transform: rotate(-2deg); }.console-header, .console-footer { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; color: var(--muted); font: 500 9px 'Space Grotesk', sans-serif; letter-spacing: .1em; }.console-header { border-bottom: 1px solid var(--line); }.console-status { color: var(--violet-soft); }.console-status i, .console-footer i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px var(--teal); }.console-body { position: relative; min-height: 340px; background: radial-gradient(circle at 53% 48%, rgba(138,43,226,.14), transparent 40%); }.agent-node { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 3px; width: 128px; padding: 11px 12px; border: 1px solid; border-radius: 9px; background: rgba(8,13,20,.92); }.agent-node span { font: 600 9px 'Space Grotesk', sans-serif; letter-spacing: .1em; }.agent-node strong { font: 600 12px 'Space Grotesk', sans-serif; }.agent-node small { color: var(--muted); font-size: 9px; line-height: 1.3; }.node-input { top: 25px; left: 20px; color: var(--teal); border-color: rgba(32,213,115,.6); }.node-research { top: 120px; right: 18px; color: var(--violet-soft); border-color: rgba(189,128,255,.6); }.node-draft { bottom: 25px; left: 24px; color: var(--amber); border-color: rgba(255,165,2,.6); }.node-review { bottom: 28px; right: 19px; color: var(--teal-soft); border-color: rgba(116,244,187,.55); }.node-output { top: 138px; left: 34%; color: var(--white); border-color: rgba(200,211,227,.4); box-shadow: 0 0 25px rgba(138,43,226,.2); }.flow-line { position: absolute; z-index: 1; display: block; height: 1px; transform-origin: left center; background: linear-gradient(90deg, currentColor, transparent); opacity: .75; }.flow-a { top: 75px; left: 30%; width: 130px; color: var(--teal); transform: rotate(25deg); }.flow-b { top: 185px; left: 61%; width: 95px; color: var(--violet-soft); transform: rotate(-19deg); }.flow-c { top: 263px; left: 36%; width: 125px; color: var(--amber); transform: rotate(-27deg); }.flow-d { top: 275px; left: 63%; width: 92px; color: var(--teal-soft); transform: rotate(20deg); }.console-footer { border-top: 1px solid var(--line); }.console-footer strong { color: var(--teal); font-weight: 500; }.workflow-panel { border-color: rgba(138,43,226,.62); background: linear-gradient(125deg, rgba(31,19,62,.9), rgba(12,19,30,.97) 62%); box-shadow: var(--shadow-violet); }.workflow-panel h2 em { color: var(--violet-soft); }.workflow-map { position: relative; min-height: 270px; padding: 4px; }.map-step { position: absolute; display: flex; flex-direction: column; gap: 3px; width: 170px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(8,13,20,.7); }.map-step span { color: var(--muted); font: 600 8px 'Space Grotesk', sans-serif; letter-spacing: .13em; }.map-step strong { font: 600 14px 'Space Grotesk', sans-serif; }.map-step small { color: var(--muted); font-size: 10px; }.map-step-one { top: 0; left: 0; color: var(--teal); border-color: rgba(32,213,115,.55); }.map-step-two { top: 72px; right: 0; color: var(--violet-soft); border-color: rgba(189,128,255,.55); }.map-step-three { bottom: 4px; left: 5%; color: var(--amber); border-color: rgba(255,165,2,.55); }.map-step-four { bottom: 62px; right: 7%; color: var(--teal-soft); border-color: rgba(116,244,187,.5); }.map-connector { position: absolute; width: 70px; height: 1px; background: currentColor; opacity: .7; }.connector-one { top: 47px; left: 164px; color: var(--teal); transform: rotate(27deg); }.connector-two { top: 158px; right: 156px; color: var(--violet-soft); transform: rotate(153deg); }.connector-three { bottom: 48px; left: 164px; color: var(--amber); transform: rotate(-23deg); }.guardrails-section { padding-top: 35px; }.guardrails-panel { display: grid; grid-template-columns: .82fr 1.18fr; gap: 70px; padding: 58px; border: 1px solid rgba(255,165,2,.58); border-radius: var(--radius-lg); background: linear-gradient(125deg, rgba(48,32,10,.82), rgba(15,21,31,.98) 68%); box-shadow: var(--shadow-amber); }.guardrails-panel h2 { margin: 18px 0 0; font: 600 clamp(2.7rem, 4.5vw, 4.2rem)/.98 'Space Grotesk', sans-serif; }.guardrails-panel h2 em { color: var(--amber); font-style: normal; }.guardrail-list > div { padding: 15px 0 17px; border-bottom: 1px solid rgba(144,160,183,.2); }.guardrail-list > div:last-child { border-bottom: 0; }.guardrail-list span { display: inline-block; width: 38px; color: var(--amber); font: 600 10px 'Space Grotesk', sans-serif; }.guardrail-list strong { font: 600 15px 'Space Grotesk', sans-serif; }.guardrail-list p { margin: 6px 0 0 38px; color: var(--muted); font-size: 12px; }.workflow-lessons .lesson-current .lesson-index, .workflow-lessons .lesson-current .lesson-status, .workflow-lessons .lesson-current .lesson-tag { color: var(--violet-soft); }
@media (max-width: 900px) { .workflow-hero { grid-template-columns: 1fr; gap: 28px; }.workflow-hero-visual { min-height: 410px; max-width: 600px; }.workflow-map { min-height: 285px; }.guardrails-panel { grid-template-columns: 1fr; gap: 28px; padding: 44px; } }
@media (max-width: 650px) { .workflow-hero { padding-top: 58px; }.workflow-hero-visual { min-height: 330px; }.workflow-console { width: 100%; }.console-body { min-height: 250px; }.agent-node { width: 105px; padding: 8px 9px; }.agent-node strong { font-size: 10px; }.agent-node small { font-size: 8px; }.node-input { top: 16px; left: 10px; }.node-research { top: 85px; right: 8px; }.node-draft { bottom: 16px; left: 12px; }.node-review { bottom: 18px; right: 10px; }.node-output { left: 32%; top: 102px; }.flow-a { left: 27%; top: 51px; width: 77px; }.flow-b { left: 58%; top: 136px; width: 57px; }.flow-c { left: 36%; top: 187px; width: 76px; }.flow-d { left: 62%; top: 197px; width: 55px; }.workflow-panel, .guardrails-panel { padding: 30px 22px; }.workflow-map { min-height: 310px; }.map-step { width: 132px; padding: 10px; }.map-step strong { font-size: 11px; }.map-step small { font-size: 8px; }.map-step-two { top: 79px; }.map-step-three { bottom: 8px; }.map-step-four { bottom: 80px; }.connector-one { left: 128px; width: 43px; }.connector-two { right: 126px; width: 40px; }.connector-three { left: 127px; bottom: 63px; width: 45px; } }

/* Complete v1 shared pages */
.content-hero { min-height: 560px; display: grid; grid-template-columns: 1fr .8fr; align-items: center; gap: 70px; padding-top: 86px; }.content-hero h1 { max-width: 650px; margin: 24px 0 28px; font: 600 clamp(3.7rem, 7vw, 6.6rem)/.92 'Space Grotesk', sans-serif; letter-spacing: -.06em; }.content-hero h1 em { color: var(--teal); font-style: normal; }.content-hero-aside { justify-self: end; max-width: 300px; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: rgba(14,22,33,.72); box-shadow: 0 20px 45px rgba(0,0,0,.18); }.content-hero-aside strong { display: block; margin: 16px 0 25px; font: 600 20px/1.18 'Space Grotesk', sans-serif; }.content-hero-aside small { display: block; color: var(--muted); font-size: 11px; line-height: 1.5; }.aside-rule { display: block; width: 62px; height: 2px; margin-bottom: 15px; background: var(--teal); box-shadow: 0 0 10px var(--teal); }.notes-section, .tool-section { padding-top: 10px; }.notes-grid { display: grid; grid-template-columns: 1.25fr .75fr .75fr; gap: 16px; }.note-card { position: relative; min-height: 310px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-md); background: linear-gradient(145deg, rgba(18,29,42,.92), rgba(8,13,20,.95)); transition: transform .3s ease, border-color .3s ease; }.note-card:hover { transform: translateY(-6px); border-color: rgba(200,211,227,.5); }.note-card-large { grid-row: span 2; min-height: 470px; border-color: rgba(32,213,115,.55); box-shadow: var(--shadow-teal); }.note-card-number { margin-bottom: 80px; color: var(--muted); font: 600 11px 'Space Grotesk', sans-serif; letter-spacing: .14em; }.note-card-large .note-card-number { color: var(--teal); }.note-card h2, .note-card h3 { margin: 17px 0 14px; font-size: 24px; line-height: 1.08; }.note-card-large h2 { max-width: 600px; font-size: clamp(2rem, 3.3vw, 3rem); }.note-card p { color: var(--muted); font-size: 14px; }.editorial-note, .tool-note { padding-top: 30px; }.editorial-note-panel { padding: 52px 58px; border: 1px solid rgba(32,213,115,.5); border-radius: var(--radius-lg); background: linear-gradient(125deg, rgba(15,31,34,.95), rgba(14,21,35,.96)); box-shadow: var(--shadow-teal); }.editorial-note-panel h2 { margin: 18px 0; font: 600 clamp(2.6rem, 4.8vw, 4.4rem)/.98 'Space Grotesk', sans-serif; }.editorial-note-panel h2 em { color: var(--teal); font-style: normal; }.editorial-note-panel p { max-width: 600px; margin: 0 0 26px; color: var(--muted); line-height: 1.7; }.playbook-hero { min-height: 580px; display: grid; grid-template-columns: 1fr .75fr; align-items: center; gap: 90px; padding-top: 86px; }.playbook-hero h1 { max-width: 600px; margin: 24px 0 28px; font: 600 clamp(3.7rem, 7vw, 6.2rem)/.92 'Space Grotesk', sans-serif; letter-spacing: -.06em; }.playbook-hero h1 em { color: var(--amber); font-style: normal; }.playbook-hero-card { justify-self: end; width: min(310px, 100%); padding: 26px; border: 1px solid rgba(255,165,2,.6); border-radius: 16px; background: linear-gradient(145deg, rgba(48,32,10,.82), rgba(15,21,31,.98)); box-shadow: var(--shadow-amber); }.playbook-hero-card strong { display: block; margin: 20px 0 18px; color: var(--amber); font: 600 24px 'Space Grotesk', sans-serif; }.playbook-progress { height: 5px; background: rgba(255,165,2,.15); }.playbook-progress i { display: block; height: 100%; background: var(--amber); box-shadow: 0 0 10px var(--amber); }.playbook-hero-card small { display: block; margin-top: 14px; color: var(--muted); font-size: 11px; }.playbook-intro { padding-top: 15px; }.playbook-intro-panel { max-width: 980px; padding: 55px 60px; border: 1px solid rgba(255,165,2,.58); border-radius: var(--radius-lg); background: linear-gradient(125deg, rgba(48,32,10,.82), rgba(15,21,31,.98) 65%); box-shadow: var(--shadow-amber); }.playbook-intro-panel h2 { margin: 18px 0; font: 600 clamp(2.8rem, 5vw, 4.6rem)/.98 'Space Grotesk', sans-serif; }.playbook-intro-panel h2 em { color: var(--amber); font-style: normal; }.playbook-intro-panel p { max-width: 620px; color: var(--soft); line-height: 1.7; }.playbook-rule { display: flex; align-items: center; gap: 20px; max-width: 700px; margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255,165,2,.3); }.playbook-rule span { color: var(--amber); font: 600 10px 'Space Grotesk', sans-serif; letter-spacing: .12em; text-transform: uppercase; }.playbook-rule strong { color: var(--soft); font: 500 13px 'DM Sans', sans-serif; }.playbook-steps { padding-top: 95px; }.day-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.day-card { min-height: 210px; display: flex; flex-direction: column; padding: 23px; border: 1px solid var(--line); border-radius: 14px; background: rgba(14,22,33,.7); }.day-card > span { color: var(--amber); font: 600 10px 'Space Grotesk', sans-serif; letter-spacing: .13em; }.day-card h3 { margin: 24px 0 8px; font-size: 20px; }.day-card p { margin: 0 0 20px; color: var(--muted); font-size: 13px; }.day-card strong { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(144,160,183,.18); color: var(--soft); font: 500 11px 'DM Sans', sans-serif; }.day-card-final { border-color: rgba(32,213,115,.58); box-shadow: var(--shadow-teal); }.day-card-final > span { color: var(--teal); }.playbook-close { padding-top: 30px; }.playbook-close-panel { padding: 55px 60px; border: 1px solid rgba(32,213,115,.5); border-radius: var(--radius-lg); background: linear-gradient(125deg, rgba(15,31,34,.95), rgba(14,21,35,.96)); box-shadow: var(--shadow-teal); }.playbook-close-panel h2 { margin: 18px 0; font: 600 clamp(2.7rem, 5vw, 4.5rem)/.98 'Space Grotesk', sans-serif; }.playbook-close-panel h2 em { color: var(--teal); font-style: normal; }.playbook-close-panel p { max-width: 550px; margin-bottom: 25px; color: var(--muted); line-height: 1.7; }.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.tool-card { min-height: 300px; display: flex; flex-direction: column; padding: 25px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(14,22,33,.75); transition: transform .3s ease, border-color .3s ease; }.tool-card:hover { transform: translateY(-6px); border-color: rgba(200,211,227,.5); }.tool-card.hidden { display: none; }.tool-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 25px; border: 1px solid currentColor; border-radius: 15px; font: 400 25px 'Space Grotesk', sans-serif; }.tool-icon.teal { color: var(--teal); }.tool-icon.violet { color: var(--violet-soft); }.tool-icon.amber { color: var(--amber); }.tool-type { color: var(--muted); font: 600 9px 'Space Grotesk', sans-serif; letter-spacing: .13em; }.tool-card h3 { margin: 11px 0 9px; font-size: 22px; }.tool-card p { margin: 0 0 20px; color: var(--muted); font-size: 13px; }.tool-check { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(144,160,183,.18); }.tool-check span { display: block; color: var(--teal); font: 600 9px 'Space Grotesk', sans-serif; letter-spacing: .13em; text-transform: uppercase; }.tool-check strong { display: block; margin-top: 5px; color: var(--soft); font: 500 12px 'DM Sans', sans-serif; }.community-hero { min-height: 550px; }.community-hero h1 em { color: var(--violet-soft); }.community-orbit { position: relative; justify-self: end; width: 330px; height: 330px; border: 1px solid rgba(138,43,226,.6); border-radius: 50%; box-shadow: 0 0 55px rgba(138,43,226,.14), inset 0 0 45px rgba(138,43,226,.08); }.community-orbit::before, .community-orbit::after { content: ''; position: absolute; inset: 30px; border: 1px dashed rgba(32,213,115,.42); border-radius: 50%; transform: rotate(32deg); }.community-orbit::after { inset: 78px; border-color: rgba(255,165,2,.42); transform: rotate(-35deg); }.community-orbit-core { position: absolute; inset: 91px; z-index: 2; display: grid; place-items: center; align-content: center; border: 1px solid var(--teal); border-radius: 50%; color: var(--teal); background: rgba(32,213,115,.06); text-align: center; box-shadow: 0 0 25px rgba(32,213,115,.18); }.community-orbit-core span { font: 700 27px 'Space Grotesk', sans-serif; }.community-orbit-core small { color: var(--muted); font-size: 9px; line-height: 1.15; text-transform: uppercase; }.community-orbit-tag { position: absolute; z-index: 3; padding: 8px 11px; border: 1px solid; border-radius: 6px; background: rgba(8,13,20,.9); font: 600 9px 'Space Grotesk', sans-serif; letter-spacing: .1em; }.tag-one { top: 18px; right: 18px; color: var(--teal); border-color: rgba(32,213,115,.6); }.tag-two { right: 14px; bottom: 46px; color: var(--violet-soft); border-color: rgba(189,128,255,.6); }.tag-three { bottom: 17px; left: 16px; color: var(--amber); border-color: rgba(255,165,2,.6); }.community-benefits { padding-top: 20px; }.benefit-grid, .value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.benefit-card, .value-card { min-height: 210px; padding: 25px; border: 1px solid var(--line); border-radius: 14px; background: rgba(14,22,33,.7); }.benefit-card span, .value-card span { color: var(--teal); font: 600 11px 'Space Grotesk', sans-serif; letter-spacing: .12em; }.benefit-card h3, .value-card h3 { margin: 38px 0 9px; font-size: 22px; }.benefit-card p, .value-card p { margin: 0; color: var(--muted); font-size: 13px; }.community-signup { padding-top: 70px; }.community-signup .community-card { width: 100%; }.about-hero h1 em { color: var(--teal); }.about-seal { justify-self: end; width: 285px; padding: 14px; border: 1px solid rgba(32,213,115,.5); border-radius: 50%; box-shadow: var(--shadow-teal); }.about-seal img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; filter: saturate(.82) contrast(1.06); }.about-seal span { display: block; margin-top: 13px; color: var(--teal); text-align: center; font: 600 10px 'Space Grotesk', sans-serif; letter-spacing: .16em; }.about-story { padding-top: 30px; }.about-story-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: start; }.about-story h2 { margin: 18px 0 0; font: 600 clamp(2.7rem, 5vw, 4.7rem)/.98 'Space Grotesk', sans-serif; }.about-story h2 em { color: var(--teal); font-style: normal; }.about-copy p { margin: 0 0 20px; color: var(--soft); font-size: 16px; line-height: 1.7; }.about-values { padding-top: 50px; }.value-card span { color: var(--violet-soft); }.value-card h3 { margin-top: 50px; }.about-note { padding-top: 30px; }
@media (max-width: 900px) { .content-hero, .playbook-hero { grid-template-columns: 1fr; gap: 30px; }.content-hero-aside, .playbook-hero-card, .community-orbit, .about-seal { justify-self: start; }.notes-grid { grid-template-columns: 1fr 1fr; }.note-card-large { grid-column: span 2; grid-row: auto; min-height: 330px; }.tool-grid, .day-grid { grid-template-columns: 1fr 1fr; }.about-story-grid { grid-template-columns: 1fr; gap: 30px; }.benefit-grid, .value-grid { grid-template-columns: 1fr; }.editorial-note-panel, .playbook-intro-panel, .playbook-close-panel { padding: 44px; } }
@media (max-width: 650px) { .content-hero, .playbook-hero { padding-top: 58px; }.content-hero h1, .playbook-hero h1 { font-size: clamp(3.1rem, 15vw, 5.3rem); }.content-hero-aside { max-width: 100%; }.notes-grid, .tool-grid, .day-grid { grid-template-columns: 1fr; }.note-card-large { grid-column: auto; }.note-card { min-height: 260px; }.note-card-number { margin-bottom: 42px; }.community-orbit { width: 285px; height: 285px; margin-left: 8px; }.community-orbit-core { inset: 79px; }.community-signup .community-card { padding: 28px 22px; }.playbook-rule { align-items: start; flex-direction: column; gap: 8px; }.playbook-intro-panel, .playbook-close-panel, .editorial-note-panel { padding: 30px 22px; }.benefit-card, .value-card { min-height: 170px; }.benefit-card h3, .value-card h3 { margin-top: 28px; }.about-seal { width: 235px; } }

/* Digital Creator Brand Building track */
.brand-track-hero .track-hero-copy h1 em { color: var(--amber); }.brand-track-hero .track-hero-copy .hero-lede { max-width: 540px; }.brand-hero-visual { position: relative; min-height: 460px; display: grid; place-items: center; }.brand-signal-board { position: relative; width: min(440px, 92%); min-height: 300px; padding: 22px; overflow: hidden; border: 1px solid rgba(255,165,2,.72); border-radius: 16px; background: linear-gradient(145deg, #4b2d09, #151a2a 70%); box-shadow: var(--shadow-amber); transform: rotate(2deg); }.brand-signal-board::before { content: ''; position: absolute; inset: 0; opacity: .3; background-image: linear-gradient(rgba(255,210,123,.25) 1px, transparent 1px), linear-gradient(90deg, rgba(255,210,123,.25) 1px, transparent 1px); background-size: 28px 28px; }.signal-board-title, .signal-board-copy, .signal-board-tags, .signal-wave { position: relative; z-index: 1; }.signal-board-title { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font: 600 9px 'Space Grotesk', sans-serif; letter-spacing: .1em; }.signal-board-title strong { color: var(--amber); font-weight: 500; }.signal-wave { display: flex; align-items: center; gap: 5px; height: 100px; margin: 30px 0 22px; }.signal-wave i { width: 12px; border-radius: 3px 3px 0 0; background: linear-gradient(var(--amber), var(--violet)); box-shadow: 0 0 15px rgba(255,165,2,.32); }.signal-wave i:nth-child(1) { height: 30px; }.signal-wave i:nth-child(2) { height: 52px; }.signal-wave i:nth-child(3) { height: 38px; }.signal-wave i:nth-child(4) { height: 78px; }.signal-wave i:nth-child(5) { height: 62px; }.signal-wave i:nth-child(6) { height: 90px; }.signal-wave i:nth-child(7) { height: 48px; }.signal-wave i:nth-child(8) { height: 72px; }.signal-wave i:nth-child(9) { height: 58px; }.signal-board-copy { color: var(--white); font: 700 33px/.92 'Space Grotesk', sans-serif; letter-spacing: -.08em; }.signal-board-copy em { color: var(--amber); font-style: normal; }.signal-board-tags { display: flex; gap: 7px; margin-top: 24px; }.signal-board-tags span { padding: 5px 7px; border: 1px solid rgba(255,210,123,.55); border-radius: 4px; color: var(--amber-soft); font: 600 8px 'Space Grotesk', sans-serif; letter-spacing: .1em; }.brand-float-card { position: absolute; right: -2px; bottom: 24px; z-index: 3; max-width: 180px; padding: 14px; border: 1px solid rgba(32,213,115,.55); border-radius: 10px; background: rgba(8,13,20,.9); box-shadow: var(--shadow-teal); }.brand-float-card strong { display: block; margin-top: 8px; color: var(--soft); font: 600 13px 'Space Grotesk', sans-serif; line-height: 1.2; }.brand-panel { border-color: rgba(255,165,2,.58); background: linear-gradient(125deg, rgba(48,32,10,.82), rgba(15,21,31,.98) 60%); box-shadow: var(--shadow-amber); }.brand-panel h2 em { color: var(--amber); }.hook-stack { display: flex; flex-direction: column; gap: 10px; }.hook-card { padding: 16px 18px; border: 1px solid rgba(255,165,2,.58); border-radius: 10px; background: rgba(8,13,20,.72); }.hook-card span { display: block; margin-bottom: 7px; color: var(--amber); font: 600 9px 'Space Grotesk', sans-serif; letter-spacing: .12em; }.hook-card strong { color: var(--white); font: 500 15px/1.25 'Space Grotesk', sans-serif; }.hook-card-alt { margin-left: 30px; border-color: rgba(138,43,226,.5); }.hook-card-alt span { color: var(--violet-soft); }.hook-card-dim { margin-left: 60px; border-color: rgba(32,213,115,.45); }.hook-card-dim span { color: var(--teal); }.brand-principles { border-color: rgba(255,165,2,.58); background: linear-gradient(125deg, rgba(48,32,10,.82), rgba(15,21,31,.98) 68%); box-shadow: var(--shadow-amber); }.brand-principles h2 em { color: var(--amber); }.brand-principles .principle-list span { color: var(--amber); }.brand-lessons .lesson-current .lesson-index, .brand-lessons .lesson-current .lesson-status, .brand-lessons .lesson-current .lesson-tag { color: var(--amber); }
@media (max-width: 900px) { .brand-track-hero { grid-template-columns: 1fr; gap: 28px; }.brand-hero-visual { min-height: 400px; max-width: 600px; }.brand-panel, .brand-principles { padding: 44px; } }
@media (max-width: 650px) { .brand-track-hero { padding-top: 58px; }.brand-hero-visual { min-height: 330px; }.brand-signal-board { width: 100%; min-height: 250px; }.signal-board-copy { font-size: 25px; }.signal-wave { height: 75px; margin: 20px 0 15px; }.signal-wave i:nth-child(1) { height: 22px; }.signal-wave i:nth-child(2) { height: 40px; }.signal-wave i:nth-child(3) { height: 29px; }.signal-wave i:nth-child(4) { height: 58px; }.signal-wave i:nth-child(5) { height: 46px; }.signal-wave i:nth-child(6) { height: 68px; }.signal-wave i:nth-child(7) { height: 36px; }.signal-wave i:nth-child(8) { height: 54px; }.signal-wave i:nth-child(9) { height: 44px; }.brand-float-card { right: -4px; bottom: 6px; }.brand-panel, .brand-principles { padding: 30px 22px; }.hook-card-alt { margin-left: 14px; }.hook-card-dim { margin-left: 28px; } }

/* Flagship AI Content Pipeline guide */
.guide-hero { min-height: 640px; display: grid; grid-template-columns: 1fr .85fr; align-items: center; gap: 80px; padding-top: 82px; }.guide-hero h1 { margin: 24px 0 26px; font: 600 clamp(3.5rem, 6.8vw, 6.2rem)/.92 'Space Grotesk', sans-serif; letter-spacing: -.06em; }.guide-hero h1 em { color: var(--teal); font-style: normal; }.guide-meta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 25px; }.guide-meta span { padding: 7px 10px; border: 1px solid rgba(144,160,183,.3); border-radius: 5px; color: var(--muted); font: 600 9px 'Space Grotesk', sans-serif; letter-spacing: .1em; text-transform: uppercase; }.guide-hero-console { width: min(460px, 100%); justify-self: end; overflow: hidden; border: 1px solid rgba(32,213,115,.62); border-radius: 16px; background: rgba(8,13,20,.94); box-shadow: var(--shadow-teal); transform: rotate(2deg); }.guide-console-body { position: relative; min-height: 340px; background: radial-gradient(circle at 52% 46%, rgba(32,213,115,.12), transparent 38%); }.pipeline-stage { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 3px; width: 128px; padding: 11px 12px; border: 1px solid; border-radius: 9px; background: rgba(8,13,20,.94); }.pipeline-stage span { color: var(--muted); font: 600 8px 'Space Grotesk', sans-serif; letter-spacing: .12em; }.pipeline-stage strong { font: 600 12px 'Space Grotesk', sans-serif; }.pipeline-stage small { color: var(--muted); font-size: 9px; }.stage-brief { top: 28px; left: 22px; color: var(--teal); border-color: rgba(32,213,115,.6); }.stage-research { top: 115px; right: 22px; color: var(--violet-soft); border-color: rgba(189,128,255,.6); }.stage-draft { bottom: 24px; left: 28px; color: var(--amber); border-color: rgba(255,165,2,.6); }.stage-review { bottom: 42px; right: 20px; color: var(--teal-soft); border-color: rgba(116,244,187,.55); }.stage-output { top: 145px; left: 35%; color: var(--white); border-color: rgba(200,211,227,.4); box-shadow: 0 0 25px rgba(32,213,115,.14); }.pipeline-line { position: absolute; z-index: 1; display: block; height: 1px; transform-origin: left center; background: linear-gradient(90deg, currentColor, transparent); opacity: .76; }.line-one { top: 75px; left: 31%; width: 122px; color: var(--teal); transform: rotate(25deg); }.line-two { top: 185px; left: 61%; width: 95px; color: var(--violet-soft); transform: rotate(-20deg); }.line-three { top: 276px; left: 38%; width: 118px; color: var(--amber); transform: rotate(-27deg); }.line-four { top: 273px; left: 63%; width: 88px; color: var(--teal-soft); transform: rotate(21deg); }.guide-outcome { padding-top: 18px; }.guide-outcome-panel { display: grid; grid-template-columns: .8fr 1.2fr; gap: 55px; padding: 52px 58px; border: 1px solid rgba(255,165,2,.58); border-radius: var(--radius-lg); background: linear-gradient(125deg, rgba(48,32,10,.84), rgba(15,21,31,.98) 68%); box-shadow: var(--shadow-amber); }.guide-outcome-panel h2 { margin: 18px 0 0; font: 600 clamp(2.7rem, 5vw, 4.6rem)/.96 'Space Grotesk', sans-serif; }.guide-outcome-panel h2 em { color: var(--amber); font-style: normal; }.outcome-list { display: grid; gap: 12px; align-content: center; }.outcome-list div { padding: 14px 0; border-bottom: 1px solid rgba(255,165,2,.24); }.outcome-list div:last-child { border-bottom: 0; }.outcome-list span, .source-table span, .draft-anatomy span, .format-grid span, .example-grid span { display: block; margin-bottom: 6px; color: var(--amber); font: 600 9px 'Space Grotesk', sans-serif; letter-spacing: .13em; }.outcome-list strong { color: var(--soft); font: 500 15px/1.3 'DM Sans', sans-serif; }.guide-before { padding-top: 95px; }.brief-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.brief-card { min-height: 230px; padding: 28px; border: 1px solid rgba(32,213,115,.52); border-radius: 14px; background: rgba(15,31,34,.75); box-shadow: var(--shadow-teal); }.brief-card-muted { border-color: var(--line); background: rgba(14,22,33,.68); box-shadow: none; }.brief-card span { color: var(--teal); font: 600 9px 'Space Grotesk', sans-serif; letter-spacing: .14em; }.brief-card-muted span { color: var(--muted); }.brief-card h3 { max-width: 480px; margin: 36px 0 12px; font-size: 23px; line-height: 1.14; }.brief-card p { max-width: 400px; color: var(--muted); font-size: 13px; }.guide-workflow { padding-top: 95px; }.guide-stage-list { display: grid; gap: 14px; }.guide-stage { display: grid; grid-template-columns: 70px 1fr; gap: 18px; padding: 34px 36px; border: 1px solid var(--line); border-radius: 16px; background: rgba(14,22,33,.68); }.guide-stage-number { color: var(--teal); font: 600 18px 'Space Grotesk', sans-serif; }.stage-label { color: var(--muted); font: 600 9px 'Space Grotesk', sans-serif; letter-spacing: .13em; }.guide-stage h3 { margin: 10px 0 9px; font-size: 27px; }.guide-stage p { max-width: 760px; margin: 0 0 22px; color: var(--muted); line-height: 1.7; }.prompt-card { overflow: hidden; border: 1px solid rgba(32,213,115,.45); border-radius: 10px; background: #09141a; }.prompt-card-top { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-bottom: 1px solid rgba(32,213,115,.2); }.prompt-card-top span { color: var(--teal); font: 600 9px 'Space Grotesk', sans-serif; letter-spacing: .13em; }.copy-prompt { border: 1px solid rgba(32,213,115,.45); border-radius: 4px; padding: 5px 8px; color: var(--teal); background: transparent; font: 600 9px 'Space Grotesk', sans-serif; cursor: pointer; }.copy-prompt:hover, .copy-prompt.copied { color: #07120d; background: var(--teal); }.prompt-card pre { overflow-x: auto; margin: 0; padding: 17px 14px; color: #c3f5d7; font: 400 12px/1.6 'DM Sans', sans-serif; white-space: pre-wrap; }.stage-artifact { display: flex; gap: 15px; align-items: center; margin-top: 14px; padding: 13px 14px; border-left: 2px solid var(--amber); background: rgba(255,165,2,.06); }.stage-artifact span { color: var(--amber); font: 600 9px 'Space Grotesk', sans-serif; letter-spacing: .12em; }.stage-artifact strong { color: var(--soft); font: 500 12px/1.4 'DM Sans', sans-serif; }.source-table { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 20px; }.source-table div, .draft-anatomy div, .format-grid div { padding: 13px; border: 1px solid rgba(144,160,183,.22); border-radius: 8px; background: rgba(8,13,20,.55); }.source-table strong, .draft-anatomy strong, .format-grid strong { display: block; color: var(--soft); font: 500 12px/1.35 'DM Sans', sans-serif; }.draft-anatomy { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }.draft-anatomy span { color: var(--violet-soft); }.format-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }.format-grid span { color: var(--teal); }.format-grid small { display: block; margin-top: 8px; color: var(--muted); font-size: 10px; }.guide-stage-review { border-color: rgba(255,165,2,.48); background: linear-gradient(125deg, rgba(48,32,10,.35), rgba(14,22,33,.8)); }.guide-stage-review .guide-stage-number, .guide-stage-review .stage-label { color: var(--amber); }.review-checklist { display: grid; gap: 10px; max-width: 740px; padding: 18px; border: 1px solid rgba(255,165,2,.3); border-radius: 10px; background: rgba(8,13,20,.52); }.review-checklist label { display: flex; gap: 10px; align-items: flex-start; color: var(--soft); font-size: 13px; line-height: 1.4; cursor: pointer; }.review-checklist input { accent-color: var(--amber); margin-top: 3px; }.checklist-progress { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 13px; border-top: 1px solid rgba(255,165,2,.22); }.checklist-progress span { color: var(--amber); font: 600 10px 'Space Grotesk', sans-serif; letter-spacing: .1em; text-transform: uppercase; }.checklist-reset { padding: 0; border: 0; background: none; cursor: pointer; }.guide-example { padding-top: 40px; }.example-panel { padding: 52px 58px; border: 1px solid rgba(138,43,226,.6); border-radius: var(--radius-lg); background: linear-gradient(125deg, rgba(31,19,62,.9), rgba(12,19,30,.97) 68%); box-shadow: var(--shadow-violet); }.example-panel h2 { margin: 18px 0 26px; font: 600 clamp(2.7rem, 5vw, 4.5rem)/.98 'Space Grotesk', sans-serif; }.example-panel h2 em { color: var(--violet-soft); font-style: normal; }.example-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.example-grid div { min-height: 135px; padding: 20px; border: 1px solid rgba(189,128,255,.26); border-radius: 9px; background: rgba(8,13,20,.43); }.example-grid span { color: var(--violet-soft); }.example-grid p { margin: 0; color: var(--soft); line-height: 1.5; }.guide-download { padding-top: 30px; }.guide-download-panel { display: flex; justify-content: space-between; align-items: center; gap: 45px; padding: 52px 58px; border: 1px solid rgba(32,213,115,.55); border-radius: var(--radius-lg); background: linear-gradient(125deg, rgba(15,31,34,.95), rgba(14,21,35,.96)); box-shadow: var(--shadow-teal); }.guide-download-panel h2 { margin: 18px 0 10px; font: 600 clamp(2.7rem, 5vw, 4.4rem)/.98 'Space Grotesk', sans-serif; }.guide-download-panel h2 em { color: var(--teal); font-style: normal; }.guide-download-panel p { max-width: 530px; margin: 0; color: var(--muted); line-height: 1.65; }.guide-download-actions { display: grid; gap: 16px; justify-items: start; flex: 0 0 auto; }
@media (max-width: 900px) { .guide-hero { grid-template-columns: 1fr; gap: 30px; }.guide-hero-console { justify-self: start; }.guide-outcome-panel { grid-template-columns: 1fr; gap: 24px; }.guide-download-panel { align-items: flex-start; flex-direction: column; }.source-table, .format-grid { grid-template-columns: 1fr 1fr; }.draft-anatomy { grid-template-columns: 1fr 1fr; } }
@media (max-width: 650px) { .guide-hero { padding-top: 58px; }.guide-hero h1 { font-size: clamp(3.15rem, 15vw, 5.2rem); }.guide-hero-console { width: 100%; transform: none; }.guide-console-body { min-height: 280px; }.pipeline-stage { width: 105px; padding: 8px 9px; }.pipeline-stage strong { font-size: 10px; }.pipeline-stage small { font-size: 8px; }.stage-brief { left: 10px; top: 18px; }.stage-research { right: 9px; top: 90px; }.stage-draft { left: 14px; bottom: 18px; }.stage-review { right: 10px; bottom: 26px; }.stage-output { top: 118px; left: 32%; }.line-one { left: 28%; top: 55px; width: 73px; }.line-two { left: 58%; top: 145px; width: 56px; }.line-three { left: 36%; top: 216px; width: 70px; }.line-four { left: 61%; top: 220px; width: 54px; }.guide-outcome-panel, .example-panel, .guide-download-panel { padding: 30px 22px; }.brief-grid, .source-table, .format-grid, .example-grid { grid-template-columns: 1fr; }.guide-stage { grid-template-columns: 1fr; gap: 12px; padding: 25px 20px; }.guide-stage-number { font-size: 14px; }.guide-stage h3 { font-size: 23px; }.draft-anatomy { grid-template-columns: 1fr 1fr; }.stage-artifact { align-items: flex-start; flex-direction: column; gap: 5px; }.prompt-card pre { font-size: 11px; }.guide-meta span { font-size: 8px; } }

/* BerdAu Empire logo refresh */
.brand-lockup .brand-mark {
  overflow: hidden;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(32, 213, 115, .72);
  border-radius: 10px;
  background: #111923;
  box-shadow: 0 0 18px rgba(32, 213, 115, .18);
  transform: none;
}
.brand-lockup .brand-mark::before,
.brand-lockup .brand-mark::after { display: none; }
.brand-lockup .brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.brand-lockup .brand-name {
  letter-spacing: .08em;
  text-transform: none;
}
@media (max-width: 640px) {
  .brand-lockup .brand-mark { width: 36px; height: 36px; }
  .brand-lockup .brand-name { font-size: 11px; letter-spacing: .06em; }
}