/* THE CDMS INTRO. Layout: an app-like studio (category rail, tool list, demo stage) under a calm editorial opening.
   Day = warm paper with white working surfaces; night = deep navy. One accent: CDMS blue. Display serif with an italic accent
   phrase (from the CreateCRM feature library), system sans for reading, mono only for small labels. */
:root{color-scheme:light;
 --page:#f6f5f1;--surface:#efeee8;--raised:#ffffff;--sunken:#f1f0eb;--ink:#142033;--muted:#5d6777;--soft:#8a93a1;--line:#e4e2da;--line-strong:#d2d4d6;
 --accent:#2457ff;--accent-ink:#1a3fd0;--on-accent:#ffffff;--tint:#edf1ff;--tint-strong:#dce5ff;--good:#23845a;--good-tint:#e5f4ec;--warn:#b0601a;--warn-tint:#fbf0e3;
 --shadow-sm:0 1px 2px rgba(20,32,51,.05);--shadow:0 1px 2px rgba(20,32,51,.04),0 10px 30px rgba(20,32,51,.07);--shadow-lg:0 20px 60px rgba(20,32,51,.14);
 --display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
 --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
 --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 --accent-2:#0e9fc4;--glass:rgba(255,255,255,.72);--grid:rgba(20,32,51,.045);--glow:0 10px 30px rgba(36,87,255,.22);
 --map-line:#9fb0cc;--map-body:#ffffff;--map-screen:#0b1528;--map-grid:rgba(140,170,255,.07);--map-ink:#eef3ff;--map-muted:#93a4c3;--map-rule:rgba(148,180,255,.18);
 --radius:14px;--radius-sm:9px;--header:72px;
 font-family:var(--sans);font-synthesis:none}
html[data-theme=night]{color-scheme:dark;
 --page:#050a14;--surface:#0a1426;--raised:#0e1a30;--sunken:#0a1324;--ink:#eaf0fb;--muted:#9fb0c8;--soft:#7084a3;--line:rgba(148,180,255,.13);--line-strong:rgba(148,180,255,.24);
 --accent:#5b8cff;--accent-ink:#86a8ff;--accent-2:#2fd6f0;--on-accent:#050a14;--tint:rgba(91,140,255,.14);--tint-strong:rgba(91,140,255,.26);--good:#4fd69a;--good-tint:rgba(79,214,154,.12);--warn:#f3a95f;--warn-tint:rgba(243,169,95,.12);
 --glass:rgba(13,24,45,.62);--grid:rgba(148,180,255,.045);--glow:0 0 0 1px rgba(91,140,255,.35),0 12px 40px rgba(91,140,255,.35);
 --map-line:#3c5683;--map-body:#0b1529;--map-screen:#060d1c;--map-grid:rgba(140,170,255,.06);--map-ink:#eef3ff;--map-muted:#8ea1c2;--map-rule:rgba(148,180,255,.16);
 --shadow-sm:0 1px 2px rgba(0,0,0,.4);--shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px rgba(0,0,0,.35);--shadow-lg:0 30px 80px rgba(0,0,0,.6)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 24px)}
body{margin:0;background:var(--page);color:var(--ink);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:4px}
button,input,textarea{font:inherit;color:inherit}
button{min-height:44px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:10px 16px;background:var(--raised);cursor:pointer;touch-action:manipulation;transition:border-color .15s,background .15s,box-shadow .15s}
button:disabled{opacity:.45;cursor:default}
button:not(:disabled):hover{border-color:var(--accent)}
button.primary,.primary{color:var(--on-accent);background:var(--accent);border-color:var(--accent);font-weight:600;box-shadow:0 1px 2px rgba(36,87,255,.25)}
button.primary:not(:disabled):hover{background:var(--accent-ink);border-color:var(--accent-ink)}
button[aria-pressed=true]:not(.primary){border-color:var(--accent);background:var(--tint);color:var(--ink)}
:is(button,a,input,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--accent);outline-offset:3px}
[tabindex="-1"]:focus:not(:focus-visible){outline:none}
h1[tabindex]:focus,h2[tabindex]:focus,h3[tabindex]:focus{outline:none}
input,textarea{background:var(--raised);border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:12px 14px;max-width:100%;min-width:0}
input{min-height:46px}textarea{resize:vertical;line-height:1.6}
input:hover,textarea:hover{border-color:var(--soft)}
h1,h2,h3,h4,h5,p{margin:0}
h1,h2,h3{font-weight:400;text-wrap:balance}
h1,h2{font-family:var(--display);letter-spacing:-.025em;line-height:1.04}
h1 em,h2 em{font-style:italic;color:var(--accent)}
p{line-height:1.65}
button,a,span,p,h1,h2,h3,h4,li{overflow-wrap:anywhere}
[hidden]{display:none!important}
.skip-link{position:fixed;z-index:99;top:-100px;left:16px;padding:14px 18px;background:var(--raised);border-radius:var(--radius-sm)}
.skip-link:focus{top:16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.eyebrow{font:600 10.5px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.eyebrow-accent{color:var(--accent)}
.detail-hint{font-size:13px;color:var(--muted)}
.tag{display:inline-flex;align-items:center;font:600 9.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:5px 7px;border-radius:999px;background:var(--sunken);color:var(--muted);white-space:nowrap}
.tag-live{background:var(--tint);color:var(--accent)}
.tag-suggested{background:var(--good-tint);color:var(--good)}
.text-button,.link-button{background:transparent;border:0;padding:6px 0;min-height:36px;color:var(--accent);font-size:13px;text-align:left;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.link-button{text-decoration:none;font-weight:600}.link-button:hover{text-decoration:underline}
.button-link{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:11px 18px;border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--raised);text-decoration:none;font-size:14px;font-weight:500}
.button-link.primary{color:var(--on-accent);background:var(--accent);border-color:var(--accent);font-weight:600}
.button-link.primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.button-link:hover{border-color:var(--accent)}

/* Header */
.site-header{display:flex;align-items:center;gap:24px;min-height:var(--header);padding:12px max(16px,3vw);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--page) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}
.brand{display:flex;gap:12px;align-items:center;text-decoration:none;flex:none}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--accent);color:var(--on-accent);font:700 22px/1 var(--sans);letter-spacing:-.06em;position:relative}
.brand-mark>span{font-size:12px;position:absolute;top:5px;right:6px}
.brand strong{font-size:12.5px;letter-spacing:.1em;font-weight:700}
.brand small{display:block;font-size:10.5px;line-height:1.4;color:var(--muted);margin-top:2px}
.site-header nav{display:flex;gap:4px;align-items:center;font-size:13px;margin-left:auto}
.site-header nav a{display:flex;align-items:center;min-height:40px;padding:0 12px;border-radius:999px;text-decoration:none;color:var(--muted)}
.site-header nav a:hover{background:var(--sunken);color:var(--ink)}
.blueprint-link span{display:grid;place-items:center;min-width:22px;height:22px;margin-left:7px;padding:0 6px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:700}
.tool-search{width:min(230px,22vw)}
.tool-search .crm-command-trigger{min-height:40px;padding:8px 12px;border-radius:999px;background:var(--raised);border-color:var(--line-strong);color:var(--muted);font:13px/1.4 var(--sans);gap:12px}
.tool-search .crm-command-trigger kbd{color:var(--soft)}
.preferences{display:flex;gap:6px}
.preferences button{background:transparent;font-size:12px;padding:7px 11px;min-height:38px;border-radius:999px;border-color:var(--line)}
/* Command palette themed to the presentation tokens */
.crm-command-dialog{background:var(--raised);color:var(--ink);border-color:var(--line);box-shadow:var(--shadow-lg);font-family:var(--sans)}
.crm-command-search{background:var(--raised);color:var(--ink);border-bottom-color:var(--line)}
.crm-command-option.is-active{background:var(--tint);color:var(--accent)}
.crm-command-text small,.crm-command-group-title,.crm-command-footer,.crm-command-empty{color:var(--muted)}
.crm-command-footer{border-top-color:var(--line)}
.crm-command-footer button{background:var(--sunken);border-color:var(--line);color:var(--muted)}

/* Opening */
.opening{max-width:1440px;margin:auto;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr);gap:clamp(32px,6vw,96px);align-items:start;padding:clamp(40px,6vw,84px) max(16px,3vw) 56px}
.opening-copy{display:grid;gap:22px;align-content:start}
.opening h1{font-size:clamp(44px,6vw,86px);max-width:13ch}
.lede{max-width:58ch;color:var(--muted);font-size:17.5px;line-height:1.65}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:12px 0 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--raised);box-shadow:var(--shadow-sm);overflow:hidden}
.hero-stats div{padding:16px 18px;border-left:1px solid var(--line)}.hero-stats div:first-child{border-left:0}
.hero-stats dt{font-size:11.5px;color:var(--muted)}
.hero-stats dd{margin:4px 0 0;font:400 30px/1.1 var(--display);font-variant-numeric:tabular-nums;color:var(--ink)}
.client-guide{min-width:0;padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.client-guide h2{font:600 17px/1.3 var(--sans);letter-spacing:-.01em}
.guide-intro{font-size:13px;color:var(--muted);margin:6px 0 14px}
.orientation{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.orientation a{display:grid;grid-template-columns:76px minmax(0,1fr) 14px;align-items:start;gap:12px;min-height:56px;padding:12px 14px;text-decoration:none;border-radius:var(--radius-sm);background:var(--raised);border:1px solid var(--line);font-size:13px;line-height:1.5}
.orientation a:hover{border-color:var(--accent)}
.orientation strong{font:600 11px/1.6 var(--mono);color:var(--accent)}
.orientation span{color:var(--muted)}
.orientation .guide-arrow{color:var(--accent);font-size:14px}
.guide-tip{font-size:12px;line-height:1.6;color:var(--muted);margin-top:14px}

/* Assessment */
.assessment{max-width:1440px;margin:auto;padding:24px max(16px,3vw) 72px;scroll-margin-top:calc(var(--header) + 8px)}
.assessment-head{display:grid;gap:14px;max-width:820px;padding-top:40px;border-top:1px solid var(--line)}
.assessment-head h2{font-size:clamp(34px,4vw,56px)}
.assessment-head p:last-child{font-size:16px;color:var(--muted);max-width:62ch}
.assessment-list{display:grid;gap:14px;margin-top:32px}
.assessment-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);border:1px solid var(--line);border-radius:var(--radius);background:var(--raised);box-shadow:var(--shadow-sm);overflow:hidden;scroll-margin-top:calc(var(--header) + 24px)}
.assessment-area{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:26px 28px}
.assessment-area h3{font:400 25px/1.2 var(--display);letter-spacing:-.015em}
.assessment-area>p:not(.eyebrow){font-size:14px;color:var(--muted);max-width:56ch}
.assessment-area .link-button{margin-top:auto}
.built-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:10px 16px;border:1px solid var(--accent);border-radius:999px;color:var(--accent-ink);font-weight:600;font-size:14px;text-decoration:none}
.built-link:hover,.built-link:focus-visible{background:var(--accent);color:var(--on-accent)}
.built-note{font-size:12px;color:var(--muted);margin-top:-4px}
.assessment-tools{padding:22px 24px;background:var(--surface);border-left:1px solid var(--line);display:grid;gap:12px;align-content:start}
.assessment-tools ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.suggested-tool{display:grid;gap:6px;width:100%;height:100%;text-align:left;padding:15px 16px;border-radius:var(--radius-sm);border-color:var(--line);background:var(--raised);align-content:start}
.suggested-tool:not(:disabled):hover{border-color:var(--accent);box-shadow:var(--shadow)}
.suggested-tool-title{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-weight:600;font-size:14.5px}
.suggested-tool-why{font-size:12.5px;color:var(--muted);line-height:1.5}
.suggested-tool-cta{font-size:12.5px;font-weight:600;color:var(--accent);margin-top:2px}
.vision-disclaimer{font-size:13.5px;color:var(--muted);margin-top:24px;max-width:96ch;padding:16px 18px;border-radius:var(--radius-sm);background:var(--surface)}
.vision-all{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--accent);font-size:13.5px;font-weight:600;margin-top:14px;text-decoration:none}
.vision-all:hover{text-decoration:underline}

/* Studio */
.studio{display:grid;grid-template-columns:220px minmax(0,1fr);max-width:1440px;margin:auto;padding:24px max(16px,3vw) 72px;gap:32px;scroll-margin-top:var(--header)}
.system-directory{align-self:start;position:sticky;top:calc(var(--header) + 20px);display:grid;gap:12px}
.system-directory nav{display:grid;gap:3px}
.system-directory nav button{border:0;border-radius:var(--radius-sm);display:grid;grid-template-columns:22px 1fr 14px;gap:10px;text-align:left;padding:10px 12px;background:transparent;min-height:50px;align-items:start}
.system-directory nav button:hover{background:var(--sunken)}
.dir-number{font:500 10.5px/1.9 var(--mono);color:var(--soft)}
.dir-label{display:grid;gap:1px}
.dir-label strong{font-size:13.5px;font-weight:600}
.dir-label small{font-size:11px;color:var(--muted)}.dir-label small b{color:var(--accent);font-weight:600}
.module-suggestion{color:var(--good)!important;font-weight:600}
.system-directory nav button[aria-pressed=true]{background:var(--raised);box-shadow:var(--shadow-sm),inset 0 0 0 1px var(--line)}
.system-directory nav button[aria-pressed=true] strong{color:var(--accent)}
.system-directory i{font-style:normal;color:var(--good);font-size:12px;font-weight:700;line-height:1.9}
.directory-summary{display:grid;gap:4px;border-top:1px solid var(--line);margin-top:6px;padding:14px 12px;font-size:12px;line-height:1.6;text-decoration:none}
.directory-summary span:last-child{color:var(--accent);font-weight:600}
.system-content{min-width:0}
.section-heading{display:grid;gap:12px;padding-bottom:6px;scroll-margin-top:calc(var(--header) + 16px)}
.section-heading h2{font-size:clamp(34px,3.6vw,54px)}
.section-heading>p:not(.eyebrow){font-size:16px;max-width:64ch;color:var(--muted)}
.module-suggested{font-size:13px!important;color:var(--good)!important;display:inline-flex;align-items:center;gap:8px}
.module-suggested::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--good)}
.module-pagination{display:flex;justify-content:space-between;margin-top:28px}
.module-pagination button{background:transparent;font-size:13px;border-color:var(--line)}

/* Return pill */
.return-pill{white-space:nowrap;max-width:calc(100vw - 32px);position:fixed;z-index:30;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;background:var(--ink);color:var(--page);border:0;font-size:14px;font-weight:600;box-shadow:var(--shadow-lg);animation:pill-in .25s ease-out}
.return-pill:not(:disabled):hover{background:var(--accent);color:var(--on-accent)}
@keyframes pill-in{from{opacity:0;transform:translate(-50%,12px)}}
html[data-motion=reduced] .return-pill{animation:none}

/* Blueprint */
.blueprint-section{max-width:1440px;margin:auto;padding:64px max(16px,3vw) 88px;border-top:1px solid var(--line)}
.blueprint-section>header{display:grid;grid-template-columns:1fr 1fr;column-gap:60px;row-gap:14px;align-items:end;margin-bottom:40px}
.blueprint-section>header>.eyebrow{grid-column:1/-1}
.blueprint-section h2{font-size:clamp(40px,4.4vw,64px)}
.blueprint-section>header>p:last-child{color:var(--muted);font-size:15px;max-width:56ch}
.blueprint-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.blueprint-layout h3{font:600 18px/1.3 var(--sans);margin-bottom:8px}
#profile-form{padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:var(--raised);box-shadow:var(--shadow-sm)}
#profile-form .detail-hint{margin-bottom:20px}
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.profile-grid label,.module-note{display:flex;flex-direction:column;gap:8px;font-size:12.5px;font-weight:500}
.profile-grid .wide{grid-column:1/-1}
.privacy-note{font-size:12px;color:var(--muted);margin-top:22px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--surface)}
.blueprint-summary{display:grid;gap:14px}
.empty-state{color:var(--muted);padding:26px;border:1px dashed var(--line-strong);border-radius:var(--radius);font-size:14px}
.selected-system{border:1px solid var(--line);background:var(--raised);padding:22px;border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.selected-system>div{position:relative;padding-right:44px}
.selected-system h4{font:400 22px/1.2 var(--display);margin:6px 0 2px}
.remove-module{position:absolute;right:0;top:0;width:38px;min-height:38px;padding:0;font-size:20px;border-radius:999px;border-color:var(--line)}
.selected-system>p{font-size:12px;color:var(--muted);margin-top:8px}
.selected-system>ul{padding-left:18px;font-size:13.5px;line-height:1.8;margin:6px 0}
.priority-group{margin:16px 0;border:0;padding:0;display:flex;gap:6px;flex-wrap:wrap}
.priority-group legend{font-size:12px;color:var(--muted);margin-bottom:8px}
.priority-group label{position:relative;cursor:pointer}
.priority-group input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}
.priority-group label>span{display:block;padding:9px 14px;border:1px solid var(--line-strong);border-radius:999px;font-size:12.5px;min-height:40px;line-height:20px}
.priority-group input:checked+span{background:var(--tint);border-color:var(--accent);color:var(--accent);font-weight:600}
.priority-group input:focus-visible+span{outline:3px solid var(--accent);outline-offset:3px}
.export-card{padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.export-card>p:first-child{font-size:14px;margin-bottom:16px}
.export-card>.primary{width:100%;display:flex;align-items:center;justify-content:space-between;padding:15px 18px;font-size:15px}
.fine-print,#export-status{font-size:12px;color:var(--muted);margin:12px 0}

footer{max-width:1440px;display:flex;align-items:center;gap:24px;margin:auto;padding:28px max(16px,3vw) calc(28px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
footer strong{font-size:11.5px;letter-spacing:.12em}
footer span{font:italic 15px var(--display);color:var(--muted)}
footer small{margin-left:auto;font:10px var(--mono);letter-spacing:.06em;color:var(--soft)}
dialog{width:min(90vw,500px);padding:30px;background:var(--raised);color:var(--ink);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg)}
dialog::backdrop{background:rgba(8,20,40,.45);backdrop-filter:blur(3px)}
dialog h2{font-size:30px;margin-bottom:14px}
dialog p{font-size:14px;color:var(--muted)}
.dialog-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:24px;flex-wrap:wrap}

/* Invitation gate */
.invitation-gate{min-height:100svh;padding:28px max(16px,6vw) 36px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;background:radial-gradient(1200px 500px at 50% -10%,var(--tint),transparent 70%),var(--page)}
.gate-brand{text-decoration:none;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-align:center}
.gate-brand span{display:block;font-size:11px;font-weight:400;letter-spacing:0;color:var(--muted);margin-top:6px}
.gate-card{width:min(100%,520px);padding:38px;border:1px solid var(--line);border-radius:20px;background:var(--raised);box-shadow:var(--shadow)}
.gate-card h1{font-size:clamp(36px,5vw,50px);margin:16px 0 14px}
.gate-card>p:not(.eyebrow){font-size:15px;color:var(--muted)}
.gate-card form{margin-top:26px}
.gate-card label{display:block;font-size:13px;font-weight:500;margin-bottom:10px}
.pin-entry{display:flex;gap:8px}
.pin-entry input{width:100%;min-width:0;font:22px var(--mono);letter-spacing:.3em;text-align:center}
.pin-entry button{flex:none;min-width:70px;white-space:nowrap;font-size:13px}
.gate-card .detail-hint{margin-top:10px}
.gate-card .primary{margin-top:20px;width:100%;display:flex;justify-content:space-between;padding:15px 18px;font-size:15px}
.gate-card #pin-status{font-size:13px;margin-top:14px;line-height:1.6}
.gate-card .gate-note{font-size:12px!important;border-top:1px solid var(--line);padding-top:18px;margin-top:20px}
.gate-footer{font:italic 15px var(--display);color:var(--muted)}

@media(max-width:1150px){
 .opening{grid-template-columns:1fr}
 .client-guide{max-width:720px}
 .site-header nav a:first-child{display:none}
}
@media(max-width:1000px){.assessment-item{grid-template-columns:1fr}.assessment-tools{border-left:0;border-top:1px solid var(--line)}.blueprint-layout{grid-template-columns:1fr}}
@media(max-width:900px){
 .site-header{flex-wrap:wrap;gap:10px 14px}
 .site-header nav{order:3;width:100%;margin:0;overflow-x:auto}
 .tool-search{margin-left:auto;width:auto}
 .tool-search .crm-command-trigger kbd{display:none}
 .preferences button:first-child{display:none}
 :root{--header:118px}
}
@media(max-width:800px){
 .studio{grid-template-columns:1fr;gap:20px}
 .system-directory{position:static}
 .system-directory nav{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
 .system-directory nav button{background:var(--raised);box-shadow:inset 0 0 0 1px var(--line)}
 .directory-summary{display:flex;justify-content:space-between;margin-top:0;padding:10px 4px}
 .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hero-stats div:nth-child(3){border-left:0}.hero-stats div:nth-child(n+3){border-top:1px solid var(--line)}
 .blueprint-section>header{grid-template-columns:1fr}
 footer{flex-wrap:wrap;gap:8px 16px}footer small{flex:1 0 100%;margin:0}
}
@media(max-width:520px){
 body{font-size:14.5px}
 .brand small{display:none}
 .preferences button{padding:6px 9px;font-size:11.5px}
 .opening h1{font-size:44px}
 .profile-grid{grid-template-columns:1fr}.profile-grid .wide{grid-column:auto}
 #profile-form,.gate-card{padding:22px}
 .assessment-area,.assessment-tools{padding:20px}
 .orientation a{grid-template-columns:64px minmax(0,1fr) 12px;gap:9px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html[data-motion=reduced]{scroll-behavior:auto}
@media(forced-colors:active){button[aria-pressed=true]{outline:2px solid Highlight}.priority-group input:checked+span{outline:2px solid Highlight}}

/* ------------------------------------------------------------------ Tech layer
   Grid-paper night sky, glowing accents and glass surfaces. Everything reads tokens, so day mode stays calm. */
body{background:radial-gradient(1100px 620px at 8% -8%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),radial-gradient(900px 560px at 96% 4%,color-mix(in srgb,var(--accent-2) 11%,transparent),transparent 70%),linear-gradient(var(--grid) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/56px 56px,var(--page);background-attachment:fixed}
h1 em,h2 em,.selected-system h4 em{background:linear-gradient(95deg,var(--accent) 10%,var(--accent-2) 90%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.eyebrow{font-family:var(--mono);font-weight:500;letter-spacing:.12em}
.opening .eyebrow,.map-head .eyebrow,.assessment-head .eyebrow,.section-heading .eyebrow,.blueprint-section>header>.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--accent-2)}
.opening .eyebrow::before,.map-head .eyebrow::before,.assessment-head .eyebrow::before,.section-heading .eyebrow::before,.blueprint-section>header>.eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 0 0 var(--accent-2);animation:beacon 2.4s infinite}
@keyframes beacon{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent-2) 60%,transparent)}70%,100%{box-shadow:0 0 0 9px transparent}}
button.primary,.button-link.primary,.primary{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--accent-2)));border-color:transparent;color:#fff;box-shadow:var(--glow);transition:transform .18s,box-shadow .18s,filter .18s}
button.primary:not(:disabled):hover,.button-link.primary:hover{transform:translateY(-1px);filter:brightness(1.08);background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 40%,var(--accent-2)))}
html[data-theme=night] button:not(.primary):not(.map-tile):not(.map-tool):not(.map-back):not(.story-chip){background:color-mix(in srgb,var(--raised) 80%,transparent)}
.brand-mark{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:var(--glow)}
.site-header{background:color-mix(in srgb,var(--page) 72%,transparent);backdrop-filter:saturate(1.4) blur(16px)}
.blueprint-link span{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff}
.opening{position:relative;isolation:isolate}
.opening::before{content:'';position:absolute;z-index:-1;left:-10%;top:-30%;width:70%;height:120%;background:conic-gradient(from 180deg at 50% 50%,color-mix(in srgb,var(--accent) 30%,transparent),color-mix(in srgb,var(--accent-2) 22%,transparent),transparent 60%,color-mix(in srgb,var(--accent) 24%,transparent));filter:blur(90px);opacity:.55;animation:aurora 18s linear infinite;pointer-events:none}
@keyframes aurora{to{transform:rotate(360deg)}}
.opening h1{font-size:clamp(48px,7vw,104px);letter-spacing:-.035em}
.hero-stats,.client-guide,.assessment-item,.tool-stage,#profile-form,.selected-system,.export-card,.vision-disclaimer,.empty-state{background:var(--glass);backdrop-filter:blur(14px)}
.hero-stats dd{background:linear-gradient(180deg,var(--ink),color-mix(in srgb,var(--ink) 60%,var(--accent)));-webkit-background-clip:text;background-clip:text;color:transparent}
.orientation a,.tool-card,.suggested-tool,.kit-panel{background:color-mix(in srgb,var(--raised) 75%,transparent)}
.assessment-item{position:relative}
.assessment-item::before{content:'';position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:3px;background:linear-gradient(var(--accent),var(--accent-2));box-shadow:0 0 14px var(--accent)}
.assessment-tools{background:color-mix(in srgb,var(--surface) 55%,transparent)}
.suggested-tool:not(:disabled):hover,.tool-card:not(:disabled):hover{border-color:var(--accent);box-shadow:var(--glow);transform:translateY(-1px)}
.suggested-tool,.tool-card{transition:border-color .18s,box-shadow .18s,transform .18s}
.tool-card[aria-pressed=true]{box-shadow:0 0 0 1px var(--accent),var(--glow);background:color-mix(in srgb,var(--accent) 10%,var(--raised))}
.tool-stage{border-color:color-mix(in srgb,var(--accent) 28%,var(--line));box-shadow:var(--shadow),0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent)}
.system-directory nav button[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 12%,transparent);box-shadow:inset 2px 0 0 var(--accent-2)}
.tag-live{background:color-mix(in srgb,var(--accent-2) 16%,transparent);color:var(--accent-2)}
html:not([data-theme=night]) .tag-live{color:var(--accent)}
.return-pill{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:var(--glow)}
.tool-preview-card{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,transparent),color-mix(in srgb,var(--accent-2) 10%,transparent));border-left-color:var(--accent-2)}
.tool-preview-card .mock-label{color:var(--accent-2)}
/* Gentle scroll reveal; skipped entirely with reduced motion. */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.is-visible{opacity:1;transform:none}
html[data-motion=reduced] .reveal{opacity:1;transform:none;transition:none}
html[data-motion=reduced] .opening::before,html[data-motion=reduced] .eyebrow::before{animation:none}
/* Return pill sits bottom-right so it never covers centred demo controls. */
.return-pill{left:auto;right:max(16px,env(safe-area-inset-right,0px));transform:none;padding:10px 16px;font-size:13px}
@media (max-width:720px){.return-pill{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}}
.return-pill{animation-name:pill-in-corner}
@keyframes pill-in-corner{from{opacity:0;transform:translateY(12px)}}
/* The rotating aurora and glows must never widen the page on phones. */
html,body{overflow-x:clip}
/* Language switch sits with the header preferences and reads as one of them. */
.lang-switch{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);font:600 12px var(--mono);letter-spacing:.06em;color:var(--ink);text-decoration:none}
.lang-switch:hover{border-color:var(--accent);color:var(--accent)}
.lang-picker{display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:center}
.preferences .lang-picker{flex-wrap:nowrap;gap:4px}
.lang-switch[aria-pressed="true"],.lang-switch[aria-current="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.footer-invite{font-size:13px;color:var(--muted)}
.orientation a{grid-template-columns:92px minmax(0,1fr) 14px}
@media (max-width:720px){.orientation a{grid-template-columns:84px minmax(0,1fr) 12px}.lang-switch{min-height:34px;padding:6px 9px;font-size:11.5px}}
/* Who we are: one calm section before any tools or suggestions. */
.about{max-width:1440px;margin:auto;padding:24px max(16px,3vw) 64px;scroll-margin-top:calc(var(--header) + 8px)}
.about-head{display:grid;gap:14px;max-width:860px;padding-top:40px;border-top:1px solid var(--line)}
.about-head h2{font-size:clamp(34px,4vw,56px)}
.about-head p:last-child{font-size:16px;color:var(--muted);max-width:64ch}
.about-head .eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--accent-2)}
.about-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:32px}
.about-block{min-width:0;padding:26px 28px;border:1px solid var(--line);border-radius:var(--radius);background:var(--glass,var(--raised));backdrop-filter:blur(14px)}
.about-block h3{font:400 25px/1.2 var(--display);letter-spacing:-.015em;margin-bottom:18px}
.about-what,.about-how{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.about-what li,.about-how li{display:grid;gap:4px;padding-top:14px;border-top:1px solid var(--line)}
.about-what li:first-child,.about-how li:first-child{border-top:0;padding-top:0}
.about-what strong,.about-how strong{font-size:15px;font-weight:600}
.about-how strong{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--accent)}
.about-what span,.about-how span{font-size:14px;color:var(--muted);max-width:56ch}
.about-next{display:inline-flex;margin-top:22px;font-weight:600;color:var(--accent);text-decoration:none}
.about-next:hover{text-decoration:underline}
@media (max-width:860px){.about-grid{grid-template-columns:1fr}.about-block{padding:22px 20px}}
/* Interactive story: zig-zag blocks, text on one side and an SVG stage on the other.
   Plain sections sit between them. Stacks to one column on narrow screens. */
.about{display:grid;gap:clamp(28px,4vw,56px)}
.about-plain{max-width:1100px}
.about-plain .about-what,.about-plain .about-how{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));column-gap:28px}
.about-plain .about-what li:first-child,.about-plain .about-how li:first-child{border-top:1px solid var(--line);padding-top:14px}
.story-block{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:"head visual" "controls visual";column-gap:clamp(24px,4vw,64px);row-gap:18px;align-items:center}
.story-block.is-reverse{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"visual head" "visual controls"}
.story-head{grid-area:head;align-self:end}.story-controls{grid-area:controls;align-self:start}.story-visual{grid-area:visual}
.story-copy{display:grid;gap:16px;align-content:start;min-width:0}
.story-copy h3{font:400 clamp(28px,3.2vw,44px)/1.1 var(--display);letter-spacing:-.02em;text-wrap:balance}
.story-copy h3 em{color:var(--accent)}
.story-copy>p:not(.eyebrow){font-size:16px;color:var(--muted);max-width:56ch}
.story-copy .eyebrow{color:var(--accent-2,var(--accent))}
.story-pick{display:flex;flex-wrap:wrap;gap:8px}
.story-chip{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:9px 14px;background:var(--raised);color:var(--ink);font-size:14px}
.story-chip svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.story-pick .story-chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.story-chip:hover{border-color:var(--accent)}
.story-detail{min-height:3em;font-size:15px;color:var(--ink)!important;border-left:2px solid var(--accent);padding-left:12px}
.story-note,.story-status{font-size:13px;color:var(--soft)}
.story-status{margin-top:8px;text-align:center;font-family:var(--mono);min-height:1.4em}
.story-visual{min-width:0;padding:clamp(10px,2vw,22px);border:1px solid var(--line);border-radius:var(--radius);background:var(--glass,var(--raised));backdrop-filter:blur(14px);position:relative;overflow:hidden}
.story-stage{display:block;width:100%;height:auto;max-height:min(70vh,520px);overflow:visible}
.stage-dots circle{fill:var(--line-strong)}
/* Media stage */
.device{transform-box:view-box;transform-origin:50% 50%;animation:device-in .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes device-in{from{transform:scale(.55);opacity:0}to{transform:none;opacity:1}}
.dev-body{fill:var(--surface);stroke:var(--line-strong);stroke-width:2}
.dev-stand{fill:var(--sunken);stroke:var(--line-strong);stroke-width:2}
.dev-notch,.dev-dot{fill:var(--line-strong)}
.dev-url{fill:var(--sunken);stroke:var(--line)}
.dev-url-text{font:12px var(--mono);fill:var(--muted)}
.dev-screen{fill:var(--page);stroke:var(--line)}
.ui-piece{opacity:0;transform-box:fill-box;transform-origin:50% 100%}
.ui-bar{fill:var(--tint-strong)}.ui-side{fill:var(--sunken)}.ui-card,.ui-row,.ui-chart{fill:var(--raised);stroke:var(--line);stroke-width:1.2}
.ui-accent{fill:var(--accent);stroke:none}.ui-good{fill:var(--good-tint);stroke:var(--good)}.ui-chip{fill:var(--sunken)}
.ui-line{fill:var(--line-strong)}.ui-strong{fill:var(--ink)}
rect.ui-bar{fill:var(--accent-2,var(--accent))}
.ui-label{font:600 12px var(--sans);fill:var(--ink)}
.code-line{font:12.5px var(--mono);fill:var(--accent);opacity:0}
.is-coding .code-line{animation:code-fly 1.1s calc(var(--i)*95ms) cubic-bezier(.2,.7,.2,1) both}
@keyframes code-fly{0%{transform:translate(260px,-30px);opacity:0}35%{opacity:1}100%{transform:none;opacity:.85}}
.is-built .code-line{animation:code-out .45s both}
@keyframes code-out{from{opacity:.85}to{opacity:0;transform:translateY(-6px)}}
.is-built .ui-piece{animation:piece-in .5s calc(var(--i)*60ms) cubic-bezier(.2,.8,.2,1) both}
@keyframes piece-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
/* Flow stage */
.flow-wire{fill:none;stroke:var(--line-strong);stroke-width:2;stroke-dasharray:4 6}
.flow-source{cursor:pointer}
.flow-source circle{fill:var(--raised);stroke:var(--line-strong);stroke-width:2;transition:fill .2s,stroke .2s}
.flow-source .flow-icon{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.flow-source text,.flow-target text{font:500 13px var(--sans);fill:var(--ink)}
.flow-source.is-active circle,.flow-source:hover circle{stroke:var(--accent);fill:var(--tint)}
.core-halo{fill:var(--tint);opacity:.6}
.core-ring{fill:var(--raised);stroke:var(--accent);stroke-width:2.5}
.core-title{font:700 17px var(--mono);fill:var(--accent);letter-spacing:.08em}
.core-sub{font:11px var(--sans);fill:var(--muted)}
.flow-core.is-busy .core-halo{animation:halo .7s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
@keyframes halo{to{transform:scale(1.18);opacity:.25}}
.flow-target rect{fill:var(--raised);stroke:var(--line-strong);stroke-width:2;transition:fill .3s,stroke .3s}
.flow-tick{fill:var(--good);opacity:0;transition:opacity .3s}
.flow-tick-mark{fill:none;stroke:var(--on-accent);stroke-width:2;stroke-linecap:round;opacity:0;transition:opacity .3s}
.flow-target.is-hit rect{stroke:var(--good);fill:var(--good-tint)}
.flow-target.is-hit .flow-tick,.flow-target.is-hit .flow-tick-mark{opacity:1}
.flow-packet{fill:var(--accent-2,var(--accent));filter:drop-shadow(0 0 6px var(--accent))}
.story-log{list-style:none;margin:0;padding:0;display:grid;gap:8px;min-height:9.5em}
.story-log li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;font-size:14px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--raised);animation:log-in .3s both}
.story-log li strong{font-weight:600;color:var(--good)}
.story-log li span{color:var(--muted)}
.story-log .story-log-idle,.story-log .story-log-done{display:block;border-style:dashed;color:var(--muted);background:transparent}
.story-log .story-log-done{border-color:var(--good);color:var(--ink)}
@keyframes log-in{from{opacity:0;transform:translateY(4px)}}
/* Sort stage */
.sort-frame{opacity:0;transition:opacity .2s}
.sort-frame>rect{fill:var(--surface);stroke:var(--line-strong);stroke-width:2}
.sort-frame .sort-frame-bar{fill:var(--tint)}
.sort-frame text{font:600 14px var(--sans);fill:var(--ink)}
.sort-live{fill:var(--good)}
.sort-piece{--sorted:0}
.piece-before{stroke:var(--line-strong);stroke-width:1.5;opacity:calc(1 - var(--sorted))}
.piece-after{fill:var(--raised);stroke:var(--accent);stroke-width:1.5;opacity:var(--sorted)}
.sort-sheet .piece-before{fill:var(--good-tint)}.sort-note .piece-before{fill:var(--warn-tint)}.sort-chat .piece-before{fill:var(--tint)}
.sort-mail .piece-before{fill:var(--sunken)}.sort-paper .piece-before{fill:var(--raised)}.sort-cal .piece-before{fill:var(--tint-strong)}
.piece-art{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:translate(84px,-6px) scale(.8);opacity:calc(.9 - var(--sorted)*.55)}
.piece-label-before,.piece-label-after{font:600 13px var(--sans);fill:var(--ink)}
.piece-label-before{opacity:calc(1 - var(--sorted))}
.piece-label-after{opacity:var(--sorted)}
.piece-meter{fill:var(--accent);opacity:var(--sorted)}
.sort-control{display:flex;align-items:center;gap:12px;margin-top:12px;font:12px var(--mono);color:var(--muted)}
.sort-control input{flex:1;min-width:0;accent-color:var(--accent);height:30px}
.story-points{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.story-points li{position:relative;padding-left:26px;font-size:15px}
.story-points li::before{content:'✓';position:absolute;left:0;top:0;color:var(--good);font-weight:700}
html[data-motion=reduced] .device,html[data-motion=reduced] .story-log li{animation:none}
html[data-motion=reduced] .ui-piece{opacity:1;animation:none}
html[data-motion=reduced] .code-line{display:none}
@media (max-width:900px){.story-block,.story-block.is-reverse{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "visual" "controls"}.story-head{align-self:start}.story-log li{grid-template-columns:96px minmax(0,1fr)}}
@media (max-width:600px){.flow-source text,.flow-target text{font-size:17px}.core-sub{font-size:14px}.piece-label-before,.piece-label-after{font-size:17px}.sort-frame text{font-size:18px}.ui-label{font-size:16px}}
@media (max-width:480px){.story-chip{padding:8px 11px;font-size:13px}.story-log li{grid-template-columns:1fr;gap:2px}.story-visual{padding:8px}}