/* Review Gap Calculator — /review-gap/ only.
   Everything is prefixed .rg- so it can't collide with base/interior rules
   (base.css already owns .grid, .btn-ghost, .card-style names). */

.rg{padding:44px 0 110px;background:var(--canvas);overflow:visible}
.rg p{max-width:none;margin:0}
.rg-grid{display:grid;gap:26px;grid-template-columns:minmax(0,440px) minmax(0,1fr);align-items:start;
  position:relative;z-index:2}
@media(max-width:980px){.rg-grid{grid-template-columns:minmax(0,1fr)}}

.rg-panel{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-lg);
  box-shadow:0 14px 34px -22px rgba(8,12,36,.45)}
.rg-h{font-size:24px;line-height:1.2;font-weight:700;letter-spacing:-.015em}
.rg h3{font-size:19px;line-height:1.3;font-weight:700;letter-spacing:-.01em}

/* ---------- form ---------- */
.rg-form{padding:30px;display:grid;gap:18px}
.rg-hint{font-size:15px;line-height:1.45;color:var(--annotation)}
.rg-form > .rg-hint:first-of-type{margin-top:-10px}
.rg-group{font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--action-deep);margin-top:6px}
.rg-field{display:grid;gap:7px}
.rg-field label{font-weight:600;color:var(--ink);font-size:16.5px;line-height:1.3}
.rg-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end}
@media(max-width:420px){.rg-pair{grid-template-columns:1fr}}
.rg input,.rg select{font:inherit;font-size:18px;color:var(--ink);background:var(--surface);
  border:1.5px solid var(--rule);border-radius:var(--radius);padding:11px 13px;min-height:52px;width:100%;
  font-variant-numeric:tabular-nums}
.rg select{appearance:none;padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,var(--annotation) 50%),linear-gradient(135deg,var(--annotation) 50%,transparent 50%);
  background-position:calc(100% - 20px) 23px,calc(100% - 15px) 23px;background-size:5px 5px;background-repeat:no-repeat}
.rg input:focus,.rg select:focus{outline:none;border-color:var(--action-deep);box-shadow:0 0 0 3px rgba(245,165,36,.28)}
.rg-field.invalid input{border-color:#B42318}
.rg-err{font-size:14px;color:#B42318;font-weight:500}
.rg-submit{width:100%;text-align:center;font-family:Sora,system-ui,sans-serif;font-weight:700;cursor:pointer}
.rg-note{font-size:14px;line-height:1.5;color:var(--annotation);border-top:1px solid var(--rule);padding-top:14px}

/* ---------- results ---------- */
.rg-results{display:grid;gap:22px}
.rg-summary{padding:30px;display:grid;gap:22px}
.rg-headline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.rg-headline .rg-h{font-size:clamp(24px,2.6vw,30px)}
.rg-pill{font-family:Sora,system-ui,sans-serif;font-weight:700;font-size:15px;padding:5px 14px;border-radius:999px;white-space:nowrap}
.rg-gapline{font-size:19px;color:var(--ink)}
.rg-gapline strong{font-family:Sora,system-ui,sans-serif;font-size:34px;font-weight:800;font-variant-numeric:tabular-nums;margin-right:8px}

.rg-bars{display:grid;gap:12px}
.rg-bar-row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;align-items:center}
.rg-bar-label{font-size:15.5px;font-weight:600;color:var(--ink)}
.rg-bar-track{background:var(--canvas);border-radius:var(--radius);height:36px;overflow:hidden}
.rg-bar-fill{height:100%;border-radius:var(--radius);display:flex;align-items:center;justify-content:flex-end;
  padding-right:10px;min-width:48px;transition:width .5s ease}
.rg-bar-fill span{font-family:"IBM Plex Mono",monospace;font-size:15px;font-weight:500}
.rg-bar-you{background:var(--action)}
.rg-bar-you span{color:#160F00}
.rg-bar-comp{background:var(--ink-3)}
.rg-bar-comp span{color:#fff}

.rg-table-wrap{overflow-x:auto}
.rg-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:16.5px}
.rg-table th,.rg-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule)}
.rg-table th{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--annotation);font-weight:500}
.rg-table .num{text-align:right}
.rg-table td:first-child{font-weight:600;color:var(--ink)}

.rg-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:1180px){.rg-cards{grid-template-columns:minmax(0,1fr)}}
.rg-card{padding:22px;display:grid;gap:8px;align-content:start}
.rg-card p{font-size:16.5px;line-height:1.5}
.rg-big{font-family:Sora,system-ui,sans-serif;font-weight:800;font-size:28px !important;color:var(--ink);
  line-height:1.15 !important;font-variant-numeric:tabular-nums}
.rg-sub{font-size:14.5px !important;color:var(--annotation)}
.rg-card-plan{border-color:var(--action);box-shadow:0 0 0 1px var(--action),0 14px 34px -22px rgba(156,102,5,.55)}

.rg-steps{padding:30px;display:grid;gap:18px}
.rg-steps h3{font-size:22px}
.rg-steps ol{margin:0;padding:0;list-style:none;display:grid;gap:14px;counter-reset:rgs}
.rg-steps li{counter-increment:rgs;display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start}
.rg-steps li::before{content:counter(rgs);font-family:Sora,system-ui,sans-serif;font-weight:800;background:var(--ink);
  color:var(--action);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:16px}
.rg-steps li p{padding-top:4px;font-size:18px;line-height:1.5}
.rg-rule{background:#FFF1D6;color:var(--ink);border-radius:var(--radius);padding:12px 16px;font-size:16.5px;font-weight:500}

.rg-actions{display:flex;flex-wrap:wrap;gap:12px}
.rg-btn{font:inherit;font-weight:600;font-size:16.5px;cursor:pointer;background:var(--surface);color:var(--ink);
  border:1.5px solid var(--rule);border-radius:var(--radius);min-height:50px;padding:12px 20px;
  transition:border-color .15s,color .15s}
.rg-btn:hover{border-color:var(--action-deep);color:var(--action-deep)}
.rg-btn:focus-visible,.rg-submit:focus-visible{outline:3px solid var(--action-deep);outline-offset:2px}
.rg-copy-status{font-size:15px;color:#16865A;align-self:center}
.rg-copy-fallback{width:100%;min-height:170px;font-family:"IBM Plex Mono",monospace;font-size:14px;
  border:1px solid var(--rule);border-radius:var(--radius);padding:12px}

.rg-email{padding:30px;display:grid;gap:12px;background:var(--ink);border-color:var(--ink);color:#C9CEE4}
.rg-email h3{color:#fff;font-size:22px}
.rg-email p{color:#B4BAD4;font-size:17px}
.rg-email-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
@media(max-width:520px){.rg-email-row{grid-template-columns:1fr}}
.rg-email input{border-color:var(--ink-3)}
.rg-email .btn{cursor:pointer;font-family:Sora,system-ui,sans-serif;font-weight:700}
.rg-email .rg-email-msg{color:var(--action-hi);font-size:15px}

@media(max-width:980px){
  .rg{padding-top:28px}
  .rg-form,.rg-summary,.rg-steps,.rg-email{padding:22px}
}
@media(prefers-reduced-motion:reduce){.rg-bar-fill{transition:none}}

/* closing band: Review Desk (primary) + talk to the owner (secondary) */
.rg-close-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

@media print{
  .site-header,.site-footer,.masthead,.rg-form,.rg-actions,.rg-email,#close{display:none !important}
  body,.rg{background:#fff}
  .rg{padding:0}
  .rg-grid{margin-top:0;grid-template-columns:1fr}
  .rg-panel{box-shadow:none}
}