:root{
  --bg:#F1F0EC;
  --ink:#161513;
  --muted:#97948C;
  --muted-2:#B6B3AB;
  --line:#DBD8D1;
  --line-strong:#CBC8C0;
  --tile:#E7E5DE;
  --card:#FBFAF7;
  --chip:#FFFFFF;
  --accent:#161513;
  --good:#1B7A4B;
  --bad:#A23B2B;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  padding:28px 20px 64px;
}
.wrap{max-width:1060px;margin:0 auto;border:1px dashed var(--line-strong);background:
   linear-gradient(var(--bg),var(--bg));}
.pad{padding:34px clamp(20px,4vw,46px)}

/* ---- shared bits ---- */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.tile{width:38px;height:38px;border-radius:9px;background:var(--tile);display:grid;place-items:center;border:1px solid var(--line);}
.tile svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.serif{font-family:var(--serif);font-style:italic;}
.divider{border-top:1px dashed var(--line-strong);}

/* ---- hero ---- */
.hero{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:30px;}
.hero-copy{display:flex;flex-direction:column;gap:18px;flex:1 1 auto;min-width:0;}
.cli{display:flex;flex-direction:column;gap:8px;margin-top:2px;}
.cli-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.cmd{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line-strong);border-radius:11px;padding:11px 13px;max-width:460px;}
.cmd code{font-family:var(--mono);font-size:12.5px;color:var(--ink);white-space:nowrap;overflow-x:auto;flex:1;}
.cmd .tok-cmd{color:var(--bad);font-weight:600;}
.cmd .tok-flag{color:var(--muted);}
.cmd .tok-pipe{color:var(--muted-2);}
.cmd-copy{flex:0 0 auto;border:1px solid var(--line-strong);background:var(--chip);border-radius:7px;font-family:var(--mono);font-size:11px;color:#5c5a54;padding:6px 11px;cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.cmd-copy:hover{background:var(--ink);color:#fff;border-color:var(--ink);}
.cmd-copy.copied{background:var(--good);color:#fff;border-color:var(--good);}
.hero-media{flex:0 0 auto;width:300px;height:300px;display:grid;place-items:center;}
.hero-media canvas{display:block;max-width:100%;height:auto;}
.hero-media pre.ascii-dna{font-family:var(--mono);font-size:13px;line-height:1.05;color:var(--ink);white-space:pre;margin:0;}
.hero h1{font-size:clamp(30px,4.6vw,50px);line-height:1.03;letter-spacing:-.022em;font-weight:700;max-width:16ch;}
.hero .sub{font-family:var(--serif);font-style:italic;font-size:clamp(17px,2.2vw,23px);color:#46443f;max-width:40ch;}
.hero-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px;}
.pill-stat{display:inline-flex;align-items:center;gap:8px;background:var(--chip);border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:12.5px;}
.pill-stat b{font-family:var(--mono);font-weight:600;}
.pill-stat .dot{width:7px;height:7px;border-radius:50%;background:var(--ink);}

/* ---- tier grid ---- */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);}
.tier{padding:26px clamp(16px,2.4vw,26px);border-right:1px dashed var(--line-strong);display:flex;flex-direction:column;gap:14px;min-height:200px;}
.tier:last-child{border-right:0;}
.tier .name{font-weight:700;font-size:15.5px;letter-spacing:-.01em;}
.tier .meta{font-size:12.5px;color:var(--muted);}
.tier .price{font-family:var(--mono);font-size:24px;font-weight:600;letter-spacing:-.02em;margin-top:auto;}
.tier .price small{font-family:var(--sans);font-size:11.5px;font-weight:400;color:var(--muted);display:block;letter-spacing:0;margin-top:3px;}
.tier .hook{font-size:12.5px;color:#46443f;border-top:1px dashed var(--line);padding-top:11px;}
.tier .hook b{font-family:var(--mono);font-weight:600;}

/* ---- calculator ---- */
.calc{display:grid;grid-template-columns:1fr 1fr;}
.calc-side{padding:32px clamp(20px,3vw,40px);}
.calc-in{border-right:1px dashed var(--line-strong);}
.label{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:9px;display:block;}
.seg{display:inline-flex;background:var(--tile);border:1px solid var(--line);border-radius:10px;padding:3px;gap:3px;}
.seg button{border:0;background:transparent;font-family:var(--sans);font-size:12.5px;color:#5c5a54;padding:7px 13px;border-radius:7px;cursor:pointer;transition:background .15s,color .15s;}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff;}
.field{margin-top:22px;}
.input-line{display:flex;align-items:center;gap:10px;}
.money{flex:1;display:flex;align-items:center;background:var(--chip);border:1px solid var(--line-strong);border-radius:10px;padding:0 14px;height:46px;transition:border-color .15s;}
.money:focus-within{border-color:var(--ink);}
.money span{font-family:var(--mono);color:var(--muted);font-size:15px;}
.money input{border:0;outline:0;background:transparent;font-family:var(--mono);font-size:16px;color:var(--ink);width:100%;padding-left:6px;}
select.sel{width:100%;height:46px;border:1px solid var(--line-strong);border-radius:10px;background:var(--chip);font-family:var(--sans);font-size:14px;color:var(--ink);padding:0 14px;cursor:pointer;}
.pbrow{display:flex;align-items:center;gap:14px;margin-top:10px;}
input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:3px;background:var(--line-strong);border-radius:3px;outline:none;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--ink);cursor:pointer;border:2px solid var(--bg);}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--ink);cursor:pointer;border:2px solid var(--bg);}
.pbval{font-family:var(--mono);font-size:15px;min-width:74px;text-align:right;}
.pbval small{color:var(--muted);font-size:11px;}
.note{font-size:11.5px;color:var(--muted-2);margin-top:14px;line-height:1.5;}

/* ---- output ---- */
.calc-out{background:var(--card);position:relative;}
.calc-out::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:15px 15px;opacity:.5;}
.calc-out .inner{position:relative;}
.gauge-wrap{display:flex;flex-direction:column;align-items:center;}
.gauge{width:230px;max-width:100%;}
.gauge .track{stroke:var(--line-strong);}
.gauge .fill{stroke:var(--ink);transition:stroke-dashoffset .7s cubic-bezier(.22,.61,.36,1);}
.gauge-num{font-family:var(--mono);font-size:46px;font-weight:600;letter-spacing:-.03em;text-anchor:middle;fill:var(--ink);}
.gauge-cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;text-anchor:middle;fill:var(--muted);}
.gauge-sub{font-family:var(--serif);font-style:italic;font-size:15px;color:#46443f;margin-top:2px;text-align:center;}

.chips{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px;}
.chip{background:var(--chip);border:1px solid var(--line);border-radius:11px;padding:12px 14px;}
.chip .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:6px;}
.chip .k i{width:6px;height:6px;border-radius:1px;background:var(--ink);display:inline-block;}
.chip .v{font-family:var(--mono);font-size:18px;font-weight:600;letter-spacing:-.02em;margin-top:6px;}
.chip.save{grid-column:1 / -1;background:var(--ink);border-color:var(--ink);}
.chip.save .k{color:#b9b6ad;}
.chip.save .k i{background:#fff;}
.chip.save .v{color:#fff;font-size:26px;}
.chip.save .v small{font-family:var(--sans);font-size:12px;font-weight:400;color:#b9b6ad;margin-left:8px;}

.cumrow{display:flex;gap:26px;margin-top:18px;padding-top:16px;border-top:1px dashed var(--line);}
.cum .k{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.cum .v{font-family:var(--mono);font-size:17px;font-weight:600;margin-top:4px;}

.warn{margin-top:18px;font-size:12.5px;color:var(--bad);font-family:var(--sans);display:none;line-height:1.5;}
.warn.show{display:block;}

/* ---- reassurance ---- */
.reassure{display:grid;grid-template-columns:repeat(4,1fr);}
.rc{padding:24px clamp(16px,2.4vw,26px);border-right:1px dashed var(--line-strong);display:flex;flex-direction:column;gap:12px;}
.rc:last-child{border-right:0;}
.rc .t{font-weight:700;font-size:14px;}
.rc .d{font-size:12px;color:var(--muted);}

/* ---- cta ---- */
.cta-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 20px;}
.cta{background:var(--ink);color:#fff;border:0;border-radius:999px;padding:15px 30px;font-family:var(--sans);font-size:14.5px;font-weight:600;cursor:pointer;letter-spacing:-.01em;transition:transform .12s,opacity .15s;}
.cta:hover{transform:translateY(-1px);opacity:.92;}
.foot{max-width:60ch;text-align:center;font-size:11.5px;color:var(--muted-2);line-height:1.55;}

:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px;}

@media (max-width:860px){
  .tiers,.reassure{grid-template-columns:1fr 1fr;}
  .tier:nth-child(2),.rc:nth-child(2){border-right:0;}
  .tier,.rc{border-bottom:1px dashed var(--line-strong);}
  .calc{grid-template-columns:1fr;}
  .calc-in{border-right:0;border-bottom:1px dashed var(--line-strong);}
  .hero{flex-direction:column;align-items:flex-start;}
  .hero-media{order:-1;width:240px;height:240px;align-self:center;}
}
@media (max-width:520px){
  .tiers,.reassure{grid-template-columns:1fr;}
  .tier,.rc{border-right:0;}
  .chips{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .gauge .fill,.cta{transition:none;}
}
