/* ================= TOKENS ================= */
:root{
  --paper:#F3EFE4; --paper-2:#E8E2D1; --line:#D5CDB6;
  --ink:#171B13; --ink-soft:#585D4E;
  --auto:#23A05A; --review:#E0AC1C; --expert:#D2432B;
  --auto-soft:#DCEBDD; --review-soft:#F5E7BA; --expert-soft:#F4D9D2;
  --green-band:#1C3326; --green-band-2:#284634;
  --on-dark:#EEE9D7; --on-dark-soft:#AFB6A1;
  --yellow:#E7C33F; --on-yellow:#1B1A0C;
  --ink-band:#161A12;
  --focus:#3F8A55;
  --serif:'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans:'Instrument Sans', -apple-system, 'Segoe UI', sans-serif;
  --display:'Bricolage Grotesque', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#12150F; --paper-2:#1B1F17; --line:#343B2C;
    --ink:#EEE9D8; --ink-soft:#ACA894;
    --auto:#6DBF88; --review:#EBC24F; --expert:#E4735B;
    --auto-soft:#1D3024; --review-soft:#3A3115; --expert-soft:#3A1E17;
    --green-band:#0F2118; --green-band-2:#1A3526;
    --ink-band:#0A0C08;
    --focus:#6DBF88;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#12150F; --paper-2:#1B1F17; --line:#343B2C;
  --ink:#EEE9D8; --ink-soft:#ACA894;
  --auto:#6DBF88; --review:#EBC24F; --expert:#E4735B;
  --auto-soft:#1D3024; --review-soft:#3A3115; --expert-soft:#3A1E17;
  --green-band:#0F2118; --green-band-2:#1A3526;
  --ink-band:#0A0C08;
  --focus:#6DBF88;
  color-scheme:dark;
}

/* ================= BASE ================= */
*{box-sizing:border-box;}
body{background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.55; margin:0;}
main{overflow-x:clip;}
h1,h2,h3,p{margin:0;}
h1,h2,h3{font-weight:400; text-wrap:balance;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px;}
::selection{background:var(--yellow); color:var(--on-yellow);}
.wrap{max-width:1120px; margin-inline:auto; padding-inline:max(20px, env(safe-area-inset-left,0px));}
.wrap.wide{max-width:1360px;}
.band{padding-block:104px;}
.band-paper{background:var(--paper);}
.band-green{background:var(--green-band); color:var(--on-dark);}
.band-ink{background:var(--ink-band); color:var(--on-dark);}
.vh-toggle{position:absolute; opacity:0; width:1px; height:1px; overflow:hidden; pointer-events:none;}

.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); display:flex; align-items:center; gap:10px;}
.eyebrow.on-dark{color:var(--on-dark-soft);}
.eyebrow::before{content:""; width:22px; height:1px; background:currentColor; opacity:.6;}
#hero .eyebrow::before{display:none;}
.pulse{flex:none; width:8px; height:8px; border-radius:50%; background:var(--auto); box-shadow:0 0 0 0 color-mix(in srgb, var(--auto) 60%, transparent);}
@media (prefers-reduced-motion:no-preference){ .pulse{animation:pulse 2.2s ease-out infinite;} }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--auto) 55%, transparent);} 100%{box-shadow:0 0 0 12px transparent;} }

.btn{font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:-.005em; padding:15px 24px; border-radius:999px; text-decoration:none; display:inline-flex; align-items:center; gap:10px; border:1.5px solid transparent; transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;}
.btn:hover{transform:translateY(-2px);}
.btn.primary{background:var(--ink); color:var(--paper);}
.btn.ghost{border-color:var(--ink); color:var(--ink);}
.btn.ghost:hover{background:var(--ink); color:var(--paper);}
.btn.yellow{background:var(--yellow); color:var(--on-yellow);}

/* reveal: in AND out */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
  .reveal[data-dir="left"]{transform:translateX(-36px);}
  .reveal[data-dir="right"]{transform:translateX(36px);}
  .reveal.in{opacity:1; transform:none;}
}

/* ================= NAV ================= */
#topbar{position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:color-mix(in srgb, var(--paper) 84%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
#topbar .bar{display:flex; align-items:center; gap:18px; height:66px;}
.brand{display:inline-flex; align-items:center; gap:9px; font-family:var(--display); font-weight:800; font-size:17px; letter-spacing:-.01em; text-decoration:none;}
.brand b{font-weight:800; color:var(--auto); margin-left:-6px;}
.brand .mark{width:12px; height:12px; border-radius:3px; flex:none; transform:rotate(45deg); background:conic-gradient(var(--auto) 0 50%, var(--review) 50% 83%, var(--expert) 83% 100%);}
nav.links{display:flex; gap:30px; margin-left:auto;}
nav.links a{font-family:var(--sans); font-weight:500; font-size:15px; text-decoration:none; color:var(--ink-soft); position:relative;}
nav.links a::after{content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--auto); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;}
nav.links a:hover{color:var(--ink);}
nav.links a:hover::after{transform:scaleX(1);}
.cta-small{font-family:var(--display); font-weight:700; font-size:14px; background:var(--yellow); color:var(--on-yellow); padding:9px 16px; border-radius:999px; text-decoration:none; white-space:nowrap;}
#menu-btn{display:none; margin-left:auto; background:none; border:1.5px solid var(--ink); border-radius:999px; padding:7px 14px; font-family:var(--display); font-weight:700; color:var(--ink); font-size:13px;}
#mobile-panel{position:fixed; inset:0; z-index:60; background:var(--green-band); color:var(--on-dark); padding:calc(20px + env(safe-area-inset-top,0px)) 20px 20px; display:flex; flex-direction:column; gap:10px;}
#mobile-panel .mp-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:28px;}
#mobile-panel .brand b{color:var(--yellow);}
#mobile-panel a{font-family:var(--serif); font-size:3rem; line-height:1.1; text-decoration:none;}
#menu-close{background:none; border:1.5px solid var(--on-dark); color:var(--on-dark); border-radius:999px; padding:7px 14px; font-family:var(--display); font-weight:700;}
@media (max-width:760px){ nav.links, #topbar .cta-small{display:none;} #menu-btn{display:block;} }

/* ================= HERO ================= */
#hero{padding-top:56px; padding-bottom:0;}
.headline{font-family:var(--serif); font-size:clamp(2.9rem, 8.4vw, 6.6rem); line-height:.93; letter-spacing:-.025em; margin-top:22px;}
.headline em{font-style:italic; color:var(--auto);}
.hl-word{text-decoration:underline wavy var(--review); text-decoration-thickness:3px; text-underline-offset:.14em; text-decoration-skip-ink:none;}
.hero-row{display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-top:34px; flex-wrap:wrap;}
.sub{font-size:clamp(1.05rem, 1.6vw, 1.22rem); color:var(--ink-soft); max-width:50ch; line-height:1.6;}
.sub mark{color:var(--ink); padding:0 .12em; border-radius:2px; font-weight:500;}
.m-auto{background:linear-gradient(transparent 58%, color-mix(in srgb, var(--auto) 38%, transparent) 58%);}
.m-review{background:linear-gradient(transparent 58%, color-mix(in srgb, var(--review) 48%, transparent) 58%);}
.m-expert{background:linear-gradient(transparent 58%, color-mix(in srgb, var(--expert) 38%, transparent) 58%);}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap;}

/* toolbar + legend */
.map-block{margin-top:56px;}
.map-toolbar{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px;}
.toolbar-label{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);}
.legend{display:flex; gap:8px; flex-wrap:wrap;}
.legend button{font-family:var(--display); font-weight:600; font-size:14px; display:inline-flex; align-items:center; gap:8px; padding:7px 8px 7px 13px; border-radius:999px; border:1.5px solid var(--line); background:var(--paper); color:var(--ink); cursor:pointer; transition:background .2s, border-color .2s, color .2s;}
.legend .dot{width:10px; height:10px; border-radius:50%;}
.legend .count{font-family:var(--mono); font-size:11.5px; font-weight:500; background:var(--paper-2); border-radius:999px; padding:2px 8px; font-variant-numeric:tabular-nums;}
.legend [data-tier="auto"] .dot{background:var(--auto);}
.legend [data-tier="review"] .dot{background:var(--review);}
.legend [data-tier="expert"] .dot{background:var(--expert);}
.legend button:hover{border-color:var(--ink-soft);}
.legend [data-tier="auto"][aria-pressed="true"]{background:var(--auto); border-color:var(--auto); color:#fff;}
.legend [data-tier="review"][aria-pressed="true"]{background:var(--review); border-color:var(--review); color:var(--on-yellow);}
.legend [data-tier="expert"][aria-pressed="true"]{background:var(--expert); border-color:var(--expert); color:#fff;}
.legend [aria-pressed="true"] .dot{background:currentColor;}
.legend [aria-pressed="true"] .count{background:rgba(255,255,255,.28); color:inherit;}

/* ================= MAP ================= */
.map{position:relative; height:clamp(380px, 50vw, 660px); border-radius:18px; overflow:hidden; background:#39432F; cursor:crosshair; touch-action:manipulation; box-shadow:0 40px 80px -50px rgba(20,24,14,.7);}
.map-bg{position:absolute; inset:0;}
.map-bg canvas{display:block; width:100%; height:100%; object-fit:cover; object-position:center;}
.map svg{position:absolute; inset:0; width:100%; height:100%; display:block;}
.parcel{vector-effect:non-scaling-stroke; stroke-width:2; transition:fill-opacity .35s ease, stroke-opacity .35s ease;}
.parcel.t-auto{fill:var(--auto); stroke:var(--auto);}
.parcel.t-review{fill:var(--review); stroke:var(--review);}
.parcel.t-expert{fill:var(--expert); stroke:var(--expert);}
.parcel.t-none{fill:transparent; stroke:none;}
.parcel:not(.t-none){fill-opacity:.52; stroke-opacity:.95;}
.parcel.hot:not(.t-none){fill-opacity:.74;}
.map[data-filter] .parcel:not(.t-none){fill-opacity:.05; stroke-opacity:.12;}
.map[data-filter="auto"] .parcel.t-auto,
.map[data-filter="review"] .parcel.t-review,
.map[data-filter="expert"] .parcel.t-expert{fill-opacity:.62; stroke-opacity:1;}
#ring, #ring-glow{fill:none; vector-effect:non-scaling-stroke; stroke-linejoin:round; pointer-events:none; opacity:0; transition:opacity .15s ease;}
#ring{stroke:#FFFDF4; stroke-width:2.5;}
#ring-glow{stroke:#FFFDF4; stroke-width:9; stroke-opacity:.35;}
.map.hovering #ring, .map.hovering #ring-glow{opacity:1;}

.corner{position:absolute; width:20px; height:20px; border-color:rgba(255,253,244,.85); border-style:solid; border-width:0; pointer-events:none;}
.c-tl{top:14px; left:14px; border-top-width:2px; border-left-width:2px;}
.c-tr{top:14px; right:14px; border-top-width:2px; border-right-width:2px;}
.c-bl{bottom:14px; left:14px; border-bottom-width:2px; border-left-width:2px;}
.c-br{bottom:14px; right:14px; border-bottom-width:2px; border-right-width:2px;}
.hud{position:absolute; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:#FFFDF4; background:rgba(14,18,11,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); padding:5px 9px; border-radius:5px; pointer-events:none; font-variant-numeric:tabular-nums; white-space:nowrap;}
.hud-tl{top:22px; left:42px;}
.hud-tr{top:22px; right:42px;}
.hud-bl{bottom:22px; left:42px; display:flex; align-items:center; gap:8px;}
.hud-br{bottom:22px; right:42px;}
.scalebar{display:inline-block; width:56px; height:6px; border:1.5px solid #FFFDF4; border-top:0;}
@media (max-width:620px){ .hud-tr{display:none;} .hud-tl{left:38px;} .hud-bl{left:38px;} .hud-br{right:38px;} }

.tip{position:absolute; z-index:5; left:0; top:0; pointer-events:none; opacity:0; transform:translateY(6px) scale(.98); transition:opacity .14s ease, transform .14s ease; background:var(--paper); color:var(--ink); border-radius:10px; padding:11px 14px 12px; min-width:210px; box-shadow:0 18px 40px -16px rgba(0,0,0,.55); border-top:4px solid var(--line);}
.tip.show{opacity:1; transform:none;}
.tip[data-tier="auto"]{border-top-color:var(--auto);}
.tip[data-tier="review"]{border-top-color:var(--review);}
.tip[data-tier="expert"]{border-top-color:var(--expert);}
.tip-coord{font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--ink-soft);}
.tip-row{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:6px;}
.tip-id{font-family:var(--display); font-weight:800; font-size:16px; letter-spacing:-.01em;}
.tip-badge{font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:999px; background:var(--paper-2); color:var(--ink-soft); white-space:nowrap;}
.tip[data-tier="auto"] .tip-badge{background:var(--auto); color:#fff;}
.tip[data-tier="review"] .tip-badge{background:var(--review); color:var(--on-yellow);}
.tip[data-tier="expert"] .tip-badge{background:var(--expert); color:#fff;}
.tip-meta{font-size:13px; color:var(--ink-soft); margin-top:4px;}
.map-caption{font-family:var(--mono); font-size:11px; color:var(--ink-soft); margin-top:12px;}

/* ticker */
.ticker{margin-top:56px; background:var(--yellow); color:var(--on-yellow); overflow:hidden; border-block:1.5px solid var(--on-yellow);}
.ticker-track{display:flex; width:max-content; padding-block:13px;}
.ticker-item{font-family:var(--mono); font-size:12.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; display:inline-flex; align-items:center; gap:10px; padding-inline:22px; border-right:1px solid rgba(27,26,12,.25);}
.ticker-item i{width:9px; height:9px; border-radius:50%; border:1.5px solid var(--on-yellow);}
.ticker-item i.auto{background:#3F8A55;} .ticker-item i.review{background:#fff6cc;} .ticker-item i.expert{background:#C2412D;}
.ticker-item b{font-family:var(--display); font-weight:800; letter-spacing:0; font-size:14px;}
@media (prefers-reduced-motion:no-preference){ .ticker-track{animation:ticker 70s linear infinite;} .ticker:hover .ticker-track{animation-play-state:paused;} }
@keyframes ticker{ to{transform:translateX(-50%);} }

/* ================= PRODUIT (green band) ================= */
.produit-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:start;}
@media (max-width:880px){ .produit-grid{grid-template-columns:1fr; gap:40px;} }
.ratio{font-family:var(--display); font-weight:800; font-size:clamp(5rem, 13vw, 9.5rem); line-height:.85; letter-spacing:-.05em; display:flex; align-items:center; gap:.08em; margin-top:26px; color:var(--yellow);}
.ratio i{font-style:normal; font-weight:500; font-size:.55em; color:var(--on-dark-soft);}
.h2-dark{font-family:var(--serif); font-size:clamp(2.2rem, 4.4vw, 3.4rem); line-height:1; letter-spacing:-.02em; margin-top:22px; color:var(--on-dark);}
.h2-dark em{color:var(--yellow);}
.lede{font-size:1.05rem; max-width:44ch; margin-top:18px; line-height:1.6;}
.lede.on-dark{color:var(--on-dark-soft);}
.decisions{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.dec{padding-block:26px; border-top:1px solid rgba(238,233,215,.18); display:grid; grid-template-columns:auto 1fr; column-gap:22px; align-items:baseline;}
.dec:last-child{border-bottom:1px solid rgba(238,233,215,.18);}
.dec-step{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-soft); grid-row:1 / span 2; padding-top:.9em; min-width:70px;}
.dec-word{font-family:var(--serif); font-style:italic; font-size:clamp(2.3rem, 4.8vw, 3.6rem); line-height:1; letter-spacing:-.02em;}
.d-auto .dec-word{color:#8FD6A6;}
.d-review .dec-word{color:#F2CE55;}
.d-expert .dec-word{color:#F08C74;}
.dec p{color:var(--on-dark-soft); font-size:15px; margin-top:10px; max-width:46ch;}
@media (max-width:520px){ .dec{grid-template-columns:1fr;} .dec-step{grid-row:auto; padding-top:0; margin-bottom:6px;} }

.ticket{margin-top:56px; background:var(--paper); color:var(--ink); border-radius:14px; position:relative;}
.ticket::before,.ticket::after{content:""; position:absolute; top:28px; width:22px; height:22px; border-radius:50%; background:var(--green-band);}
.ticket::before{left:-11px;} .ticket::after{right:-11px;}
.ticket-head{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 30px; cursor:pointer; font-family:var(--display); font-weight:700; font-size:17px;}
.ticket-kicker{font-family:var(--mono); font-weight:500; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; background:var(--yellow); color:var(--on-yellow); padding:3px 8px; border-radius:4px; margin-right:10px; vertical-align:2px;}
.ticket-head svg{transition:transform .3s ease; flex:none;}
.vh-toggle:checked ~ .ticket-head svg, .vh-toggle:checked ~ .sol-more svg{transform:rotate(180deg);}
.vh-toggle:focus-visible ~ .ticket-head, .vh-toggle:focus-visible ~ .sol-more{outline:2px solid var(--focus); outline-offset:2px; border-radius:6px;}
.collapse{display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s cubic-bezier(.2,.7,.2,1);}
.vh-toggle:checked ~ .collapse{grid-template-rows:1fr;}
.collapse-inner{overflow:hidden; min-height:0;}
.ticket-body{margin:0 30px 28px; padding-top:22px; border-top:2px dashed var(--line);}
.tk-top{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; font-family:var(--mono); font-size:12px; color:var(--ink-soft);}
.tk-badge{font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; background:var(--auto); color:#fff; padding:4px 10px; border-radius:999px;}
.tk-kv{display:grid; grid-template-columns:auto 1fr; gap:8px 20px; margin:18px 0; font-family:var(--mono); font-size:13px;}
.tk-kv dt{color:var(--ink-soft);} .tk-kv dd{margin:0; text-align:right;}
.tk-conf-lbl{display:flex; justify-content:space-between; align-items:baseline; font-family:var(--mono); font-size:12px; color:var(--ink-soft);}
.tk-conf-lbl b{font-family:var(--display); font-weight:800; font-size:28px; color:var(--auto);}
.tk-track{height:8px; background:var(--paper-2); border-radius:99px; overflow:hidden; margin-top:6px;}
.tk-track i{display:block; height:100%; background:var(--auto); border-radius:99px;}

/* ================= STATEMENT ================= */
#statement{padding-bottom:0;}
.statement{font-family:var(--serif); font-size:clamp(2.1rem, 5.6vw, 4.6rem); line-height:1.02; letter-spacing:-.025em; max-width:20ch;}
.statement em{font-style:italic; background:var(--yellow); color:var(--on-yellow); padding:0 .12em; border-radius:4px;}
.st-red{color:var(--expert); font-style:italic;}

/* ================= SOLUTIONS ================= */
.sol-head .h2{font-family:var(--serif); font-size:clamp(2.2rem, 4.4vw, 3.4rem); line-height:1; letter-spacing:-.02em; margin-top:18px;}
.sol-head .h2 em{color:var(--auto);}
.sol-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:52px; align-items:start;}
@media (max-width:900px){ .sol-grid{grid-template-columns:1fr;} }
.sol{position:relative; border-radius:18px; padding:30px 28px 26px; display:flex; flex-direction:column; min-height:300px;}
.sol-a{background:var(--paper-2); color:var(--ink);}
.sol-b{background:var(--yellow); color:var(--on-yellow);}
.sol-c{background:var(--green-band); color:var(--on-dark);}
@media (min-width:901px){ .sol-b{margin-top:36px;} .sol-c{margin-top:72px;} }
.sol-tag{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.7;}
.sol-name{font-family:var(--display); font-weight:800; font-size:clamp(2.1rem, 3.6vw, 2.8rem); letter-spacing:-.035em; line-height:1; margin-top:8px;}
.sol-pitch{font-family:var(--serif); font-size:1.65rem; line-height:1.15; margin-top:auto; padding-top:40px;}
.sol-pitch em{font-style:italic;}
.sol-a .sol-pitch em{color:var(--auto);}
.sol-c .sol-pitch em{color:var(--yellow);}
.sol-more{display:inline-flex; align-items:center; gap:6px; margin-top:20px; font-family:var(--display); font-weight:700; font-size:14px; cursor:pointer; align-self:flex-start; border-bottom:1.5px solid currentColor; padding-bottom:2px;}
.sol-more svg{transition:transform .3s ease;}
.sol-detail{font-size:14.5px; line-height:1.55; padding-top:14px; opacity:.85;}

/* ================= CONTACT ================= */
#contact{position:relative; overflow:hidden; text-align:left; padding-block:120px 190px;}
.contact-inner{position:static;}
.contact-ghost{position:absolute; left:50%; transform:translateX(-50%); bottom:-.34em; font-family:var(--display); font-weight:800; font-size:clamp(4rem, 15vw, 13rem); letter-spacing:-.05em; line-height:1; color:transparent; -webkit-text-stroke:1.5px rgba(238,233,215,.14); white-space:nowrap; pointer-events:none; user-select:none;}
.contact-title{font-family:var(--serif); font-size:clamp(2.6rem, 7vw, 5.6rem); line-height:.96; letter-spacing:-.03em; margin-top:22px; max-width:14ch; position:relative;}
.contact-title em{color:var(--yellow);}
.contact-sub{font-family:var(--display); font-weight:500; font-size:clamp(1.1rem, 2vw, 1.4rem); color:var(--on-dark-soft); margin-top:22px; position:relative;}
.contact-cta{display:flex; align-items:center; gap:24px; margin-top:40px; flex-wrap:wrap; position:relative;}
.contact-email{font-family:var(--mono); font-size:13.5px; color:var(--on-dark-soft); text-underline-offset:4px;}
.contact-email:hover{color:var(--on-dark);}

.site-footer{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding-block:34px;}
.brand.small{font-size:14px;}
.f-meta{font-family:var(--mono); font-size:11.5px; color:var(--ink-soft);}

/* ================= DEMO REQUEST DIALOG ================= */
button.btn, button.cta-small{cursor:pointer; font:inherit;}
button.cta-small{border:0; font-family:var(--display); font-weight:700; font-size:14px;}
button.btn{font-family:var(--display); font-weight:700; font-size:15px;}
button.btn:disabled{opacity:.6; cursor:progress; transform:none;}
#mobile-panel .mp-cta{align-self:flex-start; margin-top:24px;}

.demo-dialog{width:min(720px, calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:0; border:0; border-radius:22px; background:var(--paper); color:var(--ink); box-shadow:0 40px 90px -30px rgba(10,14,6,.6); overflow:auto;}
.demo-dialog::backdrop{background:rgba(16,22,12,.62); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);}
@media (prefers-reduced-motion:no-preference){
  .demo-dialog[open]{animation:demo-in .32s cubic-bezier(.2,.7,.2,1);}
  @keyframes demo-in{from{opacity:0; transform:translateY(18px) scale(.98);} to{opacity:1; transform:none;}}
}
.demo-shell{position:relative; padding:40px 40px 34px; border-top:6px solid var(--yellow);}
@media (max-width:560px){ .demo-shell{padding:30px 20px 24px;} }
.demo-close{position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line); background:var(--paper); color:var(--ink); font-size:24px; line-height:1; cursor:pointer;}
.demo-close:hover{border-color:var(--ink);}
.demo-kicker{display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; background:var(--yellow); color:var(--on-yellow); padding:4px 9px; border-radius:4px;}
.demo-kicker.ok{background:var(--auto); color:#fff;}
.demo-title{font-family:var(--serif); font-size:clamp(2.2rem, 6vw, 3.2rem); line-height:1; letter-spacing:-.02em; margin-top:16px;}
.demo-title em{color:var(--auto);}
.demo-lede{color:var(--ink-soft); margin-top:12px; max-width:48ch;}
#demo-success-view .btn{margin-top:28px;}

.demo-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; margin-top:28px;}
@media (max-width:560px){ .demo-grid{grid-template-columns:1fr;} }
.field{display:flex; flex-direction:column; gap:6px; min-width:0;}
.field-wide{grid-column:1 / -1;}
.field label{font-family:var(--display); font-weight:600; font-size:14px;}
.field .optional{font-family:var(--mono); font-weight:400; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-left:6px;}
.field input, .field select, .field textarea{font:inherit; font-size:15px; color:var(--ink); background:var(--paper-2); border:1.5px solid transparent; border-radius:10px; padding:11px 13px; width:100%; transition:border-color .15s, background .15s;}
.field textarea{resize:vertical; min-height:84px;}
.field input:hover, .field select:hover, .field textarea:hover{border-color:var(--line);}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--auto); background:var(--paper);}
.field [aria-invalid="true"]{border-color:var(--expert);}
.field-error{font-size:12.5px; color:var(--expert); min-height:0;}
.field-error:empty{display:none;}
.field-check{display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:start;}
.field-check input{width:18px; height:18px; margin-top:2px; accent-color:var(--auto); padding:0;}
.field-check label{font-family:var(--sans); font-weight:400; font-size:13.5px; color:var(--ink-soft);}
.field-check .field-error{grid-column:2;}
.field-hp{position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden;}

.demo-status{margin-top:16px; font-size:14px; color:var(--expert);}
.demo-status:empty{display:none;}
.demo-actions{display:flex; align-items:center; gap:18px; margin-top:22px; flex-wrap:wrap;}
.demo-legal{font-size:11.5px; color:var(--ink-soft); max-width:40ch;}
.demo-legal a{color:inherit;}
.grecaptcha-badge{visibility:hidden !important;}