/* ==========================================================================
   TAILSPRING — pre-lander system
   Aesthetic: modern apothecary / premium pet-wellness editorial
   Fraunces (display) · Hanken Grotesk (UI) · Spline Sans Mono (labels)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,500;1,9..144,600&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Spline+Sans+Mono:wght@500;600;700&display=swap');

:root {
  --paper:     #F6EFE1;
  --paper-2:   #EEE3CF;
  --paper-3:   #E7D9BE;
  --card:      #FFFCF4;
  --ink:       #201D17;
  --ink-2:     #574F42;
  --ink-3:     #8A7F6B;
  --forest:    #2C3B29;
  --forest-2:  #41543C;
  --clay:      #C8552D;
  --clay-d:    #A6421E;
  --honey:     #E2A23A;
  --honey-soft:#F4DEAA;
  --mist:      #D7E0CC;
  --line:      #E3D5BC;
  --line-2:    #D2C09E;

  --shadow-xl: 0 40px 80px -40px rgba(58,38,16,.55);
  --shadow-lg: 0 28px 56px -30px rgba(58,38,16,.5);
  --shadow:    0 16px 36px -22px rgba(58,38,16,.5);
  --shadow-sm: 0 8px 20px -14px rgba(58,38,16,.55);

  --r-lg: 26px;
  --r:    18px;
  --r-sm: 12px;

  --maxw: 740px;
  --f-display: 'Fraunces', Georgia, serif;
  --f-body: 'Hanken Grotesk', system-ui, sans-serif;
  --f-mono: 'Spline Sans Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--f-body);
  color: var(--ink);
  font-size: 18px;
  line-height: 1.62;
  overflow-x: hidden;
  position: relative;
  background-color: var(--paper);
  background-image:
    radial-gradient(120% 80% at 12% -8%, rgba(226,162,58,.16), transparent 55%),
    radial-gradient(110% 70% at 100% 4%, rgba(44,59,41,.10), transparent 50%),
    radial-gradient(90% 60% at 50% 120%, rgba(200,85,45,.08), transparent 60%);
  background-attachment: fixed;
}

/* paper grain */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
svg.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -.13em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
svg.ic.fill { fill: currentColor; stroke: none; }

.sr-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- reading progress ---------- */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 300;
  background: linear-gradient(90deg, var(--honey), var(--clay)); transition: width .1s linear; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 648px; }

/* ---------- masthead ---------- */
.masthead { position: sticky; top: 0; z-index: 100;
  background: rgba(246,239,225,.82); backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid var(--line); }
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; height: 62px; }

.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo .mark { width: 34px; height: 34px; border-radius: 11px; background: var(--forest);
  display: grid; place-items: center; color: var(--paper); box-shadow: var(--shadow-sm); flex: none;
  transform: rotate(-4deg); }
.logo .mark svg { width: 19px; height: 19px; }
.logo .name { font-family: var(--f-display); font-weight: 900; font-size: 22px; letter-spacing: -.025em; }
.logo .name b { color: var(--clay); }

.mh-right { display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--forest); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 13px; }
.mh-right .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 3px rgba(200,85,45,.18); }

/* ---------- advertorial label strip ---------- */
.adv-strip { background: var(--forest); color: var(--paper-2); text-align: center;
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  padding: 8px 0; }
.adv-strip .sep { opacity: .5; margin: 0 8px; }

/* ---------- mono eyebrow ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--clay); margin-bottom: 18px; }
.eyebrow .tick { width: 7px; height: 7px; border-radius: 2px; background: var(--clay); transform: rotate(45deg); }

/* ---------- headlines ---------- */
article { padding: 26px 0 50px; }
h1.headline { font-family: var(--f-display); font-weight: 900; font-size: clamp(34px, 8.4vw, 56px);
  line-height: 1.0; letter-spacing: -.03em; margin-bottom: 20px; }
h1.headline .u { position: relative; white-space: nowrap; color: var(--clay); font-style: italic; }
h1.headline .u svg { position: absolute; left: -2%; bottom: -.16em; width: 104%; height: .42em; overflow: visible; }
h1.headline .u svg path { fill: none; stroke: var(--honey); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw 1s .5s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.dek { font-family: var(--f-display); font-weight: 400; font-style: italic;
  font-size: clamp(19px, 4.6vw, 24px); line-height: 1.42; color: var(--ink-2); margin-bottom: 26px; }

.byline { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-2);
  padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 30px; }
.byline .avatar { width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: linear-gradient(140deg, var(--honey), var(--clay)); color: #fff; font-family: var(--f-display);
  font-weight: 800; display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.byline b { color: var(--ink); font-weight: 700; }
.byline .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--line-2); }
.byline .rd { display: inline-flex; align-items: center; gap: 5px; }

/* ---------- hero figure (art-directed) ---------- */
.hero-fig { position: relative; margin: 0 0 30px; }
.hero-fig .frame { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-xl);
  border: 1px solid rgba(255,255,255,.4); }
.hero-fig .frame img { width: 100%; }
.hero-fig .blob { position: absolute; inset: auto -8% -10% auto; width: 60%; height: 60%; z-index: -1;
  background: radial-gradient(circle, var(--honey-soft), transparent 70%); filter: blur(8px); }
.hero-fig .sticker { position: absolute; right: -8px; top: -18px; z-index: 3;
  width: 96px; height: 96px; border-radius: 50%; background: var(--clay); color: #fff;
  display: grid; place-items: center; text-align: center; box-shadow: var(--shadow);
  transform: rotate(9deg); animation: pop .6s .3s both; }
.hero-fig .sticker .big { font-family: var(--f-display); font-weight: 900; font-size: 23px; line-height: 1; }
.hero-fig .sticker .small { font-family: var(--f-mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; margin-top: 3px; opacity: .92; }
.hero-fig .sticker .stars { color: var(--honey-soft); font-size: 10px; letter-spacing: 1px; margin-top: 2px; }
@keyframes pop { from { transform: rotate(9deg) scale(.5); opacity: 0; } to { transform: rotate(9deg) scale(1); opacity: 1; } }
figcaption { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .02em; color: var(--ink-3);
  margin-top: 11px; text-align: center; }

/* ---------- body copy ---------- */
article p { margin-bottom: 21px; font-size: 18.5px; }
article p.lead::first-letter { font-family: var(--f-display); font-weight: 900; float: left;
  font-size: 78px; line-height: .72; padding: 8px 12px 0 0; color: var(--clay); }
article h2 { font-family: var(--f-display); font-weight: 800; font-size: clamp(26px, 6vw, 36px);
  line-height: 1.1; letter-spacing: -.025em; margin: 44px 0 16px; }
article h3 { font-family: var(--f-display); font-weight: 700; font-size: 22px; margin: 24px 0 10px; }
article strong { font-weight: 700; }
article a:not(.btn) { color: var(--clay-d); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; font-weight: 600; }
mark { background: linear-gradient(180deg, transparent 55%, var(--honey-soft) 55%); padding: 0 2px; }

.figure { margin: 30px 0; }
.figure img { width: 100%; border-radius: var(--r); box-shadow: var(--shadow-lg); }

/* ---------- pull quote ---------- */
.pull { position: relative; margin: 36px 0; padding: 8px 0 8px 30px; }
.pull::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px;
  background: linear-gradient(var(--honey), var(--clay)); border-radius: 4px; }
.pull .qmark { position: absolute; left: 18px; top: -24px; font-family: var(--f-display); font-weight: 900;
  font-size: 80px; color: var(--honey-soft); z-index: -1; line-height: 1; }
.pull p { font-family: var(--f-display); font-style: italic; font-weight: 500;
  font-size: clamp(22px, 5.2vw, 28px); line-height: 1.32; color: var(--forest-2); margin: 0; }

/* ---------- tick list ---------- */
ul.ticks { list-style: none; margin: 8px 0 26px; }
ul.ticks li { position: relative; padding-left: 38px; margin-bottom: 15px; font-size: 17.5px; }
ul.ticks li .bullet { position: absolute; left: 0; top: 0; width: 25px; height: 25px; border-radius: 8px;
  background: var(--forest); color: var(--paper); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
ul.ticks li .bullet svg { width: 14px; height: 14px; }

/* ---------- callout box ---------- */
.box { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 24px; margin: 30px 0; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.box .kicker { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono);
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--forest-2); margin-bottom: 14px; }
.box .kicker svg { width: 15px; height: 15px; color: var(--clay); }

/* ---------- mechanism / 3-step flow ---------- */
.flow { display: grid; gap: 14px; margin: 26px 0; }
.flow .step { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px 20px 20px 70px; position: relative; box-shadow: var(--shadow-sm); }
.flow .step .node { position: absolute; left: 18px; top: 18px; width: 38px; height: 38px; border-radius: 11px;
  background: var(--forest); color: var(--paper); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.flow .step .node svg { width: 19px; height: 19px; }
.flow .step .n { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; color: var(--clay); text-transform: uppercase; }
.flow .step h3 { margin: 1px 0 5px; font-size: 19px; }
.flow .step p { margin: 0; font-size: 15.5px; color: var(--ink-2); }

/* ---------- ingredient panel ---------- */
.ingredients { background: var(--forest); color: var(--paper-2); border-radius: var(--r-lg);
  padding: 26px 24px; margin: 32px 0; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.ingredients h3 { color: var(--paper); font-family: var(--f-display); font-weight: 800; font-size: 24px; margin-bottom: 4px; }
.ingredients .sub { font-size: 14.5px; color: rgba(246,239,225,.7); margin-bottom: 18px; }
.ing-grid { display: grid; gap: 12px; }
.ing { display: flex; align-items: center; gap: 13px; padding: 13px 14px; border-radius: var(--r-sm);
  background: rgba(246,239,225,.06); border: 1px solid rgba(246,239,225,.1); }
.ing .glyph { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: rgba(226,162,58,.18); color: var(--honey); }
.ing .glyph svg { width: 19px; height: 19px; }
.ing .it-name { font-weight: 700; color: var(--paper); font-size: 15.5px; }
.ing .it-desc { font-size: 13px; color: rgba(246,239,225,.65); }
.ing .it-dose { margin-left: auto; font-family: var(--f-mono); font-weight: 600; font-size: 12px;
  color: var(--honey); white-space: nowrap; padding-left: 8px; }

/* ---------- before / after slider ---------- */
.ba { margin: 32px 0; }
.ba-frame { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg);
  aspect-ratio: 4/3; user-select: none; touch-action: pan-y; cursor: ew-resize; border: 1px solid rgba(255,255,255,.4); }
.ba-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-after { clip-path: inset(0 0 0 50%); }
.ba-label { position: absolute; bottom: 14px; font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(32,29,23,.62);
  padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(4px); }
.ba-label.l { left: 14px; } .ba-label.r { right: 14px; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: #fff; transform: translateX(-50%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.ba-knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 46px; height: 46px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; color: var(--clay); }
.ba-knob svg { width: 22px; height: 22px; }
.ba-cap { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-3); text-align: center; margin-top: 11px; }

/* ---------- ratings + reviews ---------- */
.stars { color: var(--honey); letter-spacing: 1px; display: inline-flex; gap: 1px; }
.stars svg { width: 16px; height: 16px; }
.rating-row { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-2); flex-wrap: wrap; }
.rating-row b { color: var(--ink); }

.reviews { display: grid; gap: 14px; margin: 26px 0; }
.review { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 19px 20px 17px; box-shadow: var(--shadow-sm); }
.review .rhead { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.review .rav { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--mist); color: var(--forest); font-family: var(--f-display); font-weight: 800; }
.review .rname { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.review .rname .vf { color: var(--forest-2); display: inline-flex; }
.review .rname .vf svg { width: 15px; height: 15px; }
.review .rmeta { font-size: 12px; color: var(--ink-3); font-family: var(--f-mono); }
.review .stars { margin-bottom: 7px; }
.review p { font-size: 15.5px; line-height: 1.55; margin: 0; }

/* ---------- comparison ---------- */
.compare { width: 100%; border-collapse: collapse; margin: 24px 0; background: var(--card);
  border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); font-size: 15px;
  border: 1px solid var(--line); }
.compare th, .compare td { padding: 14px 15px; text-align: left; border-bottom: 1px solid var(--line); }
.compare thead th { background: var(--forest); color: var(--paper); font-family: var(--f-mono);
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.compare thead th:first-child { background: var(--forest-2); }
.compare td:first-child { font-weight: 600; }
.compare td.y { color: var(--forest-2); font-weight: 700; }
.compare td.n { color: var(--clay-d); }
.compare td .ic { width: 16px; height: 16px; vertical-align: -.2em; margin-right: 5px; }
.compare tbody tr:last-child td { border-bottom: none; }

/* ---------- offer / bundle card ---------- */
.offer { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  padding: 28px 22px 26px; margin: 34px 0; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.offer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px;
  background: linear-gradient(90deg, var(--honey), var(--clay), var(--forest)); }
.offer .o-head { text-align: center; margin-bottom: 20px; }
.offer .o-head .eyebrow { justify-content: center; }
.offer .o-head h2 { margin: 0; font-size: clamp(24px,5.6vw,32px); }
.bundles { display: grid; gap: 12px; margin-bottom: 20px; }
.bundle { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 13px;
  padding: 16px 16px; border: 2px solid var(--line); border-radius: var(--r); cursor: pointer; background: var(--paper);
  transition: border-color .18s, background .18s, transform .18s; position: relative; }
.bundle:hover { transform: translateY(-2px); }
.bundle .radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; }
.bundle .radio::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--clay); transform: scale(0); transition: transform .18s; }
.bundle.sel { border-color: var(--clay); background: #fff; box-shadow: var(--shadow-sm); }
.bundle.sel .radio { border-color: var(--clay); }
.bundle.sel .radio::after { transform: scale(1); }
.bundle .b-name { font-family: var(--f-display); font-weight: 700; font-size: 18px; }
.bundle .b-tag { font-size: 12.5px; color: var(--ink-2); }
.bundle .b-price { text-align: right; }
.bundle .b-price .now { font-family: var(--f-display); font-weight: 800; font-size: 20px; }
.bundle .b-price .was { font-size: 12.5px; color: var(--ink-3); text-decoration: line-through; }
.bundle .ribbon { position: absolute; top: -10px; right: 14px; background: var(--clay); color: #fff;
  font-family: var(--f-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; box-shadow: var(--shadow-sm); }
.bundle .b-save { font-family: var(--f-mono); font-size: 10.5px; color: var(--forest-2); font-weight: 600; margin-top: 2px; }

/* ---------- guarantee seal ---------- */
.guarantee { display: flex; gap: 18px; align-items: center; background: var(--paper);
  border: 1.5px dashed var(--forest-2); border-radius: var(--r); padding: 18px 20px; margin: 22px 0; }
.seal { flex: none; width: 78px; height: 78px; position: relative; }
.seal svg { width: 100%; height: 100%; }
.seal .seal-c { position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  font-family: var(--f-display); font-weight: 800; color: var(--forest); }
.seal .seal-c b { font-size: 22px; line-height: 1; display: block; }
.seal .seal-c span { font-family: var(--f-mono); font-size: 7px; letter-spacing: .1em; text-transform: uppercase; }
.guarantee .gt strong { display: block; font-family: var(--f-display); font-size: 18px; margin-bottom: 3px; }
.guarantee .gt { font-size: 14.5px; color: var(--ink-2); }

/* ---------- CTA ---------- */
.cta-block { text-align: center; margin: 28px 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--clay); color: #fff; font-family: var(--f-body); font-weight: 800; font-size: 18px;
  padding: 17px 34px; border: none; border-radius: 999px; cursor: pointer; text-decoration: none; letter-spacing: .01em;
  box-shadow: 0 14px 28px -12px rgba(166,66,30,.8); transition: transform .16s, box-shadow .16s, background .16s; position: relative; overflow: hidden; }
.btn svg { width: 18px; height: 18px; }
.btn::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg);
  animation: sheen 3.6s ease-in-out infinite; }
@keyframes sheen { 0%,30% { left: -120%; } 60%,100% { left: 160%; } }
.btn:hover { transform: translateY(-2px); background: var(--clay-d); box-shadow: 0 18px 34px -12px rgba(166,66,30,.9); }
.btn:active { transform: translateY(0); }
.btn.full { width: 100%; }
.btn.big { font-size: 20px; padding: 20px 38px; }
.cta-sub { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 13px;
  font-size: 13px; color: var(--ink-2); }
.cta-sub span { display: inline-flex; align-items: center; gap: 6px; }
.cta-sub svg { width: 15px; height: 15px; color: var(--forest-2); }

/* ---------- trust badges ---------- */
.trust { display: flex; flex-wrap: wrap; gap: 12px 14px; justify-content: center; margin: 6px 0; }
.trust .tb { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 11.5px;
  font-weight: 600; letter-spacing: .04em; color: var(--forest-2); background: var(--card);
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; box-shadow: var(--shadow-sm); }
.trust .tb svg { width: 15px; height: 15px; color: var(--clay); }

/* ---------- sticky CTA ---------- */
.sticky-cta { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 200;
  background: rgba(255,252,244,.92); backdrop-filter: blur(12px); border: 1px solid var(--line-2);
  border-radius: 18px; padding: 10px 12px; display: flex; align-items: center; gap: 12px; justify-content: space-between;
  box-shadow: var(--shadow-lg); transform: translateY(160%); transition: transform .4s cubic-bezier(.2,.8,.2,1); max-width: 720px; margin: 0 auto; }
.sticky-cta.show { transform: translateY(0); }
.sticky-cta .sc-l { display: flex; align-items: center; gap: 11px; min-width: 0; }
.sticky-cta .sc-thumb { width: 42px; height: 42px; border-radius: 11px; object-fit: cover; flex: none; box-shadow: var(--shadow-sm); }
.sticky-cta .sc-info { line-height: 1.15; min-width: 0; }
.sticky-cta .sc-info b { font-family: var(--f-display); font-size: 15px; }
.sticky-cta .sc-info small { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-2); }
.sticky-cta .sc-info small svg { width: 12px; height: 12px; color: var(--forest-2); }
.sticky-cta .btn { padding: 13px 20px; font-size: 15px; flex: none; box-shadow: none; }
.sticky-cta .btn::after { display: none; }

/* ---------- footer ---------- */
footer { background: var(--forest); color: rgba(246,239,225,.72); padding: 38px 0 44px; margin-top: 46px; font-size: 13.5px; line-height: 1.6; }
footer .wrap { display: grid; gap: 14px; }
footer .logo .name { color: var(--paper); }
footer .logo .mark { background: var(--clay); }
footer .disc { color: rgba(246,239,225,.42); font-size: 12px; border-top: 1px solid rgba(246,239,225,.14); padding-top: 16px; }
footer a { color: var(--honey); text-decoration: none; }

/* ---------- reveal / motion ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.fade-up { opacity: 0; animation: fadeUp .85s ease forwards; }
.d1{animation-delay:.05s}.d2{animation-delay:.16s}.d3{animation-delay:.27s}.d4{animation-delay:.38s}.d5{animation-delay:.5s}.d6{animation-delay:.62s}
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal,.fade-up{opacity:1;transform:none;animation:none} .btn::after{display:none} h1.headline .u svg path{stroke-dashoffset:0;animation:none} html{scroll-behavior:auto} }

/* ---------- product showcase ---------- */
.pshow { display: grid; gap: 18px; align-items: center; margin-bottom: 22px; }
@media (min-width: 560px) { .pshow { grid-template-columns: 210px 1fr; } }
.pshot { position: relative; max-width: 230px; margin: 0 auto; width: 100%; }
.pshot > img { border-radius: var(--r); box-shadow: var(--shadow-lg); }
.pshot .glow { position: absolute; inset: 8% -6% -8% 8%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, var(--honey-soft), transparent 70%); filter: blur(6px); }
.plabel { position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%); width: 50%; text-align: center; pointer-events: none; }
.plabel .pb { font-family: var(--f-display); font-weight: 900; color: var(--clay-d); font-size: clamp(15px,4.6vw,19px); line-height: 1; letter-spacing: -.02em; }
.plabel .pr { height: 1px; background: var(--clay); opacity: .4; width: 64%; margin: 5px auto; }
.plabel .ps { font-family: var(--f-mono); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: var(--forest-2); }
.pinfo h3 { font-family: var(--f-display); font-weight: 800; font-size: 22px; margin-bottom: 8px; }
.pinfo .rating-row { margin-bottom: 8px; }
.pinfo p { font-size: 15px; color: var(--ink-2); margin: 0; }

/* ---------- stat band ---------- */
.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 28px 0; text-align: center; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 8px; box-shadow: var(--shadow-sm); }
.stat .num { font-family: var(--f-display); font-weight: 900; font-size: clamp(23px,6vw,33px); color: var(--clay); line-height: 1; }
.stat .lbl { font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-top: 7px; line-height: 1.25; }

/* ==========================================================================
   LISTICLE
   ========================================================================== */
.li-item { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px 24px 24px; margin: 26px 0; box-shadow: var(--shadow-sm); }
.li-item .li-num { position: absolute; top: -22px; left: 22px; font-family: var(--f-display); font-weight: 900;
  font-size: 40px; line-height: 1; width: 62px; height: 62px; border-radius: 18px; background: var(--clay); color: #fff;
  display: grid; place-items: center; box-shadow: var(--shadow); transform: rotate(-5deg); }
.li-item .li-tag { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--clay); margin-bottom: 5px; }
.li-item h2 { margin: 4px 0 10px; font-size: clamp(22px,5.2vw,28px); }
.li-item .li-img { width: 100%; border-radius: var(--r); margin: 16px 0; box-shadow: var(--shadow-sm); }
.li-tip { display: flex; gap: 12px; align-items: flex-start; background: var(--mist); border-radius: var(--r);
  padding: 14px 16px; margin-top: 16px; }
.li-tip .glyph { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--forest); color: var(--paper); display: grid; place-items: center; }
.li-tip .glyph svg { width: 16px; height: 16px; }
.li-tip .lt-body { font-size: 15px; }
.li-tip .lt-body b { color: var(--forest-2); font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; display: block; margin-bottom: 2px; }

.soft-mention { display: flex; gap: 16px; align-items: center; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; margin: 28px 0; }
.soft-mention .sm-thumb { width: 78px; flex: none; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
.soft-mention p { margin: 0; font-size: 15px; }

/* ==========================================================================
   UGC REVIEW
   ========================================================================== */
.creator { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.creator .cav { width: 50px; height: 50px; border-radius: 50%; flex: none; background: linear-gradient(140deg, var(--honey), var(--clay)); color: #fff; font-family: var(--f-display); font-weight: 800; font-size: 20px; display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.creator .ch { font-weight: 700; display: flex; align-items: center; gap: 6px; }
.creator .ch .vf { color: var(--forest-2); display: inline-flex; }
.creator .ch .vf svg { width: 15px; height: 15px; }
.creator .cm { font-size: 12.5px; color: var(--ink-3); font-family: var(--f-mono); }
.creator .cfollow { margin-left: auto; font-weight: 700; font-size: 13px; color: #fff; background: var(--forest); padding: 8px 16px; border-radius: 999px; flex: none; }

.ugc-cap { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-3); margin: 8px 0 0; }
.ugc-cap svg { width: 14px; height: 14px; }

.day-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--clay); padding: 6px 13px; border-radius: 999px; margin: 32px 0 4px; }

.verdict { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 22px; margin: 32px 0; box-shadow: var(--shadow-sm); }
.verdict .vtop { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.verdict .vscore { font-family: var(--f-display); font-weight: 900; font-size: 44px; color: var(--clay); line-height: 1; }
.verdict .vscore small { font-size: 18px; color: var(--ink-3); font-weight: 600; }
.verdict .vt { font-family: var(--f-display); font-weight: 700; font-size: 20px; }
.verdict .vt .stars { display: block; margin-top: 2px; }
.proscons { display: grid; gap: 18px; }
@media (min-width: 520px) { .proscons { grid-template-columns: 1fr 1fr; } }
.pc h4 { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 11px; }
.pc.pros h4 { color: var(--forest-2); } .pc.cons h4 { color: var(--clay-d); }
.pc ul { list-style: none; }
.pc li { display: flex; gap: 9px; align-items: flex-start; font-size: 15px; margin-bottom: 9px; }
.pc li svg { width: 17px; height: 17px; flex: none; margin-top: 3px; }
.pc.pros li svg { color: var(--forest-2); } .pc.cons li svg { color: var(--clay-d); }

.comments { margin: 8px 0 4px; }
.comments .ch-head { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.comment { display: flex; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.comment .cmav { width: 36px; height: 36px; border-radius: 50%; flex: none; background: var(--mist); color: var(--forest); font-family: var(--f-display); font-weight: 800; display: grid; place-items: center; }
.comment .cmb { flex: 1; }
.comment .cmn { font-weight: 700; font-size: 14px; }
.comment .cmt { font-size: 14.5px; margin: 2px 0 6px; line-height: 1.5; }
.comment .cml { font-size: 12px; color: var(--ink-3); font-family: var(--f-mono); display: flex; gap: 16px; }
.comment .cml span { display: inline-flex; align-items: center; gap: 5px; }
.comment .cml svg { width: 13px; height: 13px; }

/* ==========================================================================
   HUB / INDEX
   ========================================================================== */
.hub { padding: 0 0 64px; }
.hub-hero { text-align: center; padding: 54px 0 26px; }
.hub-hero .eyebrow { justify-content: center; }
.hub-hero h1 { font-family: var(--f-display); font-weight: 900; font-size: clamp(38px,8.6vw,64px);
  line-height: .98; letter-spacing: -.035em; margin-bottom: 18px; }
.hub-hero h1 .u { color: var(--clay); font-style: italic; }
.hub-hero p { font-size: 18.5px; color: var(--ink-2); max-width: 580px; margin: 0 auto; }
.note-pill { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; background: var(--card);
  border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; font-size: 14px; box-shadow: var(--shadow-sm); }
.note-pill svg { width: 17px; height: 17px; color: var(--clay); }
.note-pill b { color: var(--forest-2); }

/* device showcase */
.devices { display: grid; gap: 34px; margin: 40px 0 44px; }
@media (min-width: 760px) { .devices { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.device-card { text-align: center; }
.phone { width: 240px; max-width: 78vw; margin: 0 auto 18px; aspect-ratio: 9/19; background: #1a1814; border-radius: 38px;
  padding: 9px; box-shadow: var(--shadow-xl); position: relative; }
.phone::before { content: ""; position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 70px; height: 18px;
  background: #1a1814; border-radius: 12px; z-index: 3; }
.phone .screen { width: 100%; height: 100%; border-radius: 30px; overflow: hidden; background: var(--paper); position: relative; }
.phone iframe { position: absolute; top: 0; left: 0; width: 250%; height: 250%; border: 0;
  transform: scale(.4); transform-origin: top left; pointer-events: none; background: var(--paper); }
.device-card .dc-type { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--clay); margin-bottom: 6px; }
.device-card h3 { font-family: var(--f-display); font-weight: 800; font-size: 23px; line-height: 1.12; margin-bottom: 8px; padding: 0 8px; }
.device-card p { font-size: 14.5px; color: var(--ink-2); max-width: 320px; margin: 0 auto 14px; }
.device-card .btn { font-size: 15px; padding: 13px 24px; }

.divline { display: flex; align-items: center; gap: 16px; margin: 46px 0 26px; color: var(--ink-3);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.divline::before, .divline::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }

.why { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 26px; box-shadow: var(--shadow-sm); }
.why h2 { font-family: var(--f-display); font-weight: 800; font-size: 28px; margin-bottom: 6px; }
.why .why-sub { color: var(--ink-2); margin-bottom: 22px; font-size: 16px; }
.why-grid { display: grid; gap: 18px; }
@media (min-width: 620px) { .why-grid { grid-template-columns: 1fr 1fr; } }
.why-item { display: flex; gap: 14px; align-items: flex-start; }
.why-item .wic { flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--mist); color: var(--forest); display: grid; place-items: center; }
.why-item .wic svg { width: 19px; height: 19px; }
.why-item h4 { font-size: 16px; font-weight: 800; margin-bottom: 3px; }
.why-item p { font-size: 14.5px; color: var(--ink-2); margin: 0; }