/* ============================================================
   Stilligent - site styles
   Palette and type are keyed to the instrument itself: a deep
   column-room dark, the brand gold as the warm end, a steel cool end, and one
   pale "distillate" band.
   ============================================================ */

:root{
  /* surfaces */
  --ink:      #071019;
  --ink-2:    #0b1826;
  --ink-3:    #0f2233;
  --rule:     #1a3047;
  --rule-hi:  #27455f;

  /* ink on dark */
  --paper:    #dfeaf3;
  --mute:     #8aaec8;
  --faint:    #658ca9;

  /* temperature ramp - also the accent system */
  --cold:     #2c5f7d;
  --cool:     #46b8d6;
  --spirit:   #e4eef5;
  --gold:      #d99a1f;   /* sampled from the brand mark */
  --gold-h:    #eeb23e;
  --gold-link: #e6ae4a;
  --hot:      #cf5b46;

  /* the pale band */
  --band:     #eceae5;
  --band-2:   #ddd9d1;
  --band-ink: #152738;
  --band-mute:#4d5f70;

  --shell: 1180px;
  --gut: clamp(20px, 5vw, 56px);

  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

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

html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--ink);
  background-image:
    radial-gradient(ellipse 70% 46% at 12% -6%, rgba(74,163,245,.07) 0%, transparent 62%),
    radial-gradient(ellipse 54% 40% at 92% 104%, rgba(217,154,31,.07) 0%, transparent 62%);
  background-attachment: fixed;
  color: var(--paper);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }

a{ color: var(--gold-link); text-decoration-color: rgba(230,174,74,.38); text-underline-offset: 3px; }
a:hover{ text-decoration-color: currentColor; }

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

.shell{
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.prose{ max-width: 62ch; }
.prose p{ margin: 0 0 1.15em; color: var(--mute); }
.prose p:last-child{ margin-bottom: 0; }
.prose strong{ color: var(--paper); font-weight: 500; }

.skip{
  position: absolute; left: -9999px; top: 0;
  background: var(--ink-3); color: var(--paper);
  padding: 10px 16px; z-index: 100;
}
.skip:focus{ left: 12px; top: 12px; }

/* ---------- type ---------- */

h1, h2, h3{ font-family: var(--serif); font-weight: 400; margin: 0; }

.display{
  font-size: clamp(2.1rem, 5.6vw, 3.8rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.017em;
  margin: 0;
}

.h-section{
  font-size: clamp(1.6rem, 3.4vw, 2.35rem);
  line-height: 1.16;
  letter-spacing: -.012em;
}

.h-sub{
  font-size: 1.22rem;
  line-height: 1.3;
  color: var(--paper);
}

.lede{
  font-size: clamp(1.02rem, 1.65vw, 1.2rem);
  line-height: 1.6;
  color: var(--mute);
  max-width: 54ch;
}

.reading{ font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- header ---------- */

.site-header{
  border-bottom: 1px solid var(--rule);
  background: rgba(7,16,25,.86);
  backdrop-filter: blur(9px);
  position: sticky; top: 0; z-index: 40;
}
.site-header .shell{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 70px;
  padding-block: 12px;
}
.site-header .mark img{ height: 50px; width: auto; }
/* wide screens: after scrolling down, the header slims to just the height of the menu (js/nav.js) */
@media (min-width: 881px){
  .site-header .shell{ transition: min-height .25s ease, padding .25s ease; }
  .site-header .mark img{ transition: height .25s ease; }
  .site-header.is-compact .shell{ min-height: 0; padding-block: 4px; }
  .site-header.is-compact .mark img{ height: 32px; }
  .site-header.is-compact .nav a{ padding-block: 4px; }
}
@media (min-width: 881px) and (prefers-reduced-motion: reduce){
  .site-header .shell, .site-header .mark img{ transition: none; }
}

.nav{
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 34px);
  margin-left: auto;
  flex-wrap: wrap;
}
.nav a{
  font-size: .95rem;
  color: var(--mute);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav a:hover{ color: var(--paper); border-bottom-color: var(--rule-hi); }
.nav a[aria-current="page"], .nav a[aria-current="true"]{ color: var(--paper); border-bottom-color: var(--gold); }
.nav a.nav-demo{ color: var(--gold-link); }
.nav a.nav-demo:hover{ color: var(--gold-link); border-bottom-color: var(--gold); }

/* hamburger toggle - hidden on wide screens; see the mobile nav rules below */
.nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 0;
  margin-left: auto;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle-bar{
  display: block;
  width: 20px;
  height: 2px;
  background: var(--paper);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- buttons ---------- */

.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: .97rem;
  font-weight: 500;
  padding: 13px 24px;
  border-radius: 3px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn-primary{
  background: var(--gold);
  border-color: var(--gold);
  color: #1a1204;
}
.btn-primary:hover{ background: var(--gold-h); border-color: var(--gold-h); }

.btn-ghost{
  background: transparent;
  border-color: var(--rule-hi);
  color: var(--paper);
}
.btn-ghost:hover{ border-color: var(--mute); }

.btn-row{ display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- hero ---------- */

.hero{
  padding-block: clamp(44px, 7vw, 86px) clamp(54px, 8vw, 104px);
  border-bottom: 1px solid var(--rule);
}

.hero-logo{
  width: clamp(250px, 42vw, 460px);
  height: auto;
  margin-bottom: clamp(34px, 5.5vw, 62px);
}

.hero-grid{
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: clamp(26px, 5vw, 66px);
  align-items: center;
}

.spine{ width: 100%; height: auto; }

.spine .axis-line{ stroke: var(--rule-hi); stroke-width: 1; }
.spine .tick{ stroke: var(--rule-hi); stroke-width: 1; }
.spine .tick-key{ stroke: var(--faint); }
.spine .deg{
  font-family: var(--mono);
  font-size: 13px;
  fill: var(--faint);
  text-anchor: end;
  font-variant-numeric: tabular-nums;
}
.spine .deg-key{ fill: var(--mute); }
.spine .phase{
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  fill: var(--mute);
}
.spine .phase-key{ fill: var(--spirit); }
.spine .note{
  font-family: var(--sans);
  font-size: 12px;
  fill: var(--faint);
}
.spine .window{ stroke: var(--gold); stroke-width: 1.5; fill: none; opacity: .75; }

.hero-copy .display{ margin-bottom: 22px; }
.hero-copy .lede{ margin: 0 0 30px; }

/* one orchestrated page-load moment: the column fills */
.spine-fill{
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: rise 3000ms cubic-bezier(.22,.7,.28,1) both;
}
.spine-mark{ animation: mark-in 900ms ease-out both; }
.spine-mark:nth-of-type(1){ animation-delay: 1.5s; }
.spine-mark:nth-of-type(2){ animation-delay: 1.74s; }
.spine-mark:nth-of-type(3){ animation-delay: 1.98s; }
.spine-mark:nth-of-type(4){ animation-delay: 2.22s; }
.spine-mark:nth-of-type(5){ animation-delay: 2.46s; }
.spine-mark:nth-of-type(6){ animation-delay: 2.7s; }

@keyframes rise{ from{ transform: scaleY(0); } to{ transform: scaleY(1); } }
@keyframes mark-in{ from{ opacity: 0; } to{ opacity: 1; } }

/* the same page-load moment, mirrored for the compact horizontal accent */
.spine-h-fill{
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation: rise-h 2200ms cubic-bezier(.22,.7,.28,1) both;
}
.spine-h-mark{ animation: mark-in 450ms ease-out both; }
.spine-h-marks .spine-h-mark:nth-child(1){ animation-delay: 1.16s; }
.spine-h-marks .spine-h-mark:nth-child(2){ animation-delay: 1.4s; }
.spine-h-marks .spine-h-mark:nth-child(3){ animation-delay: 1.64s; }
.spine-h-marks .spine-h-mark:nth-child(4){ animation-delay: 1.88s; }

@keyframes rise-h{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }

/* ---------- pale "distillate" band ---------- */

.band{
  background: var(--band);
  color: var(--band-ink);
  padding-block: clamp(50px, 7vw, 92px);
}
.band h2{ color: var(--band-ink); }
.band .band-intro{
  color: var(--band-mute);
  max-width: 58ch;
  margin: 16px 0 clamp(34px, 5vw, 54px);
}

/* anything reused inside the pale band has to flip its ink */
.band .prose p,
.band .lede,
.band .steps li{ color: var(--band-mute); }
.band .prose strong,
.band .steps li > b:first-child{ color: var(--band-ink); }
.band .spec th, .band .spec td{ border-bottom-color: var(--band-2); }
.band .spec th{ color: var(--band-ink); }
.band .spec td{ color: var(--band-mute); }
.band .spec-title{
  font-family: var(--serif);
  font-size: 1.22rem;
  font-weight: 400;
  color: var(--band-ink);
  margin: 0 0 14px;
}
.band .pull{ color: var(--band-ink); }
.band .btn-ghost{ border-color: var(--band-2); color: var(--band-ink); }
.band .btn-ghost:hover{ border-color: var(--band-mute); }
.band a{ color: #7d5b0d; }
.band a.btn-primary{ color: #1a1204; }
.band .faq-item{ border-top-color: var(--band-2); }
.band .faq-q{ color: var(--band-ink); }
.band .faq-a{ color: var(--band-mute); }
.band .faq-a strong{ color: var(--band-ink); }

.cuts{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--band-2);
}
.cut{
  padding: 22px 22px 6px 0;
  border-right: 1px solid var(--band-2);
  position: relative;
}
.cut:last-child{ border-right: 0; padding-right: 0; }
.cut::before{
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 46px; height: 3px;
  background: var(--cut-colour, var(--band-mute));
}
.cut .temp{
  font-family: var(--mono);
  font-size: .95rem;
  color: var(--band-mute);
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: 4px;
}
.cut h3{
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 8px;
  letter-spacing: -.005em;
}
.cut p{
  margin: 0;
  font-size: .94rem;
  line-height: 1.6;
  color: var(--band-mute);
  max-width: 34ch;
}

/* ---------- standard dark section ---------- */

.section{
  padding-block: clamp(50px, 7vw, 92px);
  border-bottom: 1px solid var(--rule);
}
.section-head{ margin-bottom: clamp(32px, 5vw, 52px); max-width: 60ch; }
.section-head p{ margin: 16px 0 0; color: var(--mute); }

.split{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 5vw, 64px) clamp(34px, 6vw, 78px);
}

.pillars{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 40px);
}

.cut-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 14px 36px;
  margin-top: 24px;
}
.cut-chips span{
  display: flex;
  align-items: baseline;
  gap: 9px;
  color: var(--mute);
  font-size: .95rem;
}
.cut-chips b{ color: var(--paper); font-weight: 600; }

.feature{ border-top: 1px solid var(--rule); padding-top: 20px; }
.feature h3{
  font-family: var(--sans);
  font-size: 1.06rem;
  font-weight: 600;
  margin: 0 0 9px;
  color: var(--paper);
}
.feature p{ margin: 0; color: var(--mute); font-size: .97rem; }
.feature .reading{ color: var(--cool); font-size: .94rem; }

/* spec list (about page) */
.spec{
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}
.spec th, .spec td{
  text-align: left;
  padding: 13px 16px 13px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.spec th{
  font-weight: 500;
  color: var(--paper);
  width: 34%;
  white-space: nowrap;
}
.spec td{ color: var(--mute); font-family: var(--mono); font-size: .88rem; line-height: 1.6; }

/* step list (about page) - a real sequence, so it is numbered */
.steps{ list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li{
  counter-increment: step;
  max-width: 78ch;
  border-top: 1px solid var(--rule);
  padding: 20px 0 20px 56px;
  position: relative;
  color: var(--mute);
}
.steps li::before{
  content: counter(step);
  position: absolute;
  left: 0; top: 20px;
  font-family: var(--mono);
  font-size: .85rem;
  color: var(--gold);
  border: 1px solid var(--rule-hi);
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
}
.steps li > b:first-child{ color: var(--paper); font-weight: 600; display: block; margin-bottom: 5px; }
.steps li strong{ color: var(--paper); font-weight: 600; }

/* pull quote */
.pull{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  line-height: 1.45;
  color: var(--spirit);
  border-left: 2px solid var(--gold);
  padding-left: clamp(18px, 3vw, 30px);
  margin: 0;
  max-width: 34ch;
}

/* ---------- call to action ---------- */

.cta{
  padding-block: clamp(50px, 7vw, 88px);
  border-bottom: 1px solid var(--rule);
  background:
    linear-gradient(180deg, rgba(217,154,31,.06), transparent 70%),
    var(--ink-2);
}
.cta-inner{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.cta p{ color: var(--mute); margin: 14px 0 0; max-width: 48ch; }

/* ---------- kicker (small caps label used above a heading) ---------- */

.kicker{
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-link);
  margin: 0 0 10px;
}

/* ---------- faq ---------- */

.faq-jump{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.faq-jump a{
  font-size: .9rem;
  color: var(--mute);
  text-decoration: none;
  border: 1px solid var(--rule-hi);
  border-radius: 999px;
  padding: 7px 15px;
  display: inline-block;
  transition: color .15s ease, border-color .15s ease;
}
.faq-jump a:hover{ color: var(--paper); border-color: var(--mute); }

.faq-group{ padding-block: clamp(40px, 6vw, 70px); border-bottom: 1px solid var(--rule); }
.faq-group:last-of-type{ border-bottom: 0; }
.faq-kicker{
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-link);
  margin: 0 0 10px;
}
.faq-group h2{ margin-bottom: clamp(26px, 4vw, 40px); max-width: 46ch; }

.faq-list{ display: grid; gap: 0; }
.faq-item{
  border-top: 1px solid var(--rule);
  padding-block: 24px;
  display: grid;
  grid-template-columns: minmax(0, 30ch) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 48px);
}
.faq-item:last-child{ padding-bottom: 4px; }
.faq-q{
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.03rem;
  color: var(--paper);
  margin: 0;
}
.faq-a{ margin: 0; color: var(--mute); }
.faq-a p{ margin: 0 0 .9em; }
.faq-a p:last-child{ margin-bottom: 0; }
.faq-a strong{ color: var(--paper); font-weight: 500; }

@media (max-width: 760px){
  .faq-item{ grid-template-columns: 1fr; gap: 10px; }
}

/* ---------- contact ---------- */

.form{ display: grid; gap: 20px; max-width: 34rem; }
.field{ display: grid; gap: 7px; }
.field label{ font-size: .9rem; color: var(--paper); font-weight: 500; }
.field input,
.field select,
.field textarea{
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--paper);
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 11px 13px;
  width: 100%;
  transition: border-color .15s ease;
}
.field textarea{ min-height: 150px; resize: vertical; line-height: 1.55; }
.field input:hover, .field select:hover, .field textarea:hover{ border-color: var(--rule-hi); }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--cool);
  outline: none;
  box-shadow: 0 0 0 3px rgba(70,184,214,.14);
}
.field .hint{ font-size: .84rem; color: var(--faint); }

.form-note{ font-size: .88rem; color: var(--faint); margin: 0; max-width: 42ch; }

.contact-list{ list-style: none; margin: 0; padding: 0; }
.contact-list li{
  border-top: 1px solid var(--rule);
  padding: 17px 0;
}
.contact-list .k{
  display: block;
  font-size: .85rem;
  color: var(--faint);
  margin-bottom: 3px;
}
.contact-list .v{ color: var(--paper); }
.contact-list .v a{ color: var(--gold-link); }

/* ---------- footer ---------- */

.site-footer{
  padding-block: 40px 52px;
  color: var(--faint);
  font-size: .9rem;
}
.footer-top{
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--rule);
}
.footer-top img{ height: 46px; width: auto; }
.footer-nav{ display: flex; flex-wrap: wrap; gap: clamp(16px, 3vw, 30px); }
.footer-nav a{ color: var(--mute); text-decoration: none; }
.footer-nav a:hover{ color: var(--paper); }
.footer-bottom{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  justify-content: space-between;
  padding-top: 22px;
}
.footer-bottom p{ margin: 0; max-width: 60ch; }

/* ---------- learning page ---------- */

section[id]{ scroll-margin-top: 84px; }

.fineprint{
  margin: 20px 0 0;
  max-width: 62ch;
  font-size: .92rem;
  color: var(--faint);
}

/* tables with sentence-length cells (comparisons, boiling points) */
.spec-text td{
  font-family: var(--sans);
  font-size: .95rem;
  line-height: 1.6;
}
.spec-text th{ white-space: normal; }
.spec thead th{
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom-color: var(--rule-hi);
}
.spec-text td.num{
  font-family: var(--mono);
  font-size: .9rem;
  white-space: nowrap;
  color: var(--paper);
}
.band .spec thead th{ color: var(--band-mute); border-bottom-color: var(--band-mute); }
.band .spec-text td.num{ color: var(--band-ink); }
.scroll-x{ overflow-x: auto; }

/* glossary: term on the left, plain-English meaning on the right */
.glossary{ margin: 0; }
.glossary > div{
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 8px clamp(20px, 4vw, 48px);
  padding: 18px 0;
  border-top: 1px solid var(--band-2);
}
.glossary > div:last-child{ border-bottom: 1px solid var(--band-2); }
.glossary dt{
  font-weight: 600;
  color: var(--band-ink);
}
.glossary dd{
  margin: 0;
  color: var(--band-mute);
  max-width: 62ch;
}
.glossary dd em{ color: var(--band-ink); font-style: normal; font-weight: 500; }

/* ticked list for independent safeguards */
.checklist{ list-style: none; margin: 0; padding: 0; }
.checklist li{
  position: relative;
  padding: 12px 0 12px 30px;
  border-top: 1px solid var(--rule);
  color: var(--mute);
}
.checklist li:last-child{ border-bottom: 1px solid var(--rule); }
.checklist li::before{
  content: "";
  position: absolute;
  left: 4px; top: 19px;
  width: 11px; height: 6px;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}
.checklist strong{ color: var(--paper); font-weight: 500; }

/* simple labelled still schematic */
.still-diagram{ width: 100%; height: auto; max-width: 480px; display: block; margin-inline: auto; }
.still-diagram .line{ fill: none; stroke: var(--mute); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.still-diagram .liquid{ fill: rgba(217,154,31,.18); stroke: none; }
.still-diagram .distillate{ fill: rgba(70,184,214,.28); stroke: none; }
.still-diagram .vapour{ fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 3 6; opacity: .75; }
.still-diagram .heat{ fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; }
.still-diagram .sensor{ fill: var(--gold); }
.still-diagram .lead{ stroke: var(--faint); stroke-width: 1; fill: none; }
.still-diagram text{ font-family: var(--sans); font-size: 13px; fill: var(--mute); }
.still-diagram .key{ fill: var(--paper); font-weight: 600; }

@media (max-width: 760px){
  .glossary > div{ grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- responsive ---------- */

/* compact horizontal temperature accent - hidden on wide screens where the
   full vertical spine has room to sit beside the copy. Shown only inside
   the max-width:880px block below; nothing else in this file sets its
   display, so the two spines can never both be visible at once. */
.spine-h-wrap{ display: none; }

@media (max-width: 880px){
  .hero-grid{ grid-template-columns: 1fr; }
  .spine-h{ width: 100%; height: auto; display: block; }
  .hero{ padding-top: clamp(28px, 5vw, 44px); overflow-x: clip; }
  .hero-logo{ margin-bottom: 30px; }
  .cuts{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cut:nth-child(2n){ border-right: 0; padding-right: 0; }
  .cut:nth-child(n+3){ border-top: 1px solid var(--band-2); margin-top: 22px; padding-top: 22px; }
  .split{ grid-template-columns: 1fr; }
  .pillars{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* collapse the header nav behind a hamburger so the logo keeps its room */
  .site-header .shell{ position: relative; }
  .nav-toggle{ display: flex; }
  .nav{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    background: var(--ink-2);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 16px 28px rgba(0,0,0,.35);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height .28s ease, visibility 0s linear .28s;
  }
  .nav.is-open{
    max-height: 480px;
    visibility: visible;
    transition: max-height .28s ease, visibility 0s linear 0s;
  }
  .nav a{
    padding: 15px var(--gut);
    border-bottom: 1px solid var(--rule);
  }
  .nav a:last-child{ border-bottom: 0; }
}

/* on a phone held upright, the full vertical spine has no room to sit
   beside the copy, so swap it for the slim horizontal accent, and let the
   hero logo fill the full screen width rather than sitting in a narrower
   centered box. */
@media (max-width: 880px) and (orientation: portrait){
  .spine-wrap{ display: none; }
  .spine-h-wrap{
    display: block;
    max-width: 300px;
    margin-bottom: clamp(32px, 6vw, 48px);
  }
  .hero-logo{
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }
}

/* a phone turned on its side has enough width for the full vertical spine
   again, so keep it rather than falling back to the compact horizontal
   accent - just sized down to suit the shorter viewport. */
@media (max-width: 880px) and (orientation: landscape){
  .spine-wrap{ display: block; max-width: 130px; }
  .spine-h-wrap{ display: none; }
}

@media (max-width: 560px){
  body{ font-size: 16px; }
  .cuts{ grid-template-columns: 1fr; }
  .cut{ border-right: 0; padding-right: 0; }
  .pillars{ grid-template-columns: 1fr; }
  .cut:nth-child(n+2){ border-top: 1px solid var(--band-2); margin-top: 20px; padding-top: 22px; }
  .site-header .shell{ min-height: 0; }
  .btn{ width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .spine-fill, .spine-mark, .spine-h-fill, .spine-h-mark{ animation: none !important; opacity: 1; transform: none; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ============================================================
   Distilling guide (distilling.html)
   ============================================================ */

/* sticky in-page contents bar, sits directly under the site header */
.page-toc{
  position: sticky;
  top: var(--header-h, 71px);
  z-index: 30;
  background: rgba(7,16,25,.92);
  backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--rule);
}
.page-toc ol{
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 10px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.page-toc ol::-webkit-scrollbar{ display: none; }
.page-toc a{
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  white-space: nowrap;
  font-size: .86rem;
  color: var(--mute);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 5px 13px;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.page-toc a span{ font-family: var(--mono); font-size: .74rem; color: var(--faint); }
.page-toc a:hover{ color: var(--paper); border-color: var(--rule-hi); }
.page-toc a[aria-current="true"]{
  color: var(--paper);
  border-color: rgba(217,154,31,.55);
  background: rgba(217,154,31,.08);
}
.page-toc a[aria-current="true"] span{ color: var(--gold-link); }

.guide section[id]{ scroll-margin-top: calc(var(--header-h, 71px) + 56px); }
.guide .glossary-grid > div{ scroll-margin-top: calc(var(--header-h, 71px) + 72px); }

/* intro note pointing to the glossary */
.intro-note{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 26px;
  max-width: 62ch;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: rgba(15,34,51,.55);
  color: var(--mute);
  font-size: .96rem;
}
.intro-note b{ color: var(--paper); font-weight: 600; }
.intro-note .ico{
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--rule-hi);
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold-link);
}

/* key-term links: quiet, but clearly "tap me for a definition" */
a.term{
  color: var(--paper);
  font-weight: 500;
  text-decoration: underline dotted;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  cursor: help;
}
a.term:hover{ color: var(--gold-link); text-decoration-style: solid; }
.band a.term{ color: var(--band-ink); text-decoration-color: #b07f18; }
.band a.term:hover{ color: #7d5b0d; }

/* definition popover (progressive enhancement - the link still jumps to
   the glossary without JavaScript) */
.term-pop{
  position: absolute;
  z-index: 60;
  width: min(340px, calc(100vw - 32px));
  background: var(--ink-3);
  border: 1px solid var(--rule-hi);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  padding: 16px 18px 14px;
  color: var(--mute);
  font-size: .93rem;
  line-height: 1.6;
}
.term-pop[hidden]{ display: none; }
.term-pop:focus{ outline: none; }
.term-pop h3{
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--paper);
  margin: 0 28px 6px 0;
}
.term-pop p{ margin: 0 0 10px; }
.term-pop em{ font-style: normal; color: var(--paper); font-weight: 500; }
.term-pop .term-pop-more{ font-size: .86rem; }
.term-pop-close{
  position: absolute;
  top: 8px; right: 8px;
  width: 30px; height: 30px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--mute);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.term-pop-close:hover{ color: var(--paper); background: rgba(255,255,255,.06); }

/* run walkthrough: what happens | what Stilligent does */
.run-steps{ list-style: none; margin: 0; padding: 0; counter-reset: step; }
.run-steps > li{
  counter-increment: step;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px clamp(26px, 4.5vw, 60px);
  padding: 24px 0 24px 56px;
  border-top: 1px solid var(--rule);
}
.run-steps > li:last-child{ border-bottom: 1px solid var(--rule); }
.run-steps > li::before{
  content: counter(step);
  position: absolute;
  left: 0; top: 23px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--rule-hi);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: .85rem;
  color: var(--gold);
}
.run-steps h3{
  font-family: var(--sans);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--paper);
  margin: 0 0 6px;
}
.run-steps p{ margin: 0; color: var(--mute); }
.run-steps .by{
  border-left: 2px solid var(--gold);
  padding: 2px 0 2px 18px;
  align-self: start;
}
.run-steps .by p{ font-size: .95rem; }
.by-label{
  display: block;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-link);
  margin-bottom: 4px;
}

/* expandable detail (technical specifications etc.) */
.more{
  margin-top: clamp(30px, 4vw, 44px);
  border-top: 1px solid var(--band-2);
  border-bottom: 1px solid var(--band-2);
}
.more summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  font-weight: 600;
  color: var(--band-ink);
}
.more summary::-webkit-details-marker{ display: none; }
.more summary::after{
  content: "+";
  font-family: var(--mono);
  font-size: 1.2rem;
  font-weight: 400;
  color: #7d5b0d;
  transition: transform .2s ease;
}
.more[open] summary::after{ transform: rotate(45deg); }
.more .more-body{ padding: 0 0 22px; }

/* safety lists */
.marklist{ list-style: none; margin: 0; padding: 0; }
.marklist li{
  position: relative;
  padding: 13px 0 13px 30px;
  border-top: 1px solid var(--rule);
  color: var(--mute);
}
.marklist li:last-child{ border-bottom: 1px solid var(--rule); }
.marklist strong{ color: var(--paper); font-weight: 500; }
.marklist li::before{
  content: "";
  position: absolute;
  left: 4px; top: 21px;
  width: 12px; height: 2px;
  background: var(--hot);
}

/* the disclaimer */
.notice{
  margin-top: clamp(40px, 6vw, 64px);
  padding: clamp(22px, 4vw, 36px);
  border: 1px solid var(--rule-hi);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  background: var(--ink-2);
}
.notice h3{
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-link);
  margin: 0 0 14px;
}
.notice p{ margin: 0 0 .9em; color: var(--mute); font-size: .93rem; max-width: 80ch; }
.notice p:last-child{ margin-bottom: 0; }
.notice strong{ color: var(--paper); font-weight: 500; }

/* glossary, two columns on wide screens */
.glossary-grid{
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(30px, 5vw, 64px);
}
.glossary-grid > div{
  padding: 16px 12px 16px 0;
  border-top: 1px solid var(--band-2);
  border-radius: 3px;
  transition: background-color .6s ease;
}
.glossary-grid dt{ font-weight: 600; color: var(--band-ink); margin-bottom: 3px; }
.glossary-grid dd{ margin: 0; color: var(--band-mute); font-size: .95rem; }
.glossary-grid dd em{ color: var(--band-ink); font-style: normal; font-weight: 500; }
.glossary-grid > div:target{
  background: rgba(217,154,31,.16);
  padding-left: 12px;
}

.to-top{ margin-top: 28px; font-size: .92rem; }

@media (max-width: 760px){
  .run-steps > li{ grid-template-columns: 1fr; padding-left: 46px; }
  .glossary-grid{ grid-template-columns: 1fr; }
}

/* ---------- home page: newcomer strip ---------- */
.strip{
  padding-block: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid var(--rule);
  background: var(--ink-2);
}
.strip-inner{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
}
.strip h2{ font-size: 1.35rem; line-height: 1.3; }
.strip p{ margin: 6px 0 0; color: var(--mute); max-width: 60ch; }

/* fixes for shared components used inside the guide */
.band .h-sub{ color: var(--band-ink); }
.section-head .kicker{ margin: 0 0 10px; color: var(--gold-link); }
@media (max-width: 560px){
  .spec-text td, .spec-text th{ font-size: .86rem; padding-right: 10px; }
  .spec-text td.num{ font-size: .82rem; }
}

/* ---------- boiling-point table: highlighted key row ---------- */
.spec-hl th:first-child{ padding-left: 14px; }
.spec-hl tr.row-key th,
.spec-hl tr.row-key td{
  background: rgba(217,154,31,.12);
  color: var(--paper);
}
.spec-hl tr.row-key th:first-child{ box-shadow: inset 3px 0 0 var(--gold); color: var(--gold-h); font-weight: 600; }
.spec-hl tr.row-key td.num{ color: var(--gold-h); }

/* ---------- the cuts: a run drawn as a ribbon ---------- */
.cutline-axis{
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--band-mute);
  margin-bottom: 10px;
}
.cutline-axis span:first-child::after{ content: "  →"; }
.cutline{
  display: grid;
  grid-template-columns: 1fr 1.3fr 1.9fr 1.45fr;
}
.cutline > article{
  position: relative;
  padding: 30px clamp(14px, 2vw, 26px) 4px 0;
}
.cutline > article::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 4px;
  height: 8px;
  border-radius: 4px;
  background: var(--c);
}
.cutline > article.hearts::before{
  top: -3px; height: 14px;
  box-shadow: 0 4px 18px rgba(217,154,31,.45);
}
.cutline .n{
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--band-mute);
}
.cutline h3{
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  line-height: 1.15;
  color: var(--band-ink);
  margin: 4px 0 2px;
}
.cutline .tag{
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--band-ink);
  margin: 0 0 10px;
  opacity: .8;
}
.cutline p{ margin: 0; font-size: .94rem; line-height: 1.6; color: var(--band-mute); }
.cutline .fate{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 4px 11px;
  border: 1px solid var(--band-2);
  border-radius: 999px;
  background: rgba(255,255,255,.5);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--band-ink);
}
.cutline .fate::before{
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c);
}
.cutline .fate a.term{ text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: .8rem; }

.cut-why{
  margin-top: clamp(56px, 8vw, 96px);
  padding-top: clamp(40px, 6vw, 64px);
  border-top: 1px solid var(--band-2);
}
.reasons{ list-style: none; margin: 0; padding: 0; counter-reset: r; }
.reasons li{
  counter-increment: r;
  position: relative;
  padding: 18px 0 18px 58px;
  border-top: 1px solid var(--band-2);
}
.reasons li:first-child{ border-top: 0; padding-top: 4px; }
.reasons li::before{
  content: counter(r, decimal-leading-zero);
  position: absolute;
  left: 0; top: 16px;
  font-family: var(--serif);
  font-size: 1.75rem;
  line-height: 1;
  color: #b07f18;
}
.reasons li:first-child::before{ top: 2px; }
.reasons h4{
  font-family: var(--sans);
  font-size: 1.03rem;
  font-weight: 600;
  color: var(--band-ink);
  margin: 0 0 4px;
}
.reasons p{ margin: 0; font-size: .95rem; color: var(--band-mute); }

@media (max-width: 1000px){
  .cutline{ grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  .cutline-axis{ display: none; }
}
@media (max-width: 560px){
  .cutline{ grid-template-columns: 1fr; row-gap: 0; }
  .cutline > article{ padding: 6px 0 26px 26px; }
  .cutline > article::before{ top: 0; bottom: 0; left: 0; right: auto; width: 6px; height: auto; border-radius: 3px; }
  .cutline > article.hearts::before{ top: 0; left: -2px; width: 10px; height: auto; }
  .reasons li{ padding-left: 48px; }
}

/* ============================================================
   Home page: hero brand row, thermometer, photos
   ============================================================ */
.hero-brand{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
  margin-bottom: clamp(30px, 5vw, 56px);
}
.hero-brand .hero-logo{ margin-bottom: 0; }
.hero-tagline{
  margin: 0;
  padding-left: clamp(18px, 2.5vw, 28px);
  border-left: 1px solid rgba(217,154,31,.5);
  font-family: var(--mono);
  font-size: clamp(.78rem, 1.15vw, .95rem);
  line-height: 1.9;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-link);
}

.hero-grid{ grid-template-columns: 150px minmax(0, 1fr); }
.spine-wrap{ max-width: 150px; }
.spine .glass{ fill: rgba(15,34,51,.6); stroke: var(--rule-hi); stroke-width: 1.5; }
.spine .window{ fill: rgba(217,154,31,.10); }

.hero-actions{ margin-top: 30px; }
.hero-facts{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--faint);
}
.hero-facts li{ display: flex; align-items: center; gap: 9px; }
.hero-facts li::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

/* photos */
.photo-fig{ margin: 0; }
.photo{
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--rule);
  box-shadow: 0 18px 40px rgba(0,0,0,.38);
  transition: transform .25s ease, border-color .25s ease;
}
.band .photo{ border-color: var(--band-2); box-shadow: 0 16px 34px rgba(21,39,56,.20); }
.photo-fig figcaption{
  margin-top: 10px;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .03em;
  color: var(--faint);
}
.band .photo-fig figcaption{ color: var(--band-mute); }
.photo-link{ display: block; border-radius: 6px; }
.photo-link:hover .photo,
.photo-link:focus-visible .photo{ transform: translateY(-3px); border-color: var(--gold); }

.benefits{
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.benefits .section-head{ margin-bottom: clamp(24px, 3.5vw, 36px); }
.benefits .pillars{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.photo-col{ display: flex; flex-direction: column; justify-content: center; }
.photo-col .photo-fig{ max-width: 520px; }

.cta-inner{ justify-content: flex-start; gap: clamp(28px, 5vw, 56px); }
.cta-fig{ flex: 0 0 clamp(260px, 32vw, 400px); }
.cta-copy{ flex: 1 1 320px; }

@media (max-width: 880px){
  .benefits{ grid-template-columns: 1fr; }
  .cta-fig{ flex-basis: 100%; max-width: 480px; }
  .hero-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 880px) and (orientation: landscape){
  .hero-grid{ grid-template-columns: 120px minmax(0, 1fr); }
  .spine-wrap{ max-width: 120px; }
}
@media (max-width: 880px) and (orientation: portrait){
  .hero-brand{ flex-direction: column; align-items: flex-start; gap: 18px; }
  .hero-tagline{ border-left: 0; padding-left: 0; line-height: 1.6; letter-spacing: .18em; }
  .hero-tagline br{ display: none; }
}
@media (max-width: 560px){
  .benefits .pillars{ grid-template-columns: 1fr; }
  .hero-facts{ flex-direction: column; }
}

/* home: the four cuts as a simple sequence */
.phase-flow{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 8px;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
.phase-flow li{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border: 1px solid var(--rule-hi);
  border-radius: 999px;
  font-size: .9rem;
  color: var(--paper);
}
.phase-flow li::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.phase-flow li.key{ border-color: rgba(217,154,31,.6); background: rgba(217,154,31,.08); }
.phase-flow li + li{ position: relative; margin-left: 14px; }
.phase-flow li + li::after{
  content: "";
  position: absolute;
  left: -16px; top: 50%;
  width: 10px; height: 1px;
  background: var(--faint);
}

/* ---------- demo page: the app embedded under the site header ---------- */
.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.demo-bar{ border-bottom: 1px solid var(--rule); background: var(--ink-2); }
.demo-bar-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  padding-block: 9px;
  flex-wrap: wrap;
}
.demo-bar p{ margin: 0; font-size: .88rem; color: var(--mute); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.demo-bar b{ color: var(--paper); font-weight: 600; }
.demo-live{
  width: 8px; height: 8px; border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 0 0 rgba(61,220,132,.6);
  animation: demo-pulse 2s ease-out infinite;
}
@keyframes demo-pulse{ 0%{ box-shadow: 0 0 0 0 rgba(61,220,132,.55); } 70%{ box-shadow: 0 0 0 8px rgba(61,220,132,0); } 100%{ box-shadow: 0 0 0 0 rgba(61,220,132,0); } }
.demo-bar-actions{ display: flex; gap: 8px; }
.demo-btn{
  font: 500 .82rem var(--sans);
  color: var(--paper);
  background: transparent;
  border: 1px solid var(--rule-hi);
  border-radius: 3px;
  padding: 6px 12px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.demo-btn:hover{ border-color: var(--mute); }
.demo-bar p.demo-bar-note{ display: block; margin: 0; }
/* a small play button sitting in the sentence, right after the word "play" */
.demo-play{
  display: inline-flex; align-items: center; justify-content: center; vertical-align: -5px;
  width: 30px; height: 20px; margin: 0 .4em; padding: 0; border-radius: 999px; cursor: pointer;
  border: 1px solid #16a34a; background: #22c55e; color: #052e16;
  transition: background-color .15s ease, box-shadow .2s ease, transform .08s ease;
}
.demo-play svg{ width: 13px; height: 13px; fill: currentColor; }
.demo-play:hover{ background: #34d46e; box-shadow: 0 0 0 4px rgba(34,197,94,.2); }
.demo-play:active{ transform: translateY(1px); }
.demo-play:focus-visible{ outline: 2px solid #7ee2b0; outline-offset: 2px; }
.demo-frame-wrap{ background: #050c14; border-bottom: 1px solid var(--rule); }
.demo-frame{
  display: block;
  width: 100%;
  height: calc(100vh - var(--header-h, 71px) - var(--demo-bar-h, 46px));
  height: calc(100dvh - var(--header-h, 71px) - var(--demo-bar-h, 46px));
  min-height: 520px;
  border: 0;
}
@media (max-width: 760px){
  .demo-bar .dn-long{ display: none; }
}
/* once the visitor scrolls or uses the demo: no message bar, and just the slim menu above the demo */
body.demo-active .demo-bar{ display: none; }
body.demo-active .site-header .shell{ min-height: 0; padding-block: 4px; }
body.demo-active .site-header .nav a{ padding-block: 4px; }

/* ============================================================
   FAQ page
   ============================================================ */
.faq-hero{ border-bottom: 0; padding-bottom: clamp(26px, 4vw, 40px); }
.faq-search{
  position: relative;
  margin-top: clamp(26px, 4vw, 36px);
  max-width: 560px;
}
.faq-search svg{
  position: absolute;
  left: 16px; top: 50%;
  width: 18px; height: 18px;
  transform: translateY(-50%);
  fill: none; stroke: var(--faint); stroke-width: 2; stroke-linecap: round;
  pointer-events: none;
}
.faq-search input{
  width: 100%;
  font: 1rem var(--sans);
  color: var(--paper);
  background: var(--ink-2);
  border: 1px solid var(--rule-hi);
  border-radius: 999px;
  padding: 14px 20px 14px 46px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.faq-search input::placeholder{ color: var(--faint); }
.faq-search input:focus{ outline: none; border-color: var(--cool); box-shadow: 0 0 0 3px rgba(70,184,214,.14); }
.faq-status{ min-height: 1.4em; margin: 10px 0 0 4px; font-size: .86rem; color: var(--faint); }

.faq-body{ padding-block: clamp(10px, 2vw, 20px) clamp(56px, 8vw, 96px); border-bottom: 1px solid var(--rule); }
.faq-layout{
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
}
.faq-nav{ position: sticky; top: calc(var(--header-h, 71px) + 24px); }
.faq-nav-title{
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 10px;
}
.faq-nav ul{ list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.faq-nav a{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0 8px 16px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--mute);
  text-decoration: none;
  font-size: .95rem;
}
.faq-nav a span{ font-family: var(--mono); font-size: .76rem; color: var(--faint); }
.faq-nav a:hover{ color: var(--paper); }
.faq-nav a[aria-current="true"]{ color: var(--paper); border-left-color: var(--gold); }
.faq-expand{
  margin-top: 18px;
  font: 500 .84rem var(--sans);
  color: var(--gold-link);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.faq-expand:hover{ text-decoration: underline; }

.faq-sec{ scroll-margin-top: calc(var(--header-h, 71px) + 20px); }
.faq-sec + .faq-sec{ margin-top: clamp(40px, 6vw, 60px); }
.faq-sec-h{ font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin-bottom: 14px; }

.faq-acc{
  border-top: 1px solid var(--rule);
  scroll-margin-top: calc(var(--header-h, 71px) + 20px);
}
.faq-acc:last-child{ border-bottom: 1px solid var(--rule); }
.faq-acc summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  font-weight: 600;
  font-size: 1.03rem;
  color: var(--paper);
  transition: color .15s ease;
}
.faq-acc summary::-webkit-details-marker{ display: none; }
.faq-acc summary::after{
  content: "";
  flex: none;
  width: 26px; height: 26px;
  border: 1px solid var(--rule-hi);
  border-radius: 50%;
  background:
    linear-gradient(var(--gold-link), var(--gold-link)) center / 10px 1.5px no-repeat,
    linear-gradient(var(--gold-link), var(--gold-link)) center / 1.5px 10px no-repeat;
  transition: transform .2s ease, border-color .15s ease;
}
.faq-acc[open] summary::after{
  transform: rotate(45deg);
  border-color: rgba(217,154,31,.6);
}
.faq-acc summary:hover{ color: var(--gold-h); }
.faq-acc-body{ padding: 0 44px 20px 0; color: var(--mute); max-width: 70ch; }
.faq-acc-body p{ margin: 0 0 .9em; }
.faq-acc-body p:last-child{ margin-bottom: 0; }
.faq-acc-body strong{ color: var(--paper); font-weight: 500; }
.faq-empty{ padding: 24px 0; color: var(--mute); }
.faq-empty b{ color: var(--paper); }

@media (max-width: 880px){
  .faq-layout{ grid-template-columns: 1fr; gap: 20px; }
  .faq-nav{ position: static; }
  .faq-nav-title{ display: none; }
  .faq-nav ul{ display: flex; flex-wrap: wrap; gap: 8px; border-left: 0; }
  .faq-nav a{
    border: 1px solid var(--rule-hi);
    border-radius: 999px;
    padding: 6px 14px;
    margin: 0;
    font-size: .88rem;
  }
  .faq-nav a[aria-current="true"]{ border-color: rgba(217,154,31,.6); }
  .faq-expand{ margin-top: 14px; }
  .faq-acc-body{ padding-right: 0; }
}

/* ============================================================
   Contact page
   ============================================================ */
.contact-hero{ border-bottom: 0; padding-bottom: clamp(20px, 3vw, 30px); }
.contact-body{ padding-top: clamp(10px, 2vw, 20px); }
.contact-layout{
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4.5fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
.contact-form{ display: grid; gap: 20px; }
.enquiry{ border: 0; margin: 0 0 6px; padding: 0; display: grid; gap: 10px; }
.enquiry legend{ font-size: .9rem; font-weight: 500; color: var(--paper); margin-bottom: 10px; padding: 0; }
.enquiry-opt{
  position: relative;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--ink-2);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.enquiry-opt:hover{ border-color: var(--rule-hi); }
.enquiry-opt input{
  appearance: none;
  flex: none;
  width: 18px; height: 18px;
  margin: 2px 0 0;
  border: 1.5px solid var(--rule-hi);
  border-radius: 50%;
  background: transparent;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.enquiry-opt input:checked{ border-color: var(--gold); box-shadow: inset 0 0 0 4px var(--ink-2), inset 0 0 0 9px var(--gold); }
.enquiry-opt input:focus-visible{ outline: 2px solid var(--cool); outline-offset: 3px; }
.enquiry-opt:has(input:checked){ border-color: rgba(217,154,31,.55); background: rgba(217,154,31,.06); }
.enquiry-opt b{ display: block; color: var(--paper); font-weight: 600; }
.enquiry-opt small{ display: block; color: var(--mute); font-size: .88rem; margin-top: 2px; }

.field-row{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field .opt{ color: var(--faint); font-weight: 400; }
.form-foot{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 4px; }
.form-note.is-error{ color: var(--hot); }

.contact-aside{ display: grid; gap: 20px; }
.contact-card{
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--ink-2);
  padding: clamp(20px, 3vw, 28px);
}
.contact-card .h-sub{ margin-bottom: 6px; }
.contact-card .contact-list li:first-child{ border-top: 0; }
.quick-links{ list-style: none; margin: 8px 0 0; padding: 0; }
.quick-links li + li{ border-top: 1px solid var(--rule); }
.quick-links a{
  display: flex;
  flex-direction: column;
  padding: 13px 24px 13px 0;
  position: relative;
  text-decoration: none;
}
.quick-links a::after{
  content: "→";
  position: absolute;
  right: 2px; top: 50%;
  transform: translateY(-50%);
  color: var(--gold-link);
  transition: transform .15s ease;
}
.quick-links a:hover::after{ transform: translate(4px, -50%); }
.quick-links b{ color: var(--paper); font-weight: 500; }
.quick-links span{ color: var(--faint); font-size: .86rem; }
.contact-fine{ margin: 0; font-size: .86rem; color: var(--faint); line-height: 1.6; }
.contact-fine a{ color: var(--gold-link); }
.forum-first{
  display: flex; align-items: center; gap: 18px 28px; flex-wrap: wrap; justify-content: space-between;
  margin-top: 28px; padding: clamp(18px, 2.6vw, 24px) clamp(18px, 3vw, 28px);
  border: 1px solid rgba(217,154,31,.35); border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0;
  background: rgba(217,154,31,.05);
}
.forum-first > div{ flex: 1 1 380px; min-width: 0; }
.forum-first .h-sub{ margin: 0 0 6px; }
.forum-first p{ margin: 0; color: var(--mute); line-height: 1.6; }

@media (max-width: 880px){
  .contact-layout{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .field-row{ grid-template-columns: 1fr; }
}

/* ---------- FAQ search: button, suggestions, results ---------- */
.faq-search{ max-width: 620px; }
.faq-search input{ padding-right: 112px; }
.faq-search input::-webkit-search-cancel-button{ margin-right: 4px; }
.faq-search-btn{
  position: absolute;
  right: 6px; top: 6px; bottom: 6px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--gold);
  color: #1a1204;
  font: 600 .9rem var(--sans);
  cursor: pointer;
}
.faq-search-btn:hover{ background: var(--gold-h); }
.faq-suggest{
  position: absolute;
  left: 0; right: 0; top: calc(100% + 6px);
  z-index: 20;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: var(--ink-3);
  border: 1px solid var(--rule-hi);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.faq-suggest li{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--paper);
  font-size: .95rem;
}
.faq-suggest li.is-active, .faq-suggest li:hover{ background: rgba(255,255,255,.06); }
.faq-suggest .sg-t{ flex: none; font-family: var(--mono); font-size: .72rem; color: var(--faint); }
.faq-suggest .sg-all{ color: var(--gold-link); font-size: .88rem; border-top: 1px solid var(--rule); border-radius: 0 0 8px 8px; margin-top: 4px; }
.faq-suggest kbd{
  font-family: var(--mono); font-size: .7rem; color: var(--faint);
  border: 1px solid var(--rule-hi); border-radius: 4px; padding: 1px 6px;
}
.faq-suggest mark, .faq-results mark{ background: rgba(217,154,31,.22); color: inherit; border-radius: 2px; padding: 0 1px; }

.faq-results-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.faq-results-head p{ margin: 0; color: var(--mute); }
.faq-results-head b{ color: var(--paper); font-weight: 600; }
.faq-clear{ font: 500 .88rem var(--sans); color: var(--gold-link); background: none; border: 0; padding: 0; cursor: pointer; }
.faq-clear:hover{ text-decoration: underline; }
.faq-results-list{ list-style: none; margin: 0; padding: 0; }
.faq-results-list li{ border-bottom: 1px solid var(--rule); }
.faq-results-list a{
  display: grid;
  gap: 4px;
  padding: 18px 12px 18px 0;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color .15s ease;
}
.faq-results-list a:hover{ background: rgba(255,255,255,.025); }
.faq-results-list a:hover .rs-q{ color: var(--gold-h); text-decoration: underline; text-underline-offset: 3px; }
.rs-topic{ font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.rs-q{ font-size: 1.08rem; font-weight: 600; color: var(--paper); }
.rs-snip{ color: var(--mute); font-size: .94rem; line-height: 1.6; }

.faq-acc.is-flash{ animation: faq-flash 1.6s ease-out; }
@keyframes faq-flash{ 0%, 30%{ background: rgba(217,154,31,.14); } 100%{ background: transparent; } }

@media (max-width: 560px){
  .faq-search input{ padding-right: 96px; }
  .faq-search-btn{ padding: 0 14px; }
  .faq-suggest .sg-t{ display: none; }
}
.hero-kicker-line{
  margin: 18px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  color: var(--spirit);
}

/* ---------- Distilling: layered shutdown ---------- */
.layered{
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(15,34,51,.7), rgba(11,24,38,.5));
}
.layered-intro{ max-width: 72ch; }
.layered-intro p{ color: var(--mute); margin: 10px 0 0; }
.layered-intro strong{ color: var(--paper); font-weight: 500; }
.watchdogs{
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  counter-reset: wd;
}
.watchdogs li{
  counter-increment: wd;
  position: relative;
  padding: 20px 20px 22px;
  border: 1px solid var(--rule-hi);
  border-radius: 8px;
  background: var(--ink);
}
.watchdogs li::before{
  content: counter(wd);
  position: absolute;
  top: -13px; left: 18px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: #1a1204;
  font: 600 .8rem var(--mono);
}
.watchdogs li + li::after{
  content: "";
  position: absolute;
  left: -14px; top: 50%;
  width: 10px; height: 10px;
  border-top: 1.5px solid var(--gold);
  border-right: 1.5px solid var(--gold);
  transform: translateY(-50%) rotate(45deg);
}
.wd-path{
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cool);
}
.wd-path i{ font-style: normal; color: var(--faint); }
.watchdogs h4{ margin: 8px 0 6px; font-size: 1.02rem; font-weight: 600; color: var(--paper); }
.watchdogs p{ margin: 0; font-size: .93rem; color: var(--mute); }
@media (max-width: 880px){
  .watchdogs{ grid-template-columns: 1fr; gap: 26px; }
  .watchdogs li + li::after{ left: 50%; top: -20px; transform: translateX(-50%) rotate(135deg); }
}

/* ---------- header search icon + search panel ---------- */
.nav-search{
  flex: none;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  margin-left: clamp(10px, 1.6vw, 20px);
  border: 1px solid var(--rule-hi);
  border-radius: 50%;
  color: var(--mute);
  transition: color .15s ease, border-color .15s ease;
}
.nav-search:hover{ color: var(--paper); border-color: var(--mute); }
.nav-search svg{ width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 880px){
  .nav-search{ margin-left: auto; }
  .nav-toggle{ margin-left: 6px; }
}

html.ss-open{ overflow: hidden; }
.ss-panel{ position: fixed; inset: 0; z-index: 100; }
.ss-panel[hidden]{ display: none; }
.ss-backdrop{ position: absolute; inset: 0; background: rgba(3,8,14,.72); backdrop-filter: blur(4px); }
.ss-box{
  position: relative;
  width: min(660px, calc(100% - 32px));
  margin: clamp(60px, 12vh, 120px) auto 0;
  background: var(--ink-3);
  border: 1px solid var(--rule-hi);
  border-radius: 14px;
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
  overflow: hidden;
}
.ss-form{ position: relative; display: flex; align-items: center; border-bottom: 1px solid var(--rule); }
.ss-form svg{
  position: absolute; left: 18px; width: 19px; height: 19px;
  fill: none; stroke: var(--faint); stroke-width: 2; stroke-linecap: round;
}
.ss-input{
  flex: 1;
  min-width: 0;
  font: 1.08rem var(--sans);
  color: var(--paper);
  background: transparent;
  border: 0;
  padding: 18px 12px 18px 50px;
}
.ss-input:focus{ outline: none; }
.ss-input::placeholder{ color: var(--faint); }
.ss-close{
  margin-right: 12px;
  font: 500 .72rem var(--mono);
  color: var(--faint);
  background: none;
  border: 1px solid var(--rule-hi);
  border-radius: 4px;
  padding: 3px 7px;
  cursor: pointer;
}
.ss-list{ list-style: none; margin: 0; padding: 6px; max-height: min(52vh, 420px); overflow-y: auto; }
.ss-list li[role="option"]{
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 11px 12px; border-radius: 8px; cursor: pointer; color: var(--paper);
}
.ss-list li.is-active, .ss-list li[role="option"]:hover{ background: rgba(255,255,255,.06); }
.ss-t{ font-size: .98rem; }
.ss-p{ flex: none; font-family: var(--mono); font-size: .7rem; color: var(--faint); text-align: right; }
.ss-none{ padding: 12px; color: var(--mute); font-size: .92rem; }
.ss-list mark{ background: rgba(217,154,31,.22); color: inherit; border-radius: 2px; }
.ss-hint{ margin: 0; padding: 10px 18px; border-top: 1px solid var(--rule); font-size: .8rem; color: var(--faint); }
.ss-hint kbd{ font-family: var(--mono); font-size: .7rem; border: 1px solid var(--rule-hi); border-radius: 4px; padding: 1px 6px; }
@media (max-width: 560px){
  .ss-box{ margin-top: 12px; }
  .ss-p{ display: none; }
}

.search-page{ min-height: 60vh; }
.search-page .faq-search{ margin-top: 22px; }
.site-results{ margin-top: clamp(26px, 4vw, 40px); max-width: 820px; }

/* ---------- contact: text box with suggestions ---------- */
.combo{ position: relative; }
.combo input{ padding-right: 44px; }
.combo-btn{
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; background: none; cursor: pointer;
  color: var(--mute);
}
.combo-btn svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.combo-btn:hover{ color: var(--paper); }
.combo-list{
  position: absolute;
  left: 0; right: 0; top: calc(100% + 4px);
  z-index: 20;
  list-style: none;
  margin: 0; padding: 5px;
  background: var(--ink-3);
  border: 1px solid var(--rule-hi);
  border-radius: 8px;
  box-shadow: 0 16px 32px rgba(0,0,0,.4);
}
.combo-list li{ padding: 9px 11px; border-radius: 5px; cursor: pointer; color: var(--paper); font-size: .95rem; }
.combo-list li[hidden]{ display: none; }
.combo-list li.is-active, .combo-list li:hover{ background: rgba(255,255,255,.06); }
.combo-list li[aria-selected="true"]{ color: var(--gold-h); }
.field-row .field{ align-content: start; }

/* ---------- Introduction: altitude table, specifications ---------- */
.altitude{ margin-top: clamp(36px, 5vw, 56px); }
.altitude .h-sub{ margin-bottom: 12px; }
.altitude .spec td.num[colspan]{ color: var(--mute); font-family: var(--sans); white-space: normal; }
.altitude-note{ margin: 16px 0 0; max-width: 70ch; color: var(--mute); }

.specsheet{ margin-top: clamp(40px, 6vw, 60px); }
.specsheet .h-sub{ margin-bottom: 16px; }
.spec-grid{
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--band-2);
}
.spec-grid > div{
  padding: 16px 20px 18px 0;
  border-bottom: 1px solid var(--band-2);
}
.spec-grid dt{
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7d5b0d;
  margin-bottom: 6px;
}
.spec-grid dd{ margin: 0; font-size: .94rem; line-height: 1.55; color: var(--band-ink); }
@media (max-width: 880px){ .spec-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .spec-grid{ grid-template-columns: 1fr; } }
.altitude .spec thead th{ white-space: nowrap; }
.specsheet .spec-grid{ margin-bottom: 22px; }
.specsheet summary{ font-size: 1.02rem; }

/* ---------- home hero on phones held upright ----------
   "Intelligent" on its own line in a paler champagne gold, and a slim
   thermometer gauge running down the left of the headline and intro. */
.spine-slim{ display: none; }
@media (max-width: 880px) and (orientation: portrait){
  .spine-h-wrap{ display: none !important; }
  .hero-brand{ margin-bottom: 30px; }
  .hero-tagline{ font-size: .82rem; line-height: 1.8; }
  .hero-tagline br:first-of-type{ display: inline; }
  .hero-tagline .tl-a{ color: #f3dfb4; letter-spacing: .32em; }
  .hero-tagline .tl-b{ color: var(--gold-link); }

  .hero-grid{ grid-template-columns: 22px minmax(0, 1fr); gap: 20px; align-items: start; }
  .spine-slim{ display: block; position: relative; height: 300px; margin-top: 8px; }
  .spine-slim::before{          /* tick marks */
    content: ""; position: absolute; left: 20px; top: 14px; bottom: 34px; width: 5px;
    background: repeating-linear-gradient(to bottom, var(--faint) 0 1px, transparent 1px 26px);
  }
  .spine-slim::after{           /* the hearts window */
    content: ""; position: absolute; left: 19px; top: 40%; width: 7px; height: 22px;
    border-radius: 3px; border: 1px solid rgba(217,154,31,.8); background: rgba(217,154,31,.18);
  }
  .ss-tube{
    position: absolute; left: 4px; top: 6px; bottom: 26px; width: 14px;
    border-radius: 7px; background: rgba(15,34,51,.7); border: 1.2px solid var(--rule-hi); overflow: hidden;
  }
  .ss-fill{
    position: absolute; left: 3px; right: 3px; top: 3px; bottom: 0; border-radius: 4px;
    background: linear-gradient(to top, #1d4c66 0%, #2f96b8 22%, #7fb8cf 42%, #e4eef5 58%, #d99a1f 74%, #cf5b46 92%, #8a3a2e 100%);
    transform-origin: 50% 100%;
    animation: rise 3000ms cubic-bezier(.22,.7,.28,1) both;
  }
  .ss-bulb{
    position: absolute; left: -1px; bottom: 0; width: 24px; height: 24px; border-radius: 50%;
    background: radial-gradient(circle at 40% 38%, #3fa9cc, #173f56 70%); border: 1.2px solid var(--rule-hi);
  }
}
@media (prefers-reduced-motion: reduce){ .ss-fill{ animation: none; } }
@media (max-width: 880px) and (orientation: portrait){
  .hero-tagline{ align-self: flex-end; text-align: right; white-space: nowrap; }
  .hero-tagline .tl-a{ margin-right: -.32em; }   /* cancel trailing letter-spacing so the right edges line up */
  .hero-tagline .tl-b:last-child{ margin-right: -.18em; }
}

/* search page: suggestions under its own box, styled like the header panel */
.page-suggest{
  position: absolute;
  left: 0; right: 0; top: calc(100% + 6px);
  z-index: 20;
  background: var(--ink-3);
  border: 1px solid var(--rule-hi);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.ss-none kbd{ font-family: var(--mono); font-size: .7rem; border: 1px solid var(--rule-hi); border-radius: 4px; padding: 1px 5px; }

/* slim footer: the header is always on screen, so no second logo or menu */
.site-footer{ padding-block: 26px 34px; border-top: 1px solid var(--rule); }
.site-footer .footer-bottom{ padding-top: 0; align-items: baseline; }
.footer-tag{ font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--mute); }

/* swipe feedback */
.swipe-toast{
  position: fixed;
  left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  transform: translate(-50%, 12px);
  max-width: calc(100% - 40px);
  padding: 9px 16px;
  border: 1px solid rgba(217,154,31,.5);
  border-radius: 999px;
  background: rgba(15,34,51,.94);
  backdrop-filter: blur(6px);
  color: var(--paper);
  font: 500 .86rem var(--sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.swipe-toast.is-on{ opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   FAQ - tighter layout
   ============================================================ */
.faq-hero{ padding-top: clamp(36px, 6vw, 64px); padding-bottom: clamp(18px, 3vw, 28px); }
.faq-title{ font-size: clamp(2rem, 4.6vw, 3rem); font-weight: 300; }
.faq-lede{ margin: 12px 0 0; color: var(--mute); max-width: 60ch; }
.faq-hero .faq-search{ margin-top: 22px; }
.faq-popular{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 8px;
  margin: 16px 0 0;
}
.faq-popular span{
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); margin-right: 4px;
}
.faq-popular a{
  font-size: .86rem; color: var(--mute); text-decoration: none;
  border: 1px solid var(--rule-hi); border-radius: 999px; padding: 5px 12px;
  transition: color .15s ease, border-color .15s ease;
}
.faq-popular a:hover{ color: var(--paper); border-color: var(--gold); }

.faq-sec + .faq-sec{ margin-top: clamp(36px, 5vw, 52px); }
.faq-sec-h{
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--serif); font-size: clamp(1.35rem, 2.4vw, 1.65rem); font-weight: 400;
  color: var(--paper); margin: 0 0 10px;
}
.faq-sec-h span{
  font-family: var(--mono); font-size: .72rem; color: var(--faint);
  border: 1px solid var(--rule-hi); border-radius: 999px; padding: 1px 8px;
}
.faq-acc summary{ padding: 16px 0; }

/* safety in detail, now part of the questions column */
.safety-detail .sd-lede{ margin: 0 0 18px; color: var(--mute); max-width: 68ch; }
.safety-detail .layered{ margin-bottom: 22px; }
.safety-detail .watchdogs{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sd-acc .faq-acc-body{ max-width: none; }
.sd-acc .checklist li:first-child, .sd-acc .marklist li:first-child{ border-top: 0; }
.sd-acc .checklist li:last-child, .sd-acc .marklist li:last-child{ border-bottom: 0; }
.sd-note{ margin: 0 0 8px; font-size: .92rem; }
.safety-detail .notice{ margin-top: 28px; }

/* phones and tablets: topics become a sticky, swipeable chip bar */
@media (max-width: 880px){
  .faq-nav{
    position: sticky; top: var(--header-h, 63px); z-index: 30;
    margin: 0 calc(-1 * var(--gut));
    padding: 10px var(--gut);
    background: rgba(7,16,25,.94); backdrop-filter: blur(9px);
    border-bottom: 1px solid var(--rule);
  }
  .faq-nav ul{ flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; }
  .faq-nav ul::-webkit-scrollbar{ display: none; }
  .faq-nav a{ white-space: nowrap; padding: 5px 13px; font-size: .86rem; }
  .faq-expand{ display: none; }
  .faq-sec, .faq-acc{ scroll-margin-top: calc(var(--header-h, 63px) + 64px); }
  .safety-detail .watchdogs{ grid-template-columns: 1fr; }
}
.faq-layout > *{ min-width: 0; }

/* Demo is an ordinary menu item now */
.nav a.nav-demo{ color: var(--mute); }
.nav a.nav-demo:hover{ color: var(--paper); border-bottom-color: var(--rule-hi); }
.nav a.nav-demo[aria-current="page"]{ color: var(--paper); border-bottom-color: var(--gold); }

/* footer tagline: small, spaced capitals instead of italics */
.footer-tag{
  font-family: var(--mono);
  font-style: normal;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}

/* term pop-up: links to other terms, and a way back */
.term-pop p a.term{ color: var(--paper); text-decoration-color: var(--gold); }
.term-pop-back{
  display: inline-flex; align-items: center; gap: 4px;
  margin: 0 0 6px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font: 500 .78rem var(--sans); color: var(--gold-link);
}
.term-pop-back[hidden]{ display: none; }
.term-pop-back:hover{ text-decoration: underline; }

/* ============================================================
   Breadcrumbs - shown above the main heading on every page but home
   ============================================================ */
.crumbs{
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 12px;
  min-width: 0;
}
.crumbs ol{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: baseline;
  min-width: 0;
}
.crumbs li{ white-space: nowrap; flex: none; color: var(--faint); }
.crumbs li + li::before{ content: "›"; margin: 0 .55em; color: var(--faint); }
.crumbs li[aria-current]{ color: var(--gold-link); flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.crumbs a{ color: var(--mute); text-decoration: none; transition: color .15s ease; }
.crumbs a:hover{ color: var(--paper); }
.crumbs-inline{ margin: 0; font-size: .74rem; }
.demo-bar-text{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .88rem; color: var(--mute); min-width: 0; }

/* ---------- 404 ---------- */
.notfound{ min-height: 60vh; }
.nf-links{ list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.nf-links a{ color: var(--gold-link); }

/* animated logo (a short looping video; its soft edges blend into the page) */
video.hero-logo{
  display: block;
  aspect-ratio: 3 / 1;
  height: auto;
  background: transparent;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%),
                      linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%),
              linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-composite: intersect;
}

/* ============================================================
   Guides (guides/*.html)
   ============================================================ */
.gd-hero{ border-bottom: 0; padding-bottom: clamp(26px, 4vw, 40px); }
.gd-hero .display{ font-size: clamp(2rem, 5vw, 3.3rem); max-width: 22ch; }
.gd-hero .lede{ margin-top: 20px; max-width: 60ch; }
.byline{
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  margin: 22px 0 0;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .04em;
  color: var(--faint);
}
.byline b{ color: var(--mute); font-weight: 500; }

.gd-sec{ padding-block: clamp(40px, 6vw, 70px); border-bottom: 1px solid var(--rule); }
.gd-sec:last-of-type{ border-bottom: 0; }
.gd-col{ max-width: 72ch; }
.gd-col > h2{ font-size: clamp(1.5rem, 3vw, 2.05rem); line-height: 1.18; letter-spacing: -.01em; margin: 0 0 18px; }
.gd-col > h3{ font-family: var(--sans); font-size: 1.08rem; font-weight: 600; color: var(--paper); margin: 30px 0 10px; }
.gd-col p, .gd-col li{ color: var(--mute); }
.gd-col p{ margin: 0 0 1.1em; }
.gd-col strong{ color: var(--paper); font-weight: 500; }
.gd-col ul, .gd-col ol:not(.steps){ margin: 0 0 1.2em; padding-left: 1.25em; }
.gd-col li{ margin: 0 0 .5em; }
.gd-col li::marker{ color: var(--faint); }
.gd-col .steps{ margin: 8px 0 1.2em; }
.gd-col .steps li{ padding-top: 18px; padding-bottom: 18px; }
.gd-col .scroll-x{ margin: 8px 0 1.4em; }
.gd-col .spec th{ width: auto; }
.gd-col .fineprint{ margin-top: -6px; margin-bottom: 1.4em; }

/* the short answer, given first */
.gd-key{
  margin: 0;
  padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 30px);
  border: 1px solid var(--rule-hi);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  background: rgba(217,154,31,.04);
}
.gd-key h2{ font-family: var(--mono); font-size: .8rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-link); margin: 0 0 12px; }
.gd-key ul{ margin: 0; padding-left: 1.15em; }
.gd-key li{ color: var(--paper); margin-bottom: .55em; }
.gd-key li:last-child{ margin-bottom: 0; }

/* callouts */
.gd-note{
  display: flex; gap: 14px; align-items: flex-start;
  margin: 6px 0 1.4em;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--ink-2);
}
.gd-note > span{
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font: 600 .78rem var(--mono);
  color: var(--ink); background: var(--cool);
  margin-top: 2px;
}
.gd-note.caution > span{ background: var(--gold); }
.gd-note p{ margin: 0 0 .6em; font-size: .96rem; }
.gd-note p:last-child{ margin: 0; }
.gd-note b{ color: var(--paper); font-weight: 600; }

/* figures and charts */
.gd-fig{ margin: 10px 0 1.6em; }
.gd-fig figcaption{ margin-top: 10px; font-size: .88rem; color: var(--faint); max-width: 70ch; }
.gd-photo{ margin: 22px 0 1.8em; }
.gd-photo img{ display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--rule); background: var(--ink-2); }
.gd-photo.is-portrait{ max-width: 340px; }
.gd-photo.is-portrait img{ max-height: 520px; object-fit: contain; }
.gd-photo figcaption{ margin-top: 10px; font-size: .88rem; line-height: 1.55; color: var(--faint); max-width: 70ch; }
.photo-labels{ display: grid; grid-template-columns: repeat(3, 1fr); margin: 10px 0 0; padding: 0 4%; list-style: none; }
.photo-labels li{ text-align: center; font: 500 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.photo-labels li:nth-child(2){ color: var(--gold-link); }
@media (max-width: 560px){ .photo-labels{ padding: 0; } .photo-labels li{ font-size: .64rem; letter-spacing: .04em; } }
.gd-chart{
  margin: 10px 0 1.6em;
  padding: clamp(14px, 2.4vw, 22px);
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--ink-2);
}
.gd-chart-title{ margin: 0 0 4px; font-weight: 600; color: var(--paper); font-size: .98rem; }
.gd-chart-sub{ margin: 0 0 10px; font-size: .86rem; color: var(--faint); }
.gd-legend{ display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 6px; padding: 0; list-style: none; font-size: .86rem; color: var(--mute); }
.gd-legend li{ display: inline-flex; align-items: center; gap: 8px; }
.gd-legend i{ width: 16px; height: 3px; border-radius: 2px; display: inline-block; }
.gd-plot{ position: relative; width: 100%; touch-action: pan-y; }
.gd-plot svg{ display: block; width: 100%; height: auto; overflow: visible; }
.gd-plot .ax{ font: 400 12px var(--mono); fill: var(--faint); }
.gd-plot .ax-title{ font: 400 12px var(--sans); fill: var(--mute); }
.gd-plot .grid{ stroke: var(--rule); stroke-width: 1; }
.gd-plot .base{ stroke: var(--rule-hi); stroke-width: 1; }
.gd-plot .line{ fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.gd-plot .end-label{ font: 500 12px var(--sans); fill: var(--paper); }
.gd-plot .mark-line{ stroke: var(--rule-hi); stroke-width: 1; stroke-dasharray: 0; }
.gd-plot .mark-label{ font: 400 11.5px var(--sans); fill: var(--mute); }
.gd-plot .xhair{ stroke: var(--mute); stroke-width: 1; opacity: .6; }
.gd-plot .hdot{ stroke: var(--ink-2); stroke-width: 2; }
.gd-tip{
  position: absolute; pointer-events: none; z-index: 2;
  min-width: 140px;
  padding: 8px 11px;
  border: 1px solid var(--rule-hi); border-radius: 4px;
  background: rgba(7,16,25,.96);
  font-size: .82rem; color: var(--mute); line-height: 1.45;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.gd-tip b{ display: block; color: var(--paper); font-weight: 600; margin-bottom: 2px; }
.gd-tip span{ display: flex; align-items: center; gap: 7px; justify-content: space-between; }
.gd-tip i{ width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.gd-tip em{ font-style: normal; font-family: var(--mono); color: var(--paper); }
.gd-data{ margin-top: 10px; }
.gd-data summary{ cursor: pointer; font-size: .86rem; color: var(--gold-link); }
.gd-data .spec{ margin-top: 10px; font-size: .9rem; }
.gd-data .spec th, .gd-data .spec td{ padding: 8px 14px 8px 0; }

/* jar illustration */
.jars{ display: flex; align-items: flex-end; gap: clamp(3px, .7vw, 6px); padding: 4px 0 2px; }
.jar{
  display: block; flex: 1 1 0; max-width: 34px; height: clamp(46px, 8vw, 64px);
  border: 1.5px solid var(--rule-hi); border-top-width: 3px;
  border-radius: 3px 3px 6px 6px;
  position: relative; overflow: hidden;
}
.jar::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 78%; background: var(--c); opacity: .85; }
.jar-legend{ margin-top: 14px; }
.jar-legend i{ width: 10px; height: 10px; border-radius: 2px; }
.jar-legend b{ color: var(--paper); font-weight: 600; margin-right: 2px; }

/* calculators */
.gd-calc{
  margin: 10px 0 1.6em;
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid var(--rule-hi);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(70,184,214,.05), transparent 60%), var(--ink-2);
}
.gd-calc h3{ margin: 0 0 4px !important; }
.gd-calc .calc-sub{ margin: 0 0 16px; font-size: .9rem; color: var(--faint); }
.calc-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 18px; }
.calc-field label{ display: block; font-size: .84rem; color: var(--mute); margin-bottom: 6px; }
.calc-in{ display: flex; gap: 6px; }
.calc-in input, .calc-in select{
  min-width: 0;
  font: 500 1rem var(--mono);
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--rule-hi);
  border-radius: 4px;
  padding: 9px 10px;
}
.calc-in input{ flex: 1 1 auto; width: 100%; }
.calc-in select{ flex: none; font-size: .88rem; font-family: var(--sans); }
.calc-in input:focus, .calc-in select:focus{ outline: 2px solid rgba(70,184,214,.5); outline-offset: 1px; }
.calc-mode{ display: flex; gap: 6px; margin: 0 0 14px; flex-wrap: wrap; }
.calc-mode button{
  font: 500 .84rem var(--sans); color: var(--mute);
  background: transparent; border: 1px solid var(--rule-hi); border-radius: 999px;
  padding: 6px 14px; cursor: pointer;
}
.calc-mode button[aria-pressed="true"]{ color: var(--paper); border-color: rgba(217,154,31,.6); background: rgba(217,154,31,.1); }
.calc-out{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 18px; }
.calc-out div{ border-top: 1px solid var(--rule); padding-top: 10px; }
.calc-out dt{ font-size: .8rem; color: var(--faint); }
.calc-out dd{ margin: 2px 0 0; font: 500 1.35rem var(--mono); color: var(--paper); font-variant-numeric: tabular-nums; }
.calc-out dd small{ font-size: .78rem; color: var(--mute); font-weight: 400; }
.calc-note{ margin: 14px 0 0 !important; font-size: .86rem; color: var(--faint) !important; }

/* where Stilligent fits */
.gd-fits{
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--ink-2);
}
.gd-fits h2{ margin-top: 0; }
.gd-fits .btn-row{ margin-top: 18px; }

/* sources */
.gd-sources{ margin: 0; padding-left: 1.2em; font-size: .9rem; }
.gd-sources li{ color: var(--faint); }
.gd-sources a{ color: var(--mute); }

/* related guides and the guides index */
.gd-cards{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.gd-card a{
  display: flex; flex-direction: column; height: 100%;
  padding: 22px 22px 20px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--ink-2);
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.gd-card a:hover{ border-color: rgba(217,154,31,.55); transform: translateY(-2px); }
.gd-card .gd-card-k{ font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-link); }
.gd-card h3{ font-size: 1.32rem; line-height: 1.25; color: var(--paper); margin: 10px 0 8px; }
.gd-card p{ margin: 0 0 14px; color: var(--mute); font-size: .95rem; }
.gd-card .gd-card-m{ margin-top: auto; font-size: .82rem; color: var(--mute); font-family: var(--mono); }
.gd-card-head{ display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.gd-card-guide h3{ margin: 2px 0 0 !important; font-size: 1.22rem; }
.gd-ico{
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px;
  border: 1px solid rgba(217,154,31,.3); background: rgba(217,154,31,.07); color: var(--gold-link);
  --ico-fill: rgba(70,184,214,.3); transition: background-color .15s ease, border-color .15s ease;
}
.gd-ico svg{ width: 30px; height: 30px; }
.gd-card a:hover .gd-ico{ background: rgba(217,154,31,.14); border-color: rgba(217,154,31,.55); }
.gd-card-guide p{ margin: 0 !important; }
.gd-card-time{ font: .74rem var(--mono); color: var(--faint); white-space: nowrap; }

@media (max-width: 560px){
  .gd-col .steps li{ padding-left: 46px; }
  .calc-out dd{ font-size: 1.2rem; }
}
.gd-fits h2{ margin: 0 0 14px; }
@media (min-width: 760px){ .gd-cards-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ============================================================
   Recipes
   ============================================================ */
.rc-facts{ display: flex; flex-wrap: wrap; gap: 10px 0; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.rc-facts div{ padding: 12px 22px 0 0; margin-right: 22px; border-right: 1px solid var(--rule); }
.rc-facts div:last-child{ border-right: 0; }
.rc-facts dt{ font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.rc-facts dd{ margin: 4px 0 0; color: var(--paper); font-size: .95rem; }
.rc-draft{ margin-top: 26px; max-width: 72ch; }
.rc-draft ul{ margin: 6px 0 0; padding-left: 1.2em; font-size: .93rem; color: var(--mute); }
.rc-draft-tag{ margin-left: 10px; padding: 1px 7px; border: 1px solid rgba(217,154,31,.6); border-radius: 999px; font-size: .68rem; color: var(--gold-link); }
.rc-unit{ align-self: center; font: 500 .9rem var(--mono); color: var(--mute); padding: 0 4px; }
.rc-reset{ margin-top: 6px; background: none; border: 0; padding: 0; font: .8rem var(--sans); color: var(--gold-link); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.rc .rc-ings{ margin-top: 18px; }
.rc .rc-ings th span{ display: block; font-weight: 400; font-size: .84rem; color: var(--faint); margin-top: 2px; }
.rc .rc-ings td.num{ text-align: right; white-space: nowrap; }
.rc-warn{ margin: 12px 0 0 !important; padding: 10px 14px; border-left: 3px solid var(--hot); background: rgba(207,91,70,.08); color: var(--paper) !important; font-size: .9rem; }
.rc-filter{ margin-bottom: 4px; }
@media (max-width: 560px){
  .rc-facts{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .rc-facts div{ border-right: 0; margin-right: 0; padding-right: 0; }
}

/* ---------- glossary page ---------- */
.gl-hero{ padding-bottom: clamp(22px, 3vw, 34px); }
.gl-tools{
  position: sticky; top: var(--header-h, 71px); z-index: 30;
  padding-block: 10px; border-block: 1px solid var(--rule);
  background: rgba(7,16,25,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.gl-tools .shell{ display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; }
.gl-search{
  flex: 1 1 320px; max-width: 680px; display: flex; align-items: center; gap: 4px;
  padding: 0 7px 0 15px; border: 1px solid var(--rule-hi); border-radius: 999px; background: var(--ink-2);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.gl-search:focus-within{ border-color: rgba(70,184,214,.65); box-shadow: 0 0 0 3px rgba(70,184,214,.14); }
.gl-search svg{ flex: none; color: var(--mute); }
.gl-search input{
  flex: 1 1 auto; min-width: 0; padding: 11px 8px; border: 0; outline: none; background: transparent;
  font: 1rem var(--sans); color: var(--paper); -webkit-appearance: none; appearance: none;
}
.gl-search input::placeholder{ color: var(--faint); }
.gl-search input::-webkit-search-cancel-button{ display: none; }
.gl-clear{
  flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--ink-3); color: var(--paper); font: 1.15rem/1 var(--sans);
}
.gl-clear:hover{ background: #16304a; }
.gl-count{ margin: 0; font: .8rem var(--mono); color: var(--mute); white-space: nowrap; }

.gl-list{ padding-top: clamp(26px, 4vw, 44px); }
.gl-cats{ display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.gl-cats button{
  padding: 6px 13px; border: 1px solid #cfcac0; border-radius: 999px; background: transparent; cursor: pointer;
  font: 500 .84rem var(--sans); color: var(--band-ink);
}
.gl-cats button:hover{ border-color: var(--band-mute); }
.gl-cats button[aria-pressed="true"]{ background: var(--band-ink); border-color: var(--band-ink); color: var(--band); }
.gl-jump{ display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 clamp(26px, 4vw, 40px); }
.gl-jump a{
  display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 7px;
  border: 1px solid #cfcac0; border-radius: 4px; background: #f5f3ef;
  font: 500 .86rem var(--mono); color: var(--band-ink); text-decoration: none;
}
.gl-jump a:hover{ border-color: #a8761a; color: #7d5b0d; }
.gl-jump a.is-off{ opacity: .32; pointer-events: none; }
.gl-list .gl-letter{
  font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--band-ink);
  margin: 34px 0 6px; scroll-margin-top: calc(var(--header-h, 71px) + 80px);
}
.gl-group:first-of-type .gl-letter{ margin-top: 0; }
.gl-term{ margin-right: 8px; }
.gl-cat{
  display: inline-block; padding: 1px 7px; border: 1px solid #d3cec4; border-radius: 999px; vertical-align: 2px;
  font: 500 .64rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--band-mute);
}
.gl-aka{ display: block; margin-bottom: 4px; font-size: .82rem; font-style: italic; color: var(--band-mute); }
.gl-list mark{ background: rgba(217,154,31,.38); color: inherit; border-radius: 2px; padding: 0 1px; }
.gl-empty{ padding: 10px 0 20px; color: var(--band-ink); }
.gl-empty p{ margin: 0 0 8px; }
.gl-reset{ padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: #7d5b0d; text-decoration: underline; text-underline-offset: 3px; }
.gl-list .glossary-grid > div{ scroll-margin-top: calc(var(--header-h, 71px) + 80px); }
@media (max-width: 560px){
  .gl-cats{ flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scrollbar-width: none; }
  .gl-cats button{ flex: none; }
  .gl-jump{ flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scrollbar-width: none; }
  .gl-jump a{ flex: none; }
  .gl-tools .shell{ flex-wrap: nowrap; gap: 10px; }
  .gl-search{ flex: 1 1 0; min-width: 0; }
  .gl-count{ font-size: .72rem; }
  .gl-count .gl-of{ display: none; }
}

.rc-orig{ margin-top: 18px !important; font-size: .92rem; }
.rc-orig a{ color: var(--mute); }
.rc-orig a:hover{ color: var(--gold-link); }

/* ============================================================
   Calculators - shared controls and the recipe calculator
   ============================================================ */
:root{ --ok: #3fae7a; --minus: #ff8a6b; --plus: #5fd39a; }

/* ---------- dials: big number, step buttons, slider with ticks ---------- */
.dial{ min-width: 0; padding: 14px 16px 6px; border: 1px solid var(--rule); border-radius: 8px; background: var(--ink); }
.dial-top{ display: flex; justify-content: space-between; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 6px; }
.dial-top label{ font-size: .88rem; color: var(--mute); }
.dial-main{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.dial-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 40px; padding: 6px 13px; border: 1px solid var(--rule-hi); border-radius: 999px;
  background: var(--ink-3); color: var(--paper); font: 500 .8rem var(--mono); white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
  transition: background-color .15s ease, border-color .15s ease;
}
.dial-btn:hover{ border-color: var(--mute); background: #13293e; }
.dial-btn:active{ background: rgba(217,154,31,.18); border-color: rgba(217,154,31,.6); }
.dial-btn:focus-visible{ outline: 2px solid var(--cool); outline-offset: 2px; }
.dial-btn .dm, .dial-btn .dp{ font: 600 1.1rem/1 var(--sans); }
.dial-btn .dm{ color: var(--minus); }
.dial-btn .dp{ color: var(--plus); }
.dial-val{ min-width: 0; text-align: center; }
.dial-num{
  display: block; width: 100%; margin: 0; padding: 2px 4px;
  border: 1px solid transparent; border-radius: 6px; background: transparent;
  font: 500 clamp(1.9rem, 4.6vw, 2.5rem)/1.1 var(--mono); color: var(--cool); text-align: center;
  font-variant-numeric: tabular-nums; transition: border-color .15s ease, background-color .15s ease;
}
.dial-num:hover{ border-color: var(--rule); }
.dial-num:focus{ outline: none; border-color: rgba(70,184,214,.6); background: var(--ink-2); }
.dial-unit{ margin-top: 2px; font-size: .78rem; color: var(--mute); }
.dial-u{ font: 500 .78rem var(--sans); color: var(--mute); }
.dial-select{
  -webkit-appearance: none; appearance: none; color-scheme: dark;
  padding: 3px 26px 3px 11px; border: 1px solid var(--rule-hi); border-radius: 999px;
  background: var(--ink-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238aaec8' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: var(--paper); font: 500 .78rem var(--sans); cursor: pointer;
}
.dial-select:hover{ border-color: var(--mute); }
.dial-select:focus-visible{ outline: 2px solid var(--cool); outline-offset: 2px; }

.dial-track{ position: relative; margin-top: 8px; padding-top: 20px; }
.dial-range{
  --track: linear-gradient(90deg, #8a5f0f, var(--gold) 55%, var(--gold-h));
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 26px; margin: 0;
  background: transparent; cursor: pointer; touch-action: pan-y;
}
.dial-range:focus{ outline: none; }
.dial-range::-webkit-slider-runnable-track{ height: 8px; border-radius: 999px; background: var(--track); box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
.dial-range::-moz-range-track{ height: 8px; border-radius: 999px; background: var(--track); box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
.dial-range::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -7px; border-radius: 50%;
  background: var(--spirit); border: 3px solid var(--ink);
  box-shadow: 0 0 0 2px var(--cool), 0 0 14px rgba(70,184,214,.75);
  transition: transform .1s ease;
}
.dial-range::-moz-range-thumb{
  box-sizing: border-box; width: 22px; height: 22px; border-radius: 50%;
  background: var(--spirit); border: 3px solid var(--ink);
  box-shadow: 0 0 0 2px var(--cool), 0 0 14px rgba(70,184,214,.75);
}
.dial-range:active::-webkit-slider-thumb{ transform: scale(1.12); }
.dial-mark{
  position: absolute; top: 18px; width: 2px; height: 30px; margin-left: -1px; border-radius: 1px;
  background: var(--spirit); opacity: .75; pointer-events: none;
}
.dial-mark-label{
  position: absolute; top: 0; transform: translateX(-50%);
  padding: 0 5px; border: 0; background: none; cursor: pointer; white-space: nowrap;
  font: 500 .7rem var(--mono); letter-spacing: .02em; color: var(--gold-link);
}
.dial-mark-label:hover{ color: var(--gold-h); text-decoration: underline; text-underline-offset: 2px; }
.dial-ticks{ position: relative; height: 22px; margin-top: 2px; }
.dial-ticks button{
  position: absolute; top: 0; transform: translateX(-50%);
  padding: 3px 4px 2px; border: 0; background: none; cursor: pointer;
  font: .7rem var(--mono); color: var(--faint); white-space: nowrap;
}
.dial-ticks button::before{ content: ""; position: absolute; left: 50%; top: -3px; width: 1px; height: 4px; background: var(--rule-hi); }
.dial-ticks button:hover{ color: var(--paper); }

.calc-hover-tip{
  position: fixed; z-index: 80; transform: translateX(-50%); pointer-events: none;
  padding: 3px 8px; border: 1px solid var(--rule-hi); border-radius: 4px; background: var(--ink-3);
  font: 500 .76rem var(--mono); color: var(--paper); white-space: nowrap;
}

/* ---------- info tips and toast ---------- */
.tip{
  display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 6px; padding: 0;
  border: 1px solid var(--rule-hi); border-radius: 50%; background: var(--ink-3); vertical-align: 1px;
  font: italic 600 .68rem/1 var(--serif); color: var(--mute); cursor: help;
}
.tip:hover, .tip:focus-visible{ color: var(--paper); border-color: var(--cool); outline: none; }
.calc-tip-bubble{
  position: fixed; z-index: 90; max-width: min(300px, calc(100vw - 16px));
  padding: 10px 13px; border: 1px solid var(--rule-hi); border-radius: 6px; background: #10263a;
  box-shadow: 0 12px 30px rgba(0,0,0,.45); font-size: .85rem; line-height: 1.5; color: var(--paper);
  text-transform: none; letter-spacing: 0; font-family: var(--sans); font-weight: 400;
}
.calc-toast{
  position: fixed; left: 50%; bottom: 24px; z-index: 95; transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  padding: 10px 18px; border: 1px solid rgba(217,154,31,.55); border-radius: 999px; background: var(--ink-3);
  box-shadow: 0 10px 30px rgba(0,0,0,.5); font-size: .88rem; color: var(--paper);
  transition: opacity .25s ease, transform .25s ease;
}
.calc-toast.is-on{ opacity: 1; transform: translate(-50%, 0); }

/* ---------- small steppers ---------- */
.stepper{
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--rule-hi); border-radius: 999px; overflow: hidden;
  background: var(--ink);
}
.stepper button{
  flex: none; width: 40px; border: 0; background: var(--ink-3);
  font: 600 1.1rem var(--sans); cursor: pointer; transition: background-color .15s ease;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.stepper .st-minus{ color: var(--minus); }
.stepper .st-plus{ color: var(--plus); }
.stepper button:hover{ background: #16304a; }
.stepper button:active{ background: rgba(217,154,31,.25); }
.stepper input{
  width: 76px; min-width: 0; border: 0 !important; border-radius: 0 !important; background: transparent !important;
  text-align: center; font: 500 1.05rem var(--mono); color: var(--cool); padding: 9px 4px !important;
}
.stepper input:focus{ outline: 2px solid rgba(70,184,214,.5); outline-offset: -2px; }
.calc-in .stepper{ flex: 1 1 auto; }
.calc-in .stepper input{ flex: 1 1 auto; width: 60px; }

/* ---------- guide calculators laid out with dials ---------- */
.calc-dials{ display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; }
.calc-dials .dial-num{ font-size: clamp(1.7rem, 4vw, 2.1rem); }
.calc-dials > .dial:last-child:nth-child(odd){ grid-column: 1 / -1; }
.gd-calc .calc-out{ grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.gd-calc .calc-out{ margin-top: 14px; padding: 4px 16px 14px; border: 1px solid var(--rule); border-radius: 8px; background: var(--ink); }
.gd-calc .calc-out div{ border-top: 0; padding-top: 10px; }
.gd-calc .calc-out dd{ color: var(--paper); }
.gd-calc .calc-out .is-key dd{ color: var(--gold-link); }
.gd-calc .calc-msg{ margin-top: 12px !important; }
.spec th span{ display: block; font-weight: 400; font-size: .82rem; color: var(--faint); margin-top: 2px; }

/* ---------- recipe calculator ---------- */
#ingredients .gd-col{ max-width: none; }
#ingredients .gd-col > h2, #ingredients .gd-col > p{ max-width: 72ch; }
#ingredients .gd-photo{ max-width: 760px; }

.rc2-head{ display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 20px; flex-wrap: wrap; }
.rc2-head .calc-sub{ margin-bottom: 0 !important; }
.rc2-actions{ display: flex; gap: 8px; }
.rc2-btn{
  font: 500 .84rem var(--sans); color: var(--paper); background: transparent;
  border: 1px solid var(--rule-hi); border-radius: 999px; padding: 7px 16px; cursor: pointer;
}
.rc2-btn:hover{ border-color: var(--mute); }

/* the Metric / US switch at the top of every recipe calculator */
.rc2-units{ display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 16px; padding: 10px 14px;
  border: 1px solid rgba(217,154,31,.3); border-radius: 10px; background: rgba(217,154,31,.05); }
.rc2-units-lab{ font: 500 .74rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-link); }
.rc2-seg{ display: inline-flex; padding: 3px; border: 1px solid var(--rule-hi); border-radius: 999px; background: var(--ink); }
.rc2-seg button{ display: inline-flex; align-items: baseline; gap: 7px; padding: 6px 15px; border: 0; border-radius: 999px;
  background: transparent; color: var(--mute); font: 600 .92rem var(--sans); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.rc2-seg button small{ font: 400 .74rem var(--sans); color: var(--faint); }
.rc2-seg button[aria-pressed="true"]{ background: rgba(217,154,31,.22); color: var(--paper); box-shadow: inset 0 0 0 1px rgba(217,154,31,.55); }
.rc2-seg button[aria-pressed="true"] small{ color: var(--mute); }
.rc2-seg button:focus-visible{ outline: 2px solid rgba(70,184,214,.6); outline-offset: 1px; }
.rc2-units-note{ font-size: .82rem; color: var(--faint); }
@media (max-width: 480px){ .rc2-seg button small{ display: none; } .rc2-units-note{ flex-basis: 100%; } }
.rc2-stage{ margin-top: 16px; padding: clamp(14px, 2.4vw, 22px); border: 1px solid var(--rule); border-radius: 8px; background: var(--ink); }
.rc2-stage > h4{
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font: 500 .76rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-link);
}
.rc2-stage > h4 span{
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(217,154,31,.5); font-size: .7rem; letter-spacing: 0; color: var(--gold-h);
}
.rc2-split{ display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 20px 28px; align-items: start; }
.rc2-controls{ display: grid; gap: 16px; min-width: 0; }
.rc2-side{ min-width: 0; }
.rc2-stage .dial{ padding: 0; border: 0; background: none; }
.rc2-controls > * + *{ padding-top: 16px; border-top: 1px solid var(--rule); }
.rc2-controls > .rc2-msg{ padding-top: 9px; border-top: 0; margin-top: -6px !important; }
.rc2 h5{ margin: 0 0 8px; font: 500 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.rc2 h5 span{ text-transform: none; letter-spacing: 0; color: var(--mute); }

.rc2-field{ min-width: 0; }
.rc2-lab{ display: flex; justify-content: space-between; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 6px; }
.rc2-lab label, .rc2-lab-t{ font-size: .88rem; color: var(--mute); }
.rc2-aside{ font: 500 .78rem var(--mono); color: var(--gold-link); }
.rc2-select, .rc2-date input[type="date"]{
  width: 100%; min-height: 42px; padding: 9px 12px; color-scheme: dark;
  font: 500 .95rem var(--sans); color: var(--paper); background: var(--ink-2);
  border: 1px solid var(--rule-hi); border-radius: 6px;
}
.rc2-select:focus-visible, .rc2-date input:focus-visible{ outline: 2px solid var(--cool); outline-offset: 1px; }
.rc2-date{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.rc2-date input[type="date"]{ text-align: center; font-family: var(--mono); }
.rc2-pair{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.rc2-pair .stepper input{ width: 56px; }
.rc2-link{ background: none; border: 0; padding: 0; font: .8rem var(--sans); color: var(--gold-link);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.rc2-mainbox{ display: grid; gap: 4px; }
.rc2-readout{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; margin-top: 2px; }
.rc2-chip{
  display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 12px; border: 1px solid var(--rule-hi); border-radius: 999px;
  font: 500 .7rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint);
}
.rc2-chip b{ font: 500 1rem var(--mono); letter-spacing: 0; color: var(--paper); }
.rc2-chip.is-good{ border-color: rgba(63,174,122,.55); } .rc2-chip.is-good b{ color: var(--plus); }
.rc2-chip.is-high{ border-color: rgba(217,154,31,.6); } .rc2-chip.is-high b{ color: var(--gold-h); }
.rc2-chip.is-low b{ color: var(--mute); }
.rc2-chip.is-over{ border-color: rgba(207,91,70,.7); } .rc2-chip.is-over b{ color: var(--minus); }
.rc2-toggle{ display: inline-flex; align-items: center; }
.rc2-toggle label{
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rule-hi); background: var(--ink-3); font-size: .8rem; color: var(--paper);
}
.rc2-toggle input{ width: 15px; height: 15px; margin: 0; accent-color: var(--gold); }
.rc2-toggle label:has(input:checked){ border-color: rgba(217,154,31,.6); background: rgba(217,154,31,.14); }

.rc2-ings{ padding: 14px 16px 6px; border: 1px solid var(--rule); border-radius: 8px; background: var(--ink-2); }
.rc2-table{ width: 100%; border-collapse: collapse; font-size: .95rem; }
.rc2-table th, .rc2-table td{ padding: 9px 0; border-top: 1px solid var(--rule); vertical-align: top; text-align: left; }
.rc2-table tr:first-child th, .rc2-table tr:first-child td{ border-top: 0; }
.rc2-table th{ font-weight: 500; color: var(--paper); padding-right: 14px; }
.rc2-table th span{ display: block; font-weight: 400; font-size: .84rem; color: var(--faint); margin-top: 2px; }
.rc2-table td.num{ text-align: right; white-space: nowrap; font: 500 .98rem var(--mono); color: var(--paper); }
.rc2-table tr.is-main td.num{ color: var(--cool); }

.rc2-tiles{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rc2-tile, .rc2-cut{
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  padding: 13px 15px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--ink-2);
}
.rc2-tile.is-big{ grid-column: 1 / -1; }
.t-k{ font: 500 .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.t-v{ font: 500 1.45rem/1.15 var(--mono); color: var(--paper); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.t-v small{ font-size: .8rem; color: var(--mute); margin-left: 2px; }
.t-v.is-good{ color: var(--plus); } .t-v.is-high{ color: var(--gold-h); } .t-v.is-low{ color: var(--mute); }
.t-s{ font-size: .8rem; line-height: 1.4; color: var(--mute); }
.rc2-tile.is-key{ border-color: rgba(217,154,31,.45); background: linear-gradient(180deg, rgba(217,154,31,.08), transparent 70%), var(--ink-2); }
.rc2-tile.is-key .t-v{ color: var(--gold-h); }
.rc2-tile.is-big .t-v{ font-size: 1.9rem; }

.rc2-cuts-h{ margin-top: 22px !important; }
.rc2-cuts{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rc2-cut{ border-top: 3px solid var(--c); }
.rc2-cut .t-k{ display: flex; align-items: center; color: var(--c); }
.rc2-cut .t-v{ font-size: 1.3rem; }
.c-fore{ --c: #e2705a; } .c-heads{ --c: var(--gold-h); } .c-hearts{ --c: #5fd39a; } .c-tails{ --c: var(--cool); }
.rc2-cutnote{ margin: 12px 0 0 !important; font-size: .84rem; color: var(--mute) !important; }

.rc2-note{ margin: 4px 0 0 !important; padding: 9px 12px; border-left: 3px solid var(--cool); border-radius: 0 4px 4px 0;
  background: rgba(70,184,214,.08); color: var(--paper) !important; font-size: .86rem; line-height: 1.5; }
.rc2-table th span.rc2-inv{ color: var(--cool); }
.gd-xlink p{ max-width: 62ch; }
.pill-link{
  display: inline-flex; align-items: center; gap: 9px; margin-top: 22px; padding: 7px 15px 7px 11px;
  border: 1px solid rgba(217,154,31,.35); border-radius: 999px; background: rgba(217,154,31,.06);
  font-size: .88rem; color: var(--mute); text-decoration: none; transition: border-color .15s ease, background-color .15s ease;
  --ico-fill: rgba(70,184,214,.3);
}
.pill-link svg{ width: 20px; height: 20px; color: var(--gold-link); flex: none; }
.pill-link b{ font-weight: 500; color: var(--gold-link); }
@media (max-width: 480px){ .pill-lead{ display: none; } }
/* Guides page: the recipe pill stays in view under the header as the reader scrolls */
.pill-dock{ position: sticky; top: calc(var(--header-h, 71px) + 10px); z-index: 30; pointer-events: none; margin: -30px 0 26px; }
.pill-dock .pill-link{ pointer-events: auto; margin: 0; background: rgba(9,20,31,.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.gd-sec.gd-sec-after-dock{ padding-top: 0; }
.pill-dock .pill-link:hover{ background: rgba(40,31,14,.96); }
.pill-end{ margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--rule); }
.pill-end p{ margin: 0 0 14px; color: var(--mute); }
.pill-end .pill-link{ margin: 0; }
.pill-link:hover{ border-color: rgba(217,154,31,.65); background: rgba(217,154,31,.12); color: var(--paper); }
.acid-list{ list-style: none; margin: 18px 0 22px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.acid-list li{ padding: 16px 18px; border: 1px solid var(--rule); border-radius: 8px; background: var(--ink-2); }
.acid-list h3{ margin: 0 0 6px !important; font-size: 1.15rem !important; }
.acid-list p{ margin: 0 0 6px !important; font-size: .94rem; }
.acid-list p:last-child{ margin: 0 !important; }
.acid-list .acid-dose{ font: .8rem/1.5 var(--mono); color: var(--mute); }
.rc2-msg{ margin: 0 !important; padding: 9px 12px; border-left: 3px solid var(--hot); border-radius: 0 4px 4px 0;
  background: rgba(207,91,70,.09); color: var(--paper) !important; font-size: .86rem; line-height: 1.5; }

.rc2-time{ list-style: none; margin: 0; padding: 4px 0 0 18px; border-left: 2px solid var(--rule-hi); }
.rc2-time li{ position: relative; padding: 4px 0 14px; color: var(--mute); font-size: .92rem; }
.rc2-time li::before{ content: ""; position: absolute; left: -24px; top: 9px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 3px var(--ink); }
.rc2-time b{ display: block; color: var(--paper); font: 500 .95rem var(--mono); }

@media (max-width: 880px){
  .rc2-split{ grid-template-columns: 1fr; }
  .rc2-cuts{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .rc2.gd-calc{ padding: 14px 12px; margin-inline: -6px; }
  .rc2-stage{ padding: 14px 12px; }
  .rc2-head .rc2-actions{ width: 100%; }
  .dial{ padding: 12px 12px 4px; }
  .dial-main{ gap: 6px; }
  .dial-btn{ padding: 6px 10px; font-size: .74rem; gap: 3px; }
  .rc2-tile, .rc2-cut{ padding: 11px 12px 10px; }
  .t-v{ font-size: 1.25rem; }
  .rc2-tile.is-big .t-v{ font-size: 1.6rem; }
  .rc2-cut .t-v{ font-size: 1.12rem; }
  .rc2-pair{ grid-template-columns: 1fr; }
}
@media (max-width: 360px){ .dial-steplabel{ display: none; } .dial-btn{ width: 42px; padding: 0; } }

@media print{
  .site-header, .site-footer, .page-toc, #more, .rc2-actions, .rc2-units, .stepper button, .dial-btn, .dial-track, .rc2-date .dial-btn,
  .rc2-link, .skip, .term-pop, .ss-panel, .gd-fits .btn-row, .tip, .calc-toast, .rc2-toggle{ display: none !important; }
  *{ color: #000 !important; background: transparent !important; box-shadow: none !important; }
  .rc2-stage, .rc2-tile, .rc2-cut, .rc2-ings, .gd-calc, .stepper, .dial{ border-color: #999 !important; }
  .rc2-stage{ break-inside: avoid; }
  .dial-select, .rc2-select{ border: 0 !important; -webkit-appearance: none; appearance: none; padding: 0 !important; }
  .gd-sec{ padding-block: 12px; border: 0; }
  a{ text-decoration: none; }
}

/* ============================================================
   Recipe ratings (js/ratings.js)
   ============================================================ */
.rt-mini{ position: relative; display: inline-block; width: 5.4em; height: 1em; vertical-align: -.12em; }
.rt-mini-bg, .rt-mini-fg{ position: absolute; inset: 0 auto 0 0; display: flex; gap: .1em; white-space: nowrap; overflow: hidden; }
.rt-mini-bg{ width: 100%; color: rgba(217,154,31,.25); }
.rt-mini-fg{ color: var(--gold); }
.rt-mini svg{ width: 1em; height: 1em; flex: none; fill: currentColor; }
.rt-summary{ display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; font-size: .92rem; color: var(--mute); text-decoration: none; }
.rt-summary[hidden]{ display: none; }
.rt-summary .rt-mini{ font-size: 1.05rem; }
.rt-summary b{ color: var(--paper); font-weight: 600; }
.rt-summary:hover span:last-child{ color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.rt-box{ max-width: 560px; padding: clamp(16px, 2.6vw, 24px); border: 1px solid rgba(217,154,31,.3); border-radius: 10px; background: rgba(217,154,31,.04); }
.rt-ask{ margin: 0 0 12px; color: var(--paper); }
.rt-stars{ display: flex; gap: 4px; }
.rt-stars.is-busy{ opacity: .6; pointer-events: none; }
.rt-star{ display: inline-flex; padding: 4px; border: 0; background: none; cursor: pointer; color: rgba(217,154,31,.3); border-radius: 6px;
  transition: color .12s ease, transform .12s ease; }
.rt-star svg{ width: 34px; height: 34px; fill: currentColor; }
.rt-star.is-on{ color: var(--gold); }
.rt-star:hover{ transform: scale(1.08); }
.rt-star:focus-visible{ outline: 2px solid rgba(70,184,214,.6); outline-offset: 1px; }
.rt-star:disabled{ cursor: default; transform: none; }
.rt-status{ min-height: 1.5em; margin: 10px 0 0; font-size: .92rem; color: var(--mute); }
.rt-status b{ color: var(--paper); font-weight: 600; }
.rt-dist{ display: grid; gap: 5px; margin-top: 14px; max-width: 340px; }
.rt-row{ display: grid; grid-template-columns: 2.4em 1fr 2.4em; align-items: center; gap: 10px; font: .78rem var(--mono); color: var(--faint); }
.rt-row span:last-child{ text-align: right; }
.rt-bar{ height: 6px; border-radius: 3px; background: rgba(217,154,31,.12); overflow: hidden; }
.rt-bar span{ display: block; height: 100%; border-radius: 3px; background: var(--gold); }
.rt-note{ margin: 14px 0 0; font-size: .8rem; color: var(--faint); }
.rt-card{ display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--mute); }
.rt-card small{ color: var(--faint); }
@media print{ #rate, .rt-summary{ display: none !important; } }

/* ============================================================
   Admin page (js/admin.js)
   ============================================================ */
.adm-hero .display{ margin-bottom: 24px; }
.adm-login{ max-width: 420px; padding: 22px; border: 1px solid var(--rule); border-radius: 10px; background: var(--ink-2); }
.adm-login label{ display: block; margin-bottom: 8px; color: var(--mute); font-size: .9rem; }
.adm-login-row{ display: flex; gap: 10px; }
.adm-login input{ flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--rule-hi); border-radius: 6px; background: var(--ink); color: var(--paper); font: inherit; }
.adm-msg{ margin: 12px 0 0; color: var(--mute); }
.adm-bar{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 22px; }
.adm-actions{ display: flex; gap: 8px; }
.adm-periods{ margin-bottom: 18px; }
.adm-tiles{ display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 28px; }
.adm-tile{ display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 8px; background: var(--ink-2); }
.adm-tile .t-k{ font: 500 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.adm-tile .t-v{ font: 500 1.9rem var(--mono); color: var(--paper); }
.adm-tile .t-s{ font-size: .82rem; color: var(--faint); }
.adm-tile.k-person{ border-color: rgba(217,154,31,.45); }
.adm-tile.k-person .t-v{ color: var(--gold); }
.adm-h{ margin: 6px 0 14px; font-size: 1.25rem; }
.adm-scroll{ overflow-x: auto; margin-bottom: 30px; border: 1px solid var(--rule); border-radius: 8px; }
.adm-table{ width: 100%; border-collapse: collapse; font-size: .9rem; }
.adm-table th, .adm-table td{ padding: 9px 12px; border-bottom: 1px solid var(--rule); text-align: left; white-space: nowrap; }
.adm-table tbody tr:last-child > *{ border-bottom: 0; }
.adm-table thead th{ background: var(--ink-2); }
.adm-table thead button{ padding: 0; border: 0; background: none; color: var(--mute); font: 500 .74rem var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.adm-table thead button.is-sorted{ color: var(--gold-link); }
.adm-table thead button.is-sorted::after{ content: " ↓"; }
.adm-table .num{ text-align: right; font-family: var(--mono); }
.adm-table td.is-zero{ color: var(--faint); opacity: .55; }
.adm-table tbody th{ font-weight: 400; }
.adm-table tbody th a{ color: var(--paper); text-decoration: none; }
.adm-table tbody th a:hover{ text-decoration: underline; }
.adm-table tbody th span{ display: block; font: .74rem var(--mono); color: var(--faint); }
.adm-total{ color: var(--paper); }
.adm-agents{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 26px; }
.adm-agents > div{ padding: 14px 16px; border: 1px solid var(--rule); border-radius: 8px; background: var(--ink-2); }
.adm-agents h3{ margin: 0 0 10px; font-size: .95rem; }
.adm-agents ul{ list-style: none; margin: 0; padding: 0; }
.adm-agents li{ display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: .88rem; color: var(--mute); border-bottom: 1px dashed var(--rule); }
.adm-agents li:last-child{ border-bottom: 0; }
.adm-agents b{ font: 500 .88rem var(--mono); color: var(--paper); }
.adm-none{ color: var(--faint); font-size: .9rem; }
.adm-note{ font-size: .82rem; color: var(--faint); max-width: 80ch; }
.adm-table tbody th, .adm-table thead th:first-child{ position: sticky; left: 0; z-index: 1; white-space: normal; min-width: 150px; }
.adm-table tbody th{ background: var(--ink); }
@media (max-width: 560px){ .adm-table tbody th, .adm-table thead th:first-child{ max-width: 44vw; box-shadow: 1px 0 0 var(--rule); } }

/* admin statistics, second version: cards, charts and bar lists */
.adm-tiles{ grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.adm-chg{ font-size: .8rem; color: var(--mute); margin-top: 2px; }
[data-panel="stats"].is-loading{ opacity: .55; transition: opacity .15s ease; }
.adm-card{ margin-bottom: 18px; padding: clamp(16px, 2.4vw, 22px); border: 1px solid var(--rule); border-radius: 10px; background: var(--ink-2); }
.adm-card .adm-h{ margin: 0 0 4px; font-size: 1.15rem; }
.adm-cap{ margin: 0 0 14px; font-size: .86rem; color: var(--faint); }
.adm-grid2{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.adm-grid2 > .adm-card, .adm-stack > .adm-card{ margin-bottom: 0; }
.adm-stack{ display: grid; gap: 18px; }
.adm-grid2 + *{ margin-top: 18px; }
@media (max-width: 860px){ .adm-grid2{ grid-template-columns: minmax(0, 1fr); } }
.adm-chart{ position: relative; margin-top: 10px; }
.adm-chart svg{ display: block; max-width: 100%; height: auto; touch-action: pan-y; }
.adm-grid{ stroke: var(--rule); stroke-width: 1; }
.adm-axis{ fill: var(--faint); font: 10.5px var(--mono); }
.adm-hit{ fill: transparent; cursor: crosshair; }
.adm-cross{ stroke: var(--mute); stroke-width: 1; stroke-dasharray: 3 3; }
.adm-dot{ stroke: var(--ink-2); stroke-width: 2; }
.adm-tip{ position: absolute; top: 0; z-index: 2; display: grid; gap: 3px; min-width: 130px; padding: 8px 11px; border: 1px solid var(--rule-hi);
  border-radius: 7px; background: rgba(7,16,25,.96); font-size: .82rem; color: var(--mute); pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.adm-tip[hidden]{ display: none; }
.adm-tip b{ color: var(--paper); font-weight: 600; }
.adm-tip strong{ color: var(--paper); font-weight: 600; font-family: var(--mono); }
.adm-tip i, .adm-legend i{ display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.adm-legend{ display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 6px 0 0; font-size: .86rem; color: var(--mute); }
.adm-legend b{ color: var(--paper); font: 500 .86rem var(--mono); margin-left: 4px; }
.adm-bars{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.adm-bar-row{ display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .92rem; }
.adm-bar-l{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--paper); }
.adm-bar-l a{ color: var(--paper); text-decoration: none; }
.adm-bar-l a:hover{ text-decoration: underline; }
.adm-bar-v{ flex: none; font: 500 .9rem var(--mono); color: var(--paper); }
.adm-bar-track{ display: block; height: 6px; margin-top: 5px; border-radius: 3px; background: rgba(201,133,0,.12); overflow: hidden; }
.adm-bar-track span{ display: block; height: 100%; border-radius: 3px; background: #c98500; }
.adm-bar-s{ display: block; margin-top: 3px; font-size: .78rem; color: var(--faint); }
.adm-more{ margin: 14px 0 0; font-size: .84rem; color: var(--faint); }
.adm-card .adm-agents{ margin: 18px 0 0; }
.adm-card .adm-agents > div{ background: var(--ink); }
.adm-all > summary{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; cursor: pointer; list-style: none; }
.adm-all > summary::-webkit-details-marker{ display: none; }
.adm-all > summary .adm-h{ margin: 0; }
.adm-all > summary .adm-h::before{ content: "▸ "; color: var(--gold-link); }
.adm-all[open] > summary .adm-h::before{ content: "▾ "; }
.adm-all > summary span{ font-size: .84rem; color: var(--faint); }
.adm-all .adm-scroll{ margin: 16px 0 0; }
.adm-all .adm-table tbody th{ background: var(--ink-2); }
@media (max-width: 560px){
  .adm-tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .adm-tile{ padding: 12px 13px; }
  .adm-tile .t-v{ font-size: 1.5rem; }
  .adm-tile .t-s, .adm-chg{ font-size: .76rem; }
}

/* ---------- "From the forum" on recipe and guide pages (js/forum.js) ---------- */
.fp{ max-width: 680px; }
.fp-invite{ margin: 0 0 16px; color: var(--mute); }
.gd-col .fp-head{ margin: 0 0 12px; font: 500 .74rem var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.gd-col ol.fp-list{ list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.gd-col .fp-post{ margin: 0; color: var(--paper); }
.fp-post a{
  display: block; padding: 14px 16px 15px; border: 1px solid var(--rule); border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0; background: rgba(255,255,255,.015); color: var(--paper); text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.fp-post a:hover{ background: rgba(217,154,31,.05); border-color: var(--rule-hi); border-left-color: var(--gold-h); }
.gd-col .fp-meta{ display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 8px; font-size: .84rem; color: var(--faint); }
.fp-meta b{ color: var(--paper); font-weight: 600; }
.fp-av{
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(217,154,31,.14); border: 1px solid rgba(217,154,31,.4); color: var(--gold-h); font: 600 .78rem var(--sans);
}
.gd-col .fp-text{ margin: 0; line-height: 1.6; font-size: .95rem; color: var(--paper); overflow-wrap: anywhere; }
.gd-col .fp-actions{ margin: 0; }
.fp [hidden], .gd-sec#forum[hidden], .page-toc li[hidden]{ display: none; }

/* ---------- main menu: the Guides drop-down (Guides · Recipes · Calculators) ---------- */
.nav-drop{ position: relative; }
.nav-drop-btn{
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: .95rem; color: var(--mute);
  background: none; border: 0; border-bottom: 1px solid transparent; border-radius: 0;
  padding: 6px 0; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.nav-drop-btn:hover, .nav-drop.is-open .nav-drop-btn{ color: var(--paper); border-bottom-color: var(--rule-hi); }
.nav-drop.is-current .nav-drop-btn{ color: var(--paper); border-bottom-color: var(--gold); }
.nav-drop-btn:focus-visible{ outline: 2px solid var(--cool); outline-offset: 3px; }
.nav-chev{ transition: transform .2s ease; opacity: .8; }
.nav-drop.is-open .nav-chev{ transform: rotate(180deg); }
.nav-drop-menu{
  position: absolute; top: calc(100% + 12px); left: 50%; z-index: 60;
  display: grid; gap: 2px; width: 318px; padding: 8px;
  background: var(--ink-2); border: 1px solid var(--rule-hi); border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transform: translate(-50%, -4px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.nav-drop-menu::before{ content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }   /* keeps hover alive across the gap */
.nav-drop.is-open .nav-drop-menu{ opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .15s ease, transform .15s ease, visibility 0s; }
@media (hover: hover) and (min-width: 881px){
  .nav-drop:hover .nav-drop-menu{ opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .15s ease, transform .15s ease, visibility 0s; }
  .nav-drop:hover .nav-chev{ transform: rotate(180deg); }
  .nav-drop:hover .nav-drop-btn{ color: var(--paper); }
}
.nav .nav-drop-menu a{
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 8px;
  color: var(--paper); text-decoration: none;
}
.nav .nav-drop-menu a:hover, .nav .nav-drop-menu a:focus-visible{ background: var(--ink-3); border: 0; }
.nav .nav-drop-menu a[aria-current]{ background: rgba(217,154,31,.1); }
.nd-ico{
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px;
  border: 1px solid rgba(217,154,31,.3); background: rgba(217,154,31,.07); color: var(--gold-link); --ico-fill: rgba(70,184,214,.3);
}
.nd-t{ display: grid; line-height: 1.3; }
.nd-t b{ font-weight: 500; font-size: .95rem; }
.nd-t small{ font-size: .8rem; color: var(--faint); }
.nav .nav-drop-menu a[aria-current] .nd-t b{ color: var(--gold-link); }
@media (min-width: 881px){ .site-header.is-compact .nav-drop-btn{ padding-block: 4px; } }
body.demo-active .site-header .nav-drop-btn{ padding-block: 4px; }

@media (max-width: 880px){
  .nav.is-open{ max-height: 760px; }
  .nav-drop{ border-bottom: 1px solid var(--rule); }
  .nav-drop-btn{ width: 100%; justify-content: space-between; padding: 15px var(--gut); border: 0; font-size: .95rem; text-align: left; }
  .nav-drop-btn:hover, .nav-drop.is-open .nav-drop-btn, .nav-drop.is-current .nav-drop-btn{ border: 0; }
  .nav-drop.is-current .nav-drop-btn{ color: var(--gold-link); }
  .nav-drop-menu, .nav-drop.is-open .nav-drop-menu{
    position: static; width: auto; transform: none; opacity: 1; visibility: visible;
    padding: 0 calc(var(--gut) - 12px) 10px; border: 0; border-radius: 0; box-shadow: none; background: none;
    display: none; transition: none;
  }
  .nav-drop.is-open .nav-drop-menu{ display: grid; }
  .nav-drop-menu::before{ display: none; }
  .nav .nav-drop-menu a{ padding: 9px 12px; border-bottom: 0; }
  .nav .nav-drop-menu a:last-child{ border-bottom: 0; }
}

/* ---------- the Calculators page (/calculators) ---------- */
.cx-hero .rc2-units{ max-width: 760px; }
.cx-cards{ list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.cx-card a{
  display: flex; align-items: center; gap: 12px; height: 100%; padding: 11px 14px;
  border: 1px solid var(--rule); border-radius: 10px; background: var(--ink-2); text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.cx-card a:hover{ border-color: rgba(217,154,31,.55); transform: translateY(-1px); }
.cx-card .gd-ico{ width: 40px; height: 40px; border-radius: 9px; }
.cx-card .gd-ico svg{ width: 26px; height: 26px; }
.cx-card b{ display: block; font-weight: 500; color: var(--paper); font-size: .98rem; line-height: 1.3; }
.cx-card small{ display: block; color: var(--faint); font-size: .82rem; line-height: 1.35; margin-top: 2px; }
.cx-card a:hover .gd-ico{ background: rgba(217,154,31,.14); border-color: rgba(217,154,31,.55); }

.cx-sec .shell > *{ max-width: 1040px; }
.cx-h{ display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.cx-h h2{ margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; color: var(--paper); }
.cx-intro{ max-width: 70ch; margin: 0 0 18px; color: var(--mute); }
.cx-more{ margin: 4px 0 0; font-size: .9rem; color: var(--faint); }
.cx-sec .gd-calc{ margin-bottom: 14px; }
.cx .rc2-split{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cx .rc2-side{ display: grid; gap: 12px; align-content: start; position: sticky; top: calc(var(--header-h, 71px) + 70px); }
.cx .rc2-tiles > [hidden], .cx [data-show][hidden]{ display: none; }
.cx .rc2-controls > [hidden] + *{ padding-top: 0; border-top: 0; }
.cx .rc2-controls > .rc2-toggle{ padding-top: 14px; }
.cx-modes{ margin: 14px 0 0; }
.cx-modes button{ font-size: .9rem; padding: 8px 16px; }
.cx-msg{ margin: 0 !important; }
.cx-link{ margin: 0; font-size: .88rem; }
.cx-link a{ color: var(--gold-link); }
.cx-f .rc2-seg{ margin-top: 2px; }
.cx-f .rc2-seg button{ font-size: .86rem; padding: 6px 13px; }
.cx .rc2-tile.is-big .t-v{ font-size: 1.75rem; }
.cx .t-v.is-over{ color: var(--minus); }
.cx .rc2-tile:has(.t-v.is-over){ border-color: rgba(207,91,70,.55); }

.cx-chart{ margin: 0; padding: 12px 12px 8px; border: 1px solid var(--rule); border-radius: 8px; background: var(--ink-2); }
.cx-plot svg{ display: block; width: 100%; height: auto; }
.cx-plot .ax{ font: 400 11px var(--mono); fill: var(--faint); }
.cx-plot .ax-title{ font: 400 11px var(--sans); fill: var(--mute); }
.cx-plot .grid{ stroke: var(--rule); stroke-width: 1; }
.cx-plot .line{ fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.cx-plot .hdot{ stroke: var(--ink-2); stroke-width: 2; }
.cx-plot .cx-tie{ stroke: var(--paper); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: .7; }
.cx-chart figcaption{ display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: .8rem; color: var(--mute); }
.cx-chart figcaption span{ display: inline-flex; align-items: center; gap: 6px; }
.cx-chart figcaption i{ width: 14px; height: 3px; border-radius: 2px; }
.cx-chart .c-liq{ background: #2fa0c4; } .cx-chart .c-vap{ background: #c4861a; }
.cx-chart-p{ margin-left: auto; color: var(--faint); }

@media (max-width: 880px){
  .cx .rc2-split{ grid-template-columns: 1fr; }
  .cx .rc2-side{ position: static; }
}
@media (max-width: 560px){
  .cx-cards{ grid-template-columns: 1fr; gap: 8px; }
  .cx-card a{ padding: 9px 12px; }
  .cx-card small{ display: none; }
  .cx .rc2-tile.is-big .t-v{ font-size: 1.5rem; }
  .cx-modes button{ padding: 7px 12px; font-size: .85rem; }
}
@media print{ .cx-cards, .cx-units, .cx-modes, .cx-link{ display: none !important; } }
/* phones: the key result, at the foot of the screen while the controls are in view (js/calculators.js) */
.cx-peek{
  position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 40;
  display: flex; align-items: baseline; gap: 10px; padding: 10px 14px;
  border: 1px solid rgba(217,154,31,.55); border-radius: 12px; cursor: pointer; text-align: left;
  background: rgba(14,26,38,.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 10px 28px rgba(0,0,0,.5); color: var(--paper);
}
.cx-peek[hidden]{ display: none; }
.cx-peek-k{ font: 500 .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); flex: 1 1 auto; min-width: 0; }
.cx-peek-v{ font: 500 1.2rem/1.1 var(--mono); color: var(--gold-h); white-space: nowrap; }
.cx-peek-v small{ font-size: .75rem; color: var(--mute); margin-left: 2px; }
.cx-peek-go{ color: var(--mute); font-size: .9rem; }
@media (min-width: 881px){ .cx-peek{ display: none !important; } }
@media print{ .cx-peek{ display: none !important; } }
.pill-row{ display: flex; flex-wrap: wrap; gap: 8px 10px; }
.pill-dock .pill-row{ pointer-events: none; }
.pill-row .pill-link{ margin: 0; }
@media (max-width: 400px){ .pill-dock .pill-link{ padding: 6px 12px 6px 9px; font-size: .84rem; gap: 7px; } }
/* calculator pages: questions */
.gd-col h3.cx-q{ margin: 1.5em 0 .35em; font-family: var(--sans); font-weight: 600; font-size: 1.05rem; color: var(--paper); }
.gd-col h3.cx-q + p{ margin-top: 0; }
.cx-page #calculator{ padding-top: clamp(20px, 3vw, 30px); }
/* calculators index: groups */
.cx-group-h{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 38px 0 16px; font: 400 clamp(1.35rem, 2.6vw, 1.7rem)/1.2 var(--serif); color: var(--paper); }
.cx-group-h:first-child{ margin-top: 0; }
.cx-group-h small{ font: 400 .92rem var(--sans); color: var(--faint); }
/* standard drinks: other countries */
.cx-drinks{ padding-bottom: 8px; }
.cx-drinks .rc2-table th{ font-size: .9rem; }

/* ---------- /forum: the forum inside the site (js/forum-embed.js) ---------- */
body.forum-embed{ height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background-attachment: scroll; }
body.forum-embed .site-header{ position: relative; flex: none; }
.fe{ flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.fe-bar{ flex: none; border-bottom: 1px solid var(--rule); background: var(--ink-2); }
.fe-bar .shell{ display: flex; align-items: center; justify-content: space-between; gap: 6px 16px; min-height: 40px; padding-block: 6px; }
.fe-lead{ margin: 0; font-size: .86rem; color: var(--faint); min-width: 0; }
.fe-lead b{ font-weight: 600; color: var(--paper); }
.fe-note a{ color: var(--gold-link); }
.fe-open{ flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border: 1px solid rgba(217,154,31,.45);
  border-radius: 999px; background: rgba(217,154,31,.07); color: var(--gold-link); font-size: .84rem; text-decoration: none; }
.fe-open:hover{ border-color: rgba(217,154,31,.75); background: rgba(217,154,31,.14); color: var(--paper); }
.fe-frame{ flex: 1 1 auto; width: 100%; min-height: 0; border: 0; display: block; background: #071019; }
.fe-noscript{ padding: 24px var(--gut); }
@media (max-width: 560px){ .fe-sub{ display: none; } .fe-bar .shell{ min-height: 36px; } .fe-open{ font-size: .8rem; padding: 4px 11px; } }
/* /forum: the forum's own header shows the Stilligent logo just below, so the site's is left out here */
body.forum-embed .site-header .mark{ display: none; }