/* =========================================================
   Margin Trek · B2B Costing & Profit Engine
   styles.css — premium light design system

   1.  Design tokens
   2.  Base / reset
   3.  Multi-page view controller
   4.  Buttons
   5.  Floating glass nav
   6.  Hero
   7.  Hero dashboard mockup
   8.  Stats strip
   9.  Section headers
   10. Bento feature grid
   11. Registration page
   12. Workspace shell & action bar
   13. Cards
   14. Form controls
   15. Dynamic cost registries
   16. Results panel
   17. Scenario histogram & category breakdown
   18. Saved calculations
   19. Rating & feedback
   20. Pricing
   21. CTA banner & footer
   22. Print media (A4 quotation)
   ========================================================= */


/* ---------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------- */
:root{
  /* Brand */
  --ink:#16271f;
  --teal:#2e6e73;
  --amber:#bd6f24;
  --paper:#f3eee4;
  --white:#ffffff;

  /* Light premium surfaces */
  --bg:#f7f6f2;
  --bg-2:#fdfcfa;
  --surface:#ffffff;
  --surface-2:#fbfaf7;
  --glass:rgba(255,255,255,.72);
  --glass-strong:rgba(255,255,255,.86);

  /* Hairline borders — the low-opacity look, on light */
  --hair:rgba(22,39,31,.08);
  --hair-2:rgba(22,39,31,.14);
  --hair-3:rgba(22,39,31,.22);

  /* Brand tints */
  --ink-2:#26392f;
  --ink-3:#4a5f52;
  --teal-dark:#214f50;
  --teal-light:#5b9a9c;
  --teal-soft:#8fc0c2;
  --teal-wash:#eaf3f2;
  --amber-dark:#9a5818;
  --amber-soft:#f0d9b8;
  --amber-wash:#fdf4e8;

  --card:#ffffff;
  --card-2:#fbfaf7;

  --line:var(--hair-2);
  --line-2:var(--hair-3);
  --muted:#7d7668;
  --muted-2:#9a9385;
  --good:#3a7d44;
  --good-wash:#e8f2e9;
  --bad:#a23b2d;
  --bad-wash:#fbeae6;

  /* Categories */
  --cat-logistics:#214f50;
  --cat-food:#bd6f24;
  --cat-permits:#5b9a9c;
  --cat-gear:#8a6f3e;
  --cat-stay:#3a7d44;
  --cat-staff:#4a5f52;
  --cat-misc:#857c6c;

  /* Type */
  --font-sans:'Inter','IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Consolas,monospace;

  /* Geometry */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:32px;
  --radius:var(--r-md);
  --radius-sm:var(--r-sm);
  --radius-xs:8px;

  --shell-max:1180px;
  --gutter:26px;
  --nav-h:64px;

  /* Elevation — soft, diffuse, never harsh */
  --sh-xs:0 1px 2px rgba(22,39,31,.04);
  --sh-sm:0 2px 8px -2px rgba(22,39,31,.06), 0 1px 2px rgba(22,39,31,.04);
  --sh-md:0 8px 24px -8px rgba(22,39,31,.10), 0 2px 6px -2px rgba(22,39,31,.05);
  --sh-lg:0 24px 60px -20px rgba(22,39,31,.16), 0 8px 20px -12px rgba(22,39,31,.08);
  --sh-xl:0 48px 100px -32px rgba(22,39,31,.24), 0 16px 40px -20px rgba(22,39,31,.12);

  /* Glows — the premium accent, tuned soft for light backgrounds */
  --glow-teal:0 0 40px rgba(46,110,115,.18);
  --glow-amber:0 0 40px rgba(189,111,36,.20);
  --glow-teal-strong:0 8px 32px -8px rgba(46,110,115,.42);
  --glow-amber-strong:0 8px 32px -8px rgba(189,111,36,.42);

  --reg-cols:minmax(0,1fr) 150px 110px 76px 40px;
}


/* ---------------------------------------------------------
   2. BASE / RESET
   --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--font-sans);
  font-size:15px;
  line-height:1.55;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:'cv02','cv03','cv04','ss01';
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.12;
}

button{font-family:inherit}
em{font-style:italic}
b,strong{font-weight:600}
a{color:inherit}

.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
[hidden]{display:none !important}

:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}

::selection{background:rgba(46,110,115,.18)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* Gradient-clipped text — used on the hero and final CTA */
.grad-text{
  background:linear-gradient(105deg,var(--ink) 0%,var(--teal-dark) 38%,var(--teal) 58%,var(--amber) 92%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
/* Safety net: without background-clip:text the rules above would paint the
   headline transparent over a gradient box — i.e. an invisible headline.
   Anything that cannot clip to text gets solid ink instead. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .grad-text{
    background:none;
    -webkit-text-fill-color:var(--ink);
    color:var(--ink);
  }
}


/* ---------------------------------------------------------
   3. MULTI-PAGE VIEW CONTROLLER
   --------------------------------------------------------- */
.page-view{display:block}
.page-view.hidden{display:none !important}


/* ---------------------------------------------------------
   4. BUTTONS
   --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:13.5px;font-weight:600;letter-spacing:-.01em;
  text-align:center;text-decoration:none;white-space:nowrap;
  border:1px solid transparent;border-radius:var(--r-sm);
  padding:10px 18px;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,transform .15s,box-shadow .25s;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{cursor:not-allowed;opacity:.6}

/* Primary — glowing teal */
.btn-primary{
  background:linear-gradient(180deg,var(--teal) 0%,var(--teal-dark) 100%);
  color:var(--white);
  box-shadow:var(--glow-teal-strong), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover:not(:disabled){
  box-shadow:0 12px 40px -8px rgba(46,110,115,.55), inset 0 1px 0 rgba(255,255,255,.24);
  transform:translateY(-1px);
}

/* Amber — the loudest CTA */
.btn-amber{
  background:linear-gradient(180deg,#cd7d2c 0%,var(--amber) 60%,var(--amber-dark) 100%);
  color:var(--white);
  box-shadow:var(--glow-amber-strong), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-amber:hover:not(:disabled){
  box-shadow:0 14px 44px -8px rgba(189,111,36,.58), inset 0 1px 0 rgba(255,255,255,.26);
  transform:translateY(-2px);
}

/* Glass — sits on any light surface */
.btn-ghost{
  background:var(--glass);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:var(--ink);border-color:var(--hair-2);
  box-shadow:var(--sh-xs);
}
.btn-ghost:hover:not(:disabled){
  background:var(--white);border-color:var(--teal-soft);
  box-shadow:var(--sh-sm),0 0 0 4px rgba(46,110,115,.06);
}

.btn-outline{
  background:var(--glass);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:var(--ink);border-color:var(--hair-2);
}
.btn-outline:hover{background:var(--white);border-color:var(--teal-soft)}

.btn-link{
  background:none;border-color:transparent;color:var(--muted);
  text-decoration:none;padding-left:10px;padding-right:10px;
}
.btn-link:hover:not(:disabled){color:var(--bad);background:var(--bad-wash)}

.btn-lg{padding:15px 30px;font-size:15px;border-radius:var(--r-md)}
.btn-block{display:flex;width:100%}
.btn-sm{font-size:12px;padding:7px 13px}
.btn-nav{padding:9px 17px}

.btn-add{
  display:flex;width:100%;margin-top:12px;
  background:var(--surface-2);color:var(--teal-dark);
  border:1px dashed var(--teal-soft);
  padding:12px 14px;font-size:13.5px;
}
.btn-add:hover{
  background:var(--teal-wash);border-style:solid;border-color:var(--teal-light);
  box-shadow:0 0 0 4px rgba(46,110,115,.06);
}

.btn-danger{background:var(--bad-wash);color:var(--bad);border-color:rgba(162,59,45,.2)}
.btn-danger:hover:not(:disabled){background:#f6ded8}


/* ---------------------------------------------------------
   5. FLOATING GLASS NAV
   --------------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:90;
  padding:14px var(--gutter) 0;
  background:transparent;
}
.nav-inner{
  max-width:var(--shell-max);margin:0 auto;
  height:var(--nav-h);
  padding:0 10px 0 22px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--glass-strong);
  backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid var(--hair);
  border-radius:999px;
  box-shadow:var(--sh-md), inset 0 1px 0 rgba(255,255,255,.6);
}
.nav-logo{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-size:19px;font-weight:600;
  letter-spacing:-.02em;text-decoration:none;color:var(--ink);cursor:pointer;
}
/* Mark-only crop of the logo — the stacked lockup is unreadable at nav size,
   so the mountain mark carries the brand and the wordmark stays live text. */
.nav-mark{
  height:30px;width:auto;flex:none;display:block;
}
.nav-word span{
  background:linear-gradient(100deg,var(--amber),#d98b3a);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .nav-word span{background:none;-webkit-text-fill-color:var(--amber);color:var(--amber)}
}
@media (max-width:480px){
  .nav-word{display:none}
  .nav-mark{height:32px}
}
.nav-links{display:flex;align-items:center;gap:8px}
.nav-links a:not(.btn){
  font-size:13.5px;font-weight:500;color:var(--muted);
  text-decoration:none;padding:8px 14px;border-radius:999px;
  transition:color .2s,background .2s;
}
.nav-links a:not(.btn):hover{color:var(--ink);background:rgba(22,39,31,.05)}

.nav-focused .nav-inner{border-radius:var(--r-lg);padding-right:14px}
.nav-focused .nav-links{gap:14px}

.cache-note{
  font-size:11.5px;color:var(--muted);
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:999px;
  background:var(--good-wash);border:1px solid rgba(58,125,68,.16);
}
.cache-note::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--good);flex:none;
  box-shadow:0 0 0 3px rgba(58,125,68,.16);
}
.cache-note.saving::before{background:var(--amber);box-shadow:0 0 0 3px rgba(189,111,36,.18)}

@media (max-width:820px){
  .nav-links a:not(.btn){display:none}
  .cache-note{display:none}
  .nav-inner{padding-left:18px}
}


/* ---------------------------------------------------------
   6. HERO
   --------------------------------------------------------- */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(900px 420px at 18% -10%, rgba(46,110,115,.16), transparent 62%),
    radial-gradient(760px 380px at 84% 4%, rgba(189,111,36,.13), transparent 60%),
    radial-gradient(600px 300px at 50% 100%, rgba(91,154,156,.10), transparent 70%),
    linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 100%);
  border-bottom:1px solid var(--hair);
}
/* Faint contour lines, kept from the original identity */
.hero .contours{
  position:absolute;inset:0;opacity:.10;pointer-events:none;
  mix-blend-mode:multiply;
}
.hero .contours g{stroke:var(--teal-dark)}

.hero-inner{
  position:relative;
  max-width:960px;margin:0 auto;
  padding:64px var(--gutter) 0;
  text-align:center;
}

/* Pill badge */
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 16px 7px 8px;margin-bottom:28px;
  font-size:12.5px;font-weight:500;color:var(--ink-2);
  background:var(--glass-strong);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--hair-2);border-radius:999px;
  box-shadow:var(--sh-sm), var(--glow-teal);
}
.hero-badge .chip{
  padding:3px 10px;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--white);
  background:linear-gradient(100deg,var(--teal),var(--teal-dark));
}

.hero h1{
  font-size:clamp(38px,6.6vw,74px);
  line-height:1.02;
  letter-spacing:-.035em;
  margin-bottom:22px;
}
.hero-sub{
  max-width:620px;margin:0 auto 34px;
  font-size:17.5px;line-height:1.6;color:var(--muted);
  letter-spacing:-.01em;
}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.hero-note{
  margin-top:22px;font-size:12.5px;color:var(--muted-2);
  display:flex;gap:18px;justify-content:center;flex-wrap:wrap;
}
.hero-note span{display:inline-flex;align-items:center;gap:6px}
.hero-note span::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--teal-soft);
}

@media (max-width:640px){
  .hero-inner{padding:44px 18px 0}
  .hero-sub{font-size:16px}
}


/* ---------------------------------------------------------
   7. HERO DASHBOARD MOCKUP
   --------------------------------------------------------- */
.hero-visual{
  position:relative;
  max-width:1020px;margin:56px auto 0;
  padding:0 var(--gutter);
  perspective:2000px;
}
.hero-visual::after{
  /* soft glow pooled beneath the floating panel */
  content:"";position:absolute;left:12%;right:12%;bottom:-30px;height:120px;
  background:radial-gradient(ellipse at center, rgba(46,110,115,.22), transparent 70%);
  filter:blur(26px);z-index:0;pointer-events:none;
}

.mock{
  position:relative;z-index:1;
  /* --rx / --ry / --lift are driven by the cursor; the 9deg base tilt stays here
     so the panel still sits in perspective with JS disabled. */
  transform:
    rotateX(calc(9deg + var(--rx,0deg)))
    rotateY(var(--ry,0deg))
    translateY(var(--lift,0px))
    scale(.985);
  transform-origin:50% 0;
  background:var(--surface);
  border:1px solid var(--hair-2);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:var(--sh-xl), 0 0 60px rgba(46,110,115,.10);
  overflow:hidden;
  will-change:transform;
  /* slow, eased return when the cursor leaves */
  transition:transform .55s cubic-bezier(.22,1,.36,1), box-shadow .45s ease;
}
/* while tracking the cursor the panel must keep up, so the easing shortens */
.hero-visual.tilting .mock{
  transition:transform .12s ease-out, box-shadow .45s ease;
  box-shadow:var(--sh-xl), 0 0 80px rgba(46,110,115,.20);
}
/* the glow beneath stays put, which is what sells the float */
.hero-visual.tilting::after{opacity:.9}
.hero-visual::after{transition:opacity .45s ease}

@media (prefers-reduced-motion:reduce){
  .mock{transform:rotateX(9deg) scale(.985) !important;transition:none}
}
.mock-bar{
  display:flex;align-items:center;gap:8px;
  padding:13px 18px;
  background:var(--surface-2);
  border-bottom:1px solid var(--hair);
}
.mock-dot{width:10px;height:10px;border-radius:50%;background:var(--hair-3)}
.mock-title{
  margin-left:10px;font-size:11.5px;color:var(--muted);
  font-family:var(--font-mono);
}
.mock-body{
  display:grid;grid-template-columns:1.35fr 1fr;gap:16px;
  padding:18px;
}
@media (max-width:760px){.mock-body{grid-template-columns:1fr}}

.mock-panel{
  background:var(--surface-2);
  border:1px solid var(--hair);
  border-radius:var(--r-md);
  padding:15px;
}
.mock-label{
  font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:12px;
}
.mock-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 0;border-bottom:1px dashed var(--hair);
  font-size:12.5px;
}
.mock-row:last-child{border-bottom:0}
.mock-stripe{width:3px;height:20px;border-radius:2px;flex:none}
.mock-row .nm{flex:1;color:var(--ink-2)}
.mock-row .vl{font-family:var(--font-mono);font-weight:600;color:var(--teal-dark)}

.mock-bars{display:flex;align-items:flex-end;gap:7px;height:84px;margin-top:4px}
.mock-bars i{
  flex:1;border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,var(--teal-light),var(--teal-dark));
}
.mock-bars i.hot{background:linear-gradient(180deg,#d98b3a,var(--amber-dark))}

.mock-ring{
  width:96px;height:96px;border-radius:50%;margin:2px auto 0;position:relative;
  background:conic-gradient(
    var(--cat-logistics) 0deg 84deg,
    var(--cat-food) 84deg 180deg,
    var(--cat-stay) 180deg 268deg,
    var(--cat-permits) 268deg 316deg,
    var(--cat-misc) 316deg 360deg);
  box-shadow:0 0 24px rgba(46,110,115,.16);
}
.mock-ring::after{
  content:"";position:absolute;inset:28%;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--hair);
}

.mock-total{
  margin-top:14px;padding:14px 16px;border-radius:var(--r-md);
  background:linear-gradient(150deg,var(--ink) 0%,var(--teal-dark) 100%);
  color:var(--paper);
  box-shadow:var(--glow-teal);
}
.mock-total .r{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.mock-total small{
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#a9c4bb;
}
.mock-total .big{font-family:var(--font-mono);font-size:23px;font-weight:600}
.mock-total .mid{font-family:var(--font-mono);font-size:14px;color:#cfe0d9}

.mock-pill{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  padding:5px 11px;border-radius:999px;
  font-size:11px;font-weight:600;
  background:var(--good-wash);color:var(--good);
  border:1px solid rgba(58,125,68,.18);
}


/* ---------------------------------------------------------
   8. STATS STRIP
   --------------------------------------------------------- */
.stats{
  background:var(--bg-2);
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
}
.stats-inner{
  max-width:var(--shell-max);margin:0 auto;
  padding:34px var(--gutter);
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;
}
@media (max-width:640px){.stats-inner{grid-template-columns:repeat(2,1fr);gap:26px}}
.stat .num{
  font-family:var(--font-mono);font-size:30px;font-weight:600;
  letter-spacing:-.02em;
  background:linear-gradient(160deg,var(--teal-dark),var(--teal));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.stat p{
  margin-top:6px;font-size:11px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted-2);
}


/* ---------------------------------------------------------
   9. SECTION HEADERS
   --------------------------------------------------------- */
.section{max-width:var(--shell-max);margin:0 auto;padding:96px var(--gutter)}
@media (max-width:640px){.section{padding:64px 18px}}

.section-head{max-width:660px;margin:0 auto 52px;text-align:center}
.section-label{
  display:inline-block;margin-bottom:16px;
  padding:5px 14px;border-radius:999px;
  font-size:10.5px;font-weight:700;line-height:1;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal-dark);
  background:var(--teal-wash);border:1px solid rgba(46,110,115,.14);
}
.section-head h2{
  font-size:clamp(28px,4.2vw,44px);
  line-height:1.08;letter-spacing:-.03em;margin-bottom:16px;
}
.lead{font-size:16.5px;line-height:1.62;color:var(--muted);letter-spacing:-.01em}


/* ---------------------------------------------------------
   10. BENTO FEATURE GRID
   --------------------------------------------------------- */
.bento{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
@media (max-width:900px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.bento{grid-template-columns:1fr}}

.bento-card{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  padding:26px;
  background:var(--surface);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
  transition:border-color .3s,box-shadow .3s,transform .3s;
}
.bento-card::before{
  /* the hover glow wash */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 200px at 50% 0%, rgba(46,110,115,.10), transparent 70%);
  opacity:0;transition:opacity .35s;
}
.bento-card:hover{
  border-color:rgba(46,110,115,.28);
  box-shadow:var(--sh-md), 0 0 40px rgba(46,110,115,.14);
  transform:translateY(-3px);
}
.bento-card:hover::before{opacity:1}

.bento-card.span-2{grid-column:span 2}
@media (max-width:620px){.bento-card.span-2{grid-column:span 1}}

.bento-card.accent-amber::before{
  background:radial-gradient(420px 200px at 50% 0%, rgba(189,111,36,.12), transparent 70%);
}
.bento-card.accent-amber:hover{
  border-color:rgba(189,111,36,.30);
  box-shadow:var(--sh-md), 0 0 40px rgba(189,111,36,.16);
}

.bento-ico{
  position:relative;z-index:1;
  width:40px;height:40px;display:grid;place-items:center;
  margin-bottom:16px;font-size:18px;
  background:var(--surface-2);
  border:1px solid var(--hair-2);
  border-radius:12px;
  box-shadow:var(--sh-xs);
}
.bento-card h3{
  position:relative;z-index:1;
  font-family:var(--font-display);font-size:18px;
  letter-spacing:-.02em;margin-bottom:8px;
}
.bento-card p{
  position:relative;z-index:1;
  font-size:13.5px;line-height:1.6;color:var(--muted);
}

/* --- mini graphics inside the bento cards --- */
.bento-vis{
  position:relative;z-index:1;
  margin-top:20px;padding:14px;
  background:var(--surface-2);
  border:1px solid var(--hair);
  border-radius:var(--r-md);
}

/* live cost rows */
.vis-rows{display:grid;gap:7px}
.vis-row{
  display:flex;align-items:center;gap:9px;
  padding:8px 10px;
  background:var(--surface);
  border:1px solid var(--hair);
  border-radius:var(--r-sm);
  border-left:3px solid var(--cat-misc);
  font-size:12px;
}
.vis-row .nm{flex:1;color:var(--ink-2)}
.vis-row .tag{
  font-size:9.5px;padding:2px 7px;border-radius:999px;
  background:var(--teal-wash);color:var(--teal-dark);font-weight:600;
}
.vis-row .vl{font-family:var(--font-mono);font-weight:600;font-size:12px;color:var(--teal-dark)}

/* currency chips */
.vis-cur{display:flex;flex-wrap:wrap;gap:8px}
.vis-chip{
  display:flex;align-items:center;gap:7px;
  padding:9px 12px;
  background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--r-sm);font-size:12px;
  transition:border-color .25s,box-shadow .25s;
}
.vis-chip b{font-family:var(--font-mono);font-size:14px;color:var(--ink)}
.vis-chip .tx{
  font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted-2);
}
.vis-chip.on{
  border-color:rgba(46,110,115,.34);
  box-shadow:0 0 0 3px rgba(46,110,115,.08), var(--glow-teal);
}
.vis-chip.on .tx{color:var(--teal-dark)}

/* category ring */
.vis-ring{
  width:110px;height:110px;border-radius:50%;margin:4px auto;position:relative;
  background:conic-gradient(
    var(--cat-logistics) 0deg 84deg,
    var(--cat-food) 84deg 180deg,
    var(--cat-stay) 180deg 268deg,
    var(--cat-permits) 268deg 316deg,
    var(--cat-misc) 316deg 360deg);
  box-shadow:0 0 30px rgba(46,110,115,.18);
}
.vis-ring::after{
  content:"";position:absolute;inset:29%;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--hair);
}
.vis-keys{display:grid;gap:6px;margin-top:12px}
.vis-key{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted)}
.vis-key .sw{width:9px;height:9px;border-radius:3px;flex:none}
.vis-key .pc{margin-left:auto;font-family:var(--font-mono);color:var(--ink-2)}

/* batch scale bars */
.vis-bars{display:flex;align-items:flex-end;gap:8px;height:96px}
.vis-bars .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.vis-bars .bar{
  width:100%;border-radius:5px 5px 0 0;
  background:linear-gradient(180deg,var(--teal-light),var(--teal-dark));
}
.vis-bars .col.hot .bar{
  background:linear-gradient(180deg,#d98b3a,var(--amber-dark));
  box-shadow:0 0 0 3px rgba(189,111,36,.16);
}
.vis-bars .cap{font-size:10px;font-family:var(--font-mono);color:var(--muted-2)}
.vis-bars .col.hot .cap{color:var(--amber-dark);font-weight:600}

/* FOC / margin meter */
.vis-meter{display:grid;gap:10px}
.vis-meter .track{
  height:10px;border-radius:999px;background:var(--surface);
  border:1px solid var(--hair);overflow:hidden;display:flex;
}
.vis-meter .track i{display:block;height:100%}
.vis-meter .lbl{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted)}
.vis-meter .lbl b{font-family:var(--font-mono);color:var(--ink-2)}


/* ---------------------------------------------------------
   11. REGISTRATION PAGE
   --------------------------------------------------------- */
#view-registration{
  min-height:100vh;
  background:
    radial-gradient(700px 340px at 50% -6%, rgba(46,110,115,.14), transparent 64%),
    radial-gradient(560px 280px at 84% 8%, rgba(189,111,36,.10), transparent 62%),
    var(--bg);
}

.form-page-wrapper{
  max-width:500px;
  margin:60px auto;
  padding:0 20px;
}

/* Full lockup — used where there is room for the wordmark and tagline */
.form-logo{
  display:block;width:100%;max-width:260px;height:auto;
  margin:0 auto 26px;
}

.step-stepper{
  display:flex;
  justify-content:center;
  gap:20px;
  margin-bottom:30px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--muted);
}
.step-stepper .active{color:var(--teal);font-weight:600}
.step-stepper .done{color:var(--muted-2)}

.form-head{max-width:none;margin:0 0 28px;text-align:center}
.form-head h2{font-size:clamp(26px,4.4vw,34px);letter-spacing:-.03em}
.form-head .lead{font-size:15px}

.lead-form .field{margin-bottom:13px}

.consent{
  display:flex;align-items:flex-start;gap:10px;
  margin:6px 0 16px;
  font-size:11.5px;line-height:1.5;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--muted);
  cursor:pointer;
}
.consent input{
  flex:none;width:16px;height:16px;margin-top:1px;padding:0;
  accent-color:var(--teal);cursor:pointer;
}

.lead-error{
  display:none;
  margin-bottom:12px;padding:10px 12px;
  background:var(--bad-wash);border:1px solid rgba(162,59,45,.2);
  border-radius:var(--radius-xs);
  font-size:12px;font-weight:600;color:var(--bad);
}
.lead-error.on{display:block}

.lead-fine{margin-top:13px;font-size:11px;line-height:1.55;color:var(--muted-2);text-align:center}

.form-perks{list-style:none;margin-top:26px;display:grid;gap:10px}
.form-perks li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:13px;color:var(--ink-2);
}
.form-perks li::before{
  content:"✓";flex:none;
  width:18px;height:18px;margin-top:1px;
  display:grid;place-items:center;
  background:linear-gradient(160deg,var(--teal),var(--teal-dark));
  color:var(--white);
  border-radius:50%;font-size:10px;font-weight:700;
  box-shadow:0 0 0 3px rgba(46,110,115,.10);
}


/* ---------------------------------------------------------
   12. WORKSPACE SHELL & ACTION BAR
   --------------------------------------------------------- */
.workspace{
  background:
    radial-gradient(800px 300px at 50% 0%, rgba(46,110,115,.07), transparent 65%),
    var(--bg);
  padding:36px 0 72px;
}
.workspace .ws-head{
  max-width:var(--shell-max);
  margin:0 auto 8px;
  padding:0 var(--gutter);
  text-align:left;
}
.workspace .ws-head h2{font-size:clamp(24px,3.4vw,34px)}

.actionbar{
  position:sticky;top:calc(var(--nav-h) + 18px);z-index:60;
  margin:22px auto 0;max-width:var(--shell-max);
  padding:0 var(--gutter);
}
.actionbar-inner{
  padding:12px 16px;
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
  background:var(--glass-strong);
  backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-md), inset 0 1px 0 rgba(255,255,255,.6);
}
.ab-left{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ab-label{
  font-size:10.5px;font-weight:700;line-height:1;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);
}
.ab-currency{display:flex;align-items:center;gap:9px}
.ab-currency label{
  margin:0;white-space:nowrap;
  font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);
}
.ab-currency select{
  width:auto;min-width:190px;
  padding:8px 30px 8px 12px;
  font-size:13px;font-weight:600;
  background-color:var(--surface);border-color:var(--hair-2);
  border-radius:var(--r-sm);color:var(--ink);
}
.ab-currency select:hover{border-color:var(--teal-soft)}
.ab-btns{display:flex;gap:9px;flex-wrap:wrap;align-items:center}

.shell{
  max-width:var(--shell-max);margin:0 auto;
  padding:22px var(--gutter) 0;
  display:grid;grid-template-columns:1fr;gap:22px;align-items:start;
}
.col-left{display:grid;gap:22px;min-width:0}
.col-right{display:block;min-width:0}

.wide{max-width:var(--shell-max);margin:22px auto 0;padding:0 var(--gutter)}

@media (min-width:1024px){
  .shell{grid-template-columns:58% 40%;gap:2%}
  .res{position:sticky;top:calc(var(--nav-h) + 96px)}
}
@media (max-width:640px){
  .shell{padding:18px 18px 0}
  .wide{padding:0 18px}
  .workspace{padding:26px 0 52px}
  .workspace .ws-head{padding:0 18px}
  .actionbar{padding:0 18px;top:calc(var(--nav-h) + 10px)}
}


/* ---------------------------------------------------------
   13. CARDS
   --------------------------------------------------------- */
.card{
  background:var(--surface);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
  transition:box-shadow .3s,border-color .3s;
}
.card:hover{box-shadow:var(--sh-md)}
.card .hd{
  display:flex;align-items:center;gap:12px;
  padding:18px 22px;
  border-bottom:1px solid var(--hair);
}
.card .hd .n{
  flex:none;width:27px;height:27px;
  display:grid;place-items:center;
  border-radius:9px;
  background:linear-gradient(160deg,var(--teal),var(--teal-dark));
  color:var(--white);
  font-family:var(--font-mono);font-size:12.5px;font-weight:600;
  box-shadow:0 0 0 3px rgba(46,110,115,.10);
}
.card .hd h2{font-family:var(--font-display);font-size:18px;letter-spacing:-.02em}
.card .hd .hd-total{
  margin-left:auto;
  font-size:13px;font-weight:600;color:var(--teal-dark);
  background:var(--teal-wash);border:1px solid rgba(46,110,115,.14);
  border-radius:999px;padding:5px 13px;white-space:nowrap;
}
.card .bd{padding:20px 22px}


/* ---------------------------------------------------------
   14. FORM CONTROLS
   --------------------------------------------------------- */
label{
  display:block;margin-bottom:6px;
  font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);
}
.field{margin-bottom:15px}

input,select,textarea{
  width:100%;
  font-family:inherit;font-size:14.5px;color:var(--ink);
  background:var(--surface-2);
  border:1px solid var(--hair-2);
  border-radius:var(--r-sm);
  padding:11px 13px;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--teal);background:var(--surface);
  box-shadow:0 0 0 4px rgba(46,110,115,.10);
}
input.num{font-family:var(--font-mono);letter-spacing:-.02em}
input::placeholder,textarea::placeholder{color:var(--muted-2);opacity:.8}
textarea{resize:vertical;line-height:1.6;min-height:96px}

input[aria-invalid="true"]{border-color:var(--bad);background:#fdf7f5}

select{
  cursor:pointer;appearance:none;-webkit-appearance:none;
  padding-right:34px;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--muted) 50%),
    linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}

.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 15px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 15px}
@media (max-width:520px){.grid2,.grid3{grid-template-columns:1fr}}

.sub{
  display:flex;align-items:center;gap:10px;
  margin:20px 0 13px;
  font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--amber-dark);
}
.sub::after{content:"";flex:1;height:1px;background:var(--hair)}

.hint{margin:-4px 0 4px;font-size:11.5px;line-height:1.55;color:var(--muted-2)}


/* ---------------------------------------------------------
   15. DYNAMIC COST REGISTRIES
   --------------------------------------------------------- */
.reg-intro{margin-bottom:16px;font-size:12.5px;line-height:1.6;color:var(--muted)}

.reg-head,
.crow{
  display:grid;grid-template-columns:var(--reg-cols);
  gap:8px;align-items:center;
}
.reg-head{
  padding:0 2px 8px;border-bottom:1px solid var(--hair);
  font-size:9.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted-2);
}
.reg-head span:nth-child(3),
.reg-head span:nth-child(4){text-align:center}

.reg{display:grid;gap:8px;padding-top:10px}

.crow{
  background:var(--surface-2);border:1px solid var(--hair);
  border-radius:var(--r-sm);padding:8px;
  border-left:3px solid var(--cat-misc);
  transition:border-color .2s,box-shadow .2s;
}
.crow:hover{box-shadow:var(--sh-xs)}
.crow:focus-within{
  border-color:var(--teal-soft);
  box-shadow:0 0 0 4px rgba(46,110,115,.08);
}
.crow input[type="text"],
.crow input[type="number"],
.crow select.c-cat{
  padding:8px 10px;font-size:13.5px;
  background:var(--surface);border-color:var(--hair-2);
}
.crow select.c-cat{
  padding-right:26px;font-size:12.5px;cursor:pointer;
  background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%;
}
.crow input[type="number"]{text-align:right}

.crow .chk{
  display:flex;align-items:center;justify-content:center;gap:5px;
  height:100%;margin:0;padding:9px 4px;
  background:var(--surface);border:1px solid var(--hair-2);
  border-radius:var(--r-sm);
  font-size:10.5px;font-weight:600;letter-spacing:.02em;
  text-transform:none;color:var(--ink-2);
  cursor:pointer;user-select:none;
  transition:background .2s,border-color .2s,color .2s,box-shadow .2s;
}
.crow .chk:hover{border-color:var(--teal-soft)}
.crow .chk.on{
  background:var(--teal-wash);border-color:var(--teal);color:var(--teal-dark);
  box-shadow:0 0 0 3px rgba(46,110,115,.08);
}
.crow .chk input{
  flex:none;width:14px;height:14px;margin:0;padding:0;
  accent-color:var(--teal);cursor:pointer;
}

.crow .del{
  width:40px;height:34px;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--hair-2);
  border-radius:var(--r-sm);
  color:var(--muted-2);font-size:14px;line-height:1;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.crow .del:hover{background:var(--bad-wash);color:var(--bad);border-color:rgba(162,59,45,.24)}

@media (max-width:900px) and (min-width:621px){
  .reg-head{grid-template-columns:minmax(0,1fr) 110px 76px 40px}
  .reg-head span:nth-child(2){display:none}
  .crow{
    grid-template-columns:minmax(0,1fr) 110px 76px 40px;
    grid-template-areas:
      "name val chk del"
      "cat  cat cat cat";
  }
  .crow input[type="text"]{grid-area:name}
  .crow select.c-cat{grid-area:cat}
  .crow input[type="number"]{grid-area:val}
  .crow .chk{grid-area:chk}
  .crow .del{grid-area:del}
}

@media (max-width:620px){
  .reg-head{display:none}
  .crow{
    grid-template-columns:minmax(0,1fr) 96px 40px;
    grid-template-areas:
      "name name del"
      "cat  cat  cat"
      "val  chk  chk";
  }
  .crow input[type="text"]{grid-area:name}
  .crow select.c-cat{grid-area:cat}
  .crow input[type="number"]{grid-area:val;text-align:left}
  .crow .chk{grid-area:chk;height:auto;padding:9px}
  .crow .del{grid-area:del;align-self:start}
}

.reg-empty{
  display:none;padding:14px 2px 2px;
  font-size:12.5px;font-style:italic;color:var(--muted-2);
}
.reg-foot{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:18px;padding-top:14px;border-top:1px solid var(--hair);
  font-size:13px;font-weight:600;color:var(--ink-2);
}
.reg-foot b{font-size:17px;color:var(--teal-dark);letter-spacing:-.02em}
.foot-note{color:var(--muted-2);font-weight:400}


/* ---------------------------------------------------------
   16. RESULTS PANEL
   --------------------------------------------------------- */
.banner{
  padding:13px 16px;
  border:1px solid var(--hair-2);border-radius:var(--r-md);
  background:var(--surface-2);color:var(--ink-2);
  font-size:13.5px;font-weight:500;line-height:1.5;
}
.banner b{font-family:var(--font-mono);font-weight:600}
.banner.healthy{
  background:var(--good-wash);border-color:rgba(58,125,68,.22);color:#2c6435;
  box-shadow:0 0 24px rgba(58,125,68,.10);
}
.banner.low{
  background:var(--amber-wash);border-color:rgba(189,111,36,.24);color:#8a5a1c;
  box-shadow:0 0 24px rgba(189,111,36,.12);
}
.banner.loss{
  background:var(--bad-wash);border-color:rgba(162,59,45,.22);color:var(--bad);
  box-shadow:0 0 24px rgba(162,59,45,.10);
}

.bar{
  display:flex;height:32px;margin-top:4px;
  border:1px solid var(--hair);border-radius:var(--r-sm);
  background:var(--surface-2);overflow:hidden;
}
.bar i{display:block;height:100%;transition:width .3s ease}

.legend{display:grid;gap:8px;margin-top:14px;min-width:0}
.legend .lg{display:flex;align-items:center;gap:10px;font-size:12.5px;min-width:0}
.legend .sw{flex:none;width:10px;height:10px;border-radius:3px}
/* The label absorbs all spare width and truncates. Without flex:1 + min-width:0
   a long expense name pushes the figures outside the card. */
.legend .lg .nm{
  flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2);
}
.legend .lg .p{
  flex:none;width:40px;text-align:right;
  font-family:var(--font-mono);font-size:11px;color:var(--muted-2);
}
.legend .lg .v{
  flex:none;min-width:76px;text-align:right;white-space:nowrap;
  font-family:var(--font-mono);font-weight:600;
}

.totbox{
  margin-top:20px;padding:20px;border-radius:var(--r-md);
  background:linear-gradient(150deg,var(--ink) 0%,#1d3b34 55%,var(--teal-dark) 100%);
  color:var(--paper);
  box-shadow:var(--sh-md), var(--glow-teal);
}
.totbox .r{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:5px 0}
.totbox .r small{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#9fbdb2}
.totbox .r .big{
  font-family:var(--font-mono);font-weight:600;
  font-size:clamp(21px,3.4vw,29px);letter-spacing:-.02em;
}
.totbox .r .mid{font-family:var(--font-mono);font-weight:500;font-size:17px;color:#dcebe4}
.totbox hr{border:0;border-top:1px solid rgba(255,255,255,.12);margin:10px 0}

.price{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
@media (max-width:420px){.price{grid-template-columns:1fr}}

.pc{
  padding:15px 16px;background:var(--surface-2);
  border:1px solid var(--hair);border-radius:var(--r-md);
  transition:border-color .25s,box-shadow .25s;
}
.pc:hover{box-shadow:var(--sh-xs)}
.pc h3{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;
  font-family:var(--font-sans);font-size:10px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted-2);
}
.pc .big{
  font-family:var(--font-mono);font-size:23px;font-weight:600;
  line-height:1;letter-spacing:-.02em;color:var(--teal-dark);
}
.pc .sm{margin-top:7px;font-size:11.5px;line-height:1.45;color:var(--muted-2)}

.pc.invoice{
  background:linear-gradient(150deg,var(--teal-wash),#e0eeed);
  border-color:rgba(46,110,115,.20);
  box-shadow:0 0 24px rgba(46,110,115,.10);
}
.pc.profit{
  background:linear-gradient(150deg,var(--amber-wash),#faeada);
  border-color:rgba(189,111,36,.22);
  box-shadow:0 0 24px rgba(189,111,36,.10);
}
.pc.profit .big{color:var(--amber-dark)}
.pc.profit .big.neg{color:var(--bad)}

.tag{padding:3px 9px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.03em}
.tag.ok{background:var(--good-wash);color:var(--good);border:1px solid rgba(58,125,68,.2)}
.tag.mid{background:var(--amber-wash);color:var(--amber-dark);border:1px solid rgba(189,111,36,.2)}
.tag.warn{background:var(--bad-wash);color:var(--bad);border:1px solid rgba(162,59,45,.2)}

.minis{margin-top:4px}
.mini{
  display:flex;justify-content:space-between;gap:12px;
  padding:8px 0;border-bottom:1px dashed var(--hair);font-size:12.5px;
}
.mini:last-child{border-bottom:0}
.mini span{color:var(--muted)}
.mini b{font-family:var(--font-mono);font-weight:600;white-space:nowrap;color:var(--ink-2)}
.mini.strong{
  margin-top:6px;padding-top:12px;
  border-top:1px solid var(--hair-2);border-bottom:0;
  font-size:14px;font-weight:600;
}
.mini.strong span{color:var(--ink)}
.mini.strong b{color:var(--amber-dark)}
.mini.strong b.neg{color:var(--bad)}


/* ---------------------------------------------------------
   17. SCENARIO & CATEGORY BREAKDOWN
   --------------------------------------------------------- */
.analysis{display:grid;grid-template-columns:1.25fr .75fr;gap:32px;align-items:start}
@media (max-width:900px){.analysis{grid-template-columns:1fr;gap:28px}}
.analysis-col{min-width:0}

.scharts{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:10px;height:180px;margin-top:6px;
}
.scol{
  flex:1 1 0;min-width:0;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:7px;
}
.scol .bv{
  width:100%;max-width:52px;
  background:linear-gradient(180deg,var(--teal-light),var(--teal-dark));
  border-radius:6px 6px 0 0;
  transition:height .35s cubic-bezier(.4,0,.2,1),box-shadow .25s;
}
.scol:hover .bv{box-shadow:0 0 20px rgba(46,110,115,.28)}
.scol.active .bv{
  background:linear-gradient(180deg,#d98b3a,var(--amber-dark));
  box-shadow:0 0 0 3px rgba(189,111,36,.16), 0 0 24px rgba(189,111,36,.24);
}
.scol .amt{font-family:var(--font-mono);font-size:10.5px;font-weight:500;color:var(--ink-2)}
.scol .pax{font-family:var(--font-mono);font-size:12px;font-weight:600}
.scol.active .pax{color:var(--amber-dark)}
.scol .cap{font-size:10px;color:var(--muted-2)}

.note{margin-top:16px;font-size:12px;line-height:1.6;color:var(--muted-2)}

@media (max-width:620px){
  .scharts{height:150px;gap:5px}
  .scol .amt{font-size:8.5px}
  .scol .cap{display:none}
}

.catwrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:6px}
.catpie{
  flex:none;width:172px;height:172px;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--hair);
  position:relative;transition:background .35s ease;
  box-shadow:0 0 34px rgba(46,110,115,.14);
}
.catpie::after{
  content:"";position:absolute;inset:27%;border-radius:50%;
  background:var(--surface);border:1px solid var(--hair);
  box-shadow:inset 0 1px 3px rgba(22,39,31,.05);
}
.catlegend{flex:1 1 200px;min-width:0;display:grid;gap:8px}
.catlegend .cl{display:flex;align-items:center;gap:10px;font-size:12.5px;min-width:0}
.catlegend .cl .sw{flex:none;width:10px;height:10px;border-radius:3px}
/* Same rule as the cost legend: the name shrinks, the numbers never do. */
.catlegend .cl .nm{
  flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2);
}
.catlegend .cl .p{
  flex:none;width:38px;text-align:right;
  font-family:var(--font-mono);font-size:11px;color:var(--muted-2);
}
.catlegend .cl .v{
  flex:none;min-width:74px;text-align:right;white-space:nowrap;
  font-family:var(--font-mono);font-weight:600;font-size:12px;
}
.catlegend .cl-empty{font-size:12.5px;font-style:italic;color:var(--muted-2)}
@media (max-width:400px){
  .catwrap{justify-content:center}
  .catpie{width:144px;height:144px}
}


/* ---------------------------------------------------------
   18. SAVED CALCULATIONS
   --------------------------------------------------------- */
.saved{display:grid;gap:10px}
.srow{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:13px 16px;background:var(--surface-2);
  border:1px solid var(--hair);border-radius:var(--r-md);
  transition:border-color .25s,box-shadow .25s,transform .25s;
}
.srow:hover{
  border-color:rgba(46,110,115,.26);
  box-shadow:var(--sh-sm),0 0 24px rgba(46,110,115,.10);
  transform:translateY(-1px);
}
.srow .s-main{flex:1;min-width:180px}
.srow .s-name{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.srow .s-meta{margin-top:4px;font-size:11.5px;color:var(--muted-2)}
.srow .s-fig{font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--teal-dark)}
.srow .s-btns{display:flex;gap:8px}


/* ---------------------------------------------------------
   19. RATING & FEEDBACK
   --------------------------------------------------------- */
.fb-grid{display:grid;grid-template-columns:250px 1fr;gap:30px;align-items:start}
@media (max-width:760px){.fb-grid{grid-template-columns:1fr;gap:22px}}

.fb-label{
  font-size:10.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted-2);
  margin-bottom:10px;
}
.stars{display:flex;gap:6px}
.star{
  background:none;border:0;padding:0;cursor:pointer;
  font-size:34px;line-height:1;
  color:var(--hair-3);
  transition:color .15s ease,transform .15s ease,text-shadow .2s ease;
}
.star:hover{transform:scale(1.14)}
/* Raised specificity so the amber highlight can never lose the cascade. */
.stars .star.lit{
  color:var(--amber);
  text-shadow:0 0 18px rgba(189,111,36,.42);
}
.star:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:6px}

.stars-caption{
  margin-top:11px;font-size:12.5px;font-weight:600;color:var(--muted-2);
  min-height:19px;
}
.stars-caption.rated{color:var(--amber-dark)}

.fb-text label{margin-bottom:8px}
.fb-actions{
  display:flex;align-items:center;justify-content:flex-end;gap:14px;
  margin-top:14px;flex-wrap:wrap;
}
.fb-error{display:none;margin-right:auto;font-size:12px;font-weight:600;color:var(--bad)}
.fb-error.on{display:block}

.fb-thanks{
  display:grid;place-items:center;gap:6px;
  padding:40px 20px;text-align:center;
  background:linear-gradient(160deg,var(--good-wash),#e2eee4);
  border:1px solid rgba(58,125,68,.2);border-radius:var(--r-md);
  box-shadow:0 0 34px rgba(58,125,68,.12);
  animation:fbIn .45s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes fbIn{
  from{opacity:0;transform:translateY(12px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.fb-thanks-tick{
  width:48px;height:48px;display:grid;place-items:center;
  background:linear-gradient(160deg,#489253,var(--good));color:var(--white);
  border-radius:50%;font-size:23px;font-weight:700;margin-bottom:8px;
  box-shadow:0 0 0 6px rgba(58,125,68,.12);
}
.fb-thanks-title{
  font-family:var(--font-display);font-size:20px;font-weight:600;
  color:var(--ink);letter-spacing:-.02em;
}
.fb-thanks-sub{font-size:13px;color:var(--ink-3)}
.fb-thanks .btn{margin-top:14px}


/* ---------------------------------------------------------
   20. PRICING
   --------------------------------------------------------- */
.pricing{padding-top:0}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
@media (max-width:860px){.pgrid{grid-template-columns:1fr;max-width:440px;margin:0 auto}}

.pbox{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--r-lg);padding:30px 26px;
  box-shadow:var(--sh-sm);
  transition:border-color .3s,box-shadow .3s,transform .3s;
}
.pbox:hover{
  border-color:rgba(46,110,115,.24);
  box-shadow:var(--sh-md),0 0 34px rgba(46,110,115,.10);
  transform:translateY(-3px);
}
.pbox.popular{
  border-color:rgba(189,111,36,.34);
  box-shadow:var(--sh-md), 0 0 44px rgba(189,111,36,.16);
}
.pbox.popular::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(360px 180px at 50% 0%, rgba(189,111,36,.10), transparent 70%);
}
.pbox.popular::before{
  content:"MOST POPULAR";
  position:absolute;top:14px;right:14px;z-index:2;
  background:linear-gradient(100deg,#cd7d2c,var(--amber-dark));color:var(--white);
  font-size:9px;font-weight:700;letter-spacing:.14em;
  padding:5px 11px;border-radius:999px;white-space:nowrap;
  box-shadow:var(--glow-amber);
}
.pbox h3{font-family:var(--font-display);font-size:19px;margin-bottom:8px;letter-spacing:-.02em}
.pprice{
  font-family:var(--font-mono);font-size:36px;font-weight:600;
  line-height:1;color:var(--ink);letter-spacing:-.03em;
}
.pprice span{font-size:14px;font-weight:400;color:var(--muted-2)}
.pperiod{margin:7px 0 20px;font-size:12px;color:var(--muted-2)}

.pbox ul{list-style:none;display:grid;gap:11px;margin-bottom:24px;position:relative;z-index:1}
.pbox ul li{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--ink-2)}
.pbox ul li::before{content:"✓";flex:none;color:var(--good);font-weight:700}
.pbox ul li.x{color:var(--muted-2)}
.pbox ul li.x::before{content:"—";color:var(--muted-2)}

.pcta{
  position:relative;z-index:1;
  display:block;width:100%;padding:13px;
  text-align:center;text-decoration:none;
  border-radius:var(--r-sm);
  font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;
  transition:background .25s,border-color .25s,box-shadow .25s,transform .15s;
}
.pbox:not(.popular) .pcta{
  background:var(--surface-2);border:1px solid var(--hair-2);color:var(--ink);
}
.pbox:not(.popular) .pcta:hover{
  background:var(--white);border-color:var(--teal-soft);
  box-shadow:0 0 0 4px rgba(46,110,115,.06);
}
.pbox.popular .pcta{
  background:linear-gradient(180deg,#cd7d2c,var(--amber-dark));
  color:var(--white);border:1px solid transparent;
  box-shadow:var(--glow-amber-strong);
}
.pbox.popular .pcta:hover{transform:translateY(-1px);box-shadow:0 12px 40px -8px rgba(189,111,36,.55)}


/* ---------------------------------------------------------
   21. CTA BANNER & FOOTER
   --------------------------------------------------------- */
.ctabanner{
  position:relative;overflow:hidden;
  padding:100px var(--gutter);text-align:center;
  background:
    radial-gradient(700px 320px at 50% 0%, rgba(46,110,115,.14), transparent 66%),
    radial-gradient(520px 260px at 80% 100%, rgba(189,111,36,.12), transparent 64%),
    var(--bg-2);
  border-top:1px solid var(--hair);
}
.ctabanner h2{
  font-size:clamp(30px,5vw,54px);margin-bottom:16px;letter-spacing:-.035em;
}
.ctabanner p{font-size:17px;color:var(--muted);margin-bottom:32px}

footer{border-top:1px solid var(--hair);background:var(--bg-2)}
.foot-inner{
  max-width:var(--shell-max);margin:0 auto;
  padding:44px var(--gutter) 52px;
  display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;
}
.foot-logo{display:block;width:100%;max-width:230px;height:auto}
.foot-brand{
  font-family:var(--font-display);font-size:20px;font-weight:600;
  color:var(--ink);letter-spacing:-.02em;
}
.foot-brand span{
  background:linear-gradient(100deg,var(--amber),#d98b3a);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.foot-tag{margin-top:6px;font-size:13px;color:var(--muted)}
.foot-note-txt{max-width:520px;font-size:11.5px;line-height:1.65;color:var(--muted-2)}


/* ---------------------------------------------------------
   22. PRINT MEDIA — A4 QUOTATION
   --------------------------------------------------------- */
.print-sheet{display:none}

@media print{

  @page{size:A4 portrait;margin:14mm 13mm}

  html,body{
    width:100%;background:#fff;color:#000;
    font-family:var(--font-sans);font-size:10.5pt;line-height:1.42;
  }

  body > *:not(.print-sheet){display:none !important}
  .no-print,button,.btn{display:none !important}

  .print-sheet{
    display:block !important;
    width:100%;max-width:190mm;margin:0 auto;padding:0;
    background:#fff;color:#000;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }

  .ps-head{
    display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
    padding-bottom:9pt;margin-bottom:14pt;
    border-bottom:2.5pt solid var(--ink);
  }
  .ps-brand{font-family:var(--font-display);font-size:21pt;font-weight:600;line-height:1;color:var(--ink)}
  .ps-brand span{color:var(--amber);-webkit-text-fill-color:var(--amber)}
  .ps-tag{margin-top:5pt;font-size:8pt;letter-spacing:.13em;text-transform:uppercase;color:#6b6355}
  .ps-meta{text-align:right;font-size:8.5pt;line-height:1.7;color:#3d3d3d}
  .ps-meta b{display:block;font-family:var(--font-display);font-size:11.5pt;color:var(--ink)}

  .ps-title{font-family:var(--font-display);font-size:15pt;font-weight:600;color:var(--ink);margin-bottom:3pt}
  .ps-sub{margin-bottom:14pt;font-size:9pt;color:#57534a}

  .ps-sec{
    margin:15pt 0 6pt;padding-bottom:3pt;
    border-bottom:.75pt solid #cfc7b8;
    font-size:8pt;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;color:var(--amber);
    page-break-after:avoid;
  }
  .ps-sec:first-of-type{margin-top:0}

  table.ps-tbl{width:100%;border-collapse:collapse;font-size:9.5pt;page-break-inside:avoid}
  table.ps-tbl th{
    padding:4pt 6pt;text-align:left;
    border-bottom:.75pt solid #cfc7b8;
    font-size:7.5pt;font-weight:700;
    letter-spacing:.09em;text-transform:uppercase;color:#6b6355;
  }
  table.ps-tbl td{padding:4.5pt 6pt;border-bottom:.5pt solid #e5e0d5;vertical-align:top}
  table.ps-tbl th.r,table.ps-tbl td.r{text-align:right}
  table.ps-tbl th.c,table.ps-tbl td.c{text-align:center}
  table.ps-tbl td.num,table.ps-tbl td.r{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
  table.ps-tbl tr:nth-child(even) td{background:#fbfaf6}
  table.ps-tbl tr.sum td{
    padding-top:5.5pt;border-top:1pt solid var(--ink);border-bottom:0;
    background:#f4f1ea;font-weight:700;
  }
  table.ps-tbl tr.sum:nth-child(even) td{background:#f4f1ea}

  .ps-dot{
    display:inline-block;width:7pt;height:7pt;border-radius:2pt;
    margin-right:4pt;vertical-align:-.5pt;
  }

  .ps-grid{display:grid;grid-template-columns:1fr 1fr;gap:10pt;margin-top:6pt;page-break-inside:avoid}
  .ps-box{padding:8pt 10pt;border:.75pt solid #cfc7b8;border-radius:4pt;page-break-inside:avoid}
  .ps-box h4{
    margin-bottom:4pt;font-family:var(--font-sans);
    font-size:7.5pt;letter-spacing:.1em;text-transform:uppercase;color:#6b6355;
  }
  .ps-box .v{font-family:var(--font-mono);font-size:16pt;font-weight:600;line-height:1;color:var(--teal-dark)}
  .ps-box .s{margin-top:3pt;font-size:8pt;color:#6b6355}
  .ps-box.hi{background:var(--ink);border-color:var(--ink)}
  .ps-box.hi h4{color:#a9c4bb}
  .ps-box.hi .v{color:#fff}
  .ps-box.hi .s{color:#c3d2cb}

  .ps-callout{
    margin-top:12pt;padding:8pt 10pt;
    background:#fbf5ea;border:.75pt solid #e0d3bb;border-radius:4pt;
    font-size:9pt;color:#5c4a2c;page-break-inside:avoid;
  }
  .ps-callout b{font-family:var(--font-mono)}

  .ps-terms{margin-top:14pt;font-size:8pt;line-height:1.6;color:#57534a}
  .ps-terms h4{
    margin-bottom:5pt;padding-bottom:3pt;
    border-bottom:.75pt solid #cfc7b8;
    font-family:var(--font-sans);font-size:8pt;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;color:var(--amber);
  }
  .ps-terms ol{margin:0;padding-left:13pt}
  .ps-terms li{margin-bottom:2.5pt}

  .ps-sign{
    display:grid;grid-template-columns:1fr 1fr;gap:30pt;
    margin-top:20pt;font-size:8.5pt;color:#57534a;page-break-inside:avoid;
  }
  .ps-sign div{padding-top:4pt;border-top:.75pt solid #8d8577}

  .ps-foot{
    margin-top:16pt;padding-top:7pt;border-top:.75pt solid #cfc7b8;
    font-size:7.5pt;line-height:1.5;color:#7a7365;
  }
}