/* =============================================================================
   teas.co.uk — Homepage v2 base stylesheet
   Prefix: .hp-   ·  Fonts: Instrument Serif, DM Sans, JetBrains Mono
   Tokens and keyframes are IDENTICAL to teas-recipes-hub.css / page-wiki-v2.css.
   Load AFTER design-system.css and c-sitewide-polish.css.
   Fonts (already enqueued site-wide on /recipes/ and /wiki/):
   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
   ========================================================================== */

:root {
  --hp-ink:        #0E0F12;
  --hp-ink-deep:   #042220;
  --hp-ink-body:   #2a3a37;
  --hp-muted:      #4b5551;
  --hp-teal:       #30d8c8;
  --hp-teal-mint:  #5eead4;
  --hp-teal-link:  #0b6b5f;
  --hp-teal-head:  #0b8b7a;
  --hp-clay:       #c44b4b;
  --hp-page:       #fbfbfa;
  --hp-paper:      #ffffff;
  --hp-mist:       #eff7f6;      /* the ONLY second tint */
  --hp-line:       rgba(14,15,18,.09);
  --hp-line-deep:  rgba(4,34,32,.10);
  --hp-serif: 'Instrument Serif', Georgia, serif;
  --hp-sans:  'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --hp-mono:  'JetBrains Mono', ui-monospace, monospace;
  --hp-r-band: clamp(22px,3vw,32px);
  --hp-r-card: 16px;
  --hp-gap: 14px;
  --hp-section: 64px;
}

.hp { background: var(--hp-page); color: var(--hp-ink); font-family: var(--hp-sans); -webkit-font-smoothing: antialiased; }
.hp * { box-sizing: border-box; }
.hp h1, .hp h2, .hp h3, .hp h4 { margin: 0; font-weight: 400; }
.hp p { margin: 0; }
.hp a { color: var(--hp-teal-link); text-decoration: none; }
.hp a:hover { color: var(--hp-ink-deep); text-decoration: underline; }
.hp-shell { max-width: 1240px; margin: 0 auto; padding: 24px 28px 0; }

/* ---------- shared type utilities ---------------------------------------- */
.hp-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--hp-mono);
  font-size: 12px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; color: var(--hp-clay); }
.hp-eyebrow .pip { width: 8px; height: 8px; border-radius: 50%; background: var(--hp-clay);
  box-shadow: 0 0 14px rgba(196,75,75,.45); animation: hp-pip 1.9s ease-in-out infinite; }
.hp-h2 { font-family: var(--hp-serif); font-size: clamp(30px,3.8vw,44px); line-height: 1.03; }
.hp-h2 em, .hp-h3 em, .hp-title em { font-style: italic; color: var(--hp-teal-head); }
.hp-h3 { font-family: var(--hp-serif); font-size: 24px; line-height: 1.12; }
.hp-meta { font-family: var(--hp-mono); font-size: 11px; letter-spacing: .10em; text-transform: uppercase; color: var(--hp-muted); }
.hp-more { font-family: var(--hp-mono); font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--hp-teal-link); }
.hp-pill { font-family: var(--hp-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--hp-teal-link); background: var(--hp-mist); border-radius: 999px; padding: 6px 11px; }
.hp-sechead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px 24px; border-bottom: 1px solid rgba(14,15,18,.10); padding-bottom: 16px; margin-bottom: 22px; }
.hp-btn { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 14px 24px;
  border-radius: 999px; background: var(--hp-ink-deep); color: #fff; font-family: var(--hp-mono);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hp-btn:hover { color: #fff; text-decoration: none; }

/* =========================================================================
   ANIMATED BAND — copied VERBATIM from the recipes hero. Timings ARE the design.
   Markup: .hp-band > .hp-band__blobs(3 × .hp-band__blob--a/b/c) + .hp-band__dots
           + .hp-band__sheenwrap > .hp-band__sheen + content (z-index 1)
   ========================================================================= */
.hp-band { position: relative; isolation: isolate; overflow: hidden; color: var(--hp-ink);
  border: 1px solid var(--hp-line-deep); border-radius: var(--hp-r-band); padding: clamp(26px,3.6vw,46px);
  background: linear-gradient(155deg,#eff7f6 0%,#dff2ec 52%,#f7fbf6 100%); }
.hp-band__blobs { position: absolute; inset: 0; pointer-events: none; animation: hp-hue 26s linear infinite; }
.hp-band__blob { position: absolute; border-radius: 50%; }
.hp-band__blob--a { width: 540px; height: 540px; left: -140px; top: -190px; animation: hp-blob-a 19s ease-in-out infinite;
  background: radial-gradient(circle at 40% 40%, rgba(94,234,212,.85), rgba(94,234,212,0) 68%); }
.hp-band__blob--b { width: 480px; height: 480px; right: -110px; top: -140px; animation: hp-blob-b 23s ease-in-out infinite;
  background: radial-gradient(circle at 50% 50%, rgba(255,190,132,.62), rgba(255,190,132,0) 66%); }
.hp-band__blob--c { width: 560px; height: 560px; left: 34%; bottom: -300px; animation: hp-blob-c 29s ease-in-out infinite;
  background: radial-gradient(circle at 50% 50%, rgba(140,196,255,.58), rgba(140,196,255,0) 68%); }
.hp-band__dots { position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(4,34,32,.11) 1px, transparent 1px); background-size: 22px 22px;
  animation: hp-grid 7s linear infinite, hp-pulse 8s ease-in-out infinite; }
.hp-band__sheenwrap { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hp-band__sheen { position: absolute; top: -10%; bottom: -10%; width: 24%; animation: hp-sheen 11s ease-in-out infinite;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.6), rgba(255,255,255,0)); }
.hp-band > .hp-band__in { position: relative; z-index: 1; }

/* =========================================================================
   HERO — Ask Lee (widget markup unchanged; only the shell is restyled)
   ========================================================================= */
.hp-hero { margin-top: 28px; }
.hp-hero__in { display: flex; flex-wrap: wrap; gap: 32px 44px; align-items: center; }
.hp-hero__copy { flex: 1 1 440px; min-width: 0; }
.hp-hero__side { flex: 1 1 380px; min-width: 0; }
.hp-hero h1 { font-family: var(--hp-sans); font-size: clamp(36px,5.2vw,58px); font-weight: 800;
  letter-spacing: -.032em; line-height: .95; margin: 16px 0 0; text-wrap: balance; }
.hp-hero h1 em { font-family: var(--hp-serif); font-style: italic; font-weight: 400;
  color: var(--hp-teal-head); letter-spacing: -.012em; }
.hp-hero__lede { font-size: 17px; line-height: 1.6; color: var(--hp-ink-body); max-width: 44ch; margin: 20px 0 0; }
.hp-hero__lede strong { font-weight: 700; color: var(--hp-ink); }
.hp-hero__good { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; max-width: 52ch; }
.hp-hero__good li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.5; color: var(--hp-ink-body); }
.hp-hero__good li::before { content: ''; position: absolute; left: 0; top: .55em; width: 7px; height: 7px;
  border-radius: 50%; background: var(--hp-teal-head); }

/* Ask Lee chat panel — restyle only; the .asklee__* markup + JS stay as they are */
.hp-hero .asklee__chat { min-height: 470px; background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  border: 1px solid var(--hp-line-deep); border-radius: 22px; box-shadow: 0 30px 70px -44px rgba(13,33,29,.5); }
.hp-hero .asklee__avatar, .hp-hero .asklee__rowav { background: linear-gradient(155deg,#5eead4,#0b8b7a); color: var(--hp-ink-deep); }
.hp-hero .asklee__bubble { background: var(--hp-mist); color: #171a1d; font-size: 14.5px; }
.hp-hero .asklee__row--user .asklee__bubble { background: var(--hp-ink-deep); color: #fff; }
.hp-hero .asklee__send { width: 44px; height: 44px; background: var(--hp-ink-deep); color: var(--hp-teal-mint); }
.hp-hero .asklee__beta { font-size: 10px; background: var(--hp-clay); }
.hp-hero .asklee__online { font-size: 10px; color: var(--hp-teal-link); background: var(--hp-mist); border-color: rgba(11,139,122,.3); }
.hp-hero .asklee__sub, .hp-hero .asklee__login { font-size: 14px; color: var(--hp-muted); }
.hp-hero .asklee__bg { display: none; }          /* the page band replaces the widget's own gradient */

/* =========================================================================
   TEA OF THE DAY
   ========================================================================= */
.hp-totd { margin-top: 56px; }
.hp-totd .hp-band { background: linear-gradient(150deg,#f7fbf6 0%,#eff7f6 55%,#ffffff 100%); padding: clamp(26px,3.4vw,42px); }
.hp-totd__head { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.hp-totd__tabs { display: inline-flex; gap: 4px; padding: 4px; background: rgba(255,255,255,.66);
  border: 1px solid var(--hp-line-deep); border-radius: 999px; backdrop-filter: blur(6px); }
.hp-totd__tab { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent;
  color: var(--hp-muted); border-radius: 999px; padding: 10px 16px; min-height: 44px; cursor: pointer;
  font-family: var(--hp-mono); font-size: 10px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; }
.hp-totd__tab[aria-selected="true"] { background: #fff; color: var(--hp-ink); box-shadow: 0 8px 18px -14px rgba(42,32,51,.42); }
.hp-totd__tab .now { width: 5px; height: 5px; border-radius: 50%; background: var(--hp-teal-head);
  box-shadow: 0 0 0 4px rgba(11,139,122,.13); flex: none; }
.hp-totd__intro { margin: 16px 0 0; max-width: 70ch; font-family: var(--hp-serif);
  font-size: clamp(17px,1.8vw,21px); line-height: 1.45; color: var(--hp-ink-body); }
.hp-totd__stage { margin-top: 24px; }
.hp-totd__face { display: grid; grid-template-columns: 236px 1fr; gap: clamp(20px,3vw,40px); align-items: center; }
.hp-totd__face[hidden], .hp-totd__face:not(.is-active) { display: none; }
.hp-totd__pic { position: relative; display: block; width: 236px; height: 268px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 14%,#fff,#eaf2f1);
  box-shadow: 0 24px 50px -28px rgba(42,32,51,.42), 0 0 0 1px rgba(4,34,32,.08); }
.hp-totd__pic img { width: 100%; height: 100%; object-fit: cover; }
.hp-totd__pickedfor { font-family: var(--hp-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--hp-muted); }
.hp-totd__context { font-family: var(--hp-mono); font-size: 11px; letter-spacing: .10em; text-transform: uppercase; color: var(--hp-teal-link); margin-top: 8px; }
.hp-totd__brand { font-family: var(--hp-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--hp-muted); margin-top: 14px; }
.hp-totd__title { font-family: var(--hp-serif); font-size: clamp(28px,3.4vw,44px); line-height: 1.02; letter-spacing: -.015em; margin: 6px 0 0; }
.hp-totd__title a { color: var(--hp-ink); }
.hp-totd__note { font-family: var(--hp-serif); font-style: italic; font-size: 16px; line-height: 1.5; color: var(--hp-ink-body); margin: 14px 0 0; max-width: 62ch; }
.hp-totd__foot { display: flex; align-items: center; gap: 16px 20px; flex-wrap: wrap; margin-top: 20px; }
.hp-totd__price { display: flex; align-items: baseline; gap: 8px; }
.hp-totd__price .v { font-family: var(--hp-serif); font-size: 36px; line-height: 1; }
.hp-totd__stars { color: #b27755; letter-spacing: .08em; font-size: 14px; }   /* tone colour kept from live page */
.hp-totd__stock { display: inline-flex; align-items: center; gap: 7px; font-family: var(--hp-mono);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--hp-teal-link); }
.hp-totd__stock .d { width: 6px; height: 6px; border-radius: 50%; background: var(--hp-teal-head); box-shadow: 0 0 0 4px rgba(11,139,122,.13); }

/* =========================================================================
   WAYS IN — two hero tiles + eight even cards
   ========================================================================= */
.hp-ways { margin-top: var(--hp-section); }
.hp-ways__heroes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hp-gap); }
.hp-wayhero { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--hp-paper);
  border: 1px solid var(--hp-line); border-radius: 22px; box-shadow: 0 24px 60px -46px rgba(4,34,32,.45); color: var(--hp-ink); }
.hp-wayhero:hover { text-decoration: none; }
.hp-wayhero__art { position: relative; overflow: hidden; height: 168px;
  background: linear-gradient(165deg,#fff5ec 0%,#ffe0d2 48%,#f3ecff 100%); }          /* Tea Club */
.hp-wayhero--find .hp-wayhero__art { background: linear-gradient(155deg,#eff7f6 0%,#dff2ec 52%,#f7fbf6 100%); }
.hp-wayhero__blobs { position: absolute; inset: 0; pointer-events: none; animation: hp-hue 34s linear infinite; }
.hp-wayhero__dots { position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(14,15,18,.07) 1px, transparent 1px); background-size: 20px 20px; animation: hp-grid 9s linear infinite; }
.hp-wayhero__flag { position: absolute; left: 22px; bottom: 20px; font-family: var(--hp-mono); font-size: 10px;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8a4b32;
  background: rgba(255,255,255,.78); border-radius: 999px; padding: 7px 13px; }
.hp-wayhero--find .hp-wayhero__flag { color: var(--hp-teal-link); }
.hp-wayhero__body { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 26px; }
.hp-wayhero__body h3 { font-family: var(--hp-serif); font-size: clamp(26px,2.8vw,34px); line-height: 1.06; }
.hp-wayhero__body p { font-size: 15px; line-height: 1.6; color: var(--hp-muted); margin: 12px 0 0; max-width: 52ch; }
.hp-wayhero__body .hp-more { margin-top: auto; padding-top: 20px; }

.hp-ways__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px,1fr)); gap: var(--hp-gap); margin-top: var(--hp-gap); }
.hp-way { display: flex; flex-direction: column; background: var(--hp-paper); border: 1px solid var(--hp-line);
  border-radius: var(--hp-r-card); box-shadow: 0 1px 2px rgba(4,34,32,.05); padding: 20px 20px 18px;
  color: var(--hp-ink); transition: border-color .18s ease, transform .18s ease; }
.hp-way:hover { border-color: rgba(4,34,32,.28); transform: translateY(-2px); text-decoration: none; }
.hp-way .hp-pill { align-self: flex-start; }
.hp-way h3 { font-family: var(--hp-serif); font-size: 24px; line-height: 1.12; margin: 16px 0 0; }
.hp-way p { font-size: 14px; line-height: 1.55; color: var(--hp-muted); margin: 10px 0 16px; }
.hp-way .hp-more { margin-top: auto; }
.hp-way--mist { background: var(--hp-mist); border-color: var(--hp-line-deep); }
.hp-way--mist .hp-pill { background: #fff; }
.hp-way--mist p { color: var(--hp-ink-body); }

/* =========================================================================
   CURATOR'S TOP PICKS — rail
   ========================================================================= */
.hp-picks { margin-top: var(--hp-section); }
.hp-picks__controls { display: flex; align-items: center; gap: 10px; }
.hp-picks__nav { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 999px; background: #fff; border: 1px solid rgba(14,15,18,.12); color: var(--hp-ink-deep); cursor: pointer; }
.hp-picks__track { display: flex; gap: var(--hp-gap); overflow-x: auto; overflow-y: hidden; padding: 4px 4px 18px;
  margin: 0 -4px; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; }
.hp-pick { position: relative; display: flex; flex-direction: column; flex: 0 0 284px; width: 284px;
  scroll-snap-align: start; background: var(--hp-paper); border: 1px solid var(--hp-line);
  border-radius: var(--hp-r-card); overflow: hidden; box-shadow: 0 1px 2px rgba(4,34,32,.05); color: var(--hp-ink); }
.hp-pick:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -18px rgba(4,34,32,.35); text-decoration: none; }
.hp-pick__pic { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; background: var(--hp-page);
  border-bottom: 1px solid var(--hp-line); overflow: hidden; }
.hp-pick__pic img { width: 100%; height: 100%; object-fit: contain; padding: 22px; }
.hp-pick__body { display: flex; flex-direction: column; gap: 9px; padding: 18px 18px 20px; flex: 1; }
.hp-pick__brand { font-family: var(--hp-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hp-teal-link); }
.hp-pick__title { font-family: var(--hp-serif); font-size: 21px; line-height: 1.1; }
.hp-pick__stars { display: inline-flex; align-items: center; gap: 8px; font-family: var(--hp-mono);
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--hp-muted); }
.hp-pick__stars .s { color: #e8a838; letter-spacing: 1px; font-size: 12px; }   /* tone colour kept from live page */
.hp-pick__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 8px; }
.hp-pick__price { font-family: var(--hp-serif); font-size: 22px; line-height: 1.1; }
.hp-pick--feature { flex: 0 0 320px; width: 320px; border-color: rgba(11,139,122,.34); box-shadow: 0 24px 56px -42px rgba(4,34,32,.5); }
.hp-pick--feature .hp-pick__pic { background: linear-gradient(155deg,#eff7f6,#dff2ec 60%,#fbfbfa); }
.hp-pick--feature .hp-pick__title { font-size: 23px; }
.hp-pick__flag { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; border-radius: 999px; background: var(--hp-ink-deep); color: var(--hp-teal-mint);
  font-family: var(--hp-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* =========================================================================
   LIVE PICKS + JOURNAL
   ========================================================================= */
.hp-live { margin-top: 56px; display: grid; grid-template-columns: minmax(0,1.55fr) minmax(300px,.82fr);
  gap: var(--hp-gap); align-items: stretch; }
.hp-live__panel { background: var(--hp-paper); border: 1px solid var(--hp-line); border-radius: 22px;
  padding: clamp(22px,2.6vw,30px); box-shadow: 0 1px 2px rgba(4,34,32,.05); }
.hp-live__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.hp-prod { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--hp-line);
  border-radius: var(--hp-r-card); overflow: hidden; background: var(--hp-page); color: var(--hp-ink); }
.hp-prod:hover { text-decoration: none; }
.hp-prod__pic { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; background: #fff;
  border-bottom: 1px solid var(--hp-line); overflow: hidden; }
.hp-prod__pic img { width: 100%; height: 100%; object-fit: contain; padding: 16px; }
.hp-prod__body { display: flex; flex-direction: column; gap: 6px; padding: 14px; }
.hp-prod__body h3 { font-family: var(--hp-serif); font-size: 19px; line-height: 1.1; }
.hp-prod__price { font-family: var(--hp-serif); font-size: 19px; margin-top: auto; }
.hp-prod__price del { color: var(--hp-muted); font-size: 15px; margin-right: 6px; }
.hp-journal { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(155deg,#eff7f6 0%,#dff2ec 52%,#f7fbf6 100%); border: 1px solid var(--hp-line-deep);
  border-radius: 22px; padding: clamp(22px,2.6vw,30px); color: var(--hp-ink); }
.hp-journal:hover { text-decoration: none; }
.hp-journal h3 { font-family: var(--hp-serif); font-size: clamp(28px,3.2vw,38px); line-height: 1.04; margin: 14px 0 12px; }
.hp-journal p { font-size: 14.5px; line-height: 1.58; color: var(--hp-ink-body); }
.hp-journal > * { position: relative; z-index: 1; }
.hp-journal .hp-band__blobs, .hp-journal .hp-band__dots { z-index: 0; }

/* =========================================================================
   KEYFRAMES — copy verbatim, timings are part of the design
   ========================================================================= */
@keyframes hp-hue    { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
@keyframes hp-blob-a { 0% { transform: translate3d(0,0,0) scale(1); } 33% { transform: translate3d(90px,40px,0) scale(1.18); } 66% { transform: translate3d(30px,-52px,0) scale(.92); } 100% { transform: translate3d(0,0,0) scale(1); } }
@keyframes hp-blob-b { 0% { transform: translate3d(0,0,0) scale(1.05); } 40% { transform: translate3d(-110px,54px,0) scale(.88); } 75% { transform: translate3d(-40px,-36px,0) scale(1.22); } 100% { transform: translate3d(0,0,0) scale(1.05); } }
@keyframes hp-blob-c { 0% { transform: translate3d(0,0,0) scale(.95); } 50% { transform: translate3d(64px,-70px,0) scale(1.3); } 100% { transform: translate3d(0,0,0) scale(.95); } }
@keyframes hp-pip    { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(1.35); } }
@keyframes hp-pulse  { 0%,100% { opacity: .40; } 50% { opacity: .95; } }
@keyframes hp-grid   { from { background-position: 0 0; } to { background-position: 44px 44px; } }
@keyframes hp-sheen  { 0% { transform: translateX(-40%) skewX(-12deg); opacity: 0; } 45% { opacity: .55; } 100% { transform: translateX(140%) skewX(-12deg); opacity: 0; } }

/* =========================================================================
   v2.3 — signed-off adjustments. These override the blocks above; keep them
   at the END of the file. Nothing here changes copy or markup order.
   ========================================================================= */

/* --- hero -------------------------------------------------------------- */
.hp-hero .hp-eyebrow { font-size: 14px; letter-spacing: .12em; }        /* kicker one step up */
.hp-hero h1 { font-size: clamp(40px,6cqw,70px); letter-spacing: -.036em; line-height: .92; margin: 14px 0 0; }
.hp-hero h1 em { font-size: 1.1em; line-height: .98; display: inline-block; margin-top: 2px; }
.hp-hero__lede { position: relative; font-size: 18px; line-height: 1.62; max-width: 47ch; margin: 22px 0 0;
  padding-left: 18px; border-left: 3px solid var(--hp-teal-mint); }
/* bullets: hairline rows, not boxes */
.hp-hero__good { display: flex; flex-direction: column; gap: 0; max-width: 44ch; margin: 24px 0 0; }
.hp-hero__good li { display: flex; gap: 13px; align-items: flex-start; padding: 11px 0; font-size: 15.5px;
  line-height: 1.5; color: var(--hp-ink-body); border-bottom: 1px solid rgba(4,34,32,.10); }
.hp-hero__good li:first-child { padding-top: 0; }
.hp-hero__good li:last-child { border-bottom: 0; }
.hp-hero__good li::before { content: ''; position: static; flex: none; width: 9px; height: 9px; margin-top: 7px;
  border-radius: 50%; background: var(--hp-teal-head); box-shadow: 0 0 0 4px rgba(11,139,122,.14); }
.hp-hero .asklee__chat { min-height: 520px; }                            /* +10% height, width unchanged */
.hp-hero .asklee__input { height: 44px; line-height: 44px; padding: 0 14px; text-overflow: ellipsis; }
/* the widget's input must be a single-line <input>, NOT <textarea rows="1"> —
   at 420px the placeholder wraps and the second line is clipped. */

/* --- tea of the day ---------------------------------------------------- */
/* Own colourway (warm), muted 50% so it never competes with the hero above,
   and its hue cycle is offset by -11s so the two bands are never in phase. */
.hp-totd .hp-band { background: linear-gradient(150deg,#fffcf8 0%,#fdf6f1 54%,#faf8fd 100%); }
.hp-totd .hp-band__blobs { animation-delay: -11s; opacity: .36; }
.hp-totd .hp-band__blob--a { width: 460px; height: 460px; left: -130px; top: auto; bottom: -210px;
  background: radial-gradient(circle at 40% 40%, rgba(247,178,104,.44), rgba(247,178,104,0) 70%); }
.hp-totd .hp-band__blob--b { width: 400px; height: 400px; right: -100px; top: -170px;
  background: radial-gradient(circle at 50% 50%, rgba(203,158,232,.34), rgba(203,158,232,0) 68%); }
.hp-totd .hp-band__blob--c { width: 340px; height: 340px; left: 44%; top: -150px; bottom: auto;
  background: radial-gradient(circle at 50% 50%, rgba(238,132,132,.22), rgba(238,132,132,0) 70%); }
/* readability on the tinted band — mono meta was too light */
.hp-totd__pickedfor { font-size: 12px; font-weight: 700; color: #2b3a36; }
.hp-totd__context   { font-weight: 600; color: #0a6053; }
.hp-totd__brand,
.hp-totd__spec      { font-weight: 600; color: #2b3a36; }
.hp-totd__rating,
.hp-totd__percup    { font-weight: 600; color: #2b3a36; }
.hp-totd__stock     { font-weight: 600; color: #0a6053; }
.hp-totd__stars     { color: #9a5f33; font-size: 15px; letter-spacing: .10em; }
.hp-totd__note      { font-size: 18.5px; line-height: 1.55; color: #16241f; margin: 16px 0 0; max-width: 56ch; }

/* --- cursor trail ("the little balls") --------------------------------- */
/* Needs hp-cursor-trail.js. The canvas is inserted as the FIRST child at
   z-index 0, so every other child must establish a stacking position. */
.hp-way, .hp-recipe, .hp-wikifamily, .hp-person { position: relative; overflow: hidden; }
.hp-way > *, .hp-recipe > *, .hp-wikifamily > *, .hp-person > * { position: relative; z-index: 1; }
.hp-way        { --hp-glow-ink: #0b8b7a; }   /* per-tile ink set inline from the tile's own colour */
.hp-person     { --hp-glow-ink: #0b8b7a; }
.hp-wikifamily--black { --hp-glow-ink: #3B2F26; }
.hp-wikifamily--green { --hp-glow-ink: #4A8272; }
/* recipe tiles inherit --hp-glow-ink from the family ink already set inline */

/* --- news row: must sit on the SAME grid as the row above it ------------ */
.hp-newsrow { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(300px,.82fr);
  gap: var(--hp-gap); align-items: stretch; margin-top: var(--hp-gap); }
.hp-newsrow__stories { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: var(--hp-gap); align-items: stretch; }
.hp-newscard { display: flex; flex-direction: column; gap: 6px; background: var(--hp-paper);
  border: 1px solid var(--hp-line); border-radius: 18px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(4,34,32,.05);
  color: var(--hp-ink); transition: transform .22s cubic-bezier(.32,.72,0,1), box-shadow .22s ease; }
.hp-newscard:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -34px rgba(4,34,32,.42); text-decoration: none; }
.hp-newscard--all { justify-content: center; border: 1px dashed rgba(14,15,18,.20); background: var(--hp-mist); }
@media (max-width: 900px) { .hp-newsrow { grid-template-columns: 1fr; } }

/* --- fluid type note ---------------------------------------------------- */
/* The reference file uses cqw units because the four viewport states are
   rendered inside a fixed-width frame. In production the page IS the viewport,
   so vw and cqw are equivalent — either unit ships. */

/* =========================================================================
   SECTIONS ADDED IN v2.1–v2.3 — recipes, wiki, news row, newsletter, footer.
   (The chrome selectors below describe the EXISTING theme markup; they are
   here only so the device layers have something to target. Do not restyle
   the nav, marquee or footer beyond what is listed.)
   ========================================================================= */

/* --- shared chips ------------------------------------------------------- */
.hp-chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 15px;
  border-radius: 999px; border: 1px solid rgba(4,34,32,.08); background: var(--hp-mist);
  font-size: 13.5px; font-weight: 600; color: var(--hp-teal-link); transition: background .16s ease, border-color .16s ease; }
.hp-chip:hover { border-color: rgba(11,139,122,.42); text-decoration: none; }

/* --- hero stat bar ------------------------------------------------------ */
.hp-hero__stats { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 26px;
  padding: 12px 20px; border-radius: 999px; background: rgba(255,255,255,.72);
  border: 1px solid var(--hp-line-deep); backdrop-filter: blur(6px); }
.hp-hero__stats .n { font-family: var(--hp-serif); font-size: 24px; line-height: 1; }
.hp-hero__stats .l { font-family: var(--hp-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--hp-muted); }

/* --- recipes preview ---------------------------------------------------- */
.hp-recipes { margin-top: var(--hp-section); }
.hp-recipe-feature { display: grid; grid-template-columns: minmax(200px,26%) minmax(320px,1fr);
  background: var(--hp-paper); border: 1px solid var(--hp-line); border-radius: 22px; overflow: hidden;
  box-shadow: 0 24px 60px -46px rgba(4,34,32,.45); }
.hp-recipe-feature__pic { position: relative; overflow: hidden; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 22px;
  border-right: 1px solid var(--hp-line); background: linear-gradient(160deg,#fff3f4,#ffe3e6 55%,#fdf0e6); }
.hp-recipe-feature__pic img { position: relative; width: 100%; max-width: 172px; height: auto;
  animation: hp-float 6s ease-in-out infinite; }
.hp-recipe-cols { display: grid; grid-template-columns: minmax(0,.62fr) minmax(0,1fr); gap: clamp(20px,2.2vw,28px); }
.hp-recipes__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--hp-gap); margin-top: var(--hp-gap); }
.hp-recipe { display: flex; flex-direction: column; border: 1px solid var(--hp-line); border-radius: var(--hp-r-card);
  overflow: hidden; background: var(--hp-paper); color: var(--hp-ink);
  transition: transform .22s cubic-bezier(.32,.72,0,1), box-shadow .22s ease; }
.hp-recipe:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -34px rgba(4,34,32,.42); text-decoration: none; }
.hp-recipe__pic { display: block; height: 132px; background-size: cover; background-position: center; }
.hp-recipe__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 7px; }
.hp-recipe__title { font-family: var(--hp-serif); font-size: 20px; line-height: 1.1; }

/* --- wiki preview ------------------------------------------------------- */
.hp-wiki { margin-top: var(--hp-section); }
.hp-wiki__top { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: clamp(20px,3vw,40px); align-items: start; }
.hp-wiki__counts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px;
  background: rgba(255,255,255,.72); border: 1px solid var(--hp-line-deep); border-radius: 20px; padding: 20px; backdrop-filter: blur(6px); }
.hp-wiki__counts .n { font-family: var(--hp-serif); font-size: 30px; line-height: 1; }
.hp-wiki__counts .l { font-family: var(--hp-mono); font-size: 11px; letter-spacing: .10em; text-transform: uppercase; color: var(--hp-muted); margin-top: 4px; }
.hp-wiki__families { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: var(--hp-gap); margin-top: 26px; }
.hp-wikifamily { position: relative; overflow: hidden; background: var(--hp-paper); border: 1px solid var(--hp-line-deep);
  border-radius: 20px; box-shadow: 0 20px 50px -40px rgba(4,34,32,.5); }
.hp-wikifamily__spine { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; opacity: .9; }
.hp-wikifamily__in { position: relative; padding: 24px 26px 26px 28px; }
.hp-wiki__people { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-top: var(--hp-gap); }
.hp-person { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 18px;
  background: rgba(255,255,255,.78); border: 1px solid var(--hp-line-deep); color: var(--hp-ink);
  border-left: 3px solid rgba(11,139,122,.55); transition: transform .22s cubic-bezier(.32,.72,0,1); }
.hp-person:hover { transform: translateY(-3px); text-decoration: none; }
.hp-wiki__index { columns: 3; column-gap: 26px; margin-top: 22px; }
.hp-wiki__index a { display: block; break-inside: avoid; padding: 9px 0; font-size: 14.5px; color: var(--hp-ink-body);
  border-bottom: 1px solid rgba(4,34,32,.08); }
.hp-wiki__index a:hover { color: var(--hp-ink-deep); }

/* --- newsletter band + footer (existing chrome, sizes only) ------------- */
.hp-signup__in { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,.8fr); gap: 26px; align-items: center; }
.hp-signup__form { display: flex; gap: 10px; align-items: center; }
.hp-signup__form input { flex: 1; min-height: 44px; }
.hp-signup__form button { min-height: 44px; }
.hp-foot__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 26px 20px; }

@keyframes hp-float { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-9px) rotate(-2.5deg); } }

/* --- performance -------------------------------------------------------- */
/* The dot-grid layers repaint every frame; contain them so the browser does
   not re-rasterise the whole page. No visual change. */
.hp-band, .hp-way, .hp-recipe, .hp-person, .hp-wikifamily { contain: paint; }
/* Every product image is lazy + async except the tea-of-the-day plate that is
   visible on load: that one is loading="eager" fetchpriority="high". */

/* accessibility — mandatory */
@media (prefers-reduced-motion: reduce) { .hp *, .hp-band * { animation: none !important; } }
/* Homepage integration layer. Shared header/footer/Ask Lee retain their own styles. */
body.teas-homepage-v2 { --hp-ink:#0e0f12; --hp-green:#042220; --hp-teal:#0b8b7a; --hp-pink:#e84898; --hp-paper:#f4f7f4; background:var(--hp-paper); color:var(--hp-ink); }
body.teas-homepage-v2 .site-main, body.teas-homepage-v2 #main { max-width:none; padding:0; }
.hp2, .hp2 * { box-sizing:border-box; }
.hp2 { font-family:'DM Sans',sans-serif; overflow:hidden; background:linear-gradient(180deg,#eef8f6 0,#f7f4ee 25%,#f5f7f4 100%); }
.hp2 a { color:inherit; text-decoration:none; }
.hp2 img { display:block; max-width:100%; }
.hp2-hero { max-width:1240px; margin:0 auto; padding:clamp(44px,7vw,92px) 28px clamp(56px,8vw,104px); display:grid; grid-template-columns:minmax(0,.9fr) minmax(480px,1.1fr); gap:clamp(36px,6vw,86px); align-items:center; position:relative; }
.hp2-hero:before { content:''; position:absolute; width:620px; height:620px; border-radius:50%; right:-260px; top:-260px; background:radial-gradient(circle,rgba(65,222,195,.32),transparent 68%); pointer-events:none; }
.hp2-eyebrow,.hp2-kicker { margin:0; font:700 11px/1.2 'JetBrains Mono',monospace; letter-spacing:.13em; text-transform:uppercase; color:#0b6b5f; }
.hp2-eyebrow { display:flex; align-items:center; gap:9px; }
.hp2-eyebrow span { width:8px; height:8px; border-radius:50%; background:var(--hp-pink); box-shadow:0 0 0 6px rgba(232,72,152,.12); }
.hp2 h1,.hp2 h2,.hp2 h3 { font-family:'Instrument Serif',Georgia,serif; font-weight:400; letter-spacing:-.025em; color:var(--hp-green); text-wrap:balance; }
.hp2 h1 { font-size:clamp(64px,7.6vw,112px); line-height:.83; margin:22px 0 26px; }
.hp2 h1 em,.hp2 h2 em,.hp2 h3 em { color:var(--hp-teal); font-weight:400; }
.hp2-hero__lede { font-size:clamp(16px,1.5vw,19px); line-height:1.65; color:#32433f; max-width:60ch; }
.hp2-promises { list-style:none; padding:0; margin:26px 0; display:grid; gap:10px; }
.hp2-promises li { display:flex; align-items:center; gap:12px; font-weight:700; }
.hp2-promises span { font:700 10px/1 'JetBrains Mono',monospace; color:#c44b4b; border:1px solid rgba(196,75,75,.25); padding:7px 8px; border-radius:999px; }
.hp2-stats { display:flex; gap:0; margin-top:30px; border-top:1px solid rgba(4,34,32,.12); padding-top:20px; }
.hp2-stats div { display:flex; flex-direction:column; min-width:110px; padding-right:22px; margin-right:22px; border-right:1px solid rgba(4,34,32,.12); }
.hp2-stats div:last-child { border:0; }
.hp2-stats strong { font:400 32px/1 'Instrument Serif',Georgia,serif; color:var(--hp-green); }
.hp2-stats span { margin-top:6px; font:700 9px/1.2 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; color:#60706b; }
.hp2-asklee { position:relative; z-index:1; min-width:0; }
.hp2-asklee .asklee__chat { min-height:520px; box-shadow:0 40px 90px -45px rgba(4,34,32,.55); }
.hp2-section { max-width:1240px; margin:0 auto; padding:clamp(64px,9vw,118px) 28px; }
.hp2-section + .hp2-section { border-top:1px solid rgba(4,34,32,.08); }
.hp2-heading { display:flex; justify-content:space-between; gap:36px; align-items:flex-end; margin-bottom:30px; }
.hp2-heading > div:first-child { max-width:730px; }
.hp2-heading h2 { margin:8px 0 0; font-size:clamp(42px,5.3vw,72px); line-height:.98; }
.hp2-heading > p { max-width:430px; margin:0; color:#4b5551; line-height:1.65; }
.hp2-heading--row { align-items:flex-end; }
.hp2-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.hp2-tabs button { appearance:none; text-align:left; border:1px solid rgba(4,34,32,.12); border-radius:16px; padding:17px 20px; background:rgba(255,255,255,.65); cursor:pointer; color:#4b5551; transition:.2s ease; }
.hp2-tabs button span { display:block; font-weight:800; font-size:15px; }
.hp2-tabs button small { display:block; margin-top:4px; font:700 10px 'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.08em; }
.hp2-tabs button[aria-selected=true] { background:var(--hp-green); color:#fff; transform:translateY(-2px); box-shadow:0 18px 30px -24px rgba(4,34,32,.7); }
.hp2-totd__panel { display:grid; grid-template-columns:minmax(360px,.95fr) minmax(0,1.05fr); min-height:510px; background:#fff; border:1px solid rgba(4,34,32,.1); border-radius:28px; overflow:hidden; }
.hp2-totd__panel[hidden] { display:none; }
.hp2-totd__visual { position:relative; display:grid; place-items:center; min-height:460px; padding:56px; background:radial-gradient(circle at 50% 42%,#fff 0 18%,#dff3ed 55%,#cde7df 100%); overflow:hidden; }
.hp2-totd__visual img { width:min(370px,88%); height:min(370px,88%); object-fit:contain; position:relative; z-index:1; filter:drop-shadow(0 28px 24px rgba(4,34,32,.18)); }
.hp2-orbit { position:absolute; width:70%; aspect-ratio:1; border-radius:50%; border:1px dashed rgba(11,139,122,.35); animation:hp-spin 24s linear infinite; }
@keyframes hp-spin { to { transform:rotate(360deg); } }
.hp2-totd__copy { padding:clamp(38px,6vw,76px); display:flex; flex-direction:column; justify-content:center; }
.hp2-totd__copy h3 { margin:12px 0 16px; font-size:clamp(40px,4.6vw,62px); line-height:.98; }
.hp2-context { font-size:17px; line-height:1.6; color:#42524e; }
.hp2-product-meta { display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; margin:20px 0 28px; color:#53615e; font-size:14px; }
.hp2-product-meta .hp2-price { font:400 28px/1 'Instrument Serif',Georgia,serif; color:var(--hp-green); }
.hp2-actions { display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
.hp2-button { display:inline-flex; justify-content:center; align-items:center; min-height:46px; padding:0 18px; border-radius:999px; font:700 11px 'JetBrains Mono',monospace; letter-spacing:.05em; text-transform:uppercase; border:1px solid rgba(4,34,32,.13); transition:transform .18s ease,box-shadow .18s ease,background .18s ease; }
.hp2-button:hover { transform:translateY(-2px); box-shadow:0 15px 25px -20px rgba(4,34,32,.7); }
.hp2-button--dark { background:var(--hp-green); color:#fff!important; border-color:var(--hp-green); }
.hp2-button--light { background:#fff; color:var(--hp-green)!important; }
.hp2-button--pink { background:var(--hp-pink); color:#fff!important; border-color:var(--hp-pink); }
.hp2-rail-controls { display:flex; gap:8px; }
.hp2-rail-controls button { width:46px; height:46px; border-radius:50%; border:1px solid rgba(4,34,32,.13); background:#fff; color:var(--hp-green); cursor:pointer; font-size:18px; }
.hp2-rail { display:grid; grid-auto-flow:column; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:inline mandatory; scrollbar-width:none; padding:4px 0 24px; }
.hp2-rail::-webkit-scrollbar { display:none; }
.hp2-ways__rail { grid-auto-columns:minmax(280px,32%); gap:14px; }
.hp2-way { scroll-snap-align:start; min-height:385px; border-radius:22px; padding:24px; background:var(--way-tint); border:1px solid color-mix(in srgb,var(--way-ink) 18%,transparent); display:flex; flex-direction:column; position:relative; overflow:hidden; transition:transform .22s ease; }
.hp2-way:after { content:''; position:absolute; width:210px; height:210px; right:-90px; bottom:-110px; border-radius:50%; border:1px solid color-mix(in srgb,var(--way-ink) 22%,transparent); box-shadow:0 0 0 22px color-mix(in srgb,var(--way-ink) 5%,transparent),0 0 0 48px color-mix(in srgb,var(--way-ink) 4%,transparent); }
.hp2-way:hover { transform:translateY(-5px); }
.hp2-way__number { font:700 11px 'JetBrains Mono',monospace; color:var(--way-ink); }
.hp2-way__pill { align-self:flex-start; margin-top:18px; border:1px solid color-mix(in srgb,var(--way-ink) 22%,transparent); border-radius:999px; padding:6px 10px; font:700 9px 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--way-ink); }
.hp2-way strong { font:400 34px/1.02 'Instrument Serif',Georgia,serif; color:var(--way-ink); margin-top:18px; max-width:10ch; }
.hp2-way__body { margin-top:14px; line-height:1.55; color:#3e4b47; max-width:31ch; }
.hp2-way__cta { margin-top:auto; padding-top:30px; font:700 10px 'JetBrains Mono',monospace; color:var(--way-ink); text-transform:uppercase; letter-spacing:.05em; position:relative; z-index:1; }
.hp2-products { grid-auto-columns:minmax(230px,24%); gap:13px; }
.hp2-product { scroll-snap-align:start; border-radius:18px; overflow:hidden; background:#fff; border:1px solid rgba(4,34,32,.1); display:flex; flex-direction:column; }
.hp2-product__image { aspect-ratio:1; position:relative; display:grid; place-items:center; background:var(--card-tint); padding:24px; overflow:hidden; }
.hp2-product__image:after { content:''; position:absolute; inset:14%; border:1px dashed color-mix(in srgb,var(--card-ink) 30%,transparent); border-radius:50%; }
.hp2-product__image img { width:86%; height:86%; object-fit:contain; position:relative; z-index:1; filter:drop-shadow(0 18px 15px rgba(4,34,32,.14)); transition:transform .3s ease; }
.hp2-product:hover img { transform:scale(1.04) rotate(-1deg); }
.hp2-product__image > span { position:absolute; top:12px; left:12px; z-index:2; padding:5px 8px; border-radius:999px; background:#fff; color:var(--card-ink); font:700 8px 'JetBrains Mono',monospace; letter-spacing:.06em; text-transform:uppercase; }
.hp2-product__body { padding:16px; display:flex; flex-direction:column; flex:1; }
.hp2-product__body p { margin:0; color:var(--card-ink); font:700 9px 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
.hp2-product__body h3 { margin:8px 0 18px; font-size:21px; line-height:1.1; }
.hp2-product__foot { display:flex; justify-content:space-between; gap:10px; margin-top:auto; align-items:end; font-size:13px; }
.hp2-product__foot > span:first-child { font:400 20px 'Instrument Serif',Georgia,serif; color:var(--hp-green); }
.hp2-center { text-align:center; margin-top:22px; }
.hp2-text-link { font:700 11px 'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.06em; color:#0b6b5f!important; }
.hp2-recipes { max-width:none; padding-left:max(28px,calc((100vw - 1184px)/2)); padding-right:max(28px,calc((100vw - 1184px)/2)); background:#fffaf5; }
.hp2-recipe-feature { display:grid; grid-template-columns:minmax(360px,.9fr) minmax(0,1.1fr); border-radius:28px; overflow:hidden; background:var(--hp-green); color:#fff; }
.hp2-recipe-feature__image { min-height:680px; position:relative; overflow:hidden; background:#dfeee8; }
.hp2-recipe-feature__image img { width:100%; height:100%; object-fit:cover; }
.hp2-recipe-feature__image span { position:absolute; left:24px; bottom:24px; padding:8px 12px; border-radius:999px; background:rgba(4,34,32,.84); color:#fff; font:700 9px 'JetBrains Mono',monospace; letter-spacing:.06em; text-transform:uppercase; }
.hp2-recipe-feature__copy { padding:clamp(34px,5vw,68px); }
.hp2-recipe-feature__copy .hp2-kicker { color:#8fe5d2; }
.hp2-recipe-feature__copy h3 { font-size:clamp(46px,5vw,70px); line-height:.98; color:#fff; margin:12px 0 20px; }
.hp2-recipe-feature__copy > p { color:#c8d6d2; line-height:1.62; }
.hp2-badges { display:flex; flex-wrap:wrap; gap:7px; margin:20px 0; }
.hp2-badges span { border:1px solid rgba(255,255,255,.19); border-radius:999px; padding:7px 10px; font:700 9px 'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.05em; }
.hp2-recipe-columns { display:grid; grid-template-columns:1fr 1fr; gap:26px; padding-top:18px; border-top:1px solid rgba(255,255,255,.15); }
.hp2-recipe-columns h4 { margin:0 0 10px; font:700 11px 'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.08em; color:#8fe5d2; }
.hp2-recipe-columns ul,.hp2-recipe-columns ol { margin:0; padding-left:19px; color:#d9e3e0; font-size:13px; line-height:1.6; }
.hp2-outcome { border-left:3px solid var(--hp-pink); padding-left:14px; margin:22px 0!important; }
.hp2-recipe-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-top:18px; }
.hp2-recipe-card { border:1px solid color-mix(in srgb,var(--recipe-ink) 17%,transparent); border-radius:18px; overflow:hidden; background:#fff; transition:transform .22s ease; }
.hp2-recipe-card:hover { transform:translateY(-4px); }
.hp2-recipe-card__image { display:block; aspect-ratio:1.18; background:var(--recipe-tint); overflow:hidden; }
.hp2-recipe-card__image img { width:100%; height:100%; object-fit:cover; }
.hp2-recipe-card__copy { display:flex; flex-direction:column; padding:16px; min-height:220px; }
.hp2-recipe-card small,.hp2-recipe-card em,.hp2-recipe-card b { font:700 9px 'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.05em; color:var(--recipe-ink); }
.hp2-recipe-card strong { font:400 25px/1.06 'Instrument Serif',Georgia,serif; color:var(--hp-green); margin:8px 0; }
.hp2-recipe-card em { font-style:normal; margin-bottom:10px; }
.hp2-recipe-card__copy > span { font-size:13px; line-height:1.52; color:#4b5551; }
.hp2-recipe-card b { margin-top:auto; padding-top:14px; }
.hp2-wiki { max-width:none; padding-left:max(28px,calc((100vw - 1184px)/2)); padding-right:max(28px,calc((100vw - 1184px)/2)); background:linear-gradient(135deg,#e7f4f1,#f7f4ec 72%); }
.hp2-wiki__intro { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; }
.hp2-wiki__intro > div:first-child { max-width:670px; }
.hp2-wiki__intro h2 { margin:10px 0 16px; font-size:clamp(46px,5.4vw,72px); line-height:.98; }
.hp2-wiki__intro p:last-child { line-height:1.65; color:#34433f; }
.hp2-wiki__stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; min-width:340px; }
.hp2-wiki__stats div { background:rgba(255,255,255,.78); border:1px solid rgba(4,34,32,.09); border-radius:14px; padding:14px; }
.hp2-wiki__stats strong { display:block; font-size:25px; color:var(--hp-green); }
.hp2-wiki__stats span { display:block; margin-top:5px; font:700 9px 'JetBrains Mono',monospace; text-transform:uppercase; color:#596661; }
.hp2-family-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:28px; }
.hp2-family { position:relative; overflow:hidden; background:#fff; border:1px solid rgba(4,34,32,.1); border-radius:20px; padding:26px 28px; }
.hp2-family:before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--family); }
.hp2-family--black { --family:#1a1410; }
.hp2-family--green { --family:#4a8272; }
.hp2-family > p:first-child { font:700 9px 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; color:#69736f; }
.hp2-family h3 { font-size:32px; margin:10px 0; }
.hp2-family > p:nth-of-type(2) { line-height:1.6; color:#42504c; }
.hp2-family > div { display:flex; flex-wrap:wrap; gap:7px; margin:16px 0; }
.hp2-family > div a { background:#f1f5f2; border-radius:999px; padding:8px 11px; font-size:12px; font-weight:700; }
.hp2-subheading { display:flex; align-items:center; gap:12px; margin:34px 0 14px; }
.hp2-subheading h3,.hp2-subheading a { margin:0; font:700 10px 'JetBrains Mono',monospace; letter-spacing:.09em; text-transform:uppercase; }
.hp2-subheading span { height:1px; background:rgba(4,34,32,.15); flex:1; }
.hp2-subheading a { color:#0b6b5f; }
.hp2-people-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.hp2-person { position:relative; display:flex; flex-direction:column; min-height:205px; gap:7px; padding:18px 18px 18px 22px; background:#fff; border:1px solid rgba(4,34,32,.09); border-radius:17px; transition:transform .2s ease; }
.hp2-person:before { content:''; position:absolute; inset:0 auto 0 0; width:4px; background:var(--hp-teal); }
.hp2-person:hover { transform:translateY(-4px); }
.hp2-person small { color:#c44b4b; font:700 9px 'JetBrains Mono',monospace; text-transform:uppercase; }
.hp2-person strong { font:400 23px/1.08 'Instrument Serif',Georgia,serif; color:var(--hp-green); }
.hp2-person span { color:#4b5551; font-size:13px; line-height:1.5; }
.hp2-person b { margin-top:auto; color:#0b6b5f; font:700 9px 'JetBrains Mono',monospace; text-transform:uppercase; }
.hp2-new-entries { margin-top:20px; background:rgba(255,255,255,.74); border:1px solid rgba(4,34,32,.1); border-radius:20px; padding:20px 22px; }
.hp2-new-entries__head { display:flex; justify-content:space-between; gap:20px; font:700 10px 'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.08em; color:#55625e; }
.hp2-new-entries__head a { color:#0b6b5f; }
.hp2-new-entries > div:last-child { display:grid; grid-template-columns:repeat(2,1fr); gap:0 22px; margin-top:10px; }
.hp2-new-entries > div:last-child a { display:flex; gap:10px; padding:9px 0; border-bottom:1px solid rgba(4,34,32,.07); font-size:13px; }
.hp2-new-entries b { color:#c44b4b; font-family:'JetBrains Mono',monospace; }
.hp2-wiki__actions { margin-top:22px; }
.hp2-live { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.82fr); gap:14px; align-items:stretch; }
.hp2-live__products { background:#fff; border:1px solid rgba(4,34,32,.09); border-radius:22px; padding:26px; }
.hp2-live__products .hp2-heading { margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid rgba(4,34,32,.1); }
.hp2-live__products .hp2-heading h2 { font-size:36px; }
.hp2-live-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }
.hp2-live-product { border:1px solid rgba(4,34,32,.09); border-radius:15px; overflow:hidden; display:flex; flex-direction:column; background:#fbfbfa; }
.hp2-live-product > span { aspect-ratio:1; display:grid; place-items:center; background:#fff; border-bottom:1px solid rgba(4,34,32,.08); padding:14px; }
.hp2-live-product img { width:100%; height:100%; object-fit:contain; }
.hp2-live-product small,.hp2-live-product strong,.hp2-live-product b { margin-left:13px; margin-right:13px; }
.hp2-live-product small { margin-top:13px; color:#0b6b5f; font:700 9px 'JetBrains Mono',monospace; text-transform:uppercase; }
.hp2-live-product strong { font:400 19px/1.12 'Instrument Serif',Georgia,serif; margin-top:7px; }
.hp2-live-product b { margin-top:auto; padding:12px 0 14px; font:400 19px 'Instrument Serif',Georgia,serif; }
.hp2-journal { position:relative; overflow:hidden; min-height:440px; border-radius:22px; padding:28px; display:flex; flex-direction:column; justify-content:space-between; background:radial-gradient(circle at 90% 0,rgba(255,190,132,.65),transparent 45%),radial-gradient(circle at 0 100%,rgba(94,234,212,.66),transparent 48%),#edf7f4; border:1px solid rgba(4,34,32,.1); }
.hp2-journal:after { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(4,34,32,.08) 1px,transparent 1px); background-size:20px 20px; pointer-events:none; }
.hp2-journal span,.hp2-journal b { position:relative; z-index:1; }
.hp2-journal small { display:block; color:#c44b4b; font:700 10px 'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.09em; }
.hp2-journal strong { display:block; margin:16px 0 13px; font:400 clamp(30px,3vw,42px)/1.02 'Instrument Serif',Georgia,serif; color:var(--hp-green); }
.hp2-journal em { display:block; color:#42514d; font-style:normal; line-height:1.55; }
.hp2-journal b { color:#0b6b5f; font:700 10px 'JetBrains Mono',monospace; text-transform:uppercase; }
.hp2-news-grid { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.hp2-news-grid > a { display:flex; flex-direction:column; gap:7px; min-height:145px; padding:17px; border:1px solid rgba(4,34,32,.09); border-radius:17px; background:#fff; }
.hp2-news-grid small,.hp2-news-grid span { color:#0b6b5f; font:700 9px 'JetBrains Mono',monospace; text-transform:uppercase; }
.hp2-news-grid strong { font:400 21px/1.12 'Instrument Serif',Georgia,serif; color:var(--hp-green); }
.hp2-news-grid span { margin-top:auto; }
.hp2-news-grid .hp2-news-all { background:#eef7f5; border-style:dashed; }
@media (max-width:1024px) {
  .hp2-hero { grid-template-columns:1fr 1fr; gap:34px; }
  .hp2 h1 { font-size:clamp(58px,8vw,82px); }
  .hp2-ways__rail { grid-auto-columns:43%; }
  .hp2-products { grid-auto-columns:31%; }
  .hp2-recipe-grid,.hp2-people-grid { grid-template-columns:repeat(2,1fr); }
  .hp2-live { grid-template-columns:1fr; }
  .hp2-journal { min-height:360px; }
}
@media (max-width:767px) {
  .hp2-hero,.hp2-section { padding-left:18px; padding-right:18px; }
  .hp2-hero { grid-template-columns:1fr; padding-top:40px; }
  .hp2 h1 { font-size:clamp(60px,19vw,82px); }
  .hp2-hero__lede { font-size:16px; }
  .hp2-stats { justify-content:space-between; }
  .hp2-stats div { min-width:0; padding-right:12px; margin-right:12px; }
  .hp2-asklee .asklee__chat { min-height:500px; }
  .hp2-heading,.hp2-wiki__intro { display:block; }
  .hp2-heading > p { margin-top:16px; }
  .hp2-heading h2,.hp2-wiki__intro h2 { font-size:44px; }
  .hp2-tabs { grid-template-columns:1fr; }
  .hp2-tabs button { display:flex; align-items:center; justify-content:space-between; }
  .hp2-tabs button small { margin:0; }
  .hp2-totd__panel,.hp2-recipe-feature { grid-template-columns:1fr; }
  .hp2-totd__visual { min-height:340px; padding:35px; }
  .hp2-totd__copy { padding:30px 24px; }
  .hp2-ways__rail { grid-auto-columns:84%; }
  .hp2-products { grid-auto-columns:72%; }
  .hp2-recipe-feature__image { min-height:330px; }
  .hp2-recipe-columns { grid-template-columns:1fr; }
  .hp2-recipe-grid,.hp2-family-grid,.hp2-people-grid,.hp2-live-grid,.hp2-news-grid { grid-template-columns:1fr; }
  .hp2-wiki__stats { min-width:0; margin-top:24px; }
  .hp2-new-entries > div:last-child { grid-template-columns:1fr; }
  .hp2-live__products { padding:18px; }
}
@media (prefers-reduced-motion:reduce) { .hp2 * { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }