/* ==========================================================================
   RABZI base.css — reset, fonts, type scale, layout primitives, buttons, forms, badges
   RASTER: square everything, 1 px hairlines, no shadows, no radius (except devices/pills).
   ========================================================================== */

/* ---- metric-matched fallbacks (no CLS while Archivo loads) ---- */
@font-face{ font-family:'Archivo Fallback'; src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans'); size-adjust:98%; ascent-override:88%; descent-override:22%; line-gap-override:0% }
@font-face{ font-family:'Instrument Serif Fallback'; src:local('Georgia'),local('Times New Roman'); size-adjust:104%; ascent-override:86%; descent-override:22%; line-gap-override:0% }

/* ---- reset ---- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; hanging-punctuation:first last }
html,body{ margin:0; padding:0 }
body{
  background:var(--bg); color:var(--fg);
  font:400 var(--fs-body)/var(--lh-body) var(--font-body);
  font-variation-settings:'wdth' 100;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  min-height:100svh;
  overflow-x:clip;
}
main{ position:relative; z-index:1; background:var(--bg); container-type:inline-size }
.page{ counter-reset:chapter }
img,svg,video,canvas{ display:block; max-width:100% }
svg{ height:auto }
button,input,select,textarea{ font:inherit; color:inherit; letter-spacing:inherit }
button{ background:none; border:0; padding:0; cursor:pointer }
a{ color:var(--link); text-decoration:none; text-underline-offset:.18em; text-decoration-thickness:1px }
a:hover{ color:var(--link-hover) }
p,h1,h2,h3,h4,h5,h6,ul,ol,figure,blockquote,dl,dd{ margin:0 }
ul[class],ol[class]{ list-style:none; padding:0 }
::selection{ background:var(--signal); color:var(--paper) }
:focus{ outline:none }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px }
.grid--collapse > :focus-visible,.bento__item:focus-visible,.raster__cell:focus-visible{ outline-offset:-3px }
hr{ border:0; border-top:1px solid var(--line); margin:0 }
table{ border-collapse:collapse; width:100%; font-variant-numeric:tabular-nums }
th,td{ text-align:left; vertical-align:top; padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--line) }
th{ font:500 var(--fs-eyebrow)/1 var(--font-mono); letter-spacing:var(--ls-mono); text-transform:uppercase; color:var(--fg-muted) }
code,kbd,samp,pre{ font-family:var(--font-mono); font-size:.9em }
pre{ overflow-x:auto; padding:var(--s-5); background:var(--bg-2); border-left:2px solid var(--signal); margin:0 }
@media (hover:hover) and (pointer:fine){ ::-webkit-scrollbar{ width:10px; height:10px } ::-webkit-scrollbar-track{ background:var(--bg-2) } ::-webkit-scrollbar-thumb{ background:var(--line-strong); border:2px solid var(--bg-2) } }
@media (prefers-contrast:more){ :root{ --line:rgba(18,18,21,.5); --line-hair:rgba(18,18,21,.3) } }

/* ---- type scale ---- */
h1,.display-1{ font:800 var(--fs-xl)/var(--lh-tight) var(--font-display); letter-spacing:var(--ls-display); font-variation-settings:'wdth' var(--wdth); text-wrap:balance; hyphens:auto; overflow-wrap:anywhere }
h2,.display-2{ font:700 var(--fs-l)/.95 var(--font-display); letter-spacing:-.025em; font-variation-settings:'wdth' 108; text-wrap:balance; hyphens:auto }
.display-3{ font:700 var(--fs-m)/1 var(--font-display); letter-spacing:-.02em; font-variation-settings:'wdth' 104; text-wrap:balance }
h3{ font:600 var(--fs-h3)/1.12 var(--font-display); letter-spacing:-.01em; text-wrap:balance }
h4{ font:600 var(--fs-h4)/1.2 var(--font-display) }
.lead{ font:400 var(--fs-lead)/1.4 var(--font-body); max-width:var(--measure); text-wrap:pretty }
.eyebrow,.mono{ font:500 var(--fs-eyebrow)/1.4 var(--font-mono); letter-spacing:var(--ls-mono); text-transform:uppercase; font-variant-numeric:tabular-nums }
.mono--text{ text-transform:none; letter-spacing:.02em; font-size:var(--fs-mono); line-height:1.5 }
.stat__value{ font:700 var(--fs-stat)/.9 var(--font-display); letter-spacing:-.04em; font-variant-numeric:tabular-nums; font-variation-settings:'wdth' 100 }
h1 em,h2 em,h3 em,.display-1 em,.display-2 em,.display-3 em,blockquote,.serif{ font-family:var(--font-serif); font-style:italic; font-weight:400; letter-spacing:0; font-size:1em; line-height:inherit; vertical-align:baseline }
.narrow{ font-variation-settings:'wdth' var(--wdth-narrow) }
.tnum{ font-variant-numeric:tabular-nums }
.small{ font-size:var(--fs-small) }
.text-accent{ color:var(--accent-text) } .text-muted{ color:var(--fg-muted) } .text-signal{ color:var(--signal-text) } .text-cobalt{ color:var(--cobalt-text) }
.text-balance{ text-wrap:balance } .text-pretty{ text-wrap:pretty }
.measure{ max-width:var(--measure) }
strong,b{ font-weight:600 }

/* ---- layout primitives ---- */
.container{ width:min(100% - 2*var(--margin), var(--container)); margin-inline:auto; position:relative }
.container--wide{ width:min(100% - 2*var(--margin), var(--container-wide)); margin-inline:auto; position:relative }
.container--narrow{ width:min(100% - 2*var(--margin), 880px); margin-inline:auto; position:relative }
.bleed{ width:100cqw; margin-inline:calc(50% - 50cqw) }
.section{ position:relative; padding-block:var(--section) }
.section + .section{ padding-top:calc(var(--section) * .66) }
/* materials: every section declares one; paint it */
[data-material="ink"],[data-material="block"],[data-material="paper-2"],.section--ink,.section--block{ background:var(--bg); color:var(--fg) }
.section--ink + .section,.section--block + .section,[data-material="paper-2"] + .section{ padding-top:var(--section) }
.section--s{ padding-block:var(--section-s) }
.section--flush-top{ padding-top:0 } .section--flush-bottom{ padding-bottom:0 }
.section--lazy{ content-visibility:auto; contain-intrinsic-size:auto 800px }
.grid{ display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); gap:var(--gutter) }
.grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
.grid--collapse{ gap:1px; background:transparent; border:1px solid var(--line) }
.grid--collapse > *{ background:var(--surface); min-width:0; box-shadow:0 0 0 1px var(--line) }
.span-1{grid-column-end:span 1}.span-2{grid-column-end:span 2}.span-3{grid-column-end:span 3}.span-4{grid-column-end:span 4}.span-5{grid-column-end:span 5}.span-6{grid-column-end:span 6}.span-7{grid-column-end:span 7}.span-8{grid-column-end:span 8}.span-9{grid-column-end:span 9}.span-10{grid-column-end:span 10}.span-11{grid-column-end:span 11}.span-12{grid-column-end:span 12}
.start-1{grid-column-start:1}.start-2{grid-column-start:2}.start-3{grid-column-start:3}.start-4{grid-column-start:4}.start-5{grid-column-start:5}.start-6{grid-column-start:6}.start-7{grid-column-start:7}.start-8{grid-column-start:8}.start-9{grid-column-start:9}.start-10{grid-column-start:10}
.stack-1{display:flex;flex-direction:column;gap:var(--s-1)}.stack-2{display:flex;flex-direction:column;gap:var(--s-2)}.stack-3{display:flex;flex-direction:column;gap:var(--s-3)}.stack-4{display:flex;flex-direction:column;gap:var(--s-4)}.stack-5{display:flex;flex-direction:column;gap:var(--s-5)}.stack-6{display:flex;flex-direction:column;gap:var(--s-6)}.stack-7{display:flex;flex-direction:column;gap:var(--s-7)}.stack-8{display:flex;flex-direction:column;gap:var(--s-8)}
.flow > * + *{ margin-block-start:var(--flow, var(--s-5)) }
.row{ display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap }
.row--between{ justify-content:space-between }
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0 }
.raster-lines{ position:absolute; inset:0; background:var(--raster-12); pointer-events:none; z-index:0 }
.raster-lines + *{ position:relative }
.icon{ width:1em; height:1em; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:square; stroke-linejoin:miter; flex:none }
.icon--24{ width:24px; height:24px } .icon--16{ width:16px; height:16px }
.square{ display:inline-block; width:8px; height:8px; background:currentColor; flex:none }
.square--signal{ background:var(--signal) }
.hairline{ border-top:1px solid var(--line) }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch }

@media (max-width:1023px){ :root{ --cols:6 } .span-7,.span-8,.span-9,.span-10,.span-11,.span-12{ grid-column-end:span 6 } .start-3,.start-5,.start-7,.start-8,.start-9,.start-10{ grid-column-start:1 } .grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:639px){ :root{ --cols:4 } [class*="span-"]{ grid-column:1 / -1 } [class*="start-"]{ grid-column-start:1 } .grid--2,.grid--3,.grid--4{ grid-template-columns:minmax(0,1fr) } .grid--collapse.grid--keep-2{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-3);
  height:48px; padding:0 var(--s-5); border:1px solid currentColor; border-radius:var(--r-0);
  font:600 15px/1 var(--font-display); letter-spacing:0; text-decoration:none; white-space:nowrap;
  color:var(--fg); background:transparent; position:relative; isolation:isolate; overflow:hidden;
  transition:color var(--d-s) var(--ease-out), border-color var(--d-s) var(--ease-out);
  cursor:pointer;
}
.btn .icon{ width:16px; height:16px; transition:transform var(--d-s) var(--ease-out) }
.btn:hover .icon,.btn:focus-visible .icon{ transform:translateX(4px) }
.btn--primary{ background:var(--fg); color:var(--bg); border-color:var(--fg) }
.btn--primary:hover{ color:var(--bg) }
.btn--primary::before{ content:""; position:absolute; inset:0; background:var(--signal); z-index:-1; clip-path:inset(0 100% 0 0); transition:clip-path var(--d-m) var(--ease-inout) }
.btn--primary:hover::before,.btn--primary:focus-visible::before{ clip-path:inset(0) }
.btn--primary:hover{ color:var(--signal-fg); border-color:var(--signal) }
[data-theme="dark"] .btn--primary:hover{ color:#101013 }
.btn--ghost::before{ content:""; position:absolute; inset:0; background:var(--fg); z-index:-1; clip-path:inset(0 100% 0 0); transition:clip-path var(--d-m) var(--ease-inout) }
.btn--ghost:hover,.btn--ghost:focus-visible{ color:var(--bg) }
.btn--ghost:hover::before,.btn--ghost:focus-visible::before{ clip-path:inset(0) }
.btn--link{ height:auto; padding:0; border:0; overflow:visible; gap:var(--s-2); justify-content:flex-start; align-self:flex-start; width:fit-content }
.btn--link::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform var(--d-s) var(--ease-out) }
.btn--link:hover::after,.btn--link:focus-visible::after{ transform:scaleX(1) }
.btn--icon{ width:44px; height:44px; padding:0 }
.btn--lg{ height:56px; padding:0 var(--s-6); font-size:16px }
.btn--sm{ height:40px; padding:0 var(--s-4); font-size:14px }
.btn--block{ width:100%; display:flex }
.btn[disabled],.btn[aria-busy="true"]{ opacity:.6; pointer-events:none }
[data-material="ink"] .btn--primary{ background:var(--paper); color:var(--ink); border-color:var(--paper) }
[data-material="ink"] .btn--primary:hover{ color:var(--signal-fg) }
[data-material="block"] .btn--primary{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
[data-material="block"] .btn--primary::before{ background:var(--paper) }
[data-material="block"] .btn--primary:hover{ color:var(--ink); border-color:var(--paper) }

/* ---- forms ---- */
.form{ display:flex; flex-direction:column; gap:var(--s-6) }
.form__row{ display:grid; gap:var(--s-6); grid-template-columns:1fr }
@media (min-width:640px){ .form__row{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.field{ display:flex; flex-direction:column; gap:var(--s-2); min-width:0 }
.field__label{ font:500 var(--fs-eyebrow)/1 var(--font-mono); letter-spacing:var(--ls-mono); text-transform:uppercase; color:var(--fg-muted); display:flex; justify-content:flex-start; gap:4px }
.field__label .req{ color:var(--signal-text) }
.field:focus-within .field__label{ color:var(--fg) }
.field__hint{ font-size:var(--fs-small); color:var(--fg-muted) }
.field__error{ font-size:var(--fs-small); color:var(--err) }
.input,.select,.textarea{
  width:100%; min-height:56px; padding:var(--s-4) 0; background:transparent; color:var(--fg);
  border:0; border-bottom:1px solid var(--line-strong); border-radius:0; appearance:none; -webkit-appearance:none;
  font:400 var(--fs-body)/1.4 var(--font-body); transition:box-shadow var(--d-s) var(--ease-out);
}
.input::placeholder,.textarea::placeholder{ color:var(--fg-muted); opacity:1 }
.input:focus,.select:focus,.textarea:focus{ outline:none; box-shadow:inset 0 -2px 0 var(--signal) }
.input[aria-invalid="true"],.textarea[aria-invalid="true"],.select[aria-invalid="true"]{ box-shadow:inset 0 -2px 0 var(--err) }
.textarea{ min-height:160px; resize:vertical }
.select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121215' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0 center; background-size:18px; padding-right:28px; cursor:pointer }
[data-theme="dark"] .select,[data-material="ink"] .select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2F1EC' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") }
.select option{ color:#121215; background:#F6F4EE }
.checkbox{ display:flex; gap:var(--s-3); align-items:flex-start; cursor:pointer; font-size:var(--fs-small) }
.checkbox input{ appearance:none; -webkit-appearance:none; width:18px; height:18px; flex:none; border:1px solid var(--line-strong); background:transparent; margin:2px 0 0; position:relative; cursor:pointer }
.checkbox input:checked{ background:var(--fg); border-color:var(--fg) }
.checkbox input:checked::after{ content:""; position:absolute; inset:3px; background:var(--bg); clip-path:polygon(14% 44%,0 62%,40% 100%,100% 18%,84% 4%,40% 70%) }
.checkbox input:focus-visible{ outline:2px solid var(--focus); outline-offset:2px }
.form__status{ font-size:var(--fs-small); padding:var(--s-4); border:1px solid var(--line-strong) }
.form__status--ok{ border-color:var(--ok); color:var(--ok) }
.form__status--err{ border-color:var(--err); color:var(--err) }
.form__status:empty{ padding:0; border:0 }
.form__actions{ display:flex; flex-wrap:wrap; gap:var(--s-4); align-items:center }
.form__privacy{ font-size:var(--fs-small); color:var(--fg-muted) }
.form__privacy a{ text-decoration:underline }

/* ---- badges ---- */
.tag,.pill,.badge{ display:inline-flex; align-items:center; gap:var(--s-2); font:500 11px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; color:var(--fg) }
.tag{ min-height:28px; padding:var(--s-1) var(--s-3); border:1px solid var(--line); white-space:normal; line-height:1.3; text-align:left }
@media (max-width:639px){ .btn{ white-space:normal; height:auto; min-height:48px; padding-block:var(--s-3); text-align:center } .btn--lg{ min-height:56px } .hero__actions .btn,.cta-band__actions .btn,.form__actions .btn{ width:100% } }
.tags{ display:flex; flex-wrap:wrap; gap:var(--s-2) }
.pill{ height:28px; padding:0 var(--s-4); border:1px solid var(--line-strong); border-radius:var(--r-pill) }
.pill .dot{ width:6px; height:6px; background:var(--ok); flex:none }
.badge{ padding:var(--s-2) var(--s-3); border:1px solid var(--line-strong) }
@media (max-width:639px){ .badge,.pill{ white-space:normal; text-align:left; height:auto; line-height:1.4 } }
@media (max-width:639px){ .table-scroll{ mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent) } }
.stamps{ display:flex; flex-wrap:wrap; gap:var(--s-2) }

/* ---- print ---- */
@media print{ .header,.footer,.cursor,.preloader,.curtain,.cta-dock,.menu-overlay{ display:none !important } body{ background:#fff; color:#000 } a{ color:#000 } }

/* ---- reduced motion (base-level) ---- */
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } .btn .icon,.btn::before,.btn::after{ transition:none } }