/* The ROI calculator. Built on the tokens already in site.css: no new font, no new hue.
   Cash lines carry the saturated brand green because they are commission dollars. The
   hours lines carry a desaturated sage from the same family because they are capacity, not
   money in the bank. One hue, two weights, and the difference is the argument. */

.roi-wrap{max-width:1180px;margin:0 auto;padding:0 28px}

.roi-note{font-size:14px;color:#8C958F;line-height:1.6}
.roi-note strong{color:#C7D0CA;font-weight:600}

/* ------------------------------------------------------------------ plan selector */

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 12px}
.plan{position:relative;display:block;margin:0}
/* A real, visible radio at 26px, sitting beside the tier name.
 *
 * It was previously an invisible input stretched over the whole card. That looked clever and
 * was not: elementFromPoint reported the input on top while the browser dispatched the click
 * to the paragraph underneath it, so the cards stopped selecting. The native control is its
 * own 26px target, it needs no stacking trick, and it is what a screen reader and a keyboard
 * already understand. The whole card stays clickable through a handler in roi.js. */
.pc-top{display:flex;align-items:center;gap:11px;margin-bottom:2px}
/* appearance:none because a native radio paints a heavy white disc on a dark card, and
   accent-color only reaches the checked state. This is still a real input: 26px, focusable,
   keyboard-operable, its own hit target. The earlier breakage came from stretching an
   invisible input over the whole card, not from styling one. */
.plan input[type=radio]{appearance:none;-webkit-appearance:none;flex:none;
  width:26px;height:26px;margin:0;cursor:pointer;display:grid;place-items:center;
  border:1.5px solid rgba(255,255,255,.30);border-radius:50%;background:rgba(255,255,255,.04);
  transition:border-color .16s,background .16s}
.plan input[type=radio]::before{content:"";width:10px;height:10px;border-radius:50%;
  background:#fff;transform:scale(0);transition:transform .16s ease}
.plan input[type=radio]:hover{border-color:rgba(127,209,151,.65)}
.plan input[type=radio]:checked{border-color:#7FD197;background:#2F9E44}
.plan input[type=radio]:checked::before{transform:scale(1)}
.plan input[type=radio]:focus-visible{outline:3px solid #7FD197;outline-offset:3px;
  border-radius:50%}
/* A column, so the live figures sit on the bottom edge of every card whatever length the
   list above them runs to. The card is a <div> and no longer wrapped in the <label>: a
   label may only contain phrasing content, and these carry real lists. The radio still owns
   the whole card as a hit area, and the tier name is the <label for>. */
.plan .card{display:flex;flex-direction:column;height:100%;
  border:1.5px solid rgba(255,255,255,.10);
  border-radius:16px;background:rgba(255,255,255,.035);padding:22px 22px 20px;cursor:pointer;
  transition:border-color .16s,background .16s,transform .16s}
.plan:hover .card{border-color:rgba(127,209,151,.45);transform:translateY(-2px)}
.plan:has(input:checked) .card{border-color:#2F9E44;background:rgba(47,158,68,.11);
  box-shadow:0 10px 34px rgba(26,125,54,.20),inset 0 1px 1px rgba(255,255,255,.07)}
.plan-name{font-family:var(--display);font-size:19px;font-weight:700;color:#F2F5F3;
  cursor:pointer}
.plan-price{display:block;margin-top:10px;font-family:var(--display);font-size:27px;font-weight:700;color:#7FD197;
  letter-spacing:-.02em;line-height:1.1}
.plan-price small{display:block;font-family:var(--sans);font-size:13px;font-weight:500;
  color:#8C958F;letter-spacing:0;margin-top:4px}
.plan-what{display:block;margin-top:12px;font-size:14.5px;color:#B8C0BB;line-height:1.55}

.pc-eyebrow{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:#7FD197;margin-bottom:10px}
.pc-heads{margin-top:18px;padding-top:15px;border-top:1px solid rgba(255,255,255,.10);
  font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.02em;color:#E6EDE9}
.pc-list{list-style:none;margin:11px 0 0;padding:0;display:grid;gap:11px}
.pc-list li{position:relative;padding-left:25px;font-size:14px;line-height:1.55;color:#9AA39D}
.pc-list li b{color:#E6EDE9;font-weight:600}
/* The tick is drawn rather than shipped as an image so it inherits the accent and costs no
   request. Sized off the line box so it stays on the first line as the text wraps. */
.pc-list li::before{content:"";position:absolute;left:0;top:5px;width:15px;height:9px;
  border-left:2.2px solid #7FD197;border-bottom:2.2px solid #7FD197;
  transform:rotate(-45deg) scale(.86);transform-origin:center}

/* The whole point of the redesign: the price stops being an abstract number and sits beside
   what this agency's own inputs say the tier models. Both figures come from the same
   calculateROI call as the panel below, so the card cannot drift from the result. */
.pc-live{margin-top:auto;padding-top:16px;display:grid;grid-template-columns:1fr 1fr auto;
  gap:10px;align-items:end}
.pc-live>div{min-width:0}
.pc-live dt{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:#7F8A83;
  font-family:var(--display);font-weight:600;margin-bottom:3px}
.pc-live dd{font-family:var(--display);font-size:17px;font-weight:700;color:#E6EDE9;
  letter-spacing:-.01em;line-height:1.15;word-break:break-word}
.pc-live>div:last-child dd{color:#7FD197;font-size:19px}
.plan .card .pc-live{border-top:1px solid rgba(255,255,255,.10)}
.plan:has(input:checked) .pc-live{border-top:1px solid rgba(127,209,151,.30)}
.pc-live[data-empty="true"] dd{color:#7F8A83;font-size:14px}

.pc-custom{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.10);
  font-family:var(--display);font-size:14.5px;font-weight:600;color:#7FD197;line-height:1.45}

/* ------------------------------------------------- problem and plan bands (SB7) */

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.pain,.step{border:1px solid rgba(255,255,255,.09);border-radius:16px;
  background:rgba(255,255,255,.035);padding:22px}
.pain h3,.step h3{font-size:17px;font-weight:700;color:#F2F5F3;margin-bottom:9px}
.pain p,.step p{font-size:14.5px;color:#9AA39D;line-height:1.6}
.pain p+p,.step p+p{margin-top:10px}
.step{position:relative;padding-top:26px}
.step-n{position:absolute;top:-15px;left:22px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:#1A7D36;color:#fff;font-family:var(--display);
  font-weight:700;font-size:16px;border:2px solid #0D100E}
.step-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:9px}
.step-list li{position:relative;padding-left:24px;font-size:14px;line-height:1.55;color:#9AA39D}
.step-list li b{color:#E6EDE9;font-weight:600}
.step-list li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;
  border-radius:2px;background:#4FB86B}
.step-note{border-top:1px solid rgba(255,255,255,.10);padding-top:11px;font-size:13.5px;
  color:#B8C0BB}

/* Dark ink on the light accent rather than white on the mid green: white on #2F9E44
   measured 3.45:1 against a 4.5 floor. This pairing measures far above it and reads louder. */
.pc-flag{display:inline-block;margin-right:9px;padding:3px 9px;border-radius:999px;
  background:#7FD197;color:#08130C;font-size:10.5px;letter-spacing:.1em;vertical-align:middle}
.pc-list-tight li{padding-left:0}
.pc-list-tight li::before{display:none}

@media (max-width:900px){
  .grid3{grid-template-columns:1fr;gap:26px}
  .step{padding-top:28px}
}

/* ---------------------------------------------------------------------- the grid */

.roi-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:26px;align-items:start}
.roi-panel{border:1px solid rgba(255,255,255,.09);border-radius:16px;
  background:rgba(255,255,255,.035);padding:22px}
.roi-panel+.roi-panel{margin-top:18px}
.roi-panel h3{font-size:16.5px;font-weight:700;color:#F2F5F3;margin-bottom:4px}
.roi-panel .sub{font-size:14px;color:#8C958F;margin-bottom:16px;line-height:1.55}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.wide{grid-column:1 / -1}
.field label{font-size:13.5px;font-weight:500;color:#C7D0CA;line-height:1.45}
.field .hint{font-size:12.5px;color:#7F8A83;line-height:1.45}
.field input[type=number],.field select{width:100%;min-height:46px;font-family:var(--sans);
  font-size:16px;color:#F2F5F3;background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.13);border-radius:10px;padding:10px 13px;
  transition:border-color .15s,background .15s}
.field input[type=number]:hover,.field select:hover{border-color:rgba(255,255,255,.24)}
.field input[type=number]:focus,.field select:focus{outline:none;border-color:#7FD197;
  background:rgba(47,158,68,.10)}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237FD197' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
  padding-right:38px}
.money-in{position:relative}
.money-in span{position:absolute;left:13px;top:50%;transform:translateY(-50%);
  font-size:15px;color:#8C958F;pointer-events:none}
.money-in input{padding-left:27px}

/* Gold-only blocks are hidden with the hidden ATTRIBUTE, set from roi.js, not with a
   display rule keyed off the plan. They are a panel, two bar rows and two table rows, and a
   single class cannot carry the right display value for a div, a grid row and a <tr> at
   once. The attribute lets each element keep its own natural display when it comes back.
   The two-class selector is what makes it stick: a bare [hidden] loses to .bar-row on
   specificity, and the renewal and cross-sell lines stayed on screen under Silver. */
.gold-only[hidden]{display:none}

/* ------------------------------------------------------------------- assumptions */

.asm{display:grid;gap:15px}
.asm-row{display:grid;gap:7px}
.asm-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.asm-top label{font-size:13.5px;font-weight:500;color:#C7D0CA;line-height:1.45}
.asm-val{font-family:var(--display);font-size:15px;font-weight:700;color:#7FD197;
  white-space:nowrap;flex:none}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:26px;
  background:transparent;cursor:pointer;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;
  background:rgba(255,255,255,.13)}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:rgba(255,255,255,.13)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;
  height:24px;margin-top:-9px;border-radius:50%;background:#2F9E44;border:2.5px solid #C9EBD5;
  box-shadow:0 2px 8px rgba(0,0,0,.45)}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#2F9E44;
  border:2.5px solid #C9EBD5;box-shadow:0 2px 8px rgba(0,0,0,.45)}
input[type=range]:focus-visible{outline:3px solid #7FD197;outline-offset:4px;border-radius:6px}

.asm-reset{margin-top:16px;display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap}
.linkbtn{background:none;border:0;padding:8px 0;min-height:24px;cursor:pointer;
  font-family:var(--sans);font-size:14px;font-weight:600;color:#7FD197;
  text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:#A8E4BC}
.asm-state{font-size:13.5px;color:#8C958F}
.asm-state[data-moved="true"]{color:#E8C37A}

.illus{border:1px solid rgba(127,209,151,.26);background:rgba(47,158,68,.07);
  border-radius:12px;padding:14px 16px;font-size:14px;color:#B8C0BB;line-height:1.6}
.illus strong{color:#E6EDE9;font-weight:600}

/* ----------------------------------------------------------------- results panel */

.results{position:sticky;top:92px}
.res-card{border:1px solid rgba(127,209,151,.28);border-radius:18px;padding:24px 22px;
  background:linear-gradient(180deg,rgba(47,158,68,.13),rgba(255,255,255,.035) 42%);
  box-shadow:0 24px 60px rgba(0,0,0,.45),inset 0 1px 1px rgba(255,255,255,.07)}
.res-eyebrow{font-family:var(--display);font-weight:600;font-size:11.5px;letter-spacing:.15em;
  text-transform:uppercase;color:#7FD197;margin-bottom:9px}
.res-big{font-family:var(--display);font-size:44px;font-weight:700;letter-spacing:-.03em;
  color:#7FD197;line-height:1.02;word-break:break-word}
.res-sub{font-size:13.5px;color:#9AA39D;margin-top:8px;line-height:1.55}

.split{margin:18px 0 4px}
.split-bar{display:flex;height:10px;border-radius:5px;overflow:hidden;
  background:rgba(255,255,255,.08)}
.split-bar i{display:block;height:100%}
.split-cash{background:#4FB86B}
.split-cap{background:#7F9689}
.split-key{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:13px;color:#9AA39D}
.split-key b{color:#E6EDE9;font-weight:600}
.split-key i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:6px}

.tiles{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:20px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.09);border-radius:12px;
  overflow:hidden}
.tile{background:#0E1210;padding:13px 14px;min-width:0}
.tile dt{font-size:12.5px;color:#8C958F;line-height:1.4;margin-bottom:5px}
.tile dd{font-family:var(--display);font-size:19px;font-weight:700;color:#F2F5F3;
  letter-spacing:-.01em;line-height:1.15;word-break:break-word}
.tile.hi dd{color:#7FD197}
.tile[data-empty="true"] dd{color:#7F8A83;font-size:15px;font-weight:600}


.res-cta{margin-top:20px;display:grid;gap:10px}
.res-cta .btn{justify-content:center;width:100%}

/* --------------------------------------------------------------- platinum state */

.platinum-note{display:none;border:1px solid rgba(127,209,151,.3);border-radius:16px;
  background:rgba(47,158,68,.08);padding:24px}
.platinum-note h3{font-size:20px;margin-bottom:8px}
.platinum-note p{font-size:15.5px;color:#B8C0BB;line-height:1.6;max-width:52ch}
.platinum-note .cta-row{margin-top:18px}
.roi-page[data-plan="platinum"] .platinum-note{display:block}
.roi-page[data-plan="platinum"] .roi-grid,
.roi-page[data-plan="platinum"] .breakdown-sec,
.roi-page[data-plan="platinum"] .formula-sec{display:none}

/* ------------------------------------------------------------------- breakdown */

.bars{display:grid;gap:22px;margin-top:6px}
.bar-row{display:grid;gap:7px}
.bar-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.bar-name{font-size:14.5px;color:#C7D0CA;line-height:1.4}
.bar-name em{font-style:normal;color:#7F8A83;font-size:13px;display:block;margin-top:2px}
.bar-amt{font-family:var(--display);font-size:16px;font-weight:700;color:#F2F5F3;
  white-space:nowrap;flex:none}
.bar-track{height:9px;border-radius:5px;background:rgba(255,255,255,.07);overflow:hidden}
/* display:block is load-bearing. The fill is a <span>, and width and height do not apply to
   an inline box, so without this every bar rendered as an empty grey track while the dollar
   figures beside them were correct. A test that reads text cannot see that. */
.bar-fill{display:block;height:100%;border-radius:5px;transition:width .18s ease}
.bar-row[data-kind="cash"] .bar-fill{background:#4FB86B}
.bar-row[data-kind="cap"] .bar-fill{background:#7F9689}
.bar-row[data-zero="true"] .bar-amt{color:#7F8A83}

.legend{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:18px;font-size:13.5px;color:#9AA39D}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:10px;height:10px;border-radius:2px;flex:none}

/* --------------------------------------------------------------- formula table */

table.formulas code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13.5px;color:#B8C0BB;background:rgba(255,255,255,.05);padding:2px 6px;border-radius:5px;
  display:inline-block;line-height:1.7}
table.formulas td.num{font-family:var(--display);font-weight:700;color:#7FD197;
  white-space:nowrap;font-size:14.5px}

/* ---------------------------------------------------------------- phone summary */

.phonebar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:rgba(10,12,11,.94);backdrop-filter:saturate(160%) blur(14px);
  border-top:1px solid rgba(127,209,151,.3);padding:11px 18px calc(11px + env(safe-area-inset-bottom))}
.phonebar-in{display:flex;align-items:center;justify-content:space-between;gap:14px}
.phonebar dt{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#7FD197;
  font-family:var(--display);font-weight:600}
.phonebar dd{font-family:var(--display);font-size:23px;font-weight:700;color:#F2F5F3;
  line-height:1.1;margin-top:2px}
.phonebar .pb-roi{font-size:13.5px;color:#9AA39D;text-align:right;line-height:1.4;flex:none}
.phonebar .pb-roi b{display:block;font-family:var(--display);font-size:17px;color:#7FD197;font-weight:700}
/* Same specificity trap as the Gold blocks: the phone media query sets display:block, which
   outranks the hidden attribute, so the bar kept showing a benefit figure under Platinum. */
.phonebar[hidden]{display:none}

/* ------------------------------------------------------------------- lead form */

.leadform{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.leadform .field.wide{grid-column:1 / -1}
.leadform input[type=text],.leadform input[type=email],.leadform input[type=tel]{
  width:100%;min-height:46px;font-family:var(--sans);font-size:16px;color:#F2F5F3;
  background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.13);border-radius:10px;
  padding:10px 13px}
.leadform input:focus{outline:none;border-color:#7FD197;background:rgba(47,158,68,.10)}
.hpot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formmsg{grid-column:1 / -1;font-size:14.5px;line-height:1.6;border-radius:10px;padding:12px 14px}
.formmsg[data-tone="ok"]{background:rgba(47,158,68,.13);border:1px solid rgba(127,209,151,.35);color:#D6EEDF}
.formmsg[data-tone="bad"]{background:rgba(214,120,60,.12);border:1px solid rgba(232,195,122,.4);color:#F0DCC0}

/* ------------------------------------------------------------------ responsive */

@media (max-width:1040px){
  .roi-grid{grid-template-columns:1fr}
  .results{position:static}
  .res-big{font-size:40px}
}
@media (max-width:820px){
  .plans{grid-template-columns:1fr;gap:12px}
  .roi-wrap{padding:0 20px}
}
@media (max-width:700px){
  .fields,.leadform{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr 1fr}
  .phonebar{display:block}
  /* The bar's real measured height, set from roi.js, so the page bottom and the site's
     back-to-top button both clear it. The button is fixed at bottom:16px site-wide and sat
     directly on top of the ROI figure. */
  body.has-phonebar main{padding-bottom:calc(var(--pbh,76px) + 18px)}
  /* site.js builds this one in script and names it .to-top. There is a second, unrelated
     .nr-totop in contact.css that this page never gets, and targeting that name instead left
     the real button sitting on top of the ROI figure. Named from the live DOM, not the
     stylesheet that looked right. */
  body.has-phonebar .to-top{bottom:calc(var(--pbh,76px) + 12px)}
  .res-big{font-size:36px}
  .roi-panel{padding:18px 16px}
  .res-card{padding:20px 17px}
}
@media (max-width:380px){
  .roi-wrap{padding:0 16px}
  .res-big{font-size:31px}
  .tiles{grid-template-columns:1fr}
  .phonebar dd{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  .plan .card,.bar-fill{transition:none}
  .plan .card:hover{transform:none}
}