/* Hub v2 components. Palette and geometry come from the canonical WC tokens. */
@font-face{font-family:'IBM Plex Sans';font-weight:100 700;font-display:swap;src:url('fonts/ibm-plex-sans-latin.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Condensed';font-weight:600;font-display:swap;src:url('fonts/ibm-plex-sans-condensed-600-latin.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:600;font-display:swap;src:url('fonts/ibm-plex-mono-600-latin.woff2') format('woff2')}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--wc-type-md)/var(--lh-body) var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{text-wrap:balance}p{text-wrap:pretty}a{color:inherit}button,input,select{font:inherit}
:focus-visible{outline:var(--stroke) solid var(--accent-ink);outline-offset:var(--stroke)}
.site-main,.footer-inner{max-width:var(--site-width);margin-inline:auto;padding:var(--s-4)}
.site-main>section+section{margin-top:var(--s-6)}
.skip{position:fixed;left:var(--s-4);top:var(--s-2);padding:var(--s-3);background:var(--surface);z-index:30;transform:translateY(-200%)}.skip:focus{transform:none}
.hero{display:grid;gap:var(--s-6);padding-block:var(--s-4);align-items:center}
.hero-copy{min-width:0}.product-label{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-3);font:600 var(--wc-type-md)/var(--lh-body) var(--mono)}
.pill{display:inline-flex;align-items:center;min-height:var(--pill-height);padding:var(--s-1) var(--s-3);border:var(--hairline) solid var(--control-line);border-radius:var(--r-pill);font:400 var(--wc-type-xs)/var(--lh-meta) var(--mono);color:var(--ink-2)}
.pill.alpha{color:var(--accent-ink);background:var(--accent-fill);border-color:transparent}
.hero h1{font:600 calc(var(--wc-type-display) * .75)/var(--lh-tight) var(--cond);letter-spacing:var(--tracking-count);margin-block:var(--s-3);text-wrap:initial;overflow-wrap:anywhere}
.lead{max-width:34ch;font-size:var(--wc-type-lg);color:var(--ink-2)}
.actions{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-block:var(--s-5) var(--s-3)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-3);min-height:var(--target);min-width:var(--target);padding:var(--s-3) var(--s-4);border:0;border-radius:var(--r-control);font:600 var(--wc-type-sm)/var(--lh-body) var(--sans);text-decoration:none;cursor:pointer;transition:background var(--duration-state),box-shadow var(--duration-state),transform var(--duration-state)}
.primary{background:var(--accent);color:var(--on-accent)}.secondary{background:var(--fill);color:var(--ink)}.btn:hover{box-shadow:inset 0 0 0 var(--stroke) currentColor}.btn:active{transform:translateY(var(--hairline))}.btn:disabled{cursor:wait;opacity:.7}
.play-icon{width:0;height:0;border-top:var(--s-1) solid transparent;border-bottom:var(--s-1) solid transparent;border-left:var(--s-2) solid currentColor}
.runtime{font-size:var(--wc-type-sm);max-width:36ch}.attribution{font-size:var(--wc-type-xs);color:var(--ink-2);margin-top:var(--s-2)}
.intro{width:100%;min-width:0;position:relative}.intro video{display:block;width:100%;height:auto;aspect-ratio:9/16;border-radius:var(--r-sheet);background:var(--ink);box-shadow:var(--shadow-raised)}
.intro figcaption{display:flex;justify-content:space-between;gap:var(--s-2);margin-top:var(--s-2);font:400 var(--wc-type-xs)/var(--lh-meta) var(--mono);color:var(--ink-2)}
.tick-rule{position:relative;padding-top:var(--s-6);border-top:var(--hairline) solid var(--sep)}
.tick-rule::before{content:'';position:absolute;top:0;left:0;right:0;height:var(--s-2);background:repeating-linear-gradient(90deg,var(--control-line) 0 var(--hairline),transparent var(--hairline) var(--s-8));opacity:.45;pointer-events:none}
.eyebrow{font:400 var(--wc-type-xs)/var(--lh-meta) var(--mono);color:var(--ink-2)}
h2{font:600 var(--wc-type-xl)/var(--lh-tight) var(--sans)}h3{font:600 var(--wc-type-md)/var(--lh-tight) var(--sans)}
.watch-band{display:grid;gap:var(--s-4)}.watch-name{display:flex;gap:var(--s-3);align-items:center}.watch-copy p{margin-top:var(--s-2);color:var(--ink-2)}.detail{font-size:var(--wc-type-sm)}.watch-band>.btn{justify-self:start}
.section-heading{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-3)}
.tool-grid{display:grid;gap:var(--s-3)}
.tool-tile{display:flex;flex-direction:column;gap:var(--s-3);min-width:var(--target);padding:var(--s-4);text-decoration:none;border:var(--hairline) solid var(--sep);border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shadow-card);transition:box-shadow var(--duration-state),transform var(--duration-state),border-color var(--duration-state)}
.tool-tile:hover{border-color:var(--control-line);box-shadow:var(--shadow-raised);transform:translateY(calc(-1 * var(--s-1)))}.tool-tile:active{transform:translateY(0);background:var(--surface-2)}
.tile-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3)}.tile-arrow{display:block;width:var(--s-2);height:var(--s-2);border-right:var(--stroke-icon) solid var(--ink-2);border-top:var(--stroke-icon) solid var(--ink-2);transform:rotate(45deg)}
.tile-copy{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:var(--s-2)}.tile-copy h3{color:var(--ink-2);font-size:var(--wc-type-sm)}.tile-hook{font:600 var(--wc-type-xl)/var(--lh-tight) var(--cond);text-wrap:balance;max-width:24ch}.preview-link{margin-top:auto;padding-top:var(--s-3);font-size:var(--wc-type-sm);color:var(--accent-ink)}
.concept{padding:var(--s-4);background:var(--surface-2);border-block:var(--hairline) solid var(--sep);position:relative}.concept::before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,var(--control-line) 0 var(--hairline),transparent var(--hairline) var(--s-6)) top left / 100% var(--s-1) no-repeat;opacity:.4}
.concept-sheet{border:var(--hairline) solid var(--control-line);border-radius:var(--s-1);padding:var(--s-3);background:var(--surface);font-size:var(--wc-type-xs);box-shadow:var(--shadow-card)}
.sheet-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);font:600 var(--wc-type-xs)/var(--lh-meta) var(--mono);padding-bottom:var(--s-3);border-bottom:var(--stroke) solid var(--accent)}.sheet-mark{width:var(--s-2);height:var(--s-2);background:var(--accent);flex-shrink:0}
.counsel-row{display:grid;gap:var(--s-1);padding-block:var(--s-2);border-bottom:var(--hairline) solid var(--sep)}.counsel-row:last-child{border:0;padding-bottom:0}.concept-label{color:var(--ink-2);font-family:var(--mono)}.concept-caption{margin-top:var(--s-2);font:400 var(--wc-type-xs)/var(--lh-meta) var(--mono);color:var(--ink-2)}
.writing-lines{display:grid;gap:var(--s-2);padding-block:var(--s-3)}.writing-lines i,.brief-options i{display:block;height:var(--s-1);background:var(--sep)}.writing-lines i:last-child{width:75%}.short-lines i:last-child{width:55%}.highlight-line{padding:var(--s-2);border-left:var(--stroke) solid var(--accent);background:var(--accent-fill);color:var(--accent-ink);font-weight:600}.report-note{font-size:var(--wc-type-xs);color:var(--ink-2)}
.brief-question{font-weight:600;margin-block:var(--s-3)}.brief-options{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}.brief-options>div{display:grid;gap:var(--s-2)}.brief-options i:last-child{width:70%}.brief-recommendation{margin-top:var(--s-3);padding-top:var(--s-2);border-top:var(--stroke) solid var(--accent);font-weight:600}
.lesson{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s-4)}.lesson h2{margin-block:var(--s-2)}.lesson p:last-child{color:var(--ink-2)}
.draft-label{color:var(--accent-ink);font:400 var(--wc-type-xs)/var(--lh-meta) var(--mono);margin-bottom:var(--s-2)}.mission-lead{max-width:64ch;margin-block:var(--s-3) var(--s-4);font-size:var(--wc-type-lg)}.values{display:grid;gap:var(--s-4)}.values p{font-size:var(--wc-type-sm);color:var(--ink-2);margin-top:var(--s-2)}
.updates{padding:var(--s-4);border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shadow-card);display:grid;gap:var(--s-3)}.updates h2{margin-block:var(--s-2)}.updates p{color:var(--ink-2)}
form{display:grid;gap:var(--s-3);min-width:0}form label{font-weight:600}.row{display:flex;gap:var(--s-3);flex-wrap:wrap}input[type=email]{flex:1;min-width:var(--target);width:100%;min-height:var(--target);border:var(--hairline) solid var(--control-line);background:var(--surface-2);border-radius:var(--r-control);color:var(--ink);padding:var(--s-3)}.row .btn{width:100%}.t-foot{font-size:var(--wc-type-sm)}.t-foot a{color:var(--accent-ink);text-underline-offset:.15em}.err:empty,.status:empty{display:none}.updates .err,.updates .bad{color:var(--accent-ink)}.updates .ok{color:var(--ink)}.hp{display:none}.email-choices{font-size:var(--wc-type-sm)}summary{cursor:pointer;min-height:var(--target);padding-block:var(--s-3)}
.site-footer{margin-top:var(--s-6);border-top:var(--hairline) solid var(--sep);font-size:var(--wc-type-sm);color:var(--ink-2)}.footer-inner{display:grid;gap:var(--s-3)}.footer-brand{color:var(--ink);font-weight:600}.site-footer nav{display:flex;flex-wrap:wrap;gap:var(--s-3)}.site-footer nav a,.back-link{display:inline-flex;align-items:center;min-height:var(--target);min-width:var(--target);text-decoration:none}.site-footer nav a:hover,.back-link:hover{text-decoration:underline}.appearance{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-3)}select{min-height:var(--target);min-width:var(--target);max-width:100%;padding:var(--s-2) var(--s-3);border:var(--hairline) solid var(--control-line);border-radius:var(--r-control);background:var(--surface);color:var(--ink)}
.preview-layout{display:grid;gap:var(--s-4)}.preview h1{font:600 calc(var(--wc-type-display) * .625)/var(--lh-tight) var(--cond);margin-top:var(--s-3);max-width:22ch}.preview-copy{min-width:0;overflow-wrap:anywhere}.planned{margin-top:var(--s-2);font-size:var(--wc-type-sm);color:var(--ink-2)}.capabilities{display:grid;gap:var(--s-2);list-style:none;padding:0;margin:var(--s-3) 0 0}.capabilities li{padding-left:var(--s-3);border-left:var(--stroke) solid var(--accent)}.preview-art .concept{border-radius:var(--r-card)}.back-link{margin-bottom:var(--s-2);font-size:var(--wc-type-sm);color:var(--ink-2)}
@media(min-width:768px){.site-main,.footer-inner{padding-inline:var(--s-8)}.hero{grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr);gap:var(--s-8)}.hero h1{font-size:var(--wc-type-display)}.intro{max-width:340px;justify-self:end}.watch-band{grid-template-columns:minmax(0,1fr) auto;align-items:center}.watch-name{grid-column:1/-1}.tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.concept{padding:var(--s-3)}.tool-tile .concept{display:flex;flex-direction:column;flex:0 0 auto;min-height:270px}.tool-tile .concept-sheet{flex:1}.tool-tile .concept-caption{margin-top:auto;padding-top:var(--s-2)}.values{grid-template-columns:repeat(2,minmax(0,1fr))}.row{flex-wrap:nowrap}.row .btn{width:auto}.updates{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-4)}.email-choices{grid-column:1/-1}.preview-layout{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:var(--s-8)}.preview h1{font-size:calc(var(--wc-type-display) * .75)}.preview-art .concept{padding:var(--s-6)}.preview-art .concept-sheet{font-size:var(--wc-type-sm)}}
@media(min-width:1200px){.hero h1{font-size:calc(var(--wc-type-display) * 1.125)}}
@keyframes arrive{from{opacity:.5;transform:translateY(var(--s-3))}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){.entrance,.arrive{animation:arrive var(--duration-sheet) var(--ease) both}.tool-tile.arrive{animation-fill-mode:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.tool-tile:hover,.tool-tile:active,.btn:active{transform:none}}