:root{
--text-xs:clamp(.75rem,.7rem + .25vw,.875rem);--text-sm:clamp(.875rem,.8rem + .35vw,1rem);--text-base:clamp(1rem,.95rem + .25vw,1.125rem);--text-lg:clamp(1.125rem,1rem + .75vw,1.5rem);--text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);--text-2xl:clamp(2rem,1.2rem + 2.5vw,3.5rem);--text-3xl:clamp(2.5rem,1rem + 4vw,4.75rem);
--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-32:8rem;
--color-bg:#f4f5f2;--color-surface:#fafbf9;--color-surface-2:#ffffff;--color-surface-offset:#e9ece7;--color-border:oklch(.25 .02 180 / .14);--color-divider:oklch(.25 .02 180 / .1);
--color-text:#15201f;--color-text-muted:#566260;--color-text-faint:#8d9795;--color-text-inverse:#f4f5f2;
--color-primary:#0d5752;--color-primary-hover:#0a443f;--color-primary-highlight:#d3e2de;
--color-warning:#8a4a12;--color-warning-highlight:#f1e4d3;--color-error:#9b2c3a;--color-success:#2f6b2a;
--radius-sm:.25rem;--radius-md:.4rem;--radius-lg:.6rem;--radius-full:9999px;
--transition-interactive:180ms cubic-bezier(.16,1,.3,1);
--shadow-sm:0 1px 2px oklch(.2 .02 180 / .06);--shadow-md:0 6px 18px oklch(.2 .02 180 / .08);
--content-narrow:680px;--content-default:1000px;--content-wide:1200px;
--font-display:'Zodiak',Georgia,serif;--font-body:'Satoshi','Helvetica Neue',sans-serif;--font-mono:'JetBrains Mono',ui-monospace,monospace;
}
.wrap{width:min(100% - 2*clamp(var(--space-4),5vw,var(--space-10)),var(--content-wide));margin-inline:auto}
.narrow{max-width:var(--content-narrow)}
.skip{position:absolute;left:var(--space-4);top:-100px;background:var(--color-primary);color:#fff;padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);z-index:100}
.skip:focus{top:var(--space-2)}
/* header */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--color-bg) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-divider)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);min-height:68px}
.brand{display:flex;align-items:baseline;gap:var(--space-2);text-decoration:none;color:var(--color-text)}
.brand b{font-family:var(--font-display);font-weight:500;font-size:1.25rem;letter-spacing:-.01em}
.brand span{font-size:var(--text-xs);color:var(--color-text-muted);letter-spacing:.08em;text-transform:uppercase}
.nav{display:flex;align-items:center;gap:var(--space-1)}
.nav a{font-size:var(--text-sm);color:var(--color-text-muted);text-decoration:none;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm)}
.nav a:hover{color:var(--color-text);background:var(--color-surface-offset)}
.nav a[aria-current=page]{color:var(--color-text);font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;padding:var(--space-2) var(--space-5);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:600;text-decoration:none;border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--color-primary);color:#fff}
.btn-primary:hover{background:var(--color-primary-hover)}
.btn-ghost{border-color:var(--color-border);color:var(--color-text);background:transparent}
.btn-ghost:hover{background:var(--color-surface-offset)}
.nav .btn{margin-left:var(--space-2);color:#fff}
.nav .btn:hover{color:#fff;background:var(--color-primary-hover)}
.menu-btn{display:none;min-width:44px;min-height:44px;border:1px solid var(--color-border);border-radius:var(--radius-md);align-items:center;justify-content:center}
@media (max-width:860px){
 .menu-btn{display:inline-flex}
 .nav{position:absolute;inset:68px 0 auto 0;flex-direction:column;align-items:stretch;background:var(--color-bg);border-bottom:1px solid var(--color-divider);padding:var(--space-3) var(--space-4) var(--space-5);display:none}
 .nav.open{display:flex}
 .nav a{padding:var(--space-3)}
 .nav .btn{margin:var(--space-2) 0 0}
}
/* notice bar */
.ruo{background:var(--color-text);color:var(--color-text-inverse);font-size:var(--text-xs);text-align:center;padding:var(--space-2) var(--space-4)}
.ruo p{max-width:none}
.ruo a{color:inherit}
/* type */
h1,.h1{font-family:var(--font-display);font-weight:400;letter-spacing:-.02em}
.display{font-size:var(--text-3xl);line-height:1.02}
.page-title{font-size:var(--text-2xl)}
h2{font-family:var(--font-display);font-weight:400;font-size:var(--text-xl);letter-spacing:-.01em}
h3{font-size:var(--text-lg);font-weight:600}
.eyebrow{font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary);font-weight:600}
.lede{font-size:var(--text-lg);color:var(--color-text-muted);line-height:1.5}
.muted{color:var(--color-text-muted)}
.small{font-size:var(--text-sm)}
.xs{font-size:var(--text-xs)}
.mono{font-family:var(--font-mono);font-size:.9em}
.todo{background:var(--color-warning-highlight);color:var(--color-warning);padding:0 var(--space-1);border-radius:var(--radius-sm);font-weight:600}
a{color:var(--color-primary)}
/* sections */
section{padding-block:clamp(var(--space-12),7vw,var(--space-24))}
.tight{padding-block:clamp(var(--space-8),4vw,var(--space-12))}
.rule{border-top:1px solid var(--color-divider)}
.stack>*+*{margin-top:var(--space-4)}
.stack-lg>*+*{margin-top:var(--space-8)}
/* hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(var(--space-8),5vw,var(--space-16));align-items:center;padding-block:clamp(var(--space-10),6vw,var(--space-20))}
.hero img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg)}
.hero .actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
@media (max-width:860px){.hero{grid-template-columns:1fr}.hero figure{order:-1}}
/* grids */
.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(var(--space-8),5vw,var(--space-16));align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.steps{counter-reset:s;display:grid;gap:0;border-top:1px solid var(--color-divider)}
.steps li{counter-increment:s;display:grid;grid-template-columns:3.5rem 1fr;gap:var(--space-4);padding-block:var(--space-6);border-bottom:1px solid var(--color-divider);max-width:none}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--font-mono);color:var(--color-primary);font-size:var(--text-sm);padding-top:.2em}
.steps h3{margin-bottom:var(--space-1)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-4)}
.fact{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6)}
.fact h3{font-size:var(--text-base);margin-bottom:var(--space-2)}
.fact p{font-size:var(--text-sm);color:var(--color-text-muted)}
.band{background:var(--color-surface-offset)}
.dont{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-3) var(--space-8)}
.dont li{display:flex;gap:var(--space-3);padding-block:var(--space-3);border-bottom:1px solid var(--color-divider);font-size:var(--text-sm)}
.dont li svg{flex:none;color:var(--color-error);margin-top:.2em}
.ok li svg{color:var(--color-success)}
/* table / catalog */
.toolbar{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;justify-content:space-between;margin-bottom:var(--space-6)}
.search{display:flex;align-items:center;gap:var(--space-2);border:1px solid var(--color-border);background:var(--color-surface-2);border-radius:var(--radius-md);padding:0 var(--space-3);min-height:44px;min-width:min(100%,320px)}
.search input{border:none;outline:none;background:transparent;flex:1;min-height:42px}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.chip{min-height:36px;padding:var(--space-1) var(--space-4);border-radius:var(--radius-full);border:1px solid var(--color-border);font-size:var(--text-sm);color:var(--color-text-muted)}
.chip[aria-pressed=true]{background:var(--color-text);color:var(--color-text-inverse);border-color:var(--color-text)}
.table-wrap{border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface-2)}
.cat th,.cat td{text-align:left;padding:var(--space-4);border-bottom:1px solid var(--color-divider);vertical-align:top;font-size:var(--text-sm)}
.cat th{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);font-weight:600;background:var(--color-surface)}
.cat tr:last-child td{border-bottom:none}
.cat td:first-child{font-weight:600;font-size:var(--text-base)}
.badge{display:inline-block;font-size:var(--text-xs);padding:.1rem var(--space-2);border-radius:var(--radius-full);background:var(--color-surface-offset);color:var(--color-text-muted);white-space:nowrap}
.badge.pending{background:var(--color-warning-highlight);color:var(--color-warning)}
.empty{padding:var(--space-10);text-align:center;color:var(--color-text-muted)}
@media (max-width:720px){
 .cat thead{display:none}
 .cat tr{display:block;padding:var(--space-4);border-bottom:1px solid var(--color-divider)}
 .cat td{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-1) 0;border:none}
 .cat td::before{content:attr(data-l);color:var(--color-text-muted);font-size:var(--text-xs);font-weight:500;text-transform:uppercase;letter-spacing:.06em}
 .cat td:first-child::before{content:none}
}
/* prose/policy */
.doc{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(var(--space-8),5vw,var(--space-16));align-items:start}
.toc{position:sticky;top:96px;font-size:var(--text-sm)}
.toc ol{list-style:none;border-left:1px solid var(--color-divider)}
.toc a{display:block;padding:var(--space-1) var(--space-4);color:var(--color-text-muted);text-decoration:none}
.toc a:hover{color:var(--color-text)}
.prose h2{margin-top:var(--space-12);margin-bottom:var(--space-4);scroll-margin-top:100px}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:var(--space-6);margin-bottom:var(--space-2);font-size:var(--text-base)}
.prose p,.prose li{color:var(--color-text);margin-bottom:var(--space-3)}
.prose ul,.prose ol{padding-left:var(--space-6)}
@media (max-width:860px){.doc{grid-template-columns:1fr}.toc{position:static}}
/* form */
.form{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:clamp(var(--space-6),4vw,var(--space-10))}
.progress{display:flex;gap:var(--space-2);margin-bottom:var(--space-8)}
.progress span{flex:1;height:4px;border-radius:2px;background:var(--color-surface-offset)}
.progress span.on{background:var(--color-primary)}
fieldset{border:none}
legend{font-family:var(--font-display);font-size:var(--text-xl);margin-bottom:var(--space-2)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);margin-top:var(--space-6)}
.fields .full{grid-column:1/-1}
@media (max-width:640px){.fields{grid-template-columns:1fr}}
label{display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-2)}
.hint{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:400;margin-top:var(--space-1)}
input[type=text],input[type=email],input[type=tel],input[type=url],select,textarea{width:100%;min-height:44px;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-highlight)}
.check{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);font-weight:400;cursor:pointer;margin-bottom:var(--space-3)}
.check input{margin-top:.3em;width:18px;height:18px;accent-color:var(--color-primary);flex:none}
.err{color:var(--color-error);font-size:var(--text-xs);margin-top:var(--space-1);min-height:1em}
.invalid{border-color:var(--color-error)!important}
.form-actions{display:flex;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-8)}
.panel{display:none}.panel.active{display:block;animation:fade .35s cubic-bezier(.16,1,.3,1)}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.done{padding:var(--space-6);border-radius:var(--radius-md);background:var(--color-primary-highlight)}
/* coa lookup */
.lookup{display:flex;gap:var(--space-3);flex-wrap:wrap}
.lookup input{flex:1;min-width:200px;font-family:var(--font-mono)}
.result{margin-top:var(--space-4);padding:var(--space-5);border-radius:var(--radius-md);background:var(--color-surface-offset);font-size:var(--text-sm);display:none}
.result.show{display:block}
.spec th,.spec td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-divider);text-align:left;font-size:var(--text-sm);vertical-align:top}
.spec th{width:34%;font-weight:600}
figure img{border-radius:var(--radius-lg)}
figcaption{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-2)}
/* footer */
.site-footer{background:var(--color-text);color:#c9d0ce;padding-block:var(--space-16) var(--space-8);font-size:var(--text-sm)}
.site-footer a{color:#e8ecea;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-8)}
.fgrid h4{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;color:#8fa09c;margin-bottom:var(--space-3);font-weight:600}
.fgrid ul{list-style:none;display:grid;gap:var(--space-2)}
.legal{margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid oklch(1 0 0 / .12);font-size:var(--text-xs);color:#9aa8a5;display:grid;gap:var(--space-3)}
.legal p{max-width:110ch}
.site-footer .todo{background:#4a3a24;color:#f1d9b5}
@media (max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fgrid{grid-template-columns:1fr}}
.js .reveal{opacity:0;transform:translateY(10px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.js .reveal.in{opacity:1;transform:none}
.search input{border:0!important;box-shadow:none!important;padding:0!important;background:transparent!important}
.search:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-highlight)}
.brand b{white-space:nowrap}
@media (max-width:560px){.brand span{display:none}}
[hidden]{display:none!important}
.nav .btn[aria-current=page]{color:#fff}
.brand{align-items:center}
.brand-mark{width:34px;height:auto;flex:none}
.footer-logo{width:180px;height:auto}
/* ---- Gold brand theme ---- */
:root{
--gold:#c9a24a;--gold-light:#eed9a0;--gold-deep:#9a7230;--gold-text:#7d5d1f;
--ink:#121816;--ink-2:#1b2321;
--color-bg:#f7f4ee;--color-surface:#fbf9f5;--color-surface-offset:#efeadf;
--color-primary:#1b2321;--color-primary-hover:#2c3734;--color-primary-highlight:#efe3c4;
--gold-grad:linear-gradient(115deg,#9a7230 0%,#c9a24a 30%,#eed9a0 50%,#c9a24a 70%,#9a7230 100%);
}
::selection{background:#eed9a0;color:#121816}
.eyebrow{color:var(--gold-text)}
a{color:var(--gold-text)}
a:hover{color:var(--gold-deep)}
.ruo{background:#0c100f;border-bottom:1px solid rgb(201 162 74 / .25)}
.ruo a{color:var(--gold-light)}
.site-header{background:color-mix(in oklab,var(--ink) 94%,transparent);border-bottom:1px solid rgb(201 162 74 / .28)}
.brand{gap:var(--space-3)}
.brand-logo{height:46px;width:auto;flex:none}
.brand span{color:rgb(238 217 160 / .7);border-left:1px solid rgb(201 162 74 / .35);padding-left:var(--space-3);font-size:.68rem}
.nav a{color:#c9cfcc}
.nav a:hover{color:#fff;background:rgb(255 255 255 / .06)}
.nav a[aria-current=page]{color:var(--gold-light)}
.menu-btn{color:var(--gold-light);border-color:rgb(201 162 74 / .4)}
@media (max-width:860px){.nav{background:var(--ink);border-bottom-color:rgb(201 162 74 / .28)}}
.btn-primary,.nav .btn{background:var(--gold-grad);background-size:200% 100%;background-position:0 0;color:#16110a!important;border:0;font-weight:700;transition:background-position .5s ease,transform .2s ease}
.btn-primary:hover,.nav .btn:hover{background:var(--gold-grad);background-size:200% 100%;background-position:100% 0;color:#16110a}
.nav .btn[aria-current=page]{color:#16110a}
.hero-band{background:radial-gradient(1200px 500px at 85% 20%,rgb(201 162 74 / .12),transparent 60%),var(--ink);color:#eef0ee;border-bottom:1px solid rgb(201 162 74 / .25)}
.hero-band .display{color:#fff}
.hero-band .lede{color:#b9c1be}
.hero-band .eyebrow{color:var(--gold)}
.hero-band .btn-ghost{color:#fff;border-color:rgb(238 217 160 / .45);background:transparent}
.hero-band .btn-ghost:hover{border-color:var(--gold-light);background:rgb(255 255 255 / .05)}
.hero-band figure{position:relative}
.hero-band figure::after{content:"";position:absolute;inset:-10px 10px 10px -10px;border:1px solid rgb(201 162 74 / .45);border-radius:var(--radius-lg);z-index:-1}
.hero-band .hero{position:relative;z-index:0}
.steps li::before{color:var(--gold-text)}
.steps{border-top-color:rgb(201 162 74 / .35)}
.badge.pending{background:#f3e7c9;color:#6e5118}
.chip[aria-pressed=true]{background:var(--ink);color:var(--gold-light);border-color:var(--ink)}
.progress span.on{background:var(--gold-grad)}
.check input{accent-color:var(--gold-deep)}
input:focus,select:focus,textarea:focus,.search:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgb(201 162 74 / .22)}
.site-footer{background:var(--ink);border-top:1px solid rgb(201 162 74 / .3)}
.site-footer h4{color:var(--gold)}
.site-footer a:hover{color:var(--gold-light)}
.footer-logo{width:200px}
.toc a[aria-current],.toc a:hover{color:var(--gold-text)}
.fact{border-top:2px solid var(--gold)}
.done{background:#f3e7c9}
@media (max-width:560px){.brand span{display:none}.brand-logo{height:34px}}
/* language switcher */
.bar-right{display:flex;align-items:center;gap:var(--space-3);order:3}
.bar .nav{order:2}
.langs{display:flex;gap:2px;padding:2px;border:1px solid rgb(201 162 74 / .35);border-radius:999px}
.langs a{font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;color:#c9cfcc;text-decoration:none;padding:4px 9px;border-radius:999px;min-height:28px;display:inline-flex;align-items:center}
.langs a:hover{color:#fff;background:rgb(255 255 255 / .06)}
.langs a[aria-current=true]{background:var(--gold-grad);color:#16110a}
@media (max-width:860px){.bar-right{margin-left:auto}.langs a{padding:6px 10px;min-height:32px}}
@media (max-width:420px){.brand span{display:none}}
.nav a{white-space:nowrap}
@media (max-width:1240px){.brand span{display:none}}
@media (min-width:861px) and (max-width:1060px){.nav a{padding:var(--space-2);font-size:.8125rem}.nav .btn{padding:var(--space-2) var(--space-3)}.bar{gap:var(--space-3)}}


/* Floating WhatsApp contact shortcut */
.whatsapp-float {
  position: fixed;
  z-index: 1000;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 20px 0 16px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 999px;
  background: #25D366;
  color: #082b19;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  font: 700 15px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.whatsapp-float:hover { background: #20bd5a; color: #082b19; transform: translateY(-2px); box-shadow: 0 11px 28px rgba(0,0,0,.32); }
.whatsapp-float:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.whatsapp-float svg { width: 26px; height: 26px; flex: 0 0 26px; fill: currentColor; }
@media (max-width: 480px) {
  .whatsapp-float { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); min-height: 52px; padding: 0 16px 0 14px; }
}
@media (prefers-reduced-motion: reduce) { .whatsapp-float { transition: none; } }
