/* Rooya fleet savings calculator - final design build.
   Coded 1:1 from Figma file yrZbgNqEWjetmSd0Mjx93r, frame 568:3746 (seven
   boards: six question screens plus the result). Supersedes the v3 frame.

   Presentation rules still come from Henk Pleiter's Build & Compliance
   Specification v3.1 - see design/v3-spec-mapping.md. Where the design and the
   spec disagree the spec wins and the design's visual language is rebuilt
   around it; every such place is commented CARVE-OUT below.

   Scoped to .rooya-calc-section. Poppins with a system fallback.
   Contrast note: the design uses #707070 for secondary text. That is 3.95:1 on
   the pale-green panel and on the result gradient, under the 4.5:1 floor for
   WCAG 2.2 AA 1.4.3, so --rc-grey is set two steps darker at #666666, which
   clears 4.5:1 on white, on the panel and on the gradient. */

.rooya-calc-section{
  /* Rooya brand tokens - Figma "Rooya Brand" collection */
  --rc-black:#010101; --rc-white:#ffffff;
  --rc-pale:#c3e1d0; --rc-forest:#093735; --rc-emerald:#00995d; --rc-lime:#4ddc87;
  --rc-error:#8c2f22;
  /* surfaces */
  --rc-panel:rgba(195,225,208,.3);
  --rc-panel-solid:#eef7f1;
  --rc-grad-a:#cdeddc; --rc-grad-b:rgba(240,248,243,.57);
  --rc-on-dark:#f0f8f3;
  /* text */
  --rc-grey:#666666;                 /* design #707070, darkened for AA */
  --rc-muted:rgba(9,55,53,.7);
  --rc-body:rgba(1,1,1,.68);
  /* lines */
  --rc-line:rgba(9,55,53,.18);
  --rc-line-card:rgba(9,55,53,.15);
  --rc-hair:rgba(9,55,53,.1);
  /* shape */
  --rc-r-section:20px; --rc-r-card:8px; --rc-r-pill:24px;
  --rc-font:'Poppins','Segoe UI',system-ui,-apple-system,sans-serif;
  --rc-ease:cubic-bezier(.2,.7,.2,1);
  --rc-focus:0 0 0 3px rgba(0,153,93,.45);
}

/* ---------- section card (Figma 568:2103) ---------- */
.rooya-calc-section{
  font-family:var(--rc-font);color:var(--rc-black);-webkit-font-smoothing:antialiased;
  background:var(--rc-white);border-radius:var(--rc-r-section);
  padding:24px;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  box-shadow:0 1px 2px rgba(14,38,32,.04),0 24px 60px -34px rgba(14,38,32,.2);
}
.rooya-calc-section *,.rooya-calc-section *::before,.rooya-calc-section *::after{box-sizing:border-box}
.rooya-calc-section button,.rooya-calc-section input,.rooya-calc-section select{font-family:inherit}
.rooya-calc-section p{margin:0}

/* ---------- left column (568:2104) ---------- */
.rc-intro{flex:0 0 465px;max-width:465px;padding:16px;display:flex;flex-direction:column;gap:25px}
.rc-intro h2{margin:0;max-width:380px;font-weight:600;font-size:44px;line-height:1.3;color:var(--rc-black)}
.rc-intro p{max-width:380px;font-size:16px;line-height:1.5;color:var(--rc-body)}
.rc-illus{display:block;width:432px;max-width:100%;height:auto}

/* ---------- calculator panel (568:2184) ---------- */
.rooya-calc{
  flex:1 1 830px;min-width:0;align-self:stretch;
  background:var(--rc-panel);border-radius:var(--rc-r-card);
  padding:34px;display:flex;flex-direction:column;gap:22px;position:relative;overflow:hidden;
}
.rooya-calc:focus{outline:none}

/* top bar (568:2185) */
.rc-top{display:flex;align-items:center;gap:16px;width:100%}
.rc-progress{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.rc-progress span{display:block;width:26px;height:5px;border-radius:3px;background:var(--rc-line-card);transition:background .3s var(--rc-ease)}
.rc-progress span.done{background:var(--rc-emerald)}
.rc-progress span.now{background:var(--rc-lime)}
.rc-step-label{font-size:12px;line-height:1;color:var(--rc-black);white-space:nowrap}
.rc-top .rc-spacer{flex:1 1 auto}

/* currency pill (568:2195) */
.rc-currency{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;
  background:var(--rc-white);border-radius:var(--rc-r-pill);padding:6px 18px}
.rc-currency select{appearance:none;-webkit-appearance:none;border:0;background:transparent;
  font-size:16px;line-height:1.5;color:var(--rc-forest);padding:0 20px 0 0;cursor:pointer}
.rc-currency select:focus-visible{outline:none}
.rc-currency:focus-within{box-shadow:var(--rc-focus)}
.rc-currency .chev{position:absolute;right:16px;top:50%;width:9px;height:4.5px;margin-top:-2px;pointer-events:none;color:var(--rc-forest)}
.rc-currency .chev svg{display:block;width:100%;height:100%;stroke:currentColor;fill:none}

/* stage + scenes */
.rc-stage{position:relative;display:flex;flex-direction:column;gap:22px}
.rc-scene{display:flex;flex-direction:column;gap:22px;animation:rc-rise .42s var(--rc-ease) both}
.rc-scene.leaving{animation:rc-fall .2s ease both;pointer-events:none}
@keyframes rc-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes rc-fall{to{opacity:0;transform:translateY(-8px)}}

/* question head (568:2198) */
.rc-qhead{display:flex;flex-direction:column;gap:10px}
.rc-q{margin:0;font-weight:600;font-size:26px;line-height:1.2;color:var(--rc-black)}
.rc-q .em{font-style:italic;color:var(--rc-emerald)}
.rc-q .qm{color:var(--rc-emerald)}
.rc-help{font-size:14px;line-height:1.5;color:var(--rc-muted)}
.rc-help.lg{font-size:16px}
.rc-help a{color:var(--rc-forest)}

/* pills: quick-pick and ghost (568:2201 / 568:2500) */
.rc-pills{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.rc-pill{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:var(--rc-r-pill);
  border:1px solid var(--rc-line);background:var(--rc-white);
  font-weight:500;font-size:15px;line-height:1.4;color:var(--rc-forest);cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,transform .2s var(--rc-ease)}
.rc-pill:hover{border-color:var(--rc-emerald);transform:translateY(-1px)}
.rc-pill:focus-visible{outline:none;box-shadow:var(--rc-focus)}
.rc-pill[aria-pressed="true"]{background:var(--rc-forest);border-color:var(--rc-forest);color:var(--rc-lime)}
.rc-pill .tick{width:0;height:6.4px;opacity:0;overflow:hidden;color:var(--rc-lime);transition:width .2s var(--rc-ease),opacity .2s}
.rc-pill .tick svg{display:block;width:9.5px;height:100%;stroke:currentColor;fill:none;stroke-width:1.8}
.rc-pill[aria-pressed="true"] .tick{width:9.5px;opacity:1}
.rc-pill.static{cursor:default}
.rc-pill.static:hover{transform:none;border-color:var(--rc-line)}

/* number / money field (568:2214) */
.rc-fieldrow{display:flex;align-items:center;gap:14px;width:100%;flex-wrap:wrap}
.rc-field{display:flex;align-items:center;gap:0;background:var(--rc-white);
  border:1.5px solid var(--rc-line);border-radius:var(--rc-r-card);padding:18px 20px;
  width:259px;max-width:100%;transition:border-color .2s,box-shadow .2s}
.rc-field.wide{width:318px}
.rc-field:focus-within{border-color:var(--rc-emerald);box-shadow:0 0 0 3px rgba(0,153,93,.18)}
.rc-field.invalid{border-color:var(--rc-error);box-shadow:0 0 0 3px rgba(140,47,34,.15)}
.rc-field .sym,.rc-field input{font-weight:700;font-size:30px;line-height:1.1;color:var(--rc-forest);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.rc-field input{border:0;outline:0;background:transparent;width:100%;min-width:40px;padding:0}
.rc-field input::-webkit-outer-spin-button,.rc-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rc-field input[type=number]{-moz-appearance:textfield}
.rc-fieldrow .unit{font-size:16px;color:var(--rc-muted)}

/* slider (568:2506) */
.rc-slider{display:flex;flex-direction:column;gap:10px;width:100%}
.rc-slider input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;margin:0;cursor:pointer}
.rc-slider input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:4px;
  background:linear-gradient(90deg,var(--rc-emerald) 0,var(--rc-lime) var(--p,0%),var(--rc-forest) var(--p,0%))}
.rc-slider input[type=range]::-moz-range-track{height:8px;border-radius:4px;
  background:linear-gradient(90deg,var(--rc-emerald) 0,var(--rc-lime) var(--p,0%),var(--rc-forest) var(--p,0%))}
.rc-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-9px;
  border-radius:50%;background:var(--rc-white);border:2px solid var(--rc-emerald);
  box-shadow:0 2px 6px rgba(9,55,53,.2)}
.rc-slider input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
  background:var(--rc-white);border:2px solid var(--rc-emerald);box-shadow:0 2px 6px rgba(9,55,53,.2)}
.rc-slider input[type=range]:focus-visible{outline:none}
.rc-slider input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:var(--rc-focus)}
.rc-slider input[type=range]:focus-visible::-moz-range-thumb{box-shadow:var(--rc-focus)}
.rc-scale{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.5;color:var(--rc-muted)}
.rc-scale .rc-spacer{flex:1 1 auto}

/* option cards - vehicle class (568:2333) and current setup (568:2519) */
.rc-options{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
.rc-options.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:666px}
.rc-opt{position:relative;text-align:left;display:flex;flex-direction:column;gap:3px;
  background:var(--rc-white);border:1.5px solid var(--rc-line-card);border-radius:var(--rc-r-card);
  padding:16px;min-height:122px;cursor:pointer;
  transition:border-color .2s,box-shadow .2s,transform .2s var(--rc-ease),background .2s}
.rc-options.two .rc-opt{gap:14px;padding:16px 18px;min-height:134px}
.rc-opt:hover{transform:translateY(-2px);box-shadow:0 8px 20px -12px rgba(9,55,53,.35);border-color:var(--rc-emerald)}
.rc-opt:focus-visible{outline:none;box-shadow:var(--rc-focus)}
.rc-opt .ic{display:block;width:40px;height:40px;color:var(--rc-grey);flex:0 0 auto}
.rc-opt .ic svg{display:block;width:100%;height:100%}
.rc-opt .t{display:block;font-weight:500;font-size:14.5px;line-height:1.3;color:var(--rc-forest);padding-right:24px}
.rc-options.two .rc-opt .t{font-size:16px;line-height:1.4}
.rc-opt .n{display:block;font-size:10px;line-height:1.4;color:var(--rc-grey)}
.rc-options.two .rc-opt .n{font-size:13px;line-height:1.5}
.rc-opt .badge{position:absolute;top:16px;right:16px;width:18px;height:18px;opacity:0;transform:scale(.6);transition:.22s var(--rc-ease)}
.rc-opt .badge svg{display:block;width:100%;height:100%}
.rc-opt[aria-pressed="true"]{background:var(--rc-forest);border-color:var(--rc-forest);
  box-shadow:0 4px 2.65px rgba(0,0,0,.07)}
.rc-opt[aria-pressed="true"] .ic{color:var(--rc-lime)}
.rc-opt[aria-pressed="true"] .t{color:var(--rc-lime)}
.rc-opt[aria-pressed="true"] .n{color:var(--rc-on-dark)}
.rc-opt[aria-pressed="true"] .badge{opacity:1;transform:none}

/* stepper (568:2827) */
.rc-stepper{display:inline-flex;align-items:center;background:var(--rc-white);
  border:1.5px solid var(--rc-line-card);border-radius:var(--rc-r-card);overflow:hidden}
.rc-stepper button{width:56px;height:56px;border:0;background:transparent;color:var(--rc-forest);
  cursor:pointer;display:grid;place-items:center;transition:background .2s}
.rc-stepper button:hover{background:var(--rc-panel-solid)}
.rc-stepper button:focus-visible{outline:none;box-shadow:inset 0 0 0 3px rgba(0,153,93,.45)}
.rc-stepper button svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.rc-stepper output{min-width:66px;padding:0 32px;text-align:center;font-weight:700;font-size:30px;
  line-height:1;color:var(--rc-forest);font-variant-numeric:tabular-nums}

/* prefill notice (568:2701) and required notice */
.rc-notice{background:var(--rc-pale);border-radius:var(--rc-r-card);padding:14px 16px;
  font-size:16px;line-height:1.5;color:var(--rc-forest);width:100%}
.rc-notice b{font-weight:600}
.rc-notice .m{font-weight:500}
.rc-notice a{color:var(--rc-forest);font-weight:500}
.rc-notice.required{background:#fbeceb;color:#6d2419;display:flex;gap:10px;align-items:flex-start;font-size:14px}
.rc-notice.required .tag{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--rc-error);margin-bottom:3px}
.rc-notice.required .ic{flex:0 0 auto;width:18px;height:18px;margin-top:2px}
.rc-notice.required svg{width:18px;height:18px;stroke:var(--rc-error);fill:none;stroke-width:2;stroke-linecap:round}

/* nav row (568:2218) */
.rc-nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap;width:100%}
.rc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;
  padding:0 24px;border:0;border-radius:var(--rc-r-pill);cursor:pointer;
  font-weight:600;font-size:14px;text-decoration:none;
  transition:background .2s,color .2s,border-color .2s,transform .2s var(--rc-ease),opacity .2s}
.rc-btn svg{width:18px;height:18px;fill:currentColor}
.rc-btn.primary{background:var(--rc-emerald);color:var(--rc-white)}
.rc-btn.primary:hover:not(:disabled){background:#00814f;transform:translateY(-1px)}
.rc-btn.primary:disabled{background:rgba(9,55,53,.16);color:rgba(9,55,53,.55);cursor:not-allowed}
.rc-btn.outline{background:var(--rc-white);color:var(--rc-forest);border:1px solid var(--rc-emerald);padding:0 32px}
.rc-btn.outline:hover:not(:disabled){background:var(--rc-panel-solid);transform:translateY(-1px)}
.rc-btn.outline:disabled{opacity:.45;cursor:not-allowed}
.rc-btn:focus-visible{outline:none;box-shadow:var(--rc-focus)}

/* answer rail (568:2225 / 568:2226) */
.rc-rail{display:flex;flex-direction:column;gap:14px;width:100%}
.rc-rail:empty{display:none}
.rc-hair{height:1px;background:var(--rc-hair);width:100%}
.rc-answers{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.rc-ans{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--rc-r-pill);
  background:var(--rc-white);border:1px solid transparent;
  font-weight:500;font-size:14px;line-height:1.5;color:var(--rc-forest);cursor:pointer;
  transition:border-color .2s,transform .2s var(--rc-ease)}
.rc-ans .ic{width:9.6px;height:9.6px;color:var(--rc-forest)}
.rc-ans .ic svg{display:block;width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.4}
.rc-ans:hover{border-color:var(--rc-emerald);transform:translateY(-1px)}
.rc-ans:focus-visible{outline:none;box-shadow:var(--rc-focus)}

/* ---------- result board (572:5050 / 572:5051) ---------- */
.rooya-calc-section.is-result{padding:24px}
.rooya-calc-section.is-result .rc-intro{display:none}
.rooya-calc.is-result{
  background:linear-gradient(180deg,var(--rc-grad-a) 0%,var(--rc-grad-b) 59.615%,var(--rc-grad-b) 100%);
  padding:34px;gap:52px;flex-basis:100%;
}
.rc-res-photo{position:absolute;top:-64px;right:-253px;width:976px;height:651px;
  background-image:url(../images/calculator/fleet-van.webp);background-size:cover;background-position:center;
  pointer-events:none;z-index:0}
/* everything except the photo sits above it, so the opaque cards crop the van
   exactly as the design does (572:5052 sits under 572:5053). Positioned
   descendants paint above non-positioned ones, so the content blocks have to
   be positioned too, not just given a z-index. */
.rooya-calc.is-result > *:not(.rc-res-photo),
.rc-result > *{position:relative;z-index:1}
.rc-result{display:flex;flex-direction:column;gap:52px}
.rc-res-lead{display:flex;flex-direction:column;gap:24px;width:100%}
.rc-res-head{display:flex;flex-direction:column;gap:17px;width:100%}
.rc-res-title{display:flex;gap:24px;align-items:flex-start;justify-content:space-between;width:100%}
.rc-headline{margin:0;max-width:607px;font-weight:600;font-size:44px;line-height:1.3;color:var(--rc-forest)}
.rc-headline .em{color:var(--rc-emerald)}
.rc-res-lede{display:flex;flex-direction:column;gap:10px;width:100%;max-width:740px}
.rc-lede-total{font-size:20px;line-height:1.5;color:var(--rc-black)}
.rc-lede-total b{font-weight:600;color:var(--rc-emerald)}
/* BUSINESS CONFLICT (reported): the design leads on total cost, but the client
   asked on 2026-09-03 for the software licensing saving to lead. Both are
   shown - the design's total-cost line first, the licensing line directly
   under it at the same type size. */
.rc-lede-licence{font-size:20px;line-height:1.5;color:var(--rc-black)}
.rc-lede-licence b{font-weight:600;color:var(--rc-emerald)}
/* CARVE-OUT (c), spec 3.2: "estimate, not a quote" must sit in the same visual
   block as the headline percentage. It is carried by the grey line the design
   already draws here, so no separate pill is needed. */
.rc-lede-money{font-size:16px;line-height:1.5;color:var(--rc-grey)}

/* total cards (572:5064) */
.rc-totals{display:flex;gap:16px;width:100%;flex-wrap:wrap}
.rc-total{flex:0 1 320px;min-width:260px;min-height:189px;display:flex;flex-direction:column;gap:8px;
  padding:22px;border-radius:var(--rc-r-card);background:var(--rc-white)}
.rc-total .l,.rc-total .u{font-size:12px;line-height:normal;color:var(--rc-grey)}
.rc-total .n{font-weight:700;font-size:36px;line-height:1.1;color:var(--rc-forest);font-variant-numeric:tabular-nums}
.rc-total .bar{margin-top:6px;height:10px;border-radius:5px;background:rgba(9,55,53,.1);overflow:hidden}
.rc-total .bar i{display:block;height:100%;border-radius:5px;background:var(--rc-forest);width:0;transition:width .9s var(--rc-ease)}
.rc-total.after{background:var(--rc-forest);filter:drop-shadow(0 4px 6.8px rgba(11,121,78,.39))}
.rc-total.after .l,.rc-total.after .u{color:var(--rc-pale)}
.rc-total.after .n{color:var(--rc-lime)}
.rc-total.after .bar{background:var(--rc-pale)}
.rc-total.after .bar i{background:var(--rc-emerald)}
.rc-total.save{background:var(--rc-emerald);gap:8px}
.rc-total.save .l{color:var(--rc-white)}
.rc-total.save .n{color:var(--rc-white)}
.rc-total.save .u{color:var(--rc-pale)}
.rc-total.save .row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.rc-total.save .row > div{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1 1 auto}
.rc-total.save .l{white-space:nowrap}
.rc-total.save .leaf{width:61px;height:61px;flex:0 0 auto;color:var(--rc-lime);opacity:.9}
.rc-total.save .leaf svg{display:block;width:100%;height:100%}
.rc-total.save .rule{height:1px;background:rgba(255,255,255,.45);margin:4px 0}
.rc-total.save .pct{font-weight:600;font-size:16px;line-height:1.1;color:var(--rc-white)}

/* breakdown (572:5092) */
.rc-break{display:flex;flex-direction:column;gap:15px;width:100%}
.rc-break h4{margin:0;font-weight:600;font-size:24px;line-height:1.3;color:var(--rc-forest)}
.rc-segs{display:flex;gap:30px;flex-wrap:wrap}
.rc-seg{display:grid;grid-template-columns:75px 140px;column-gap:10px;row-gap:16px;align-items:start}
.rc-seg .ic{grid-column:1;grid-row:1;width:75px;height:75px;border-radius:50%;background:var(--rc-pale);
  display:grid;place-items:center;color:var(--rc-emerald)}
.rc-seg .ic svg{display:block;width:39px;height:39px}
.rc-seg .d{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:2px}
.rc-seg .lab{font-size:16px;line-height:1.5;color:var(--rc-black)}
.rc-seg .v{font-weight:600;font-size:24px;line-height:1.3;color:var(--rc-forest);font-variant-numeric:tabular-nums}
.rc-seg .m{grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:12px}
/* CARVE-OUT (a), spec 3.1: the design's chips carried single reduction
   percentages (-15 / -25 / -16 / -30), and -15% fuel sat outside the evidenced
   8-14% band entirely. The chips are gone; the bar carries proportion only and
   states no figure, and the ranges are stated once in the footer small print. */
.rc-seg .bar{height:8px;border-radius:4px;background:rgba(9,55,53,.14);overflow:hidden}
.rc-seg .bar i{display:block;height:100%;border-radius:4px;background:var(--rc-emerald);width:0;transition:width .9s var(--rc-ease)}

/* footer strip (572:5184).
   CARVE-OUT (b), spec 3.3: the material assumptions are a MUST and the design
   has no block for them, so they run in this strip's small-print line rather
   than in a card of their own. The line is long by design; it is the only
   place the ranges and the per-incident costs are stated. */
.rc-resfoot{display:flex;gap:42px;align-items:center;flex-wrap:wrap;width:100%}
.rc-promise{display:flex;gap:5px;align-items:center;background:#e2f0e7;border-radius:var(--rc-r-card);padding:22px 14px}
.rc-promise .ic{width:49px;height:49px;flex:0 0 auto;display:grid;place-items:center;color:var(--rc-emerald)}
.rc-promise .ic svg{display:block;width:43px;height:43px}
.rc-promise .tx{display:flex;flex-direction:column;gap:3px;max-width:462px;padding:0 10px}
.rc-promise .tx b{font-weight:600;font-size:15px;line-height:1.4;color:var(--rc-forest)}
.rc-promise .tx span{font-size:12px;line-height:1.5;color:var(--rc-grey)}
.rc-promise .sep{width:1px;height:54px;background:var(--rc-line);flex:0 0 auto;margin:0 8px}
.rc-flinks{display:flex;flex-direction:column;gap:8px;align-items:flex-start;flex:0 0 auto}
.rc-promise a{display:inline-flex;align-items:flex-end;gap:4px;max-width:181px;
  font-weight:500;font-size:17px;line-height:1.4;color:var(--rc-forest);text-decoration:underline}
.rc-promise a svg{width:18px;height:18px;fill:currentColor;flex:0 0 auto}
.rc-promise a:focus-visible{outline:none;box-shadow:var(--rc-focus);border-radius:4px}
/* Replaces the seven-chip answer rail on the result board (the design has no
   rail there). Returns to Q1 with every answer still populated. */
.rc-editans{padding:0;border:0;background:none;cursor:pointer;font-weight:500;font-size:14px;
  line-height:1.4;color:var(--rc-forest);text-decoration:underline;text-align:left}
.rc-editans:hover{color:var(--rc-emerald)}
.rc-editans:focus-visible{outline:none;box-shadow:var(--rc-focus);border-radius:4px}
.rc-actions{display:flex;gap:15px;align-items:center;flex-wrap:wrap}
.rc-actions .rc-btn{height:60px;font-size:14px}
.rc-actions .rc-btn.outline{padding:0 42px;border-radius:51px}
.rc-actions .rc-btn.primary{padding:0 23px;min-width:231px;border-radius:39px}
.rc-actions .rc-btn .ph{width:24px;height:24px;color:var(--rc-forest)}
.rc-actions .rc-btn .ph svg{display:block;width:100%;height:100%;fill:currentColor}

/* CARVE-OUT (d), spec 3.9 / PECR: the design shows a bare "Get my summary"
   button with no consent gate. The button now expands this capture block. */
.rc-gate{width:100%;background:var(--rc-white);border-radius:var(--rc-r-card);padding:24px;
  display:none;flex-direction:column;gap:14px}
.rc-gate.open{display:flex;animation:rc-rise .35s var(--rc-ease) both}
.rc-gate h4{margin:0;font-weight:600;font-size:20px;line-height:1.3;color:var(--rc-forest)}
.rc-gate > p{font-size:14px;line-height:1.5;color:var(--rc-grey)}
.rc-gate form{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.rc-gfield{display:flex;align-items:center;gap:10px;flex:1 1 220px;min-width:180px;
  background:var(--rc-white);border:1.5px solid var(--rc-line);border-radius:var(--rc-r-card);padding:12px 16px;
  transition:border-color .2s,box-shadow .2s}
.rc-gfield:focus-within{border-color:var(--rc-emerald);box-shadow:0 0 0 3px rgba(0,153,93,.15)}
.rc-gfield.invalid{border-color:var(--rc-error);box-shadow:0 0 0 3px rgba(140,47,34,.15)}
.rc-gfield input{border:0;outline:0;background:transparent;width:100%;font-size:15px;color:var(--rc-black)}
.rc-gfield input::placeholder{color:var(--rc-grey)}
.rc-consent{flex:1 1 100%;display:flex;flex-direction:column;gap:10px;margin-top:2px}
.rc-check{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.5;color:var(--rc-forest);cursor:pointer}
.rc-check input{position:absolute;opacity:0;width:0;height:0}
.rc-check .box{flex:0 0 auto;width:18px;height:18px;margin-top:2px;border-radius:5px;
  border:1.5px solid rgba(9,55,53,.4);background:var(--rc-white);position:relative;transition:.2s}
.rc-check input:checked+.box{background:var(--rc-emerald);border-color:var(--rc-emerald)}
.rc-check input:checked+.box::after{content:"";position:absolute;left:5px;top:1.5px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.rc-check input:focus-visible+.box{box-shadow:var(--rc-focus)}
.rc-check .req{color:var(--rc-emerald);font-weight:600}
.rc-check a{color:var(--rc-forest)}
.rc-check.invalid .box{border-color:var(--rc-error);box-shadow:0 0 0 3px rgba(140,47,34,.2)}
.rc-gate .privacy{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.5;color:var(--rc-grey)}
.rc-done{display:none;padding:14px 18px;background:var(--rc-pale);border-radius:var(--rc-r-card);
  color:var(--rc-forest);font-size:15px;font-weight:500}
.rc-done.show{display:block}
/* THEME ADDITION. The capture card now reports what Contact Form 7 said rather than confirming
   unconditionally, so the same box has to be able to carry a refusal. Same shape, error palette,
   and the text goes dark enough to clear 4.5:1 on it. */
.rc-done.failed{background:rgba(140,47,34,.1);color:var(--rc-error)}

/* screen-reader only */
.rc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- responsive ---------- */
@media(max-width:1280px){
  .rc-intro{flex-basis:380px}
  .rc-headline{font-size:38px}
  .rc-segs{gap:20px}
  .rc-res-photo{right:-120px}
}
@media(max-width:1040px){
  .rooya-calc-section{flex-direction:column;gap:20px}
  .rc-intro{flex:1 1 auto;max-width:none;width:100%;padding:8px}
  .rc-intro h2,.rc-intro p{max-width:none}
  .rooya-calc{width:100%;flex-basis:auto}
  .rc-res-photo{opacity:.35}
}
@media(max-width:820px){
  .rc-options{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rc-options.two{grid-template-columns:1fr}
  .rc-total{flex:1 1 100%}
}
@media(max-width:640px){
  .rooya-calc-section{padding:16px;border-radius:16px}
  .rooya-calc{padding:20px 18px;gap:18px}
  .rooya-calc.is-result{padding:20px 18px;gap:28px}
  .rc-intro h2{font-size:30px}
  .rc-q{font-size:21px}
  .rc-headline{font-size:28px}
  .rc-lede-total,.rc-lede-licence{font-size:17px}
  .rc-options{grid-template-columns:1fr}
  /* the design's 10px card note is desktop-only; it is unreadable on a phone */
  .rc-opt .n{font-size:12px}
  .rc-opt .t{font-size:16px}
  .rc-field,.rc-field.wide{width:100%}
  .rc-field .sym,.rc-field input{font-size:26px}
  .rc-step-label{display:none}
  .rc-progress span{width:100%;flex:1 1 auto}
  .rc-progress{flex:1 1 auto}
  .rc-nav .rc-btn{flex:1 1 auto}
  .rc-break h4{font-size:20px}
  .rc-segs{gap:14px;flex-direction:column}
  .rc-seg{grid-template-columns:56px minmax(0,1fr);row-gap:10px;column-gap:14px;width:100%}
  .rc-seg .ic{width:56px;height:56px}
  .rc-seg .ic svg{width:28px;height:28px}
  .rc-seg .d,.rc-seg .m{min-width:0}
  .rc-resfoot{gap:16px}
  .rc-promise{flex-wrap:wrap;padding:16px 14px}
  .rc-promise .sep{display:none}
  .rc-actions{width:100%}
  .rc-actions .rc-btn{flex:1 1 100%;min-width:0}
  .rc-res-photo{top:-24px;width:120%;height:320px;opacity:.28}
  .rc-total .n{font-size:30px}
  .rc-gate{padding:18px}
}
@media(prefers-reduced-motion:reduce){
  .rooya-calc-section *,.rooya-calc-section *::before,.rooya-calc-section *::after{
    animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
}