/* ============================================================
   CONCEPT A — "Editorial Calm / Premium Wellness"
   Aesop/Loro Piana x Stripe. Ivory dominant, deep green scarce & deep,
   maximum whitespace, low jump ratio, ceremonial motion.
   Overrides ONLY vibe vars + a few concept-specific compositions.
   ============================================================ */
:root{
  --bg:#F7F5F1;                /* cream dominates ~60%+ */
  --surface:#F7F2EB;          /* ivory cards */
  --section-rhythm:1.15;      /* airier than base */
  --rond:6;                   /* warm, spa-soft display */
  --accent-word:var(--deep);  /* A4: large accent text uses deep #1F462F (9.76:1); leaf fails large-text 3:1 on ivory (2.98). Leaf stays for CTA fill/icons. */
}

/* Hero — calm, search-centric, thumbnail strip subtle */
.hero{ padding-block:var(--sp-24) var(--sp-16); position:relative; overflow:hidden; }
.hero__inner{ max-width:760px; }
.hero h1{ font-size:var(--t-display); line-height:1.08; letter-spacing:var(--tr-display);
  font-variation-settings:"opsz" 58,"wght" 600,"ROND" 6; }
.hero .lead{ margin-top:var(--sp-4); font-size:var(--t-lead); color:var(--muted); max-width:54ch; }
.hero__anchor{ margin-top:var(--sp-4); display:inline-flex; align-items:baseline; flex-wrap:wrap;
  gap:8px; font-size:var(--t-body); color:var(--heading); font-weight:var(--w-med); }
.hero__anchor b{ color:var(--deep); font-weight:var(--w-bold); }
.hero__anchor-note{ font-size:var(--t-eyebrow); letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); font-weight:var(--w-med); padding:3px 9px; border-radius:var(--r-pill);
  background:var(--matcha); }
.hero__search{ margin-top:var(--sp-8); }
.hero__chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--sp-5); }
.hero__strip{ margin-top:var(--sp-12); display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); }
@media (max-width:760px){ .hero__strip{ grid-template-columns:repeat(2,1fr); } }
.hero__faint{ position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:radial-gradient(120% 80% at 100% 0%, rgba(163,190,152,.16), transparent 60%); }

/* botanical leaf-arc divider between calm sections */
.leafrule{ height:40px; background:no-repeat center/120px 40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cpath d='M2 38 C40 8 80 8 118 38' fill='none' stroke='%23AAA194' stroke-width='1.4'/%3E%3Cpath d='M60 6 C57 14 57 20 60 26 C63 20 63 14 60 6 Z' fill='%23A3BE98'/%3E%3C/svg%3E"); opacity:.7; }

/* mode bento — Social is the protagonist (spans), Library grid, Custom band */
.modes{ display:grid; gap:var(--sp-6); grid-template-columns:1.4fr 1fr; grid-auto-rows:auto; }
@media (max-width:860px){ .modes{ grid-template-columns:1fr; } }
.mode--social{ grid-row:span 2; background:var(--deep); color:var(--on-dark);
  display:flex; flex-direction:column; justify-content:space-between; }
.mode--social :where(h3){ color:var(--on-dark); }
.mode--social .muted{ color:var(--on-dark-muted); }
.mode--custom{ grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6);
  background:var(--matcha); }
@media (max-width:560px){ .mode--custom{ flex-direction:column; align-items:flex-start; } }

/* ---------- 3 levels of partnership (ascending bento) ----------
   Value climbs left to right: Video (entry, ivory) -> Social (mid, matcha
   band) -> Campaigns (premium, deep green, heaviest weight). */
.levels{ display:grid; gap:var(--sp-6); grid-template-columns:repeat(3,1fr); align-items:stretch; }
@media (max-width:920px){ .levels{ grid-template-columns:1fr; } }
.level{ display:flex; flex-direction:column; justify-content:space-between; gap:var(--sp-6); }
.level__top > * + *{ margin-top:var(--sp-3); }
.level__tier{ display:inline-flex; align-items:center; gap:8px; font-size:var(--t-eyebrow);
  letter-spacing:.1em; text-transform:uppercase; font-weight:var(--w-semi); color:var(--muted); }
.level__tier b{ font-variant-numeric:tabular-nums; }
.level h3{ font-size:var(--t-h2); line-height:1.15; }
.level__note{ font-size:var(--t-body-sm); color:var(--muted); }
.level .mode__cta{ margin-top:var(--sp-2); }
/* tier 2 — managed social, matcha band, slightly more weight */
.level--mid{ background:var(--matcha); border-color:transparent; }
/* tier 3 — campaigns, premium deep green, top of the ladder */
.level--top{ background:var(--deep); color:var(--on-dark); border-color:transparent;
  box-shadow:var(--elev-hi), var(--shadow-hover); }
.level--top :where(h3){ color:var(--on-dark); }
.level--top .level__tier{ color:var(--sage); }
.level--top .level__note,.level--top p{ color:var(--on-dark-muted); }
.level--top .card__icon{ background:rgba(255,255,255,.08); color:var(--sage); }
.level__proof{ display:flex; align-items:center; gap:8px; font-size:var(--t-body-sm);
  font-weight:var(--w-med); color:var(--sage); }
.level__proof .icon{ width:16px; height:16px; flex:none; }

/* ---------- Proof: one honest case, big number ---------- */
.proof-grid{ display:grid; gap:var(--sp-8); grid-template-columns:1.1fr .9fr; align-items:center; }
@media (max-width:860px){ .proof-grid{ grid-template-columns:1fr; } }
.proof-quote{ font-size:var(--t-lead); line-height:1.5; color:var(--heading);
  font-variation-settings:"wght" 500; max-width:46ch; }
.proof-quote .icon{ width:28px; height:28px; color:var(--sage); margin-bottom:var(--sp-3); display:block; }
.proof-attr{ margin-top:var(--sp-5); font-size:var(--t-body-sm); color:var(--muted); }
.proof-attr strong{ color:var(--heading); font-weight:var(--w-semi); }
.proof-stats{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
.proof-stat{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-card);
  padding:var(--sp-6); }
.proof-stat__n{ font-size:var(--t-h1); line-height:1; font-weight:var(--w-bold);
  font-variant-numeric:tabular-nums lining-nums; color:var(--deep);
  font-variation-settings:"opsz" 40,"wght" 700,"ROND" 6; }
.proof-stat__l{ margin-top:var(--sp-3); font-size:var(--t-body-sm); color:var(--muted); line-height:1.4; }
.proof-honest{ margin-top:var(--sp-6); display:inline-flex; align-items:center; gap:8px;
  font-size:var(--t-body-sm); color:var(--muted); }
.proof-honest .icon{ width:16px; height:16px; color:var(--leaf); flex:none; }

/* library belt (horizontal) */
.belt{ display:grid; grid-auto-flow:column; grid-auto-columns:min(78vw,340px); gap:var(--sp-6);
  overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:var(--sp-4);
  scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.belt > *{ scroll-snap-align:start; }
.belt::-webkit-scrollbar{ height:6px; }
.belt::-webkit-scrollbar-thumb{ background:var(--hairline); border-radius:999px; }

/* ---------- Library page (concept A: editorial, airy, generous gutters) ---------- */
/* short page hero — calm, search-centric, never text-giant */
.lib-hero{ padding-block:var(--sp-20) var(--sp-8); position:relative; overflow:hidden; }
.lib-hero__inner{ max-width:720px; }
.lib-hero h1{ font-size:var(--t-h1); line-height:var(--lh-h1); letter-spacing:var(--tr-h1);
  font-variation-settings:"opsz" 44,"wght" 600,"ROND" 6; }
.lib-hero .lead{ margin-top:var(--sp-4); max-width:56ch; }
.lib-hero .hero__search{ margin-top:var(--sp-8); }

/* results toolbar — count + sort */
.lib-toolbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--sp-4); margin-bottom:var(--sp-6); }
.lib-toolbar__count{ font-size:var(--t-body-sm); color:var(--muted); }
.lib-toolbar__count strong{ color:var(--heading); font-weight:var(--w-semi); }
.lib-toolbar__right{ display:flex; align-items:center; gap:var(--sp-3); }
.lib-sort{ position:relative; display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1.5px solid var(--hairline); border-radius:var(--r-pill);
  padding:8px 14px; transition:border-color var(--dur-base) var(--ease-out-soft); }
.lib-sort:focus-within{ border-color:var(--leaf); }
.lib-sort__label{ font-size:var(--t-body-sm); font-weight:var(--w-med); color:var(--muted); }
.lib-sort select{ border:none; background:transparent; font-weight:var(--w-med); color:var(--heading);
  font-size:var(--t-body-sm); cursor:pointer; padding-right:2px; appearance:none; }
.lib-sort .icon{ color:var(--muted); pointer-events:none; }

/* category filter chips */
.lib-filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:var(--sp-12); }
.lib-filters .chip.is-active{ background:var(--deep); border-color:var(--deep); color:var(--on-dark); }
@media (hover:hover) and (pointer:fine){ .lib-filters .chip.is-active:hover{ background:var(--deep); } }

/* the grid stays uniform 16:9 (vcard owns aspect-ratio); airier gutter on desktop */
@media (min-width:761px){ .lib-grid{ gap:var(--sp-8); } }

/* load-more line */
.lib-more{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-4);
  margin-top:var(--sp-16); text-align:center; }
.lib-more .btn{ min-width:220px; }
.lib-more__link{ display:inline-flex; align-items:center; gap:6px; color:var(--primary-press);
  font-weight:var(--w-semi); white-space:nowrap; }
.lib-more__link .icon{ width:16px; height:16px; }

/* final CTA band — trim the over-tall padding so the content fills the band */
.cta-band{ padding-block:var(--sp-20); }
@media (max-width:760px){ .cta-band{ padding-block:var(--sp-16); } }

/* ============================================================
   HOME v2 — short, visual, routing. Hero slider + tier cards +
   proof/how teasers + small library teaser. Photo full-bleed,
   type overlaid on a soft dark scrim (NOT headline-left/image-right).
   ============================================================ */

/* ---------- Hero slider (full-bleed, type over photo) ---------- */
.hero-slider{ position:relative; isolation:isolate; overflow:hidden;
  min-height:min(88vh,760px); display:flex; }
@media (max-width:760px){ .hero-slider{ min-height:auto; } }
.hero-slider__track{ position:absolute; inset:0; }
.hslide{ position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity 700ms var(--ease-out-soft); }
.hslide.is-active{ opacity:1; visibility:visible; z-index:1; }
.hslide__media{ position:absolute; inset:0; }
.hslide__media img{ width:100%; height:100%; object-fit:cover; }
/* soft dark scrim so type stays legible on any photo (no purple/blue tint).
   Mobile: stronger top-to-bottom so the whole copy column clears AA over bright
   backgrounds (window/plant/blazer). Desktop: left-to-right but widened so the
   subhead + price (which run further right than the headline) stay legible. */
.hslide__scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(26,38,30,.52) 0%, rgba(26,38,30,.30) 34%, rgba(26,38,30,.78) 100%); }
@media (min-width:761px){
  .hslide__scrim{ background:linear-gradient(90deg, rgba(26,38,30,.74) 0%, rgba(26,38,30,.56) 42%, rgba(26,38,30,.30) 72%, rgba(26,38,30,.16) 100%); }
}
/* content sits on the slider, anchored bottom-left (editorial, off-center) */
.hero-slider__inner{ position:relative; z-index:2; width:100%; align-self:flex-end;
  padding-block:var(--sp-20) var(--sp-16); }
@media (max-width:760px){ .hero-slider__inner{ padding-block:var(--sp-16) var(--sp-12); } }
.hero-slider__copy{ max-width:620px; min-height:170px; }
.hslide__text{ display:none; }
.hslide__text.is-active{ display:block; animation:heroIn 600ms var(--ease-reveal) both; }
@keyframes heroIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.hero-slider .eyebrow{ color:var(--sage); }
.hero-slider h1,
.hero-slider .hslide__h{ color:var(--on-dark); font-size:var(--t-h1); line-height:1.08; letter-spacing:-0.02em;
  font-variation-settings:"opsz" 44,"wght" 600,"ROND" 6; text-wrap:balance; max-width:14ch;
  margin:0; font-weight:var(--w-semi); }
.hero-slider__sub{ margin-top:var(--sp-3); color:var(--on-dark);
  font-size:var(--t-lead); max-width:48ch; }
.hero-slider__actions{ margin-top:var(--sp-6); display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4); }
.hero-slider .btn-on-deep{ box-shadow:var(--shadow-card); }
.hero-slider__price{ font-size:var(--t-body-sm); color:var(--on-dark); font-weight:var(--w-med); }
.hero-slider__price b{ color:var(--on-dark); font-weight:var(--w-semi); font-variant-numeric:tabular-nums; }
.hero-slider__price span{ opacity:.78; }

/* compact search + chips, riding the bottom of the hero */
.hero-slider__search{ margin-top:var(--sp-8); max-width:620px; width:100%; }
.hero-slider__search .searchbar{ background:#FCFAF6; }
/* chips cap to the copy/search column and wrap fully (no mid-word clip) */
.hero-slider__chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--sp-4); max-width:100%; }
.hero-slider__chips .chip{ background:rgba(247,242,235,.16); border-color:rgba(247,242,235,.34);
  color:var(--on-dark); white-space:nowrap; }
@media (hover:hover) and (pointer:fine){
  .hero-slider__chips .chip:hover{ background:rgba(247,242,235,.26); transform:translateY(-1px); }
}

/* dots + arrows */
.hero-slider__nav{ position:absolute; z-index:3; right:var(--sp-6); bottom:var(--sp-6);
  display:flex; align-items:center; gap:var(--sp-3); }
/* controls sit on a soft backplate so they stay legible over any slide */
.hero-slider__nav{ padding:6px 10px; border-radius:var(--r-pill);
  background:rgba(26,38,30,.40); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.hero-slider__dots{ display:flex; gap:9px; align-items:center; }
.hero-slider__dot{ width:10px; height:10px; border-radius:50%; cursor:pointer;
  background:transparent; border:1.5px solid rgba(247,242,235,.65);
  transition:transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.hero-slider__dot.is-active{ background:var(--on-dark); border-color:var(--on-dark); transform:scale(1.2); }
.hero-slider__arrow{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:rgba(26,38,30,.58); border:1px solid rgba(247,242,235,.38); color:var(--on-dark); cursor:pointer;
  transition:background var(--dur-base) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
@media (hover:hover) and (pointer:fine){ .hero-slider__arrow:hover{ background:rgba(26,38,30,.78); } }
.hero-slider__arrow:active{ transform:scale(0.94); }
.hero-slider__arrow .icon{ width:18px; height:18px; }
.hero-slider__arrow--prev .icon{ transform:rotate(180deg); }
@media (max-width:560px){ .hero-slider__arrow{ display:none; } }
@media (prefers-reduced-motion: reduce){
  .hslide{ transition:none; } .hslide__text.is-active{ animation:none; }
}

/* ---------- 3 tier cards (short routers, weight climbs) ---------- */
/* minmax(0,1fr) stops track blowout; min-width:0 + max-width:100% keep each
   card (incl. the deep --top card with its elevated shadow) inside the column. */
.tiers{ display:grid; gap:var(--sp-6); grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; }
@media (max-width:920px){ .tiers{ grid-template-columns:minmax(0,1fr); } }
.tier{ position:relative; display:flex; flex-direction:column; overflow:hidden; padding:0;
  border-radius:var(--r-card); min-width:0; max-width:100%; }
.tier__media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.tier__media img{ width:100%; height:100%; object-fit:cover;
  transition:transform var(--dur-slow) var(--ease-out); }
@media (hover:hover) and (pointer:fine){ .tier:hover .tier__media img{ transform:scale(1.04); } }
.tier__body{ display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-6); flex:1; }
.tier__tier{ font-size:var(--t-eyebrow); letter-spacing:.1em; text-transform:uppercase;
  font-weight:var(--w-semi); color:var(--muted); }
.tier__tier b{ font-variant-numeric:tabular-nums; }
.tier h3{ font-size:var(--t-h2); line-height:1.12; }
.tier__line{ color:var(--muted); font-size:var(--t-body-sm); }
.tier__what{ font-size:var(--t-eyebrow); letter-spacing:.08em; text-transform:uppercase;
  font-weight:var(--w-semi); color:var(--leaf); }
.tier__cta{ margin-top:auto; padding-top:var(--sp-4); }
/* Campaigns = most premium, deep green. Weight reads from color + STRUCTURE,
   not color alone (C4): extra padding, a larger H3, and a tier badge. */
.tier--top{ background:var(--deep); color:var(--on-dark); border-color:transparent;
  box-shadow:var(--elev-hi), var(--shadow-hover); }
.tier--top .tier__body{ padding:var(--sp-8) var(--sp-6); gap:var(--sp-3); }
.tier--top h3{ color:var(--on-dark); font-size:calc(var(--t-h2) * 1.12); }
.tier--top .tier__tier{ color:var(--sage); }
.tier--top .tier__line{ color:var(--on-dark-muted); }
.tier--top .tier__what{ color:var(--sage); }
/* "top tier" badge — the single extra structural cue */
.tier__badge{ position:absolute; top:var(--sp-4); right:var(--sp-4); z-index:2;
  display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:var(--r-pill);
  background:rgba(247,242,235,.14); border:1px solid rgba(247,242,235,.30);
  font-size:var(--t-eyebrow); letter-spacing:.1em; text-transform:uppercase;
  font-weight:var(--w-semi); color:var(--on-dark); }
.tier__badge .icon{ width:13px; height:13px; color:var(--sage); }

/* ---------- Proof teaser (one stat, one line, one link) ---------- */
.proof-teaser{ display:grid; grid-template-columns:auto 1fr; gap:var(--sp-8); align-items:center; }
@media (max-width:680px){ .proof-teaser{ grid-template-columns:1fr; gap:var(--sp-5); } }
.proof-teaser__n{ font-size:var(--t-display); line-height:.9; font-weight:var(--w-bold);
  font-variant-numeric:tabular-nums lining-nums; color:var(--deep);
  font-variation-settings:"opsz" 56,"wght" 700,"ROND" 6; white-space:nowrap; }
.proof-teaser__body h2{ max-width:18ch; }
.proof-teaser__sub{ margin-top:var(--sp-2); color:var(--muted); max-width:52ch; }
.proof-teaser__link{ margin-top:var(--sp-4); display:inline-flex; align-items:center; gap:7px;
  font-weight:var(--w-semi); color:var(--primary-press); }
.proof-teaser__link .icon{ width:16px; height:16px; }

/* ---------- How it works teaser (3 steps, one line each) ---------- */
.how-teaser{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-8); }
@media (max-width:760px){ .how-teaser{ grid-template-columns:1fr; gap:var(--sp-6); } }
.how-step{ display:flex; gap:var(--sp-4); align-items:flex-start; }
.how-step__n{ flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  border:1.5px solid var(--sage); color:var(--deep); font-weight:var(--w-bold);
  font-variant-numeric:tabular-nums; }
.section--deep .how-step__n{ border-color:var(--sage); color:var(--sage); }
.how-step h3{ font-size:var(--t-body); font-weight:var(--w-semi); }
.how-step p{ margin-top:2px; font-size:var(--t-body-sm); color:var(--muted); }
.section--deep .how-step p{ color:var(--on-dark-muted); }

/* ---------- small library teaser strip ---------- */
/* minmax(0,1fr) keeps the 16:9 thumbs inside the padded container (no blowout) */
.libteaser{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-4); }
@media (max-width:760px){ .libteaser{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---------- proof teaser: balance the empty right half on desktop ---------- */
/* center the block + give the numeral an optical anchor so the band reads
   composed, not left-weighted with dead cream on the right. */
@media (min-width:861px){
  .proof-teaser{ max-width:920px; margin-inline:auto; column-gap:var(--sp-12);
    padding:var(--sp-12) var(--sp-16); border-radius:var(--r-card);
    background:linear-gradient(120deg, rgba(229,235,213,.55) 0%, rgba(247,242,235,0) 70%);
    border:1px solid var(--hairline); }
  .proof-teaser__n{ align-self:center; }
}

/* ============================================================
   MOBILE POLISH (<=560px) — kill the right-edge clipping that
   overflow-x:hidden was masking. Stack rows, shrink gaps, contain type.
   (560px matches the concept's existing mobile breakpoint family and
   covers the full phone range from 360px up.)
   ============================================================ */
@media (max-width:560px){
  /* trust rows: stack so no label is truncated at the right edge */
  .trust-row{ flex-direction:column; align-items:flex-start; gap:var(--sp-3); }
  .trust-row li{ max-width:100%; }
  .cta-band .trust-row{ align-items:center; }

  /* footer columns: sp-16 gap is too wide for a phone -> tighten, let cols wrap */
  .footer__cols{ gap:var(--sp-6) var(--sp-8); }
  .footer__cols > div{ min-width:0; }

  /* library/teaser headlines must not overflow their section on a phone */
  .section-head{ min-width:0; }
  .section-head > div{ min-width:0; max-width:100%; }
  .section-head h2{ overflow-wrap:anywhere; word-break:break-word; }
  .libteaser{ gap:var(--sp-3); }

  /* hero copy column + search never exceed the viewport minus padding */
  .hero-slider__copy,
  .hero-slider__search{ max-width:100%; }
}

/* concept A keeps everything restrained — no extra glow, no neon */