/* Delfrex / CRYONOMIC ROI calculator
   Palette locked to the Delfrex site: deep navy field, cyan signal, slate text. */

:root{
  --navy:#0A192F;
  --navy-2:#0E2138;
  --navy-3:#112240;
  --slate:#8892B0;
  --slate-dim:#5C6884;
  --light:#CCD6F6;
  --white:#E6F1FF;
  --cyan:#64FFDA;
  --cyan-dim:rgba(100,255,218,.14);
  --amber:#FFC46B;
  --rose:#FF7B72;
  --line:rgba(136,146,176,.20);
  --line-strong:rgba(100,255,218,.32);
  --radius:4px;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--light);
  background:
    radial-gradient(1100px 620px at 78% -12%, rgba(100,255,218,.075), transparent 62%),
    radial-gradient(760px 520px at 4% 4%, rgba(56,120,255,.09), transparent 60%),
    var(--navy);
  background-attachment:fixed;
  line-height:1.6;
  font-size:16px;
}
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px);
  background-size:100% 3px;
}
.wrap{width:min(1080px,100% - 2.5rem); margin-inline:auto; position:relative; z-index:1}

/* ── masthead ─────────────────────────────────────────────── */
.masthead{border-bottom:1px solid var(--line); background:rgba(10,25,47,.82); backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:20}
.masthead-in{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 0}
.logo{font-weight:800; letter-spacing:.2em; text-transform:uppercase; font-size:.94rem; color:var(--white)}
.logo span{display:block; font-size:.62rem; letter-spacing:.14em; font-weight:500; color:var(--slate-dim); margin-top:.18rem}

.currency-switch{display:flex; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.cur{appearance:none; border:0; background:transparent; color:var(--slate); font:600 .8rem/1 var(--mono);
  padding:.62rem .95rem; cursor:pointer; transition:background .18s, color .18s}
.cur:hover{color:var(--white)}
.cur.is-on{background:var(--cyan-dim); color:var(--cyan)}

/* ── intro ────────────────────────────────────────────────── */
.intro{padding:4rem 0 2.2rem; max-width:44rem}
.eyebrow{font:600 .7rem/1 var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--cyan); margin:0 0 1rem}
h1{font-size:clamp(2rem,5.2vw,3.35rem); line-height:1.05; letter-spacing:-.028em; font-weight:800;
  color:var(--white); margin:0 0 1.1rem}
.lede{color:var(--slate); font-size:1.03rem; margin:0; max-width:38rem}

/* ── step rail ────────────────────────────────────────────── */
.steps{list-style:none; display:flex; gap:.4rem; padding:0; margin:0 0 1.4rem; flex-wrap:wrap; counter-reset:s}
.step{counter-increment:s; flex:1 1 9rem; border-top:2px solid var(--line); padding-top:.6rem;
  font-size:.74rem; color:var(--slate-dim); letter-spacing:.04em; transition:color .2s, border-color .2s}
.step::before{content:counter(s,decimal-leading-zero); font-family:var(--mono); font-size:.68rem; display:block; margin-bottom:.15rem}
.step.is-on{border-top-color:var(--cyan); color:var(--cyan)}
.step.is-done{border-top-color:var(--slate-dim); color:var(--slate)}

/* ── cards ────────────────────────────────────────────────── */
.card{
  background:linear-gradient(160deg, rgba(17,34,64,.82), rgba(10,25,47,.62));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(1.4rem,3.4vw,2.3rem);
  box-shadow:0 18px 48px -30px rgba(0,0,0,.9);
}
.panel{display:none}
.panel.is-on{display:block; animation:rise .34s cubic-bezier(.22,.7,.3,1)}
@keyframes rise{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}}
.panel-title{font-size:1.32rem; font-weight:700; color:var(--white); margin:0 0 .3rem; letter-spacing:-.012em}
.panel-note{color:var(--slate); font-size:.88rem; margin:0 0 1.7rem; max-width:44rem}

/* ── form ─────────────────────────────────────────────────── */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr)); gap:1.15rem 1.4rem}
.field{display:flex; flex-direction:column; gap:.42rem; min-width:0}
.field-wide{grid-column:1/-1}
.label{font-size:.79rem; font-weight:600; color:var(--light); letter-spacing:.012em}
.hint{font-size:.72rem; color:var(--slate-dim); line-height:1.45}

input[type=text],input[type=email],input[type=tel],input[type=number],select{
  width:100%; font:500 .92rem var(--sans); color:var(--white);
  background:rgba(10,25,47,.75); border:1px solid var(--line); border-radius:var(--radius);
  padding:.66rem .78rem; transition:border-color .16s, box-shadow .16s;
}
input[type=number]{font-family:var(--mono)}
select{appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--slate) 50%),linear-gradient(135deg,var(--slate) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:2.1rem}
select option{background:var(--navy-3); color:var(--white)}
input:focus-visible,select:focus-visible,button:focus-visible{
  outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px var(--cyan-dim)}
input::placeholder{color:var(--slate-dim)}

.input-unit{display:flex; align-items:center; gap:.5rem}
.input-unit em{font:500 .76rem var(--mono); color:var(--slate-dim); font-style:normal; white-space:nowrap}
.input-unit input{flex:1 1 auto}

.checkline{display:flex; align-items:flex-start; gap:.6rem; font-size:.83rem; color:var(--slate); cursor:pointer; line-height:1.5}
.checkline input{margin-top:.22rem; accent-color:var(--cyan); width:1rem; height:1rem; flex:none}

/* ── buttons ──────────────────────────────────────────────── */
.actions{display:flex; gap:.7rem; margin-top:1.9rem; flex-wrap:wrap}
.btn{font:600 .87rem var(--sans); padding:.78rem 1.5rem; border-radius:var(--radius); cursor:pointer;
  border:1px solid transparent; transition:transform .12s, background .18s, color .18s, border-color .18s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--cyan); color:var(--navy); font-weight:700}
.btn-primary:hover{background:#7dffe3}
.btn-primary[disabled]{opacity:.5; cursor:progress}
.btn-ghost{background:transparent; color:var(--cyan); border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--cyan-dim)}

/* ── SIGNATURE: the payback band meter ────────────────────── */
.verdict{margin-bottom:2rem}
.verdict-k{font:600 .7rem/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--slate-dim); margin:0 0 .7rem}
.verdict-v{font-size:clamp(1.85rem,4.6vw,2.9rem); font-weight:800; letter-spacing:-.03em; color:var(--cyan);
  line-height:1.05; margin:0 0 1.1rem}
.verdict-v.tone-moderate,.verdict-v.tone-long{color:var(--amber)}
.verdict-v.tone-poor{color:var(--rose)}

.meter{display:flex; gap:3px; margin:0 0 .55rem}
.meter i{flex:1; height:8px; background:rgba(136,146,176,.16); border-radius:1px; transition:background .5s ease, box-shadow .5s ease}
.meter i.lit{background:var(--cyan); box-shadow:0 0 14px rgba(100,255,218,.42)}
.meter i.lit.warm{background:var(--amber); box-shadow:0 0 14px rgba(255,196,107,.35)}
.meter i.lit.hot{background:var(--rose); box-shadow:0 0 14px rgba(255,123,114,.32)}
.meter-scale{display:flex; justify-content:space-between; font:500 .64rem var(--mono); color:var(--slate-dim);
  letter-spacing:.06em; margin-bottom:1.4rem}

.fit{border-left:2px solid var(--cyan); padding:.1rem 0 .1rem 1rem; margin:0 0 2rem}
.fit h3{margin:0 0 .3rem; font-size:1.02rem; color:var(--white); font-weight:700}
.fit p{margin:0; color:var(--slate); font-size:.9rem}
.fit.level-moderate{border-left-color:var(--amber)}
.fit.level-poor{border-left-color:var(--rose)}

/* ── result blocks ────────────────────────────────────────── */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:2rem}
.stat{background:var(--navy-2); padding:1.15rem 1.25rem}
.stat .k{font:600 .66rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--slate-dim)}
.stat .v{font-family:var(--mono); font-size:1.22rem; font-weight:700; color:var(--white); margin-top:.5rem; line-height:1.25}
.stat .n{font-size:.72rem; color:var(--slate-dim); margin-top:.35rem}

.blocktitle{font:600 .7rem/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--cyan);
  margin:2.2rem 0 .9rem; padding-bottom:.55rem; border-bottom:1px solid var(--line)}

.bars{display:flex; flex-direction:column; gap:.85rem}
.bar-row{display:grid; grid-template-columns:1fr auto; gap:.15rem .9rem; align-items:baseline}
.bar-label{font-size:.87rem; color:var(--light)}
.bar-amt{font-family:var(--mono); font-size:.87rem; color:var(--cyan); white-space:nowrap}
.bar-track{grid-column:1/-1; height:4px; background:rgba(136,146,176,.14); border-radius:2px; overflow:hidden}
.bar-fill{height:100%; background:linear-gradient(90deg,var(--cyan),rgba(100,255,218,.35)); width:0; transition:width .8s cubic-bezier(.2,.7,.3,1)}

.rowlist{border-top:1px solid var(--line)}
.rowlist div{display:flex; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--line); font-size:.88rem}
.rowlist span:first-child{color:var(--slate)}
.rowlist span:last-child{font-family:var(--mono); color:var(--light); text-align:right}

.callout{background:rgba(100,255,218,.05); border:1px solid var(--line-strong); border-radius:var(--radius);
  padding:1.05rem 1.2rem; font-size:.89rem; color:var(--light); margin-top:1rem}
.callout strong{color:var(--cyan)}

.assumed{font-size:.82rem; color:var(--slate); margin-top:1rem}
.assumed ul{margin:.5rem 0 0; padding-left:1.1rem}
.assumed li{margin:.15rem 0}

/* ── withheld figures ─────────────────────────────────────── */
/* Released with the written report. The server sends the currency or unit and
   the asterisks only, so there is no value here to select, copy or inspect. */
.held{font-family:var(--mono); letter-spacing:.14em; color:var(--slate); opacity:.75; user-select:none}
.bar-amt.held{color:var(--slate)}
.callout strong.held{color:var(--slate)}
.bar-track.locked{background:repeating-linear-gradient(90deg,
  rgba(136,146,176,.22) 0 6px, transparent 6px 12px)}

.lockednote{font-size:.78rem; color:var(--slate); margin:.75rem 0 0; padding-left:.7rem;
  border-left:2px solid var(--line-strong); line-height:1.55}

.estimate-note{margin:2.2rem 0 0; padding-top:1.1rem; border-top:1px solid var(--line);
  font-size:.78rem; line-height:1.65; color:var(--slate)}

/* ── lead panel ───────────────────────────────────────────── */
.panel-lead{margin-top:1.5rem; border-color:var(--line-strong)}
.consent{margin-top:1.6rem; display:flex; flex-direction:column; gap:.85rem;
  border-top:1px solid var(--line); padding-top:1.4rem}
.fineprint{font-size:.72rem; color:var(--slate-dim); margin:.2rem 0 0; line-height:1.5}
.leadmsg{margin-top:1rem; font-size:.88rem}
.leadmsg.ok{color:var(--cyan)}
.leadmsg.err{color:var(--rose)}
.field.has-error input,.field.has-error select{border-color:var(--rose)}
.err-text{font-size:.72rem; color:var(--rose)}
.checkline.has-error .err-text{display:block; margin-top:.3rem}
.opt{font-weight:400; text-transform:none; letter-spacing:0; color:var(--slate-dim); font-size:.72rem}

.footnote{font-size:.74rem; color:var(--slate-dim); margin:2.2rem 0 3rem; max-width:52rem; line-height:1.55}

.foot{border-top:1px solid var(--line); margin-top:2rem}
.foot .wrap{display:flex; justify-content:space-between; padding:1.4rem 0; font-size:.74rem; color:var(--slate-dim)}
.foot a{color:var(--slate-dim); text-decoration:none}
.foot a:hover{color:var(--cyan)}

@media (max-width:640px){
  .intro{padding:2.6rem 0 1.6rem}
  .steps .step span{display:none}
  .step{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}