/* =====================================================================
   1. BRAND TOKENS   ->   EDIT ONLY THIS BLOCK TO RETHEME

   Maelano brand: yellow #FBBD34, orange #EC7426.

   Role split, and why it matters:
   --signal (yellow) is the CTA colour and nothing else on the page uses it.
   --brand  (orange) carries accents on DARK grounds only. White text on
            #EC7426 measures 2.96:1, which fails WCAG, so orange never
            carries text and never sits behind white type.
   --brand-deep is orange darkened to #C2571A purely so icons and small
            accents clear 4.5:1 on light grounds. Same hue, legible.
   ===================================================================== */
:root{
  --ink:        #1A1410;   /* warm near-black: header, hero, video, final CTA */
  --ink-2:      #26201A;   /* raised panel on the dark ground */
  --brand:      #EC7426;   /* Maelano orange: accents on dark, confidence band */
  --brand-deep: #C2571A;   /* orange for icons and accents on light grounds */
  --signal:     #FBBD34;   /* Maelano yellow. CTA only. */
  --signal-hov: #EC7426;   /* CTA hover shifts yellow to orange, both brand */
  --cta-text:   #2A1B02;   /* 9.9:1 on yellow, 5.65:1 on orange */
  --paper:      #FFFFFF;
  --surface:    #F8F4EF;   /* warm light section ground */
  --line:       #E6DFD6;   /* warm hairlines */
  --text:       #221C15;
  --text-mid:   #5A5148;
  --text-inv:   #EDE7DF;
  --danger:     #C0392B;

  --w: 1120px;
  --r: 14px;
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
}

/* =====================================================================
   2. BASE
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--font-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display); line-height:1.14; margin:0; letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,4.6vw,3.2rem); font-weight:700}
h2{font-size:clamp(1.7rem,3.3vw,2.4rem); font-weight:600}
h3{font-size:1.06rem; font-weight:600; letter-spacing:-.01em}
p{margin:0}
.wrap{width:100%; max-width:var(--w); margin-inline:auto; padding-inline:24px}
.lede{font-size:1.06rem; color:var(--text-mid); max-width:62ch}
section{padding-block:clamp(54px,7vw,92px)}
:focus-visible{outline:3px solid var(--signal); outline-offset:3px; border-radius:4px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* =====================================================================
   3. BUTTON
   ===================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--signal); color:var(--cta-text); text-decoration:none;
  font-family:var(--font-display); font-weight:600; font-size:1.02rem;
  padding:16px 30px; border-radius:var(--r); border:0; cursor:pointer;
  box-shadow:0 1px 0 rgba(0,0,0,.12), 0 10px 24px -14px rgba(251,189,52,.85);
  transition:background .16s ease, transform .16s ease;
}
.btn:hover{background:var(--signal-hov)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.6; cursor:progress}
.btn--sm{padding:11px 20px; font-size:.94rem; border-radius:10px}
.btn--wide{width:100%}

/* =====================================================================
   4. HEADER  (no site nav, per brief)
   ===================================================================== */
.hdr{background:var(--ink); border-bottom:1px solid rgba(255,255,255,.07)}
.hdr__in{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:16px}
.mark{display:flex; align-items:center; gap:11px; text-decoration:none}
.mark img{height:30px; width:auto}
@media (min-width:720px){.mark img{height:34px}}
.mark__txt{font-family:var(--font-display); font-weight:700; font-size:1.26rem; color:#fff; letter-spacing:-.03em}
.mark__sub{display:none; color:rgba(237,231,223,.55); font-size:.82rem; font-weight:500;
  padding-left:11px; border-left:1px solid rgba(255,255,255,.16)}
@media (min-width:720px){.mark__sub{display:block}}
.hdr .btn--sm{display:none}
@media (min-width:600px){.hdr .btn--sm{display:inline-flex}}

/* =====================================================================
   5. HERO  +  FORM
   ===================================================================== */
.hero{background:var(--ink); color:var(--text-inv); position:relative; overflow:hidden;
  padding-block:clamp(42px,5.5vw,74px) clamp(52px,6.5vw,84px)}
.hero::before{
  content:""; position:absolute; inset:auto auto -34% -14%;
  width:640px; height:640px; border-radius:50%;
  background:radial-gradient(circle, rgba(236,116,38,.42), transparent 68%);
  pointer-events:none;
}
.hero__in{position:relative; display:grid; gap:clamp(36px,4.5vw,60px); align-items:center}
@media (min-width:980px){.hero__in{grid-template-columns:6fr 5fr}}

.eyebrow{
  display:inline-block; font-family:var(--font-display); font-size:.76rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--signal); margin-bottom:18px;
}
.hero h1{color:#fff; max-width:15ch}
.hero__sub{margin-top:18px; font-size:1.1rem; color:rgba(237,231,223,.78); max-width:50ch}
.ticks{margin-top:26px; display:grid; gap:11px; padding:0; list-style:none}
.ticks li{display:flex; align-items:flex-start; gap:11px; font-size:1rem; color:rgba(237,231,223,.86)}
.ticks svg{width:20px; height:20px; flex:0 0 auto; margin-top:3px;
  stroke:var(--signal); stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round}

/* --- the form card --- */
.card{
  background:var(--paper); color:var(--text); border-radius:20px; padding:clamp(24px,3vw,32px);
  box-shadow:0 40px 70px -40px rgba(0,0,0,.85);
}
.card__hd h2{font-size:1.42rem}
.card__hd p{margin-top:7px; font-size:.95rem; color:var(--text-mid)}
.form{margin-top:22px; display:grid; gap:16px}
.field label{display:block; font-size:.9rem; font-weight:600; margin-bottom:7px}
.field input{
  width:100%; font-family:inherit; font-size:1rem; color:var(--text);
  padding:14px 15px; border:1.5px solid var(--line); border-radius:11px;
  background:var(--paper); transition:border-color .15s ease;
}
.field input::placeholder{color:#9aa5a0}
.field input:focus{border-color:var(--brand-deep); outline:none; box-shadow:0 0 0 3px rgba(236,116,38,.16)}
.field input[aria-invalid="true"]{border-color:var(--danger)}
.err{display:block; margin-top:6px; font-size:.85rem; color:var(--danger); font-weight:500}

.tel{display:grid; grid-template-columns:auto 1fr; gap:9px}
.tel select{
  font-family:inherit; font-size:1rem; padding:14px 11px; border:1.5px solid var(--line);
  border-radius:11px; background:var(--surface); color:var(--text); cursor:pointer;
}
.tel select:focus{border-color:var(--brand-deep); outline:none}

.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.card__note{margin-top:15px; font-size:.85rem; line-height:1.55; color:var(--text-mid)}
.card__note a{color:var(--brand-deep)}
.alert{
  background:#fdf0ee; border:1px solid #f0c7c0; color:#8e2c1f;
  border-radius:11px; padding:13px 15px; font-size:.92rem; margin-bottom:4px;
}

/* =====================================================================
   6. WHY SELL  (hairline grid, deliberately not a card kit)
   ===================================================================== */
.why__grid{margin-top:42px; display:grid; border-top:1px solid var(--line)}
@media (min-width:760px){.why__grid{grid-template-columns:1fr 1fr}}
.why__item{padding:27px 0; border-bottom:1px solid var(--line)}
@media (min-width:760px){
  .why__item{padding:29px 34px 29px 0}
  .why__item:nth-child(2n){padding-left:34px; padding-right:0; border-left:1px solid var(--line)}
}
.why__item h3{margin-bottom:7px}
.why__item p{color:var(--text-mid); font-size:.96rem; max-width:46ch}
.why__ico{width:26px; height:26px; margin-bottom:13px; stroke:var(--brand-deep);
  stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round}

/* =====================================================================
   7. HOW IT WORKS  (numbered: this content really is a sequence)
   ===================================================================== */
/* Dark ground, matching the video section directly above it. */
.how{background:var(--ink); color:var(--text-inv)}
.how h2{color:#fff}
.how .lede{color:rgba(237,231,223,.72)}
.steps{margin-top:42px; display:grid; gap:1px; background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.1); border-radius:var(--r); overflow:hidden}
@media (min-width:680px){.steps{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{background:var(--ink-2); padding:27px 24px}
.step__n{font-family:var(--font-display); font-weight:700; font-size:.9rem; color:var(--signal);
  display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:50%; background:rgba(251,189,52,.16); margin-bottom:15px}
.step h3{margin-bottom:6px; color:#fff}
.step p{color:rgba(237,231,223,.7); font-size:.94rem}

/* =====================================================================
   8. WHO CAN SELL
   ===================================================================== */
.who__body{margin-top:22px; display:grid; gap:28px}
@media (min-width:880px){.who__body{grid-template-columns:1.15fr 1fr; gap:54px; align-items:start}}
.who p + p{margin-top:15px}
.chips{display:grid; gap:10px}
.chip{display:flex; align-items:center; gap:13px; padding:15px 18px;
  border:1px solid var(--line); border-radius:12px}
.chip svg{width:19px; height:19px; stroke:var(--brand-deep); stroke-width:1.9; fill:none;
  stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto}
.chip span{font-weight:600; font-size:.96rem}

/* =====================================================================
   9. CONFIDENCE BAND
   ===================================================================== */
/* Orange band carries DARK type, never white. White on #EC7426 is 2.96:1
   and fails; #2A1B02 on it is 5.65:1 and passes. */
.conf{background:var(--brand); color:var(--cta-text)}
.conf__in{display:grid; gap:28px}
@media (min-width:880px){.conf__in{grid-template-columns:1.2fr 1fr; gap:58px; align-items:center}}
.conf h2{color:var(--cta-text); max-width:18ch}
.conf p{color:rgba(42,27,2,.82); margin-top:15px; max-width:54ch}
.conf__note{background:rgba(255,255,255,.92); border:1px solid rgba(42,27,2,.12);
  border-radius:var(--r); padding:24px}
.conf__note h3{color:var(--text); margin-bottom:8px}
.conf__note p{margin-top:0; font-size:.94rem; color:var(--text-mid)}

/* =====================================================================
   10. FAQ  (native details, keyboard accessible, no JS)
   ===================================================================== */
.faq{background:var(--surface)}
.faq__list{margin-top:34px; max-width:800px; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative;
  font-family:var(--font-display); font-weight:600; font-size:1.01rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--brand-deep); border-bottom:2px solid var(--brand-deep);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details p{padding:0 40px 21px 0; color:var(--text-mid); font-size:.97rem; max-width:64ch}

/* =====================================================================
   11. FINAL CTA + FOOTER
   ===================================================================== */
.final{background:var(--ink); color:var(--text-inv); text-align:center}
.final h2{color:#fff}
.final p{margin:15px auto 0; color:rgba(237,231,223,.75); max-width:46ch}
.final .btn{margin-top:30px}
.final__sm{margin-top:19px; font-size:.91rem; color:rgba(237,231,223,.55)}
.final__sm a{color:var(--signal)}

.ftr{background:var(--ink); border-top:1px solid rgba(255,255,255,.08);
  color:rgba(237,231,223,.5); font-size:.87rem; padding-block:25px}
.ftr__in{display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:space-between; align-items:center}
.ftr a{color:rgba(237,231,223,.62); text-decoration:none}
.ftr a:hover{color:var(--signal)}
.ftr nav{display:flex; gap:20px; flex-wrap:wrap}

/* =====================================================================
   12. STICKY MOBILE CTA
   ===================================================================== */
.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:rgba(12,21,18,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.1);
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  transform:translateY(115%); transition:transform .25s ease;
}
.sticky.is-on{transform:none}
.sticky .btn{width:100%}
body.has-sticky{padding-bottom:76px}
@media (min-width:980px){
  .sticky{display:none}
  body.has-sticky{padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){.sticky{transition:none}}


/* =====================================================================
   5b. VIDEO  (facade: poster image only until the visitor clicks play,
   so the 700KB YouTube player never touches first load)
   ===================================================================== */
.vid{background:var(--ink); color:var(--text-inv); padding-block:clamp(40px,5vw,68px) clamp(30px,4vw,52px)}
.vid__hd{max-width:60ch; margin-bottom:28px}
.vid h2{color:#fff}
.vid__hd p{margin-top:13px; color:rgba(237,231,223,.72); font-size:1.03rem}
.player{
  position:relative; width:100%; max-width:900px; aspect-ratio:16/9;
  border-radius:18px; overflow:hidden; background:var(--ink-2);
  border:1px solid rgba(255,255,255,.1); cursor:pointer; padding:0; display:block;
  box-shadow:0 40px 70px -44px rgba(0,0,0,.9);
}
.player img{width:100%; height:100%; object-fit:cover; display:block}
.player iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.player__veil{position:absolute; inset:0; background:linear-gradient(180deg, rgba(26,20,16,.05), rgba(26,20,16,.5))}
.player__btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:76px; height:76px; border-radius:50%; background:var(--signal);
  display:grid; place-items:center; transition:transform .18s ease, background .18s ease;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.6);
}
.player:hover .player__btn{transform:translate(-50%,-50%) scale(1.07); background:var(--signal-hov)}
.player__btn svg{width:26px; height:26px; fill:var(--cta-text); margin-left:4px}
.player__cap{
  position:absolute; left:0; right:0; bottom:0; padding:16px 20px;
  font-size:.93rem; color:rgba(255,255,255,.9); text-align:left;
  font-family:var(--font-display); font-weight:600;
}
.player.is-live{cursor:default}
.player.is-live .player__veil,
.player.is-live .player__btn,
.player.is-live .player__cap,
.player.is-live img{display:none}
@media (prefers-reduced-motion:reduce){.player__btn{transition:none}}
@media (max-width:560px){.player__btn{width:60px; height:60px}.player__btn svg{width:21px; height:21px}}

/* =====================================================================
   13. THANK YOU PAGE
   ===================================================================== */
.done{background:var(--ink); color:var(--text-inv); min-height:calc(100vh - 160px);
  display:grid; place-items:center; text-align:center; position:relative; overflow:hidden}
.done::before{
  content:""; position:absolute; inset:auto auto -40% 50%; transform:translateX(-50%);
  width:760px; height:760px; border-radius:50%;
  background:radial-gradient(circle, rgba(236,116,38,.38), transparent 68%); pointer-events:none;
}
.done__in{position:relative; max-width:640px; padding-block:clamp(56px,8vw,96px)}
.done__tick{width:62px; height:62px; border-radius:50%; background:var(--brand);
  display:grid; place-items:center; margin:0 auto 26px}
.done__tick svg{width:30px; height:30px; stroke:#fff; stroke-width:2.6; fill:none;
  stroke-linecap:round; stroke-linejoin:round}
.done h1{color:#fff}
.done > .done__in > p{margin-top:16px; color:rgba(237,231,223,.78); font-size:1.08rem}
.done__box{
  margin-top:32px; background:var(--ink-2); border:1px solid rgba(255,255,255,.1);
  border-radius:18px; padding:clamp(24px,3vw,32px); text-align:left;
}
.done__box h2{color:#fff; font-size:1.28rem}
.done__box p{margin-top:11px; color:rgba(237,231,223,.72); font-size:.99rem}
.done__box .btn{margin-top:22px}
.done__mail{margin-top:26px; font-size:.93rem; color:rgba(237,231,223,.55)}
.done__mail b{color:rgba(237,231,223,.9); font-weight:600}

/* =====================================================================
   14. LEADS DASHBOARD  (leads.php)
   ===================================================================== */
.lg{min-height:100vh; background:var(--surface); padding:clamp(22px,4vw,48px) 0}
.lg__in{width:100%; max-width:1180px; margin-inline:auto; padding-inline:20px}
.lg__bar{display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; margin-bottom:22px}
.lg__bar h1{font-size:1.55rem}
.lg__acts{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.lg__stats{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); margin-bottom:20px}
.lg__stat{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:15px 18px}
.lg__stat b{display:block; font-family:var(--font-display); font-size:1.65rem; line-height:1.1; color:var(--text)}
.lg__stat span{font-size:.85rem; color:var(--text-mid)}
.lg__wrap{background:var(--paper); border:1px solid var(--line); border-radius:12px; overflow:auto}
.lg table{width:100%; border-collapse:collapse; font-size:.93rem; min-width:740px}
.lg th{text-align:left; font-family:var(--font-display); font-size:.78rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text-mid); padding:13px 16px; border-bottom:1px solid var(--line);
  background:var(--surface); position:sticky; top:0}
.lg td{padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top}
.lg tr:last-child td{border-bottom:0}
.lg td a{color:var(--brand-deep)}
.lg__new{display:inline-block; font-size:.7rem; font-weight:700; background:rgba(251,189,52,.35);
  color:#6b4a00; padding:2px 8px; border-radius:20px; margin-left:7px; vertical-align:middle}
.lg__empty{padding:48px 20px; text-align:center; color:var(--text-mid)}
.lg__login{max-width:380px; margin:11vh auto; background:var(--paper); border:1px solid var(--line);
  border-radius:16px; padding:30px}
.lg__login h1{font-size:1.3rem; margin-bottom:6px}
.lg__login p{font-size:.93rem; color:var(--text-mid); margin-bottom:20px}
.lg__login input{width:100%; font-family:inherit; font-size:1rem; padding:13px 14px;
  border:1.5px solid var(--line); border-radius:10px; margin-bottom:14px; box-sizing:border-box}
.lg__login input:focus{border-color:var(--brand-deep); outline:none}
.lg__search{font-family:inherit; font-size:.94rem; padding:10px 14px; border:1.5px solid var(--line);
  border-radius:10px; min-width:200px}
.lg__search:focus{border-color:var(--brand-deep); outline:none}
.lg__ghost{display:inline-flex; align-items:center; padding:10px 18px; border:1.5px solid var(--line);
  border-radius:10px; background:var(--paper); font-family:var(--font-display); font-weight:600;
  font-size:.92rem; text-decoration:none; color:var(--text); cursor:pointer}
.lg__ghost:hover{border-color:var(--brand-deep)}

/* =====================================================================
   15. WHOLESALE LABEL  (header pill beside the logo)
   ===================================================================== */
.mark__tag{
  display:inline-flex; align-items:center; font-family:var(--font-display);
  font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--signal); border:1px solid rgba(251,189,52,.45); border-radius:999px;
  padding:4px 10px; line-height:1; white-space:nowrap;
}
@media (max-width:400px){.mark__tag{font-size:.64rem; padding:3px 8px}}

/* =====================================================================
   16. WHOLESALE PAGE SECTIONS
   Backgrounds alternate paper / surface / dark down the page so a long
   page still reads as distinct chapters.
   ===================================================================== */
.sec-alt{background:var(--surface)}
.sec-dark{background:var(--ink); color:var(--text-inv)}
.sec-dark h2{color:#fff}

/* hero: headline is two sentences, so give it a little more width */
.hero h1{max-width:17ch}
.hero__act{margin-top:30px; display:flex; flex-direction:column; align-items:flex-start; gap:12px}
.hero__note{font-size:.93rem; color:rgba(237,231,223,.62); max-width:46ch}
.card__reassure{margin-top:14px; font-size:.87rem; line-height:1.5; color:var(--text-mid); text-align:center}
.card__reassure + .card__note{margin-top:8px; text-align:center}

/* heading left, text right */
.split{display:grid; gap:22px}
@media (min-width:900px){.split{grid-template-columns:5fr 7fr; gap:64px; align-items:start}}
.prose p{color:var(--text-mid); font-size:1.04rem; max-width:62ch}
.prose p + p{margin-top:14px}
.sec-dark .prose p{color:rgba(237,231,223,.76)}
.prose .say, .say{
  margin-top:24px; font-family:var(--font-display); font-weight:600; font-size:1.16rem;
  line-height:1.4; color:var(--text); max-width:44ch;
}

/* hairline tile grid: one 1px gap, no card shadows */
.tiles{margin-top:38px; display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
@media (min-width:640px){.tiles{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.tiles--3{grid-template-columns:repeat(3,1fr)}}
.tile{background:var(--paper); padding:26px 24px; position:relative}
.tile h3{margin-bottom:6px}
.tile p{color:var(--text-mid); font-size:.95rem}
.tile__ico{width:26px; height:26px; margin-bottom:14px; stroke:var(--brand-deep);
  stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round}
.tile--you{background:#FFF7E3}
.tile__badge{position:absolute; top:18px; right:18px; font-family:var(--font-display);
  font-size:.72rem; font-weight:700; color:#6b4a00; background:rgba(251,189,52,.45);
  padding:3px 10px; border-radius:999px}
.eco__end{margin-top:34px}
.eco__end .say{margin-top:0}
.eco__end .lede{margin-top:10px}

/* step path: "Register -> Complete profile -> ..." */
.flow{margin-top:26px; display:flex; flex-wrap:wrap; row-gap:8px; list-style:none; padding:0}
.flow li{display:inline-flex; align-items:center; font-family:var(--font-display);
  font-weight:600; font-size:.95rem; color:var(--text)}
.flow li:not(:last-child)::after{content:"\2192"; margin:0 12px; color:var(--brand-deep); font-weight:400}
.how .flow li{color:#fff}
.how .flow li:not(:last-child)::after{color:var(--signal)}
.flow--tight{margin-top:12px}

/* orange band: dark type only (white on #EC7426 fails contrast) */
.conf .quote{margin-top:22px; padding-left:18px; border-left:3px solid var(--cta-text);
  font-family:var(--font-display); font-weight:500; font-size:clamp(1.2rem,2.2vw,1.5rem);
  line-height:1.35; letter-spacing:-.01em; color:var(--cta-text); max-width:26ch}
.conf .prose p{color:rgba(42,27,2,.84); margin-top:0; max-width:56ch}
.conf .prose p + p{margin-top:14px}
.conf .prose .say{color:var(--cta-text); margin-top:22px}

/* product categories */
.cats{margin-top:22px; display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0}
.cats li{padding:10px 17px; border:1px solid var(--line); border-radius:999px;
  font-weight:600; font-size:.95rem; background:var(--paper)}
.cats .cats__more{border-style:dashed; color:var(--text-mid)}

/* subscription */
.plan{display:grid; gap:30px}
@media (min-width:900px){.plan{grid-template-columns:7fr 5fr; gap:60px; align-items:center}}
.plan__note{background:var(--ink-2); border:1px solid rgba(251,189,52,.35); border-radius:var(--r); padding:26px}
.plan__note h3{color:var(--signal); margin-bottom:9px}
.plan__note p{color:rgba(237,231,223,.8); font-size:.97rem}

/* final CTA paragraph is longer on this page */
.final p{max-width:58ch}

/* footer trust message */
.trust{display:grid; gap:20px; padding-block:18px 28px; border-bottom:1px solid rgba(255,255,255,.08)}
@media (min-width:760px){.trust{grid-template-columns:1fr auto; align-items:center}}
.trust img{height:32px; width:auto}
.trust__tag{margin-top:12px; font-family:var(--font-display); font-weight:600; color:var(--signal)}
.trust__line{margin-top:4px; color:rgba(237,231,223,.62)}
.ftr__base{padding-top:22px}

.ftr .btn{color:var(--cta-text)}
.ftr .btn:hover{color:var(--cta-text)}
.faq--paper{background:var(--paper)}

/* =====================================================================
   17. CAMPAIGN PAGES  (seller.maelano.com, wholesaler.maelano.com)
   No lead form: the hero's right column holds the walkthrough video and
   every button goes straight to the registration form.
   ===================================================================== */
.btn--lg{padding:18px 34px; font-size:1.08rem}
.hero__media .player{max-width:none; box-shadow:0 40px 70px -40px rgba(0,0,0,.9)}
.how__cta{margin-top:30px}

/* launch offer badge (wholesaler page) */
.launch{
  display:inline-flex; align-items:flex-start; gap:10px; margin:0 0 22px;
  padding:11px 16px; border:1px solid rgba(251,189,52,.55); border-radius:12px;
  background:rgba(251,189,52,.12); color:#FFE3A3;
  font-family:var(--font-display); font-weight:600; font-size:.95rem; line-height:1.35; max-width:44ch;
}
.launch strong{color:var(--signal); font-weight:700}
.launch svg{width:18px; height:18px; flex:0 0 auto; margin-top:1px; fill:var(--signal)}
.final .launch{margin:0 auto 22px; color:#FFE3A3; max-width:none}
.launch--center{justify-content:center}