/* Shard · tokens and primitives, adapted from the QUD v4 polish generation.
   Neutral paper. Charcoal holds the file. Brass is a money action — this
   surface has none, so it wears none. Pick a step, never a number. */

:root{
  --paper:#F4F2ED; --paper2:#ECEAE3; --paper3:#E7E5DF; --white:#FFFFFF;
  --ink:#141312; --ink2:#5C5852; --mut:#8B867E; --faint:#B9B4AB;
  --hair:rgba(20,19,18,.08); --hair2:rgba(20,19,18,.14); --hair3:rgba(20,19,18,.22);
  --dk:#0F0F0E; --dk2:#1A1A19; --dk3:#242422;
  --dkink:#F5F3EE; --dkmut:#9A958C; --dkhair:rgba(245,243,238,.10);
  --dk-hi:#2A2C22; --dk-lo:#1A1C16;
  --btn-hi:#252420; --btn-lo:#121110;
  --olive:#25271E; --olive2:#1C1E18;
  --gold:#D1B35A; --gold2:#C4A24E; --gold-ink:#2A2410; --sage:#B5B08C;
  --alert:#D9553B; --alert-l:#B4331F;

  --disp:'Inter Tight',system-ui,sans-serif;
  --serif:'Cormorant Garamond',Georgia,serif;
  --ui:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --d0:64px; --d1:56px; --d2:40px; --d3:33px; --d4:25px; --d5:20px; --d6:17px;
  --t1:17px; --t2:15px; --t3:14px; --t4:13px; --t5:12.5px;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s7:32px; --s8:40px; --s9:48px; --s10:64px; --s11:80px; --s12:96px;
  --sec:48px; --sec-w:88px;
  --gut:20px; --gut-w:48px;

  --r1:10px; --r2:16px; --r3:22px; --r4:28px;
  --sh1:0 1px 2px rgba(20,19,18,.04),0 6px 16px -10px rgba(20,19,18,.12);
  --sh2:0 2px 4px rgba(20,19,18,.05),0 18px 40px -20px rgba(20,19,18,.22);
  --sh3:0 4px 8px rgba(20,19,18,.06),0 40px 80px -40px rgba(20,19,18,.34);
  --dsh:0 1px 0 rgba(255,255,255,.07) inset,0 26px 50px -24px rgba(20,19,18,.6),
        0 6px 14px -8px rgba(20,19,18,.35);

  --in:1440px;
}

*{margin:0;padding:0;box-sizing:border-box}
button,input,select,textarea{font:inherit;color:inherit}
html,body{background:var(--paper);color:var(--ink)}
body{
  font-family:var(--ui);font-size:var(--t2);line-height:1.55;
  -webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01";
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
b,strong{font-weight:700}
ul{list-style:none}
button{background:none;border:0;cursor:pointer}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

svg.i{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  display:inline-block;vertical-align:middle;flex:none}
:where(svg.i:not([width])){width:18px;height:18px}

.eyebrow{font-size:var(--t5);letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--ink2)}
.code{font-family:var(--mono);font-weight:600;letter-spacing:.06em}

.card{background:var(--white);border:1px solid var(--hair);border-radius:var(--r3);box-shadow:var(--sh1)}
.dcard{background:linear-gradient(165deg,var(--dk-hi),var(--olive) 56%,var(--dk-lo));
  color:var(--dkink);border-radius:var(--r3);box-shadow:var(--dsh);position:relative;overflow:hidden}
.dcard::after{content:'';position:absolute;inset:0;opacity:.09;mix-blend-mode:soft-light;
  pointer-events:none;border-radius:inherit;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.dcard>*{position:relative;z-index:1}
.dcard .eyebrow{color:var(--dkmut)}

.btn{height:52px;border-radius:26px;display:inline-flex;align-items:center;justify-content:center;
  gap:var(--s2);padding:0 var(--s6);font-family:var(--ui);font-size:var(--t2);font-weight:600;
  letter-spacing:-.005em;white-space:nowrap;border:0;cursor:pointer}
.btn svg{width:18px;height:18px}
.btn.pri{background:linear-gradient(180deg,var(--btn-hi),var(--btn-lo));color:var(--paper);
  box-shadow:0 1px 0 rgba(255,255,255,.09) inset,0 12px 26px -14px rgba(20,19,18,.7)}
.btn.gold{background:var(--gold);color:var(--gold-ink);border-radius:var(--r1);height:48px;
  padding:0 28px;font-size:var(--t5);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:none}
.btn.gold:hover{background:var(--gold2)}
.btn.sec{background:var(--white);border:1px solid var(--hair2);color:var(--ink);box-shadow:var(--sh1)}
.btn.ghost{background:transparent;color:var(--ink2)}
.btn.wide{width:100%}
.btn.sm{height:40px;padding:0 var(--s4);font-size:var(--t4);border-radius:20px}
.btn.sm svg{width:15px;height:15px}

.st{height:26px;padding:0 var(--s3);border-radius:13px;display:inline-flex;align-items:center;gap:6px;
  font-size:var(--t5);font-weight:700}
.st svg{width:12px;height:12px}
.dcard .st{background:var(--dk3);color:var(--dkink)}

.steps{display:flex;flex-direction:column}
.step{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--hair)}
.step:last-child{border-bottom:0}
.step i{width:24px;height:24px;border-radius:12px;border:1.8px solid var(--hair2);display:grid;
  place-items:center;flex:none;font-size:var(--t5);font-weight:800;color:var(--mut);font-style:normal}
.step i svg{width:12px;height:12px;stroke-width:3}
.step .t{font-size:var(--t3);font-weight:600;flex:1}
.step .m{font-size:var(--t5);color:var(--ink2);font-weight:700}
.dcard .step{border-color:var(--dkhair)}
.dcard .step i{border-color:var(--dkhair);color:var(--dkmut)}
.dcard .step.done i{background:var(--dkink);border-color:var(--dkink);color:var(--dk)}
.dcard .step.now i{border-color:var(--dkink);color:var(--dkink);box-shadow:0 0 0 4px rgba(255,255,255,.08)}
.dcard .step .t{color:var(--dkink)}
.dcard .step.done .t{color:var(--dkmut)}
.dcard .step .m{color:var(--dkmut)}
.dcard .step.done .m,.dcard .step.now .m{color:var(--dkink)}

@media (max-width:640px){
  :root{--d1:38px;--d2:29px}
}