:root{
  --ink:#10181F;
  --ink-soft:#3C4A55;
  --muted:#6B7A85;
  --paper:#F4F6F3;
  --paper-2:#EAEEE8;
  --line:#CFD7CE;
  --azul:#1B4F8F;
  --azul-deep:#0E3466;
  --carimbo:#96302C;
  --sage:#3E6B52;
  --measure:66ch;
  --pad:clamp(1.25rem,5vw,4rem);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#E8EDE7; --ink-soft:#B4C0BA; --muted:#8A968E;
    --paper:#0D1319; --paper-2:#151D24; --line:#2A3641;
    --azul:#7FA9DC; --azul-deep:#A8C6E8; --carimbo:#D98C88; --sage:#7FB395;
  }
}
:root[data-theme="dark"]{
  --ink:#E8EDE7; --ink-soft:#B4C0BA; --muted:#8A968E;
  --paper:#0D1319; --paper-2:#151D24; --line:#2A3641;
  --azul:#7FA9DC; --azul-deep:#A8C6E8; --carimbo:#D98C88; --sage:#7FB395;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem); line-height:1.6;
  font-feature-settings:"ss01";
}
h1,h2,h3{font-family:Newsreader,Georgia,"Times New Roman",serif; font-weight:400; line-height:1.14; letter-spacing:-.012em; margin:0}
p{margin:0}
a{color:var(--azul); text-decoration-thickness:1px; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--azul); outline-offset:3px; border-radius:2px}
.wrap{max-width:74rem; margin:0 auto; padding-inline:var(--pad)}
.prose{max-width:var(--measure)}

/* ---------- top bar ---------- */
.bar{position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.bar-in{display:flex; align-items:center; gap:1.25rem; min-height:3.75rem}
.mark{font-family:Newsreader,serif; font-size:1.3rem; letter-spacing:-.02em; color:var(--ink); text-decoration:none; margin-right:auto}
.mark b{font-weight:500}
.mark span{color:var(--azul)}
.bar nav{display:none; gap:1.4rem; font-size:.9rem}
.bar nav a{color:var(--ink-soft); text-decoration:none}
.bar nav a:hover{color:var(--azul)}
@media(min-width:60rem){.bar nav{display:flex}}
.langs{display:flex; border:1px solid var(--line); border-radius:3px; overflow:hidden}
.langs button{font:inherit; font-size:.78rem; font-weight:500; padding:.3rem .55rem; background:none;
  border:0; border-left:1px solid var(--line); color:var(--muted); cursor:pointer}
.langs button:first-child{border-left:0}
.langs button[aria-pressed="true"]{background:var(--azul); color:#fff}

/* ---------- hero ---------- */
.hero{padding-block:clamp(3rem,7vw,6rem) clamp(2.5rem,5vw,4rem)}
.hero h1{font-size:clamp(2.35rem,1.4rem + 4.2vw,4.4rem); max-width:19ch}
.hero .lede{margin-top:1.5rem; max-width:52ch; font-size:1.12rem; color:var(--ink-soft)}
.acts{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem}
.btn{font:inherit; font-weight:600; font-size:.95rem; padding:.72rem 1.3rem; border-radius:3px;
  border:1px solid var(--azul); background:var(--azul); color:#fff; text-decoration:none; cursor:pointer; display:inline-block}
.btn.ghost{background:none; color:var(--azul)}
.btn:hover{background:var(--azul-deep); border-color:var(--azul-deep); color:#fff}
:root[data-theme="dark"] .btn, :root[data-theme="dark"] .btn:hover{color:#0D1319}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn,:root:not([data-theme="light"]) .btn:hover{color:#0D1319}}

/* ---------- specimen ---------- */
.specimen{margin-top:clamp(2.5rem,5vw,3.75rem); border:1px solid var(--line); background:var(--paper-2); border-radius:4px}
.spec-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem 1rem;
  padding:.85rem 1.15rem; border-bottom:1px solid var(--line); font-size:.8rem; color:var(--muted)}
.spec-head .id{font-family:"IBM Plex Mono",monospace; color:var(--ink-soft)}
.spec-head .tag{margin-left:auto; color:var(--sage); font-weight:600}
.spec-body{padding:1.15rem}
.spec-claim{font-family:Newsreader,serif; font-size:clamp(1.15rem,1rem + .7vw,1.5rem); max-width:44ch}
.chain{margin:1.15rem 0 0; padding:0; list-style:none; border-top:1px solid var(--line)}
.chain li{display:grid; grid-template-columns:8.5rem 1fr; gap:.4rem 1rem; padding:.7rem 0; border-bottom:1px solid var(--line); font-size:.88rem}
.chain dt,.chain .k{color:var(--muted)}
.chain .v{color:var(--ink-soft); overflow-wrap:anywhere}
.chain .v.hash{font-family:"IBM Plex Mono",monospace; font-size:.8rem}
@media(max-width:34rem){.chain li{grid-template-columns:1fr}}
.attest{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .9rem; padding:.9rem 1.15rem;
  border-top:1px solid var(--line); background:var(--paper); font-size:.85rem; color:var(--ink-soft)}
.attest .sig{font-family:Newsreader,serif; font-style:italic; font-size:1.05rem; color:var(--ink)}
.spec-note{margin-top:.9rem; font-size:.84rem; color:var(--muted); max-width:56ch}

/* ---------- generic section ---------- */
.sec{padding-block:clamp(3rem,6vw,5.5rem); border-top:1px solid var(--line)}
.sec h2{font-size:clamp(1.75rem,1.2rem + 2vw,2.7rem); max-width:22ch}
.sec .sub{margin-top:1.1rem; max-width:var(--measure); color:var(--ink-soft)}

/* ---------- statement ---------- */
.statement h2{max-width:26ch}
.statement .big{font-family:Newsreader,serif; font-size:clamp(1.5rem,1.1rem + 1.8vw,2.2rem); line-height:1.3; max-width:30ch; color:var(--carimbo)}
.statement .cols{display:grid; gap:1.6rem; margin-top:2rem}
@media(min-width:48rem){.statement .cols{grid-template-columns:1fr 1fr; gap:3rem}}
.statement .cols p{max-width:46ch; color:var(--ink-soft)}

/* ---------- register ---------- */
.register{margin-top:2.5rem; border-top:1px solid var(--ink)}
.register .row{display:grid; gap:.5rem 2.5rem; padding:1.4rem 0; border-bottom:1px solid var(--line)}
@media(min-width:52rem){.register .row{grid-template-columns:15rem 1fr}}
.register h3{font-size:1.2rem}
.register p{color:var(--ink-soft); max-width:56ch}

/* ---------- functions ---------- */
.funcs{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.8rem; padding:0; list-style:none}
.funcs li{border:1px solid var(--line); border-radius:999px; padding:.35rem .9rem; font-size:.88rem; color:var(--ink-soft); background:var(--paper-2)}
.levels{margin-top:1.8rem; border:1px solid var(--line); border-radius:4px; overflow:hidden}
.levels div{display:grid; grid-template-columns:8rem 1fr; gap:1rem; padding:.85rem 1.1rem; border-bottom:1px solid var(--line); font-size:.92rem}
.levels div:last-child{border-bottom:0}
.levels b{font-weight:600; color:var(--azul)}
.levels span{color:var(--ink-soft)}
@media(max-width:34rem){.levels div{grid-template-columns:1fr; gap:.2rem}}

/* ---------- timeline ---------- */
.tl{margin-top:2.5rem; padding:0; list-style:none; border-left:2px solid var(--line); margin-left:.4rem}
.tl li{position:relative; padding:0 0 1.9rem 1.9rem}
.tl li::before{content:""; position:absolute; left:-.44rem; top:.42rem; width:.7rem; height:.7rem;
  border-radius:50%; background:var(--paper); border:2px solid var(--line)}
.tl li.done::before{background:var(--line); border-color:var(--line)}
.tl li.next::before{background:var(--carimbo); border-color:var(--carimbo)}
.tl .when{font-size:.82rem; color:var(--muted); font-variant-numeric:tabular-nums}
.tl .what{margin-top:.2rem; font-family:Newsreader,serif; font-size:1.2rem}
.tl .why{margin-top:.25rem; font-size:.92rem; color:var(--ink-soft); max-width:52ch}
.tl li.next .what{color:var(--carimbo)}

/* ---------- trust ---------- */
.trust{background:var(--paper-2)}
.plane{margin-top:2.2rem; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden}
@media(min-width:48rem){.plane{grid-template-columns:1fr 1fr}}
.plane > div{background:var(--paper); padding:1.4rem}
.plane h3{font-size:1.1rem; margin-bottom:.5rem}
.plane p{font-size:.93rem; color:var(--ink-soft)}
.plane ul{margin:.8rem 0 0; padding-left:1.1rem; font-size:.9rem; color:var(--ink-soft)}
.plane li{margin-bottom:.3rem}

/* ---------- audience ---------- */
.who{display:grid; gap:1.5rem 2.5rem; margin-top:2.2rem}
@media(min-width:46rem){.who{grid-template-columns:1fr 1fr}}
@media(min-width:66rem){.who{grid-template-columns:repeat(3,1fr)}}
.who h3{font-size:1.08rem; padding-bottom:.45rem; border-bottom:1px solid var(--azul)}
.who p{margin-top:.6rem; font-size:.93rem; color:var(--ink-soft)}

/* ---------- cta ---------- */
.cta{text-align:left}
.cta h2{max-width:20ch}
.cta .sub{margin-bottom:2rem}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding-block:2.5rem 3.5rem; font-size:.86rem; color:var(--muted)}
footer .disc{max-width:60ch; padding:1rem 1.15rem; border-left:3px solid var(--carimbo); background:var(--paper-2); color:var(--ink-soft); margin-bottom:1.75rem}
footer .ends{display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; align-items:center}
footer a{color:var(--muted)}

/* ---------- chat ---------- */
#chat-launch{position:fixed; right:1.1rem; bottom:1.1rem; z-index:60; display:flex; align-items:center; gap:.55rem;
  font:inherit; font-size:.92rem; font-weight:600; padding:.7rem 1.1rem; border-radius:999px;
  border:1px solid var(--azul-deep); background:var(--azul); color:#fff; cursor:pointer;
  box-shadow:0 6px 20px rgba(14,52,102,.28)}
#chat-launch:hover{background:var(--azul-deep)}
#chat-launch svg{width:1.05rem; height:1.05rem; flex:none}
#chat-panel{position:fixed; right:1.1rem; bottom:1.1rem; z-index:61; width:min(23.5rem,calc(100vw - 2.2rem));
  height:min(34rem,calc(100dvh - 2.2rem)); display:none; flex-direction:column;
  background:var(--paper); border:1px solid var(--line); border-radius:6px; box-shadow:0 12px 40px rgba(0,0,0,.22); overflow:hidden}
#chat-panel[data-open="true"]{display:flex}
.chat-head{display:flex; align-items:center; gap:.7rem; padding:.85rem 1rem; border-bottom:1px solid var(--line); background:var(--paper-2)}
.chat-head strong{font-family:Newsreader,serif; font-weight:500; font-size:1.05rem}
.chat-head .st{font-size:.78rem; color:var(--muted); margin-left:auto}
.chat-head button{font:inherit; background:none; border:0; color:var(--muted); font-size:1.3rem; line-height:1; cursor:pointer; padding:.1rem .3rem}
#chat-mount{flex:1; overflow-y:auto; padding:1rem; font-size:.92rem; color:var(--ink-soft)}
.chat-starters{padding:.85rem 1rem 1rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:.45rem}
.chat-starters button{font:inherit; font-size:.82rem; padding:.42rem .75rem; border-radius:999px;
  border:1px solid var(--line); background:var(--paper-2); color:var(--ink-soft); cursor:pointer; text-align:left}
.chat-starters button:hover{border-color:var(--azul); color:var(--azul)}
@media(max-width:34rem){#chat-launch span{display:none} #chat-launch{padding:.85rem; border-radius:50%}}
@media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}