/* Qanun v2.0 design tokens and primitives. See claude/qanun-v2-brief.md in the project. */
:root{
  --paper:#FFFBF4; --bone:#F4EFE4; --ink:#152216; --ink2:#444E45; --mut:#737A73;
  --rule:#D9DBD6; --rule-ink:#26342A;
  --forest:#073A20; --forest-h:#0B4A2A; --forest-ring:#0F5A35;
  --yellow:#F2D23C;
  --mint:#BFE6CF; --sand:#F3E3B8; --clay:#F0C6B4; --lav:#DCD2F4; --sky:#C9D9F5;
  --ver:#1E7A52; --amb:#9A6B00; --mis:#B23A2C;
  --ver-ink:#5FBF8F; --amb-ink:#E3B355; --mis-ink:#E88374;
  --paper-text-on-ink:#DCE5DD; --mut-on-ink:#9FB3A6;
  --ease:cubic-bezier(.16,1,.3,1);
  --r-card:20px; --r-inner:12px; --r-pill:9999px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font:16px/1.6 "Satoshi","Manrope",system-ui,sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
.mono{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.ar{font-family:"Readex Pro",sans-serif}
a{color:var(--forest)}
:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
h1,h2,h3{letter-spacing:-.025em;line-height:1.08;font-weight:300}
h1 b,h2 b{font-weight:700}
h3{font-size:24px;font-weight:700;letter-spacing:-.01em}
.wrap{max-width:1180px;margin:0 auto;padding:0 56px}
@media(max-width:760px){.wrap{padding:0 24px}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:var(--r-pill);font-weight:700;font-size:16px;text-decoration:none;border:0;cursor:pointer;font-family:inherit;transition:background 150ms,color 150ms,box-shadow 150ms}
.btn-forest{background:var(--forest);color:var(--paper);box-shadow:0 0 0 1px var(--forest-ring) inset}
.btn-forest:hover{background:var(--forest-h);color:var(--paper)}
.btn-paper{background:var(--paper);color:var(--ink)}
.btn-paper:hover{background:#fff;color:var(--ink)}
.btn-ghost-ink{background:transparent;color:var(--paper);box-shadow:0 0 0 1px rgba(255,251,244,.4) inset}
.btn-ghost-ink:hover{box-shadow:0 0 0 1px rgba(255,251,244,.9) inset;color:var(--paper)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:0 0 0 1px var(--rule) inset}
.btn-ghost:hover{background:var(--bone);color:var(--ink)}
.btn:disabled{opacity:.6;cursor:default}

.chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:var(--r-pill);font-weight:500;font-size:15px}
.chip-mint{background:var(--mint);color:var(--ver)}
.chip-sand{background:var(--sand);color:var(--amb)}
.chip-lav{background:var(--lav);color:#4B3A8A}
.chip-sky{background:var(--sky);color:#2B4A8A}

.status{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:var(--r-pill);font-size:12px;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.s-ver{background:var(--mint);color:var(--ver)}
.s-amb{background:var(--sand);color:var(--amb)}
.s-mis{background:var(--clay);color:var(--mis)}
.s-mut{background:#E8E9E6;color:var(--mut)}

.card{border-radius:var(--r-card);padding:32px}
@media(max-width:760px){.card{padding:24px}}
.mock{background:var(--paper);border-radius:var(--r-inner);box-shadow:0 1px 0 rgba(21,34,22,.06),0 12px 32px rgba(21,34,22,.08);padding:20px}
.tick{width:22px;height:22px;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;flex:none}

/* floating nav */
.navbar{position:sticky;top:12px;z-index:20;margin:16px auto 0;max-width:1180px;padding:0 56px}
.navbar .bar{display:flex;align-items:center;justify-content:space-between;gap:24px;background:rgba(255,251,244,.92);backdrop-filter:blur(10px);border:1px solid var(--rule);border-radius:var(--r-pill);padding:10px 12px 10px 22px;box-shadow:0 8px 24px rgba(21,34,22,.06)}
.navbar .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:700;font-size:20px;letter-spacing:-.01em}
.navbar .brand img{height:30px}
.navbar .brand .ar{font-weight:500;font-size:18px;color:var(--ink2)}
.navbar .links{display:flex;align-items:center;gap:26px}
.navbar .links a{text-decoration:none;color:var(--ink);font-weight:500;font-size:15px}
.navbar .links a:hover{text-decoration:underline;text-underline-offset:5px}
.navbar .links a.btn{height:44px;padding:0 20px;font-size:15px;color:var(--paper)}
.navbar .links a.btn:hover{text-decoration:none}
@media(max-width:860px){.navbar{padding:0 16px}.navbar .links a:not(.btn){display:none}}

/* footer */
.footer{padding:40px 0 48px}
.footer .grid{border-top:1px solid var(--rule);padding-top:40px;display:grid;grid-template-columns:5fr 2fr 2fr 3fr;gap:32px}
.footer .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px}
.footer .brand .ar{font-weight:500;font-size:18px;color:var(--ink2)}
.footer p{font-size:13px;color:var(--mut);max-width:48ch;margin-top:14px}
.footer .col{display:flex;flex-direction:column;gap:8px;font-size:15px}
.footer .col b{margin-bottom:4px}
.footer .col a{text-decoration:none;color:var(--ink)}
.footer .col a:hover{text-decoration:underline}
@media(max-width:760px){.footer .grid{grid-template-columns:1fr 1fr}.footer .grid>div:first-child{grid-column:1/-1}}

/* floating whatsapp */
.wa-float{position:fixed;right:24px;bottom:24px;z-index:30;height:56px;padding:0 22px;box-shadow:0 10px 24px rgba(7,58,32,.3)}
.wa-float.hidden{display:none}
@media(max-width:760px){.wa-float{right:16px;bottom:16px;height:52px;padding:0 18px}}

/* forms (check + setup) */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-weight:700;font-size:15px}
.field input,.field select{height:56px;border:1px solid var(--rule);border-radius:var(--r-inner);padding:0 18px;font:inherit;font-size:16px;background:#fff;color:var(--ink);width:100%}
.field input::placeholder{color:#9EA69E}
.field input:focus{border-color:var(--forest);outline:none}
.phone{display:flex;border:1px solid var(--rule);border-radius:var(--r-inner);overflow:hidden;background:#fff}
.phone:focus-within{border-color:var(--forest)}
.phone span{display:flex;align-items:center;padding:0 16px;border-right:1px solid var(--rule);color:var(--ink2);font-size:16px}
.phone input{border:0;border-radius:0;flex:1;height:56px;padding:0 18px;font:inherit;font-size:16px;color:var(--ink);background:#fff;min-width:0}
.phone input:focus{outline:none}
.opts{display:flex;flex-direction:column;gap:12px}
.opt{display:flex;align-items:center;gap:16px;border:1px solid var(--rule);border-radius:var(--r-inner);padding:18px 20px;background:#fff;cursor:pointer;text-align:left;font:inherit;font-size:16px;color:var(--ink);width:100%;transition:border-color 150ms,background 150ms}
.opt:hover{border-color:var(--forest)}
.opt.sel{border:2px solid var(--forest);padding:17px 19px;background:#FBFCF8}
.opt:disabled{cursor:default}
.opt .radio{width:20px;height:20px;border-radius:var(--r-pill);border:1.5px solid var(--ink);display:inline-flex;align-items:center;justify-content:center;flex:none}
.opt.sel .radio::after{content:"";width:10px;height:10px;border-radius:var(--r-pill);background:var(--ink)}
.opt small{display:block;color:var(--ink2);font-size:14.5px;font-weight:400}
.opt kbd{margin-left:auto;font:500 11px "IBM Plex Mono",monospace;color:var(--mut);border:1px solid var(--rule);border-radius:6px;padding:2px 7px;flex:none}
@media(hover:none){.opt kbd{display:none}}
.hidden{display:none!important}
.err{color:var(--mis);font-weight:500;font-size:14px}