/* Sites yety : jetons et composants de la charte. Inter et JetBrains Mono auto-hébergées (OFL). Pas de style en ligne : la CSP l'interdit. */
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/inter-latin-wght-normal.woff2) format('woff2-variations'),url(fonts/inter-latin-wght-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2')}

:root{
color-scheme:dark;
--c-canvas:#07080a;--c-canvas-deep:#050607;--c-surface:#0b0d10;--c-surface-2:#111419;--c-line:#16191e;--c-line-strong:#23272e;
--c-ink:#eceef1;--c-ink-2:#8a919c;--c-ink-3:#7a818c;--c-ghost:rgb(236 238 241 / .08);
--c-signal:#2fd17c;--c-signal-ink:#7be3a8;--c-signal-soft:rgb(47 209 124 / .12);
--c-advisory:#f2b033;--c-advisory-ink:#f7c766;--c-advisory-soft:rgb(242 176 51 / .13);
--c-warning:#ff5c5c;--c-warning-ink:#ff8a8a;--c-warning-soft:rgb(255 92 92 / .13);
--c-info:#7da9ff;--c-info-ink:#b3ccff;--c-info-soft:rgb(125 169 255 / .13);
--c-primary:#004AAD;--c-on-primary:#fff;
--shadow-lift:0 1px 0 rgb(255 255 255 / .02) inset,0 1px 2px rgb(0 0 0 / .5);
--shadow-float:0 2px 8px rgb(0 0 0 / .5),0 24px 48px -16px rgb(0 0 0 / .8);
--font-ui:'Inter','Segoe UI',system-ui,sans-serif;--font-code:'JetBrains Mono',ui-monospace,monospace;
--radius-plate:6px;--radius-btn:8px;--radius-card:12px;--gutter:16px;--ease:cubic-bezier(.16,1,.3,1);
/* une seule couleur de marque (charte 3.2) */
--accent:#004AAD;--accent-ink:#7AA7F0;--accent-rgb:0 74 173;
}
@media (min-width:600px){:root{--gutter:24px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:68px}
body{margin:0;background:var(--c-canvas);color:var(--c-ink);font-family:var(--font-ui);font-size:.9375rem;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-weight:600;letter-spacing:-.02em;line-height:1.2;text-wrap:balance;overflow-wrap:anywhere}
img,svg{max-width:100%}
a{color:inherit}a:hover{color:#fff}
code{font-family:var(--font-code);font-size:.92em;overflow-wrap:anywhere}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--c-ink);outline-offset:2px}
.skip{position:absolute;left:8px;top:-60px;z-index:100;padding:10px 14px;border-radius:8px;background:var(--c-ink);color:var(--c-canvas);font-weight:500;text-decoration:none}
.skip:focus{top:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:1160px;margin-inline:auto;padding-inline:var(--gutter)}
.mono{font-family:var(--font-code)}
.lost{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center}
.lost h1{font-size:48px;letter-spacing:-.035em;font-weight:650}
.lost p{color:var(--c-ink-2)}
.lost img{border-radius:14px}

/* Boutons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border:1px solid transparent;border-radius:var(--radius-btn);font-family:inherit;font-size:.875rem;font-weight:600;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;transition:filter .2s,border-color .2s,background-color .2s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn svg{width:16px;height:16px;flex-shrink:0}
.btn-primary{background:var(--c-primary);color:var(--c-on-primary);box-shadow:var(--shadow-lift)}
.btn-primary:hover{color:var(--c-on-primary);filter:brightness(1.15)}
.btn-secondary{border-color:var(--c-line-strong);background:var(--c-surface);color:var(--c-ink);box-shadow:var(--shadow-lift)}
.btn-secondary:hover{border-color:var(--c-ink-3)}
.btn-lg{min-height:48px;padding:0 22px;font-size:.9375rem}
.cta{display:flex;flex-wrap:wrap;gap:10px}

/* Plaques */
.plate{display:inline-flex;align-items:center;gap:6px;min-height:22px;padding:0 8px;border:1px solid var(--c-line);border-radius:var(--radius-plate);background:var(--c-ghost);color:var(--c-ink-2);font-size:.75rem;font-weight:600;line-height:1}
.plate svg{width:13px;height:13px;flex-shrink:0}
.plate-signal{border-color:rgb(47 209 124 / .3);background:var(--c-signal-soft);color:var(--c-signal-ink)}
.plate-info{border-color:rgb(125 169 255 / .3);background:var(--c-info-soft);color:var(--c-info-ink)}
.status-row{display:flex;flex-wrap:wrap;gap:6px}

/* Sections */
.eyebrow,.label-tape{color:var(--c-ink-3);font-family:var(--font-code);font-size:.6875rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.block{padding-block:48px;border-top:1px solid var(--c-line)}
.block.flush{border-top:0;padding-top:8px}
.block.alt{background:var(--c-surface);border-bottom:1px solid var(--c-line)}
.block.alt+.block{border-top:0}
.section-head{display:grid;gap:10px;max-width:44rem;margin-bottom:28px}
.section-head h2{font-size:clamp(1.375rem,1.1rem + 1vw,1.75rem)}
.section-head p{color:var(--c-ink-2)}
.section-head.tight{margin-bottom:0}
.section-head.center{justify-items:center;margin-inline:auto;margin-bottom:36px;text-align:center}
.center-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:28px}
.page-head{padding-block:40px 28px}
.page-head h1{margin-top:8px;font-size:clamp(1.75rem,1.3rem + 2vw,2.5rem)}
.page-head .lede{max-width:44rem;margin-top:14px;color:var(--c-ink-2);font-size:1rem}
.split{display:grid;gap:28px}
.split>*{min-width:0}
@media (min-width:900px){
.block{padding-block:72px}
.block.flush{padding-top:8px}
.page-head{padding-block:64px 36px}
.split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.split.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.more{display:inline-flex;align-items:center;gap:6px;min-height:40px;font-size:.875rem;font-weight:500}
.more::after{content:'→';transition:transform .2s var(--ease)}
.more:hover::after{transform:translateX(3px)}
.points{display:grid;border-top:1px solid var(--c-line)}
.points>li{display:grid;gap:4px;padding-block:16px;border-bottom:1px solid var(--c-line)}
.points strong{font-size:.9375rem;font-weight:600}
.points p{color:var(--c-ink-2);font-size:.875rem}
.benefits{display:grid;gap:28px 32px}
@media (min-width:640px){.benefits{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.benefits{grid-template-columns:repeat(3,minmax(0,1fr))}.benefits.four{grid-template-columns:repeat(4,minmax(0,1fr))}}
.benefits li{min-width:0}
.benefits h3{font-size:1rem}
.benefits p{margin-top:6px;color:var(--c-ink-2);font-size:.9375rem}
.icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin-bottom:14px;border:1px solid var(--c-line-strong);border-radius:8px;background:var(--c-surface-2);color:var(--accent-ink)}
.icon svg{width:16px;height:16px}
.icon.num{font-family:var(--font-code);font-size:.8125rem;font-weight:600}
.notice{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid rgb(242 176 51 / .3);border-radius:var(--radius-card);background:var(--c-advisory-soft);font-size:.875rem}
.notice svg{width:18px;height:18px;flex-shrink:0;margin-top:2px;color:var(--c-advisory)}
.notice a{color:var(--accent-ink)}
.panel{background:var(--c-surface);border:1px solid var(--c-line-strong);border-radius:var(--radius-card);overflow:hidden}
.bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 16px;border-bottom:1px solid var(--c-line-strong);font-family:var(--font-code);font-size:12px;color:var(--c-ink-3)}
.row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:12px;padding:12px 16px;border-bottom:1px solid var(--c-line);font-size:.875rem;align-items:baseline}
.row:last-child{border-bottom:0}
.row b{font-weight:600}.row span{color:var(--c-ink-2)}

/* Code */
.code{position:relative;min-width:0;max-width:100%;border:1px solid var(--c-line-strong);border-radius:10px;background:var(--c-canvas-deep)}
.code pre{margin:0;padding:16px 84px 16px 16px;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--c-ink);font-family:var(--font-code);font-size:.8125rem;line-height:1.75}
.code .prompt,.code .comment{color:var(--c-ink-3)}
.code .prompt{user-select:none}
.copy{position:absolute;top:10px;right:10px;min-height:32px;padding:0 10px;border:1px solid var(--c-line-strong);border-radius:6px;background:var(--c-surface-2);color:var(--c-ink-2);font-family:inherit;font-size:.75rem;font-weight:600;cursor:pointer}
@media (max-width:959px){.copy{min-height:40px;top:6px;right:6px}}
.copy:hover{color:var(--c-ink)}
.copy.done{border-color:rgb(47 209 124 / .4);color:var(--c-signal-ink)}

/* Accueil : héros à grille carrée */
.hero{padding-block:44px 56px;border-bottom:1px solid var(--c-line);background:radial-gradient(48rem 26rem at 70% 10%,rgb(var(--accent-rgb) / .09),transparent 70%),linear-gradient(var(--c-line) 1px,transparent 1px) 0 0 / 44px 44px,linear-gradient(90deg,var(--c-line) 1px,transparent 1px) 0 0 / 44px 44px}
@media (min-width:900px){.hero{padding-block:80px 88px}}
.hero-grid{display:grid;gap:40px;max-width:1280px}
@media (min-width:1100px){.hero-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}}
.hero-text{min-width:0}
.hero h1{margin-top:18px;font-size:clamp(2.125rem,1.4rem + 3vw,3.4rem);letter-spacing:-.035em;line-height:1.08}
/* Le mot qui tourne : tous les mots occupent la même case, la largeur et la hauteur ne bougent donc pas. */
.rot{display:inline-grid;vertical-align:bottom;max-width:100%;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em;color:var(--accent-ink)}
.rot>span{grid-area:1/1;opacity:0;transform:translateY(.6em);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.rot>span.on{opacity:1;transform:none}
.rot>span.off{opacity:0;transform:translateY(-.6em)}
.hero .lede{max-width:36rem;margin-top:18px;color:var(--c-ink-2);font-size:1.125rem}
.hero .cta{margin-top:28px}

/* La démonstration du héros : petite, cliquable, elle joue seule jusqu'au premier geste. */
.demo-fig{min-width:0}
.demo{position:relative;overflow:hidden;border:1px solid var(--c-line-strong);border-radius:14px;background:var(--c-canvas);box-shadow:var(--shadow-float),0 0 0 6px rgb(255 255 255 / .02)}
.demo .bar{background:var(--c-surface-2)}
.d-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 12px;border-top:1px solid var(--c-line)}
.d-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 12px;border:1px solid var(--c-line-strong);border-radius:var(--radius-btn);background:var(--c-surface-2);color:var(--c-ink);font-size:.8125rem;font-weight:600;line-height:1.2;cursor:pointer;transition:border-color .2s,background-color .2s}
.d-btn svg{width:14px;height:14px;flex-shrink:0}
.d-btn:hover{border-color:var(--c-ink-3)}
.d-btn[aria-pressed=true]{border-color:rgb(var(--accent-rgb) / .6);background:rgb(var(--accent-rgb) / .14);color:var(--accent-ink)}
.d-note{min-height:3.2em;padding:10px 14px;border-top:1px solid var(--c-line);color:var(--c-ink-2);font-size:.8125rem;line-height:1.6}
.d-push{margin-inline-start:auto}
.demo :focus-visible{outline-offset:-2px}

/* Soutien */
.h-sm{margin-bottom:14px;font-size:1rem}

/* Bloc final */
.final-box{display:grid;gap:28px;padding:28px 18px;border:1px solid var(--c-line-strong);border-radius:16px;background:radial-gradient(40rem 16rem at 0 0,rgb(var(--accent-rgb) / .08),transparent 70%),var(--c-surface)}
@media (min-width:900px){.final-box{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:48px;padding:44px 48px}}
.final-text h2{font-size:clamp(1.75rem,1.3rem + 1.4vw,2.4rem);letter-spacing:-.03em}
.final-text p{max-width:28rem;margin-top:10px;color:var(--c-ink-2)}
.final-text .cta{margin-top:24px}
.final-code{min-width:0}

/* Étapes et faits */
.steps{display:grid;max-width:46rem;counter-reset:step}
.steps>li{position:relative;display:grid;gap:10px;min-width:0;padding:0 0 32px 46px;counter-increment:step}
.steps>li::before{content:counter(step);position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--c-line-strong);border-radius:8px;background:var(--c-surface-2);color:var(--c-ink);font-family:var(--font-code);font-size:.8125rem;font-weight:600}
.steps>li::after{content:'';position:absolute;left:15px;top:38px;bottom:8px;width:1px;background:var(--c-line-strong)}
.steps>li:last-child{padding-bottom:0}
.steps>li:last-child::after{display:none}
.steps h2{font-size:1.0625rem;line-height:30px}
.steps p{color:var(--c-ink-2)}
.steps>li>*{min-width:0}
.facts{display:grid;border-top:1px solid var(--c-line)}
.facts li{padding-block:10px;border-bottom:1px solid var(--c-line);font-size:.875rem}
.facts .k{display:block;color:var(--c-ink-2);font-size:.8125rem}
.notice-row{margin-top:32px;max-width:46rem}

/* Barre du haut, à l'identique sur tous les sites. */
.topbar{position:sticky;top:0;z-index:30;height:52px;border-bottom:1px solid var(--c-line-strong);background:rgb(7 8 10 / .92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.topbar .wrap{display:flex;align-items:center;gap:16px;height:100%;max-width:1280px}
.topbar .brand{display:inline-flex;align-items:center;gap:10px;min-height:40px;color:var(--c-ink);font-size:.9375rem;font-weight:600;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.topbar .brand svg{display:block;width:28px;height:28px;flex:none}
.topbar .nav{display:none}
.topbar .actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.topbar .tb-btn{display:none;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 12px;border:1px solid var(--c-line-strong);border-radius:8px;background:var(--c-surface-2);color:var(--c-ink);font-size:.8125rem;font-weight:600;line-height:1.2;text-decoration:none}
.topbar .tb-btn:hover{border-color:var(--c-ink-3);color:var(--c-ink)}
.topbar .tb-btn svg{width:16px;height:16px;flex-shrink:0}
.topbar .tb-primary{border-color:var(--accent);background:var(--accent);color:#fff}
.topbar .tb-primary:hover{border-color:var(--accent);color:#fff;filter:brightness(1.15)}
.topbar .menu-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--c-line-strong);border-radius:8px;background:var(--c-surface-2);color:var(--c-ink);cursor:pointer}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:16px;height:1.5px;border-radius:1px;background:currentColor;transition:transform .2s ease}
.menu-btn span{position:relative}
.menu-btn span::before,.menu-btn span::after{content:'';position:absolute;left:0}
.menu-btn span::before{top:-5px}
.menu-btn span::after{top:5px}
.menu-open .menu-btn span{background:transparent}
.menu-open .menu-btn span::before{transform:translateY(5px) rotate(45deg)}
.menu-open .menu-btn span::after{transform:translateY(-5px) rotate(-45deg)}
@media (min-width:600px){.topbar .tb-btn{display:inline-flex}}
@media (min-width:1140px){
.topbar .nav{display:flex;align-items:center;gap:2px;margin-left:12px}
.topbar .nav a{display:inline-flex;align-items:center;height:36px;padding:0 11px;border-radius:8px;color:var(--c-ink-2);font-size:.875rem;font-weight:500;text-decoration:none;white-space:nowrap}
.topbar .nav a:hover,.topbar .nav a[aria-current]{color:var(--c-ink)}
.topbar .nav .nav-extra{display:none}
.topbar .tb-btn{min-height:36px}
.topbar .menu-btn{display:none}
}
@media (max-width:1139px){
.menu-open .topbar .nav{position:fixed;top:52px;left:0;right:0;z-index:29;display:grid;gap:2px;max-height:calc(100dvh - 52px);overflow-y:auto;padding:8px 24px 16px;border-bottom:1px solid var(--c-line-strong);background:var(--c-canvas)}
.menu-open .topbar .nav a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;color:var(--c-ink);font-weight:500;text-decoration:none}
.menu-open .topbar .nav a:hover{background:var(--c-surface-2)}
}

/* Motion */
.mo-wait{opacity:0;transform:translateY(20px)}
.mo-in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--mo-d,0ms),transform .7s cubic-bezier(.2,.7,.2,1) var(--mo-d,0ms)}
@keyframes mo-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
.hero-text>*{animation:mo-rise .8s cubic-bezier(.2,.7,.2,1) both}
.hero-text>:nth-child(2){animation-delay:.08s}
.hero-text>:nth-child(3){animation-delay:.16s}
.hero-text>:nth-child(4){animation-delay:.24s}
.demo-fig{animation:mo-rise .9s .28s cubic-bezier(.2,.7,.2,1) both}
.topbar .nav a{transition:color .2s ease}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
.rot>span{transform:none}
}

/* Pied de page, le même sur tous les sites */
.sh-foot{margin:0;padding:0;border:0;border-top:1px solid var(--c-line-strong);background:none;font-size:14px;color:var(--c-ink-2)}
.sh-foot a{display:inline-flex;align-items:center;gap:8px;min-height:40px;color:inherit;text-decoration:none;transition:color .2s ease}
.sh-foot a:hover{color:#fff}
.sh-foot svg{display:block;width:18px;height:18px;flex:none}
.sh-f-main,.sh-f-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px}
.sh-f-main{padding:20px 0 4px}
.sh-foot .sh-f-brand{gap:10px;color:var(--c-ink);font-size:15px;font-weight:600}
.sh-f-brand svg{width:24px;height:24px}
.sh-f-main nav{display:flex;flex-wrap:wrap;gap:0 20px}
.sh-f-bar{padding:0 0 16px;font-size:13px}
.sh-foot .sh-home{flex-wrap:wrap;gap:0 8px;color:var(--c-ink-2)}
.sh-foot .sh-home b{color:inherit}
.sh-foot .sh-all{text-decoration:underline;text-underline-offset:3px}
.sh-foot b{font-weight:650}
.sh-foot .sh-note{margin:0;padding:0 0 16px;font-size:12px;color:var(--c-ink-3)}

/* Sélecteur de langue */
.lang{position:relative}
.lang summary{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 10px;border:1px solid var(--c-line-strong);border-radius:8px;background:var(--c-surface-2);color:var(--c-ink-2);font-family:var(--font-code);font-size:.75rem;font-weight:500;cursor:pointer;list-style:none}
@media (min-width:900px){.lang summary{height:36px}}
.lang summary::-webkit-details-marker{display:none}
.lang summary:hover{color:var(--c-ink);border-color:var(--c-ink-3)}
.lang summary svg{width:14px;height:14px}
.lang ul{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:200px;margin:0;padding:4px;list-style:none;border:1px solid var(--c-line-strong);border-radius:10px;background:var(--c-surface-2);box-shadow:0 12px 32px rgb(0 0 0 / .5)}
.lang a{display:flex;align-items:center;min-height:40px;padding:0 10px;border-radius:6px;color:var(--c-ink);font-size:.8125rem;text-decoration:none}
.lang a:hover,.lang a[aria-current]{background:var(--c-line-strong)}
.lang a[aria-current]{font-weight:600}
.lang a[aria-current]::after{content:'';width:6px;height:6px;margin-left:auto;border-radius:50%;background:currentColor}

/* Liens dans le texte : l'accent lisible sur fond sombre */
.lede a,.section-head a,.points a,.final-text a,.steps p a,.facts a,.lost a:not(.btn),.more,.d-note a{color:var(--accent-ink)}
.lede a:hover,.section-head a:hover,.points a:hover,.final-text a:hover,.steps p a:hover,.facts a:hover,.more:hover{color:#fff}
.sup-line{margin-top:24px}
/* Démonstrations du héros : une ligne par fait, un état affiché à la fois. */
.demo .row b{min-width:0;overflow-wrap:anywhere}
.demo .row b.mono{font-weight:500;font-size:.75rem;overflow-wrap:normal}
.demo .row .plate{vertical-align:middle}
.demo .row small{display:block;margin-top:2px;color:var(--c-ink-3);font-size:.75rem}
.src-n{color:var(--accent-ink);font-family:var(--font-code)}
.plate-busy{border-color:rgb(var(--accent-rgb) / .55);background:rgb(var(--accent-rgb) / .22);color:var(--accent-ink)}
/* Page yety : une page, sans menu */
.hb-lang{position:absolute;top:14px;right:14px;z-index:20}
.hb-top{position:relative;padding:88px var(--gutter) 64px;text-align:center;border-bottom:1px solid var(--c-line);background:radial-gradient(48rem 26rem at 50% 0,rgb(var(--accent-rgb) / .16),transparent 70%),linear-gradient(var(--c-line) 1px,transparent 1px) 0 0 / 44px 44px,linear-gradient(90deg,var(--c-line) 1px,transparent 1px) 0 0 / 44px 44px}
.hb-intro{max-width:44rem;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:20px}
.hb-wordmark{display:block;width:clamp(180px,30vw,300px);height:auto}
.hb-intro h1{font-size:clamp(2.125rem,1.4rem + 3vw,3.4rem);letter-spacing:-.035em;line-height:1.08}
.hb-intro .lede{max-width:40rem;color:var(--c-ink-2);font-size:1.125rem;text-wrap:pretty}
.hb-links-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.hb-cards{display:grid;gap:14px}
@media (min-width:900px){.hb-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hb-card{display:flex;flex-direction:column;gap:12px;min-width:0;padding:22px;background:var(--c-surface);border:1px solid var(--c-line-strong);border-radius:var(--radius-card)}
.hb-icon{display:block;width:48px;height:48px}
.hb-card h3{font-size:1.1875rem}
.hb-card p{flex-grow:1;color:var(--c-ink-2)}
.hb-card .cta{gap:8px}
.hb-card .btn svg{width:16px;height:16px}
.hb-end{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.hb-mail{display:inline-flex;align-items:center;min-height:40px;color:var(--accent-ink);font-family:var(--font-code);font-size:.875rem;overflow-wrap:anywhere}
.hb-mail:hover{color:#fff}
.row span.plate-signal{color:var(--c-signal-ink)}
.row span.plate-info{color:var(--c-info-ink)}
.row span.plate-busy{color:var(--accent-ink)}