/* ==========================================================================
   Staffility License Tier & ROI Advisor — Styles
   Brand colors from Staffility Style Guide (Pantone 289, PQ-123C, 381, 2995, 5445).
   ========================================================================== */

:root {
  /* --- brand palette -------------------------------------------------- */
  --brand-navy:       #0C2340;   /* Pantone 289 C — primary */
  --brand-navy-soft:  #1a3a5f;
  --brand-yellow:     #FFC62D;   /* Pantone PQ-123C */
  --brand-lime:       #CDDD00;   /* Pantone 381 C */
  --brand-cyan:       #00A9DF;   /* Pantone 2995 C */
  --brand-cyan-dark:  #0088b8;
  --brand-gray-blue:  #B6C9D3;   /* Pantone 5445 C */

  /* --- semantic tokens ------------------------------------------------ */
  --color-bg:          #f5f8fb;
  --color-surface:     #ffffff;
  --color-border:      #d9e1e8;
  --color-border-soft: #e7ecf0;
  --color-text:        #0C2340;
  --color-text-muted:  #5a6b7a;
  --color-primary:     var(--brand-navy);
  --color-accent:      var(--brand-cyan);
  --color-accent-dark: var(--brand-cyan-dark);
  --color-highlight:   var(--brand-yellow);
  --color-success:     var(--brand-lime);
  --color-error:       #c41e1e;

  --radius: 8px;
  --shadow-sm: 0 1px 2px rgba(12, 35, 64, 0.06);
  --shadow-md: 0 4px 16px rgba(12, 35, 64, 0.10);
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* --- header ------------------------------------------------------------- */
.page-header {
  background: var(--brand-navy);
  color: #fff;
  padding: 2rem 0;
  margin-bottom: 2rem;
  border-bottom: 4px solid var(--brand-cyan);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.logo {
  height: 60px;
  width: auto;
  background: #fff;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  flex-shrink: 0;
}

.header-text h1 {
  margin: 0 0 0.375rem;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.header-text .subtitle {
  margin: 0;
  color: #d6e3f0;
  max-width: 640px;
  font-size: 0.9375rem;
}

@media (max-width: 560px) {
  .header-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .header-text h1 { font-size: 1.375rem; }
}

/* --- card --------------------------------------------------------------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 2rem;
  margin-bottom: 2rem;
}

/* --- form --------------------------------------------------------------- */
fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

fieldset + fieldset {
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border-soft);
}

legend {
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--brand-navy);
  letter-spacing: -0.005em;
}

.field { margin-bottom: 1.125rem; }

.field label {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 0.375rem;
}

.field input,
.field select {
  width: 100%;
  padding: 0.625rem 0.75rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(0, 169, 223, 0.18);
}

.field small {
  display: block;
  margin-top: 0.25rem;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

/* Required-field indicator (asterisk next to the label) */
.req-star {
  color: var(--color-error);
  font-weight: 800;
  margin-left: 0.125rem;
  font-size: 1em;
  line-height: 1;
}

/* A short note about a whole fieldset (used in contact details) */
.field-note {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  padding: 0.625rem 0.875rem;
  background: #f7f9fb;
  border-left: 3px solid var(--color-accent);
  border-radius: 4px;
}

/* Per-field validation error decoration */
.field.has-error input,
.field.has-error select {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(196, 30, 30, 0.12);
}

.field.has-error label {
  color: var(--color-error);
}

.field-error {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--color-error);
  font-weight: 600;
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  line-height: 1.4;
}

.field-error::before {
  content: "⚠";
  font-size: 0.9rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.0625rem;
}

.grid-2, .grid-3 {
  display: grid;
  gap: 1rem;
}
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 640px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* --- collapsible assumptions ------------------------------------------- */
.assumptions {
  width: 100%;
  margin: 0 0 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border-soft);
}

.assumptions summary {
  cursor: pointer;
  color: var(--color-accent-dark);
  font-weight: 600;
  padding: 0.5rem 0;
  user-select: none;
  font-size: 1rem;
}

.assumptions summary:hover { text-decoration: underline; }

.assumptions[open] summary { margin-bottom: 1rem; }

.assumptions-intro {
  margin: 0 0 1rem;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  font-weight: 400;
}

/* --- buttons ------------------------------------------------------------ */
.actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.btn-primary, .btn-secondary {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.btn-primary {
  background: var(--color-accent);
  color: #fff;
  border: 1px solid var(--color-accent);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover  { background: var(--color-accent-dark); border-color: var(--color-accent-dark); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { background: #9ca3af; border-color: #9ca3af; cursor: not-allowed; }

.btn-secondary {
  background: #fff;
  color: var(--brand-navy);
  border: 1px solid var(--color-border);
}
.btn-secondary:hover { background: #f0f4f8; }

.form-status {
  margin: 1rem 0 0;
  min-height: 1.25rem;
  font-size: 0.9375rem;
}
.form-status.is-error   { color: var(--color-error); }
.form-status.is-success { color: var(--color-success); }

/* --- results ------------------------------------------------------------ */
.results h2 {
  margin: 0 0 1.5rem;
  font-size: 1.5rem;
  font-weight: 800;
}

.recommendation {
  background: linear-gradient(135deg, #eaf5fb 0%, #f2f8fd 100%);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.recommendation .tier-name {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--brand-navy);
  margin: 0 0 0.25rem;
}

.recommendation .tier-headline {
  color: var(--color-text-muted);
  margin: 0 0 1rem;
}

.price-row {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin: 1rem 0 0;
}

.price-item .label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-weight: 600;
}

.price-item .value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--brand-navy);
}

.breakdown {
  background: #f7f9fb;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

.breakdown h3 { margin: 0 0 0.75rem; font-size: 1.0625rem; font-weight: 700; }
.breakdown ul { margin: 0; padding-left: 1.25rem; }
.breakdown li { margin-bottom: 0.375rem; }

.breakdown .note {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

/* --- ROI panel --------------------------------------------------------- */
.roi {
  background: linear-gradient(135deg, #fff9e6 0%, #fffbeb 100%);
  border: 2px solid var(--brand-yellow);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.roi h3 {
  margin: 0 0 1rem;
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--brand-navy);
}

.roi h4 {
  margin: 1.25rem 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.roi-headline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

@media (max-width: 560px) { .roi-headline { grid-template-columns: 1fr; } }

.roi-card {
  background: #fff;
  border: 1px solid var(--brand-yellow);
  border-radius: 6px;
  padding: 1rem 1.25rem;
}

.roi-card .label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-weight: 700;
}

.roi-card .big {
  font-size: 2rem;
  font-weight: 800;
  color: var(--brand-navy);
  margin: 0.125rem 0;
  line-height: 1.1;
}

.roi-card .sub {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.roi-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin-top: 0.5rem;
}

.roi-detail-table th,
.roi-detail-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border-soft);
  text-align: left;
}

.roi-detail-table th {
  background: #fff;
  font-weight: 700;
  color: var(--brand-navy);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.roi-detail-table td:last-child,
.roi-detail-table th:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.roi-formula {
  background: #fff;
  border: 1px solid var(--brand-yellow);
  border-radius: 6px;
  padding: 0.875rem 1.125rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.875rem;
  color: var(--color-text);
  margin-top: 1rem;
  overflow-x: auto;
}

/* --- tier comparison --------------------------------------------------- */
.all-tiers h3 { font-size: 1.0625rem; margin: 0 0 0.75rem; font-weight: 700; }

.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}

.tier-cell {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.875rem;
  background: #fff;
  font-size: 0.9375rem;
}

.tier-cell.is-recommended {
  border-color: var(--brand-lime);
  background: #fafde6;
  box-shadow: 0 0 0 2px rgba(205, 221, 0, 0.25);
}

.tier-cell .tier-label {
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.25rem;
  color: var(--brand-navy);
}

.tier-cell .badge {
  background: var(--brand-lime);
  color: var(--brand-navy);
  font-size: 0.6875rem;
  font-weight: 800;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tier-cell .cost {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--brand-navy);
}

.tier-cell .cost-sub {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

/* --- footer ------------------------------------------------------------- */
.page-footer {
  border-top: 1px solid var(--color-border);
  padding: 1.5rem 0;
  margin-top: 3rem;
  color: var(--color-text-muted);
  text-align: center;
}

.page-footer a { color: var(--color-accent-dark); text-decoration: none; }
.page-footer a:hover { text-decoration: underline; }

/* ==========================================================================
   REBUILD — top-row summary, chart, breakdown, year-by-year, CTA, admin,
   print stylesheet.
   ========================================================================== */

/* --- "Your Results for {Company}" banner ------------------------------- */
.results-banner {
  background: var(--brand-navy);
  color: #fff;
  border-radius: var(--radius);
  padding: 1rem 1.5rem;
  margin-bottom: 1.25rem;
  border-left: 6px solid var(--brand-yellow);
}

.rb-inner {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.rb-eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--brand-yellow);
  margin-bottom: 0.125rem;
}

.rb-title {
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
}

.rb-echo {
  font-size: 0.875rem;
  color: #d6e3f0;
  margin-top: 0.25rem;
  line-height: 1.4;
}

.rb-echo-dim {
  color: #a8bdd4;
  font-size: 0.8125rem;
  margin-top: 0.125rem;
}

.rb-actions {
  flex-shrink: 0;
}

.rb-edit {
  background: transparent;
  color: var(--brand-yellow);
  border: 1px solid var(--brand-yellow);
  padding: 0.375rem 0.875rem;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.rb-edit:hover {
  background: var(--brand-yellow);
  color: var(--brand-navy);
}

@media (max-width: 560px) {
  .rb-inner { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .rb-actions { align-self: stretch; }
  .rb-edit { width: 100%; }
}

/* --- top-row summary (two cards side by side) -------------------------- */
.summary-row {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 720px) {
  .summary-row { grid-template-columns: 1fr; }
}

.summary-tier,
.summary-roi {
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  border: 2px solid;
}

.summary-tier {
  background: linear-gradient(135deg, #eaf5fb 0%, #f2f8fd 100%);
  border-color: var(--color-accent);
}

.summary-roi {
  background: linear-gradient(135deg, #fff9e6 0%, #fffbeb 100%);
  border-color: var(--brand-yellow);
}

.summary-eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.summary-tier-name {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--brand-navy);
  line-height: 1.1;
}

.summary-tier-head {
  color: var(--color-text-muted);
  margin: 0.125rem 0 0.75rem;
  font-size: 0.9375rem;
}

.summary-price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.summary-price-big {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--brand-navy);
  line-height: 1;
}

.summary-price-unit {
  font-size: 1rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.summary-price-sub {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: 0.125rem;
}

.summary-why {
  margin-top: 0.875rem;
  padding: 0.75rem 0.875rem;
  background: rgba(0, 169, 223, 0.08);
  border-left: 3px solid var(--color-accent);
  border-radius: 4px;
}

.summary-why-head {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: var(--color-accent-dark);
  margin-bottom: 0.25rem;
}

.summary-why p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text);
}

.summary-included {
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 1px dashed rgba(12, 35, 64, 0.18);
}

.summary-included-head {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-navy);
  font-weight: 800;
  margin-bottom: 0.375rem;
}

.summary-included ul {
  margin: 0.25rem 0 0.5rem 1.125rem;
  padding: 0;
  font-size: 0.9375rem;
}

.summary-included li { margin-bottom: 0.125rem; }

.summary-included-assists {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-top: 0.25rem;
}

.summary-roi-big {
  font-size: 3rem;
  font-weight: 800;
  color: var(--brand-navy);
  line-height: 1;
  margin-top: 0.25rem;
}

.summary-roi-sub {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: 0.375rem;
}

/* --- standalone 3-year net impact card (full-width, below summary-row) -- */
.summary-3yr-card {
  background: linear-gradient(135deg, #f0f7ed 0%, #fafde6 100%);
  border: 2px solid var(--brand-lime);
  border-radius: var(--radius);
  padding: 1.25rem 1.75rem;
  margin-bottom: 1.5rem;
}

.s3-inner {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 1.5rem 2rem;
  align-items: center;
}

@media (max-width: 720px) {
  .s3-inner { grid-template-columns: 1fr; gap: 1rem; }
}

.s3-left { min-width: 0; }

.s3-big {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--brand-navy);
  line-height: 1;
  margin-top: 0.25rem;
}

.s3-sub {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: 0.25rem;
}

.s3-right {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

@media (max-width: 560px) {
  .s3-right { grid-template-columns: 1fr; }
}

.s3-mini {
  background: #fff;
  border: 1px solid rgba(12, 35, 64, 0.10);
  border-radius: 6px;
  padding: 0.625rem 0.875rem;
}

.s3-mini-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.s3-mini-value {
  font-size: 1.125rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin-top: 0.125rem;
}

.s3-mini-green { color: #0b6b3a; }
.s3-mini-amber { color: #9a6d00; }
.s3-mini-muted { color: var(--color-text-muted); }

/* --- summary-split (guaranteed vs upside, inside ROI card) ------------- */
.summary-split {
  margin-top: 0.875rem;
  padding: 0.75rem 0.875rem;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(12, 35, 64, 0.12);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.summary-split-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.9375rem;
  color: var(--color-text);
  line-height: 1.2;
}

.summary-split-label {
  color: var(--color-text-muted);
}

.summary-split-value {
  font-weight: 700;
  color: var(--brand-navy);
  font-variant-numeric: tabular-nums;
}

.summary-split-row.guaranteed .summary-split-value {
  color: #0b6b3a;                /* green — this is the trust-worthy number */
}

.summary-split-row.upside .summary-split-value {
  color: #9a6d00;                /* amber — optional upside */
}

.summary-split-row.total {
  border-top: 1px solid rgba(12, 35, 64, 0.15);
  padding-top: 0.375rem;
  margin-top: 0.125rem;
}

.summary-split-row.total .summary-split-label,
.summary-split-row.total .summary-split-value {
  font-weight: 800;
  color: var(--brand-navy);
}

.summary-split-row.cost .summary-split-label,
.summary-split-row.cost .summary-split-value {
  color: var(--color-text-muted);
}

/* Dual-number display: left = admin-default anchor, right = slider-adjusted.
   The arrow and "at X%" tag appear only when the slider has actually moved
   off the admin default (see renderSummary conditional in app.js). */
.summary-split-base-note {
  display: block;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  font-weight: 500;
  margin-top: 0.125rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.summary-split-value {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  text-align: right;
}

.summary-split-adjusted {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: rgba(12, 35, 64, 0.06);
}

.summary-split-row.guaranteed .summary-split-adjusted {
  background: rgba(11, 107, 58, 0.12);
  color: #0b6b3a;
}

.summary-split-row.upside .summary-split-adjusted {
  background: rgba(154, 109, 0, 0.14);
  color: #9a6d00;
}

.ssa-arrow {
  font-weight: 900;
  opacity: 0.75;
}

.ssa-at {
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.75;
  margin-left: 0.125rem;
  text-transform: none;
  letter-spacing: 0;
}

.summary-realization-note {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.45;
  padding-top: 0.625rem;
  border-top: 1px dashed rgba(12, 35, 64, 0.18);
}

/* ==========================================================================
   GROSS PROFIT CALLOUTS
   Two visible blocks (one in the form, one in the results summary) that
   make the "ROI is calculated on gross profit, not full revenue"
   assumption impossible to miss.
   ========================================================================== */

/* In-form callout — sits inside the "Your annual business pipeline"
   fieldset so the assumption is disclosed BEFORE the user sees ROI. */
.form-gp-callout {
  margin: 0 0 1rem;
  padding: 1rem 1.125rem;
  background: #fff8e1;            /* warm cream */
  border: 1px solid #f1c44a;      /* brand-yellow rim */
  border-left: 4px solid #f1c44a;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.fgp-badge {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #7a5a00;
}

.fgp-body {
  font-size: 0.875rem;
  line-height: 1.55;
  color: #3a2c00;
}

.fgp-body a {
  color: #6b4a00;
  text-decoration: underline;
}

/* Results-summary callout — bottom of the right-hand summary card. Same
   warm-yellow accent so the user sees the same visual signal across the
   form and the result. */
.summary-gp-callout {
  margin-top: 0.875rem;
  padding: 0.875rem 1rem;
  background: #fff8e1;
  border: 1px solid #f1c44a;
  border-left: 4px solid #f1c44a;
  border-radius: var(--radius);
}

.sgp-badge {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #7a5a00;
  margin-bottom: 0.35rem;
}

.sgp-body {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #3a2c00;
}

/* On print, keep the gross-profit callouts visible — they're load-bearing
   context for the ROI number, not chrome. */
@media print {
  .form-gp-callout,
  .summary-gp-callout {
    background: #fffbe9;
    border-color: #c9a23a;
    color: #2a2000;
  }
}

/* ==========================================================================
   WHAT-IF REALIZATION SLIDERS
   Live controls shown below the summary-row on the results page. Dragging
   the sliders calls calculateROI() again with override factors and re-renders
   summary/chart/breakdown/yearly. Admin defaults are not mutated.
   ========================================================================== */
.realization-controls {
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.5rem;
  background: #eef5fb;
  border: 1px solid #b9d8ec;
  border-radius: var(--radius);
}

.rc-head {
  margin-bottom: 1rem;
}

.rc-head h3 {
  margin: 0 0 0.25rem;
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--brand-navy);
}

.rc-head p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.rc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 2rem;
}

@media (max-width: 720px) {
  .rc-grid { grid-template-columns: 1fr; }
}

.rc-slider {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.rc-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}

.rc-label-row label {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--brand-navy);
}

.rc-out {
  font-variant-numeric: tabular-nums;
  background: var(--brand-navy);
  color: #fff;
  font-weight: 800;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  font-size: 0.875rem;
  min-width: 3rem;
  text-align: center;
}

.rc-slider small {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Range input styling — unified across Chromium/WebKit/Firefox */
.rc-slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: #cfe1ee;
  border-radius: 3px;
  outline: none;
  margin: 0.25rem 0;
  cursor: pointer;
}

.rc-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--brand-navy);
  border: 3px solid #fff;
  box-shadow: 0 1px 3px rgba(12, 35, 64, 0.25);
  cursor: pointer;
}

.rc-slider input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--brand-navy);
  border: 3px solid #fff;
  box-shadow: 0 1px 3px rgba(12, 35, 64, 0.25);
  cursor: pointer;
}

.rc-slider input[type="range"]:focus::-webkit-slider-thumb {
  outline: 2px solid var(--brand-yellow);
  outline-offset: 2px;
}

.rc-foot {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}

.rc-foot .btn-secondary {
  font-size: 0.875rem;
  padding: 0.375rem 0.875rem;
}

/* --- growing-ROI chart ------------------------------------------------- */
.chart-block {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

.chart-head h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--brand-navy);
}

.chart-sub {
  margin: 0.125rem 0 1rem;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.chart-wrap {
  position: relative;
  height: 320px;
}

@media (max-width: 560px) {
  .chart-wrap { height: 260px; }
}

/* "continues to grow" arrow — sits at the top-right of the chart wrap */
.chart-arrow {
  position: absolute;
  right: 8px;
  top: 6px;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  pointer-events: none;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand-navy);
  background: rgba(255, 198, 45, 0.85);
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.chart-arrow-line { display: none; }
.chart-arrow-head { color: var(--brand-navy); }
.chart-arrow-label { white-space: nowrap; }

/* --- 3-component breakdown -------------------------------------------- */
.roi-breakdown {
  background: #f7f9fb;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

.roi-breakdown h3 {
  margin: 0 0 0.375rem;
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--brand-navy);
}

.bk-intro {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.bk-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.bk-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 0.875rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--color-border-soft);
  border-radius: 6px;
  padding: 0.875rem 1rem;
}

.bk-swatch {
  width: 12px;
  height: 32px;
  border-radius: 3px;
  margin-top: 3px;
}

.bk-title {
  font-weight: 800;
  color: var(--brand-navy);
}

.bk-note {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: 0.125rem;
  line-height: 1.45;
}

.bk-value {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--brand-navy);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.bk-value span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-left: 0.125rem;
}

.bk-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 2px solid var(--brand-yellow);
}

.bk-total-label {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
  color: var(--brand-navy);
}

.bk-total-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--brand-navy);
  font-variant-numeric: tabular-nums;
}

.bk-flooring {
  margin-top: 0.875rem;
  padding: 0.625rem 0.875rem;
  background: #fff8e6;
  border: 1px solid var(--brand-yellow);
  border-radius: 6px;
  font-size: 0.875rem;
  color: var(--brand-navy);
}

/* --- guaranteed vs upside sections --------------------------------- */
.bk-section {
  margin-top: 1rem;
  padding: 0.875rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: #fff;
}

.bk-guaranteed { border-left: 4px solid #0b6b3a; }    /* green accent */
.bk-upside     { border-left: 4px solid #d49b00; background: #fffdf5; } /* amber accent */

.bk-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  color: var(--brand-navy);
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.625rem;
}

.bk-factor-pill {
  display: inline-block;
  background: var(--brand-navy);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  text-transform: none;
  letter-spacing: 0;
}

.bk-guaranteed .bk-factor-pill { background: #0b6b3a; }
.bk-upside     .bk-factor-pill { background: #9a6d00; }

.bk-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 0.625rem;
  padding-top: 0.5rem;
  border-top: 1px dashed rgba(12, 35, 64, 0.15);
  font-weight: 700;
  color: var(--brand-navy);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.bk-subtotal-upside { color: #9a6d00; }

.bk-gross {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-top: 0.125rem;
  text-align: right;
  font-style: italic;
}

/* --- year-by-year --------------------------------------------------- */
.roi-yearly {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem 1.25rem;
  margin-bottom: 1.5rem;
}

.roi-yearly h3 {
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--brand-navy);
}

.roi-yearly .roi-detail-table th { background: #f7f9fb; }
.roi-yearly .roi-detail-table td:not(:first-child),
.roi-yearly .roi-detail-table th:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.roi-yearly .total-row td { border-top: 2px solid var(--brand-navy); }
.roi-yearly .total-row { background: #f7f9fb; }

/* override: first-column should be left-aligned */
.roi-yearly .roi-detail-table td:first-child,
.roi-yearly .roi-detail-table th:first-child {
  text-align: left;
}

/* --- tier comparison extras (unit suffix) ----------------------------- */
.tier-cell .cost-unit {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-left: 0.125rem;
}

/* --- CTA block --------------------------------------------------------- */
.cta-block {
  text-align: center;
  padding: 1.5rem 1rem;
  margin-top: 1.5rem;
  background: var(--brand-navy);
  color: #fff;
  border-radius: var(--radius);
}

.cta-block h3 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
}

.cta-block p { margin: 0; font-size: 1rem; line-height: 1.8; }

.cta-primary,
.cta-secondary {
  color: var(--brand-yellow);
  font-weight: 700;
  text-decoration: underline;
}

.cta-primary:hover,
.cta-secondary:hover { color: #fff; }

/* --- admin page extras ------------------------------------------------- */
.admin-head {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border-soft);
}

.admin-sub { color: var(--color-text-muted); font-size: 0.9375rem; }

.admin-security-note {
  background: #fff8e6;
  border: 1px solid var(--brand-yellow);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--brand-navy);
  margin: 0 0 1rem;
}

code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  background: #f0f4f8;
  padding: 0.0625rem 0.375rem;
  border-radius: 3px;
  font-size: 0.9em;
}

/* ==========================================================================
   "HOW WE CALCULATED THIS" — transparency panel
   Expandable <details> block on the results page that lists every
   admin assumption fed into the numbers above. Stays in sync with the
   what-if sliders — the values here reflect the live (slider-adjusted)
   roi object.
   ========================================================================== */
.calc-details {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.625rem 1rem;
  margin-bottom: 1.5rem;
}

.calc-details[open] { padding-bottom: 1.25rem; }

.calc-details summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--brand-navy);
  font-size: 1rem;
  padding: 0.625rem 0;
  user-select: none;
  outline: none;
}

.calc-details summary:hover { color: var(--color-accent-dark); }

.calc-details[open] summary {
  border-bottom: 1px solid var(--color-border-soft);
  margin-bottom: 1rem;
}

.calc-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.calc-intro {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.calc-group h4 {
  margin: 0 0 0.375rem;
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--brand-navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.calc-logic {
  margin: 0 0 0.625rem;
  font-size: 0.875rem;
  color: var(--color-text);
  line-height: 1.55;
  background: #f7f9fb;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--color-accent);
  border-radius: 4px;
}

.calc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.calc-table td {
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid var(--color-border-soft);
  vertical-align: top;
}

.calc-table td:first-child {
  color: var(--color-text-muted);
  width: 60%;
}

.calc-table td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--brand-navy);
}

.calc-table tr:last-child td { border-bottom: none; }

@media (max-width: 560px) {
  .calc-table td:first-child  { width: 55%; }
  .calc-table td              { font-size: 0.8125rem; padding: 0.375rem 0.375rem; }
}

/* ==========================================================================
   "THE RESEARCH" SECTION
   Appears below the advisor results and prints as its own page (page-break-before
   rule lives in the print stylesheet below). On screen it's a clean, readable
   justification block the user can hand to a skeptical CFO or reviewer.
   ========================================================================== */
.research-section {
  margin-top: 2.5rem;
  padding: 1.75rem 1.75rem 1.25rem;
  background: #f7f9fb;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.research-head {
  border-bottom: 2px solid var(--brand-navy);
  padding-bottom: 0.75rem;
  margin-bottom: 1.5rem;
}

.research-head h2 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--brand-navy);
  letter-spacing: -0.01em;
}

.research-sub {
  margin: 0.5rem 0 0;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.55;
}

.research-item {
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px dashed var(--color-border);
}

.research-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.research-tag {
  display: inline-block;
  background: var(--brand-navy);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 0.5rem;
}

.research-tag strong { color: var(--brand-yellow); }

.research-item h3 {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--brand-navy);
}

.research-item p {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text);
}

.research-math {
  background: #fff;
  border-left: 3px solid var(--brand-cyan);
  padding: 0.625rem 0.875rem;
  border-radius: 4px;
  font-size: 0.9375rem;
  margin: 0.5rem 0 0.75rem;
}

.research-note {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}

.research-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 0.75rem;
  font-size: 0.9rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
}

.research-table th,
.research-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.research-table thead th {
  background: #eef2f6;
  color: var(--brand-navy);
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.research-table tbody tr:last-child td { border-bottom: none; }

.research-stress {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem 1.125rem;
  margin-top: 0.5rem;
}

/* ==========================================================================
   MOBILE REFINEMENTS (<=560px / iPhone SE widths)
   Tightens padding, lets wide tables scroll horizontally, stacks
   breakdown rows, and keeps the dual-number summary pills wrapping
   instead of overflowing.
   ========================================================================== */
@media (max-width: 560px) {

  /* Card padding — shave from 2rem to 1.25rem so content doesn't crush */
  .card { padding: 1.25rem; }

  /* Summary cards have their own padding */
  .summary-tier, .summary-roi { padding: 1.125rem 1.25rem; }
  .summary-3yr-card { padding: 1rem 1.25rem; }
  .results-banner { padding: 0.875rem 1.125rem; }

  /* Top-row stats — reduce hero sizes so they fit */
  .summary-tier-name { font-size: 1.5rem; }
  .summary-roi-big   { font-size: 2.25rem; }
  .summary-price-big { font-size: 1.875rem; }
  .s3-big            { font-size: 1.875rem; }

  /* Summary-split dual-number rows: let adjusted pill wrap to next line */
  .summary-split-row { flex-wrap: wrap; }
  .summary-split-value {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.375rem;
  }

  /* Breakdown rows — stack value below label so nothing gets clipped */
  .bk-row { grid-template-columns: 12px 1fr; }
  .bk-value {
    grid-column: 1 / -1;
    text-align: left;
    margin-top: 0.25rem;
    font-size: 1.125rem;
  }
  .bk-gross { text-align: left; }

  /* Year-by-year table — 7 numeric columns never fit at 375px, so
     give it horizontal scroll within its container */
  .roi-yearly { padding: 1rem; }
  #roi-yearly-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -0.5rem;
    padding: 0 0.5rem;
  }
  .roi-yearly .roi-detail-table {
    min-width: 560px;
    font-size: 0.8125rem;
  }
  .roi-yearly .roi-detail-table th,
  .roi-yearly .roi-detail-table td {
    padding: 0.375rem 0.5rem;
  }

  /* Research tables — reduce padding and text size */
  .research-section { padding: 1.25rem; }
  .research-table   { font-size: 0.8125rem; }
  .research-table th,
  .research-table td { padding: 0.375rem 0.5rem; }
  .research-math    { font-size: 0.875rem; }

  /* Calc-details (transparency panel) already has a mobile rule above */

  /* CTA block wraps cleanly at mobile */
  .cta-block p { line-height: 2; }

  /* Header banner — compress on very narrow widths */
  .rb-title  { font-size: 1.1875rem; }
  .rb-echo   { font-size: 0.8125rem; }

  /* Admin layout also benefits */
  .admin-head { flex-direction: column; gap: 0.625rem; }
}

/* ==========================================================================
   PRINT STYLESHEET
   Click "Print or save as PDF" on the results page to use the browser's
   native print-to-PDF flow. This stylesheet hides nav/form/buttons and
   styles the results for a clean printed document.
   ========================================================================== */
@media print {
  /* Page setup: Letter portrait, reasonable margins */
  @page { size: letter portrait; margin: 0.5in; }

  html, body {
    background: #fff !important;
    color: #000;
    font-size: 11pt;
  }

  /* Hide everything NOT meant to print */
  .no-print,
  .page-header,
  .page-footer,
  #form-card,
  #edit-btn,
  #print-btn,
  .chart-arrow,
  .admin-head,
  #login-card,
  #admin-card .actions { display: none !important; }

  .container { max-width: 100%; padding: 0; }

  /* Print header (visible only on print) */
  .results::before {
    content: "Staffility — License Tier & Annual ROI Advisor";
    display: block;
    font-size: 14pt;
    font-weight: 800;
    color: #0C2340;
    border-bottom: 2px solid #0C2340;
    padding-bottom: 6pt;
    margin-bottom: 12pt;
  }

  .card {
    box-shadow: none;
    border: none;
    padding: 0;
    margin: 0;
  }

  .summary-row { grid-template-columns: 1fr 1fr; gap: 0.75rem; }

  .summary-tier,
  .summary-roi {
    border-width: 1px;
    background: #fff !important;
    padding: 0.75rem;
  }

  .summary-roi-big { font-size: 2rem; }
  .summary-price-big { font-size: 1.75rem; }

  .summary-3yr-card {
    background: #fff !important;
    border: 1px solid var(--brand-lime);
    padding: 0.625rem 0.875rem;
    margin-bottom: 0.75rem;
    page-break-inside: avoid;
  }
  .s3-big { font-size: 1.5rem; }
  .s3-mini-value { font-size: 0.95rem; }

  .chart-block,
  .roi-breakdown,
  .roi-yearly,
  .all-tiers {
    page-break-inside: avoid;
    margin-bottom: 0.75rem;
  }

  .chart-wrap { height: 240px; }

  .cta-block {
    background: #f0f4f8 !important;
    color: #0C2340 !important;
    border: 1px solid #0C2340;
    margin-top: 0.5rem;
  }

  .cta-block h3 { color: #0C2340 !important; }
  .cta-primary,
  .cta-secondary { color: #0C2340 !important; text-decoration: underline; }

  /* "The Research" prints on its own page */
  .research-section {
    page-break-before: always;
    break-before: page;
    background: #fff !important;
    border: none;
    padding: 0;
    margin-top: 0;
  }

  .research-section::before {
    content: "Staffility — The Research Behind Your ROI";
    display: block;
    font-size: 14pt;
    font-weight: 800;
    color: #0C2340;
    border-bottom: 2px solid #0C2340;
    padding-bottom: 6pt;
    margin-bottom: 12pt;
  }

  .research-head { border-bottom: 1px solid #0C2340; }
  .research-head h2 { font-size: 14pt; }
  .research-sub { font-size: 10pt; }

  .research-item {
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 10pt;
    padding-bottom: 8pt;
    border-bottom: 1px dashed #d0d7de;
  }

  .research-item h3 { font-size: 11pt; margin-bottom: 4pt; }
  .research-item p,
  .research-note,
  .research-math { font-size: 10pt; line-height: 1.4; }
  .research-table { font-size: 9.5pt; }
  .research-table thead th { background: #eef2f6 !important; }

  .research-tag {
    background: #0C2340 !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .research-tag strong { color: #F4D35E !important; }
}