/* nt.css: the Trunk design system. Extracted 2026-08-12 from the /natural design
   study (natural.css), which is now the site's ONLY design language. Every page
   loads this first; page layers (natural.css, article.css, inline blocks) load
   after it and hold layout only, never new components.

   The system in one breath: Haas Recast only (Rg to 449 / Md to 649 / SBd from
   650), 11/12/13/14px type scale, ink/gray palette with the pale-green panel (lime is its own token),
   one card stroke (--line), card radii 14px outer / 10px nested / 6px thumbs,
   dark-green CTAs (#20471A, hover #193714) with the natural-green success state
   (#37A733, hover #30912C), uppercase on CTAs only.

   Component note: CTA base rules here use background shorthand because the
   shimmer (background-image) is declared after them in this file. Buttons whose
   base rules live in a LATER stylesheet (.nt-bar-btn, .nt-upgrade) must set
   background-color, never the background shorthand, or they wipe the shimmer;
   for the same later-file reason the beat state rules below are compound
   (.nt-bar-btn.is-loading, not bare .is-loading) so a page layer's color
   declaration can never outrank a state. */

@font-face {
  font-family:'Haas Recast';
  src:url('../fonts/HaasRecast-Regular.woff2') format('woff2');
  font-weight:100 449; font-style:normal; font-display:swap;
}
@font-face {
  font-family:'Haas Recast';
  src:url('../fonts/HaasRecast-Medium.woff2') format('woff2');
  font-weight:450 649; font-style:normal; font-display:swap;
}
@font-face {
  font-family:'Haas Recast';
  src:url('../fonts/HaasRecast-SemiBold.woff2') format('woff2');
  font-weight:650 699; font-style:normal; font-display:swap;
}
@font-face {
  font-family:'Haas Recast';
  src:url('../fonts/HaasRecast-Bold.woff2') format('woff2');
  font-weight:700 900; font-style:normal; font-display:swap;
}

:root {
  --ink:#0B0B0B;
  --gray:#757575;
  --gray-lt:#B9B9B9;
  --panel:#DAECC7;
  --lime:#AAEF6D;   /* stand-alone brand lime; no component owns it yet */
  --pill:#F7F7F7;
  --line:#E8E8E8;   /* the one card stroke */
  --nt-header-h:38px;
  /* card radii: 16px outer card/popup tier, 10px nested tier, 6px thumbnails;
     photos and image blocks take the 6px tier regardless of size */
}

* { box-sizing:border-box; }
html, body { margin:0; }
body {
  font-family:'Haas Recast','Helvetica Neue',Arial,sans-serif;
  font-size:13px; line-height:1.4; letter-spacing:0;
  color:var(--ink); background:#fff;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color:inherit; text-decoration:none; }
img { display:block; }
button {
  font:inherit; letter-spacing:inherit; color:inherit;
  background:none; border:0; padding:0; cursor:pointer;
}
:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
/* the hidden attribute must always win, even over display:flex classes */
[hidden] { display:none !important; }
:where(h1, p) { margin:0; font-size:inherit; }
:where(b, strong) { font-weight:650; }

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

.nt-header {
  position:fixed; top:0; left:0; right:0; z-index:20;
  height:var(--nt-header-h); background:rgba(255,255,255,0);
  transition:background-color .25s ease, transform .3s ease;
  display:flex; align-items:center;
  padding:0 18px; font-size:12px;
}
.nt-header.is-solid { background:#fff; }
.nt-header.is-up { transform:translateY(-100%); }
.nt-nav { display:flex; align-items:center; gap:24px; }
.nt-nav a { transition:opacity .15s ease; }
.nt-nav a:hover { opacity:.55; }
.nt-logo { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.nt-logo img { height:17px; width:auto; }
.nt-right { margin-left:auto; display:flex; align-items:center; gap:22px; }
.nt-icons { display:flex; align-items:center; gap:18px; }
.nt-ic {
  position:relative; width:18px; height:18px;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .15s ease;
}
.nt-ic:hover { opacity:.55; }
.nt-ic svg { width:17px; height:17px; }
.nt-burger { display:none; }

/* burger menu (mobile only; the burger itself is hidden on desktop) */
.nt-menu {
  position:fixed; top:var(--nt-header-h); left:0; right:0; z-index:19;
  background:#fff; border-bottom:1px solid var(--line);
  padding:4px 20px 12px; display:none;
}
.nt-menu.is-open { display:block; }
.nt-menu a, .nt-menu button {
  display:flex; align-items:center; gap:10px; width:100%;
  padding:12px 0; font-size:13px; text-align:left;
  border-bottom:1px solid var(--pill);
}
.nt-menu > :last-child { border-bottom:0; }
.nt-menu svg { width:16px; height:16px; }
.m-badge {
  margin-left:auto; background:#E02D2D; color:#fff;
  font-size:9px; font-weight:500; line-height:1;
  padding:3px 6px; border-radius:99px;
}
.nt-header.menu-open { background:#fff; }

/* ---------- account signup offer popup ---------- */

.nt-modal {
  position:fixed; inset:0; z-index:30;
  display:flex; align-items:center; justify-content:center;
  background:rgba(11,11,11,.32);
  opacity:0; visibility:hidden;
  transition:opacity .2s ease, visibility .2s ease;
}
.nt-modal.is-open { opacity:1; visibility:visible; }
/* the card rises in as the scrim fades */
.nt-modal > * {
  transform:translateY(10px) scale(.97);
  transition:transform .25s cubic-bezier(.22,.61,.36,1);
}
.nt-modal.is-open > * { transform:none; }
.nt-modal-card {
  width:300px; max-width:86vw;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:20px; text-align:center;
  box-shadow:0 18px 44px rgba(32,71,26,.2);
}
.nt-modal-h { font-size:14px; font-weight:650; }
.nt-modal-p { margin-top:6px; font-size:12px; color:#6E6E6E; line-height:1.5; }
.nt-modal-form { margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.nt-modal-in {
  height:40px; width:100%; padding:0 12px;
  border:1px solid var(--line); border-radius:10px;
  font:inherit; font-size:13px; background:#fff;
}
.nt-modal-btn {
  height:40px; border-radius:10px;
  background:#20471A; color:#fff;
  font-weight:650; font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  transition:background-color .15s ease;
}
.nt-modal-btn:hover { background-color:#193714; }
/* underline-only field: the line input (same recipe as article.css .af-in,
   which predates this shared home) */
.nt-in-line {
  display:block; width:100%; border:0; border-bottom:1px solid var(--line);
  background:none; outline:none; text-align:center;
  padding:0 0 14px; font:inherit; font-size:18px; color:var(--ink);
  border-radius:0; transition:border-color .15s ease;
}
.nt-in-line::placeholder { color:var(--gray-lt); }
.nt-in-line:focus { border-bottom-color:var(--gray); }

.nt-modal-no {
  margin-top:12px; width:100%; text-align:center;
  font-size:11px; color:#6E6E6E;
  text-decoration:underline; text-underline-offset:2px;
}

/* ---------- the primary CTA ---------- */

.nt-cart {
  position:relative;
  margin-top:24px; height:47px; border-radius:14px;
  background:#20471A; color:#fff;
  font-weight:650; font-size:13px; letter-spacing:.07em; text-transform:uppercase;
  transition:background-color .15s ease;
}
.nt-cart:hover { background-color:#193714; }

/* loading state: text fades out, spinner fades in over it */
.nt-cart, .nt-bar-btn { transition:background-color .15s ease, color .3s ease; }
.nt-bar-btn .was { transition:color .3s ease; }
.nt-cart::after, .nt-bar-btn::after {
  content:""; position:absolute; inset:0; margin:auto;
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.3); border-top-color:#fff;
  opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.nt-cart.is-loading, .nt-bar-btn.is-loading { color:transparent; pointer-events:none; }
.nt-cart.is-loading .was, .nt-cart.is-loading span,
.nt-bar-btn.is-loading .was, .nt-bar-btn.is-loading span { color:transparent; }
.is-loading::after { opacity:1; animation:ntspin .55s linear infinite; }
@keyframes ntspin { to { transform:rotate(360deg); } }

/* success beat: natural green + circled tick */
.nt-cart::before, .nt-bar-btn::before {
  content:""; position:absolute; inset:0; margin:auto;
  width:18px; height:18px; opacity:0;
  background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='8'/%3E%3Cpath d='m5.6 9.4 2.3 2.3L12.6 6.6'/%3E%3C/svg%3E");
  transition:opacity .3s ease; pointer-events:none;
}
.nt-cart.is-success, .nt-bar-btn.is-success { background:#37A733; color:transparent; pointer-events:none; }
.nt-cart.is-success .was, .nt-cart.is-success span,
.nt-bar-btn.is-success .was, .nt-bar-btn.is-success span { color:transparent; }
.is-success::before { opacity:1; }

/* shimmer: a band of light sweeps across CTAs on hover */
.nt-cart, .nt-bar-btn, .nt-modal-btn, .nt-upgrade {
  background-image:linear-gradient(105deg,
    rgba(255,255,255,0) 42%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 58%);
  background-size:240% 100%; background-position:240% 0; background-repeat:no-repeat;
}
.nt-cart:hover, .nt-bar-btn:hover, .nt-modal-btn:hover, .nt-upgrade:hover {
  background-position:-140% 0;
  transition:background-color .15s ease, color .3s ease, background-position .8s ease;
}
/* the same band also sweeps on its own every few seconds while idle;
   hover swaps in a one-shot sweep so it always fires immediately */
@keyframes ntsheen {
  0%, 84% { background-position:240% 0; }
  99%, 100% { background-position:-140% 0; }
}
@keyframes ntsweep {
  from { background-position:240% 0; }
  to { background-position:-140% 0; }
}
.nt-cart, .nt-bar-btn, .nt-modal-btn, .nt-upgrade { animation:ntsheen 5.5s ease infinite; }
.nt-cart:hover, .nt-bar-btn:hover, .nt-modal-btn:hover, .nt-upgrade:hover { animation:ntsweep .8s ease; }
@media (prefers-reduced-motion:reduce) {
  .nt-cart, .nt-bar-btn, .nt-modal-btn, .nt-upgrade { animation:none; }
}

/* natural-green CTA variant (background-color only: the shimmer lives above) */
.nt-cart--natural { background-color:#37A733; }
.nt-cart--natural:hover { background-color:#30912C; }

/* ---------- chip ---------- */

.nt-chip {
  position:relative; overflow:hidden;
  background:#37A733; color:#fff;
  font-size:11px; font-weight:500; line-height:1;
  padding:5px 7px; border-radius:6px;
}
/* tilted white shine over the solid chips, so they read a touch metallic */
.nt-chip::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,
    rgba(255,255,255,0) 28%, rgba(255,255,255,.18) 45%,
    rgba(255,255,255,.06) 56%, rgba(255,255,255,0) 70%);
}
/* muted variant: pill card colors, for secondary labels; no shine */
.nt-chip.mod { background:var(--pill); border:1px solid var(--line); color:#6E6E6E; }
.nt-chip.mod::after { content:none; }
/* white-surface variant: compose with .mod to retain its stroke treatment */
.nt-chip.mod.nt-chip--white { background:#fff; }

/* ---------- dotted text link ----------
   the one link treatment (see .nt-guar on /natural, .textlink on learn) */
.nt-guar, .textlink, .byline a.b-v {
  text-decoration:underline dotted #9A9A9A; text-underline-offset:3px;
}

/* ---------- image zoom popup ----------
   hover on desktop, tap on touch (nt.js delegates); centred above its thumb */
.zoom { position:relative; display:block; }
.zoom-pop {
  position:absolute; z-index:6; bottom:calc(100% + 6px); left:50%;
  transform:translateX(-50%);
  width:170px; height:170px; padding:6px;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:0 14px 34px rgba(32,71,26,.16);
  opacity:0; visibility:hidden;
  transition:opacity .18s ease, visibility .18s ease;
  pointer-events:none;
}
.zoom-pop img { width:100%; height:100%; object-fit:cover; border-radius:10px; display:block; }
@media (hover:hover) {
  .zoom:hover .zoom-pop { opacity:1; visibility:visible; }
}
.zoom.is-pop .zoom-pop { opacity:1; visibility:visible; }
/* size variant for 56px tiles */
.zoom--lg .zoom-pop { width:210px; height:210px; }

/* ---------- floating CTA ----------
   Resurrected 2026-08-12 from the old home page (archive/assets/css/
   floating-cta.css), re-skinned on the nt system. A free-standing pill above
   the bottom of the viewport; the WHOLE element is the link. Two layers:
   .sticky-cta = frosted frame + link, .sticky-inner = the dark-green CTA pill.
   Enter (is-visible, set by nt.js): pops up from below as a circle (slide, no
   fade), then expands to full width with a bounce while the label fades in.
   Exit reverses: label fades, collapse to circle, slide down. Width animates
   between the collapsed diameter and the expanded width; overflow clips the
   label. Sits below the signup modal (z 30). */

.sticky-cta {
  --cta-w:17rem;    /* expanded pill width (fits the label) */
  --cta-h:4.4rem;   /* collapsed circle diameter (matches the pill's height) */

  position:fixed;
  left:50%; right:auto;
  bottom:clamp(1rem, 3vw, 1.75rem);
  transform:translateX(-50%) translateY(calc(100% + 7rem));  /* parked off the bottom */
  z-index:25;
  display:block;
  width:var(--cta-h);                 /* collapsed: a circle */
  max-width:calc(100vw - 2rem);
  overflow:hidden;                    /* clip the label to the current width */
  padding:12px;
  border-radius:999px;
  background:rgba(218,236,199,.35);   /* panel-tinted frost */
  backdrop-filter:blur(22px) saturate(1.3);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:0 22px 64px 10px rgba(32,71,26,.14), 0 3px 12px rgba(32,71,26,.10);
  opacity:1;                          /* constant: entrance/exit is a slide, not a fade */
  pointer-events:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  /* EXIT: label fades first (its own rule), then collapse, then slide down. */
  transition:
    width .3s cubic-bezier(.5,0,.75,0) .14s,
    transform .34s cubic-bezier(.4,0,.85,.15) .42s;
}
.sticky-cta.is-visible {
  width:var(--cta-w);                 /* expanded pill */
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
  /* ENTER: pop up from the bottom, then expand with a bounce. */
  transition:
    transform .4s cubic-bezier(.34,1.56,.64,1) 0s,
    width .5s cubic-bezier(.34,1.56,.64,1) .26s;
}
.sticky-cta:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }

/* 1px gradient stroke: 50% white at the top fading to 20% at the bottom,
   painted on a pseudo-element and masked down to a 1px edge */
.sticky-cta::before {
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(to bottom, rgba(255,255,255,.5) 0%, rgba(255,255,255,.2) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite:exclude;
  pointer-events:none;
}

/* inner CTA pill: the nt dark green, with the CTA shimmer on hover */
.sticky-inner {
  display:flex; align-items:center; justify-content:center;
  max-width:none; margin:0; overflow:hidden;
  background-color:#20471A;
  border-radius:999px;
  padding:.9rem 1.5rem;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transition:background-color .4s ease;
  background-image:linear-gradient(105deg,
    rgba(255,255,255,0) 42%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 58%);
  background-size:240% 100%; background-position:240% 0; background-repeat:no-repeat;
}
.sticky-cta:hover .sticky-inner {
  background-color:#193714;
  background-position:-140% 0;
  transition:background-color .4s ease, background-position .8s ease;
}

/* centered label + trailing arrow, the nt CTA text treatment */
.sc-label {
  display:inline-flex; align-items:center; gap:.6rem;
  color:#fff; font-weight:650; font-size:13px; letter-spacing:.07em;
  text-transform:uppercase; line-height:1.2; white-space:nowrap;
  opacity:0;
  transition:opacity .16s ease 0s;    /* EXIT: fade out first */
}
.sticky-cta.is-visible .sc-label {
  opacity:1;
  transition:opacity .22s ease .48s;  /* ENTER: fade in after the expand */
}
.sc-arrow { flex:none; width:12px; height:12px; }

/* Reduced motion: no slide / circle / expand - a plain fade at full width. */
@media (prefers-reduced-motion:reduce) {
  .sticky-cta {
    width:var(--cta-w);
    transform:translateX(-50%);
    opacity:0;
    transition:opacity .2s ease;
  }
  .sticky-cta.is-visible { transform:translateX(-50%); opacity:1; }
  .sticky-inner { transition:none; }
  .sc-label, .sticky-cta.is-visible .sc-label { opacity:1; transition:none; }
}

/* ---------- footer (learn + utility pages; /natural has none) ---------- */

.nt-footer {
  margin-top:64px; border-top:1px solid var(--line);
  padding:30px 20px 42px; text-align:center;
}
.nt-footer img { margin:0 auto; height:13px; width:auto; }
.nt-footer p {
  margin:12px auto 0; max-width:60ch;
  font-size:11px; color:var(--gray); line-height:1.5;
}

/* ---------- mobile ---------- */

@media (max-width:64em) {
  :root { --nt-header-h:52px; }
  .nt-header { padding:0 16px; }
  .nt-navtext { display:none; }
  .nt-burger { display:flex; margin-right:auto; }
  .nt-right { margin-left:0; }
  .nt-cart { height:52px; }
  /* keep popups on-screen: anchor to the thumb's left edge instead of centring */
  .zoom-pop { left:-12px; transform:none; }
}

@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; }
}