/* ==========================================================================
   Frequency First — Landing Page
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root{
  --green-900:#12382C;
  --green-800:#164436;
  --green-700:#1D4E3E;
  --green-600:#356F5B;
  --green-500:#3E7461;

  --gold-600:#A97524;
  --gold-500:#B8842F;
  --gold-400:#C79A4C;

  --ink:#2E3230;
  --ink-soft:#4A4F4C;
  --ink-mute:#7A807C;

  --cream:#F6F5EF;
  --cream-2:#F1F1E9;
  --card:#FDFCF7;
  --header-bg:#FDFCF7;
  --mint:#E7F0E8;
  --mint-2:#EDF3EC;
  --peach:#F8EDDC;
  --line:#E4E3D8;
  --line-soft:#EDECE2;

  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:28px;
  --r-pill:999px;

  --shadow-xs:0 1px 2px rgba(24,45,36,.05);
  --shadow-sm:0 2px 8px rgba(24,45,36,.05);
  --shadow-md:0 6px 22px rgba(24,45,36,.07);
  --shadow-lg:0 18px 48px rgba(24,45,36,.08);

  --font-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --wrap:1460px;
  --gutter:40px;
  --header-h:92px;
}

/* ---------- 2. Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:15px;
  line-height:1.65;
  color:var(--ink);
  background:linear-gradient(180deg,#F8F7F2 0%,#F3F3EB 42%,#EFEFE6 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block;}
ul,ol{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4,p{margin:0;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;}
input,textarea,select{font:inherit;color:inherit;}
hr{border:0;}
.sprite{position:absolute;width:0;height:0;overflow:hidden;}
.ic{width:20px;height:20px;flex:none;display:block;}
.container{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);}

/* ---------- 3. Typography helpers ---------- */
.eyebrow{
  font-size:11.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-600);
}
.eyebrow-sm{font-size:10.8px;letter-spacing:.14em;}
.display{
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(38px,4.2vw,62px);line-height:1.08;
  letter-spacing:-.015em;color:var(--green-800);
}
h2{
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(27px,2.4vw,34px);line-height:1.2;
  letter-spacing:-.012em;color:var(--green-800);
}
.body-text{color:var(--ink-soft);font-size:14.5px;line-height:1.72;}
.rule{display:block;width:82px;height:2px;background:var(--gold-500);opacity:.85;margin:26px 0 24px;}
.divider{height:1px;background:var(--line);margin:26px 0 22px;}
.gold{color:var(--gold-500);}

/* ---------- 4. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-size:14px;font-weight:600;letter-spacing:.005em;
  padding:15px 28px;border-radius:var(--r-pill);
  transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease,color .2s ease;
  white-space:nowrap;
}
.btn .ic{width:16px;height:16px;}
.btn-dark{background:var(--green-800);color:#fff;box-shadow:var(--shadow-sm);}
.btn-dark:hover{background:var(--green-900);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn-ghost{background:transparent;color:var(--green-800);border:1.5px solid var(--green-800);}
.btn-ghost:hover{background:var(--green-800);color:#fff;transform:translateY(-2px);}
.btn-sm{padding:13px 24px;font-size:13.5px;}

/* ---------- 5. Header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:var(--header-bg);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow .25s ease;
}
.site-header.is-stuck{box-shadow:0 4px 20px rgba(24,45,36,.06);}
.header-inner{
  min-height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:28px;
}
/* The supplied artwork stacks the mark over the wordmark; side by side keeps
   both readable at header height. Width/height on the <img> tags reserve the
   space before the files load, so the header never jumps. */
.logo-lockup{display:flex;align-items:center;gap:13px;}
.logo-mark{height:46px;width:auto;}
.logo-word{height:20px;width:auto;}
.nav-list{display:flex;align-items:center;gap:38px;}
.nav-list a{
  font-size:13.5px;font-weight:600;color:var(--ink);
  position:relative;padding-block:6px;transition:color .2s ease;
}
.nav-list a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--gold-500);transition:right .28s ease;
}
.nav-list a:hover{color:var(--green-700);}
.nav-list a:hover::after{right:0;}
.nav-cta-mobile{display:none;}
.nav-toggle{
  display:none;width:42px;height:42px;border-radius:10px;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
}
.nav-toggle span{
  display:block;width:20px;height:1.8px;background:var(--green-800);border-radius:2px;
  transition:transform .28s ease,opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.8px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg);}

/* ---------- 5b. Language switch ---------- */
.lang-switch{
  display:inline-flex;align-items:center;flex:none;
  border:1px solid var(--line);border-radius:var(--r-pill);
  background:rgba(255,255,255,.6);padding:3px;gap:2px;
}
.lang-btn{
  font-size:11.5px;font-weight:700;letter-spacing:.06em;
  color:var(--ink-mute);padding:7px 13px;border-radius:var(--r-pill);
  transition:background-color .2s ease,color .2s ease;line-height:1;
}
.lang-btn:hover{color:var(--green-800);}
.lang-btn.is-active{background:var(--green-800);color:#fff;}

/* ---------- 6. Hero ---------- */
.hero{padding:78px 0 84px;}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:64px;align-items:center;
}
.hero .eyebrow{margin-bottom:22px;}
.hero .lede{color:var(--ink-soft);font-size:15px;line-height:1.78;max-width:474px;}

.benefit-cards{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  margin:44px 0 40px;max-width:740px;
}
.benefit-card{
  background:var(--card);border-radius:var(--r-md);
  border:1px solid rgba(228,227,216,.75);
  padding:26px 8px 22px;text-align:center;
  box-shadow:var(--shadow-xs);
  transition:transform .25s ease,box-shadow .25s ease;
}
.benefit-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.benefit-card p{margin-top:16px;font-size:12px;font-weight:700;line-height:1.45;color:var(--ink);}

.ring{
  width:46px;height:46px;border-radius:50%;
  border:1.4px solid var(--gold-400);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--green-800);background:#fff;
}
.ring .ic{width:21px;height:21px;}
.ring-lg{width:52px;height:52px;flex:none;}
.ring-outline{border-color:rgba(255,255,255,.55);background:transparent;color:#fff;position:relative;}

.hero-actions{display:flex;flex-wrap:wrap;gap:22px;}

.hero-media img{
  width:100%;aspect-ratio:1.777;border-radius:var(--r-xl);
  box-shadow:0 24px 60px rgba(24,45,36,.10);
  object-fit:cover;
}
.hero-media{margin:0;}

/* ---------- 7. Sections & panels ---------- */
.section{padding:34px 0;}
.section-tight{padding-top:10px;}
.panel-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;
  align-items:stretch;
}
.panel{
  background:var(--card);border-radius:var(--r-xl);
  padding:42px 40px 44px;
  box-shadow:var(--shadow-lg);
  border:1px solid rgba(228,227,216,.6);
  /* Column flow so a panel shorter than its neighbour can hand the leftover
     height to a seam inside itself (see .divider below) instead of pooling it
     all as blank space under its last element. */
  display:flex;flex-direction:column;
}
/* Side-by-side panels only (below 1081px they stack and each is its own
   height, so none of this applies). Each panel names one seam that absorbs
   whatever height the row has spare — the diagram, the divider above "Common
   pressures", or the full-width block each HOW IT WORKS panel ends with. The
   slack then sits at a deliberate break instead of pooling as blank space
   under the last element, and the panel's last block stays anchored to the
   foot of the card. Every margin-top:auto is paired with a :has() rule that
   puts the original gap on the element above, so the seam keeps its normal
   spacing at the widths where that panel is the taller of the two and there
   is no slack to hand out. */
@media (min-width:1081px){
  .panel > .orbit,
  .panel > .divider,
  .panel > .flow,
  .panel > .supports,
  .panel > .tech-list{margin-top:auto;}
  .panel > :has(+ .orbit)    {margin-bottom:36px;}
  .panel > :has(+ .divider)  {margin-bottom:26px;}
  .panel > :has(+ .flow)     {margin-bottom:34px;}
  .panel > :has(+ .supports) {margin-bottom:24px;}
  .panel > :has(+ .tech-list){margin-bottom:22px;}
}
.panel h2{margin:16px 0 22px;}
.panel .body-text{max-width:478px;}

/* ---------- 8. Orbit diagram ---------- */
/* The cap is what keeps the two SCIENCE panels the same natural height. The
   diagram is square and grows with the column, while the right-hand panel's
   text *shrinks* as the column widens (fewer wrapped lines) — so above ~1240px
   an uncapped orbit ran the left panel ~140px past the right one and left a
   hole at the bottom of the right card. 448px is the width at which the two
   columns come out level from 1081px up. Below 1081px the panels stack, height
   matching stops mattering, and the cap goes back to 560px. */
.orbit{
  position:relative;width:100%;max-width:448px;margin:36px auto 4px;
  aspect-ratio:1;
}
.orbit-lines{position:absolute;inset:0;width:100%;height:100%;}
.orbit-core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:44.4%;aspect-ratio:1;border-radius:50%;
  background:transparent;padding:0;
}
/* clip-path trims the connector stubs baked into the source asset's edge */
.orbit-core img{width:100%;height:100%;border-radius:50%;object-fit:contain;clip-path:circle(50%);}

.node{
  position:absolute;display:flex;align-items:center;gap:10px;
  background:var(--card);border:1px solid rgba(228,227,216,.8);
  border-radius:var(--r-md);padding:11px 15px 11px 11px;
  box-shadow:var(--shadow-sm);white-space:nowrap;
  transition:transform .25s ease,box-shadow .25s ease;
}
.node:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.node p{font-size:11px;font-weight:700;line-height:1.35;color:var(--ink);}
.node p span,.pressure-card p span,.flow p span{display:block;}
.node-ic{
  width:34px;height:34px;border-radius:50%;background:var(--mint);
  display:inline-flex;align-items:center;justify-content:center;color:var(--green-800);flex:none;
}
.node-ic .ic{width:17px;height:17px;}
.node{transform:translate(-50%,-50%);}
.node:hover{transform:translate(-50%,-50%) translateY(-3px);}
.node.n1{left:50%;top:10.6%;}
.node.n2{left:84.1%;top:30.3%;}
.node.n3{left:84.1%;top:69.7%;}
.node.n4{left:50%;top:89.4%;}
.node.n5{left:15.9%;top:69.7%;}
.node.n6{left:15.9%;top:30.3%;}

/* ---------- 9. Pressure cards ---------- */
/* minmax(0,1fr), not 1fr: a plain 1fr track cannot shrink below its longest
   unbreakable word, and German compounds ("hochverarbeitete") are wider than a
   fifth of the panel. The five tracks therefore added up to more than the
   panel and gave the whole PAGE a horizontal scrollbar below 1240px. Removing
   the floor keeps the grid inside the card; a word that is still too long just
   runs a little wide inside its own card, as it does today, instead of
   dragging the layout with it. hyphens:auto (paired with the <html lang>
   i18n.js sets) lets Chrome break such compounds properly where it can. */
.pressure-grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:22px;
}
.pressure-card{
  background:var(--card);border:1px solid rgba(228,227,216,.75);
  border-radius:var(--r-md);padding:26px 6px 20px;text-align:center;
  box-shadow:var(--shadow-xs);
  transition:transform .25s ease,box-shadow .25s ease;
}
.pressure-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.pressure-card p{
  margin-top:16px;font-size:11px;font-weight:700;line-height:1.45;
  hyphens:auto;
}

.notice{
  display:flex;align-items:center;gap:18px;
  border-radius:var(--r-lg);padding:22px 24px;margin-top:26px;
}
.notice-peach{background:var(--peach);}
.notice-peach .ring{background:transparent;border-color:var(--gold-500);}
.notice p{font-size:12.4px;line-height:1.62;color:var(--ink);}
.notice strong{font-weight:700;}

.banner-dark{
  background:var(--green-800);color:#fff;text-align:center;
  border-radius:var(--r-lg);padding:22px 24px;margin-top:18px;
  font-size:12.8px;font-weight:700;letter-spacing:.005em;
}

/* ---------- 10. How it works ---------- */
.signals-head{display:grid;grid-template-columns:minmax(0,1fr) 272px;gap:26px;align-items:start;}
.signals-head h2{margin:12px 0 22px;}
.signals-head .body-text + .body-text{margin-top:18px;}
.anatomy{margin:0;background:var(--mint-2);border-radius:var(--r-lg);padding:8px;}
.anatomy img{width:100%;aspect-ratio:.93;border-radius:14px;object-fit:cover;}

.flow{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  background:var(--mint-2);border-radius:var(--r-lg);
  padding:34px 18px 30px;margin-top:34px;position:relative;
}
.flow li{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;}
.flow li:not(:last-child)::after{
  content:"";position:absolute;top:26px;left:calc(50% + 34px);right:calc(-50% + 36px);
  height:1.4px;background:var(--gold-400);
}
.flow li:not(:last-child)::before{
  content:"";position:absolute;top:22.6px;right:calc(-50% + 36px);
  width:0;height:0;border-left:6px solid var(--gold-400);
  border-top:4px solid transparent;border-bottom:4px solid transparent;z-index:1;
}
.flow p{margin-top:14px;font-size:11px;font-weight:700;line-height:1.4;color:var(--ink);}

.tile{
  width:52px;height:52px;border-radius:13px;background:var(--green-800);
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;position:relative;flex:none;box-shadow:var(--shadow-sm);
}
.tile .ic{width:23px;height:23px;}
.dot{
  position:absolute;top:6px;right:6px;width:6px;height:6px;
  border-radius:50%;background:var(--gold-500);
}

/* ---------- 11. Supports ---------- */
.supports{
  display:grid;grid-template-columns:minmax(0,1fr) 236px;gap:22px;align-items:center;
  background:var(--mint-2);border-radius:var(--r-lg);
  padding:24px 26px;margin-top:24px;
}
.support-list li{
  display:flex;align-items:center;gap:14px;
  font-size:12.8px;font-weight:700;color:var(--ink);
  padding:10.5px 0;border-bottom:1px solid rgba(190,206,192,.5);
}
.support-list li:last-child{border-bottom:0;}
.tick{
  width:19px;height:19px;border-radius:50%;background:var(--green-800);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;flex:none;
}
.tick .ic{width:12px;height:12px;}
.microbiome{margin:0;background:var(--mint);border-radius:50%;padding:10px;}
.microbiome img{width:100%;aspect-ratio:1;border-radius:50%;object-fit:cover;}

/* ---------- 12. Journey ---------- */
.journey{padding-top:56px;}
.journey-title{
  font-size:clamp(30px,3vw,40px);margin:14px 0 12px;
}
.timeline{position:relative;height:36px;margin:44px 4% 0;}
.tl-line{
  position:absolute;left:0;right:0;top:50%;height:1.4px;
  background:var(--gold-400);transform:translateY(-50%);
}
.tl-dot{
  position:absolute;top:50%;width:11px;height:11px;border-radius:50%;
  background:var(--gold-500);transform:translate(-50%,-50%);
}
.week-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.week-card{
  background:var(--card);border:1px solid rgba(228,227,216,.7);
  border-radius:var(--r-lg);padding:30px 32px 34px;
  box-shadow:var(--shadow-md);
  transition:transform .28s ease,box-shadow .28s ease;
}
.week-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);}
.week-card-alt{background:var(--mint-2);}
.week-card header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;}
.week-label{
  font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold-600);padding-top:6px;
}
.week-card hr{height:1px;background:var(--line);margin:20px 0 18px;}
.dot-list li{
  position:relative;padding-left:20px;font-size:13.5px;color:var(--ink-soft);
  padding-block:8px;
}
.dot-list li::before{
  content:"";position:absolute;left:0;top:16px;width:6px;height:6px;
  border-radius:50%;background:var(--gold-500);
}

.journey-foot{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.72fr);
  gap:28px;margin-top:36px;align-items:stretch;
}
.note-dark{
  background:var(--green-800);color:#fff;border-radius:var(--r-lg);
  padding:28px 34px;display:flex;align-items:center;gap:22px;
}
.note-dark p{font-size:13.5px;line-height:1.6;}
.note-dark strong{font-weight:700;}
.note-dark .ring{width:50px;height:50px;flex:none;}
.note-dark .dot{top:2px;right:2px;}
.note-peach{
  background:var(--peach);border-radius:var(--r-lg);padding:26px 32px;
}
.note-peach-title{font-size:12.5px;font-weight:700;color:var(--gold-600);margin-bottom:12px;}
.note-peach p{font-size:13px;line-height:1.6;color:var(--ink-soft);}

/* ---------- 13. Connect ---------- */
.connect{padding-top:78px;padding-bottom:86px;}
.connect-grid{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:44px 62px;align-items:start;
}
/* Desktop: copy and contact stack in column 1, the form spans both rows in column 2. */
.connect-copy   {grid-column:1;grid-row:1;}
.connect-contact{grid-column:1;grid-row:2;}
.form-card      {grid-column:2;grid-row:1 / span 2;}
.connect-title{
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(34px,3.6vw,46px);line-height:1.14;
  letter-spacing:-.015em;color:var(--green-800);
}
.connect-sub{margin-top:26px;font-size:14.5px;line-height:1.85;color:var(--ink);}

.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px;}
.trust-card{
  background:var(--card);border:1px solid rgba(228,227,216,.7);
  border-radius:var(--r-md);padding:26px 10px 22px;text-align:center;
  box-shadow:var(--shadow-xs);
  transition:transform .25s ease,box-shadow .25s ease;
}
.trust-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.trust-card .tile{margin-inline:auto;}
.trust-card p{margin-top:16px;font-size:11.8px;font-weight:700;line-height:1.5;}

.contact-title{
  font-family:var(--font-serif);font-weight:400;font-size:30px;
  color:var(--green-800);margin:0 0 22px;letter-spacing:-.01em;
}
/* The whole card is the link — no raw numbers or addresses on the page.
   Tapping it opens the dialler, WhatsApp, the mail client or the site. */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;}
.contact-card{
  background:var(--card);border:1px solid rgba(228,227,216,.7);
  border-radius:var(--r-md);padding:18px 20px;
  display:flex;align-items:center;gap:16px;box-shadow:var(--shadow-xs);
  text-decoration:none;color:inherit;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.contact-card .tile{flex:none;}
.contact-card:hover,
.contact-card:focus-visible{
  transform:translateY(-3px);box-shadow:var(--shadow-md);
  border-color:rgba(53,111,91,.35);
}
.contact-card:focus-visible{outline:2px solid var(--green-600);outline-offset:3px;}
.contact-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto;}
.contact-label{font-size:14px;font-weight:700;color:var(--ink);line-height:1.3;}
.contact-sub{font-size:12.5px;font-weight:500;color:var(--ink-soft);line-height:1.4;}
.contact-chevron{
  flex:none;width:18px;height:18px;color:var(--green-600);opacity:.55;
  transition:transform .25s ease,opacity .25s ease;
}
.contact-card:hover .contact-chevron{transform:translateX(3px);opacity:1;}

/* ---------- 14. Form ---------- */
.form-card{
  background:var(--card);border-radius:var(--r-xl);
  padding:40px 44px 46px;box-shadow:var(--shadow-lg);
  border:1px solid rgba(228,227,216,.6);
}
.form-banner{
  background:var(--mint);border-radius:var(--r-md);
  padding:17px 22px;font-size:13px;font-weight:700;color:var(--green-700);
  margin-bottom:30px;
}
.field-row{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.field{margin-bottom:20px;}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:9px;}
.req{color:var(--ink);}
.field input{
  width:100%;padding:14px 16px;border-radius:var(--r-sm);
  border:1px solid #DCDBD1;background:#fff;font-size:14px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.field input:focus{
  outline:none;border-color:var(--green-600);
  box-shadow:0 0 0 3px rgba(53,111,91,.13);
}
.field input.invalid{border-color:#B4553F;background:#FDF6F4;}

/* Native select, restyled to match the text inputs. The wrapper carries the
   caret so we can drop the browser's own arrow without losing keyboard use. */
.select-wrap{position:relative;display:block;}
.field select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  width:100%;padding:14px 44px 14px 16px;border-radius:var(--r-sm);
  border:1px solid #DCDBD1;background:#fff;font:inherit;font-size:14px;
  color:var(--ink);line-height:1.2;cursor:pointer;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.field select:focus{
  outline:none;border-color:var(--green-600);
  box-shadow:0 0 0 3px rgba(53,111,91,.13);
}
.field select.invalid{border-color:#B4553F;background:#FDF6F4;}
/* Placeholder option reads as a hint until a real choice is made. */
.field select:invalid,
.field select option[value=""]{color:var(--ink-soft);}
.field select:has(option[value=""]:checked){color:var(--ink-soft);}
.select-caret{
  position:absolute;right:16px;top:50%;width:16px;height:16px;
  transform:translateY(-50%) rotate(90deg);
  color:var(--green-600);opacity:.6;pointer-events:none;
}
.error{font-size:11.5px;color:#B4553F;margin-top:6px;min-height:0;}

/* Radio group — "are you a patient or a practitioner". Native inputs with
   accent-color, so it matches the consent checkbox and needs no JS. The whole
   label is the hit area, which matters most on a phone. */
.choice{display:grid;gap:8px;margin-top:10px;}
.choice > label{
  display:flex;align-items:center;gap:11px;cursor:pointer;
  font-size:13.5px;line-height:1.45;color:var(--ink-soft);
  background:var(--card);border:1px solid rgba(228,227,216,.9);
  border-radius:var(--r-md);padding:12px 14px;
  transition:border-color .2s ease,background .2s ease;
}
.choice > label:hover{border-color:var(--gold-400);}
.choice input[type="radio"]{
  width:17px;height:17px;flex:none;accent-color:var(--green-700);cursor:pointer;
}
/* :has() is well supported now; without it the group still works, it just
   does not tint the chosen row. */
.choice > label:has(input:checked){border-color:var(--green-600);background:var(--mint-2);}

.consent{display:flex;align-items:flex-start;gap:13px;margin:8px 0 6px;}
.consent input{
  width:16px;height:16px;margin-top:2px;flex:none;accent-color:var(--green-700);
  border-radius:3px;cursor:pointer;
}
.consent label{font-size:12.5px;line-height:1.6;color:var(--ink-soft);cursor:pointer;}
.consent a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px;}

.btn-submit{
  width:100%;margin-top:22px;background:var(--green-600);color:#fff;
  padding:20px 30px;border-radius:var(--r-pill);
  justify-content:space-between;font-size:14.5px;font-weight:700;
  box-shadow:var(--shadow-sm);
  /* German label is far longer than the English one — let it wrap rather than
     push the button past the edge of a phone screen. */
  white-space:normal;text-align:left;
}
.btn-submit > span{flex:1 1 auto;}
.btn-submit:hover{background:var(--green-700);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn-submit .ic{width:19px;height:19px;}
.form-note{
  text-align:center;font-size:11px;color:var(--ink-mute);
  margin-top:20px;line-height:1.55;
}
/* Honeypot — off-screen rather than display:none, which some bots detect. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

.form-success,.form-failure{
  margin-top:14px;text-align:center;font-size:13.5px;font-weight:700;
  border-radius:var(--r-sm);padding:12px;
}
.form-success{color:var(--green-700);background:var(--mint);}
.form-failure{color:#8E3D28;background:#FBEDE8;}
.btn-submit[aria-busy="true"]{opacity:.72;pointer-events:none;}

/* ---------- 14b. Sticky CTA ----------
   position:sticky (not fixed). The element is the last child of .sticky-zone, so
   it pins to the viewport bottom while that zone is on screen and scrolls away at
   the zone's end — i.e. exactly where the enquiry form begins. It is absent over
   the hero and over the form for free, because both sit outside the zone.

   height:0 means it claims no space in the flow, so it adds no gap between the
   journey section and the form; the buttons themselves overflow it. */
.sticky-zone{position:relative;}

.sticky-cta{
  position:sticky;bottom:0;z-index:50;
  height:0;overflow:visible;pointer-events:none;
}
.sticky-cta-inner{
  position:absolute;right:clamp(16px,3.4vw,48px);
  bottom:calc(18px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:10px;
  pointer-events:auto;
}
.sticky-cta .btn{
  box-shadow:0 6px 20px rgba(24,45,36,.16);
  padding:13px 22px;font-size:13px;
}
.sticky-cta .btn:hover{transform:translateY(-2px);}
.sticky-cta .btn-ghost{
  background:rgba(253,252,247,.95);
  border-color:rgba(22,68,54,.28);
}
@supports (backdrop-filter:blur(8px)){
  .sticky-cta .btn-ghost{background:rgba(253,252,247,.82);backdrop-filter:blur(10px);}
}
.sticky-cta .btn-ghost:hover{background:var(--green-800);border-color:var(--green-800);}

/* ---------- 15. Footer ---------- */
.site-footer{padding:34px 0 56px;}
.site-footer .container{border-top:1px solid var(--line);padding-top:38px;}

.tag-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;}
.tag-row li{
  background:var(--card);border:1px solid rgba(228,227,216,.8);
  border-radius:var(--r-sm);padding:11px 24px;
  font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink);
  box-shadow:var(--shadow-xs);transition:transform .2s ease,box-shadow .2s ease;
}
.tag-row li:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);}

/* ---------- 15b. Legal bar + accordions ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Both languages ship in the markup so search engines see the German legal
   text too; <html lang> decides which one is on screen. */
[data-lang-only]{display:none;}
html[lang="de"] [data-lang-only="de"],
html[lang="en"] [data-lang-only="en"]{display:block;}

.legal{margin-top:38px;}
.legal-bar{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:10px 26px;padding-top:30px;border-top:1px solid var(--line);
}
.legal-bar a,
.legal-bar button{
  font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink-soft);
  background:none;border:0;padding:4px 0;cursor:pointer;
  text-decoration:none;border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.legal-bar a:hover,
.legal-bar button:hover{color:var(--green-700);border-bottom-color:var(--green-600);}

.legal-company{
  text-align:center;margin:18px auto 0;max-width:640px;
  font-size:12px;line-height:1.8;color:var(--ink-soft);
}
.legal-company a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line);}
.legal-company a:hover{color:var(--green-700);border-bottom-color:var(--green-600);}

.legal-panel{
  max-width:820px;margin:14px auto 0;
  background:var(--card);border:1px solid rgba(228,227,216,.8);
  border-radius:var(--r-md);
  /* The summary is the anchor target; leave room for the sticky header. */
  scroll-margin-top:110px;
}
.legal-panel + .legal-panel{margin-top:10px;}
.legal-panel > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 20px;font-size:13.5px;font-weight:700;color:var(--green-800);
  border-radius:var(--r-md);
}
.legal-panel > summary::-webkit-details-marker{display:none;}
.legal-panel > summary:hover{background:rgba(53,111,91,.05);}
.legal-panel > summary:focus-visible{outline:2px solid var(--green-600);outline-offset:2px;}
.legal-caret{
  flex:none;width:16px;height:16px;color:var(--green-600);opacity:.6;
  transform:rotate(90deg);transition:transform .25s ease;
}
.legal-panel[open] > summary{border-bottom:1px solid var(--line);border-radius:var(--r-md) var(--r-md) 0 0;}
.legal-panel[open] .legal-caret{transform:rotate(-90deg);}

.legal-body{padding:6px 22px 22px;font-size:12.5px;line-height:1.75;color:var(--ink-soft);}
.legal-body h4{
  font-size:12.5px;font-weight:700;color:var(--ink);
  margin:20px 0 6px;letter-spacing:.01em;
}
.legal-body h4:first-child{margin-top:14px;}
.legal-body p{margin:0 0 10px;}
.legal-body p:last-child{margin-bottom:0;}
.legal-body a{color:var(--green-700);text-decoration:underline;text-underline-offset:2px;word-break:break-word;}
.legal-address{font-style:normal;}
.legal-stamp{margin-top:16px;font-size:11.5px;opacity:.75;}

/* ---------- 15c. Cookie banner ---------- */
.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:var(--card);border-top:1px solid var(--line);
  box-shadow:0 -10px 34px rgba(22,68,54,.13);
  padding:18px clamp(16px,3.4vw,48px) calc(18px + env(safe-area-inset-bottom,0px));
}
.cookie-banner[hidden]{display:none;}
.cookie-inner{
  max-width:1180px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:26px;
}
.cookie-title{font-size:13px;font-weight:700;color:var(--ink);margin:0 0 4px;}
.cookie-text{font-size:12px;line-height:1.65;color:var(--ink-soft);margin:0;max-width:74ch;}
.cookie-text a{color:var(--green-700);text-decoration:underline;text-underline-offset:2px;}
.cookie-actions{display:flex;gap:12px;flex:none;}
/* Accept and Reject are deliberately the same button — same size, same colour,
   same weight. Nudging people toward "accept" with a louder button is exactly
   what a consent banner must not do. */
.cookie-btn{
  font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:.01em;
  min-width:132px;padding:13px 22px;border-radius:var(--r-pill);
  background:#fff;color:var(--green-800);border:1.5px solid var(--green-600);
  cursor:pointer;transition:background .2s ease,color .2s ease;
}
.cookie-btn:hover{background:var(--green-600);color:#fff;}
.cookie-btn:focus-visible{outline:2px solid var(--green-800);outline-offset:2px;}

/* Lift the floating CTA clear of the banner while it is on screen. */
html.cookie-open .sticky-cta-inner{bottom:calc(150px + env(safe-area-inset-bottom,0px));}

@media (max-width:760px){
  .legal-bar{gap:10px 18px;}
  .legal-bar a,.legal-bar button{font-size:12px;}
  .legal-panel > summary{padding:14px 16px;font-size:13px;}
  .legal-body{padding:6px 16px 18px;}
  .cookie-inner{flex-direction:column;align-items:stretch;gap:14px;}
  .cookie-actions{width:100%;}
  .cookie-btn{flex:1 1 0;min-width:0;padding:13px 12px;}
  html.cookie-open .sticky-cta-inner{bottom:calc(196px + env(safe-area-inset-bottom,0px));}
}

/* ---------- 15d. Thank-you page ---------- */
.header-inner-slim{justify-content:space-between;}
.legal-slim{margin-top:0;}
.legal-slim .legal-bar{border-top:0;padding-top:0;}

.ty{padding:clamp(48px,7vw,90px) 0 clamp(40px,6vw,72px);}
.ty-card{
  max-width:760px;margin:0 auto;text-align:center;
  background:var(--card);border:1px solid rgba(228,227,216,.7);
  border-radius:var(--r-xl);padding:clamp(32px,4.4vw,58px) clamp(24px,4vw,64px);
  box-shadow:var(--shadow-lg);
}
.ty-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:66px;height:66px;border-radius:50%;
  background:var(--mint);color:var(--green-700);margin-bottom:24px;
}
.ty-mark .ic{width:30px;height:30px;}
.ty-eyebrow{margin:0 0 14px;}
.ty-h1{margin:0 0 20px;font-size:clamp(32px,3.6vw,50px);}
.ty-lede{
  max-width:56ch;margin:0 auto;
  color:var(--ink-soft);font-size:15px;line-height:1.72;
}

.ty-sub{
  font-size:clamp(20px,2vw,24px);margin:42px 0 22px;
  padding-top:30px;border-top:1px solid var(--line);
}
.ty-steps{
  list-style:none;margin:0;padding:0;text-align:left;
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  counter-reset:ty;
}
.ty-steps li{
  background:var(--mint-2);border-radius:var(--r-md);padding:22px 20px;
  display:flex;flex-direction:column;gap:14px;
}
.ty-steps p{margin:0;font-size:13px;line-height:1.6;color:var(--ink-soft);}

.ty-note{
  margin:28px auto 0;max-width:52ch;
  font-size:12.5px;line-height:1.65;color:var(--ink-mute);
}
.ty-actions{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:30px;
}

@media (max-width:760px){
  .ty-steps{grid-template-columns:minmax(0,1fr);gap:12px;}
  .ty-steps li{flex-direction:row;align-items:center;padding:16px 18px;}
  .ty-steps .tile{flex:none;}
  .ty-lede{font-size:14.5px;}
  .ty-actions{flex-direction:column;align-items:stretch;}
  .ty-actions .btn{width:100%;}
}

/* ---------- 16. Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.22,.7,.3,1),transform .7s cubic-bezier(.22,.7,.3,1);}
.reveal.is-visible{opacity:1;transform:none;}
/* The form is an anchor target (#enquiry). A translated element reports a shifted
   box to the browser's scroll-into-view maths, so jumping to it landed the card
   26px behind the sticky header once the reveal animation removed the transform.
   Fade it in without moving it. */
.form-card.reveal{transform:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

/* ==========================================================================
   17. Responsive
   ========================================================================== */
@media (max-width:1240px){
  :root{--gutter:32px;}
  .hero-grid{gap:44px;}
  .nav-list{gap:26px;}
  .panel{padding:38px 34px 40px;}
  .connect-grid{gap:44px;}
  .form-card{padding:34px 32px 38px;}
}

@media (max-width:1080px){
  .header-cta{display:none;}
  .nav-toggle{display:flex;}
  .header-inner{gap:12px;}
  .lang-switch{margin-left:auto;}
  .nav{
    position:fixed;inset:var(--header-h) 0 auto 0;
    background:var(--header-bg);border-bottom:1px solid var(--line-soft);
    padding:22px var(--gutter) 30px;
    display:none;box-shadow:var(--shadow-md);
  }
  .nav.is-open{display:block;}
  .nav-list{flex-direction:column;align-items:flex-start;gap:4px;}
  .nav-list a{display:block;padding:13px 0;font-size:15px;width:100%;}
  .nav-cta-mobile{display:inline-flex;margin-top:18px;}

  .panel-grid{grid-template-columns:minmax(0,1fr);gap:30px;}
  /* Change 07 — one column: copy, then the FORM, then Contact Us. */
  .connect-grid{grid-template-columns:minmax(0,1fr);gap:40px;}
  .connect-copy   {grid-column:1;grid-row:1;}
  .form-card      {grid-column:1;grid-row:2;}
  .connect-contact{grid-column:1;grid-row:3;}
  .orbit{max-width:560px;}
  .journey-foot{grid-template-columns:minmax(0,1fr);}
}

@media (max-width:960px){
  .hero{padding:52px 0 60px;}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:40px;}
  /* Change 02 — the headline reads first; the photo follows it. */
  .hero-copy{order:0;}
  .hero-media{order:1;}
  .hero-media img{aspect-ratio:1.35;max-height:420px;object-position:50% 22%;}
  .week-grid{grid-template-columns:minmax(0,1fr);gap:20px;}
  .timeline{display:none;}
  .signals-head{grid-template-columns:minmax(0,1fr);}
  /* width:100% matters. These figures are grid items with auto inline margins,
     which makes them shrink-to-fit — so before the image loads they collapse to
     their padding, then jump to full size and shove the page down ~500px. That
     shift is what used to strand the CTA above the form. */
  .anatomy{width:100%;max-width:320px;margin-inline:auto;}
  .supports{grid-template-columns:minmax(0,1fr);}
  .microbiome{width:100%;max-width:240px;margin-inline:auto;}
  .pressure-grid{grid-template-columns:repeat(3,1fr);}
}

@media (max-width:760px){
  :root{--gutter:22px;--header-h:78px;}
  /* The language switch needs room; the tagline is decorative, so it steps
     aside on phones rather than wrapping the logo onto two lines. */
  .logo-mark{height:38px;}
  .logo-word{height:17px;}
  .logo-lockup{gap:10px;}
  .display{font-size:clamp(32px,8.4vw,42px);}
  /* ---- Change 08 — hero benefit cards become capsules ----
     Two tall boxes per row pushed the "Heilpraktiker finden" buttons off the
     first screen on a phone. As capsules — icon beside the text rather than
     above it — the same four points take roughly a third of the height, which
     is what brings the CTAs into view without scrolling. Same treatment the
     orbit nodes and pressure cards already get above. */
  .benefit-cards{
    display:flex;flex-wrap:wrap;gap:9px;
    margin:22px 0 22px;max-width:none;
  }
  .benefit-card{
    display:flex;align-items:center;gap:9px;flex:0 0 calc(50% - 4.5px);
    padding:6px 12px 6px 6px;border-radius:var(--r-pill);
    text-align:left;
  }
  .benefit-card:hover{transform:none;}
  .benefit-card p{margin-top:0;font-size:10.6px;line-height:1.28;}
  .benefit-card .ring{width:30px;height:30px;flex:none;}
  .benefit-card .ring .ic{width:15px;height:15px;}

  /* Reclaiming the rest of the height the CTAs need. The two buttons sit
     side by side rather than stacked — that alone is ~70px — and the lede
     and rule give up a little of their generous desktop spacing. */
  .hero .lede{font-size:14.2px;line-height:1.66;}
  .rule{margin:16px 0 14px;}
  .hero-actions{gap:9px;flex-wrap:nowrap;}
  .hero-actions .btn{flex:1 1 0;min-width:0;padding:13px 12px;font-size:12.4px;gap:7px;}
  .hero-actions .btn .ic{width:15px;height:15px;flex:none;}
  .trust-grid{grid-template-columns:minmax(0,1fr);}
  .field-row{grid-template-columns:minmax(0,1fr);gap:0;}
  .panel{padding:30px 22px 32px;border-radius:var(--r-lg);}
  .form-card{padding:26px 22px 30px;border-radius:var(--r-lg);}
  .notice{flex-direction:column;text-align:center;gap:14px;padding:24px 20px;}
  .note-dark{flex-direction:column;text-align:center;gap:16px;padding:26px 22px;}
  .hero-actions .btn{flex:1 1 auto;}

  /* ---- Change 02 — compact hero photo, headline first ---- */
  .hero{padding:26px 0 44px;}
  .hero-media img{aspect-ratio:1.45;max-height:250px;object-position:50% 20%;border-radius:var(--r-lg);}

  /* ---- Change 03 — orbit nodes become capsules that flow in rows ---- */
  .orbit{
    aspect-ratio:auto;display:flex;flex-wrap:wrap;justify-content:center;
    align-items:stretch;gap:10px;margin:26px 0 4px;
  }
  .orbit-lines{display:none;}
  /* full-width flex line so the capsules start on a new row, but the
     circle itself stays small and centred */
  .orbit-core{
    position:static;transform:none;flex:0 0 100%;width:100%;
    aspect-ratio:auto;background:none;padding:0;margin:0 0 10px;box-shadow:none;
  }
  .orbit-core img{width:158px;height:158px;margin:0 auto;}
  /* two capsules per row */
  .node{
    position:static !important;transform:none !important;
    width:auto;max-width:none;flex:0 0 calc(50% - 5px);
    justify-content:flex-start;white-space:normal;
    gap:6px;padding:5px 10px 5px 5px;border-radius:var(--r-pill);
  }
  .node:hover{transform:none !important;}
  .node p{font-size:10.5px;line-height:1.25;}
  .node p span{display:inline;}
  .node-ic{width:24px;height:24px;}
  .node-ic .ic{width:13px;height:13px;}

  /* ---- Change 04 — pressure cards become capsules too ---- */
  .pressure-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;}
  .pressure-card{
    display:flex;align-items:center;gap:8px;
    padding:6px 14px 6px 6px;border-radius:var(--r-pill);
    text-align:left;flex:0 1 auto;
  }
  .pressure-card:hover{transform:none;}
  .pressure-card p{margin-top:0;font-size:11px;line-height:1.25;}
  .pressure-card p span{display:inline;}
  .pressure-card .ring{width:30px;height:30px;flex:none;}
  .pressure-card .ring .ic{width:15px;height:15px;}

  /* ---- Change 05 — vertical flow that keeps the arrows ---- */
  .flow{grid-template-columns:minmax(0,1fr);gap:0;padding:24px 20px;}
  .flow li{
    flex-direction:row;align-items:center;text-align:left;
    gap:14px;width:100%;
  }
  .flow li:not(:last-child){padding-bottom:34px;}
  .flow p{margin-top:0;font-size:12.5px;}
  .flow p span{display:inline;}
  /* connector: a vertical rule from each tile down to the next */
  .flow li:not(:last-child)::after{
    content:"";position:absolute;left:25px;right:auto;
    top:52px;bottom:8px;width:1.4px;height:auto;
    background:var(--gold-400);
  }
  .flow li:not(:last-child)::before{
    content:"";position:absolute;left:21px;right:auto;bottom:2px;top:auto;
    width:0;height:0;border-top:6px solid var(--gold-400);
    border-left:4px solid transparent;border-right:4px solid transparent;z-index:1;
  }
}

@media (max-width:520px){
  /* stack them so the group hugs the right edge instead of spanning the screen */
  .sticky-cta-inner{
    flex-direction:column;align-items:flex-end;gap:8px;
    bottom:calc(14px + env(safe-area-inset-bottom,0px));
  }
  .sticky-cta .btn{padding:12px 18px;font-size:12.5px;}
  .sticky-cta .btn-dark .ic{display:none;}     /* arrow costs width the label needs */
  .banner-dark{font-size:12.5px;padding:18px 16px;}
  .contact-title{font-size:26px;}
  .tag-row{gap:10px;}
  .tag-row li{padding:9px 16px;font-size:10.5px;}
}

/* Small phones (iPhone SE and the narrow Androids) have both less width —
   which wraps the capsule labels onto a third line — and less height. A last
   tightening pass here keeps the hero CTAs above the fold on those too. */
@media (max-width:390px){
  .hero{padding:20px 0 38px;}
  .hero .lede{font-size:13.6px;line-height:1.62;}
  .rule{margin:14px 0 12px;}
  .benefit-cards{gap:8px;margin:18px 0 18px;}
  .benefit-card{padding:5px 10px 5px 5px;gap:8px;}
  .benefit-card p{font-size:10px;line-height:1.25;}
  .benefit-card .ring{width:27px;height:27px;}
  .benefit-card .ring .ic{width:13px;height:13px;}
  .hero-actions .btn{padding:12px 9px;font-size:11.6px;gap:5px;}
  .hero-actions .btn .ic{width:14px;height:14px;}
}

@media (max-width:560px){
  .logo-mark{height:34px;}
  .logo-word{height:14px;}
  .logo-lockup{gap:8px;}
  .lang-switch{padding:2px;}
  .lang-btn{padding:6px 9px;font-size:10.5px;}
  .header-inner{gap:10px;}
}

/* On the narrowest phones the wordmark has nowhere left to go — the mark
   carries the header on its own rather than sliding under the language
   switch. The name is still the page title and the first heading. */
@media (max-width:370px){
  .logo-word{display:none;}
  .logo-mark{height:36px;}
}

/* ---------- 18. Desktop hero on a single screen ----------------------------
   The hero is meant to be taken in at a glance: headline, the four points, and
   both buttons, without scrolling. At full height (1080px and up) it keeps the
   generous spacing it was designed with. On a laptop it gives back the air it
   can afford to — the content is identical, only the space around it moves.

   Height-based rather than width-based: a 1440-wide window on a 768-tall
   laptop is the case that was overflowing, and window width says nothing about
   that. Scoped to min-width:1081px so the one-column tablet and phone layouts,
   which have their own rules above, are untouched. */

/* --- Laptop-height screens (≈1440x900, 1536x864) ----------------------- */
@media (min-width:1081px) and (max-height:960px){
  .hero{padding:48px 0 44px;}
  .hero-copy .eyebrow{margin-bottom:16px;}
  .rule{margin:20px 0 18px;}
  .hero .lede{line-height:1.66;}
  .benefit-cards{margin:30px 0 36px;}
  .benefit-card{padding:20px 8px 18px;}
  .benefit-card p{margin-top:13px;}
}

/* --- Short laptops (≈1366x768) ------------------------------------------ */
@media (min-width:1081px) and (max-height:820px){
  .hero{padding:30px 0 26px;}
  .display{font-size:clamp(34px,3.4vw,48px);}
  .hero-copy .eyebrow{margin-bottom:12px;}
  .rule{margin:14px 0 12px;}
  .hero .lede{font-size:14.4px;line-height:1.6;}
  .benefit-cards{margin:22px 0 30px;}
  .benefit-card{padding:16px 8px 14px;}
  .benefit-card p{margin-top:11px;font-size:11.5px;}
  .benefit-card .ring{width:40px;height:40px;}
  /* Wide-but-short window: the photo is the tall column, because its height
     follows the column width. Narrow the COLUMN rather than crop or shrink the
     photo — it still fills its column edge to edge, still shows the whole
     frame, and the width it gives up goes to the text beside it. */
}

/* --- Very short desktop windows (a 1920 screen at 150% scaling gives a
       ~600px tall viewport, and half-height windows land here too) ---------- */
@media (min-width:1081px) and (max-height:700px){
  .hero{padding:20px 0 16px;}
  .display{font-size:clamp(30px,3vw,40px);}
  .hero .lede{font-size:13.4px;line-height:1.5;}
  .benefit-cards{margin:16px 0 24px;}
  .benefit-card{padding:12px 8px 11px;}
  .benefit-card p{margin-top:9px;font-size:11px;}
  .benefit-card .ring{width:34px;height:34px;}
}