/* ── Palette derived from the ASTM D1500 oil colour scale ──────────────
   The business is literally the move from opaque black to pale straw.    */
:root{
  --crude:#0F1218;      /* heavy residue — page ground        */
  --sump:#171B23;       /* raised surfaces                     */
  --sump-2:#1E232D;     /* inputs                              */
  --steel:#2B323F;      /* hairlines, structure                */
  --steel-lit:#3B4453;  /* hover / focus rings                 */
  --haze:#868FA1;       /* secondary type                      */
  --pale:#E9ECF2;       /* primary type                        */
  --straw:#F2CE83;      /* ASTM ~1.5 — the finished product    */
  --amber:#D89B3A;      /* ASTM ~2.5 — primary accent          */
  --amber-deep:#9C6B28; /* ASTM ~5                             */
  --tar:#4A3A1C;        /* byproduct                           */
  --rust:#C4553D;       /* negative values only                */
  --green:#5E9E7A;      /* positive confirmation only          */

  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --cond:'IBM Plex Sans Condensed','IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --pad:clamp(1.25rem,4vw,4.5rem);
  --maxw:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--crude);color:var(--pale);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--cond);font-weight:700;line-height:1.05;margin:0;letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--straw);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* Eyebrows encode the document's own section numbering — this reads as a
   deal memo, and the order is meaningful (market → mandate → platform → economics). */
.eyebrow{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--amber);
  display:flex;align-items:baseline;gap:.75rem;margin-bottom:1.5rem;
}
.eyebrow::after{content:'';flex:1;height:1px;background:var(--steel)}

.band{border-top:1px solid var(--steel);padding-block:clamp(3.5rem,8vw,6.5rem)}

/* ── Top bar ─────────────────────────────────────────────── */
.top{
  position:sticky;top:0;z-index:50;
  background:rgba(15,18,24,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--steel);
}
.top-in{display:flex;align-items:center;gap:1.5rem;height:60px}
.mark{font-family:var(--cond);font-weight:700;font-size:1.1rem;letter-spacing:.02em;text-decoration:none;white-space:nowrap}
.mark span{color:var(--amber)}
.top nav{margin-left:auto;display:flex;gap:1.75rem}
.top nav a{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;color:var(--haze);
  text-decoration:none;transition:color .18s;
}
.top nav a:hover{color:var(--pale)}
.confid{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--haze);border:1px solid var(--steel);padding:.3rem .6rem;white-space:nowrap;
}
@media (max-width:900px){.top nav{display:none}}

/* ── Hero ────────────────────────────────────────────────── */
.hero{padding-block:clamp(4rem,11vw,8rem) clamp(3rem,7vw,5rem)}
.hero h1{
  font-size:clamp(2.6rem,7.4vw,5.6rem);max-width:16ch;
  text-wrap:balance;
}
.hero h1 em{font-style:normal;color:var(--straw)}
.hero-sub{
  margin-top:1.75rem;max-width:56ch;color:var(--haze);font-size:clamp(1rem,1.6vw,1.1875rem);
}
.hero-cta{display:flex;flex-wrap:wrap;gap:.875rem;margin-top:2.5rem}

.btn{
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.04em;
  padding:.85rem 1.5rem;border:1px solid var(--amber);background:var(--amber);color:#12151B;
  text-decoration:none;cursor:pointer;font-weight:500;transition:background .18s,border-color .18s,color .18s;
}
.btn:hover{background:var(--straw);border-color:var(--straw)}
.btn.ghost{background:transparent;color:var(--pale);border-color:var(--steel-lit)}
.btn.ghost:hover{background:transparent;border-color:var(--straw);color:var(--straw)}

/* Signature, static overture: the transformation this business performs.
   Repeated live and interactive inside the calculator. */
.transform{margin-top:clamp(3rem,6vw,4.5rem)}
.transform-bar{
  height:76px;display:flex;border:1px solid var(--steel);
  background:linear-gradient(90deg,
    #14161C 0%, #1C1A18 18%, #3A2C14 38%,
    var(--amber-deep) 58%, var(--amber) 78%, var(--straw) 100%);
}
.transform-legend{
  display:flex;justify-content:space-between;margin-top:.75rem;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--haze);
}
.transform-legend b{color:var(--straw);font-weight:500}

/* ── Gauges ──────────────────────────────────────────────── */
.gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--steel);border:1px solid var(--steel)}
.gauge{background:var(--crude);padding:1.75rem 1.5rem}
.gauge-v{font-family:var(--mono);font-size:clamp(1.75rem,4vw,2.75rem);font-weight:500;color:var(--straw);line-height:1}
.gauge-u{font-family:var(--mono);font-size:.75rem;color:var(--amber);margin-top:.4rem}
.gauge-l{font-size:.875rem;color:var(--haze);margin-top:.9rem;max-width:30ch}
@media (max-width:760px){.gauges{grid-template-columns:1fr}}

.lede{font-size:clamp(1.125rem,2.2vw,1.5rem);line-height:1.4;max-width:44ch;font-family:var(--cond);font-weight:600}
.body-col{max-width:62ch;color:var(--haze);margin-top:1.25rem}
.body-col p+p{margin-top:1rem}

/* ── Mandate ramp ────────────────────────────────────────── */
.ramp{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--steel);border:1px solid var(--steel);margin-top:2.5rem}
.ramp-c{background:var(--sump);padding:1.5rem 1.25rem;position:relative}
.ramp-c:last-child{background:var(--sump-2)}
.ramp-y{font-family:var(--mono);font-size:.75rem;color:var(--haze);letter-spacing:.1em}
.ramp-p{font-family:var(--cond);font-size:clamp(2rem,5vw,3rem);font-weight:700;color:var(--amber);line-height:1;margin-top:.5rem}
.ramp-c:last-child .ramp-p{color:var(--straw)}
.ramp-fill{position:absolute;left:0;bottom:0;height:3px;background:var(--amber)}
.ramp-c:last-child .ramp-fill{background:var(--straw)}
@media (max-width:620px){.ramp{grid-template-columns:repeat(2,1fr)}}

/* ── Black box ───────────────────────────────────────────── */
.box-row{display:grid;grid-template-columns:1fr auto 1.4fr auto 1fr;align-items:center;gap:1.25rem;margin-top:2.5rem}
.box-node{border:1px solid var(--steel);background:var(--sump);padding:1.5rem 1.25rem}
.box-node h4{font-size:1.0625rem;margin-bottom:.5rem}
.box-node p{font-size:.8125rem;color:var(--haze)}
.box-core{
  border:1px solid var(--amber);background:
    repeating-linear-gradient(135deg,transparent 0 7px,rgba(216,155,58,.05) 7px 14px),var(--sump-2);
  padding:2.25rem 1.5rem;text-align:center;
}
.box-core h4{color:var(--straw);font-size:1.25rem}
.box-core .lock{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--amber);margin-top:.75rem;
}
.arrow{font-family:var(--mono);color:var(--steel-lit);font-size:1.25rem}
@media (max-width:860px){
  .box-row{grid-template-columns:1fr}
  .arrow{display:none}
}

/* ── Generic list grids ──────────────────────────────────── */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--steel);border:1px solid var(--steel);margin-top:2.5rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--steel);border:1px solid var(--steel);margin-top:2.5rem}
.cell{background:var(--crude);padding:1.75rem 1.5rem}
.cell-k{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;color:var(--amber);text-transform:uppercase}
.cell h4{font-size:1.125rem;margin:.85rem 0 .6rem}
.cell p{font-size:.875rem;color:var(--haze)}
@media (max-width:940px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.grid-3,.grid-4{grid-template-columns:1fr}}

/* Product ladder — rungs are tinted by the actual colour of the fraction. */
.ladder{margin-top:2.5rem;border:1px solid var(--steel)}
.rung{display:grid;grid-template-columns:6px 1fr auto;gap:1.5rem;align-items:center;padding:1.35rem 1.5rem;border-bottom:1px solid var(--steel)}
.rung:last-child{border-bottom:0}
.rung-swatch{align-self:stretch}
.rung h4{font-size:1.0625rem}
.rung p{font-size:.8125rem;color:var(--haze);margin-top:.3rem}
.rung-tag{font-family:var(--mono);font-size:.6875rem;color:var(--haze);letter-spacing:.08em;white-space:nowrap}
@media (max-width:640px){.rung{grid-template-columns:6px 1fr;gap:1rem}.rung-tag{grid-column:2;margin-top:.4rem}}

/* ── Phases ──────────────────────────────────────────────── */
.phases{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--steel);border:1px solid var(--steel);margin-top:2.5rem}
.phase{background:var(--crude);padding:1.75rem 1.4rem;position:relative}
.phase-n{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;color:var(--amber)}
.phase h4{font-size:1.0625rem;margin:.8rem 0 .55rem}
.phase p{font-size:.8125rem;color:var(--haze)}
@media (max-width:940px){.phases{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.phases{grid-template-columns:1fr}}

/* ── Tables ──────────────────────────────────────────────── */
.tw{overflow-x:auto;margin-top:2.5rem;border:1px solid var(--steel)}
table{width:100%;border-collapse:collapse;font-size:.875rem;min-width:640px}
th,td{padding:.85rem 1.1rem;text-align:left;border-bottom:1px solid var(--steel)}
thead th{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--amber);font-weight:500;background:var(--sump);
}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
td.rowh{color:var(--pale);font-weight:500}
tbody tr.sum td{background:var(--sump);font-weight:600;color:var(--pale)}
.neg{color:var(--rust)}
.pos{color:var(--green)}

/* ══ CALCULATOR ══════════════════════════════════════════ */
.calc{background:var(--sump);border-top:1px solid var(--steel);border-bottom:1px solid var(--steel)}
.calc-head{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:flex-end;justify-content:space-between}
.presets{display:flex;gap:1px;background:var(--steel);border:1px solid var(--steel)}
.preset{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;padding:.7rem 1.15rem;
  background:var(--sump);color:var(--haze);border:0;cursor:pointer;transition:background .16s,color .16s;
}
.preset:hover{background:var(--sump-2);color:var(--pale)}
.preset[aria-pressed="true"]{background:var(--amber);color:#12151B;font-weight:500}

/* Signature element, live. Widths are driven by the yield inputs. */
.balance{margin-top:2.75rem}
.balance-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.75rem}
.balance-title{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.balance-warn{font-family:var(--mono);font-size:.75rem;color:var(--rust)}
.balance-bar{
  display:flex;height:96px;margin-top:1rem;border:1px solid var(--steel);
  background:var(--crude);overflow:hidden;
}
.seg{
  display:flex;flex-direction:column;justify-content:flex-end;padding:.6rem .7rem;
  min-width:0;overflow:hidden;transition:flex-basis .45s cubic-bezier(.4,0,.2,1);
  border-right:1px solid rgba(15,18,24,.55);
}
.seg:last-child{border-right:0}
.seg-p{font-family:var(--mono);font-size:.8125rem;font-weight:600;line-height:1}
.seg-l{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.06em;text-transform:uppercase;
  margin-top:.3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85;
}
.seg-f1{background:var(--straw);color:#2A2008}
.seg-f2{background:var(--amber);color:#2A2008}
.seg-f3{background:var(--amber-deep);color:#F5E6C8}
.seg-loss{background:#20242D;color:var(--haze)}
.balance-foot{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;margin-top:.75rem;
  font-family:var(--mono);font-size:.6875rem;color:var(--haze);letter-spacing:.06em;
}

/* KPI strip */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--steel);border:1px solid var(--steel);margin-top:2.75rem}
.kpi{background:var(--crude);padding:1.4rem 1.1rem}
.kpi-l{font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--haze)}
.kpi-v{font-family:var(--mono);font-size:clamp(1.25rem,2.4vw,1.75rem);font-weight:500;color:var(--straw);margin-top:.5rem;line-height:1;font-variant-numeric:tabular-nums}
.kpi-v.neg{color:var(--rust)}
@media (max-width:1000px){.kpis{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.kpis{grid-template-columns:repeat(2,1fr)}}
/* Sits against the KPI strip so the caveat is never off-screen while numbers are. */
.kpi-note{
  border:1px solid var(--steel);border-top:0;background:var(--sump-2);
  padding:.85rem 1.1rem;font-family:var(--mono);font-size:.6875rem;line-height:1.6;
  letter-spacing:.02em;color:var(--haze)
}
.kpi-note b{color:var(--straw);font-weight:500}

/* Input panels */
.panels{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.75rem}
@media (max-width:1040px){.panels{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.panels{grid-template-columns:1fr}}
.panel{border:1px solid var(--steel);background:var(--crude)}
.panel>h4{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);font-weight:500;padding:1rem 1.25rem;border-bottom:1px solid var(--steel);background:var(--sump);
}
.panel-body{padding:.5rem 1.25rem 1.25rem}
.field{display:flex;align-items:center;gap:.75rem;padding:.55rem 0;border-bottom:1px solid rgba(43,50,63,.5)}
.field:last-child{border-bottom:0}
.field label{font-size:.8125rem;color:var(--haze);flex:1;min-width:0;cursor:pointer}
.field input{
  width:104px;flex:none;background:var(--sump-2);border:1px solid var(--steel);color:var(--pale);
  font-family:var(--mono);font-size:.8125rem;padding:.45rem .6rem;text-align:right;
  font-variant-numeric:tabular-nums;transition:border-color .16s;
}
.field input:hover{border-color:var(--steel-lit)}
.field input:focus{border-color:var(--amber);outline:none}
.field input.bad{border-color:var(--rust)}
.field .unit{font-family:var(--mono);font-size:.6875rem;color:var(--haze);width:38px;flex:none}
/* Firefox + WebKit: strip spinners, the mono alignment matters more */
.field input::-webkit-outer-spin-button,.field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.field input[type=number]{-moz-appearance:textfield}

.derived{
  display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0 0;margin-top:.4rem;
  border-top:1px solid var(--steel);font-family:var(--mono);font-size:.75rem;color:var(--haze);
}
.derived b{color:var(--straw);font-weight:500}

.sens{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--steel);border:1px solid var(--steel);margin-top:1.5rem}
.sens-c{background:var(--crude);padding:1.35rem 1.25rem}
.sens-l{font-size:.8125rem;color:var(--haze)}
.sens-v{font-family:var(--mono);font-size:1.375rem;color:var(--straw);margin-top:.45rem;font-variant-numeric:tabular-nums}
@media (max-width:640px){.sens{grid-template-columns:1fr}}

.note{
  font-size:.8125rem;color:var(--haze);margin-top:2rem;padding:1.1rem 1.35rem;
  border:1px solid var(--steel);border-left:2px solid var(--amber);background:var(--crude);max-width:88ch;
}

/* ── Form ────────────────────────────────────────────────── */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;margin-top:2.5rem;max-width:760px}
.fg{display:flex;flex-direction:column;gap:.45rem}
.fg.full{grid-column:1/-1}
.fg label{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--haze)}
.fg input,.fg select,.fg textarea{
  background:var(--sump);border:1px solid var(--steel);color:var(--pale);
  font-family:var(--sans);font-size:.9375rem;padding:.7rem .85rem;width:100%;
}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--amber);outline:none}
.fg textarea{resize:vertical;min-height:90px}
.consent{display:flex;gap:.7rem;align-items:flex-start;grid-column:1/-1;font-size:.8125rem;color:var(--haze)}
.consent input{width:auto;margin-top:.2rem;accent-color:var(--amber)}
.form-msg{grid-column:1/-1;font-family:var(--mono);font-size:.8125rem;padding:.85rem 1rem;border:1px solid var(--steel);display:none}
.form-msg.show{display:block}
.form-msg.ok{border-color:var(--green);color:var(--green)}
.form-msg.err{border-color:var(--rust);color:var(--rust)}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}

/* ── Footer ──────────────────────────────────────────────── */
footer{border-top:1px solid var(--steel);padding-block:3rem;font-size:.8125rem;color:var(--haze)}
.foot-top{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.disclaimer{margin-top:2.5rem;padding-top:1.75rem;border-top:1px solid var(--steel);max-width:80ch;font-size:.75rem;line-height:1.65}

/* ── Language switcher ───────────────────────────────────── */
.langs{display:flex;gap:1px;background:var(--steel);border:1px solid var(--steel);flex:none}
.langs a{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.34rem .55rem;background:var(--crude);color:var(--haze);text-decoration:none;
  transition:background .16s,color .16s;
}
.langs a:hover{background:var(--sump-2);color:var(--pale)}
/* Current language is a marker, not a link — styled as the pressed state. */
.langs [aria-current="page"]{background:var(--amber);color:#12151B;font-weight:500}
@media (max-width:420px){.confid{display:none}}