/* ROI calculator page. Loaded only when the page has an roi-calc block. */
.roi-hero{padding-bottom:1.6rem}
.roi-head{text-align:center}
.roi-head h1{margin-inline:auto;max-width:22ch}
.roi-head .lead{margin-inline:auto;max-width:60ch}
section.blk.roi{padding-top:1.5rem;overflow:clip}
.roi-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:1.6rem;align-items:start}
.roi-panel{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-l);padding:2rem;box-shadow:0 24px 48px -36px var(--shadow-ink)}
.roi-inputs h2{font-size:var(--fs-h4);line-height:var(--lh-h4);margin:1.6rem 0 .3rem}
.roi-inputs .hint{color:var(--graphite);margin:0 0 .6rem;font-size:.95rem}
.roi-toggles{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem}
.roi-tg{display:inline-flex;border:1px solid var(--hairline);border-radius:var(--radius-m);padding:.2rem;background:var(--mist)}
.roi-tg .ptog{border:0;background:transparent;font:inherit;font-weight:600;font-size:.85rem;color:var(--graphite);padding:.5rem .9rem;border-radius:10px;cursor:pointer}
.roi-tg .ptog.on{background:var(--paper);color:var(--violet-deep);box-shadow:0 1px 4px rgba(18,14,53,.14)}
.roi-field{margin-top:1.5rem}
.roi-field label{display:block;font-family:var(--display);font-weight:600;color:var(--plum);margin-bottom:.5rem}
.roi-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center}
.roi-num{display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap;font-weight:600;color:var(--plum)}
.roi-num small{font-weight:400;color:var(--graphite);font-size:.8rem}
.roi-num input{width:6.2rem;font:inherit;font-weight:600;color:var(--plum);padding:.45rem .6rem;border:1px solid var(--hairline);border-radius:var(--radius-s);background:var(--paper);text-align:right}
.roi-num input:focus-visible,.roi input[type=range]:focus-visible{outline:2px solid var(--violet-bright);outline-offset:2px}
.roi-field .note{color:var(--graphite);font-size:.85rem;margin:.55rem 0 0}
.roi-field .note.assume{background:var(--mist);border-left:3px solid var(--violet-bright);padding:.6rem .8rem;border-radius:0 var(--radius-s) var(--radius-s) 0}
.roi input[type=range]{--fill:50%;-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;background:linear-gradient(90deg,var(--violet-bright) var(--fill),var(--hairline) var(--fill));cursor:pointer}
.roi input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--paper);border:3px solid var(--violet);box-shadow:0 2px 8px rgba(18,14,53,.3)}
.roi input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--paper);border:3px solid var(--violet)}
.roi-result{position:relative;overflow:hidden;color:#fff;background:var(--grad-band);border:0;position:sticky;top:6.5rem}
.roi-result .aur span{position:absolute;border-radius:50%;filter:blur(60px);opacity:.45;pointer-events:none}
.roi-result .a1{width:18rem;height:18rem;right:-6rem;top:-6rem;background:var(--ic-cyan)}
.roi-result .a2{width:16rem;height:16rem;left:-6rem;bottom:-7rem;background:var(--ic-violet-bright)}
.roi-result>*:not(.aur){position:relative}
.roi-eyebrow{font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:rgba(255,255,255,.75);margin:0}
.roi-result .bigline{font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,1rem + 1.2vw,1.8rem);line-height:1.3;margin:.7rem 0 0}
.roi-result .bignum{color:var(--lavender);white-space:nowrap}
.roi-chips{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.5rem}
.roi-chip{display:flex;flex-direction:column;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-m);padding:.9rem 1.2rem}
.roi-chip .k{font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.roi-chip .n{font-family:var(--display);font-weight:700;font-size:1.7rem;font-variant-numeric:tabular-nums;margin-top:.2rem}
.roi-chip .n small{font-size:.8rem;font-weight:500;color:rgba(255,255,255,.75)}
.roi-result .ledger{margin-top:1.4rem;border-top:1px solid rgba(255,255,255,.18)}
.roi-result .row{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:.95rem;font-variant-numeric:tabular-nums}
.roi-result .row[hidden]{display:none}
.roi-result .row span:last-child{font-weight:600;text-align:right}
.roi-result .row.tot{font-weight:700;font-size:1.05rem}
.roi-small{font-size:.8rem;color:rgba(255,255,255,.75);margin:1rem 0 0}
.roi-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;margin-top:1.4rem}
.roi-link{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.roi-working{margin-top:1.6rem;background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-m);padding:1.1rem 1.3rem}
.roi-working summary{font-family:var(--display);font-weight:600;color:var(--plum);cursor:pointer}
.roi-working .body p{color:var(--graphite);font-size:.95rem;margin:.8rem 0 0;max-width:70ch}
@media (max-width:900px){
  .roi-grid{grid-template-columns:minmax(0,1fr)}
  .roi-result{position:static}
}
@media (max-width:520px){
  .roi-panel{padding:1.3rem}
  .roi-row{grid-template-columns:minmax(0,1fr)}
  .roi-num{justify-content:flex-start}
}

/* Rupee ladder and spend comparison */
.roi-extra .sec-head{max-width:46rem}
.roi-ladder{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem;margin-top:3rem;align-items:start}
.rung{display:flex;flex-direction:column;align-items:center;text-align:center}
.rung .stalk{position:relative;width:100%;max-width:5.5rem;display:flex;flex-direction:column;justify-content:flex-end;height:13rem}
/* The ladder is static: bars render at their final size, nothing grows, loops or slides in. */
.rung .bar{flex:none;flex-direction:row;position:relative;width:100%;height:var(--h);min-height:2.4rem;border-radius:14px 14px 6px 6px;background:linear-gradient(180deg,rgba(198,191,214,.55),rgba(198,191,214,.9));display:flex;align-items:flex-start;justify-content:center}
.rung .art{position:relative;z-index:1;width:44px;height:44px;margin-top:.7rem;color:var(--plum)}
.rung .art svg{width:100%;height:100%}
.rung .cost{font-family:var(--display);font-weight:700;font-size:1.35rem;letter-spacing:-.02em;line-height:1;margin:.9rem 0 .1rem;color:var(--plum);font-variant-numeric:tabular-nums}
.rung .name{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);margin-top:.8rem;line-height:1.5;min-height:2.4em;display:flex;align-items:center}
.rung.win .cost{background:var(--grad-iris);background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.rung.win .bar{background:var(--grad-cool);box-shadow:0 18px 40px -16px rgba(22,182,216,.65)}
.rung.win .art{color:#fff}
.rung.win .name{color:var(--violet-deep);font-weight:600}
.rung.win .flag{position:absolute;top:-2.2rem;left:50%;transform:translateX(-50%);font-size:.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--violet-deep);padding:.25rem .55rem;border-radius:6px;white-space:nowrap}
.roi-punch{margin-top:2.6rem;padding:1.4rem 1.6rem;border-radius:var(--radius-m);border:1px solid var(--v-border);background:linear-gradient(120deg,rgba(227,202,255,.4),rgba(224,240,255,.4));font-family:var(--display);font-weight:500;font-size:clamp(1.1rem,2.2vw,1.4rem);line-height:1.4}
.roi-punch b{color:var(--violet-deep);font-weight:700}
.roi-fine{color:var(--graphite);font-size:.85rem;margin:1rem 0 0;max-width:60rem}
.roi-spend{display:grid;gap:.8rem;margin-top:2.4rem}
.srow{display:grid;grid-template-columns:minmax(10rem,15rem) minmax(0,1fr) 7rem;gap:1.2rem;align-items:center;padding:.9rem 1.1rem;border:1px solid var(--hairline);border-radius:var(--radius-m);background:var(--paper)}
.srow.win{border-color:var(--v-border);background:var(--glass)}
.sname{font-family:var(--display);font-weight:600;color:var(--plum);line-height:1.25}
.sname small{display:block;font-family:inherit;font-weight:400;font-size:.8rem;color:var(--graphite);margin-top:.15rem}
.strack{height:12px;border-radius:99px;background:var(--mist);overflow:hidden}
.sbar{display:block;height:100%;width:0;border-radius:99px;background:rgba(198,191,214,.95);transition:width .7s cubic-bezier(.22,.7,.3,1)}
.srow.win .sbar{background:var(--grad-cool)}
.sval{font-family:var(--display);font-weight:700;color:var(--plum);text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:820px){
  .srow{grid-template-columns:minmax(0,1fr) auto;gap:.6rem 1rem}
  .strack{grid-column:1/-1;order:3}
}
@media (prefers-reduced-motion:reduce){.sbar{transition:none}}
.roi-titlecell .eyebrow{margin:0}.roi-titlecell h2{margin-top:.9rem}
.rung.short .art{width:28px;height:28px;margin-top:.3rem}

/* Narrow screens: the ladder turns on its side, one row per rung from cheapest to dearest, so it reads as
   one climb instead of wrapping into pairs. Kept last so it beats the .short rules above. */
@media (max-width:820px){
  .roi-ladder{grid-template-columns:minmax(0,1fr);gap:1.1rem;margin-top:2.4rem}
  .rung{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name cost" "stalk stalk";align-items:end;column-gap:1rem;row-gap:.4rem;text-align:left}
  .rung .name{grid-area:name;margin:0;min-height:0}
  .rung .cost{grid-area:cost;margin:0;font-size:1.15rem}
  .rung .stalk{grid-area:stalk;height:auto;max-width:none;flex-direction:row;justify-content:flex-start}
  .rung .bar{width:var(--h);height:2.6rem;min-height:0;min-width:2.6rem;border-radius:6px 14px 14px 6px;align-items:center;justify-content:flex-end;padding-right:.45rem;box-sizing:border-box}
  .roi-ladder .rung .art{width:24px;height:24px;margin:0}
  .rung.win .flag{top:50%;left:calc(100% + .6rem);transform:translateY(-50%)}
}