/** Shopify CDN: Minification failed

Line 88:0 All "@import" rules must come first

**/
/* ==========================================================================
   MOHAR 3.0 · THE QUIET SYSTEM
   Design language: Notion's calm, in Mohar's colours.
   Rules held throughout:
     1. Warm white is the default. Colour is an event, not a background.
     2. A card is a soft white rectangle with a 1px line. Never a shadow blob.
     3. Type is small, warm and generous. Nothing shouts.
     4. One idea per section. Space does the separating, not borders.
     5. Motion is slow, short and optional.
   ========================================================================== */

/* ------------------------------ 1 · TOKENS ------------------------------ */
:root{
  /* Surfaces - warm, Notion-adjacent */
  --paper:#FFFFFF;
  --paper-2:#F8F7F4;      /* the quiet grey everything rests on */
  --paper-3:#F1EFE9;
  --cream:#F5F0E8;
  --sage:#E8EDE7;
  --kraft:#EFE7DA;

  /* Brand */
  --green:#1E3A2F;
  --green-mid:#2D5A3D;
  --green-dark:#15301F;
  --gold:#C9A055;
  --gold-soft:#F3E9D5;
  --terra:#D46B3C;
  --terra-soft:#FBEBE2;

  /* Ink & text - warm greys, never blue */
  --ink:#191512;
  --ink-2:#2F2A24;
  --text:#37322B;
  --text-2:#635C51;
  --text-3:#918A7C;
  --text-4:#B4AC9D;

  /* Lines */
  --line:rgba(25,21,18,.09);
  --line-2:rgba(25,21,18,.16);
  --line-on-dark:rgba(255,255,255,.14);

  /* Type */
  --font:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-deva:"Noto Sans Devanagari",var(--font);

  --d1:clamp(2.35rem,5vw,3.9rem);
  --d2:clamp(1.9rem,3.4vw,2.75rem);
  --d3:clamp(1.45rem,2.2vw,1.85rem);
  --d4:clamp(1.15rem,1.5vw,1.3rem);
  --lead:clamp(1.03rem,1.25vw,1.15rem);
  --body:1rem;
  --small:.9375rem;
  --tiny:.8125rem;

  /* Space - 4pt base */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --sec:clamp(72px,8.5vw,124px);
  --sec-sm:clamp(52px,6vw,84px);
  --sec-xs:clamp(36px,4vw,56px);
  --head-gap:clamp(28px,3.4vw,52px);

  /* Shape */
  --r-xs:6px; --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* Elevation - barely there */
  --sh-0:0 1px 2px rgba(25,21,18,.04);
  --sh-1:0 1px 2px rgba(25,21,18,.04),0 4px 14px rgba(25,21,18,.045);
  --sh-2:0 2px 4px rgba(25,21,18,.05),0 12px 32px rgba(25,21,18,.07);
  --sh-3:0 8px 20px rgba(25,21,18,.08),0 32px 64px rgba(25,21,18,.10);

  --wrap:1180px;
  --wrap-narrow:760px;
  --wrap-mid:960px;

  --ease:cubic-bezier(.16,1,.3,1);
  --t:.5s var(--ease);
  --nav-h:64px;
}
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Lora:ital,wght@0,400;0,600;0,700;1,700&display=swap');

/* ── Custom Properties ── */
:root {
  /* Brand Colors */
  --green:       #1E3A2F;
  --green-dark:  #15301F;
  --green-mid:   #2d5a3d;
  --green-10:    rgba(30,58,47,0.08);
  --gold:        #C9A055;
  --gold-light:  rgba(201,160,85,0.12);
  --cream:       #F5F0E8;
  --cream-dark:  #E8E3DB;
  --terra:       #D46B3C;

  /* Pure contrast palette — Sonos-exact */
  --ink:         #000000;
  --ink-soft:    #0D0D0D;
  --white:       #FFFFFF;
  --off-white:   #F8F7F5;
  --muted:       #6B6B6B;
  --border:      #E2DDD5;
  --border-dark: rgba(255,255,255,0.08);
  --success:     #2E7D52;

  /* Typography */
  --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-brand:   'Lora', Georgia, 'Times New Roman', serif;

  /* ── SONOS TYPOGRAPHY SCALE ──
     The defining trait: billboard-scale headlines with tight leading and negative tracking.
     Sonos uses ~0.94 line-height and -0.03em letter-spacing on display type.
     This creates the magazine-spread, architectural headline effect. */
  --t-display-size:   clamp(3.2rem, 8.5vw, 8rem);
  --t-display-lh:     0.94;
  --t-display-ls:     -0.03em;
  --t-display-wt:     800;

  --t-headline-size:  clamp(2rem, 5vw, 4.8rem);
  --t-headline-lh:    0.98;
  --t-headline-ls:    -0.025em;
  --t-headline-wt:    800;

  --t-sub-size:       clamp(1.4rem, 2.8vw, 2.6rem);
  --t-sub-lh:         1.08;
  --t-sub-ls:         -0.018em;
  --t-sub-wt:         800;

  --t-body-size:      1.05rem;
  --t-body-lh:        1.72;

  --t-over-size:      0.72rem;
  --t-over-wt:        700;
  --t-over-ls:        0.12em;

  /* Spacing */
  --section-py:    clamp(40px, 12vw, 80px);
  --section-py-sm: clamp(40px,  7vw, 50px);
  --gutter:        clamp(24px,  5vw, 50px);
  --max-w:         1320px;
  --max-w-md:      960px;
  --max-w-sm:      660px;
  --nav-h:         64px;
  --ann-h:         44px;

  /* Radii */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   18px;
  --r-2xl:  24px;
  --r-3xl:  36px;
  --r-pill: 999px;

  /* Shadows */
  --sh-xs: 0 1px 3px rgba(0,0,0,0.04);
  --sh-sm: 0 2px 10px rgba(0,0,0,0.06);
  --sh-md: 0 4px 24px rgba(0,0,0,0.08);
  --sh-lg: 0 8px 48px rgba(0,0,0,0.12);
  --sh-xl: 0 20px 80px rgba(0,0,0,0.16);

  /* Transitions */
  --t:      0.2s ease;
  --t-slow: 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ------------------------------ 2 · RESET ------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--font);font-size:var(--body);line-height:1.7;
  font-weight:450;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,video,svg{max-width:100%;display:block}
img,video{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}
::selection{background:var(--gold-soft);color:var(--ink)}
hr{border:0;border-top:1px solid var(--line);margin:var(--s7) 0}

/* ------------------------------ 3 · TYPE -------------------------------- */
h1,h2,h3,h4,h5{margin:0;font-weight:800;color:var(--ink);letter-spacing:-.028em;line-height:1.14;text-wrap:balance}
p{margin:0;max-width:66ch}
.d1{font-size:var(--d1);line-height:1.04;letter-spacing:-.035em}
.d2{font-size:var(--d2);line-height:1.1;letter-spacing:-.032em}
.d3{font-size:var(--d3);line-height:1.2;letter-spacing:-.026em}
.d4{font-size:var(--d4);line-height:1.34;letter-spacing:-.02em;font-weight:700}
.lead{font-size:var(--lead);line-height:1.62;color:var(--text-2);font-weight:450;max-width:60ch}
.small{font-size:var(--small);line-height:1.65}
.tiny{font-size:var(--tiny);line-height:1.6;color:var(--text-3);max-width:62ch}
.deva{font-family:var(--font-deva)}
b,strong{font-weight:700;color:var(--ink)}
em{font-style:normal;color:var(--green);font-weight:600}

.eyebrow{
  display:inline-block;font-size:.6875rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.15em;color:var(--text-3);
  margin:0 0 var(--s4);
}
.eyebrow--gold{color:#9A7532}
.eyebrow--green{color:var(--green-mid)}
.on-dark .eyebrow,.on-green .eyebrow{color:rgba(255,255,255,.5)}
.on-dark .eyebrow--gold,.on-green .eyebrow--gold{color:var(--gold)}

/* Anything that centres its text must centre its own box. */
.center{text-align:center;margin-inline:auto}
p.center,.lead.center,.tiny.center,.small.center,
.center > p,.center > .lead,.center > .tiny,.center > .small{margin-inline:auto}

/* Owl spacing: components space themselves. */
.flow > * + *{margin-top:var(--s4)}
.flow-lg > * + *{margin-top:var(--s5)}

/* ------------------------------ 4 · LAYOUT ------------------------------ */
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto;margin-top:20px;
}
.wrap--narrow{width:min(100% - 40px,var(--wrap-narrow))}
.wrap--mid{width:min(100% - 40px,var(--wrap-mid))}
.sec{padding-block:var(--sec)}
.sec-sm{padding-block:var(--sec-sm)}
.sec-xs{padding-block:var(--sec-xs)}
.sec-top-0{padding-top:0}
.sec-bot-0{padding-bottom:0}

.paper-2{background:var(--paper-2)}
.paper-3{background:var(--paper-3)}
.cream{background:var(--cream)}
.sage{background:var(--sage)}
.kraft{background:var(--kraft)}

.on-green{background:var(--green);color:rgba(255,255,255,.78)}
.on-green h1,.on-green h2,.on-green h3,.on-green h4,.on-green b,.on-green strong{color:#fff}
.on-green .lead,.on-green p{color:rgba(255,255,255,.76)}
.on-green .tiny{color:rgba(255,255,255,.5)}
.on-green em{color:var(--gold)}

.on-dark{background:var(--ink);color:rgba(255,255,255,.76)}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,.on-dark b,.on-dark strong{color:#fff}
.on-dark .lead,.on-dark p{color:rgba(255,255,255,.72)}
.on-dark .tiny{color:rgba(255,255,255,.48)}
.on-dark em{color:var(--gold)}

/* Section head - the standard opener for every section */
.sec-head{max-width:640px;margin-bottom:var(--head-gap)}
.sec-head.center{margin-inline:auto}
.sec-head > * + *{margin-top:var(--s4)}
.sec-head .eyebrow{margin-bottom:0}

/* Trailing call to action under a grid */
.sec-cta{display:flex;flex-direction:column;align-items:center;gap:var(--s3);margin-top:var(--s7);text-align:center}
.sec-cta__row{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center;align-items:stretch}

/* Grids */
.grid{display:grid;gap:var(--s5);align-items:stretch}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid > *{min-width:0}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px);align-items:center}
.split--wide-r{grid-template-columns:.85fr 1.15fr}
.split--wide-l{grid-template-columns:1.15fr .85fr}
.split--top{align-items:start}
.split__text > * + *{margin-top:var(--s4)}
.split--flip .split__media{order:2}

@media (max-width:900px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .split,.split--wide-r,.split--wide-l{grid-template-columns:1fr;gap:var(--s6)}
  .split--flip .split__media{order:0}
}
@media (max-width:620px){
  .grid-2,.grid-4{grid-template-columns:1fr}
}

/* ------------------------------ 5 · BUTTONS ---------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:48px;padding:0 22px;border-radius:var(--r-sm);
  font-size:var(--small);font-weight:650;letter-spacing:-.012em;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn--lg{min-height:56px;padding:0 30px;font-size:1rem;margin: 10px 0;}
.btn--sm{min-height:38px;padding:0 15px;font-size:var(--tiny)}
.btn--block{display:flex;width:100%}

.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:#000}
.btn--green{background:var(--green);color:#fff}
.btn--green:hover{background:var(--green-mid)}
.btn--gold{background:var(--gold);color:#33260C}
.btn--gold:hover{background:#B98D44}
.btn--white{background:#fff;color:var(--ink);border-color:var(--line-2)}
.btn--white:hover{background:var(--paper-2);border-color:var(--line-2)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--paper-2)}
.on-dark .btn--ghost,.on-green .btn--ghost{color:#000;border-color:var(--line-on-dark)}
.on-dark .btn--ghost:hover,.on-green .btn--ghost:hover{background:rgba(255,255,255,.08)}

.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:stretch}
.btn-row .btn{flex:0 0 auto}

.link-arrow{
  display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:var(--small);
  color:var(--green);transition:gap .2s var(--ease)
}
.link-arrow::after{content:"→";transition:transform .2s var(--ease)}
.link-arrow:hover{gap:10px}
.on-dark .link-arrow,.on-green .link-arrow{color:var(--gold)}

/* ------------------------------ 6 · TAGS ------------------------------- */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:var(--r-pill);
  font-size:.6875rem;font-weight:700;letter-spacing:.02em;
  background:var(--paper-3);color:var(--text-2);
}
.tag--gold{background:var(--gold-soft);color:#8A6A2A}
.tag--green{background:var(--sage);color:var(--green)}
.tag--terra{background:var(--terra-soft);color:#A94E24}
.on-dark .tag,.on-green .tag{background:rgba(255,255,255,.1);color:rgba(255,255,255,.8)}

.dot-live{
  width:7px;height:7px;border-radius:50%;background:#3E9C63;display:inline-block;
  box-shadow:0 0 0 3px rgba(62,156,99,.16)
}

/* ------------------------------ 7 · CARDS ------------------------------ */
.card{
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,30px);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease);
}
.card > * + *{margin-top:var(--s3)}
.card > .link-arrow,.card > .btn{margin-top:auto;}
.card h3,.card h4{letter-spacing:-.024em}
.card p{color:var(--text-2);font-size:var(--small)}
.card--hover:hover{border-color:var(--line-2);box-shadow:var(--sh-1);transform:translateY(-2px)}
.card--flat{background:var(--paper-2);border-color:transparent}
.card--green{background:var(--green);border-color:var(--green);color:rgba(255,255,255,.76)}
.card--green h3,.card--green h4,.card--green b{color:#fff}
.card--green p{color:rgba(255,255,255,.74)}
.paper-2 .card,.cream .card,.sage .card{background:var(--paper)}
.on-dark .card,.on-green .card{background:rgba(255,255,255,.05);border-color:var(--line-on-dark)}
.on-dark .card h3,.on-dark .card h4,.on-green .card h3,.on-green .card h4{color:#fff}
.on-dark .card p,.on-green .card p{color:rgba(255,255,255,.7)}

.card__ico{
  width:38px;height:38px;border-radius:var(--r-sm);
  display:grid;place-items:center;font-size:1.05rem;
  background:var(--paper-3);color:var(--green);flex:0 0 auto;
}
.on-dark .card__ico,.on-green .card__ico{background:rgba(255,255,255,.1);color:var(--gold)}
.card__num{
  font-size:.75rem;font-weight:800;letter-spacing:.06em;color:var(--text-4);
}

/* Numbered step card */
.step{display:flex;flex-direction:column;gap:var(--s3)}
.step__n{
  width:30px;height:30px;border-radius:var(--r-pill);display:grid;place-items:center;
  background:var(--green);color:#fff;font-size:.8rem;font-weight:800;flex:0 0 auto
}

/* ------------------------------ 8 · MEDIA ------------------------------ */
/* The frame owns the ratio. A source can never set a row's height. */
.frame{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:var(--paper-3);border:1px solid var(--line);
  aspect-ratio:16/9;
}
.frame--sq{aspect-ratio:1/1}
.frame--4-5{aspect-ratio:4/5}
.frame--3-4{aspect-ratio:3/4}
.frame--3-2{aspect-ratio:3/2}
.frame--4-3{aspect-ratio:4/3}
.frame--free{aspect-ratio:auto}
.frame > img,.frame > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame--contain > img{object-fit:contain;padding:8%}
.frame--plain{border:0;background:transparent}

/* Notion's signature: the image floats inside a soft tinted panel */
.panel{
  background:var(--paper-2);border-radius:var(--r-xl);
  padding:clamp(20px,3.2vw,44px);
}
.panel--cream{background:var(--cream)}
.panel--sage{background:var(--sage)}
.panel--kraft{background:var(--kraft)}
.panel--green{background:var(--green)}
.panel--ink{background:var(--ink)}
.panel .frame{box-shadow:var(--sh-2);border-color:rgba(25,21,18,.06)}

/* A reserved slot for creative that does not exist yet */
.mslot{
  border:1.5px dashed var(--line-2);border-radius:var(--r-lg);
  background:repeating-linear-gradient(135deg,var(--paper-2) 0 12px,transparent 12px 24px);
  padding:clamp(20px,2.6vw,30px);
  display:flex;flex-direction:column;gap:var(--s3);
  aspect-ratio:16/9;min-height:260px;
}
.mslot--sq{aspect-ratio:1/1}
.mslot--free{aspect-ratio:auto}
.mslot__tag{font-size:.65rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.mslot h4{font-size:1rem}
.mslot p{font-size:var(--tiny);color:var(--text-2);margin:0}
.mslot__why{margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--line);font-size:var(--tiny);color:var(--text-3)}

/* ------------------------------ 9 · NAV -------------------------------- */
.nav{
  position:relative;top:0;z-index:80;
  background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .25s var(--ease),background .25s var(--ease);
}
.nav.is-stuck{border-bottom-color:var(--line)}
.nav__in{
  height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  width:min(100% - 40px,var(--wrap));margin-inline:auto;
}
.nav__logo{display:flex;align-items:baseline;gap:8px;font-weight:800;font-size:1.06rem;letter-spacing:-.03em;color:var(--ink);flex:0 0 auto}
.nav__logo .deva{font-size:1.16rem;color:var(--green)}
.nav__links{display:flex;align-items:center;gap:2px;margin-left:var(--s4);flex:1 1 auto}
.nav__links a{
  padding:8px 12px;border-radius:var(--r-xs);font-size:var(--small);font-weight:550;color:var(--text-2);
  transition:background .16s var(--ease),color .16s var(--ease)
}
.nav__links a:hover{background:var(--paper-2);color:var(--ink)}
.nav__links a.is-on{color:var(--ink);font-weight:650}
.nav__right{display:flex;align-items:center;gap:var(--s2);flex:0 0 auto}
.nav__account{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-xs);color:var(--text-2);flex:0 0 auto}
.nav__account:hover{background:var(--paper-2);color:var(--ink)}
.nav__account .ico{width:20px;height:20px}
.nav__cartlink{position:relative;padding:8px 12px;border-radius:var(--r-xs);font-size:var(--small);font-weight:550;color:var(--text-2)}
.nav__cartlink:hover{background:var(--paper-2);color:var(--ink)}
.nav__burger{display:none;width:40px;height:40px;border-radius:var(--r-xs);place-items:center}
.nav__burger:hover{background:var(--paper-2)}
.nav__burger span{display:block;width:17px;height:1.5px;background:var(--ink);border-radius:2px;position:relative}
.nav__burger span::before,.nav__burger span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--ink);border-radius:2px}
.nav__burger span::before{top:-5.5px}.nav__burger span::after{top:5.5px}

.nav__sheet{
  display:none;border-top:1px solid var(--line);background:var(--paper);
  padding:var(--s4) 20px var(--s6);
}
.nav__sheet.is-open{display:block}
.nav__sheet a{display:block;padding:12px;font-size:1.02rem;font-weight:600;border-bottom:1px solid var(--line)}
.nav__sheet .btn{margin-top:var(--s5)}
.nav__sheet-account{display:flex!important;align-items:center;gap:8px}
.nav__sheet-account .ico{width:18px;height:18px}

@media (max-width:980px){
  .nav__links{display:none}
  .nav__burger{display:grid}
  .nav__right .btn{display:none}
}

/* Announcement - quiet, one line, no code */
.announce{
  background:var(--green);color:rgba(255,255,255,.88);
  font-size:var(--tiny);font-weight:550;letter-spacing:.01em;
  text-align:center;padding:9px 20px;
}
.announce b{color:#fff}

/* ------------------------------ 10 · HERO ------------------------------ */
.hero{padding-block:clamp(20px,7vw,4px) clamp(20px,7vw,4px)}
.hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);}
.hero__grid > *{min-width:0}
.hero__text > * + *{margin-top:var(--s5)}
.hero__text .btn-row{margin-top:var(--s6)}
.hero h1{font-size:var(--d1);line-height:1.02;letter-spacing:-.038em}
.hero .lead{font-size:clamp(1.06rem,1.4vw,1.22rem)}
.hero__note{font-size:var(--tiny);color:var(--text-3);margin-top:var(--s4)}

@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:var(--s6)}
  .hero__media{order:-1}
}

/* Promise strip - slow, quiet, one line */
.strip{border-block:1px solid var(--line);overflow:hidden;background:var(--paper)}
.strip__track{display:flex;gap:var(--s7);width:max-content;padding-block:14px;animation:slide 52s linear infinite}
.strip:hover .strip__track{animation-play-state:paused}
.strip__i{display:flex;align-items:center;gap:9px;font-size:var(--tiny);font-weight:600;color:var(--text-2);white-space:nowrap}
.strip__i::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--gold);flex:0 0 auto}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.strip__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:var(--s4) var(--s5)}}

/* ------------------------------ 11 · STATEMENT ------------------------- */
.stmt{padding-block:clamp(88px,11vw,168px);text-align:center}
.stmt h2{font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.08;letter-spacing:-.036em;max-width:16ch;margin-inline:auto}
.stmt p{margin-top:var(--s5)}
.stmt__src{margin-top:var(--s5);font-size:var(--tiny);color:var(--text-4)}
.on-green .stmt__src,.on-dark .stmt__src{color:rgba(255,255,255,.42)}

/* ------------------------------ 12 · STATS ----------------------------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.stat{padding:var(--s5) 0}
.stat__n{font-size:clamp(2.2rem,4.4vw,3.2rem);font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--ink)}
.on-dark .stat__n,.on-green .stat__n{color:var(--gold)}
.stat__l{margin-top:var(--s3);font-size:var(--small);color:var(--text-2);max-width:26ch}
.stat__s{margin-top:var(--s2);font-size:var(--tiny);color:var(--text-4)}
@media (max-width:720px){.stats{grid-template-columns:1fr;gap:var(--s4)}.stat{padding:var(--s4) 0;border-top:1px solid var(--line)}}

/* ------------------------------ 13 · TRUST ----------------------------- */
.trustbar{border-block:1px solid var(--line);background:var(--paper-2)}
.trustbar__in{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);padding-block:var(--s6)}
.trustbar__c{display:flex;flex-direction:column;gap:5px;align-items:center;text-align:center;padding-inline:var(--s3)}
.trustbar__c b{font-size:var(--small);letter-spacing:-.018em}
.trustbar__c span{font-size:var(--tiny);color:var(--text-3)}
@media (max-width:760px){.trustbar__in{grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s3)}}

.creds{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
.creds__c{border-left:2px solid var(--line);padding-left:var(--s4)}
.creds__c b{display:block;font-size:var(--small)}
.creds__c span{font-size:var(--tiny);color:var(--text-3);line-height:1.55;display:block;margin-top:4px}
@media (max-width:760px){.creds{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.creds{grid-template-columns:1fr}}

/* ------------------------------ 14 · PROOF ----------------------------- */
.stars{color:var(--gold);letter-spacing:.1em;font-size:.85rem;line-height:1}
.rating{display:flex;align-items:center;gap:var(--s3);font-size:var(--tiny);color:var(--text-3)}

.proofbar{border-block:1px solid var(--line);background:var(--paper)}
.proofbar__in{
  width:min(100% - 40px,var(--wrap));margin-inline:auto;
  display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,56px);
  align-items:center;padding-block:var(--s6)
}
.proofbar__score{display:flex;flex-direction:column;gap:4px;padding-right:clamp(24px,4vw,56px);border-right:1px solid var(--line)}
.proofbar__score b{font-size:1.9rem;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.proofbar__score span{font-size:var(--tiny);color:var(--text-3)}
.proofbar__quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,32px)}
.proofbar__q p{font-size:var(--small);color:var(--text);margin:0;line-height:1.55}
.proofbar__q span{display:block;margin-top:6px;font-size:var(--tiny);color:var(--text-3)}
@media (max-width:880px){
  .proofbar__in{grid-template-columns:1fr;gap:var(--s5)}
  .proofbar__score{border-right:0;border-bottom:1px solid var(--line);padding:0 0 var(--s4);flex-direction:row;align-items:baseline;gap:50px}
  .proofbar__quotes{grid-template-columns:1fr;gap:var(--s4)}
}

.quote{
  display:flex;flex-direction:column;gap:var(--s3);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,28px)
}
.quote p{font-size:var(--small);line-height:1.62;color:var(--text);margin:0}
.quote__who{margin-top:auto;padding-top:var(--s3);font-size:var(--tiny);color:var(--text-3)}
.quote__who b{display:block;color:var(--ink);font-size:var(--small);font-weight:650}
.paper-2 .quote,.cream .quote,.sage .quote{background:var(--paper)}

/* Review wall - one slow lane, not three */
.wall{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.wall__track{display:flex;gap:var(--s4);width:max-content;animation:slide 96s linear infinite}
.wall:hover .wall__track{animation-play-state:paused}
.wall__c{
  width:290px;flex:0 0 auto;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s2)
}
.wall__c p{font-size:var(--small);line-height:1.55;margin:0}
.wall__c cite{font-style:normal;font-size:var(--tiny);color:var(--text-3);margin-top:auto;padding-top:var(--s2)}
@media (prefers-reduced-motion:reduce){.wall__track{animation:none}}

/* ------------------------------ 15 · BUY BOX --------------------------- */
.buybox{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(24px,2.8vw,36px);
}
.buybox > * + *{margin-top:var(--s4)}
.buybox h1{font-size:clamp(1.75rem,2.9vw,2.35rem);letter-spacing:-.036em;line-height:1.08}
.buybox__top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4)}
.price{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.price-now{font-size:1.65rem;font-weight:800;letter-spacing:-.038em;color:var(--ink)}
.price-was{font-size:1rem;color:var(--text-4);text-decoration:line-through}
.save-badge{
  font-size:.6875rem;font-weight:800;letter-spacing:.02em;
  padding:4px 9px;border-radius:var(--r-pill);background:var(--terra-soft);color:#A94E24
}

.packs{display:flex;flex-direction:column;gap:var(--s2)}
.pack{
  display:flex;align-items:center;gap:var(--s3);
  border:1.5px solid var(--line);border-radius:var(--r);
  padding:14px 16px;cursor:pointer;position:relative;background:var(--paper);
  transition:border-color .18s var(--ease),background .18s var(--ease)
}
.pack:hover{border-color:var(--line-2)}
.pack.is-on{border-color:var(--green);background:#FAFCFA}
.pack input{position:absolute;opacity:0;pointer-events:none}
.pack__dot{
  width:17px;height:17px;border-radius:50%;border:1.5px solid var(--line-2);flex:0 0 auto;
  display:grid;place-items:center;transition:border-color .18s var(--ease)
}
.pack.is-on .pack__dot{border-color:var(--green)}
.pack.is-on .pack__dot::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--green)}
.pack__body{flex:1 1 auto;min-width:0}
.pack__title{display:flex;align-items:center;gap:7px;font-size:var(--small);font-weight:700;color:var(--ink);letter-spacing:-.016em}
.pack__sub{display:block;font-size:var(--tiny);color:var(--text-3);margin-top:2px}
.pack__right{text-align:right;flex:0 0 auto}
.pack__amt{font-size:var(--small);font-weight:750;color:var(--ink)}
.pack__strike{font-size:var(--tiny);color:var(--text-4);text-decoration:line-through}

.buy-trust{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);font-size:var(--tiny);color:var(--text-3);padding-top:var(--s2)}
.buy-trust span{display:flex;align-items:center;gap:6px}
.paylogos{display:flex;flex-wrap:wrap;gap:6px;padding-top:var(--s3);border-top:1px solid var(--line)}
.paylogo{
  font-size:.625rem;font-weight:750;letter-spacing:.05em;color:var(--text-3);
  border:1px solid var(--line);border-radius:var(--r-xs);padding:4px 8px
}

/* Gallery */
.gal__main{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--paper-3);aspect-ratio:1/1}
.gal__main > img,.gal__main > video,.gal__main .slide{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .45s var(--ease);pointer-events:none}
.gal__main > img.is-on,.gal__main > video.is-on,.gal__main .slide.is-on{opacity:1;pointer-events:auto}
.gal__main img,.gal__main video{object-fit:cover}
.slide{position:absolute;inset:0}
.slide > img,.slide > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide__over{
  position:absolute;inset:auto 0 0 0;padding:clamp(20px,3vw,34px);
  background:linear-gradient(to top,rgba(25,21,18,.62),rgba(25,21,18,.18) 55%,transparent);
  color:#fff
}
.slide__over--top{inset:0 0 auto 0;background:linear-gradient(to bottom,rgba(25,21,18,.55),transparent)}
.slide__head{font-size:clamp(1.15rem,2.1vw,1.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.12;color:#fff;max-width:16ch}
.slide__sub{font-size:var(--tiny);color:rgba(255,255,255,.8);margin-top:8px}
.gal__thumbs{display:flex;gap:8px;margin-top:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.gal__thumbs::-webkit-scrollbar{display:none}
.gal__thumbs button{
  position:relative;width:64px;height:64px;flex:0 0 auto;border-radius:var(--r-sm);overflow:hidden;
  border:1.5px solid var(--line);background:var(--paper-3);transition:border-color .18s var(--ease)
}
.gal__thumbs button img{width:100%;height:100%;object-fit:cover}
.gal__thumbs button.is-on{border-color:var(--green)}
.playmark{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(25,21,18,.32);color:#fff;font-size:.7rem
}

/* ------------------------------ 16 · ACCORDION ------------------------- */
.acc{border-top:1px solid var(--line)}
.acc__i{border-bottom:1px solid var(--line)}
.acc__q{
  width:100%;display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);
  padding:var(--s5) 0;text-align:left;font-size:var(--body);font-weight:650;
  color:var(--ink);letter-spacing:-.018em;line-height:1.45
}
.acc__q:hover{color:var(--green)}
.acc__mark{
  flex:0 0 auto;width:20px;height:20px;position:relative;margin-top:3px;
}
.acc__mark::before,.acc__mark::after{
  content:"";position:absolute;top:50%;left:50%;background:var(--text-3);border-radius:2px;
  transform:translate(-50%,-50%);transition:transform .25s var(--ease),opacity .25s var(--ease)
}
.acc__mark::before{width:11px;height:1.5px}
.acc__mark::after{width:1.5px;height:11px}
.acc__i.is-open .acc__mark::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.acc__a{overflow:hidden;max-height:0;transition:max-height .35s var(--ease)}
.acc__a > div{padding-bottom:var(--s5)}
.acc__a p{font-size:var(--small);color:var(--text-2)}
.acc__a > div > * + *{margin-top:var(--s3)}
.on-dark .acc,.on-dark .acc__i,.on-green .acc,.on-green .acc__i{border-color:var(--line-on-dark)}
.on-dark .acc__q,.on-green .acc__q{color:#fff}
.on-dark .acc__a p,.on-green .acc__a p{color:rgba(255,255,255,.7)}
.acc--tight .acc__q{padding:14px 0;font-size:var(--small)}
.acc--tight .acc__a > div{padding-bottom:var(--s4)}

/* ------------------------------ 17 · TICKS ----------------------------- */
.ticks,.hero__bullets{list-style:none!important;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.ticks li,.hero__bullets li{display:flex;gap:11px;align-items:flex-start;font-size:var(--small);color:var(--text-2);line-height:1.55}
.ticks li::marker,.hero__bullets li::marker{content:none}
.tick{
  flex:0 0 auto;width:19px;height:19px;border-radius:50%;background:var(--sage);color:var(--green);
  display:grid;place-items:center;font-size:.6rem;font-weight:800;margin-top:2px
}
.on-dark .tick,.on-green .tick{background:rgba(201,160,85,.2);color:var(--gold)}
.cross{background:var(--terra-soft);color:#A94E24}

/* ------------------------------ 18 · COMPARE --------------------------- */
.ctable-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper)}
.ctable{border-collapse:collapse;table-layout:fixed;min-width:640px;width:100%}
.ctable th,.ctable td{padding:16px 18px;text-align:center;font-size:var(--small);border-bottom:1px solid var(--line);vertical-align:middle}
.ctable thead th{font-size:var(--tiny);font-weight:750;color:var(--text-3);letter-spacing:.02em;background:var(--paper-2)}
.ctable tbody th{text-align:left;font-weight:600;color:var(--text);width:30%}
.ctable .col-us{background:#FAFCFA}
.ctable thead .col-us{background:var(--sage);color:var(--green);font-weight:800}
.ctable tr:last-child th,.ctable tr:last-child td{border-bottom:0}
.mk{font-weight:750;color:var(--green)}
.mk--no{color:var(--text-4);font-weight:500}

/* ------------------------------ 19 · TAP DEMO -------------------------- */
.demo{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(20px,3.4vw,48px);align-items:center;max-width:900px;margin-inline:auto}
.phone{
  position:relative;width:100%;max-width:236px;margin-inline:auto;
  border-radius:30px;background:var(--ink);border:8px solid #0D0B09;
  box-shadow:var(--sh-3);overflow:hidden
}
.phone__screen{position:absolute;inset:0;background:linear-gradient(180deg,#26221D,#141210);padding:14px 10px;display:flex;flex-direction:column;gap:7px}
.notif{
  background:rgba(255,255,255,.94);border-radius:9px;padding:8px 10px;
  display:flex;gap:8px;align-items:center;transition:transform .6s var(--ease),opacity .6s var(--ease)
}
.notif__ico{width:20px;height:20px;border-radius:5px;background:var(--paper-3);flex:0 0 auto;display:grid;place-items:center;font-size:.6rem}
.notif__t{font-size:.58rem;font-weight:700;color:var(--ink);line-height:1.25}
.notif__b{font-size:.53rem;color:var(--text-3);line-height:1.25}
.demo.is-on .notif{transform:translateX(130%) rotate(6deg);opacity:0}
.demo.is-on .notif:nth-child(1){transition-delay:.05s}
.demo.is-on .notif:nth-child(2){transition-delay:.12s}
.demo.is-on .notif:nth-child(3){transition-delay:.19s}
.demo.is-on .notif:nth-child(4){transition-delay:.26s}
.demo.is-on .notif:nth-child(5){transition-delay:.33s}
.focusstate{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(180deg,#1E3A2F,#15301F);opacity:0;transition:opacity .5s var(--ease) .4s
}
.demo.is-on .focusstate{opacity:1}
.focusstate b{color:#fff;font-size:1.7rem;font-weight:800;letter-spacing:-.04em}
.focusstate span{color:rgba(255,255,255,.6);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.tapbtn{
  width:132px;height:132px;border-radius:50%;margin-inline:auto;
  position:relative;overflow:hidden;cursor:pointer;background:var(--paper-3);
  box-shadow:0 14px 34px rgba(25,21,18,.16);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)
}
.tapbtn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tapbtn::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid var(--gold);opacity:0;
  animation:ping 2.6s var(--ease) infinite;
}
@keyframes ping{0%{transform:scale(.9);opacity:.6}70%{transform:scale(1.22);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.tapbtn::after{animation:none}}
.tapbtn:hover{transform:translateY(-3px)}
.demo.is-on .tapbtn{transform:scale(.965);box-shadow:0 6px 16px rgba(25,21,18,.14)}
.tapbtn__txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.demo__side > * + *{margin-top:var(--s3)}
@media (max-width:820px){
  .demo{grid-template-columns:1fr;text-align:center;gap:var(--s5)}
  .demo__side{max-width:420px;margin-inline:auto}
  .demo__side p{margin-inline:auto}
}

/* ------------------------------ 20 · BEFORE/AFTER ---------------------- */
.ba{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(14px,3vw,36px);align-items:center;max-width:860px;margin-inline:auto}
.ba__c{border-radius:var(--r-lg);padding:clamp(22px,2.6vw,30px);text-align:center;border:1px solid var(--line);background:var(--paper)}
.ba__c--after{background:var(--green);border-color:var(--green)}
.ba__c--after b,.ba__c--after p{color:#fff}
.ba__c--after span{color:rgba(255,255,255,.65)}
.ba__c b{display:block;font-size:1.08rem;letter-spacing:-.026em;margin-top:var(--s3)}
.ba__c span{display:block;font-size:var(--small);color:var(--text-3);margin-top:4px}
@media (max-width:700px){.ba{grid-template-columns:1fr}}

/* ------------------------------ 21 · MODALS ---------------------------- */
.ovl{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgba(25,21,18,.42);backdrop-filter:blur(3px);
  align-items:center;justify-content:center;padding:20px;
  opacity:0;transition:opacity .3s var(--ease)
}
.ovl.is-open{display:flex}
.ovl.is-vis{opacity:1}
.modal{
  background:var(--paper);border-radius:var(--r-xl);width:min(100%,480px);
  max-height:calc(100vh - 40px);overflow-y:auto;padding:clamp(26px,3.4vw,38px);
  box-shadow:var(--sh-3);transform:translateY(12px);transition:transform .35s var(--ease)
}
.ovl.is-vis .modal{transform:none}
.modal--wide{width:min(100%,620px)}
.modal > * + *{margin-top:var(--s4)}
.modal__x{
  position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:var(--r-xs);
  display:grid;place-items:center;color:var(--text-3);font-size:1.1rem
}
.modal__x:hover{background:var(--paper-2);color:var(--ink)}
.modal__wrap{position:relative}
@media (max-width:560px){
  .ovl{align-items:flex-end;padding:0}
  .modal{border-radius:var(--r-xl) var(--r-xl) 0 0;width:100%;max-height:88vh}
}

/* Choice rows inside modals and quizzes */
.choices{display:flex;flex-direction:column;gap:var(--s2)}
.choice{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  border:1.5px solid var(--line);border-radius:var(--r);padding:14px 16px;
  font-size:var(--small);font-weight:600;color:var(--ink);text-align:left;width:100%;
  transition:border-color .18s var(--ease),background .18s var(--ease)
}
.choice:hover{border-color:var(--green);background:#FAFCFA}
.choice.is-on{border-color:var(--green);background:#FAFCFA}
.choice span{font-size:var(--tiny);color:var(--text-3);font-weight:450}
.choice::after{content:"→";color:var(--text-4);flex:0 0 auto}
.choice.is-on::after{content:"✓";color:var(--green)}

.progress{display:flex;gap:5px}
.progress i{height:3px;flex:1;border-radius:2px;background:var(--line);transition:background .3s var(--ease)}
.progress i.is-on{background:var(--green)}

/* ------------------------------ 21b · CART DRAWER ----------------------- */
/* Opens on "Add to bag" instead of navigating away. Slides in from the
   right on desktop, from the bottom on mobile — same backdrop pattern as
   .ovl, but its own panel so the slide direction doesn't fight the
   centred-modal transform. Line items reuse .line/.qty from the cart page
   (section 22) so this looks like a preview of /cart, not a new pattern. */
.cartdrawer-ovl{
  position:fixed;inset:0;z-index:250;display:none;
  background:rgba(25,21,18,.42);
  opacity:0;transition:opacity .3s var(--ease);
}
.cartdrawer-ovl.is-open{display:block}
.cartdrawer-ovl.is-vis{opacity:1}

.cartdrawer{
  position:fixed;top:0;right:0;bottom:0;z-index:251;
  width:min(100%,420px);background:var(--paper);
  box-shadow:var(--sh-3);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .35s var(--ease);
}
.cartdrawer-ovl.is-vis .cartdrawer{transform:none}

.cartdrawer__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:20px 22px;border-bottom:1px solid var(--line);flex:0 0 auto;
}
.cartdrawer__head h3{font-size:1.1rem;letter-spacing:-.022em}
.cartdrawer__count{color:var(--text-3);font-weight:600;font-size:var(--small)}
.cartdrawer__x{width:34px;height:34px;border-radius:var(--r-xs);display:grid;place-items:center;color:var(--text-3)}
.cartdrawer__x:hover{background:var(--paper-2);color:var(--ink)}

.cartdrawer__body{flex:1 1 auto;overflow-y:auto;padding:0 22px}
.cartdrawer__body .line:first-child{border-top:0}
.cartdrawer__body .line{grid-template-columns:64px 1fr auto}
.cartdrawer__body .line__img{width:64px;height:64px}
.cartdrawer__body .line__rm{
  margin-top:8px;font-size:var(--tiny);color:var(--text-3);
  text-decoration:underline;text-underline-offset:3px;
}

.cartdrawer__empty{padding:64px 0;text-align:center;color:var(--text-3)}
.cartdrawer__empty .ico{width:30px;height:30px;margin:0 auto var(--s4);color:var(--text-4)}
.cartdrawer__empty p{margin-inline:auto;max-width:26ch}
.cartdrawer__empty .btn{margin-top:var(--s5)}

.cartdrawer__foot{border-top:1px solid var(--line);padding:18px 22px 22px;flex:0 0 auto}
.cartdrawer__foot > * + *{margin-top:var(--s3)}

@media (max-width:560px){
  .cartdrawer{width:100%;top:auto;border-radius:var(--r-xl) var(--r-xl) 0 0;max-height:88vh;transform:translateY(100%)}
  .cartdrawer-ovl.is-vis .cartdrawer{transform:none}
}

/* ------------------------------ 22 · CART ------------------------------ */
.cartgrid{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:900px){.cartgrid{grid-template-columns:1fr}}
.line{
  display:grid;grid-template-columns:88px 1fr auto;gap:var(--s4);align-items:center;
  padding:var(--s5) 0;border-bottom:1px solid var(--line)
}
.line__img{width:88px;height:88px;border-radius:var(--r);overflow:hidden;background:var(--paper-3);border:1px solid var(--line)}
.line__img img{width:100%;height:100%;object-fit:cover}
.line__t{font-size:var(--body);font-weight:700;color:var(--ink);letter-spacing:-.02em}
.line__s{font-size:var(--tiny);color:var(--text-3);margin-top:3px}
.line__r{text-align:right}
.line__p{font-size:var(--body);font-weight:750;color:var(--ink)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;margin-top:var(--s3)}
.qty button{width:32px;height:32px;display:grid;place-items:center;color:var(--text-2);font-size:.95rem}
.qty button:hover{background:var(--paper-2);color:var(--ink)}
.qty b{min-width:32px;text-align:center;font-size:var(--small);font-weight:700}
@media (max-width:520px){.line{grid-template-columns:64px 1fr}.line__img{width:64px;height:64px}.line__r{grid-column:2;text-align:left}}

.summary{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(22px,2.6vw,30px);position:sticky;top:calc(var(--nav-h) + 20px)
}
.summary > * + *{margin-top:var(--s3)}
.srow{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--small);color:var(--text-2)}
.srow b{color:var(--ink);font-weight:650}
.srow--total{padding-top:var(--s4);border-top:1px solid var(--line);font-size:1.06rem}
.srow--total b{font-size:1.3rem;font-weight:800;letter-spacing:-.032em}
.srow--save{color:#A94E24}
.srow--save b{color:#A94E24}

.nudge{
  display:flex;gap:var(--s4);align-items:center;
  background:var(--gold-soft);border:1px solid rgba(201,160,85,.32);border-radius:var(--r);
  padding:var(--s4)
}
.nudge__t{font-size:var(--small);font-weight:700;color:#7A5C1F;letter-spacing:-.016em}
.nudge__s{font-size:var(--tiny);color:#8A6A2A;margin-top:2px}
.nudge button{flex:0 0 auto;font-size:var(--tiny);font-weight:750;color:#7A5C1F;text-decoration:underline;text-underline-offset:3px}

.empty{text-align:center;padding:var(--s9) 0}
.empty__ico{font-size:2rem;margin-bottom:var(--s4)}

/* ------------------------------ 23 · SURVEY ---------------------------- */
.survey{display:flex;flex-direction:column;gap:var(--s5)}
.survey__q{display:none}
.survey__q.is-on{display:flex;flex-direction:column;gap:var(--s4);animation:fadeup .4s var(--ease)}
.survey__n{font-size:var(--tiny);color:var(--text-3);font-weight:650;letter-spacing:.04em}
.survey h3{font-size:1.2rem;letter-spacing:-.026em;line-height:1.32}
.field{
  width:100%;border:1.5px solid var(--line);border-radius:var(--r);background:var(--paper);
  padding:13px 15px;font-size:var(--small);resize:vertical;transition:border-color .18s var(--ease)
}
.field:focus{outline:none;border-color:var(--green)}
.field::placeholder{color:var(--text-4)}
label.lbl{display:block;font-size:var(--small);font-weight:650;color:var(--ink);margin-bottom:var(--s2)}
@keyframes fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ------------------------------ 24 · 404 ------------------------------- */
.notfound{min-height:calc(100vh - var(--nav-h) - 300px);display:grid;place-items:center;padding-block:var(--sec)}
.notfound__in{max-width:560px;text-align:center}
.notfound__in > * + *{margin-top:var(--s5)}
.notfound__code{font-size:var(--tiny);font-weight:800;letter-spacing:.18em;color:var(--text-4);text-transform:uppercase}
.doors{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);margin-top:var(--s7);text-align:left}
.door{
  display:flex;flex-direction:column;gap:3px;border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s4) var(--s5);transition:border-color .18s var(--ease),background .18s var(--ease)
}
.door:hover{border-color:var(--line-2);background:var(--paper-2)}
.door b{font-size:var(--small);letter-spacing:-.018em}
.door span{font-size:var(--tiny);color:var(--text-3)}
@media (max-width:560px){.doors{grid-template-columns:1fr}}

/* ------------------------------ 25 · ARTICLE --------------------------- */
.article{max-width:680px;margin-inline:auto}
.article > * + *{margin-top:var(--s5)}
.article h2{font-size:clamp(1.4rem,2.4vw,1.85rem);margin-top:var(--s8)}
.article h3{font-size:1.15rem;margin-top:var(--s6)}
.article p{font-size:1.0625rem;line-height:1.78;color:var(--text);max-width:none}
.article ul,.article ol{padding-left:1.15em;color:var(--text);font-size:1.0625rem;line-height:1.78}
.article li + li{margin-top:var(--s2)}
.article blockquote{
  margin:0;padding:var(--s5) 0 var(--s5) var(--s5);border-left:2px solid var(--gold);
  font-size:1.12rem;line-height:1.6;color:var(--ink);font-weight:600;letter-spacing:-.018em
}
.article .frame{margin-block:var(--s7)}
.artmeta{display:flex;flex-wrap:wrap;gap:var(--s3);font-size:var(--tiny);color:var(--text-3);align-items:center}
.artmeta::before{content:""}

/* ------------------------------ 26 · FOOTER ---------------------------- */
.foot{background:var(--paper-2);border-top:1px solid var(--line);padding-block:var(--sec-sm) var(--s6)}
.foot__grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:clamp(28px,4vw,56px)}
.foot__brand .deva{font-size:1.4rem;color:var(--green)}
.foot__lock{display:flex;flex-direction:column;gap:2px}
.foot__lock b{font-size:1.15rem;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.foot__lock span{font-size:var(--small);font-weight:700;color:#9A7532;letter-spacing:-.016em}
.foot h5{font-size:var(--tiny);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--s4)}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.foot a{font-size:var(--small);color:var(--text-2);transition:color .16s var(--ease)}
.foot a:hover{color:var(--ink)}
.foot__base{
  margin-top:var(--sec-sm);padding-top:var(--s5);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;font-size:var(--tiny);color:var(--text-3)
}
@media (max-width:860px){.foot__grid{grid-template-columns:1fr 1fr;gap:var(--s7) var(--s5)}.foot__brand{grid-column:1/-1}}
@media (max-width:520px){.foot__grid{grid-template-columns:1fr}}

/* WhatsApp float */
.wa{
  position:fixed;right:18px;bottom:18px;z-index:70;
  display:flex;align-items:center;gap:9px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:9px 16px 9px 12px;box-shadow:var(--sh-2);
  font-size:var(--tiny);font-weight:650;color:var(--ink);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)
}
.wa:hover{transform:translateY(-2px);box-shadow:var(--sh-3)}
.wa i{width:8px;height:8px;border-radius:50%;background:#3E9C63;box-shadow:0 0 0 3px rgba(62,156,99,.16)}
@media (max-width:560px){.wa{right:12px;bottom:12px;padding:9px 13px}.wa span{display:none}}

/* Sticky buy bar */
.stickybuy{
  position:fixed;left:0;right:0;bottom:0;z-index:75;
  background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);padding:0px 0;
  transform:translateY(110%);transition:transform .35s var(--ease)
}
.stickybuy.is-on{transform:none}
.stickybuy__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);width:min(100% - 40px,var(--wrap));margin-inline:auto}
.stickybuy__l b{font-size:var(--small);letter-spacing:-.02em;display:block}
.stickybuy__l span{font-size:var(--tiny);color:var(--text-3)}
@media (max-width:560px){.stickybuy__l span{display:none}.stickybuy .btn{flex:1 1 auto}}

/* ------------------------------ 27 · REVEAL ---------------------------- */
[data-rv]{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-rv].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-rv]{opacity:1;transform:none}}

/* ------------------------------ 28 · UTILITIES ------------------------- */
.mt0{margin-top:0!important}
.mt2{margin-top:var(--s2)}
.mt3{margin-top:var(--s3)}
.mt4{margin-top:var(--s4)}
.mt5{margin-top:var(--s5)}
.mt6{margin-top:var(--s6)}
.mt7{margin-top:var(--s7)}
.mt8{margin-top:var(--s8)}
.muted{color:var(--text-3)}
.nowrap{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hide{display:none!important}
.rule{border-top:1px solid var(--line)}
.maxw-sm{max-width:520px}
.maxw-md{max-width:660px}

/* ------------------------------ 29 · MOBILE ---------------------------- */
@media (max-width:760px){
  .wrap,.wrap--narrow,.wrap--mid{width:min(100% - 32px,var(--wrap))}
  .nav__in{width:min(100% - 32px,var(--wrap))}
  .proofbar__in,.stickybuy__in{width:min(100% - 32px,var(--wrap))}
  .sec-cta .btn,.sec-cta__row .btn{width:100%}
  .sec-cta__row{flex-direction:column;width:100%;max-width:340px}
  .btn-row .btn{flex:1 1 auto;min-width:150px}
  body{padding-bottom:0}
}
@media (max-width:420px){
  :root{--d1:clamp(2rem,9vw,2.5rem)}
  .gal__thumbs button{width:54px;height:54px}
  .buybox{padding:20px}
  .stmt h2{max-width:20ch}
}

/* ==========================================================================
   30 · BANNERS
   A banner is a photograph with one idea on it. The photo always keeps a
   clean side; the type sits on that side and is rendered in CSS, never
   burnt into the image, so it stays crisp and can be edited.
   ========================================================================== */
.banner{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  background:var(--paper-3);
  min-height:clamp(340px,42vw,520px);
  display:flex;align-items:center;
}
.banner--tall{min-height:clamp(420px,54vw,640px)}
.banner--short{min-height:clamp(230px,26vw,320px)}
.banner--bleed{border-radius:0}
.banner__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  object-position:center;
}
.banner__img--right{object-position:75% center}
.banner__img--left{object-position:25% center}
.banner::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.86) 34%,rgba(255,255,255,.4) 56%,rgba(255,255,255,0) 76%);
}
.banner--dark::after{
  background:linear-gradient(100deg,rgba(20,16,13,.9) 0%,rgba(20,16,13,.78) 34%,rgba(20,16,13,.36) 58%,rgba(20,16,13,.05) 80%);
}
.banner--green::after{
  background:linear-gradient(100deg,rgba(30,58,47,.95) 0%,rgba(30,58,47,.84) 34%,rgba(30,58,47,.4) 58%,rgba(30,58,47,.06) 80%);
}
.banner--center::after{background:linear-gradient(0deg,rgba(20,16,13,.72),rgba(20,16,13,.3) 60%,rgba(20,16,13,.16))}
.banner__in{
  position:relative;z-index:2;
  width:100%;margin-inline:auto;
  padding-block:clamp(36px,5vw,64px);
}
.banner__box{max-width:min(100%,540px)}
.banner__box > * + *{margin-top:var(--s4)}
.banner__box .btn-row{margin-top:var(--s6)}
.banner--center .banner__box{max-width:660px;margin-inline:auto;text-align:center}
.banner--center .banner__box p{margin-inline:auto}
.banner h1,.banner h2{letter-spacing:-.036em;line-height:1.04}
.banner--dark h1,.banner--dark h2,.banner--dark h3,.banner--dark b,
.banner--green h1,.banner--green h2,.banner--green h3,.banner--green b,
.banner--center h1,.banner--center h2{color:#fff}
.banner--dark p,.banner--green p,.banner--center p{color:rgba(255,255,255,.8)}
.banner--dark .tiny,.banner--green .tiny,.banner--center .tiny{color:rgba(255,255,255,.56)}
.banner--dark .eyebrow,.banner--green .eyebrow,.banner--center .eyebrow{color:var(--gold)}
.banner--dark .tick,.banner--green .tick{background:rgba(201,160,85,.22);color:var(--gold)}
.banner--dark .ticks li,.banner--green .ticks li{color:rgba(255,255,255,.8)}

@media (max-width:760px){
  .banner{min-height:auto;flex-direction:column;align-items:stretch}
  .banner__img{position:relative;z-index:0;height:clamp(220px,56vw,320px);width:100%}
  .banner::after{display:none}
  .banner__in{padding-block:var(--s6) var(--s7);background:var(--paper)}
  .banner--dark .banner__in,.banner--center .banner__in{background:var(--ink)}
  .banner--green .banner__in{background:var(--green)}
  .banner__box{max-width:none;text-align:left}
  .banner--center .banner__box{text-align:left}
  .banner--center .banner__box p{margin-inline:0}
}

/* Compact page header banner, used at the top of every inner page */
.pagehead{margin-top:0}
.pagehead .banner{border-radius:0}
.pagehead__crumb{font-size:var(--tiny);color:var(--text-3);margin-bottom:var(--s3)}
.banner--dark .pagehead__crumb,.banner--green .pagehead__crumb{color:rgba(255,255,255,.55)}
.pagehead__crumb a:hover{text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   31 · CRO COMPONENTS
   ========================================================================== */

/* Value row directly under a hero. Four short promises, no icons shouting. */
.usps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);
  padding:var(--s5);
}
.usp{display:flex;gap:var(--s3);align-items:flex-start}
.usp__i{
  flex:0 0 auto;width:30px;height:30px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--sage);color:var(--green);font-size:.85rem
}
.usp b{display:block;font-size:var(--small);letter-spacing:-.018em;line-height:1.35}
.usp span{display:block;font-size:var(--tiny);color:var(--text-3);line-height:1.45;margin-top:2px}
@media (max-width:900px){.usps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.usps{grid-template-columns:1fr;gap:var(--s4)}}

/* Risk reversal strip, sits immediately under every primary CTA */
.risk{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;
  font-size:var(--tiny);color:var(--text-3);
}
.risk span{display:flex;align-items:center;gap:6px}
.risk span::before{content:"✓";color:var(--green);font-weight:800;font-size:.72rem}
.on-dark .risk span::before,.on-green .risk span::before,
.banner--dark .risk span::before,.banner--green .risk span::before{color:var(--gold)}

/* Anchor navigation for long pages, keeps a scanner oriented */
.jump{
  position:sticky;top:var(--nav-h);z-index:60;
  background:rgba(255,255,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.jump__in{
  display:flex;gap:var(--s2);overflow-x:auto;scrollbar-width:none;
  width:min(100% - 40px,var(--wrap));margin-inline:auto;padding-block:10px;
}
.jump__in::-webkit-scrollbar{display:none}
.jump a{
  flex:0 0 auto;padding:7px 13px;border-radius:var(--r-pill);
  font-size:var(--tiny);font-weight:600;color:var(--text-2);
  border:1px solid var(--line);white-space:nowrap;
  transition:border-color .16s var(--ease),color .16s var(--ease),background .16s var(--ease)
}
.jump a:hover{border-color:var(--line-2);color:var(--ink);background:var(--paper-2)}

/* Inline mid page conversion block, breaks up long reading */
.midcta{
  border:1px solid var(--line);border-radius:var(--r-xl);background:var(--paper-2);
  padding:clamp(24px,3vw,40px);
  display:grid;grid-template-columns:1fr auto;gap:var(--s5);align-items:center;
}
.midcta__t > * + *{margin-top:var(--s2)}
.midcta h3{font-size:var(--d4)}
.midcta p{font-size:var(--small);color:var(--text-2)}
@media (max-width:760px){.midcta{grid-template-columns:1fr}.midcta .btn{width:100%}}

/* Skip link for keyboard users */
.skip{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 var(--r-sm) 0;font-size:var(--small);font-weight:650
}
.skip:focus{left:0}

/* Image loading polish: a soft tone holds the space, then the photo fades in */
.frame > img,.banner__img{
  background:var(--paper-3);
}
img[loading="lazy"]{animation:imgin .5s var(--ease) both}
@keyframes imgin{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){img[loading="lazy"]{animation:none}}

/* Offscreen images are deferred by loading="lazy" instead. content-visibility
   was mis-measuring section heights and causing scroll jumps. */

/* ==========================================================================
   32 · ICONS
   Every icon is an inline SVG from the sprite at the top of the page.
   The old Unicode glyphs were invisible because Plus Jakarta Sans has no
   coverage for them, so they fell back to tofu boxes or nothing at all.
   ========================================================================== */
.ico{
  width:1em;height:1em;flex:0 0 auto;display:block;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  vertical-align:middle;
}
.ico--fill{fill:currentColor;stroke:none}
.card__ico .ico{width:18px;height:18px}
.usp__i .ico{width:15px;height:30px}
.notif__ico .ico{width:11px;height:11px}
.playmark .ico{width:14px;height:14px}
.link-arrow::after{content:none}
.link-arrow .ico{width:14px;height:14px;transition:transform .2s var(--ease)}
.link-arrow:hover .ico{transform:translateX(4px)}
.risk span::before{content:none}
.risk .ico{width:13px;height:13px;color:var(--green)}
.on-dark .risk .ico,.on-green .risk .ico,
.banner--dark .risk .ico,.banner--green .risk .ico{color:var(--gold)}
.tick .ico{width:11px;height:11px;stroke-width:2.4}
.choice::after{content:none}
.choice .ico{width:15px;height:15px;color:var(--text-4)}
.choice.is-on .ico{color:var(--green)}
.mohar-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ==========================================================================
   33 · FULL LENGTH HERO
   ========================================================================== */
.herofull{
  position:relative;overflow:hidden;
  min-height:min(88svh,800px);
  display:grid;align-content:center;
  background:var(--ink);
}
.herofull__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:68% center;z-index:0;
}
.herofull__img--m{display:none}
.herofull::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(95deg,rgba(16,13,10,.92) 0%,rgba(16,13,10,.8) 32%,rgba(16,13,10,.34) 58%,rgba(16,13,10,.02) 82%),
    linear-gradient(to top,rgba(16,13,10,.62) 0%,rgba(16,13,10,0) 42%);
}
.herofull__in{
  position:relative;z-index:2;
  width:min(100% - 40px,var(--wrap));margin-inline:auto;
  padding-block:clamp(40px,6vw,72px);
}
.herofull__box{max-width:640px}
.herofull__box > * + *{margin-top:var(--s5)}
.herofull .eyebrow{color:var(--gold);margin-bottom:0}
.herofull h1{
  color:#fff;font-size:clamp(2.5rem,6.4vw,5rem);
  line-height:.98;letter-spacing:-.042em;
}
.herofull .lead{color:rgba(255,255,255,.84);font-size:clamp(1.08rem,1.6vw,1.32rem);max-width:34ch}
.herofull .ticks li{color:rgba(255,255,255,.8)}
.herofull .tick{background:rgba(201,160,85,.22);color:var(--gold)}
.herofull .btn-row{margin-top:var(--s6)}
.herofull .risk{color:rgba(255,255,255,.6)}
.herofull .risk .ico{color:var(--gold)}
.herofull__scroll{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:.625rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.44);
}
.herofull__scroll i{
  width:1px;height:26px;background:linear-gradient(rgba(255,255,255,.5),transparent);
  animation:drop 2.4s var(--ease) infinite;
}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (prefers-reduced-motion:reduce){.herofull__scroll i{animation:none}}

@media (max-width:860px){
  .herofull{min-height:min(88svh,720px)}
  .herofull__img{display:none}
  .herofull__img--m{display:block;object-position:center 62%}
  .herofull::after{
    background:linear-gradient(to top,rgba(16,13,10,.94) 0%,rgba(16,13,10,.82) 34%,rgba(16,13,10,.34) 66%,rgba(16,13,10,.1) 100%);
  }
  .herofull__box{max-width:none}
  .herofull__scroll{display:none}
}

/* ==========================================================================
   34 · ALIGNMENT HARDENING
   ========================================================================== */
.grid > .card,.grid > a.card{height:100%}
.card > *:last-child{margin-bottom:0}
.step{height:100%}
.usps{align-items:stretch}
.usp{align-items:center}
.trustbar__c{justify-content:flex-start}
.proofbar__q{display:flex;flex-direction:column}
.proofbar__q span{margin-top:auto;padding-top:6px}
.sec-head > .eyebrow + h2,.sec-head > .eyebrow + h1{margin-top:var(--s3)}
.pagehead + section,.pagehead + .trustbar,.pagehead + .proofbar{margin-top:0}
.pagehead .banner__in{padding-block:clamp(40px,5.5vw,72px);
padding:0 30px;}
.banner__box .btn-row{flex-wrap:wrap}
.banner__box .risk{margin-top:var(--s4)}
.article > .midcta{max-width:none}
.article p,.article ul,.article ol,.article blockquote{max-width:none}
.midcta p{max-width:52ch}
.demo__side p{max-width:34ch}
@media (max-width:820px){.demo__side p{max-width:none}}

/* ==========================================================================
   35 · FINAL ALIGNMENT PASS
   ========================================================================== */
/* A page header banner carries a crumb, eyebrow, headline, lead, buttons and
   a risk strip. --short was sized for a headline alone and cropped the rest. */
.pagehead .banner{min-height:clamp(400px,38vw,520px)}
.pagehead .banner--short{min-height:clamp(400px,38vw,520px)}
.pagehead .banner__box{max-width:min(100%,600px)}
.pagehead .banner__box > * + *{margin-top:var(--s4)}
.pagehead .banner h1{font-size:clamp(2.1rem,4.2vw,3.3rem)}
.pagehead .banner .lead{max-width:44ch}
@media (max-width:760px){
  .pagehead .banner,.pagehead .banner--short{min-height:auto}
}

/* The Devanagari mark needs its own family wherever it appears alone */
.card__ico,.empty__ico,.nav__logo .deva,.foot__lock .deva{
  font-family:var(--font-deva),var(--font);
}
.card__ico{font-weight:700}

/* Icon badges centre their glyph optically */
.tick,.card__ico,.usp__i,.notif__ico,.step__n,.playmark{
  display:inline-grid;place-items:center;line-height:1;
}
.ticks li .tick,.hero__bullets li .tick{margin-top:1px}
.risk span{gap:6px;line-height:1.5}
.link-arrow{align-items:center}

/* Buy box on the avatar pages: the H1 moved to the banner, so the product
   name is now a heading-weight paragraph and needs the same rhythm. */
.buybox > p.d3[data-packname]{font-weight:800;color:var(--ink)}

/* Nothing may exceed the viewport width at any size */
html,body{max-width:100%}
.banner,.herofull,.strip,.wall,.jump{max-width:100vw}
img,svg,video,table{max-width:100%}

/* ==========================================================================
   36 · VISUAL FIRST
   Akshay: "people do not like to read, they like to view."
   Everything below replaces a block of text with a picture that says it.
   ========================================================================== */

/* --- Photo steps. Brick's 1 / 2 / 3 with a real photograph each --------- */
.psteps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px)}
.pstep{display:flex;flex-direction:column}
.pstep__img{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:4/3;background:var(--paper-3);
}
.pstep__img img,.pstep__img video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pstep__n{
  position:absolute;left:14px;top:14px;z-index:2;
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--ink);
  display:grid;place-items:center;font-size:.82rem;font-weight:800;
  box-shadow:0 2px 10px rgba(25,21,18,.18);
}
.pstep h3{margin-top:var(--s4);font-size:1.15rem;letter-spacing:-.026em}
.pstep p{margin-top:6px;font-size:var(--small);color:var(--text-2);max-width:34ch}
@media (max-width:820px){
  .psteps{grid-template-columns:1fr;gap:var(--s6)}
  .pstep p{max-width:none}
}

/* --- Use case carousel. Brick's "Get more from every moment" ------------ */
.cases{
  display:flex;gap:clamp(14px,2vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:4px;
}
.cases::-webkit-scrollbar{display:none}
.case{flex:0 0 min(78vw,380px);scroll-snap-align:start;display:flex;flex-direction:column}
.case__img{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;background:var(--paper-3)}
.case__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case__pill{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:var(--r-pill);padding:10px 18px;min-width:180px;text-align:center;
  box-shadow:0 4px 20px rgba(25,21,18,.16);
}
.case__pill b{display:block;font-size:var(--small);letter-spacing:-.02em;color:var(--ink)}
.case__pill span{display:block;font-size:.6875rem;color:var(--text-3);margin-top:1px}
.case p{margin-top:var(--s4);font-size:var(--small);color:var(--text-2)}
.case h3{margin-top:var(--s4);font-size:1.1rem;letter-spacing:-.024em}

/* --- Full bleed photo with a glass panel. Brick's "More reasons" -------- */
.showcase{position:relative;overflow:hidden;min-height:clamp(440px,52vw,660px);display:flex;align-items:flex-end}
.showcase__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.showcase::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(16,13,10,.72),rgba(16,13,10,.12) 55%,rgba(16,13,10,.28));
}
.showcase__in{position:relative;z-index:2;width:100%;margin-inline:auto;padding-block:clamp(40px,4vw,56px)}
.showcase__head{
  text-align:center;color:#fff;font-size:clamp(1.8rem,4vw,3rem);
  letter-spacing:-.036em;line-height:1.08;margin-bottom:clamp(28px,4vw,52px);
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.glass{
  background:rgba(255,255,255,.1);backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.18);border-radius:var(--r-xl);
  padding:clamp(24px,3vw,40px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);
}
.glass__c{color:rgba(255,255,255,.82)}
.glass__c + .glass__c{border-left:1px solid rgba(255,255,255,.16);padding-left:clamp(20px,3vw,40px)}
.glass__c .ico{width:26px;height:26px;color:#fff;margin-bottom:var(--s4);stroke-width:1.4}
.glass__c b{display:block;color:#fff;font-size:clamp(1.15rem,1.8vw,1.5rem);font-weight:800;letter-spacing:-.028em}
.glass__c p{margin-top:8px;font-size:var(--small);color:rgba(255,255,255,.78);max-width:30ch}
@media (max-width:820px){
  .showcase{min-height:auto;display:block}
  .showcase__img{position:relative;height:clamp(220px,52vw,320px)}
  .showcase::after{display:none}
  .showcase__in{background:var(--ink);padding-block:clamp(40px,4vw,56px)}
  .showcase__head{text-shadow:none}
  .glass{grid-template-columns:1fr;gap:var(--s5);background:transparent;border:0;padding:20px;backdrop-filter:none}
  .glass__c + .glass__c{border-left:0;border-top:1px solid rgba(255,255,255,.16);padding-left:0;padding-top:var(--s5)}
}
.btn--ghost {
    background: var(--paper-2);
}
/* --- Video testimonial cards. Brick's "Real stories, real results" ------ */
.vtests{display:flex;gap:clamp(14px,2vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.vtests::-webkit-scrollbar{display:none}
.vtest{
  flex:0 0 min(74vw,340px);scroll-snap-align:start;position:relative;
  border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/4;background:var(--paper-3);
  display:flex;align-items:flex-end;
}
.vtest > img,.vtest > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.vtest__play{
  position:absolute;left:16px;top:16px;z-index:3;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.86);backdrop-filter:blur(8px);
  display:grid;place-items:center;color:var(--ink);
}
.vtest__q{
  position:relative;z-index:2;margin:14px;padding:16px 18px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-radius:var(--r);width:calc(100% - 28px);
}
.vtest__q p{font-size:var(--small);line-height:1.5;color:var(--ink);margin:0}
.vtest__q cite{display:block;font-style:normal;font-size:var(--tiny);color:var(--text-3);margin-top:8px}
.vtest__q .stars{margin-top:6px;font-size:.72rem}

/* --- A reserved video slot that still looks designed ------------------- */
.vslot{
  position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9;
  background:linear-gradient(135deg,var(--paper-2),var(--paper-3));
  border:1.5px dashed var(--line-2);
  display:grid;place-items:center;text-align:center;padding:var(--s6);
}
.vslot__in{max-width:420px}
.vslot .ico{width:30px;height:30px;color:var(--text-3);margin-inline:auto;margin-bottom:var(--s3)}
.vslot b{display:block;font-size:1rem;color:var(--ink);letter-spacing:-.02em}
.vslot p{font-size:var(--tiny);color:var(--text-3);margin-top:6px;margin-inline:auto}

/* --- Big number strip, type only, no cards ---------------------------- */
.numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px)}
.number b{display:block;font-size:clamp(2.4rem,5vw,4rem);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--ink)}
.number p{margin-top:var(--s3);font-size:var(--small);color:var(--text-2);max-width:24ch}
.number span{display:block;margin-top:6px;font-size:var(--tiny);color:var(--text-4)}
.on-dark .number b,.on-green .number b{color:var(--gold)}
@media (max-width:760px){.numbers{grid-template-columns:1fr;gap:var(--s5)}.number{border-top:1px solid var(--line);padding-top:var(--s4)}}

/* ==========================================================================
   37 · EXIT INTENT STUDENT OFFER
   Only fires when someone is leaving with something in their bag.
   ========================================================================== */
.exit{max-width:520px;width:min(100%,520px)}
.exit__top{
  margin:calc(clamp(26px,3.4vw,38px) * -1) calc(clamp(26px,3.4vw,38px) * -1) 0;
  border-radius:var(--r-xl) var(--r-xl) 0 0;overflow:hidden;
  aspect-ratio:16/7;position:relative;background:var(--paper-3);
}
.exit__top img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.exit__badge{
  position:absolute;left:18px;bottom:14px;z-index:2;
  background:var(--gold);color:#33260C;border-radius:var(--r-pill);
  padding:5px 12px;font-size:.6875rem;font-weight:800;letter-spacing:.02em;
}
.exit form{display:flex;flex-direction:column;gap:var(--s3)}
.exit .field{padding:12px 14px}
.exit__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media (max-width:480px){.exit__row{grid-template-columns:1fr}}
.exit__ok{text-align:center;padding:var(--s5) 0}
.exit__ok .ico{width:44px;height:44px;color:var(--green);margin-inline:auto;margin-bottom:var(--s4)}
.exit__err{font-size:var(--tiny);color:#A94E24;display:none}
.exit__err.is-on{display:block}

/* ==========================================================================
   38 · PROOF, THE WAY BRICK DOES IT
   Reviews appear FOUR times in four formats: stars in the hero, a proof bar
   above the fold, filmed stories, a written grid, and a volume wall.
   Removing them was a mistake. Volume of proof is the whole game for a
   brand nobody has heard of.
   ========================================================================== */

/* Stars line, sits above the hero headline like Brick's */
.heroproof{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.heroproof .stars{font-size:.95rem}
.heroproof b{color:#fff;font-size:var(--small);font-weight:700}
.heroproof span{color:rgba(255,255,255,.6);font-size:var(--tiny)}

/* Review grid. Avatar initial, name, role, date, stars, title, body. */
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px)}
.rcard{
  display:flex;flex-direction:column;gap:var(--s3);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(20px,2.2vw,26px);
}
.paper-2 .rcard,.cream .rcard,.sage .rcard{background:var(--paper)}
.rcard__top{display:flex;align-items:center;gap:11px}
.rcard__av{
  width:36px;height:36px;border-radius:50%;flex:0 0 auto;
  background:var(--sage);color:var(--green);
  display:grid;place-items:center;font-size:.9rem;font-weight:800;
}
.rcard__who{min-width:0;flex:1 1 auto}
.rcard__who b{display:block;font-size:var(--small);letter-spacing:-.018em;line-height:1.25}
.rcard__who span{display:block;font-size:var(--tiny);color:var(--text-3);line-height:1.3}
.rcard__when{font-size:var(--tiny);color:var(--text-4);flex:0 0 auto}
.rcard h4{font-size:var(--body);letter-spacing:-.02em;line-height:1.35}
.rcard p{font-size:var(--small);color:var(--text-2);line-height:1.6;margin:0}
.rcard__verified{
  margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--line);
  display:flex;align-items:center;gap:6px;font-size:var(--tiny);color:var(--text-3);
}
.rcard__verified .ico{width:12px;height:12px;color:var(--green)}
@media (max-width:980px){.rgrid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.rgrid{grid-template-columns:1fr}}

/* The bypass argument, as chips over a photograph. Brick's best section. */
.chipstack{position:relative;overflow:hidden;min-height:clamp(480px,58vw,700px);display:grid;place-items:center}
.chipstack__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.chipstack::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(16,13,10,.78),rgba(16,13,10,.6) 45%,rgba(16,13,10,.85))}
.chipstack__in{position:relative;z-index:2;width:min(100% - 40px,760px);text-align:center;padding-block:clamp(48px,6vw,80px)}
.chipstack__in > h2{color:#fff;font-size:clamp(1.9rem,4.2vw,3.1rem);letter-spacing:-.036em;line-height:1.08;margin-bottom:var(--s4)}
.chipstack__in > p{color:rgba(255,255,255,.72);font-size:var(--lead);margin-inline:auto;margin-bottom:clamp(28px,3.4vw,44px)}
.bigchips{display:flex;flex-direction:column;gap:10px}
.bigchip{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  background:rgba(255,255,255,.1);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-pill);
  padding:13px 22px;text-align:left;
}
.bigchip b{color:#fff;font-size:var(--small);font-weight:650;letter-spacing:-.016em}
.bigchip span{display:flex;align-items:center;gap:7px;color:rgba(255,255,255,.62);font-size:var(--tiny);white-space:nowrap}
.bigchip span .ico{width:14px;height:14px;color:#E08A63}
.bigchip--us{background:var(--gold);border-color:var(--gold)}
.bigchip--us b{color:#33260C;font-weight:800}
.bigchip--us span{color:#5C4413;font-weight:700}
.bigchip--us span .ico{color:#33260C}
@media (max-width:560px){
  .bigchip{flex-direction:column;align-items:flex-start;gap:4px;border-radius:var(--r);padding:14px 18px}
}

/* Press quote cards, for when the coverage is real */
.press{display:flex;gap:var(--s4);overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
.press::-webkit-scrollbar{display:none}
.presscard{
  flex:0 0 min(76vw,320px);scroll-snap-align:start;
  border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);
  display:flex;flex-direction:column;gap:var(--s3);background:var(--paper);
}
.presscard b{font-size:var(--tiny);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.presscard p{font-size:var(--small);color:var(--ink);line-height:1.5;margin:0}

/* ==========================================================================
   39 · DENSITY FIX
   Screenshots showed two sections reading as broken empty space: the green
   statement and the tap demo. Both were sized for content twice their size.
   ========================================================================== */

/* The green statement was ~880px tall for three lines. Now it breathes
   without looking abandoned, and the line itself carries more weight. */
.stmt{padding-block:clamp(64px,7vw,104px)}
.stmt h2{font-size:clamp(2rem,4.8vw,3.6rem);max-width:15ch}
.stmt .lead{font-size:clamp(1.05rem,1.5vw,1.25rem);max-width:52ch}
.stmt > .wrap > * + *{margin-top:var(--s5)}
.stmt .sec-cta{margin-top:var(--s6)}

/* A statement section can now carry a quiet supporting rule underneath */
.stmt__rule{
  width:44px;height:2px;background:var(--gold);border-radius:2px;
  margin:0 auto var(--s6);opacity:.9;
}

/* The tap demo: side columns were stranded metres from the phone on a wide
   screen, and the whole thing was floating in an over tall section. */
.demo{
  grid-template-columns:1fr auto 1fr;
  gap:clamp(24px,3vw,56px);
  max-width:820px;align-items:center;
}
.demo__side{max-width:230px}
.demo__side h3{font-size:1.05rem}
.demo__side p{font-size:var(--small);line-height:1.55}
.demo__side:first-child{justify-self:end;text-align:right}
.demo__side:first-child p{margin-left:auto}
.demo__side:last-child{justify-self:start}
.phone{max-width:210px;border-radius:28px;border-width:7px}
.tapbtn{width:120px;height:120px}
.demo + .tiny,.demo .tiny{margin-top:var(--s2)}
@media (max-width:820px){
  .demo{grid-template-columns:1fr;max-width:420px;gap:var(--s5)}
  .demo__side:first-child,.demo__side:last-child{justify-self:center;text-align:center;max-width:none}
  .demo__side:first-child p{margin-inline:auto}
}

/* Sections that hold one idea do not need full section padding */
.sec--tight{padding-block:clamp(56px,6vw,88px)}

/* ==========================================================================
   40 · ENTRY NOTE
   The first popup is the calm routing question. The student offer is a
   separate, later thing that only fires when leaving the cart.
   ========================================================================== */
.note{width:min(100%,560px)}
.note__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s5)}
.notecard{
  position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;
  display:flex;align-items:flex-end;background:var(--paper-3);
  transition:transform .2s var(--ease);
}
.notecard:hover{transform:translateY(-2px)}
.notecard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.notecard::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(16,13,10,.86),rgba(16,13,10,.15) 70%)}
.notecard b{position:relative;z-index:2;color:#fff;font-size:var(--small);padding:14px;letter-spacing:-.018em;line-height:1.3}
@media (max-width:480px){.note__grid{grid-template-columns:1fr 1fr;gap:8px}.notecard b{font-size:var(--tiny);padding:10px}}

/* ==========================================================================
   3.1 ALIGNMENT FIXES
   Appended last so these win on equal specificity. Every rule here corrects
   a real misalignment found while reviewing rendered pages.
   ========================================================================== */

/* 1. Centred blocks whose paragraphs were never centred as BOXES.
      text-align:center centres the text inside the box, but a box with a
      max-width still sits hard left unless it is told otherwise. Any line
      shorter than its max-width therefore looked off-centre. */
.stmt p,.stmt .lead,.stmt .tiny,.stmt .small,
.showcase__in > p,.chipstack__in > p,
.sec-head.center p,.sec-head.center .lead,.sec-head.center .tiny,
.banner--center .banner__box p,
.wrap--narrow > .center p,.wrap > .center p{
  margin-inline:auto;
}

/* 2. Notification rows in the tap demo.
      The wrapper holding the title and body carried no class, so the two
      spans laid out INLINE and collided ("Instagram rahul_98 sent a reel"),
      then overflowed the card and pushed the fifth notification out of the
      phone. Stack them, and never let a long line widen the row. */
.notif{align-items:flex-start;flex:0 0 auto;min-width:0}
.notif > span:last-child{
  display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto;
}
.notif__t,.notif__b{
  display:block;min-width:0;max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.phone__screen{justify-content:flex-start;overflow:hidden}

/* 3. The two side captions in the tap demo sat at different heights, because
      centring blocks of unequal length centres their MIDDLES, not their
      headings. Top-align them so both times share one baseline. */
.demo{align-items:start}
.demo__side{padding-top:clamp(28px,5vw,64px)}
@media (max-width:760px){
  .demo{align-items:center}
  .demo__side{padding-top:0}
}

/* 4. The tap target is a circle, so its photograph must be centred in frame
      and carry no text of its own. */
.tapbtn img{object-position:center}

/* ==========================================================================
   3.1b · TAP DEMO LEGIBILITY + SPLIT ALIGNMENT
   ========================================================================== */

/* The phone was too narrow, so every notification line hit the ellipsis and
   read "Instag…" / "YouTu…". Widen it, and let the body wrap to two lines
   instead of truncating. */
.demo .phone{max-width:252px;border-width:8px;border-radius:32px}
.demo .phone__screen{padding:15px 12px;gap:8px}
.demo .notif{padding:10px 11px;gap:10px;border-radius:11px}
.demo .notif__ico{width:24px;height:24px;border-radius:7px}
.demo .notif__ico .ico{width:13px;height:13px}
.demo .notif__t{font-size:.72rem;line-height:1.3;white-space:nowrap}
.demo .notif__b{
  font-size:.66rem;line-height:1.34;white-space:normal;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.demo .focusstate b{font-size:2rem}
.demo .focusstate span{font-size:.66rem}

/* The tap target should read as pressable. */
.tapbtn{outline-offset:4px}
.tapbtn:focus-visible{outline:2px solid var(--green)}
.demo.is-on .tapbtn::after{opacity:0}

/* Split blocks: media and copy share a vertical centre, and the copy column
   never grows wider than comfortable reading measure. */
.split__text{align-self:center}
.split__media{align-self:center}
.split__text > .eyebrow{display:block}
.split__text p{max-width:46ch}
.split__text h3{letter-spacing:-.03em}
@media (max-width:900px){
  .split__text p{max-width:none}
}

/* ==========================================================================
   3.1c · ALIGNMENT SWEEP
   Rows of cards must share a baseline and an equal height, the way Brick's
   three-up rows do. Anything centred must be centred as a BOX, not just as
   text inside a left-aligned box.
   ========================================================================== */
.grid,.grid-2,.grid-3,.grid-4{align-items:stretch}
.grid > *,.grid-2 > *,.grid-3 > *,.grid-4 > *{height:100%}
.cases > *,.psteps > *,.creds > *,.usps > *,.numbers > *,.doors > *,.rgrid > *{height:100%}
.card,.case,.pstep,.quote,.rcard,.door,.number{display:flex;flex-direction:column}
.card > p:last-child,.quote > p:last-child{margin-bottom:0}
.card .btn{margin-top:auto}
.pstep h3,.case h3{margin-top:var(--s3)}

/* any centred heading block centres its own box too */
.sec-head.center,.center{margin-inline:auto}
.sec-head.center > *{margin-inline:auto}
.stmt > .wrap > .sec-cta,.stmt > .wrap > .risk{justify-content:center}

/* captions under an article image read as captions, not as body copy */
.article .frame + .tiny{margin-top:var(--s3);text-align:center;color:var(--text-3)}

.stickybuy{ display:block; }
@media (max-width:560px){
  .stickybuy__l span{
    display:block;
    font-size:.65rem;
  }
  .stickybuy .btn{flex:1 1 auto}
}