/* Other 80 ROI Calculator styles. Everything is scoped under .o80c so your theme isn't affected. */
.o80c{
  /* Layout: sliders on the left, a postcard-white results card on the right; stacks on narrow screens */
  --o80c-ink:#17243a;        /* postmark-ink */
  --o80c-coral:#e86445;      /* cancel-coral: actions + spot details */
  --o80c-paper:#f5f0e8;      /* warm-paper */
  --o80c-white:#fffcf7;      /* postcard-white */
  --o80c-peach:#f1d9ca;      /* peach-stamp */
  --o80c-line:#e4ddd3;       /* line */
  --o80c-line-dark:#526071;  /* line-dark */
  --o80c-soft:rgba(23,36,58,.72); /* secondary text, ink at 72% */
  --o80c-serif:Georgia,"Times New Roman",serif;
  --o80c-sans:Arial,Inter,Helvetica,sans-serif;
  --o80c-shadow:0 12px 32px rgba(23,36,58,.08);
  --o80c-sticky-top:24px; /* raise if your site header is sticky */
  container-type:inline-size;
  color:var(--o80c-ink);
  font-family:var(--o80c-sans);
  font-size:16px;
  line-height:1.55;
  text-align:left;
  -webkit-text-size-adjust:100%;
}
.o80c *,.o80c *::before,.o80c *::after{box-sizing:border-box}
.o80c p,.o80c h2,.o80c h3{margin:0;padding:0}

.o80c .o80c__eyebrow{font-family:var(--o80c-sans);font-size:12px;line-height:16px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--o80c-ink)}

.o80c .o80c__head{display:grid;gap:16px;margin-bottom:24px;max-width:640px}
.o80c .o80c__title{font-family:var(--o80c-serif);font-size:30px;line-height:1.15;font-weight:400;letter-spacing:0;color:var(--o80c-ink);text-wrap:balance}
.o80c .o80c__title em{font-style:italic}
.o80c .o80c__lede{font-size:18px;line-height:1.6;color:var(--o80c-ink)}

/* Presets: secondary buttons */
.o80c .o80c__presets{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:32px}
.o80c .o80c__presets .o80c__eyebrow{margin-right:8px}
.o80c .o80c__preset{
  appearance:none;-webkit-appearance:none;margin:0;
  font-family:var(--o80c-sans);font-size:15px;line-height:20px;font-weight:700;letter-spacing:0;text-transform:none;
  min-height:44px;height:auto;width:auto;padding:12px 16px;border-radius:8px;border:1px solid var(--o80c-ink);
  background:transparent;color:var(--o80c-ink);cursor:pointer;box-shadow:none;
  transition:background-color .15s,color .15s;
}
.o80c .o80c__preset:hover{background:var(--o80c-white);color:var(--o80c-ink)}
.o80c .o80c__preset[aria-pressed="true"]{background:var(--o80c-ink);color:var(--o80c-white)}
.o80c .o80c__preset:focus-visible,.o80c .o80c__reset:focus-visible{outline:2px solid var(--o80c-coral);outline-offset:2px}

/* Grid */
.o80c .o80c__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start}
@container (min-width:560px){
  .o80c .o80c__title{font-size:36px}
}
@container (min-width:760px){
  .o80c .o80c__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px}
  .o80c .o80c__card{position:sticky;top:var(--o80c-sticky-top)}
}

/* Inputs */
.o80c .o80c__inputs{display:grid;min-width:0}
.o80c .o80c__inputs-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:8px;border-bottom:1px solid var(--o80c-ink)}
.o80c .o80c__reset{
  appearance:none;-webkit-appearance:none;margin:0;padding:8px 0;border:0;background:none;box-shadow:none;
  font-family:var(--o80c-sans);font-size:15px;line-height:20px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--o80c-ink);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;width:auto;height:auto;min-height:0;
}
.o80c .o80c__reset:hover{background:none;color:var(--o80c-ink);text-decoration-color:var(--o80c-coral)}
.o80c .o80c__field{display:grid;gap:8px;padding:16px 0;border-bottom:1px solid var(--o80c-line)}
.o80c .o80c__fhead{display:flex;justify-content:space-between;align-items:center;gap:16px}
.o80c .o80c__label{display:grid;gap:2px;font-size:16px;font-weight:700;line-height:1.3;color:var(--o80c-ink);margin:0;cursor:default}
.o80c .o80c__hint{font-size:14px;font-weight:400;line-height:1.4;color:var(--o80c-soft)}
.o80c .o80c__box{
  flex:0 0 auto;display:flex;align-items:center;gap:2px;
  background:var(--o80c-white);border:1px solid var(--o80c-line);border-radius:8px;
  padding:0 12px;height:44px;min-width:120px;max-width:152px;
  font-family:var(--o80c-sans);font-size:16px;color:var(--o80c-ink);
}
.o80c .o80c__box:focus-within{border-color:var(--o80c-ink);box-shadow:0 0 0 1px var(--o80c-ink)}
.o80c .o80c__aff{color:var(--o80c-soft);font-size:16px}
.o80c .o80c__num,
.o80c input.o80c__num[type="text"]{
  appearance:none;-webkit-appearance:none;
  flex:1 1 auto;min-width:0;width:100%;height:42px;margin:0;padding:0;
  border:0;border-radius:0;background:transparent;box-shadow:none;outline:none;
  font-family:var(--o80c-sans);font-size:16px;font-weight:700;color:var(--o80c-ink);text-align:right;
  font-variant-numeric:tabular-nums;line-height:42px;
}
.o80c .o80c__note{font-size:14px;color:var(--o80c-soft)}

/* Range sliders */
.o80c .o80c__range{
  -webkit-appearance:none;appearance:none;display:block;
  width:100%;height:32px;margin:0;padding:0;border:0;background:transparent;cursor:pointer;
  --o80c-p:50%;
}
.o80c .o80c__range:focus{outline:none}
.o80c .o80c__range::-webkit-slider-runnable-track{
  height:6px;border-radius:3px;
  background:linear-gradient(to right,var(--o80c-ink) 0,var(--o80c-ink) var(--o80c-p),var(--o80c-line) var(--o80c-p),var(--o80c-line) 100%);
}
.o80c .o80c__range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;
  background:var(--o80c-coral);border:3px solid var(--o80c-white);box-shadow:0 0 0 1px var(--o80c-ink);
}
.o80c .o80c__range::-moz-range-track{height:6px;border-radius:3px;background:var(--o80c-line);border:0}
.o80c .o80c__range::-moz-range-progress{height:6px;border-radius:3px;background:var(--o80c-ink)}
.o80c .o80c__range::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;background:var(--o80c-coral);
  border:3px solid var(--o80c-white);box-shadow:0 0 0 1px var(--o80c-ink);
}
.o80c .o80c__range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 1px var(--o80c-ink),0 0 0 5px rgba(232,100,69,.3)}
.o80c .o80c__range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 1px var(--o80c-ink),0 0 0 5px rgba(232,100,69,.3)}

/* Results card */
.o80c .o80c__card{
  position:relative;
  background:var(--o80c-white);color:var(--o80c-ink);
  border:1px solid var(--o80c-line);border-radius:12px;
  padding:24px;min-width:0;
  box-shadow:var(--o80c-shadow);
  display:grid;gap:24px;
}
@container (min-width:420px){.o80c .o80c__card{padding:32px}}
.o80c .o80c__card-top{display:grid;gap:8px;padding-right:56px}
.o80c .o80c__net-label{font-size:16px;font-weight:700}
.o80c .o80c__net{font-family:var(--o80c-serif);font-size:40px;line-height:1.1;font-weight:400;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
@container (min-width:420px){.o80c .o80c__net{font-size:48px}}
.o80c .o80c__roi{
  justify-self:start;display:inline-flex;align-items:baseline;gap:8px;
  padding:4px 12px;border-radius:999px;background:var(--o80c-peach);color:var(--o80c-ink);
  font-size:15px;line-height:20px;font-weight:700;font-variant-numeric:tabular-nums;
}
.o80c .o80c__roi small{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.o80c .o80c__roi.is-neg{background:var(--o80c-coral)}

/* Decorative postal detail: a small perforated stamp (one per card, kept clear of the text) */
.o80c .o80c__stamp{
  position:absolute;top:20px;right:20px;width:36px;height:44px;
  background:var(--o80c-peach);border:4px dotted var(--o80c-white);
  box-shadow:inset 0 0 0 3px var(--o80c-peach),inset 0 0 0 4px rgba(23,36,58,.18);
  transform:rotate(4deg);pointer-events:none;
}
@container (min-width:420px){.o80c .o80c__stamp{top:24px;right:24px}}

/* Ledger */
.o80c .o80c__ledger{display:grid;margin:0;border-top:1px solid var(--o80c-ink)}
.o80c .o80c__row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:8px 0;border-bottom:1px solid var(--o80c-line)}
.o80c .o80c__row[hidden]{display:none}
.o80c .o80c__row dt{font-size:16px;font-weight:400;margin:0;padding:0}
.o80c .o80c__row dd{margin:0;padding:0;font-weight:400;font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap}
.o80c .o80c__row.is-total{border-bottom:0;border-top:1px solid var(--o80c-ink);margin-top:-1px;padding-top:12px}
.o80c .o80c__row.is-total dt,.o80c .o80c__row.is-total dd{font-weight:700}
.o80c ul,.o80c dl{list-style:none}

/* Bars */
.o80c .o80c__bars{display:grid;gap:16px}
.o80c .o80c__barrow{display:grid;gap:8px}
.o80c .o80c__barhead{display:flex;justify-content:space-between;gap:16px;font-size:14px;line-height:1.4}
.o80c .o80c__barhead b{font-weight:700;font-variant-numeric:tabular-nums}
.o80c .o80c__track{height:10px;background:var(--o80c-paper);border-radius:999px;overflow:hidden}
.o80c .o80c__fill{height:100%;width:0;border-radius:999px;background:var(--o80c-ink);transition:width .25s ease}
.o80c .o80c__fill.is-cost{background:var(--o80c-coral)}

/* Cost per sale */
.o80c .o80c__stats{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:16px;border-top:1px solid var(--o80c-line)}
.o80c .o80c__stats b{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}

/* Break-even: ink panel */
.o80c .o80c__bep{display:grid;gap:8px;padding:24px;border-radius:12px;background:var(--o80c-ink);color:var(--o80c-white)}
.o80c .o80c__bep .o80c__eyebrow{color:var(--o80c-white)}
.o80c .o80c__bep-main{font-family:var(--o80c-serif);font-size:26px;line-height:1.2;font-weight:400;text-wrap:balance}
.o80c .o80c__bep-main b{font-weight:400;font-style:italic;color:var(--o80c-peach);white-space:nowrap}
.o80c .o80c__bep-sub{font-size:16px;line-height:1.55}
.o80c .o80c__bep-sub b{font-weight:700;color:var(--o80c-peach);font-variant-numeric:tabular-nums}
@container (min-width:420px){.o80c .o80c__bep-main{font-size:30px}}

.o80c .o80c__fine{margin-top:16px;font-size:14px;color:var(--o80c-soft)}

@media (prefers-reduced-motion:reduce){.o80c .o80c__fill,.o80c .o80c__preset{transition:none}}

/* Panel: gives the calculator its own background, padding and rounded corners so it never touches the page edges.
   Turn off with [o80_calculator panel="no"]. */
.o80c.o80c--panel{background:var(--o80c-paper);border-radius:18px;padding:32px 20px;margin:32px 0}
@media (min-width:768px){.o80c.o80c--panel{padding:48px}}
@media (min-width:1100px){.o80c.o80c--panel{padding:64px}}