/* ==============================================================
   LAVEEKA · guides
   Shared by /guides/ and every page under it. Kept as one file
   rather than inlined six times: these pages are read one after
   another, so the second one costs nothing.
   Tokens are the site's own, copied from the :root that governs
   laveeka.com. Never approximate them.
   ============================================================== */
:root{
  --void:#07080B; --deep:#071040; --panel:#0F1D54; --panel-2:#132365;
  --ink:#FFFFFF; --mist:#E7F1FD; --faint:#C2D3EA; --dim:#7E93B4;
  --line:rgba(255,255,255,.2); --line-2:rgba(255,255,255,.14); --line-3:rgba(255,255,255,.11);
  --teal:#2FDDA0; --teal-soft:rgba(47,221,160,.5); --cyan:#9CC6EC; --ice:#EDF7FF;
  --grad:linear-gradient(105deg,#2FDDA0 0%,#3EE3C0 28%,#3FC8F5 62%,#3E9BFF 100%);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{background:var(--void);color:var(--ink);font-family:'Inter',system-ui,sans-serif;
  font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:rgba(47,221,160,.28)}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px}

/* ---- nav, the site's own ---- */
.nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:16px 30px;background:rgba(7,8,11,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-3)}
.nav-mark svg{height:19px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.nav-links a{color:var(--faint);font-size:13.5px;font-weight:400}
.nav-links a:hover{color:var(--ink);text-decoration:none}
.nav-links .btn-ghost{border:1px solid var(--line);border-radius:3px;padding:9px 18px;color:var(--ink)}
.nav-links .btn-ghost:hover{border-color:var(--teal-soft)}
@media(max-width:860px){.nav{padding:13px 18px}.nav-links{gap:14px}.nav-links a:not(.btn-ghost){display:none}}

/* ---- the article ---- */
.gwrap{max-width:760px;margin:0 auto;padding:64px 30px 40px}
.gcrumb{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);margin-bottom:26px}
.gcrumb a{color:var(--dim)}
.gcrumb a:hover{color:var(--faint)}
h1{font-family:'Inter',sans-serif;font-weight:300;font-size:clamp(31px,5.2vw,50px);
  line-height:1.1;letter-spacing:-.02em;text-wrap:balance;margin-bottom:20px}
h1 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.gstand{font-size:clamp(16.5px,2.1vw,19.5px);line-height:1.55;color:var(--faint);
  font-weight:300;max-width:62ch}

/* The short answer, first thing on the page and written to be quotable
   on its own. A reader who takes only this has still been told the truth. */
.gshort{margin:34px 0 0;padding:20px 22px;border-left:2px solid var(--teal);
  background:linear-gradient(90deg,rgba(47,221,160,.06),transparent 72%)}
.gshort-k{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--teal);margin-bottom:9px}
.gshort p{font-size:16.5px;line-height:1.6;color:var(--mist);max-width:60ch}
.gshort p + p{margin-top:11px}

.gbody{margin-top:46px}
.gbody h2{font-family:'Inter',sans-serif;font-weight:400;font-size:clamp(21px,2.8vw,27px);
  line-height:1.25;letter-spacing:-.01em;margin:44px 0 14px;text-wrap:balance}
.gbody h3{font-family:'Inter',sans-serif;font-weight:500;font-size:17px;line-height:1.35;
  margin:28px 0 9px;color:var(--ink)}
.gbody p{font-size:16px;line-height:1.72;color:var(--faint);margin-bottom:16px;max-width:66ch}
.gbody p strong,.gbody li strong{color:var(--ink);font-weight:500}
.gbody ul,.gbody ol{margin:0 0 18px;padding-left:20px;max-width:66ch}
.gbody li{font-size:16px;line-height:1.72;color:var(--faint);margin-bottom:9px}
.gbody li::marker{color:var(--teal)}
.gbody hr{border:0;border-top:1px solid var(--line-3);margin:44px 0}

/* a claim with its source attached, because a figure without one is an opinion */
.gsrc{font-size:13.5px;line-height:1.6;color:var(--dim);border-left:2px solid var(--line-2);
  padding-left:12px;margin:0 0 18px;max-width:64ch}
.gsrc b{color:var(--faint);font-weight:400}

/* the plain table used for anything comparative */
.gtable{width:100%;overflow-x:auto;margin:0 0 22px;border:1px solid var(--line-3);border-radius:3px}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:14.5px}
th,td{text-align:left;padding:12px 16px;vertical-align:top;border-bottom:1px solid var(--line-3);
  color:var(--faint);line-height:1.6}
tr:last-child td{border-bottom:0}
th{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);background:rgba(255,255,255,.02);white-space:nowrap}
td:first-child{color:var(--ink)}

/* the step list, where order genuinely carries meaning */
.gsteps{list-style:none;padding:0;margin:0 0 22px;counter-reset:g}
/* The number is positioned rather than laid out as a grid item. With grid,
   any bare text following an element inside the li became its own anonymous
   grid item and wrapped into the 34px number column, one word per line. */
.gsteps li{counter-increment:g;position:relative;padding:15px 0 15px 46px;
  border-top:1px solid var(--line-3);margin:0;font-size:16px;line-height:1.72;color:var(--faint)}
.gsteps li::before{content:counter(g,decimal-leading-zero);position:absolute;left:0;top:19px;
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--teal)}

.gcta{margin:56px 0 0;padding:28px 26px;border:1px solid var(--line-3);border-radius:4px;
  background:linear-gradient(120deg,rgba(47,221,160,.05),transparent 65%)}
.gcta h2{font-family:'Inter',sans-serif;font-weight:400;font-size:22px;margin:0 0 10px;line-height:1.25}
.gcta p{font-size:15.5px;line-height:1.65;color:var(--faint);margin:0 0 18px;max-width:58ch}
.gcta a{display:inline-block;border:1px solid var(--teal-soft);border-radius:3px;padding:12px 22px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink)}
.gcta a:hover{border-color:var(--teal);text-decoration:none}

/* the index */
.glist{margin-top:40px;border-top:1px solid var(--line-3)}
.gcard{display:block;padding:26px 0;border-bottom:1px solid var(--line-3);color:inherit}
.gcard:hover{text-decoration:none}
.gcard:hover h2{color:var(--teal)}
.gcard h2{font-family:'Inter',sans-serif;font-weight:400;font-size:clamp(19px,2.4vw,23px);
  line-height:1.3;margin:0 0 8px;transition:color .2s var(--ease)}
.gcard p{font-size:15px;line-height:1.65;color:var(--dim);margin:0;max-width:64ch}
.gcard .gk{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--teal);margin-bottom:9px}

footer{border-top:1px solid var(--line-3);margin-top:70px;padding:40px 30px 56px}
.fwrap{max-width:760px;margin:0 auto;display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between}
.fwrap svg{height:16px;width:auto;display:block;opacity:.9}
.flinks{display:flex;flex-wrap:wrap;gap:8px 20px}
.flinks a{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}
.flinks a:hover{color:var(--faint);text-decoration:none}
.fnote{max-width:760px;margin:26px auto 0;font-size:12px;line-height:1.65;color:var(--dim)}
@media(max-width:640px){.gwrap{padding:44px 20px 32px}footer{padding:34px 20px 44px}}