/* ===========================================================
   GROTEINS - design tokens
   Signature: the macro-ratio bar (protein / carbs / fat) used
   as hero visual, section divider, and loading/progress motif.
   =========================================================== */

:root{
  --navy: #0D1B3E;
  --navy-2: #16264F;
  --ink: #17203A;
  --teal: #1ABCB4;
  --teal-dark: #12938C;
  --carb: #3D5A99;
  --fat: #E8A33D;
  --paper: #F2F6F5;
  --paper-2: #E7EFED;
  --line: rgba(13,27,62,0.12);
  --white: #FFFFFF;
  --muted: #57607A;

  --display: "Space Grotesk", "Arial Narrow", sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --max: 1120px;
  --radius: 14px;

  /* Radius scale. These were referenced across the stylesheet but never defined,
     which made every border-radius using them resolve to 0 (square corners). */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;

  --shadow-sm: 0 2px 8px -4px rgba(13,27,62,0.18);
  --shadow-md: 0 16px 40px -20px rgba(13,27,62,0.28);
  --shadow-lg: 0 30px 70px -30px rgba(13,27,62,0.40);
}

/* subtle dot texture for light sections */
.textured{
  background-image: radial-gradient(rgba(13,27,62,0.09) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* decorative gradient blobs, purely cosmetic, sit behind content */
.blob-field{ position: relative; overflow: hidden; }
.blob-field::before, .blob-field::after{
  content:""; position:absolute; z-index:0; border-radius:50%;
  filter: blur(60px); opacity:0.35; pointer-events:none;
}
.blob-field::before{
  width: 420px; height: 420px; background: var(--teal);
  top: -160px; right: -120px;
}
.blob-field::after{
  width: 320px; height: 320px; background: var(--fat);
  bottom: -140px; left: -80px; opacity: 0.18;
}
.blob-field > *{ position:relative; z-index:1; }

@media (max-width: 760px){
  .blob-field::before{ width:260px; height:260px; }
  .blob-field::after{ width:200px; height:200px; }
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{
  font-family: var(--display);
  color: var(--navy);
  line-height: 1.08;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

h1{ font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 600; }
h2{ font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 600; }
h3{ font-size: 1.2rem; font-weight: 600; }

p{ margin: 0 0 1em; color: var(--muted); max-width: 62ch; }

a{ color: var(--teal-dark); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
}

.eyebrow{
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: var(--teal-dark);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.eyebrow-icon{
  width: 16px; height: 16px;
  flex-shrink: 0;
}

/* ---------- NAV ---------- */
.site-nav{
  position: sticky; top:0; z-index: 50;
  background: rgba(242,246,245,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(13,27,62,0.03), 0 8px 24px -20px rgba(13,27,62,0.4);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height: 72px;
}
.wordmark{
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--navy);
  text-decoration:none;
  letter-spacing: -0.01em;
  display:flex; align-items:center; gap:10px;
}
.wordmark span{ color: var(--teal-dark); }
.logo-mark{ flex-shrink:0; }

/* ---------- BROWSER MOCKUP (product preview, no stock photos needed) ---------- */
.mockup{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  overflow-x: hidden;
}
.mockup-bar{
  display:flex; align-items:center; gap:6px;
  padding: 12px 16px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.mockup-bar i{ width:9px; height:9px; border-radius:50%; background: var(--line); }
.mockup-body{ width:100%; max-width:100%; min-width:0; padding: 26px 26px 30px; }
.mockup-row{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; min-width:0; gap:16px;
  padding: 12px 0; border-bottom: 1px dashed var(--line);
  font-size: 0.86rem;
  animation: mealFadeIn 0.5s ease both;
}
@keyframes mealFadeIn{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: translateY(0); }
}
.mockup-row:nth-child(1){ animation-delay: 0.05s; }
.mockup-row:nth-child(2){ animation-delay: 0.15s; }
.mockup-row:nth-child(3){ animation-delay: 0.25s; }
.mockup-row:nth-child(4){ animation-delay: 0.35s; }
.mockup-row:last-child{ border-bottom:none; }
.mockup-row .name{
  flex:1 1 auto; min-width:0;
  color: var(--ink); font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mockup-row .val{
  flex:0 0 auto; white-space:nowrap;
  font-family: var(--mono); color: var(--muted); font-size: 0.78rem;
}

#heroMealList, #heroDayLabel, .macro-readout{
  transition: opacity .35s ease, transform .35s ease;
}
.hero-fade-out{ opacity: 0; transform: translateY(4px); }
.mockup-tag{
  font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--teal-dark); background: rgba(26,188,180,0.12);
  padding: 3px 9px; border-radius: 999px;
}

.nav-links{
  display:flex; gap: 6px; list-style:none; margin:0; padding:0;
}
.nav-links a{
  text-decoration:none;
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}
.nav-links a:hover{ background: var(--paper-2); }
.nav-links a[aria-current="page"]{
  color: var(--white);
  background: var(--navy);
}
.nav-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  padding: 8px;
}
.nav-toggle svg{ display:block; }

@media (max-width: 760px){
  .nav-links{
    position: absolute; top: 72px; left:0; right:0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    padding: 10px 20px 18px;
    gap: 4px;
    display: none;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding: 10px 12px; }
  .nav-toggle{ display:block; }
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 13px 24px;
  border-radius: 999px;
  text-decoration:none;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary{
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 10px 24px -12px rgba(13,27,62,0.55);
}
.btn-primary:hover{ background: var(--navy-2); transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(13,27,62,0.6); }
.btn-ghost{
  background: var(--white);
  border-color: var(--line);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover{ border-color: var(--teal); color: var(--teal-dark); transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }
.btn[disabled], .btn.is-disabled{
  background: var(--paper-2); color: var(--muted);
  cursor: not-allowed; border-color: var(--line);
}
.btn[disabled]:hover, .btn.is-disabled:hover{ transform:none; }

/* ---------- MACRO BAR (signature element) ---------- */
.macro-bar{
  display:flex; width:100%; height: 14px;
  border-radius: 999px; overflow:hidden;
  background: var(--paper-2);
  border: 1px solid var(--line);
}
.macro-bar .seg{
  height:100%;
  transform-origin: left center;
  transform: scaleX(0);
  animation: fillbar 1.1s cubic-bezier(.22,.9,.3,1) forwards;
  transition: width 0.7s cubic-bezier(.22,.9,.3,1);
}
.macro-bar .seg.protein{ background: var(--teal); animation-delay: .05s; }
.macro-bar .seg.carb{ background: var(--carb); animation-delay: .2s; }
.macro-bar .seg.fat{ background: var(--fat); animation-delay: .35s; }

@keyframes fillbar{ to{ transform: scaleX(1); } }

.macro-key{
  display:flex; gap: 22px; margin-top: 14px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 0.8rem; color: var(--muted);
}
.macro-key span{ display:inline-flex; align-items:center; gap:7px; }
.macro-key i{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.macro-key .dot-protein{ background: var(--teal); }
.macro-key .dot-carb{ background: var(--carb); }
.macro-key .dot-fat{ background: var(--fat); }

.macro-rule{
  height: 3px; width: 100%; display:flex; border-radius: 3px; overflow:hidden;
  margin: 64px 0;
}
.macro-rule span{ height:100%; }
.macro-rule .a{ width:41%; background: var(--teal); }
.macro-rule .b{ width:32%; background: var(--carb); }
.macro-rule .c{ width:27%; background: var(--fat); }

@media (prefers-reduced-motion: reduce){
  .macro-bar .seg{ animation: none !important; transform: scaleX(1) !important; transition: none !important; }
  #heroMealList, #heroDayLabel, .macro-readout{ transition: none !important; }
  html{ scroll-behavior: auto; }
}

/* ---------- HERO ---------- */
.hero{
  padding: 84px 0 60px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.hero-grid > *{ min-width:0; }
.hero p.lede{ font-size: 1.1rem; max-width: 46ch; }
.hero-cta{ display:flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }

.hero-panel{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.hero-panel::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height: 5px;
  background: linear-gradient(90deg, var(--teal) 0 41%, var(--carb) 41% 73%, var(--fat) 73% 100%);
}
.hero-panel h3{ font-family: var(--mono); font-size: 0.78rem; text-transform:uppercase; letter-spacing:.1em; color: var(--muted); margin-bottom: 18px; }
.macro-readout{
  display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px; margin-top: 18px;
}
.macro-readout div{ min-width:0; text-align:left; }
.macro-readout .num{ font-family: var(--mono); font-size: 1.5rem; color: var(--navy); font-weight:600; display:block; }
.macro-readout .lab{ font-size: 0.76rem; color: var(--muted); }

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

/* ---------- SECTIONS ---------- */
section{ padding: 70px 0; }
.section-tight{ padding: 40px 0; }
.section-head{ max-width: 640px; margin-bottom: 44px; }

.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.grid-2{ display:grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
@media (max-width: 860px){
  .grid-3, .grid-2{ grid-template-columns: 1fr; }
}

.card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.product-feature{ padding:40px; overflow-x:hidden; }
.card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card.muted{ background: var(--paper-2); box-shadow: none; }
.card.muted:hover{ transform:none; box-shadow:none; }

.icon-badge{
  width: 44px; height:44px; border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 16px;
}
.icon-badge svg{ width:22px; height:22px; }
.icon-badge.protein{ background: rgba(26,188,180,0.14); }
.icon-badge.carb{ background: rgba(61,90,153,0.14); }
.icon-badge.fat{ background: rgba(232,163,61,0.16); }
.card .tag{
  font-family: var(--mono); font-size: 0.7rem; text-transform:uppercase;
  letter-spacing: .1em; color: var(--teal-dark);
  background: rgba(26,188,180,0.12);
  padding: 4px 10px; border-radius: 999px; display:inline-block; margin-bottom: 14px;
}
.card .tag.soon{ color: var(--muted); background: rgba(87,96,122,0.1); }

.pillar-list{ border-top: 1px solid var(--line); }
.pillar{
  display:grid; grid-template-columns: 180px 1fr; gap: 24px;
  padding: 30px 0; border-bottom: 1px solid var(--line);
}
.pillar .icon-badge{ margin-bottom: 12px; }
.pillar .lab{ font-family: var(--mono); font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; padding-top: 3px; }
@media (max-width: 620px){
  .pillar{ grid-template-columns: 1fr; gap: 8px; }
  .wrap{ padding-left:18px; padding-right:18px; }
  .product-feature{ padding:24px 18px; }
  .mockup-body{ padding:22px 16px 24px; }
  .mockup-row{ gap:10px; font-size:0.8rem; }
  .mockup-row .val{ font-size:0.72rem; }
  .macro-readout{ gap:8px; }
  .macro-readout .num{ font-size:1.2rem; }
}

/* ---------- DARK BAND (contrast section) ---------- */
.dark-band{
  background: radial-gradient(120% 160% at 15% 0%, var(--navy-2) 0%, var(--navy) 55%, #0A1530 100%);
  color: rgba(255,255,255,0.88);
  padding: 76px 0;
  position: relative;
  overflow: hidden;
}
.dark-band::after{
  content:"";
  position:absolute; right:-140px; top:-140px; width: 380px; height:380px;
  border-radius:50%; background: var(--teal); opacity:0.16; filter: blur(70px);
}
.dark-band h2{ color: var(--white); }
.dark-band p{ color: rgba(255,255,255,0.72); }
.dark-band .eyebrow{ color: var(--teal); }
.dark-band-inner{
  display:flex; align-items:center; justify-content:space-between; gap: 30px; flex-wrap:wrap;
  position:relative; z-index:1;
}
.dark-band .btn-ghost{
  background: transparent; border-color: rgba(255,255,255,0.3); color: var(--white); box-shadow:none;
}
.dark-band .btn-ghost:hover{ border-color: var(--teal); color: var(--teal); }

/* ---------- FOOTER ---------- */
footer{
  background: var(--navy);
  color: rgba(255,255,255,0.75);
  padding: 50px 0 30px;
  margin-top: 40px;
}
footer .wordmark{ color: var(--white); }
footer .wordmark span{ color: var(--teal); }
footer .logo-mark circle:first-child{ stroke: rgba(255,255,255,0.14); }
footer p{ color: rgba(255,255,255,0.6); }
.footer-top{
  display:flex; justify-content:space-between; gap: 30px; flex-wrap:wrap;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  padding-bottom: 30px; margin-bottom: 20px;
}
.footer-links{ display:flex; gap: 22px; list-style:none; padding:0; margin:0; flex-wrap:wrap; }
.footer-links a{ color: rgba(255,255,255,0.75); text-decoration:none; font-size: 0.92rem; }
.footer-links a:hover{ color: var(--white); }
.footer-bottom{ font-family: var(--mono); font-size: 0.76rem; color: rgba(255,255,255,0.45); }

/* ---------- FORMS / CONTACT ---------- */
.field{ margin-bottom: 18px; }
.field label{
  display:block; font-family: var(--mono); font-size: 0.76rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin-bottom: 8px;
}
.field input, .field textarea{
  width: 100%; padding: 13px 14px; font-family: var(--body); font-size: 0.98rem;
  border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--ink);
}
.field textarea{ min-height: 130px; resize: vertical; }

.contact-email{
  font-family: var(--display); font-size: clamp(1.6rem,4vw,2.4rem);
  color: var(--navy); text-decoration:none; font-weight: 600;
  display:inline-block; border-bottom: 2px solid var(--teal);
}

/* ---------- PRICING ---------- */
.price-card{
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius);
  padding: 34px; display:flex; flex-direction:column; gap: 16px;
}
.price-card .amount{ font-family: var(--mono); font-size: 2.1rem; color: var(--navy); }
.price-card ul{ margin:0; padding-left: 20px; color: var(--muted); }
.price-card li{ margin-bottom: 8px; }

.notice{
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  background: var(--paper-2);
}

/* misc */
.stack-gap{ display:flex; flex-direction:column; gap: 20px; }
.muted-text{ color: var(--muted); }

/* ===========================================================
   AMBIENT FLOATING ICONS - decorative only. Sits inside the
   guaranteed gutter around .wrap (28px on every screen size, at
   every breakpoint) so it never overlaps text: smaller and closer
   to the edge on narrow screens, bigger and further out on wide
   ones where there's more margin to use. Spans the full page
   height (not just one screen's worth) so different icons appear
   as you scroll, and keeps animating even once you stop.

   Icon size + gutter offset are paired at each breakpoint so the
   icon's full reach (offset + size) always stays under the 28px
   .wrap padding, with a safety margin - never close enough to
   risk touching text.
   =========================================================== */
.float-deco{
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  --deco-gutter: 4px;
}
.float-deco svg{
  position: absolute;
  opacity: 0.38;
  width: 18px; height: 18px;
  animation: floatDrift linear infinite;
}
.float-deco svg.side-left{ left: var(--deco-gutter); }
.float-deco svg.side-right{ right: var(--deco-gutter); }
@keyframes floatDrift{
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(5px, -12px) rotate(4deg); }
  50%  { transform: translate(-3px, -20px) rotate(-3deg); }
  75%  { transform: translate(-6px, -8px) rotate(3deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
/* Reach = 4px + 18px = 22px, still under the 28px gutter (6px buffer). */
@media (min-width: 761px) and (max-width: 1399px){
  .float-deco{ --deco-gutter: 4px; }
  .float-deco svg{ width: 20px; height: 20px; }
  /* Reach = 4px + 20px = 24px, still under the 28px gutter (4px buffer). */
}
@media (min-width: 1400px){
  .float-deco{ --deco-gutter: clamp(8px, 2vw, 48px); }
  .float-deco svg{ width: 34px; height: 34px; }
  /* Wide screens have real margin outside .wrap's 1120px max-width, so icons can sit further out. */
}
@media (prefers-reduced-motion: reduce){
  .float-deco svg{ animation: none; }
}

/* ---------- FOOTER SOCIAL ICONS ---------- */
.footer-social{
  display: flex;
  gap: 14px;
  margin-top: 16px;
  align-items: center;
}
.footer-social a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.75);
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.footer-social a:hover{
  color: var(--white);
  border-color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.06);
}
.footer-social svg{ width: 17px; height: 17px; display:block; }

/* ---------- BMI CALCULATOR (home page) ---------- */
.calc-card{
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.calc-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 18px;
}
.calc-field label{
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 7px;
}
.calc-field input, .calc-field select{
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--white);
}
.calc-field input:focus, .calc-field select:focus{
  outline: none;
  border-color: var(--teal);
}
.calc-result{
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.calc-result[hidden]{ display: none; }
.calc-numbers{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}
.calc-stat .calc-stat-label{
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 6px;
}
.calc-stat .calc-stat-value{
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.15;
}
.calc-stat .calc-stat-sub{
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 3px;
}
.calc-note{
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--muted);
  background: var(--paper);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  margin: 0;
}
.calc-error{
  color: #B4453C;
  font-size: 0.88rem;
  margin: 12px 0 0;
}
.calc-error[hidden]{ display:none; }
@media (max-width: 860px){
  .calc-grid{ grid-template-columns: repeat(2, 1fr); }
  .calc-numbers{ grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 480px){
  .calc-grid{ grid-template-columns: 1fr; }
  .calc-card{ padding: 20px; }
}

/* ---------- BMI RESULT REPORT ---------- */
.calc-scale-wrap{ margin: 26px 0 30px; }
.calc-scale{
  position: relative;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  margin-bottom: 8px;
}
.calc-scale span{ display:block; height:100%; }
.calc-scale .seg-low{  width:17.5%; background:#8FA6C9; }
.calc-scale .seg-ok{   width:22.5%; background:#1ABCB4; }
.calc-scale .seg-mid{  width:10%;   background:#E8A33D; }
.calc-scale .seg-high{ width:50%;   background:#D08770; }
.calc-scale-marker{
  position:absolute; top:-7px;
  width: 4px; height: 28px;
  background: var(--navy);
  border-radius: 999px;
  transform: translateX(-50%);
  box-shadow: 0 0 0 3px var(--white);
  transition: left .5s cubic-bezier(.22,.9,.3,1);
}
.calc-scale-labels{
  display:flex; justify-content:space-between;
  font-family: var(--mono); font-size:0.66rem;
  color: var(--muted); letter-spacing:.04em;
}

.calc-verdict{
  border-left: 3px solid var(--teal);
  background: var(--paper);
  border-radius: var(--r-sm);
  padding: 16px 18px;
  margin-bottom: 22px;
}
.calc-verdict h3{
  margin: 0 0 6px;
  font-size: 1.05rem;
}
.calc-verdict p{ margin:0; font-size:0.92rem; line-height:1.65; color: var(--muted); }
.calc-verdict.tone-low{  border-left-color:#8FA6C9; }
.calc-verdict.tone-ok{   border-left-color:#1ABCB4; }
.calc-verdict.tone-mid{  border-left-color:#E8A33D; }
.calc-verdict.tone-high{ border-left-color:#D08770; }

.calc-steps{ margin-bottom: 24px; }
.calc-steps h4{
  font-family: var(--mono); font-size:0.72rem; text-transform:uppercase;
  letter-spacing:.09em; color: var(--muted); margin:0 0 12px;
}
.calc-steps ul{ margin:0; padding-left: 20px; }
.calc-steps li{ margin-bottom: 9px; font-size:0.93rem; line-height:1.6; }
.calc-steps li:last-child{ margin-bottom:0; }

.calc-cta{
  background: var(--navy);
  border-radius: var(--r-md);
  padding: 24px 26px;
  margin-bottom: 20px;
}
.calc-cta h3{ color: var(--white); margin:0 0 8px; font-size:1.15rem; }
.calc-cta p{
  color: rgba(255,255,255,0.78);
  font-size:0.92rem; line-height:1.65; margin:0 0 16px;
}
.calc-cta .btn{ margin:0; }
.calc-cta .btn-primary{
  background: var(--teal); color: var(--navy);
}
.calc-cta .btn-primary:hover{ background:#3ECFC8; }
@media (max-width: 480px){
  .calc-cta{ padding: 20px; }
}

/* ---------- CROSS-SELL: other Groteins tools ---------- */
.crosssell{ margin-top: 42px; }
.crosssell .cs-head{
  font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--muted); margin: 0 0 4px;
}
.crosssell h3{ font-size: 1.25rem; margin: 0 0 20px; }
.cs-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.cs-card{
  display:flex; flex-direction:column;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 22px 24px;
  text-decoration:none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cs-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--teal);
}
.cs-card .cs-tag{
  font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: .08em; padding: 4px 10px; border-radius: 999px;
  background: rgba(26,188,180,0.12); color: var(--teal-dark);
  align-self: flex-start; margin-bottom: 12px;
}
.cs-card .cs-tag.free{ background: rgba(232,163,61,0.16); color: #8a5f14; }
.cs-card h4{ font-size: 1.05rem; margin: 0 0 8px; color: var(--navy); }
.cs-card p{ font-size: 0.9rem; line-height: 1.6; color: var(--muted); margin: 0 0 14px; }
.cs-card .cs-go{
  margin-top:auto; font-size: 0.88rem; font-weight: 600; color: var(--teal-dark);
}
@media (max-width: 700px){
  .cs-grid{ grid-template-columns: 1fr; }
}