/* Gutsavi site styles: shared by every page. Page-only rules live in each page's <style>. */
  :root {
    /* colour */
    --paper: #F5F3EA;
    --white: #FFFFFF;
    --ink: #1D2A24;
    --muted: #4F6156;
    --on-sage-muted: #3A5446;
    --line: #E1E4D6;
    --green: #2F5E4E;
    --green-hover: #234A3D;
    --sage: #D9E6D1;
    --sage-tint: #E8F0E3;
    --on-green: #F1F5EE;
    --on-green-muted: #D4E8DA;

    /* space */
    --section: clamp(5.5rem, 11vw, 9.5rem);
    --head-gap: 1rem;
    --content-gap: clamp(2.5rem, 4.5vw, 3.75rem);
    --gutter: clamp(1.25rem, 3vw, 2rem);

    /* shape */
    --r-xl: 48px;
    --r-lg: 36px;
    --r-md: 24px;
    --r-sm: 16px;
    --shadow-card: 0 1px 2px rgba(29, 42, 36, .05), 0 18px 40px -20px rgba(29, 42, 36, .28);
    --ease-out: cubic-bezier(.16, 1, .3, 1);

    accent-color: var(--green);
    scrollbar-color: var(--green) var(--paper);
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; font-family: "Kumbh Sans", system-ui, sans-serif; font-size: 1.125rem; line-height: 1.6; color: var(--ink); background: var(--white); caret-color: var(--green); -webkit-font-smoothing: antialiased; }
  ::selection { background: var(--sage); color: var(--ink); }
  img { max-width: 100%; height: auto; display: block; }
  a { color: inherit; text-underline-offset: .22em; }
  :focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 10px; }
  .wrap { width: min(100%, 1280px); margin-inline: auto; }

  h1, h2, h3 { margin: 0; text-wrap: balance; }
  h1 { font-size: clamp(2.75rem, 5.4vw, 4.6rem); font-weight: 800; line-height: 1.03; letter-spacing: -0.035em; }
  h2 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; }
  h3 { font-size: 1.3rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
  .intro { color: var(--muted); font-size: clamp(1.125rem, 1.4vw, 1.25rem); margin: var(--head-gap) 0 0; max-width: 40rem; text-wrap: pretty; }
  .section-head { text-align: center; }
  .section-head .intro { margin-inline: auto; }
  section { padding: var(--section) var(--gutter); }
  .top, footer { padding-inline: var(--gutter); }
  .nw { white-space: nowrap; }

  /* buttons */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 54px; padding: 0 2rem; font: 700 1.0625rem/1 "Kumbh Sans", sans-serif; letter-spacing: -0.005em; color: var(--on-green); background: var(--green); border: 2px solid var(--green); border-radius: 999px; text-decoration: none; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ease-out); }
  .btn:hover { background: var(--green-hover); border-color: var(--green-hover); }
  .btn:active { transform: translateY(1px); }
  .btn.ghost { color: var(--green); background: transparent; border-color: currentColor; }
  .btn.ghost:hover { color: var(--on-green); background: var(--green); border-color: var(--green); }
  .btn.sm { min-height: 46px; padding: 0 1.4rem; font-size: 1rem; }
  .btn[disabled] { opacity: .55; cursor: not-allowed; }
  .text-link { font-weight: 700; color: var(--green); }
  .text-link:hover { color: var(--green-hover); }

  /* header */
  .top { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: saturate(1.2) blur(12px); }
  .top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 84px; }
  .logo { width: 156px; }
  .nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.25rem); font-weight: 500; font-size: 1.0625rem; }
  .nav a:not(.btn) { text-decoration: none; padding-block: .5rem; }
  .nav a:not(.btn):hover { color: var(--green); text-decoration: underline; text-decoration-thickness: 2px; }
  .menu { display: none; width: 46px; height: 46px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; place-items: center; }
  .menu:hover { background: var(--sage-tint); }
  .head-actions { display: flex; align-items: center; gap: .5rem; }
  @media (max-width: 960px) {
    .top .wrap { height: 68px; }
    .logo { width: 128px; }
    .menu { display: grid; }
    .nav { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--gutter) 1.25rem; background: var(--paper); border-bottom: 1px solid var(--line); }
    .nav a:not(.btn) { padding: .9rem 0; border-bottom: 1px solid var(--line); }
    .nav .btn { display: none; }
    .top.open .nav { display: flex; }
  }
  @media (min-width: 961px) { .head-actions { display: none; } }

  /* hero */
  .hero { background: var(--paper); border-radius: 0 0 var(--r-xl) var(--r-xl); padding-block: clamp(1.5rem, 3vw, 2.5rem) 0; overflow: hidden; }
  .hero .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 7vw, 7rem); min-height: clamp(720px, calc(100svh - 84px - 2.5rem), 900px); }
  .hero-copy { align-self: center; padding-bottom: clamp(3rem, 5vw, 4.5rem); position: relative; z-index: 3; }
  .hero h1 { font-size: clamp(2.75rem, 4.7vw, 4.25rem); }
  .hero .intro { color: var(--ink); max-width: 31rem; margin-top: 1.5rem; }
  .ask { margin-top: 2rem; background: var(--white); border-radius: var(--r-md); padding: clamp(1.25rem, 2.5vw, 1.75rem); box-shadow: var(--shadow-card); max-width: 34rem; }
  .field { display: block; font-weight: 600; font-size: .98rem; margin-bottom: .45rem; }
  .ask input[type=email], .ask textarea, .inline input { font: inherit; color: var(--ink); }
  .ask input[type=email], .ask textarea { display: block; width: 100%; min-height: 54px; padding: .8rem 1rem; margin-bottom: 1.1rem; background: var(--paper); border: 1.5px solid var(--paper); border-radius: var(--r-sm); transition: border-color .2s, background-color .2s; }
  .ask textarea { min-height: 7.5rem; resize: vertical; }
  .ask input::placeholder, .ask textarea::placeholder, .inline input::placeholder { color: #5E6A61; }
  .ask input:focus, .ask textarea:focus { outline: none; border-color: var(--green); background: var(--white); }
  .ask input[aria-invalid="true"], .ask textarea[aria-invalid="true"] { border-color: #A23B2A; }
  .ask-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
  .agree { display: flex; align-items: center; gap: .6rem; font-size: .98rem; color: var(--muted); cursor: pointer; min-height: 44px; }
  .agree input { width: 20px; height: 20px; margin: 0; }
  .form-msg { margin: .9rem 0 0; font-size: .95rem; font-weight: 600; color: #A23B2A; }
  .form-msg:empty { display: none; }
  .terms { margin-top: 1rem; font-size: .88rem; color: var(--muted); line-height: 1.55; }
  .terms summary { display: inline-flex; align-items: center; gap: .35rem; min-height: 32px; cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; }
  .terms summary::-webkit-details-marker { display: none; }
  .terms summary svg, .more-creds summary svg { width: 14px; height: 14px; transition: transform .25s var(--ease-out); }
  .terms[open] summary svg, .more-creds[open] summary svg { transform: rotate(180deg); }
  .terms p { margin: .4rem 0 0; }
  .done { padding: 1rem .25rem; }
  .done h3 { margin-bottom: .4rem; }
  .done p { margin: 0; color: var(--muted); }

  /* hero stage: Dr. Ted at full height in front of the brand emblem */
  .hero-stage { position: relative; }
  .disc { position: absolute; left: 50%; top: 9%; width: min(96%, 640px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: var(--sage); }
  .disc img { position: absolute; inset: 5.5%; width: 89%; height: 89%; }
  .hero-stage .person { position: absolute; bottom: 0; left: 50%; height: 100%; width: auto; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 18px 24px rgba(29, 42, 36, .12)); animation: rise 1s var(--ease-out) both; }
  @keyframes rise { from { translate: 0 30px; } }
  .badge { position: absolute; z-index: 2; display: flex; align-items: center; gap: .75rem; padding: .85rem 1.2rem .85rem .85rem; background: var(--white); border-radius: var(--r-sm); box-shadow: 0 1px 2px rgba(29, 42, 36, .06), 0 18px 36px -14px rgba(29, 42, 36, .4); line-height: 1.3; font-size: .95rem; white-space: nowrap; }
  .badge b { display: block; font-size: 1.02rem; }
  .badge i { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--green); }
  .badge .ico { width: 34px; height: 34px; }
  .badge.b1 { left: 0; bottom: 13%; }
  .badge.b2 { right: 0; bottom: 33%; }
  .badge.b3 { left: 0; top: 40%; }
  @media (max-width: 1100px) { .badge.b1, .badge.b3 { left: -1rem; } .badge.b2 { right: -1rem; } }
  @media (max-width: 900px) {
    .hero .wrap { grid-template-columns: 1fr; gap: 0; min-height: 0; }
    .hero-stage { order: -1; height: clamp(420px, 118vw, 560px); overflow: hidden; margin-inline: calc(-1 * var(--gutter)); }
    .disc { width: min(92%, 480px); top: 12%; }
    .hero-copy { padding-top: 2rem; }
    .badge { font-size: .86rem; padding: .6rem .9rem .6rem .6rem; }
    .badge b { font-size: .95rem; }
    .badge i { width: 38px; height: 38px; }
    .badge .ico { width: 28px; height: 28px; }
    .badge.b1 { left: var(--gutter); bottom: 9%; }
    .badge.b2 { right: var(--gutter); bottom: 27%; }
    .badge.b3 { left: var(--gutter); top: 44%; }
  }
  @media (max-width: 480px) { .badge.b2 { display: none; } }

  /* meet Dr. Ted */
  .meet .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
  .portrait { position: relative; aspect-ratio: 4 / 4.1; margin-top: 6rem; }
  .portrait .bg { position: absolute; inset: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--sage); }
  .portrait .bg img { position: absolute; width: 120%; max-width: none; right: -46%; top: -14%; opacity: .8; }
  .portrait .person { position: absolute; bottom: 0; left: 50%; height: 130%; width: auto; max-width: none; transform: translateX(-50%); }
  .creds { list-style: none; padding: 0; margin: var(--content-gap) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 2.25rem; }
  .creds li { border-top: 2px solid var(--sage); padding-top: 1rem; }
  .creds b { display: block; font-size: 1.15rem; margin-bottom: .15rem; }
  .creds span { color: var(--muted); font-size: 1rem; }
  .more-creds { margin-top: 2rem; }
  .more-creds summary { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--green); list-style: none; }
  .more-creds summary::-webkit-details-marker { display: none; }
  .more-creds ul { margin: .75rem 0 0; padding-left: 1.15rem; color: var(--muted); columns: 2; column-gap: 2.25rem; font-size: 1rem; }
  .more-creds li { break-inside: avoid; margin-bottom: .45rem; }
  @media (max-width: 860px) {
    .meet .wrap { grid-template-columns: 1fr; }
    .portrait { aspect-ratio: 1 / .92; max-width: 480px; width: 100%; margin-top: 5rem; }
    .portrait .person { height: 128%; }
    .more-creds ul { columns: 1; }
  }
  @media (max-width: 520px) { .creds { grid-template-columns: 1fr; gap: 1.1rem; } }

  /* topics */
  .tinted { background: var(--paper); border-radius: var(--r-xl); }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: var(--content-gap) 0 0; padding: 0; list-style: none; }
  .topic { display: grid; grid-template-columns: 76px 1fr; gap: 1.25rem; align-items: center; height: 100%; padding: 1.5rem 1.6rem; background: var(--white); border: 1.5px solid transparent; border-radius: var(--r-md); text-decoration: none; transition: border-color .2s, box-shadow .3s var(--ease-out), transform .3s var(--ease-out); }
  .topic:hover { border-color: var(--green); box-shadow: var(--shadow-card); transform: translateY(-3px); }
  .ico { display: block; color: var(--green); }
  .ia, .ia.il { fill: #CBDDC1; }
  .iw, .iw.il { fill: var(--white); }
  .id { fill: currentColor; }
  .il { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
  .ia.il, .iw.il { stroke: currentColor; }
  .it { fill: none; stroke: #CBDDC1; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
  .topic .ico { width: 76px; height: 76px; padding: 11px; background: var(--paper); border-radius: 50%; overflow: visible; }
  .topic p { margin: .3rem 0 0; color: var(--muted); font-size: 1rem; line-height: 1.45; }
  @media (max-width: 960px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 620px) {
    .grid-3 { grid-template-columns: 1fr; gap: .85rem; }
    .topic { grid-template-columns: 58px 1fr; gap: 1rem; padding: 1.15rem 1.25rem; }
    .topic .ico { width: 58px; height: 58px; padding: 10px; }
  }

  /* Chef Savi */
  .chef .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
  .chef .body { color: var(--muted); max-width: 33rem; margin: 1.25rem 0 2rem; }
  .plate-stage { position: relative; width: min(100%, 460px); aspect-ratio: 1 / 1.08; justify-self: center; }
  .plate { position: absolute; left: 0; right: 0; bottom: 6%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--white) 0 56%, #FBFAF5 57% 60%, var(--sage-tint) 61% 100%); box-shadow: 0 2px 0 rgba(255, 255, 255, .9) inset, 0 -10px 30px rgba(29, 42, 36, .05) inset, 0 40px 60px -30px rgba(29, 42, 36, .38), 0 10px 20px -10px rgba(29, 42, 36, .18); }
  .plate::after { content: ""; position: absolute; inset: 19.5%; border-radius: 50%; box-shadow: 0 6px 18px rgba(29, 42, 36, .08) inset; }
  .plate-stage .person { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%); }
  @media (max-width: 860px) {
    .chef .wrap { grid-template-columns: 1fr; }
    .plate-stage { order: -1; width: min(86%, 380px); }
  }

  /* courses */
  .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin: var(--content-gap) 0 0; padding: 0; list-style: none; }
  .course { display: flex; flex-direction: column; height: 100%; padding: 1.75rem 1.5rem 1.5rem; background: var(--white); border-radius: var(--r-md); }
  .course .ico { width: 76px; height: 76px; padding: 11px; margin-bottom: 1.25rem; background: var(--paper); border-radius: 50%; overflow: visible; }
  .course p { flex: 1; margin: .5rem 0 1.5rem; color: var(--muted); font-size: 1rem; }
  .course .btn { min-height: 48px; font-size: 1rem; }
  @media (max-width: 1040px) { .grid-4 { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 580px) { .grid-4 { grid-template-columns: 1fr; } }

  /* testimonials */
  .quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: var(--content-gap) 0 0; padding: 0; list-style: none; }
  .quote { display: flex; flex-direction: column; height: 100%; margin: 0; padding: 2rem; background: var(--sage-tint); border-radius: var(--r-md); }
  .stars { display: flex; gap: .25rem; margin-bottom: 1.1rem; color: var(--green); }
  .stars svg { width: 18px; height: 18px; }
  .quote blockquote { flex: 1; margin: 0 0 1.75rem; font-size: 1.06rem; line-height: 1.6; }
  .who { display: flex; align-items: center; gap: .85rem; }
  .who i { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--white); color: var(--green); font-style: normal; font-weight: 700; }
  .who b { display: block; line-height: 1.25; }
  .who span span { font-size: .95rem; color: var(--on-sage-muted); }
  @media (max-width: 920px) { .quotes { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

  /* blog */
  .posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; margin: var(--content-gap) 0 0; padding: 0; list-style: none; }
  .post { display: block; text-decoration: none; }
  .post figure { margin: 0; overflow: hidden; border-radius: 20px; }
  .post img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .5s var(--ease-out); }
  .post:hover img { transform: scale(1.03); }
  .post h3 { margin: 1.15rem 0 .5rem; font-size: 1.25rem; transition: color .2s; }
  .post:hover h3 { color: var(--green); }
  .post p { margin: 0 0 .85rem; color: var(--muted); font-size: 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .post .text-link { text-decoration: underline; text-decoration-thickness: 2px; }
  .blog .cta { margin-top: var(--content-gap); text-align: center; }
  @media (max-width: 920px) { .posts { grid-template-columns: 1fr; gap: 2.5rem; max-width: 560px; margin-inline: auto; } }

  /* newsletter */
  .news { padding-top: clamp(12rem, 24vw, 20rem); }
  .news-card { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; gap: 2rem; min-height: 420px; }
  .news-card .bg { position: absolute; inset: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--sage); }
  .news-card .bg img { position: absolute; width: 560px; max-width: none; right: -150px; bottom: -190px; opacity: .75; }
  .news-art { position: relative; }
  .news-art img { position: absolute; bottom: 0; left: 50%; width: min(112%, 500px); max-width: none; transform: translateX(-50%); }
  .news-copy { position: relative; }
  @media (min-width: 861px) and (max-width: 1140px) { .news-art img { width: min(100%, 430px); } }
  .news-copy { padding: clamp(2.75rem, 4.5vw, 3.75rem) clamp(1.5rem, 5vw, 4.5rem) clamp(3rem, 5vw, 4.25rem) 0; }
  .news-copy .intro { color: var(--on-sage-muted); }
  .inline { display: flex; gap: .5rem; max-width: 31rem; margin-top: 2rem; padding: .4rem; background: var(--white); border-radius: 999px; box-shadow: 0 10px 28px -16px rgba(29, 42, 36, .4); }
  .inline input { flex: 1; min-width: 0; padding: 0 1.1rem; border: 0; background: transparent; }
  .inline input:focus { outline: none; }
  .inline:focus-within { box-shadow: 0 0 0 3px var(--green); }
  .inline .btn { min-height: 50px; }
  .inline-done { margin: 1.5rem 0 0; font-weight: 700; color: var(--green); }
  @media (max-width: 860px) {
    .news { padding-top: 12rem; }
    .news-card { grid-template-columns: 1fr; gap: 0; }
    .news-art { height: 300px; }
    .news-art img { width: 330px; transform: translateX(-50%); }
    .news-copy { padding: 2rem 1.5rem 2.25rem; }
    /* phones: Dr. Ted stands under the form and points up at it (as on the live site), cut off by the card's bottom edge */
    .news:has(.news-art.ted) { padding-top: var(--section); }
    .news-art.ted { order: 2; height: 290px; overflow: hidden; border-radius: 0 0 var(--r-lg) var(--r-lg); }
    .news-art.ted img { top: 0; bottom: auto; width: 250px; }
  }
  @media (max-width: 440px) { .inline { flex-direction: column; border-radius: var(--r-md); padding: .5rem; } .inline input { min-height: 50px; } }

  /* footer */
  footer { margin-top: var(--section); padding-block: 4.5rem 2rem; background: var(--green); color: var(--on-green); border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .foot { display: grid; grid-template-columns: 1.2fr 1fr 1.5fr; gap: 3rem; }
  footer .logo { width: 190px; }
  footer h3 { font-size: 1.1rem; margin-bottom: 1.1rem; }
  footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
  footer ul a { text-decoration: none; }
  footer ul a:hover { text-decoration: underline; }
  footer p { margin: 0; color: var(--on-green-muted); }
  footer .inline { margin-top: 1.25rem; box-shadow: none; }
  footer .inline:focus-within { box-shadow: 0 0 0 3px var(--sage); }
  footer :focus-visible { outline-color: var(--sage); }
  .social { display: flex; gap: .65rem; margin-top: 1.75rem; }
  .social a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--on-green); color: var(--green); transition: background-color .2s; }
  .social a:hover { background: var(--sage); }
  .social svg { width: 19px; height: 19px; }
  .fine { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(241, 245, 238, .2); font-size: .9rem; }
  .fine p { max-width: 54rem; }
  .fine a { color: var(--on-green); }
  @media (max-width: 860px) { .foot { grid-template-columns: 1fr; gap: 2.5rem; } }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before { animation: none !important; transition: none !important; }
  }

/* ===================== Inner pages ===================== */

.nav a[aria-current="page"] { color: var(--green); font-weight: 700; }
.nav a.btn[aria-current="page"] { color: var(--on-green); }   /* the Ask Dr. Ted button on its own page */

/* page header band */
.page-hero { background: var(--paper); border-radius: 0 0 var(--r-xl) var(--r-xl); padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3.5rem, 6vw, 5.5rem); }
.page-hero.center { text-align: center; }
.page-hero.center .intro { margin-inline: auto; }
.page-hero h1 { font-size: clamp(2.5rem, 5vw, 4.25rem); }
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; font-size: .98rem; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: #A8B3AA; }
.crumbs a { color: var(--green); font-weight: 600; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.page-hero.center .crumbs { justify-content: center; }


/* ---------- article ---------- */
.progress { position: fixed; inset: 0 0 auto 0; z-index: 60; height: 4px; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--green); transform: scaleX(0); transform-origin: left; }
.article-hero { padding-bottom: clamp(9rem, 16vw, 13rem); }
.article-hero .wrap { max-width: 900px; text-align: center; }
.article-hero .crumbs { justify-content: center; }
.article-hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.8rem); line-height: 1.06; }
.article-hero .dek { margin: 1.25rem auto 0; max-width: 44rem; font-size: clamp(1.125rem, 1.5vw, 1.3rem); color: var(--muted); text-wrap: pretty; }
.byline { display: inline-flex; align-items: center; gap: .9rem; margin-top: 2rem; text-align: left; }
.byline .avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--sage); flex: none; }
.byline .avatar img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); transform-origin: 50% 32%; }
.byline b { display: block; line-height: 1.3; }
.byline span { font-size: .95rem; color: var(--muted); }
.article-figure { margin: calc(-1 * clamp(7rem, 13vw, 10.5rem)) auto 0; padding-inline: var(--gutter); max-width: calc(860px + 2 * var(--gutter)); }
.article-figure img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.article-body { padding-block: clamp(3.5rem, 7vw, 5.5rem) var(--section); }
.article-body .wrap { display: grid; grid-template-columns: 220px minmax(0, 48rem); justify-content: center; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }

.toc { position: sticky; top: 108px; max-height: calc(100vh - 140px); overflow: auto; padding-right: .5rem; }
.toc h2, .toc summary { font-size: 1rem; font-weight: 700; letter-spacing: 0; margin: 0 0 1rem; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: grid; grid-template-columns: 1.7rem 1fr; padding: .4rem .5rem .4rem 0; font-size: .95rem; line-height: 1.4; color: var(--muted); text-decoration: none; border-radius: 10px; }
.toc a::before { content: counter(toc); font-weight: 700; font-size: .85rem; color: #7F8D83; padding-top: .1rem; }
.toc a:hover { color: var(--ink); }
.toc a[aria-current] { color: var(--green); font-weight: 700; }
.toc a[aria-current]::before { color: var(--green); }

.prose { font-size: 1.1875rem; line-height: 1.75; }
.prose > p:first-child { font-size: 1.3rem; line-height: 1.65; }
.prose p { margin: 0 0 1.25em; }
.prose h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.18; margin: 2.6em 0 .7em; scroll-margin-top: 110px; }
.prose h2 .n { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; margin-right: .5em; vertical-align: .12em; font-size: .72em; color: var(--green); background: var(--sage-tint); border-radius: 50%; }
.prose h3 { font-size: 1.32rem; margin: 2em 0 .5em; }
.prose ul, .prose ol { margin: 0 0 1.4em; padding-left: 1.3em; }
.prose li { margin: .45em 0; padding-left: .2em; }
.prose li::marker { color: var(--green); }
.prose strong { font-weight: 700; }
.prose a { color: var(--green); font-weight: 600; text-decoration-thickness: 2px; }
.prose ul.checks { list-style: none; padding: 1.6rem 1.75rem; background: var(--sage-tint); border-radius: var(--r-md); }
.prose ul.checks li { position: relative; padding-left: 2.1rem; margin: .6em 0; }
.prose ul.checks li::before { content: ""; position: absolute; left: 0; top: .3em; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23F1F5EE' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 85% no-repeat; }

.author { display: grid; grid-template-columns: 150px 1fr; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center; margin-top: 4rem; padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--paper); border-radius: var(--r-lg); }
.author .face { width: 150px; height: 150px; border-radius: 50%; overflow: hidden; background: var(--sage); }
.author .face img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); transform-origin: 50% 32%; }
.author h2 { font-size: 1.7rem; margin: 0 0 .5rem; }
.author p { margin: 0 0 1.25rem; color: var(--muted); font-size: 1.05rem; }
.author .actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.author .btn { min-height: 48px; padding: 0 1.4rem; font-size: 1rem; }
.note { display: flex; gap: .75rem; margin-top: 2rem; font-size: .92rem; color: var(--muted); line-height: 1.55; }
.note svg { flex: none; width: 20px; height: 20px; color: var(--green); margin-top: .1rem; }
.related { padding-top: var(--section); }
/* one spacing rule: every section gets the same top and bottom space; the newsletter band brings its own top space (room for Dr. Ted's head), so the section before it ends without bottom padding */
main > section:has(+ section.news) { padding-bottom: 0; }
section.news { padding-bottom: 0; }

.toc details summary { display: none; }
@media (min-width: 981px) { .toc details { display: contents; } }
@media (max-width: 980px) {
  .article-body .wrap { grid-template-columns: minmax(0, 48rem); }
  .toc { position: static; max-height: none; overflow: visible; padding: 0; }
  .toc > h2 { display: none; }
  .toc details { background: var(--paper); border-radius: var(--r-md); padding: .25rem 1.25rem; }
  .toc details summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; margin: 0; cursor: pointer; list-style: none; }
  .toc details summary::-webkit-details-marker { display: none; }
  .toc details summary svg { width: 14px; height: 14px; transition: transform .25s var(--ease-out); }
  .toc details[open] summary svg { transform: rotate(180deg); }
  .toc details ol { padding-bottom: 1rem; }
}
@media (max-width: 600px) {
  .byline { display: grid; grid-template-columns: 56px auto; column-gap: .9rem; row-gap: .2rem; }
  .byline > span:last-child { grid-column: 2; }
  .byline > span:last-child b, .byline > span:last-child span { display: inline; font-weight: 500; font-size: .95rem; color: var(--muted); }
  .byline > span:last-child b::after { content: ", "; }
  .prose { font-size: 1.125rem; }
  .prose > p:first-child { font-size: 1.2rem; }
  .author { grid-template-columns: 1fr; }
  .author .face { width: 110px; height: 110px; }
}

/* ---------- blog listing ---------- */
.filters { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; padding: 0; list-style: none; }
.filters button { white-space: nowrap; min-height: 44px; padding: 0 1.15rem; font: 600 1rem "Kumbh Sans", sans-serif; color: var(--ink); background: var(--white); border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.filters button:hover { border-color: var(--green); }
.filters button[aria-pressed="true"] { color: var(--on-green); background: var(--green); border-color: var(--green); }
.listing { padding-top: clamp(3.5rem, 7vw, 5.5rem); }
.feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; text-decoration: none; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.feature[hidden], .listing li[hidden] { display: none; }
.feature figure { margin: 0; overflow: hidden; border-radius: var(--r-lg); }
.feature img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .5s var(--ease-out); }
.feature:hover img { transform: scale(1.03); }
.feature h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); margin: 1rem 0 .75rem; transition: color .2s; }
.feature:hover h2 { color: var(--green); }
.feature p { margin: 0 0 1.25rem; color: var(--muted); font-size: 1.1rem; }
.listing .posts { margin-top: 0; row-gap: 3rem; }
.listing-empty { text-align: center; padding: 3rem 1rem; background: var(--paper); border-radius: var(--r-lg); }
.listing-empty[hidden] { display: none; }
.listing-empty h2 { font-size: 1.5rem; margin-bottom: .5rem; }
.listing-empty p { margin: 0 0 1.5rem; color: var(--muted); }
.pager { display: flex; justify-content: center; align-items: center; gap: .5rem; margin-top: clamp(3rem, 6vw, 4.5rem); padding: 0; list-style: none; }
.pager a { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 .9rem; font-weight: 700; color: var(--ink); text-decoration: none; border-radius: 999px; border: 1.5px solid var(--line); }
.pager a:hover { border-color: var(--green); color: var(--green); }
.pager a[aria-current] { color: var(--on-green); background: var(--green); border-color: var(--green); }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; } }

/* ---------- symptom hub ---------- */
.hub-hero { overflow: hidden; padding-bottom: 0; }
.hub-hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 6vw, 5rem); align-items: end; }
.hub-hero .copy { align-self: center; padding-bottom: clamp(3rem, 6vw, 5rem); }
.hub-hero .big-ico { width: 92px; height: 92px; padding: 14px; margin-bottom: 1.5rem; background: var(--white); border-radius: 50%; color: var(--green); box-shadow: var(--shadow-card); }
.hub-hero .intro { color: var(--ink); max-width: 34rem; }
.jump { display: flex; flex-wrap: wrap; gap: .6rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.jump a { display: inline-flex; align-items: center; min-height: 46px; padding: 0 1.2rem; font-weight: 600; color: var(--ink); text-decoration: none; background: var(--white); border-radius: 999px; box-shadow: 0 1px 2px rgba(29, 42, 36, .06); transition: background-color .2s, color .2s; }
.jump a:hover { background: var(--green); color: var(--on-green); }
.hub-stage { position: relative; height: clamp(520px, 54vw, 700px); }
.hub-stage .disc { top: 24%; width: min(78%, 400px); }
.hub-stage .person { position: absolute; bottom: 0; left: 50%; height: 100%; width: auto; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 18px 24px rgba(29, 42, 36, .12)); }
@media (max-width: 900px) {
  .hub-hero .wrap { grid-template-columns: 1fr; gap: 0; }
  .hub-hero .copy { padding-bottom: 1.5rem; }
  .hub-stage { height: clamp(440px, 118vw, 560px); margin-inline: calc(-1 * var(--gutter)); overflow: hidden; }
  .hub-stage .disc { width: min(66%, 320px); top: 26%; }
}

.guide { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.guide figure { margin: 0; }
.guide img { width: 100%; border-radius: var(--r-lg); background: var(--paper); }
.guide h2 { margin-bottom: .75rem; }
.guide .meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: 0 0 1.25rem; color: var(--muted); font-size: 1rem; }
.chapters { columns: 2; column-gap: 2rem; margin: 1.5rem 0 2rem; padding: 0; list-style: none; counter-reset: ch; }
.chapters li { counter-increment: ch; break-inside: avoid; display: grid; grid-template-columns: 1.6rem 1fr; padding: .4rem 0; font-size: 1rem; line-height: 1.4; }
.chapters li::before { content: counter(ch); font-weight: 700; font-size: .88rem; color: var(--green); padding-top: .08rem; }
@media (max-width: 860px) { .guide { grid-template-columns: 1fr; } .chapters { columns: 1; } }

.soon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: var(--content-gap); }
.soon-card { display: grid; grid-template-columns: 76px 1fr; gap: 1.25rem; align-items: start; padding: clamp(1.5rem, 3vw, 2rem); background: var(--white); border-radius: var(--r-md); }
.soon-card .ico { width: 76px; height: 76px; padding: 11px; background: var(--paper); border-radius: 50%; }
.soon-card h3 { margin-bottom: .4rem; }
.soon-card p { margin: 0 0 1.1rem; color: var(--muted); font-size: 1rem; }
.soon-card .links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
@media (max-width: 760px) { .soon-grid { grid-template-columns: 1fr; } .soon-card { grid-template-columns: 1fr; } }

/* ===================== Tags, status labels ===================== */
/* topics on a card: a drawn tag icon, then the topic names */
.tags { display: inline-flex; align-items: flex-start; gap: .45rem; font-size: .92rem; font-weight: 600; line-height: 1.4; color: var(--green); }
.tags svg { flex: none; width: 17px; height: 17px; margin-top: .05rem; }
.post .tags { margin-top: 1.15rem; }
.post .tags + h3 { margin-top: .45rem; }
.feature .tags { display: flex; margin: -.25rem 0 1.25rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* status: what state something is in (coming soon, newest...) */
.status { display: inline-flex; align-items: center; gap: .45rem; font-size: .92rem; font-weight: 600; line-height: 1.3; color: var(--muted); }
.status svg { flex: none; width: 17px; height: 17px; color: var(--green); }
.course .status { margin-bottom: .7rem; }
.soon-card .status { margin-bottom: .6rem; }

/* ===================== Blog topics that can grow ===================== */
.topics { position: relative; max-width: 960px; margin: 2.25rem auto 0; }
.topics-bar { display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; }
.topics-bar .filters { margin: 0; }
.filters li.chosen button { padding-right: .55rem; display: inline-flex; align-items: center; gap: .4rem; }
.filters li.chosen svg { width: 18px; height: 18px; opacity: .8; }
.more-topics { order: 2; display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 1.1rem; font: 700 1rem "Kumbh Sans", sans-serif; color: var(--green); background: transparent; border: 1.5px dashed #9DB59A; border-radius: 999px; cursor: pointer; transition: border-color .2s, background-color .2s; }
.more-topics:hover { border-color: var(--green); background: var(--white); }
.more-topics svg { width: 14px; height: 14px; transition: transform .3s var(--ease-out); }
.more-topics[aria-expanded="true"] svg { transform: rotate(180deg); }
.topics-panel { position: absolute; left: 0; right: 0; top: calc(100% + .75rem); z-index: 30; padding: 1.5rem; text-align: left; background: var(--white); border-radius: var(--r-md); box-shadow: 0 1px 2px rgba(29, 42, 36, .06), 0 30px 60px -25px rgba(29, 42, 36, .4); transform-origin: top center; animation: panel-in .35s var(--ease-out); }
.topics-panel[hidden] { display: none; }
@keyframes panel-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.topics-panel .find { display: flex; align-items: center; gap: .6rem; padding: 0 1rem; min-height: 50px; background: var(--paper); border-radius: var(--r-sm); border: 1.5px solid transparent; }
.topics-panel .find:focus-within { border-color: var(--green); background: var(--white); }
.topics-panel .find svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.topics-panel .find input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--ink); }
.topics-panel .find input:focus { outline: none; }
.topics-panel ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .25rem 1rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.topics-panel li[hidden] { display: none; }
.topics-panel button { width: 100%; min-height: 44px; padding: 0 .75rem; text-align: left; font: 500 1rem "Kumbh Sans", sans-serif; color: var(--ink); background: transparent; border: 0; border-radius: 10px; cursor: pointer; }
.topics-panel button:hover { background: var(--sage-tint); }
.topics-panel button[aria-pressed="true"] { font-weight: 700; color: var(--green); background: var(--sage-tint); }
.topics-panel .none { margin: 1rem 0 0; color: var(--muted); }
@media (max-width: 700px) {
  .topics-bar { flex-wrap: nowrap; justify-content: flex-start; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .more-topics { order: -1; flex: none; }
  .topics-bar .filters { flex: 1; min-width: 0; flex-wrap: nowrap; justify-content: flex-start; margin: 0; padding: 0 0 .5rem; overflow-x: auto; scrollbar-width: none; }
  .topics-bar .filters::-webkit-scrollbar { display: none; }
  .more-topics { margin-bottom: .5rem; }
  .topics-panel { position: fixed; inset: auto 0 0 0; top: auto; max-height: 75vh; overflow: auto; border-radius: var(--r-lg) var(--r-lg) 0 0; animation-name: sheet-in; }
  @keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } }
}

/* ===================== Article contents: three layouts ===================== */
/* 1. side (default, set above): wider reading column, slimmer list */
.toc-tab, .toc-close, .toc-scrim { display: none; }

/* 2. drawer: tucked into the left edge, slides out */
html[data-toc="drawer"] .article-body .wrap { grid-template-columns: minmax(0, 48rem); }
html[data-toc="drawer"] .toc { position: fixed; top: 100px; bottom: 24px; left: 0; z-index: 70; width: min(340px, 86vw); max-height: none; overflow: auto; padding: 1.75rem 1.5rem 1.75rem 1.75rem; background: var(--white); border-radius: 0 var(--r-lg) var(--r-lg) 0; box-shadow: 0 0 0 1px var(--line), 30px 0 60px -30px rgba(29, 42, 36, .45); transform: translateX(-104%); transition: transform .55s var(--ease-out); }
html[data-toc="drawer"].toc-open .toc { transform: none; }
html[data-toc="drawer"].toc-peek .toc { transform: none; }
html[data-toc="drawer"] .toc > h2 { display: block; padding-right: 2.5rem; }
html[data-toc="drawer"] .toc details { display: contents; background: none; padding: 0; }
html[data-toc="drawer"] .toc details summary { display: none; }
html[data-toc="drawer"] .toc-close { display: grid; place-items: center; position: absolute; top: 1.1rem; right: 1rem; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; }
html[data-toc="drawer"] .toc-close svg { width: 16px; height: 16px; }
html[data-toc="drawer"] .toc-tab { display: flex; position: fixed; left: 0; top: 50%; z-index: 69; align-items: center; gap: .6rem; padding: 1.2rem .75rem; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); font: 700 .98rem "Kumbh Sans", sans-serif; color: var(--on-green); background: var(--green); border: 0; border-radius: 14px 0 0 14px; box-shadow: 0 10px 30px -12px rgba(29, 42, 36, .6); cursor: pointer; transition: opacity .3s, padding .3s var(--ease-out); }
html[data-toc="drawer"] .toc-tab:hover { padding-right: 1.1rem; }
html[data-toc="drawer"] .toc-tab svg { width: 18px; height: 18px; transform: rotate(90deg); }
html[data-toc="drawer"] .toc-tab .count { font-weight: 600; opacity: .8; }
html[data-toc="drawer"].toc-open .toc-tab { opacity: 0; pointer-events: none; }
html[data-toc="drawer"] .toc-scrim { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(29, 42, 36, .22); opacity: 0; pointer-events: none; transition: opacity .4s; }
html[data-toc="drawer"].toc-open .toc-scrim { opacity: 1; pointer-events: auto; }

@media (max-width: 760px) {
  html[data-toc="drawer"] .toc-tab { top: auto; bottom: 1.25rem; left: .75rem; writing-mode: horizontal-tb; transform: none; padding: .8rem 1.1rem; border-radius: 999px; }
  html[data-toc="drawer"] .toc-tab:hover { padding-right: 1.1rem; }
  html[data-toc="drawer"] .toc-tab svg { transform: none; }
  html[data-toc="drawer"] .toc { top: 80px; bottom: 16px; }
}

/* multi-select topics */
.panel-hint { margin: 0 0 .75rem; font-size: .95rem; color: var(--muted); }
.topics-panel button { display: flex; align-items: center; gap: .65rem; }
.topics-panel button::before { content: ""; flex: none; width: 19px; height: 19px; border: 1.5px solid #9DB59A; border-radius: 6px; background: var(--white) center / 80% no-repeat; transition: background-color .15s, border-color .15s; }
.topics-panel button[aria-pressed="true"]::before { border-color: var(--green); background-color: var(--green); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23F1F5EE' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.panel-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.topics-panel .panel-foot .btn { width: auto; min-height: 46px; padding: 0 1.4rem; font-weight: 700; color: var(--on-green); background: var(--green); border-radius: 999px; }
.topics-panel .panel-foot .btn::before, .topics-panel .panel-foot .text-btn::before { display: none; }
.topics-panel .panel-foot .text-btn { width: auto; }
.text-btn { padding: .5rem 0; font: 700 1rem "Kumbh Sans", sans-serif; color: var(--green); background: none; border: 0; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .22em; cursor: pointer; }
.text-btn:hover { color: var(--green-hover); }
.results { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin: 0 0 2.5rem; font-size: 1.1rem; }
.results[hidden] { display: none; }
.results b { font-weight: 700; }
.more-topics .n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 .35rem; font-size: .8rem; color: var(--on-green); background: var(--green); border-radius: 999px; }
.more-topics .n:empty { display: none; }
@media (max-width: 700px) {
  .topics-panel { padding-bottom: 0; }
  .panel-foot { position: sticky; bottom: 0; margin-inline: -1.5rem; padding: 1rem 1.5rem 1.25rem; background: var(--white); }
}

/* ===================== About ===================== */
.about-hero { padding-bottom: clamp(4rem, 7vw, 6rem); }
.about-hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.about-hero h1 { font-size: clamp(2.6rem, 5vw, 4.25rem); }
.about-hero .sub { margin: 1rem 0 1.75rem; font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-weight: 600; color: var(--green); text-wrap: balance; }
.about-hero p { margin: 0 0 1.1rem; max-width: 34rem; }
.photo { position: relative; margin: 0; }
.photo img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; object-position: 50% 30%; border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.photo .badge { position: absolute; left: -1.5rem; bottom: 2rem; }
@media (max-width: 900px) {
  .about-hero .wrap { grid-template-columns: 1fr; }
  .photo { max-width: 520px; }
  .photo .badge { left: 1rem; bottom: 1rem; }
}

/* the quote: the page's one big moment */
.quote-band { padding-block: clamp(5rem, 10vw, 8rem); background: var(--sage); border-radius: var(--r-xl); overflow: hidden; position: relative; }
.quote-band .emblem { position: absolute; width: 560px; right: -300px; top: 50%; transform: translateY(-50%); opacity: .6; }
@media (max-width: 900px) { .quote-band .emblem { display: none; } }
.quote-band figure { position: relative; margin: 0 auto; max-width: 980px; text-align: center; }
.quote-band blockquote { margin: 0; font-size: clamp(2.1rem, 4.6vw, 3.9rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.quote-band figcaption { display: inline-flex; align-items: center; gap: .9rem; margin-top: 2rem; font-weight: 600; color: var(--on-sage-muted); }
.quote-band figcaption .face { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--white); }
.quote-band figcaption .face img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); transform-origin: 50% 32%; }
.quote-band .after { margin: 2.5rem auto 0; max-width: 38rem; font-size: 1.2rem; color: var(--ink); }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.pair > div { padding: clamp(2rem, 4vw, 3rem); background: var(--paper); border-radius: var(--r-lg); }
.pair h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); margin-bottom: 1rem; }
.pair p { margin: 0; font-size: 1.15rem; }
@media (max-width: 760px) { .pair { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
.split .side { position: sticky; top: 120px; }
.split .side img { width: 100%; max-width: 380px; margin-top: 2rem; border-radius: var(--r-lg); }
.split .side .intro { margin-top: 1rem; }
.story p { margin: 0 0 1.2rem; font-size: 1.15rem; }
.story p.lead { font-size: clamp(1.35rem, 2.2vw, 1.7rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; color: var(--ink); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split .side { position: static; } }
.ticks { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 2rem; margin: 1.5rem 0; padding: 0; list-style: none; }
.ticks li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .5rem; align-items: start; font-weight: 600; }
.ticks li::before { content: ""; width: 1.35rem; height: 1.35rem; margin-top: .15rem; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23F1F5EE' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 85% no-repeat; }
@media (max-width: 600px) { .ticks { grid-template-columns: 1fr; } }

.story .promise { margin: 2rem 0 0; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
.story .promise span { display: block; }
.story .promise span:last-child { margin-top: .5rem; line-height: 1.5; font-size: 1.15rem; font-weight: 600; letter-spacing: 0; color: var(--muted); }


/* ===================== Ask Dr. Ted ===================== */
.ask-page { overflow: hidden; padding-bottom: 0; }
.ask-page .wrap { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(1.5rem, 4vw, 3.5rem); min-height: clamp(700px, calc(100svh - 84px - 2.5rem), 860px); }
.ask-page .hero-stage { order: -1; }
/* the figure box is the trimmed photo; the disc is centered on his body (33.5% across), not on the image */
.ask-stage .figure { position: absolute; bottom: 0; left: 50%; height: 97%; aspect-ratio: 785 / 986; transform: translateX(-40%); }
.ask-stage .disc { position: absolute; left: 33.5%; top: 40%; width: 96%; transform: translate(-50%, -50%); }
.ask-stage .person { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; transform: none; animation: none; filter: drop-shadow(0 18px 24px rgba(29, 42, 36, .12)); }
.ask-page .hero-copy { align-self: end; padding: clamp(5rem, 9vw, 8rem) 0 clamp(3.5rem, 6vw, 5rem); position: relative; z-index: 3; }
.ask-page h1 { font-size: clamp(2.75rem, 5vw, 4.25rem); }
@media (max-width: 900px) {
  .ask-page .wrap { grid-template-columns: 1fr; min-height: 0; gap: 0; }
  .ask-page .hero-stage { height: clamp(420px, 115vw, 540px); margin-inline: calc(-1 * var(--gutter)); overflow: hidden; }
  .ask-page .hero-copy { padding-top: 2rem; }
  .ask-stage .figure { height: 90%; transform: translateX(-46%); }
}

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: var(--content-gap) 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; padding: clamp(1.75rem, 3vw, 2.25rem); background: var(--paper); border-radius: var(--r-md); }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 1.25rem; font-size: 1.25rem; font-weight: 800; color: var(--green); background: var(--white); border-radius: 50%; }
.steps h3 { margin-bottom: .5rem; }
.steps p { margin: 0; color: var(--muted); font-size: 1.02rem; }
.steps a { color: var(--green); font-weight: 700; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

.care { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: start; max-width: 860px; margin: 0 auto; padding: clamp(1.75rem, 4vw, 2.5rem); background: var(--paper); border-radius: var(--r-lg); }
.care .ico { width: 64px; height: 64px; padding: 10px; color: var(--green); background: var(--white); border-radius: 50%; }
.care h2 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); margin-bottom: .6rem; }
.care p { margin: 0; color: var(--muted); }
.care p + p { margin-top: .75rem; }
@media (max-width: 600px) { .care { grid-template-columns: 1fr; } }

/* ===================== Learn ===================== */
.learn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.guide-card { display: flex; flex-direction: column; height: 100%; padding: clamp(1.75rem, 3vw, 2.25rem); background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-lg); text-decoration: none; transition: border-color .2s, box-shadow .3s var(--ease-out), transform .3s var(--ease-out); }
.guide-card:hover { border-color: var(--green); box-shadow: var(--shadow-card); transform: translateY(-3px); }
.guide-card .ico { width: 84px; height: 84px; padding: 13px; margin-bottom: 1.5rem; background: var(--paper); border-radius: 50%; }
.guide-card h2 { font-size: 1.65rem; margin-bottom: .6rem; }
.guide-card p { flex: 1; margin: 0 0 1.5rem; color: var(--muted); font-size: 1.02rem; }
.guide-card .text-link { text-decoration: underline; text-decoration-thickness: 2px; }
@media (max-width: 960px) { .learn-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .learn-grid { grid-template-columns: 1fr; } .guide-card { display: grid; grid-template-columns: 64px 1fr; column-gap: 1.1rem; } .guide-card .ico { width: 64px; height: 64px; padding: 10px; margin: 0; grid-row: span 3; } }

/* ---------- About: training journey ---------- */
.journey { position: relative; margin-top: var(--content-gap); }
.journey-path { position: absolute; left: 0; top: 0; width: 100%; height: 220px; overflow: visible; }
.journey-path path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.journey-path .track { stroke: var(--sage-tint); stroke-width: 14; }
.journey-path .draw { stroke: var(--green); stroke-width: 4; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s var(--ease-out); }
.js .journey:not(.drawn) .journey-path .draw { stroke-dashoffset: 1; }
.stops { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.stops li { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 18px; }
.stops li:nth-child(even) { padding-top: 118px; }
.stop { display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 1.25rem; background: var(--white); border: 3px solid var(--green); border-radius: 50%; box-shadow: 0 12px 26px -14px rgba(29, 42, 36, .5); transition: transform .5s var(--ease-out); }
.stop .ico { width: 54px; height: 54px; }
.stops li:nth-child(odd) b { margin-top: 0; }
.stops b { display: block; font-size: 1.12rem; line-height: 1.3; margin-bottom: .3rem; }
.stops span:not(.stop) { font-size: .98rem; line-height: 1.45; color: var(--muted); max-width: 15rem; }
.full-bio { max-width: 48rem; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; text-align: center; }
.full-bio summary { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; font-weight: 700; color: var(--green); cursor: pointer; list-style: none; }
.full-bio summary::-webkit-details-marker { display: none; }
.full-bio summary svg { width: 14px; height: 14px; transition: transform .25s var(--ease-out); }
.full-bio[open] summary svg { transform: rotate(180deg); }
.full-bio p { margin: 1rem 0 0; text-align: left; color: var(--muted); }
@media (max-width: 900px) {
  .journey-path { display: none; }
  .stops { grid-template-columns: 1fr; gap: 0; max-width: 520px; margin-inline: auto; }
  .stops::before { content: ""; position: absolute; left: 41px; top: 42px; bottom: 42px; width: 4px; background: var(--green); border-radius: 4px; }
  .stops li, .stops li:nth-child(even) { display: grid; grid-template-columns: 84px 1fr; column-gap: 1.25rem; align-items: center; text-align: left; padding: 0 0 1.5rem; }
  .stop { grid-row: span 2; margin: 0; position: relative; }
  .stops b { align-self: end; margin: 0; }
  .stops span:not(.stop) { align-self: start; }
}

/* ---------- About: quote ---------- */
.quote-band .lead-in { margin: 0 auto 1.5rem; max-width: 40rem; text-align: center; font-weight: 600; color: var(--on-sage-muted); }
.quote-band .after { text-align: center; }

/* ---------- About: vision and mission ---------- */
.vision { max-width: 1040px; margin: 0 auto; text-align: center; font-size: clamp(1.9rem, 3.8vw, 3.2rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; text-wrap: balance; }
.vision b { color: var(--green); }
.vision span { color: #66736A; }
.mission { margin-top: var(--section); text-align: center; }
.mission .intro { margin-inline: auto; }
.flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin: var(--content-gap) 0 0; padding: 0; list-style: none; }
.flow li { position: relative; display: flex; flex-direction: column; align-items: center; }
.flow li:not(:last-child)::after { content: ""; position: absolute; top: 52px; left: calc(50% + 70px); right: calc(-50% + 70px); height: 14px; transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cpath d='M1 7h92' stroke='%232F5E4E' stroke-width='2.5' stroke-dasharray='5 6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") left center / 100% 14px no-repeat; }
.flow li:not(:last-child)::before { content: ""; position: absolute; top: 52px; right: calc(-50% + 64px); width: 12px; height: 12px; border-top: 3px solid var(--green); border-right: 3px solid var(--green); transform: translateY(-50%) rotate(45deg); }
.node { display: grid; place-items: center; width: 104px; height: 104px; margin-bottom: 1.25rem; background: var(--sage-tint); border-radius: 50%; }
.node .ico { width: 58px; height: 58px; }
.node-brand { background: var(--green); }
.node-brand img { width: 74px; height: 74px; }
.flow b { font-size: 1.15rem; line-height: 1.3; margin-bottom: .35rem; max-width: 14rem; }
.flow span:not(.node) { color: var(--muted); font-size: 1rem; line-height: 1.45; max-width: 14rem; }
@media (max-width: 900px) {
  .flow { grid-template-columns: 1fr; gap: 2.5rem; max-width: 420px; margin-inline: auto; }
  .flow li:not(:last-child)::after { top: auto; bottom: -2.1rem; left: 50%; right: auto; width: 14px; height: 1.6rem; transform: translateX(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 100' preserveAspectRatio='none'%3E%3Cpath d='M7 1v98' stroke='%232F5E4E' stroke-width='2.5' stroke-dasharray='5 6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / 14px 100% no-repeat; }
  .flow li:not(:last-child)::before { display: none; }
  .node { margin-bottom: 1rem; }
}

/* ---------- About: values as a prescription ---------- */
.values { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.values-side img { width: 100%; max-width: 360px; margin-top: 2rem; border-radius: var(--r-lg); }
.rx { position: relative; background: var(--white); border-radius: var(--r-md); box-shadow: 0 2px 4px rgba(29, 42, 36, .05), 0 40px 70px -40px rgba(29, 42, 36, .45); transform: rotate(-1.2deg); overflow: hidden; }
.rx-head { display: grid; grid-template-columns: auto 1fr auto; gap: 1.1rem; align-items: center; padding: 1.4rem 1.75rem; color: var(--on-green); background: var(--green); }
.rx-head .rx-mark { font-size: 2.6rem; color: var(--on-green); font-weight: 800; line-height: 1; letter-spacing: -0.06em; font-style: italic; }
.rx-head b { display: block; font-size: 1.25rem; }
.rx-head span { font-size: .95rem; color: var(--on-green-muted); }
.rx-head img { width: 52px; opacity: .9; }
.rx-list { margin: 0; padding: .75rem 1.75rem; list-style: none; }
.rx-list li { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; align-items: center; padding: .85rem 0; }
.rx-list li + li { border-top: 1.5px dashed var(--line); }
.rx-list .ico { width: 44px; height: 44px; }
.rx-list b { display: block; font-size: 1.1rem; line-height: 1.3; }
.rx-list span { display: block; font-size: .97rem; line-height: 1.45; color: var(--muted); }
.rx-foot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0; padding: 1.1rem 1.75rem 1.4rem; border-top: 2px solid var(--line); font-size: .95rem; color: var(--muted); }
.rx-foot span:last-child { font-weight: 700; color: var(--ink); border-top: 1.5px solid var(--ink); padding-top: .2rem; min-width: 11rem; text-align: center; }
@media (max-width: 900px) { .values { grid-template-columns: 1fr; } .values-side img { max-width: 260px; } .rx { transform: none; } }
@media (max-width: 480px) { .rx-head { grid-template-columns: auto 1fr; } .rx-head img { display: none; } .rx-list, .rx-head, .rx-foot { padding-inline: 1.25rem; } }

/* ---------- About: noise to clarity ---------- */
.noise { position: relative; margin: var(--content-gap) 0 0; }
.noise svg { display: block; width: 100%; height: auto; overflow: visible; }
.noise .tangle { fill: none; stroke: #A9B3AB; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.noise .clear { fill: none; stroke: var(--green); stroke-width: 7; stroke-linecap: round; }
.noise .dot-end { fill: var(--green); }
.bubble { position: absolute; padding: .45rem .85rem; font-size: clamp(.78rem, 1.3vw, 1rem); font-weight: 700; color: #6E786F; white-space: nowrap; background: var(--white); border: 1.5px solid #CDD4CE; border-radius: 14px; box-shadow: 0 8px 18px -12px rgba(29, 42, 36, .4); }
.bubble::after { content: ""; position: absolute; left: 18px; bottom: -7px; width: 12px; height: 12px; background: var(--white); border-right: 1.5px solid #CDD4CE; border-bottom: 1.5px solid #CDD4CE; transform: rotate(45deg); }
.noise .b1 { left: 1%; top: 2%; transform: rotate(-6deg); }
.noise .b2 { left: 21%; top: -4%; transform: rotate(4deg); }
.noise .b3 { left: 4%; top: 78%; transform: rotate(3deg); }
.noise .b4 { left: 25%; top: 84%; transform: rotate(-4deg); }
.noise .b5 { left: 33%; top: 8%; transform: rotate(-3deg); }
.noise .b6 { left: 15%; top: 42%; transform: rotate(5deg); }
.clear-label { position: absolute; right: 0; top: 80%; width: 22%; text-align: center; font-weight: 800; font-size: clamp(.9rem, 1.6vw, 1.2rem); color: var(--green); }
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: clamp(4.5rem, 8vw, 6rem); }
.two-up h3 { font-size: 1.35rem; margin-bottom: .6rem; }
.two-up > div:first-child h3 { color: #6E786F; }
.two-up > div:last-child h3 { color: var(--green); }
.two-up p { margin: 0; color: var(--muted); }
@media (max-width: 760px) {
  .noise .b4, .noise .b5, .noise .b6 { display: none; }
  .noise .b2 { left: 30%; }
  .clear-label { top: 76%; width: 26%; }
  .two-up { grid-template-columns: 1fr; }
}

/* ---------- About: comparison ---------- */
.compare { max-width: 1000px; margin: var(--content-gap) auto 0; background: var(--white); border-radius: var(--r-lg); overflow: hidden; }
.c-row { display: grid; grid-template-columns: .8fr 1fr 1.2fr; align-items: stretch; }
.c-row + .c-row { border-top: 1px solid var(--line); }
.c-row > * { display: flex; align-items: center; gap: .7rem; padding: 1.15rem 1.5rem; }
.c-row b { font-size: 1rem; color: var(--ink); }
.c-row .no { color: #6E786F; }
.c-row .yes { font-weight: 700; color: var(--ink); background: var(--sage-tint); }
.c-row .no::before, .c-row .yes::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: center / 70% no-repeat; }
.c-row .no::before { background-color: #E6E9E4; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 6l8 8M14 6l-8 8' stroke='%236E786F' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.c-row .yes::before { background-color: var(--green); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23F1F5EE' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.c-head > * { font-weight: 700; font-size: .98rem; color: var(--muted); padding-block: 1.25rem; }
.c-head > :last-child { background: var(--sage-tint); }
.c-head img { width: 120px; }
@media (max-width: 760px) {
  .c-head { display: none; }
  .c-row { grid-template-columns: 1fr; padding: 1.1rem 0; }
  .c-row > * { padding: .35rem 1.25rem; }
  .c-row .yes { margin: .35rem 1rem 0; border-radius: 12px; padding: .7rem .9rem; }
}

/* ---------- About: join the movement ---------- */
.join { position: relative; overflow: hidden; padding: clamp(3.5rem, 8vw, 6rem) clamp(1.5rem, 6vw, 5rem); color: var(--on-green); background: var(--green); border-radius: var(--r-xl); }
.join .emblem { position: absolute; width: 640px; right: -180px; top: 50%; transform: translateY(-50%); opacity: .12; }
.join-copy { position: relative; max-width: 46rem; }
.join h2 { color: var(--on-green); }
.join p { margin: 1.25rem 0 0; font-size: 1.15rem; color: var(--on-green-muted); }
.join .sign { margin-top: 1.75rem; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.025em; color: var(--on-green); text-wrap: balance; }
.join-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2.25rem; }
.btn.light { color: var(--green); background: var(--on-green); border-color: var(--on-green); }
.btn.light:hover { background: var(--white); border-color: var(--white); }
.join .social { margin: 0; }
.join .social a { background: rgba(241, 245, 238, .14); color: var(--on-green); }
.join .social a:hover { background: var(--on-green); color: var(--green); }
.join :focus-visible { outline-color: var(--on-green); }

/* ---------- About: values pad (a second sheet peeks out behind the card) ---------- */
.values { grid-template-columns: .7fr 1.3fr; }
.rx-pad { position: relative; }
.rx-pad::before { content: ""; position: absolute; inset: 0; background: var(--white); border-radius: var(--r-md); box-shadow: 0 20px 50px -30px rgba(29, 42, 36, .4); transform: rotate(2.2deg) translate(10px, 6px); }
.rx-pad::after { content: ""; position: absolute; inset: 0; background: #FBFAF6; border-radius: var(--r-md); transform: rotate(.6deg) translate(4px, 3px); box-shadow: 0 1px 2px rgba(29, 42, 36, .06); }
.rx-pad .rx { z-index: 1; }

/* ---------- About: what we explore ---------- */
.explore { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.25rem 1.5rem; max-width: 1000px; margin: var(--content-gap) auto 0; padding: 0; list-style: none; }
.explore li { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; font-weight: 700; font-size: 1.08rem; line-height: 1.3; }
.explore .ico { width: 96px; height: 96px; padding: 18px; background: var(--paper); border-radius: 50%; transition: transform .4s var(--ease-out), background-color .3s; }
.explore li:hover .ico { transform: translateY(-4px) rotate(-4deg); background: var(--sage-tint); }
.explore span { max-width: 11rem; }
@media (max-width: 760px) { .explore { grid-template-columns: 1fr 1fr; gap: 1.75rem 1rem; } .explore .ico { width: 80px; height: 80px; padding: 15px; } .explore li { font-size: 1rem; } }

/* ---------- About: broader view hub ---------- */
.broader { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.broader .intro + .intro { margin-top: 1rem; }
.hub { position: relative; width: min(100%, 560px); aspect-ratio: 1; justify-self: center; margin-block: 2rem 3rem; }
.hub .spokes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub .spokes circle { fill: none; stroke: var(--sage); stroke-width: .5; stroke-dasharray: 1.2 1.6; }
.hub .spokes path { stroke: var(--sage); stroke-width: .7; }
.hub .core { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 12px rgba(47, 94, 78, .1), 0 20px 40px -18px rgba(29, 42, 36, .5); }
.hub .core img { width: 74%; }
.hub ul { margin: 0; padding: 0; list-style: none; }
.hub li { position: absolute; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -38px); width: 10.5rem; text-align: center; }
.hub .sat { display: grid; place-items: center; width: 76px; height: 76px; background: var(--white); border-radius: 50%; box-shadow: 0 10px 24px -12px rgba(29, 42, 36, .45); }
.hub .sat .ico { width: 46px; height: 46px; }
.hub .lbl { margin-top: .6rem; font-weight: 700; font-size: .98rem; line-height: 1.3; }
.hub .h0 { left: 50%; top: 12%; flex-direction: column-reverse; transform: translate(-50%, calc(-100% + 38px)); }
.hub .h0 .lbl { margin: 0 0 .6rem; }
.hub .h1 { left: 82.9%; top: 31%; }
.hub .h2 { left: 82.9%; top: 69%; }
.hub .h3 { left: 50%; top: 88%; }
.hub .h4 { left: 17.1%; top: 69%; }
.hub .h5 { left: 17.1%; top: 31%; }
@media (max-width: 900px) { .broader { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .hub { margin-block: 3.5rem 3rem; }
  .hub li { width: 7.5rem; transform: translate(-50%, -28px); }
  .hub .h0 { transform: translate(-50%, calc(-100% + 28px)); }
  .hub .sat { width: 56px; height: 56px; }
  .hub .sat .ico { width: 34px; height: 34px; }
  .hub .lbl { font-size: .82rem; }
}

/* ---------- About: looking ahead roadmap ---------- */
.ahead { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.roadmap { position: relative; width: 100%; max-width: 540px; aspect-ratio: 500 / 460; }
.roadmap > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.roadmap .road-track { fill: none; stroke: var(--sage-tint); stroke-width: 26; stroke-linecap: round; }
.roadmap .road { fill: none; stroke: var(--green); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 12; }
.roadmap .sun { fill: var(--green); }
.roadmap .sun-glow { fill: var(--sage-tint); }
.mile { position: absolute; display: flex; align-items: center; gap: .9rem; transform: translate(-30px, -50%); }
.mile .pin { flex: none; display: grid; place-items: center; width: 60px; height: 60px; background: var(--white); border: 3px solid var(--green); border-radius: 50%; box-shadow: 0 10px 22px -12px rgba(29, 42, 36, .5); }
.mile .pin .ico { width: 36px; height: 36px; }
.mile p { margin: 0; max-width: 13rem; font-size: .98rem; line-height: 1.4; color: var(--muted); }
.mile b { display: block; font-size: 1.1rem; color: var(--ink); }
.m1 { left: 18%; top: 80.4%; }
.m2 { left: 44%; top: 55.4%; }
.m3 { left: 66%; top: 34.8%; flex-direction: row-reverse; text-align: right; transform: translate(calc(-100% + 30px), -50%); }
@media (max-width: 900px) { .ahead { grid-template-columns: 1fr; } .roadmap { justify-self: center; } }
@media (max-width: 520px) {
  .mile .pin { width: 46px; height: 46px; }
  .mile .pin .ico { width: 28px; height: 28px; }
  .mile { transform: translate(-23px, -50%); gap: .6rem; }
  .m3 { transform: translate(calc(-100% + 23px), -50%); }
  .mile p { font-size: .85rem; max-width: 9.5rem; }
  .mile b { font-size: .98rem; }
}
.values-sec { overflow: hidden; }
@media (max-width: 900px) { .rx-pad::before { transform: rotate(1.4deg) translate(4px, 6px); } .rx-pad::after { transform: rotate(.4deg) translate(2px, 3px); } }
@media (max-width: 900px) { .values { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .hub .core { width: 25%; }
  .hub li { width: 6.6rem; }
}
/* on phones the roadmap becomes a simple vertical path */
@media (max-width: 600px) {
  .roadmap { aspect-ratio: auto; max-width: none; display: grid; gap: 1.5rem; padding-left: 0; }
  .roadmap::before { content: ""; position: absolute; left: 21px; top: 23px; bottom: 23px; border-left: 4px dotted var(--green); }
  .roadmap > svg { display: none; }
  .mile, .m3 { position: relative; left: auto; top: auto; transform: none; flex-direction: row; text-align: left; gap: 1rem; }
  .mile p { max-width: none; font-size: .98rem; }
}

/* ---------- Home: Meet Dr. Ted, a short career path like the About page ---------- */
.meet .btn.ghost { margin-top: 2.25rem; }

/* B: a short career path, like the About page */
.mini-path { position: relative; display: grid; gap: 1.4rem; margin: var(--content-gap) 0 0; padding: 0; list-style: none; }
.mini-path::before { content: ""; position: absolute; left: 30px; top: 30px; bottom: 30px; width: 3px; background: var(--green); border-radius: 3px; }
.mini-path li { position: relative; display: grid; grid-template-columns: 62px 1fr; gap: 1.25rem; align-items: center; }
.mini-path .stop { width: 62px; height: 62px; margin: 0; border-width: 3px; }
.mini-path .stop .ico { width: 38px; height: 38px; }
.mini-path b { display: block; font-size: 1.12rem; line-height: 1.3; }
.mini-path li > span:last-child { color: var(--muted); font-size: 1rem; line-height: 1.45; }

/* mockup-only option switcher */
.options { position: fixed; right: 1rem; bottom: 1rem; z-index: 80; display: flex; align-items: center; gap: .35rem; padding: .4rem .45rem .4rem 1rem; font: 700 .88rem "Kumbh Sans", sans-serif; color: var(--ink); background: var(--white); border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.options a { padding: .45rem .8rem; color: var(--ink); text-decoration: none; border-radius: 999px; }
.options a:hover { background: var(--sage-tint); }
.options a[aria-current] { color: var(--on-green); background: var(--green); }
@media (max-width: 600px) { .options { left: .5rem; right: .5rem; justify-content: center; font-size: .78rem; padding: .35rem; } .options a { padding: .4rem .5rem; } }

/* ===================== Recipe cards (Recipes, Chef Savi) ===================== */
.recipes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem 1.5rem; margin: var(--content-gap) 0 0; padding: 0; list-style: none; }
.recipes-3 { grid-template-columns: repeat(3, 1fr); gap: 2.5rem 1.75rem; }
.recipes li[hidden] { display: none; }
.recipe { display: block; height: 100%; text-decoration: none; }
.recipe figure { margin: 0; overflow: hidden; border-radius: 20px; background: var(--paper); }
.recipe img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .5s var(--ease-out); }
.recipe:hover img { transform: scale(1.04); }
.recipe .meal { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem; font-size: .92rem; font-weight: 600; color: var(--green); }
.recipe .meal .ico { width: 24px; height: 24px; }
.recipe h3 { margin: .3rem 0 .55rem; font-size: 1.15rem; line-height: 1.3; transition: color .2s; }
.recipe:hover h3 { color: var(--green); }
.times { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .45rem; font-size: .92rem; color: var(--muted); }
.times svg { flex: none; width: 17px; height: 17px; color: var(--green); }
.times span + span::before { content: "·"; margin-right: .45rem; }
@media (max-width: 1100px) { .recipes { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .recipes { grid-template-columns: repeat(2, 1fr); } }
/* phones: a list, photo on the left */
@media (max-width: 600px) {
  .recipes, .recipes-3 { grid-template-columns: 1fr; gap: 1.1rem; }
  .recipe { display: grid; grid-template-columns: 112px 1fr; gap: 1.1rem; align-items: center; }
  .recipe figure { border-radius: 16px; }
  .recipe .meal { margin-top: 0; }
  .recipe h3 { font-size: 1.05rem; margin: .15rem 0 .35rem; }
}

/* ===================== Chef Savi ===================== */
.chef-hero { overflow: hidden; padding-bottom: 0; }
.chef-hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: end; }
.chef-hero .copy { align-self: center; padding-bottom: clamp(3rem, 6vw, 5rem); }
.chef-hero .sub { margin: 1rem 0 1.5rem; font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-weight: 600; color: var(--green); }
.chef-hero .copy > p:not(.sub) { margin: 0 0 1rem; max-width: 32rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.savi-stage { position: relative; height: clamp(540px, 52vw, 700px); }
.savi-stage .plate { left: 50%; right: auto; bottom: 3%; width: min(96%, 560px); transform: translateX(-50%); }
.savi-stage .person { position: absolute; bottom: 0; left: 50%; height: 100%; width: auto; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 18px 24px rgba(29, 42, 36, .14)); animation: rise 1s var(--ease-out) both; }
.say { position: absolute; z-index: 2; left: -1rem; top: 3%; margin: 0; padding: .8rem 1.1rem; max-width: 12rem; font-weight: 700; line-height: 1.3; background: var(--white); border-radius: 18px; box-shadow: 0 1px 2px rgba(29, 42, 36, .06), 0 18px 36px -14px rgba(29, 42, 36, .4); }
.say::after { content: ""; position: absolute; right: 22px; bottom: -8px; width: 16px; height: 16px; background: var(--white); transform: rotate(45deg); border-radius: 0 0 4px 0; }
.savi-stage .badge { right: 0; bottom: 14%; }
@media (max-width: 900px) {
  .chef-hero .wrap { grid-template-columns: 1fr; gap: 0; }
  .chef-hero .copy { padding-bottom: 1rem; }
  /* phones: Chef Savi stands above the hero's rounded bottom edge, with the badge under his feet and the bubble clear of his spoon */
  .savi-stage { height: clamp(520px, 140vw, 640px); margin-inline: calc(-1 * var(--gutter)); overflow: hidden; }
  .savi-stage .person { bottom: 76px; height: calc(100% - 136px); }
  .savi-stage .plate { width: min(88%, 440px); bottom: 50px; }
  .say { left: var(--gutter); top: 3%; max-width: 9.5rem; font-size: .95rem; }
  .savi-stage .badge { left: 50%; right: auto; bottom: 14px; transform: translateX(-50%); }
}

/* why Low FODMAP: two phases and a menu card */
.why-fodmap .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.phases { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin: var(--content-gap) 0 0; padding: 0; list-style: none; }
.phases li { position: relative; display: flex; flex-direction: column; }
.phases .node { width: 88px; height: 88px; margin-bottom: 1.1rem; }
.phases .node .ico { width: 52px; height: 52px; }
.phases li:first-child::after { content: ""; position: absolute; top: 44px; left: 104px; right: calc(-2.5rem + 16px); height: 14px; transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cpath d='M1 7h92' stroke='%232F5E4E' stroke-width='2.5' stroke-dasharray='5 6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") left center / 100% 14px no-repeat; }
.phases li:first-child::before { content: ""; position: absolute; top: 44px; right: calc(-2.5rem + 12px); width: 12px; height: 12px; border-top: 3px solid var(--green); border-right: 3px solid var(--green); transform: translateY(-50%) rotate(45deg); }
.phases b { font-size: 1.15rem; line-height: 1.3; margin-bottom: .3rem; }
.phases li > span:last-child { color: var(--muted); font-size: 1rem; line-height: 1.45; }
.menu-card { position: relative; padding: clamp(2rem, 4vw, 2.75rem); background: var(--white); border-radius: var(--r-md); box-shadow: 0 2px 4px rgba(29, 42, 36, .05), 0 40px 70px -40px rgba(29, 42, 36, .45); outline: 1.5px solid var(--line); outline-offset: -12px; transform: rotate(1.2deg); text-align: center; }
.menu-kicker { display: flex; align-items: center; gap: .9rem; margin: 0 0 .5rem; font-size: .95rem; font-weight: 700; color: var(--green); }
.menu-kicker::before, .menu-kicker::after { content: ""; flex: 1; height: 1.5px; background: var(--sage); }
.menu-card h3 { font-size: clamp(1.45rem, 2.4vw, 1.8rem); letter-spacing: -0.02em; }
.menu-card ul { margin: 1.5rem 0 0; padding: 0; list-style: none; text-align: left; }
.menu-card li { display: flex; align-items: center; gap: .75rem; padding: .55rem 0; font-weight: 600; font-size: 1.05rem; }
.menu-card li::before { content: ""; order: 1; flex: 1; min-width: 1.5rem; border-bottom: 2.5px dotted #B4C4B0; transform: translateY(5px); }
.menu-card li .ico { order: 2; flex: none; width: 42px; height: 42px; }
.menu-foot { margin: 1.25rem 0 0; font-size: .95rem; color: var(--muted); }
@media (max-width: 900px) { .why-fodmap .wrap { grid-template-columns: 1fr; } .menu-card { transform: none; } }
@media (max-width: 520px) {
  .phases { grid-template-columns: 1fr; gap: 1.75rem; }
  .phases li { display: grid; grid-template-columns: 72px 1fr; column-gap: 1rem; }
  .phases .node { grid-row: span 2; width: 72px; height: 72px; margin: 0; }
  .phases .node .ico { width: 42px; height: 42px; }
  .phases b { align-self: end; }
  .phases li:first-child::after { top: 76px; left: 36px; right: auto; width: 14px; height: 1.75rem; transform: translateX(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 100' preserveAspectRatio='none'%3E%3Cpath d='M7 1v98' stroke='%232F5E4E' stroke-width='2.5' stroke-dasharray='5 6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / 14px 100% no-repeat; }
  .phases li:first-child::before { display: none; }
}

/* the order: prompt bubbles and a kitchen ticket */
.order { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.try { margin: 2rem 0 1rem; font-weight: 700; }
.prompts { display: grid; gap: .9rem; justify-items: start; margin: 0; padding: 0; list-style: none; }
.prompts li:nth-child(even) { margin-left: clamp(1rem, 4vw, 2.75rem); }
.prompts button { position: relative; padding: .8rem 1.15rem; font: 600 1.02rem/1.35 "Kumbh Sans", sans-serif; color: var(--ink); text-align: left; background: var(--white); border: 1.5px solid var(--white); border-radius: 18px 18px 18px 6px; box-shadow: 0 10px 22px -16px rgba(29, 42, 36, .5); cursor: pointer; transition: border-color .2s, transform .25s var(--ease-out); }
.prompts button:hover { border-color: var(--green); transform: translateY(-2px); }
.prompts button[aria-pressed="true"] { border-color: var(--green); color: var(--green); }
.ticket-wrap { filter: drop-shadow(0 2px 2px rgba(29, 42, 36, .06)) drop-shadow(0 30px 30px rgba(29, 42, 36, .16)); transform: rotate(-1deg); }
.ask.ticket { margin: 0; max-width: none; padding: 2.4rem clamp(1.5rem, 3vw, 2.25rem) 2.6rem; border-radius: 0; box-shadow: none;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 22px 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 22px 51% repeat-x;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 22px 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 22px 51% repeat-x; }
.ticket-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1.1rem; border-bottom: 2px dashed var(--line); }
.ticket-head b { display: block; font-size: 1.3rem; letter-spacing: -0.01em; }
.ticket-head span { color: var(--muted); font-size: .98rem; }
.ticket-head .ico { flex: none; width: 52px; height: 52px; }
@media (max-width: 900px) { .order { grid-template-columns: 1fr; } .ticket-wrap { transform: none; } }

/* how it works: the recipe card with swaps */
.how-savi .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.how-copy .mini-path { margin-top: var(--content-gap); }
.recipe-card { position: relative; width: min(100%, 520px); justify-self: center; margin: 9rem 0 1.5rem; }
.recipe-card .peek { position: absolute; z-index: 0; right: 3%; top: -9.5rem; width: 54%; }
.card-paper { position: relative; z-index: 1; padding: 1.75rem clamp(1.4rem, 3vw, 2.25rem) 2.25rem; background: var(--white) repeating-linear-gradient(to bottom, transparent 0 calc(2.75rem - 1.5px), #E4ECDF calc(2.75rem - 1.5px) 2.75rem) 0 4.4rem / 100% calc(100% - 4.4rem) no-repeat; border-radius: 20px; box-shadow: 0 2px 4px rgba(29, 42, 36, .06), 0 40px 70px -40px rgba(29, 42, 36, .5); transform: rotate(-1.5deg); }
.card-title { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0 0 1rem; padding-bottom: .75rem; font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; border-bottom: 3px solid var(--green); }
.card-title span { font-size: .95rem; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.ingredients { margin: 0; padding: 0; list-style: none; }
.ingredients li { display: flex; flex-wrap: wrap; align-items: center; column-gap: .7rem; min-height: 2.75rem; font-size: 1.05rem; line-height: 1.25; }
.ingredients s { color: #5E6A61; text-decoration-color: var(--green); text-decoration-thickness: 2.5px; }
.swap { display: inline-flex; align-items: center; gap: .35rem; font-weight: 800; color: var(--green); transform: rotate(-2deg); }
.swap::before { content: ""; width: 22px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M1 8c5-5 11-5 18-2m-4-4.5L19.5 6 15 9' fill='none' stroke='%232F5E4E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.ingredients .keep { font-weight: 600; }
.ingredients .keep::after { content: ""; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--sage-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%232F5E4E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 85% no-repeat; }
.stamp { position: absolute; right: -1.25rem; bottom: -2rem; display: grid; place-items: center; align-content: center; gap: .1rem; width: 124px; height: 124px; color: var(--on-green); background: var(--green); border-radius: 50%; box-shadow: inset 0 0 0 6px var(--green), inset 0 0 0 8px rgba(241, 245, 238, .55), 0 14px 26px -12px rgba(29, 42, 36, .6); transform: rotate(-12deg); }
.stamp img { width: 50px; }
.stamp span { font-size: .72rem; font-weight: 800; letter-spacing: .02em; }
@media (max-width: 900px) { .how-savi .wrap { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .recipe-card { margin-top: 7.5rem; }
  .recipe-card .peek { top: -7.5rem; width: 58%; }
  .card-paper { background-image: none; transform: rotate(-1deg); }
  .ingredients li { padding: .45rem 0; min-height: 0; font-size: 1rem; border-bottom: 1.5px solid #E4ECDF; }
  .stamp { width: 96px; height: 96px; right: .25rem; bottom: -2.5rem; }
  .stamp img { width: 40px; }
  .stamp span { font-size: .62rem; }
}

/* ===================== Recipes ===================== */
.recipes-hero { padding-bottom: clamp(3rem, 5vw, 4.5rem); }
/* the meal filter: stops along the sun's path across a day */
.day { position: relative; max-width: 900px; aspect-ratio: 900 / 300; margin: clamp(2rem, 4vw, 3rem) auto 0; }
.day-arc { position: absolute; left: 0; top: 0; width: 100%; height: 86.67%; overflow: visible; }
.day-arc path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.day-arc .arc-track { stroke: var(--sage-tint); stroke-width: 16; }
.day-arc .arc-line { stroke: var(--green); stroke-width: 2.5; stroke-dasharray: 2 9; }
.meal-stop { position: absolute; left: var(--x); top: calc(var(--y) * .8667); display: flex; flex-direction: column; align-items: center; width: 8.5rem; padding: 0; font: inherit; color: var(--ink); background: none; border: 0; cursor: pointer; transform: translate(-50%, -38px); }
.meal-stop .dot { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: .55rem; background: var(--white); border: 3px solid var(--green); border-radius: 50%; box-shadow: 0 12px 26px -14px rgba(29, 42, 36, .5); transition: background-color .25s, transform .35s var(--ease-out); }
.meal-stop .ico { width: 46px; height: 46px; transition: color .25s; }
.meal-stop b { font-size: 1.05rem; line-height: 1.2; }
.meal-stop .n { font-size: .88rem; color: var(--muted); }
.meal-stop:hover .dot { transform: translateY(-4px); }
.meal-stop[aria-pressed="true"] .dot { background: var(--green); }
.meal-stop[aria-pressed="true"] .ico { color: var(--on-green); }
.meal-stop[aria-pressed="true"] b { color: var(--green); }
.meal-stop:focus-visible { outline: none; }
.meal-stop:focus-visible .dot { outline: 3px solid var(--green); outline-offset: 4px; }
.all-meals { position: absolute; left: 50%; top: 80%; transform: translate(-50%, -50%); min-height: 46px; padding: 0 1.4rem; font: 700 1rem "Kumbh Sans", sans-serif; color: var(--green); background: var(--paper); border: 1.5px solid var(--green); border-radius: 999px; cursor: pointer; transition: background-color .2s, color .2s; }
.all-meals:hover, .all-meals[aria-pressed="true"] { color: var(--on-green); background: var(--green); }
@media (max-width: 760px) {
  .day { aspect-ratio: auto; display: flex; gap: .25rem; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) .5rem; overflow-x: auto; scrollbar-width: none; }
  .day::-webkit-scrollbar { display: none; }
  .day-arc { display: none; }
  .meal-stop { position: static; flex: none; width: 5.6rem; transform: none; }
  .meal-stop .dot { width: 60px; height: 60px; }
  .meal-stop .ico { width: 36px; height: 36px; }
  .meal-stop b { font-size: .95rem; }
  .meal-stop .n { font-size: .8rem; }
  .all-meals { position: static; order: -1; flex: none; align-self: flex-start; transform: none; width: 60px; height: 60px; min-height: 0; padding: 0; margin-right: .6rem; font-size: .82rem; line-height: 1.1; border-radius: 50%; border-width: 3px; }
}

.recipes-listing { padding-top: clamp(4rem, 7vw, 5.5rem); }
.recipe-feature figure img { aspect-ratio: 4 / 3; }
.recipe-feature .status .ico { width: 24px; height: 24px; }
.recipe-feature .btn { margin-top: 1.75rem; }
.dials { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-top: 1.25rem; }
.dial { display: flex; align-items: center; gap: .75rem; font-size: .95rem; line-height: 1.3; color: var(--muted); }
.dial b { display: block; font-size: 1.1rem; color: var(--ink); }
.dial i { position: relative; width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--green); background: conic-gradient(var(--sage) 0 calc(var(--m) * 6deg), var(--white) 0); }
.dial i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--green); }
.recipes-listing .recipes { margin-top: 0; }
.recipes-listing .results { margin-bottom: 2rem; }
.more-recipes { margin-top: var(--content-gap); text-align: center; }
.more-recipes[hidden] { display: none; }

/* Chef Savi band: his torso is shorter than Dr. Ted's photos, so less room above */
.news.savi-band { padding-top: clamp(9rem, 14vw, 12rem); }
.savi-band .news-art img { width: min(108%, 520px); }
@media (max-width: 860px) { .news.savi-band { padding-top: 9rem; } .savi-band .news-art { height: 250px; } .savi-band .news-art img { width: 300px; } }

/* ===================== Full symptom guide ===================== */
.guide-hero h1 { font-size: clamp(2.3rem, 4.4vw, 3.8rem); line-height: 1.06; }
.guide-hero .meta { margin: 1.25rem 0 2rem; }
.ch-n { margin: 0 0 .6rem; font-size: .98rem; font-weight: 700; color: var(--green); }
.ch h2 { scroll-margin-top: 100px; }
.ch { scroll-margin-top: 70px; }
.sub-h { font-size: 1.3rem; margin-bottom: 1.25rem; }
.takeaway { max-width: 46rem; margin: var(--content-gap) 0 0; font-size: 1.1rem; color: var(--muted); }
.takeaway b { color: var(--ink); }
.takeaway.center { margin-inline: auto; text-align: center; }
.spot { margin: 0; }
.spot img { width: 100%; border-radius: var(--r-lg); }

/* 1. listen */
.listen { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.listen .lead { margin: 1.5rem 0 0; font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 600; line-height: 1.45; letter-spacing: -0.01em; text-wrap: pretty; }
.alarm { position: relative; padding: clamp(1.75rem, 3vw, 2.25rem); background: var(--sage-tint); border-radius: var(--r-lg); }
.alarm .ico { width: 64px; height: 64px; padding: 10px; margin-bottom: 1rem; background: var(--white); border-radius: 50%; }
.alarm h3 { margin-bottom: .6rem; }
.alarm p { margin: 0 0 .75rem; color: var(--on-sage-muted); }
.alarm p:last-child { margin: 0; font-weight: 700; color: var(--ink); }
@media (max-width: 860px) { .listen { grid-template-columns: 1fr; } }

/* 2. inside */
.inside { display: grid; grid-template-columns: .8fr 1.2fr; grid-template-areas: "img pts" "img stat"; gap: 1.5rem clamp(2rem, 5vw, 4rem); margin-top: var(--content-gap); align-items: start; }
.inside .spot { grid-area: img; align-self: center; }
.inside-points { grid-area: pts; display: grid; gap: 1.75rem; }
.inside-points > div { display: grid; grid-template-columns: 60px 1fr; column-gap: 1.1rem; }
.inside-points .ico { grid-row: span 2; width: 60px; height: 60px; padding: 9px; background: var(--white); border-radius: 50%; }
.inside-points h3 { margin-bottom: .35rem; }
.inside-points p { margin: 0; color: var(--muted); }
.not-alone { grid-area: stat; display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: center; padding: 1.5rem 1.75rem; background: var(--white); border-radius: var(--r-md); }
.not-alone b { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; color: var(--green); }
.not-alone p { margin: 0; font-size: 1.02rem; color: var(--muted); }
@media (max-width: 860px) { .inside { grid-template-columns: 1fr; grid-template-areas: "pts" "img" "stat"; } .inside .spot { max-width: 420px; } }
@media (max-width: 520px) { .not-alone { grid-template-columns: 1fr; gap: .5rem; } }

/* 3. the digestive tract map */
.journey-map { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; margin-top: var(--content-gap); }
.gi { position: relative; width: min(100%, 440px); aspect-ratio: 360 / 470; margin: 0; justify-self: center; }
.gi > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gi .tube path { fill: none; stroke: var(--sage); stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; }
.gi .tube path.esoph { stroke-width: 16; }
.gi .tube.small path { stroke-width: 20; stroke: var(--sage-tint); }
.gi .tube { filter: drop-shadow(0 0 0 var(--green)) drop-shadow(1.5px 0 0 var(--green)) drop-shadow(-1.5px 0 0 var(--green)) drop-shadow(0 1.5px 0 var(--green)) drop-shadow(0 -1.5px 0 var(--green)); }
.gi .stomach { fill: var(--sage); stroke: var(--green); stroke-width: 3; stroke-linejoin: round; }
.mk { display: inline-grid; place-items: center; width: 36px; height: 36px; font-size: .98rem; font-weight: 800; line-height: 1; border-radius: 50%; }
.mk.n { color: var(--green); background: var(--white); border: 3px solid var(--green); }
.mk.x { color: var(--on-green); background: var(--ink); border: 3px solid var(--white); box-shadow: 0 0 0 2px var(--ink); }
.gi .mk, .ripples .mk { position: absolute; z-index: 1; transform: translate(-50%, -50%); box-shadow: 0 8px 18px -8px rgba(29, 42, 36, .6); }
.gi .mk.x { box-shadow: 0 0 0 2px var(--ink), 0 8px 18px -8px rgba(29, 42, 36, .6); }
.map-legend h3 { font-size: 1.2rem; margin-bottom: 1rem; }
.map-legend h3 + .legend + h3 { margin-top: 2.25rem; }
.legend { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.legend li { display: grid; grid-template-columns: 36px 1fr; gap: 1rem; align-items: start; }
.legend b { display: block; font-size: 1.08rem; line-height: 1.3; margin-bottom: .15rem; }
.legend li > span:last-child { color: var(--muted); font-size: 1rem; line-height: 1.45; }
@media (max-width: 860px) { .journey-map { grid-template-columns: 1fr; } .gi { width: min(100%, 360px); } }

/* 4. signs: everyday symptoms and a dashboard of warning lights */
.signs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); margin-top: var(--content-gap); align-items: start; }
.sym-list { display: grid; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.sym-list li { display: grid; grid-template-columns: 56px 1fr; gap: 1rem; align-items: center; padding: 1rem 1.25rem; background: var(--white); border-radius: var(--r-sm); }
.sym-list .ico { width: 56px; height: 56px; padding: 8px; background: var(--paper); border-radius: 50%; }
.sym-list b { display: block; font-size: 1.08rem; }
.sym-list li > span { color: var(--muted); font-size: .98rem; line-height: 1.45; }
.dash { position: relative; padding: clamp(1.75rem, 3.5vw, 2.5rem); color: var(--on-green); background: var(--ink); border-radius: var(--r-lg); box-shadow: inset 0 0 0 6px #26362E, 0 30px 60px -30px rgba(29, 42, 36, .6); }
.dash h3 { font-size: 1.45rem; color: var(--on-green); }
.dash > p { margin: .6rem 0 1.75rem; color: var(--on-green-muted); font-size: 1.02rem; }
.lights { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; margin: 0; padding: 1.5rem 1rem; list-style: none; text-align: center; background: #26362E; border-radius: var(--r-md); }
.lights li { display: flex; flex-direction: column; align-items: center; }
.light { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: .7rem; background: var(--sage); border-radius: 50%; box-shadow: 0 0 0 5px rgba(217, 230, 209, .14), 0 0 26px 4px rgba(217, 230, 209, .35); animation: glow 2.6s ease-in-out infinite; }
.lights li:nth-child(2) .light { animation-delay: .65s; }
.lights li:nth-child(3) .light { animation-delay: 1.3s; }
.lights li:nth-child(4) .light { animation-delay: 1.95s; }
@keyframes glow { 50% { box-shadow: 0 0 0 5px rgba(217, 230, 209, .08), 0 0 10px 0 rgba(217, 230, 209, .15); } }
.light .ico { width: 46px; height: 46px; }
.lights b { font-size: 1.05rem; color: var(--on-green); }
.lights li > span:last-child { font-size: .92rem; color: var(--on-green-muted); }
@media (max-width: 900px) { .signs { grid-template-columns: 1fr; } }

/* 5. causes: tabs */
.tabs { margin-top: var(--content-gap); }
.tab-list { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; padding: .4rem; margin: 0 auto; width: fit-content; max-width: 100%; background: var(--paper); border-radius: 999px; }
.tab-list button { display: inline-flex; align-items: center; gap: .55rem; min-height: 52px; padding: 0 1.4rem 0 .9rem; font: 700 1.02rem "Kumbh Sans", sans-serif; color: var(--ink); background: transparent; border: 0; border-radius: 999px; cursor: pointer; transition: background-color .2s, color .2s; }
.tab-list button .ico { width: 34px; height: 34px; }
.tab-list button:hover { background: var(--white); }
.tab-list button[aria-selected="true"] { color: var(--on-green); background: var(--green); }
.tab-list button[aria-selected="true"] .ico { color: var(--on-green); }
.tab-panel { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-top: clamp(2rem, 4vw, 3rem); animation: panel-in .35s var(--ease-out); }
.tab-panel[hidden] { display: none; }
.tab-panel .spot { max-width: 400px; }
.cause-list { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; counter-reset: c; }
.cause-list li { counter-increment: c; display: grid; grid-template-columns: 2.5rem 1fr; column-gap: .75rem; padding-bottom: 1.5rem; border-bottom: 1.5px solid var(--line); }
.cause-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.cause-list li::before { content: counter(c); grid-row: span 2; font-size: 1.8rem; font-weight: 800; line-height: 1; color: var(--sage); -webkit-text-stroke: 1.5px var(--green); }
.cause-list h3 { margin-bottom: .3rem; }
.cause-list p { margin: 0; color: var(--muted); }
#p-conditions { display: block; }
#p-conditions[hidden] { display: none; }
.families { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.families > li { padding: 1.5rem 1.5rem 1rem; background: var(--paper); border-radius: var(--r-md); }
.families h3 { display: flex; align-items: center; gap: .7rem; font-size: 1.15rem; }
.families h3 .ico { flex: none; width: 46px; height: 46px; padding: 6px; background: var(--white); border-radius: 50%; }
.fam-sub { margin: .35rem 0 .75rem; font-size: .95rem; color: var(--muted); }
.families details { border-top: 1.5px solid var(--line); }
.families summary { display: flex; justify-content: space-between; align-items: center; gap: .75rem; min-height: 50px; padding: .5rem 0; font-weight: 700; cursor: pointer; list-style: none; }
.families summary::-webkit-details-marker { display: none; }
.families summary::after { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v10M5 10h10' stroke='%232F5E4E' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 70% no-repeat; transition: transform .25s var(--ease-out); }
.families details[open] summary::after { transform: rotate(45deg); }
.families details p { margin: 0 0 1rem; font-size: .98rem; color: var(--muted); }
@media (max-width: 1000px) { .families { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .tab-panel { grid-template-columns: 1fr; }
  .tab-panel .spot { max-width: 260px; }
  .families { grid-template-columns: 1fr; }
  .tab-list { width: auto; border-radius: var(--r-md); justify-content: stretch; }
  .tab-list button { flex: 1 1 auto; justify-content: center; padding: 0 1rem 0 .7rem; }
}

/* 6. ripples */
.ripples-wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.ripples { position: relative; width: min(100%, 460px); aspect-ratio: 1; justify-self: center; }
.ring { position: absolute; left: 50%; top: 50%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); border: 2px solid var(--green); }
.r1 { width: 34%; background: var(--green); border: 0; }
.r2 { width: 56%; background: rgba(47, 94, 78, .14); border-style: solid; }
.r3 { width: 78%; background: rgba(47, 94, 78, .07); border-style: dashed; opacity: .75; }
.r4 { width: 100%; border-style: dashed; opacity: .4; }
.drop-core { position: absolute; left: 50%; top: 50%; width: 30%; transform: translate(-50%, -50%); text-align: center; font-weight: 800; font-size: clamp(.85rem, 1.5vw, 1.05rem); line-height: 1.2; color: var(--on-green); }
.ripple-list { margin-top: 2rem; }
@media (max-width: 900px) { .ripples-wrap { grid-template-columns: 1fr; } .ripples { width: min(100%, 360px); order: 2; } }

/* 7. relief staircase */
.stairs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; align-items: end; margin: var(--content-gap) 0 0; padding: 0; list-style: none; }
.stairs > li { display: flex; flex-direction: column; }
.step-top { padding: 0 1.25rem 1.5rem; }
.step-top .ico { width: 64px; height: 64px; padding: 10px; margin-bottom: .9rem; background: var(--white); border: 3px solid var(--green); border-radius: 50%; }
.step-top h3 { margin-bottom: .6rem; }
.step-top ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.step-top li { position: relative; padding-left: 1.1rem; font-size: .98rem; line-height: 1.4; color: var(--muted); }
.step-top li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 2px; background: var(--green); transform: rotate(45deg); }
.tread { display: flex; align-items: flex-start; padding: .9rem 1.25rem; font-weight: 800; font-size: .95rem; color: var(--green); border-top: 4px solid var(--green); }
.s1 .tread { height: 64px; background: var(--sage-tint); border-radius: var(--r-sm) 0 0 var(--r-sm); }
.s2 .tread { height: 128px; background: #DDE8D6; }
.s3 .tread { height: 192px; background: var(--sage); }
.s4 .tread { height: 256px; background: #C6D9BC; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
@media (max-width: 960px) {
  .stairs { grid-template-columns: 1fr; gap: .75rem; max-width: 560px; margin-inline: auto; }
  .stairs > li { flex-direction: row-reverse; justify-content: flex-end; align-items: stretch; }
  /* phones: the steps turn sideways; each riser bar gets wider and darker, with its step label running up it */
  .tread, .s1 .tread, .s2 .tread, .s3 .tread, .s4 .tread { height: auto; padding: .9rem 0; border-top: 0; border-radius: var(--r-sm); flex: none; justify-content: flex-end; align-items: center; writing-mode: vertical-rl; transform: rotate(180deg); font-size: .8rem; letter-spacing: .04em; }
  .s1 .tread { width: 2rem; } .s2 .tread { width: 2.6rem; } .s3 .tread { width: 3.2rem; } .s4 .tread { width: 3.8rem; }
  .step-top { flex: 1; padding: 1.25rem 0 1.25rem 1.25rem; }
}

/* 8. tea tags */
.teas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin: var(--content-gap) 0 0; padding: 0; list-style: none; border-top: 4px solid var(--green); }
.teas li { display: flex; flex-direction: column; align-items: center; }
.teas li::before { content: ""; width: 2px; height: var(--len); background: repeating-linear-gradient(to bottom, #8FA58C 0 6px, transparent 6px 9px); }
.tag { position: relative; display: block; width: 100%; max-width: 250px; padding: 2.4rem 1.4rem 1.6rem; font-size: .98rem; line-height: 1.45; color: var(--muted); text-align: center; background: var(--white); border-radius: 10px 10px var(--r-sm) var(--r-sm); box-shadow: 0 18px 30px -18px rgba(29, 42, 36, .5); transform: rotate(var(--tilt)); transform-origin: top center; transition: transform .5s var(--ease-out); clip-path: polygon(22% 0, 78% 0, 100% 12%, 100% 100%, 0 100%, 0 12%); }
.teas li:hover .tag { transform: rotate(calc(var(--tilt) * -1)); }
.tag::before { content: ""; position: absolute; left: 50%; top: .85rem; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px #8FA58C; }
.tag b { display: block; margin-bottom: .4rem; font-size: 1.15rem; color: var(--ink); }
.natural-more { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: var(--content-gap); }
.natural-more > div { display: grid; grid-template-columns: 64px 1fr; column-gap: 1.1rem; padding: clamp(1.5rem, 3vw, 2rem); background: var(--white); border-radius: var(--r-md); }
.natural-more .ico { grid-row: span 2; width: 64px; height: 64px; padding: 10px; background: var(--paper); border-radius: 50%; }
.natural-more h3 { margin-bottom: .45rem; }
.natural-more p { margin: 0; color: var(--muted); }
.natural-more b { color: var(--ink); }
@media (max-width: 960px) { .teas { grid-template-columns: 1fr 1fr; border-top: 0; row-gap: 2.5rem; } .teas li::before { height: 26px; } .tag { transform: none; } }
@media (max-width: 760px) { .natural-more { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .teas { grid-template-columns: 1fr; } .natural-more > div { grid-template-columns: 1fr; } .natural-more .ico { margin-bottom: .75rem; } }

/* 9. gut-brain */
.gut-brain { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; max-width: 760px; margin: var(--content-gap) auto 0; }
.gut-brain .end { display: flex; flex-direction: column; align-items: center; gap: .5rem; font-size: 1.05rem; }
.gut-brain .end .ico { width: 104px; height: 104px; padding: 18px; background: var(--sage-tint); border-radius: 50%; }
.gut-brain .wire { width: 100%; height: 60px; overflow: visible; }
.gut-brain .wire path { fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 2 9; }
.gut-brain .wire path.head { stroke-dasharray: none; }
.gut-brain figcaption { grid-column: 1 / -1; text-align: center; margin-top: 1rem; font-weight: 700; font-size: 1.1rem; }
.habits { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: var(--content-gap); }
.habits > div { display: grid; grid-template-columns: 140px 1fr; gap: 1.5rem; align-items: center; padding: 1.25rem; background: var(--paper); border-radius: var(--r-lg); }
.habits img { width: 140px; border-radius: var(--r-md); }
.habits h3 { margin-bottom: .4rem; }
.habits p { margin: 0; color: var(--muted); font-size: 1.02rem; }
@media (max-width: 860px) { .habits { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .gut-brain .end .ico { width: 76px; height: 76px; padding: 13px; } .habits > div { grid-template-columns: 96px 1fr; gap: 1rem; } .habits img { width: 96px; } }

/* 10. closing */
.closing { text-align: center; }
.closing .ch-n { color: var(--on-sage-muted); }
.closing blockquote { font-size: clamp(2rem, 4.2vw, 3.5rem); }
.guide-body .quote-band { margin-top: 0; }

/* ===================== Legal: Privacy Policy, Disclaimer ===================== */
.legal-hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.legal-hero .meta { margin: 1rem 0 1.5rem; }
.legal-intro p, .legal-intro li { max-width: 36rem; font-size: 1.05rem; color: var(--muted); }
.legal-intro p { margin: 0 0 1rem; }
.legal-intro ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.legal-intro li { margin-bottom: .35rem; }
.legal-intro li::marker { color: var(--green); }
.legal-intro strong { color: var(--ink); }
.legal-intro a { color: var(--green); font-weight: 600; }
/* the privacy label: a nutrition facts panel */
.facts { padding: 1.25rem 1.5rem 1.4rem; background: var(--white); border: 3px solid var(--ink); border-radius: 6px; box-shadow: 0 40px 70px -40px rgba(29, 42, 36, .5); transform: rotate(1deg); }
.facts h2 { font-size: clamp(2.1rem, 3.6vw, 2.9rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.facts-sub { margin: .35rem 0 0; padding-bottom: .6rem; font-size: .98rem; font-weight: 600; border-bottom: 12px solid var(--ink); }
.facts dl { margin: 0; }
.facts dl > div { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: .6rem 0; border-bottom: 1.5px solid var(--ink); font-size: .95rem; line-height: 1.35; }
.facts dl > div.big { grid-template-columns: 1fr auto; align-items: baseline; padding: .7rem 0; border-bottom: 6px solid var(--ink); }
.facts dl > div.big dt { font-size: 1.15rem; font-weight: 800; }
.facts dl > div.big dd { font-size: 1.6rem; font-weight: 800; color: var(--green); }
.facts dt { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
.facts dt .ico { flex: none; width: 26px; height: 26px; }
.facts dd { margin: 0; color: var(--muted); }
.facts-foot { margin: .7rem 0 0; font-size: .85rem; color: var(--muted); }
@media (max-width: 900px) { .legal-hero .wrap { grid-template-columns: 1fr; } .facts { transform: none; max-width: 520px; } }
@media (max-width: 480px) { .facts dl > div { grid-template-columns: 1fr; gap: .15rem; } .facts dd { padding-left: 2.1rem; } }

/* the full notice: side list of sections and readable legal text */
.legal-body { padding-top: var(--section); }
.prose.legal { font-size: 1.06rem; line-height: 1.7; }
.prose.legal > p:first-child { font-size: inherit; }
.prose.legal h2 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); margin-top: 2.4em; }
.prose.legal h3 { font-size: 1.18rem; }
.prose.legal em { font-style: normal; color: var(--muted); }
.prose.legal table { width: 100%; margin: 0 0 1.5em; border-collapse: collapse; font-size: .95rem; line-height: 1.5; }
.prose.legal th, .prose.legal td { padding: .7rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.prose.legal th { background: var(--paper); }
.prose.legal td:last-child { font-weight: 700; white-space: nowrap; }
.prose.legal p, .prose.legal li { overflow-wrap: anywhere; }
.summary-box { padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--sage-tint); border-radius: var(--r-lg); }
.prose.legal .summary-box h2 { margin-top: 0; }
.summary-box p:last-child { margin-bottom: 0; }
@media (max-width: 600px) { .prose.legal table { display: block; overflow-x: auto; } }

/* disclaimer */
.disclaimer-hero .intro { max-width: 48rem; color: var(--ink); }
.emergency { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: start; max-width: 960px; margin: 0 auto; padding: clamp(1.75rem, 4vw, 2.5rem); color: var(--on-green); background: var(--ink); border-radius: var(--r-lg); }
.emergency .ico { width: 72px; height: 72px; padding: 12px; background: var(--sage); border-radius: 50%; box-shadow: 0 0 0 6px rgba(217, 230, 209, .14), 0 0 26px 4px rgba(217, 230, 209, .3); }
.emergency h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--on-green); margin-bottom: .6rem; }
.emergency p { margin: 0; color: var(--on-green-muted); }
.emergency b { color: var(--on-green); }
.readable-head { margin-top: var(--section); }
.fine-print { max-width: 1040px; margin: var(--content-gap) auto 0; padding: 0; list-style: none; }
.fine-print li { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.5rem, 4vw, 3.5rem); padding: 2rem 0; border-top: 1.5px solid var(--line); }
.fine-print li:last-child { border-bottom: 1.5px solid var(--line); }
.plain { display: grid; grid-template-columns: 64px 1fr; gap: 1.1rem; align-items: center; }
.plain .ico { width: 64px; height: 64px; padding: 10px; background: var(--paper); border-radius: 50%; }
.plain h3 { font-size: clamp(1.2rem, 1.8vw, 1.4rem); }
.fine-print p { margin: 0; font-size: 1rem; color: var(--muted); }
.fine-print p b { color: var(--ink); }
.acknowledge { max-width: 760px; margin: var(--content-gap) auto 0; text-align: center; }
.acknowledge p { margin: 0; font-size: 1.15rem; font-weight: 600; }
.acknowledge .actions { justify-content: center; }
@media (max-width: 760px) { .fine-print li { grid-template-columns: 1fr; gap: 1rem; } .emergency { grid-template-columns: 1fr; } }
.families > li.fam-ask { display: flex; flex-direction: column; align-items: flex-start; color: var(--on-green); background: var(--green); }
.fam-ask .ico { width: 56px; height: 56px; padding: 8px; margin-bottom: 1rem; color: var(--green); background: var(--on-green); border-radius: 50%; }
.fam-ask h3 { color: var(--on-green); }
.fam-ask p { flex: 1; margin: .5rem 0 1.25rem; color: var(--on-green-muted); font-size: .98rem; }
.fam-ask .btn { margin-bottom: .5rem; }
.how-savi { overflow-x: clip; }
/* the guide's chapters run full width, so below 1380px the contents tab floats bottom-left instead of covering the text edge */
@media (max-width: 1380px) {
  html[data-toc="drawer"] .guide-page .toc-tab { top: auto; bottom: 1.25rem; left: .75rem; writing-mode: horizontal-tb; transform: none; padding: .8rem 1.1rem; border-radius: 999px; }
  html[data-toc="drawer"] .guide-page .toc-tab:hover { padding-right: 1.1rem; }
  html[data-toc="drawer"] .guide-page .toc-tab svg { transform: none; }
}

/* ---------- course waitlist dialog (components/Notify.astro) ---------- */
  .notify { width: min(100% - 2rem, 34rem); padding: 0; border: 0; border-radius: var(--r-lg); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-card); }
  .notify::backdrop { background: rgba(29, 42, 36, .55); }
  .notify-card { position: relative; padding: clamp(2rem, 5vw, 2.75rem); }
  .notify-card > .ico { width: 56px; height: 56px; margin-bottom: 1rem; }
  .notify-card h2 { margin: 0 0 .5rem; }
  .notify-card .intro { margin: 0 0 1.5rem; }
  .notify-card .inline { background: var(--white); }
  .notify-card .agree { align-items: flex-start; margin-top: 1rem; font-size: .92rem; line-height: 1.45; }
  .notify-card .agree input { flex: none; margin-top: .15rem; }
  .notify-close { position: absolute; top: .9rem; right: .9rem; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--muted); background: transparent; border: 0; border-radius: 50%; cursor: pointer; }
  .notify-close:hover { color: var(--ink); background: var(--sage-tint); }
  .notify-close svg { width: 20px; height: 20px; }
  .ts:empty { display: none; }

/* ===================== Recipe page (pages/recipes/[slug].astro) ===================== */
.recipe-hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.recipe-hero h1 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); line-height: 1.06; }
.recipe-hero .meal { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .9rem; font-weight: 700; color: var(--green); }
.recipe-hero .meal .ico { width: 30px; height: 30px; }
.recipe-intro p { margin: 1.25rem 0 0; color: var(--muted); max-width: 36rem; }
.recipe-hero .dials { margin: 1.75rem 0 2rem; }
.dial.serves .ico { width: 52px; height: 52px; padding: 8px; background: var(--white); border: 3px solid var(--green); border-radius: 50%; }
.recipe-photo { margin: 0; }
.recipe-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-card); transform: rotate(1.5deg); }

.recipe-main .wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.recipe-main h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
/* ingredients: a notepad with a binding at the top and ruled lines */
.shopping { position: sticky; top: 100px; padding: 2.25rem clamp(1.5rem, 3vw, 2rem) 1.75rem; background: var(--white); border: 2px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-card); }
.shopping::before { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: -12px; height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='24'%3E%3Cpath d='M17 4a5 5 0 0 1 5 5v8a5 5 0 0 1-10 0V9a5 5 0 0 1 5-5z' fill='%23F5F3EA' stroke='%232F5E4E' stroke-width='2.5'/%3E%3C/svg%3E") 0 0 / 34px 24px space no-repeat; background-repeat: space no-repeat; }
.shopping .hint { margin: .35rem 0 1rem; font-size: .95rem; color: var(--muted); }
.shopping h3 { margin: 1.25rem 0 .25rem; font-size: 1.05rem; color: var(--green); }
.shopping ul { margin: 0; padding: 0; list-style: none; }
.shopping li { border-bottom: 1.5px solid var(--line); }
.shopping label { display: flex; align-items: flex-start; gap: .75rem; padding: .7rem 0; font-size: 1.02rem; line-height: 1.45; cursor: pointer; }
.shopping input { flex: none; width: 20px; height: 20px; margin: .15rem 0 0; }
.shopping input:checked + span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--green); text-decoration-thickness: 2px; }
/* steps: numbered stops joined by a line */
.method-steps { position: relative; margin: 2rem 0 0; padding: 0; list-style: none; }
.method-steps li { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 1.25rem; padding-bottom: 2rem; scroll-margin-top: 100px; }
.method-steps li:not(:last-child)::before { content: ""; position: absolute; left: 25px; top: 52px; bottom: 0; width: 2.5px; background: var(--sage); }
.method-steps .n { display: grid; place-items: center; width: 52px; height: 52px; font-size: 1.3rem; font-weight: 800; color: var(--on-green); background: var(--green); border-radius: 50%; }
.method-steps h3 { margin: .65rem 0 .35rem; font-size: 1.2rem; }
.method-steps p { margin: 0; color: var(--ink); }
.method-steps li > div > p:first-child { margin-top: .75rem; }

.recipe-extras .wrap { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.notes h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.notes dl { margin: 1.5rem 0 0; }
.notes dl > div { padding: 1rem 0; border-top: 1.5px solid var(--line); }
.notes dt { display: flex; align-items: center; gap: .6rem; font-weight: 700; }
.notes dt .ico { flex: none; width: 32px; height: 32px; }
.notes dd { margin: .35rem 0 0 2.6rem; color: var(--muted); }
.recipe-extras .facts { max-width: 400px; justify-self: end; width: 100%; }
.recipe-extras .facts dl > div { grid-template-columns: 1fr auto; }
.recipe-extras .facts dd { color: var(--ink); font-weight: 700; }

.recipe-closing { text-align: center; padding-bottom: 0; }
.recipe-closing .intro { margin-inline: auto; max-width: 44rem; }

@media (max-width: 900px) {
  .recipe-hero .wrap, .recipe-main .wrap, .recipe-extras .wrap { grid-template-columns: 1fr; }
  .recipe-photo { order: -1; max-width: 520px; }
  .shopping { position: static; }
  .recipe-extras .facts { justify-self: start; }
}
@media (max-width: 480px) { .method-steps li { grid-template-columns: 42px 1fr; gap: 1rem; } .method-steps .n { width: 42px; height: 42px; font-size: 1.1rem; } .method-steps li:not(:last-child)::before { left: 20px; top: 42px; } }

/* cards without a photo */
.no-img { display: grid; place-items: center; aspect-ratio: 3 / 2; background: var(--sage); }
.recipe .no-img { aspect-ratio: 1; }
.no-img img { width: 30%; opacity: .9; }
.ico-figure { display: grid; place-items: center; aspect-ratio: 1; background: var(--paper); border-radius: var(--r-lg); }
.ico-figure .ico { width: 45%; height: 45%; }

/* ---------- small form pages (SMS sign-up, data request) ---------- */
.form-hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.form-hero .big-ico { width: 92px; height: 92px; padding: 14px; margin-bottom: 1.5rem; background: var(--white); border-radius: 50%; box-shadow: var(--shadow-card); }
.form-hero .copy p:not(.intro) { color: var(--muted); }
.form-hero .small { font-size: .95rem; }
.form-hero .ask { margin-top: 0; justify-self: end; width: 100%; }
.basic input[type=text], .basic input[type=tel], .basic input[type=email], .basic select { display: block; width: 100%; min-height: 54px; padding: .8rem 1rem; margin-bottom: 1.1rem; font: inherit; color: var(--ink); background: var(--paper); border: 1.5px solid var(--paper); border-radius: var(--r-sm); }
.basic input:focus, .basic select:focus { outline: none; border-color: var(--green); background: var(--white); }
.basic [aria-invalid="true"] { border-color: #A23B2A; }
.basic .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.basic .agree { align-items: flex-start; margin-bottom: 1.25rem; }
.basic .agree input { flex: none; margin-top: .2rem; }
@media (max-width: 860px) { .form-hero .wrap { grid-template-columns: 1fr; } .form-hero .ask { justify-self: start; } }
@media (max-width: 480px) { .basic .two { grid-template-columns: 1fr; } }

/* blog listing: the newest 12 until "Show all" (or a topic) */
.posts.collapsed > li[data-more] { display: none; }
.more-posts { margin-top: var(--content-gap); text-align: center; }
.more-posts[hidden] { display: none; }
.recipe-main.no-method .wrap { grid-template-columns: minmax(0, 36rem); justify-content: center; }

/* Dr. Ted's open yes/no questions: staging builds only (PUBLIC_STAGING=1), never on the live site */
.review-box { margin: 2.5rem 0; padding: 1.5rem 1.75rem; border: 3px dashed #C8771E; border-radius: 14px; background: #FFF6E8; color: var(--ink); }
.review-box h2 { margin: 0 0 .5rem; font-size: 1.35rem; }
.review-box h2 small { font-size: .8rem; font-weight: 600; color: #8A5212; }
.review-box p { margin: 0 0 .75rem; }
.review-box ol { margin: 0; padding-left: 1.4rem; line-height: 1.6; }
.review-box li { margin-bottom: .35rem; }

/* Citation links [n] -> the sources list (2026-10-21) */
.prose a.cite { text-decoration: none; font-size: .78em; vertical-align: super; line-height: 0; padding: 0 .05em; color: var(--green); font-weight: 600; }
.prose a.cite:hover { text-decoration: underline; }
.prose ol.sources { font-size: .9rem; line-height: 1.55; }
.prose ol.sources li { scroll-margin-top: 110px; padding: .15rem .4rem; border-radius: 6px; transition: background .4s; }
.prose ol.sources li:target { background: var(--sage-tint); }

/* FAQ: expandable questions (2026-10-21) */
.prose .faq { display: grid; gap: .75rem; margin: 1.25rem 0 2rem; }
.prose .faq-item { border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.prose .faq-item[open] { border-color: var(--sage); box-shadow: 0 2px 10px rgba(29, 42, 36, .06); }
.prose .faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; }
.prose .faq-item summary::-webkit-details-marker { display: none; }
.prose .faq-item summary h3 { margin: 0; font-size: 1.1rem; line-height: 1.35; }
.prose .faq-item summary::after { content: ""; flex: none; width: .65rem; height: .65rem; border-right: 2.5px solid var(--green); border-bottom: 2.5px solid var(--green); transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.prose .faq-item[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.prose .faq-item summary:hover { background: var(--sage-tint); }
.prose .faq-a { padding: 0 1.25rem 1rem; }
.prose .faq-a > :last-child { margin-bottom: 0; }
.review-box ol > li { margin-bottom: .9rem; }
.review-box .q { display: block; }
.review-box .yn { display: inline-flex; gap: .4rem; margin: .4rem .6rem .2rem 0; vertical-align: middle; }
.review-box .yn input { position: absolute; opacity: 0; pointer-events: none; }
.review-box .yn span { display: inline-block; min-width: 4.2rem; padding: .35rem .9rem; text-align: center; font-weight: 700; border: 2px solid #C8771E; border-radius: 999px; background: #fff; cursor: pointer; }
.review-box .yn input:focus-visible + span { outline: 3px solid var(--green); outline-offset: 2px; }
.review-box .yn input[value="yes"]:checked + span { background: var(--green); border-color: var(--green); color: #fff; }
.review-box .yn input[value="no"]:checked + span { background: #A23B2A; border-color: #A23B2A; color: #fff; }
.review-box textarea { width: 100%; margin-top: .3rem; padding: .45rem .7rem; font: inherit; font-size: .95rem; border: 1.5px solid #E7C99A; border-radius: 10px; background: #fff; resize: vertical; }
.review-box .review-comment { display: block; margin-top: 1rem; font-weight: 700; }
.review-box .review-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.review-box .review-save { padding: .7rem 1.4rem; font: 700 1rem inherit; font-family: inherit; color: #fff; background: var(--green); border: 0; border-radius: 999px; cursor: pointer; }
.review-box .review-save:hover { background: var(--green-hover); }
.review-box .review-status { font-weight: 600; color: #8A5212; }

/* Images inside articles, with a caption (2026-10-21) */
.prose .inline-figure { margin: 2rem 0; }
.prose .inline-figure img { display: block; width: 100%; height: auto; border-radius: 16px; background: var(--sage-tint); }
.prose .inline-figure figcaption { margin-top: .6rem; font-size: .92rem; line-height: 1.5; color: #4F6156; text-align: center; }

/* Cookie banner (2026-10-24): our own, bottom-left card; production only (CookieBanner.astro) */
.cookie { position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 60; width: min(27rem, calc(100vw - 2.5rem)); max-height: calc(100vh - 2.5rem); overflow-y: auto; padding: 1.4rem 1.5rem 1.5rem; background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: 0 1px 2px rgba(29, 42, 36, .06), 0 24px 48px -16px rgba(29, 42, 36, .35); font-size: .95rem; line-height: 1.5; animation: cookie-in .5s var(--ease-out) both; }
.cookie[hidden] { display: none; }
@keyframes cookie-in { from { opacity: 0; translate: 0 16px; } }
.cookie h2 { margin: 0 0 .4rem; font-size: 1.1rem; line-height: 1.3; }
.cookie p { margin: 0; color: var(--muted); }
.cookie p a { color: var(--green); font-weight: 600; }
.cookie-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.1rem; }
.cookie .btn.sm { min-height: 42px; padding: 0 1.1rem; font-size: .95rem; }
.cookie-more { padding: .5rem .25rem; font: 600 .95rem "Kumbh Sans", sans-serif; color: var(--green); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cookie-prefs { display: grid; gap: .8rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.cookie-prefs[hidden] { display: none; }
.cookie-prefs label { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; }
.cookie-prefs input { flex: none; width: 1.15rem; height: 1.15rem; margin: .2rem 0 0; }
.cookie-prefs b { display: block; color: var(--ink); }
.cookie-prefs span { color: var(--muted); font-size: .9rem; }
.cookie-prefs .btn { justify-self: start; }
.linklike { padding: 0; font: inherit; color: inherit; background: none; border: 0; text-decoration: underline; cursor: pointer; }
@media (max-width: 480px) { .cookie { left: .75rem; bottom: .75rem; width: calc(100vw - 1.5rem); padding: 1.1rem 1.15rem 1.2rem; } }
@media (prefers-reduced-motion: reduce) { .cookie { animation: none; } }

.inline + .ts, .inline + .inline-msg { margin-top: .75rem; }