/* =================================================================
   Orderbook — landing page
   Palette
     brand      #C2410C   deep rust (primary actions, headings accent)
     brand-600  #F54900   hot orange
     brand-500  #F97316   orange
     rust-dark  #9A3412
     peach      #FFF1E6 / #FED7AA
     cream      #FFF7ED
     teal       #0D9488   violet #7C3AED
     green      #166534 on #F0FDF4
     ink        #111827 (titles)  body #4B5563
   Font: DM Sans
================================================================= */

/* ---------- tokens ---------- */
:root{
  --brand:#C2410C;
  --brand-600:#F54900;
  --brand-500:#F97316;
  --rust:#9A3412;
  --peach:#FFF1E6;
  --peach-2:#FED7AA;
  --cream:#FFF7ED;
  --teal:#0D9488;
  --violet:#7C3AED;
  --green:#166534;
  --green-bg:#F0FDF4;
  --ink:#111827;
  --body:#4B5563;
  --line:#EADFD3;
  --line-soft:#F1E7DC;
  --white:#fff;
  --dark:#1B1410;

  --r-sm:8px; --r:14px; --r-lg:22px; --r-xl:30px;
  --sh-1:0 1px 2px rgba(17,24,39,.05), 0 8px 24px -12px rgba(154,52,18,.18);
  --sh-2:0 2px 4px rgba(17,24,39,.04), 0 22px 50px -22px rgba(154,52,18,.30);
  --sh-3:0 40px 90px -40px rgba(154,52,18,.45), 0 4px 10px rgba(17,24,39,.06);
  --wrap:1180px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:86px; -webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--body);
  background:var(--white);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{color:var(--ink); margin:0; line-height:1.15; letter-spacing:-.022em; font-weight:700}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
a{color:inherit; text-decoration:none}
img{max-width:100%}
table{border-collapse:collapse; width:100%}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip{position:absolute; left:-999px; top:0; background:var(--brand); color:#fff; padding:10px 16px; z-index:200; border-radius:0 0 10px 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--brand-500); outline-offset:3px; border-radius:6px}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:22px}
.wrap--narrow{max-width:820px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font:inherit; font-weight:700; font-size:16px; letter-spacing:-.01em;
  padding:14px 24px; border-radius:100px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
  text-align:center;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--brand); color:#fff; box-shadow:0 12px 26px -12px rgba(194,65,12,.75)}
.btn--primary:hover{background:var(--brand-600); box-shadow:0 18px 34px -14px rgba(245,73,0,.8)}
.btn--outline{background:transparent; color:var(--ink); border-color:var(--line)}
.btn--outline:hover{border-color:var(--brand); color:var(--brand); background:var(--peach)}
.btn--ghost{background:var(--peach); color:var(--rust)}
.btn--ghost:hover{background:var(--peach-2)}
.btn--wa{background:#16a34a; color:#fff; box-shadow:0 12px 26px -14px rgba(22,163,74,.8)}
.btn--wa:hover{background:#15803d}
.btn--sm{padding:10px 18px; font-size:15px}
.btn--lg{padding:17px 30px; font-size:17px}
.btn--full{width:100%}
.btn--onlight{border-color:rgba(255,255,255,.35); color:#fff}
.btn--onlight:hover{background:rgba(255,255,255,.12); border-color:#fff; color:#fff}

/* WhatsApp glyph — pure CSS speech bubble with a handset */
.ico-wa{
  width:19px; height:19px; flex:none; position:relative;
  background:#fff; border-radius:50% 50% 4px 50%;
}
.ico-wa::after{
  content:""; position:absolute; left:5px; top:5px; width:9px; height:9px;
  border:2.2px solid #16a34a; border-radius:9px 2px 9px 9px;
  border-top-color:transparent; border-right-color:transparent;
}
.btn--wa:hover .ico-wa::after{border-bottom-color:#15803d; border-left-color:#15803d}

/* ---------- eyebrow / section heads ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--rust); background:var(--peach); border:1px solid var(--peach-2);
  padding:7px 15px; border-radius:100px; margin:0 0 20px;
}
.eyebrow__dot{width:7px; height:7px; border-radius:50%; background:var(--brand-600); flex:none}
.eyebrow--light{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:var(--peach-2)}

.sec{padding:100px 0}
.sec--cream{background:var(--cream); border-block:1px solid var(--line-soft)}
.sec--dark{background:var(--dark); color:#D6C9BE}
.sec--dark h2,.sec--dark h3{color:#fff}

.sechead{max-width:720px; margin:0 0 56px}
.sechead h2{font-size:clamp(30px,4.1vw,46px)}
.sechead .sub{margin-top:16px; font-size:18.5px; color:var(--body)}
.sechead--light .sub{color:#B9A99B}

/* =================================================================
   NAV
================================================================= */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav__in{
  max-width:var(--wrap); margin-inline:auto; padding:13px 22px;
  display:flex; align-items:center; gap:26px;
}
.brand{display:inline-flex; align-items:center; gap:10px; flex:none}
.brand__mark{
  width:34px; height:34px; border-radius:10px; flex:none;
  background:linear-gradient(140deg,var(--brand-500),var(--brand));
  color:#fff; font-weight:700; font-size:19px;
  display:grid; place-items:center;
  box-shadow:0 6px 14px -6px rgba(194,65,12,.8);
}
.brand__name{font-weight:700; font-size:19px; color:var(--ink); letter-spacing:-.02em}
.brand--light .brand__name{color:#fff}

.nav__links{display:flex; gap:26px; margin-left:auto; font-size:15.5px; font-weight:500}
.nav__links a{color:var(--body); position:relative; padding:4px 0}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--brand); border-radius:2px; transition:right .22s ease;
}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{right:0}
.nav__cta{display:flex; gap:10px; margin-left:auto}
.nav__links + .nav__cta{margin-left:0}

/* =================================================================
   HERO
================================================================= */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 520px at 88% -8%, #FFE6D2 0%, transparent 62%),
    radial-gradient(700px 480px at 2% 8%, #FFF1E6 0%, transparent 60%),
    linear-gradient(180deg,var(--cream),#fff 72%);
  border-bottom:1px solid var(--line-soft);
}
.hero__in{
  max-width:var(--wrap); margin-inline:auto; padding:84px 22px 96px;
  display:grid; grid-template-columns:1.08fr .92fr; gap:60px; align-items:center;
}
.hero__copy h1{font-size:clamp(38px,5.4vw,62px); letter-spacing:-.032em}
.hl{
  color:var(--brand); white-space:nowrap;
  background:linear-gradient(transparent 60%, rgba(254,215,170,.85) 60% 92%, transparent 92%);
  padding-inline:2px;
}
.lead{margin-top:22px; font-size:18.5px; max-width:600px}
.lead--tight{margin-top:14px}
.hero__btns{display:flex; flex-wrap:wrap; gap:13px; margin-top:34px}
.hero__ticks{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:26px; font-size:15px; color:var(--body)}
.hero__ticks li{display:flex; align-items:center; gap:8px}
.hero__ticks li{position:relative; padding-left:26px}
.hero__ticks li::before{
  content:""; position:absolute; left:0; top:4px; width:18px; height:18px; border-radius:50%;
  background:var(--green-bg); border:1.5px solid #86efac;
}
.hero__ticks li::after{
  content:""; position:absolute; left:5px; top:9px; width:8px; height:4px;
  border-left:2px solid var(--green); border-bottom:2px solid var(--green);
  transform:rotate(-45deg);
}

.hero__art{position:relative; display:flex; justify-content:center}
.glow{
  position:absolute; inset:-12% -6% 6%;
  background:radial-gradient(closest-side, rgba(249,115,22,.22), transparent 72%);
  filter:blur(18px); z-index:0;
}

/* ---------- floating cards ---------- */
.float{
  position:absolute; z-index:5;
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--r);
  padding:12px 16px; box-shadow:var(--sh-2);
  display:flex; flex-direction:column; gap:2px; max-width:215px;
}
.float b{font-size:14.5px; color:var(--ink)}
.float span{font-size:13px; color:var(--body); line-height:1.4}
.float--a{top:4%; left:-13%}
.float--b{bottom:20%; right:-12%; padding-left:34px}
.float__dot{
  position:absolute; left:14px; top:17px; width:9px; height:9px; border-radius:50%;
  background:var(--green); box-shadow:0 0 0 4px var(--green-bg);
}

/* =================================================================
   PHONE MOCKUP
================================================================= */
.phone{
  position:relative; z-index:2; margin:0;
  width:330px; max-width:100%;
  background:#15100d; border-radius:46px; padding:11px;
  box-shadow:var(--sh-3), inset 0 0 0 1.5px #3b2f28;
}
.phone--sm{width:312px}
.phone__screen{
  background:#F6F5F4; border-radius:36px; overflow:hidden;
  height:640px; position:relative;
  display:flex; flex-direction:column;
  font-size:12px; line-height:1.4; color:var(--body);
}
.phone--sm .phone__screen{height:706px}

.statusbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 20px 4px; font-size:11.5px; font-weight:700; color:var(--ink); background:#fff;
}
.statusbar__pill{width:64px; height:17px; border-radius:100px; background:#15100d}
.statusbar__icons{font-size:8px; letter-spacing:1px; color:var(--ink)}

.appbar{display:flex; align-items:center; gap:7px; padding:8px 12px 10px; background:#fff; border-bottom:1px solid #EFEDEB}
.appbar--slim{padding:10px 12px; gap:9px; font-size:12px; color:var(--ink)}
.hamb{display:flex; flex-direction:column; gap:3px; flex:none}
.hamb i{width:14px; height:1.8px; background:var(--ink); border-radius:2px}
.avatar{
  width:23px; height:23px; border-radius:50%; background:var(--ink); color:#fff;
  display:grid; place-items:center; font-size:11px; font-weight:700; flex:none;
}
.avatar--sm{width:20px; height:20px; font-size:10px}
.appbar__name{font-weight:700; color:var(--ink); font-size:11.5px; white-space:nowrap}
.searchbox{
  flex:1; background:#F4F2F0; border-radius:100px; padding:5px 10px 5px 24px;
  font-size:10.5px; color:#9b9490; position:relative; min-width:0;
}
.searchbox::before{
  content:""; position:absolute; left:9px; top:8px; width:8px; height:8px;
  border:1.5px solid #9b9490; border-radius:50%;
}
.cart-ico{
  width:18px; height:16px; flex:none; position:relative;
  border:1.6px solid var(--ink); border-top:0; border-radius:0 0 5px 5px;
}
.cart-ico::before{
  content:""; position:absolute; left:3px; top:-6px; width:10px; height:7px;
  border:1.6px solid var(--ink); border-bottom:0; border-radius:5px 5px 0 0;
}
.cart-ico::after{
  content:attr(data-count); position:absolute; right:-6px; top:-8px;
  background:var(--brand-600); color:#fff; font-size:8px; font-weight:700;
  min-width:13px; height:13px; border-radius:50%; display:grid; place-items:center; padding:0 3px;
}
.back{font-size:14px; color:var(--ink)}

.cat-banner{
  position:relative; padding:14px 14px 16px; min-height:104px;
  display:flex; flex-direction:column; gap:3px; justify-content:center;
  background:linear-gradient(115deg,#5b5340,#8a7f63 45%,#c6bda0);
  overflow:hidden;
}
.cat-banner::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(97deg, rgba(255,255,255,.14) 0 7px, transparent 7px 17px);
}
.cat-banner__kicker{font-size:9.5px; font-weight:700; letter-spacing:.14em; color:#FFD9BA; position:relative; z-index:1}
.cat-banner__title{font-size:20px; font-weight:700; color:#fff; letter-spacing:-.02em; position:relative; z-index:1}
.cat-banner__chip{
  align-self:flex-start; background:rgba(255,255,255,.9); color:var(--ink);
  font-size:9.5px; font-weight:700; padding:3px 9px; border-radius:100px; position:relative; z-index:1;
}

.chiprow{display:flex; gap:6px; padding:10px 12px; background:#fff; overflow:hidden}
.chiprow--tight{padding:6px 0 2px; background:transparent; flex-wrap:wrap}
.chip{
  background:#F4F2F0; color:var(--body); font-size:10px; font-weight:500;
  padding:5px 11px; border-radius:100px; white-space:nowrap; flex:none;
  display:inline-flex; align-items:center; gap:5px; border:1px solid transparent;
}
.chip--on{background:var(--ink); color:#fff; font-weight:700}
.chip--sel{background:var(--peach); color:var(--brand); border-color:var(--brand-500); font-weight:700}
.chip--dark{background:var(--ink); color:#fff; font-weight:700}
.swdot{width:9px; height:9px; border-radius:50%; display:inline-block; flex:none}

.secthead{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 12px 8px; background:#F6F5F4;
}
.secthead b{font-size:11px; color:var(--ink); letter-spacing:.02em}
.secthead span{font-size:9.5px; color:var(--brand)}

.pgrid{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 12px 10px; background:#F6F5F4}
.pgrid--peek{padding-bottom:0}
.pgrid--peek .pcard__img{height:48px}
.pcard{background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(17,24,39,.07)}
.pcard__img{height:88px; position:relative}
.pcard__body{padding:7px 8px 8px; display:flex; flex-direction:column; gap:2px}
.pcard__cat{font-size:8px; letter-spacing:.06em; color:#9b9490; font-weight:500}
.pcard__name{font-size:10.5px; color:var(--ink); letter-spacing:-.01em}
.pcard__price{font-size:12px; font-weight:700; color:var(--ink)}
.dots{display:flex; gap:3px; margin:2px 0}
.dots i{width:9px; height:9px; border-radius:50%; border:1px solid rgba(0,0,0,.08)}
.pcard__moq{display:flex; justify-content:space-between; font-size:8.5px; color:#9b9490}
.pcard__moq b{color:var(--brand-600)}
.pcard__btn{
  margin-top:4px; background:var(--ink); color:#fff; text-align:center;
  font-size:9.5px; font-weight:700; padding:6px; border-radius:100px;
}
.heart{
  position:absolute; right:6px; top:6px; width:16px; height:16px; border-radius:50%;
  background:rgba(255,255,255,.92);
}
.heart::after{
  content:""; position:absolute; left:4px; top:5px; width:8px; height:7px;
  background:
    radial-gradient(circle at 25% 30%, #b9b2ad 48%, transparent 49%),
    radial-gradient(circle at 75% 30%, #b9b2ad 48%, transparent 49%);
}
.tag{
  position:absolute; left:6px; top:6px; font-size:8.5px; font-weight:700;
  color:#fff; padding:3px 8px; border-radius:100px;
}
.tag--best{background:var(--brand-500)}
.tag--trend{background:var(--violet)}
.tag--feat{background:var(--brand-600)}

.tabbar{
  margin-top:auto; flex:none; display:flex; justify-content:space-around; align-items:center;
  background:#fff; border-top:1px solid #EFEDEB; padding:9px 4px 14px;
}
.tabbar__i{
  font-size:8.5px; color:#9b9490; font-weight:500; position:relative;
  display:flex; flex-direction:column; align-items:center; padding-top:16px;
}
.tabbar__i::before{
  content:""; width:14px; height:12px; border-radius:3px;
  border:1.6px solid currentColor; position:absolute; top:0;
}
.tabbar__i--on{color:var(--brand-600); font-weight:700}
.tabbar__i--wa{color:#16a34a}
.tabbar__i--wa::before{border-radius:50% 50% 50% 4px}
.tabbar__i[data-count]::after{
  content:attr(data-count); position:absolute; left:16px; top:-4px;
  background:var(--brand-600); color:#fff; font-size:7.5px; font-weight:700;
  min-width:11px; height:11px; border-radius:50%; display:grid; place-items:center;
}

/* ---------- product-detail phone ---------- */
.pdp__img{height:136px; position:relative}
.pdp__count{
  position:absolute; left:50%; bottom:7px; transform:translateX(-50%);
  background:rgba(0,0,0,.55); color:#fff; font-size:8.5px; padding:2px 8px; border-radius:100px;
}
.pdp__thumbs{display:flex; gap:6px; padding:8px 12px; background:#fff}
.pdp__thumbs i{width:32px; height:28px; border-radius:6px; border:1.5px solid var(--peach-2)}
.pdp__body{background:#fff; margin:6px 10px 10px; border-radius:12px; padding:10px 11px; display:flex; flex-direction:column; gap:3px; overflow:hidden}
.pdp__name{font-size:15px; color:var(--ink); letter-spacing:-.02em}
.pdp__meta{display:flex; align-items:center; gap:8px; margin:2px 0}
.stars{font-size:10px; font-weight:700; color:var(--ink)}
.pdp__price{display:flex; align-items:center; gap:7px; margin:4px 0 6px}
.pdp__price b{font-size:18px; color:var(--brand-600); letter-spacing:-.02em}
.pdp__price s{font-size:11px; color:#9b9490}
.lbl{font-size:10px; font-weight:700; color:var(--ink); margin-top:7px}
.qtyrow{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:#F7F6F5; border-radius:9px; padding:6px 8px; margin-top:6px;
}
.qtyrow b{font-size:9.5px; color:var(--ink)}
.stepper{display:flex; align-items:center; gap:7px}
.stepper i{
  width:18px; height:18px; border-radius:6px; background:#fff; border:1px solid var(--line);
  display:grid; place-items:center; font-style:normal; font-size:11px; color:var(--ink);
}
.stepper i:last-child{background:var(--ink); color:#fff; border-color:var(--ink)}
.stepper b{font-size:11px; color:var(--ink); min-width:20px; text-align:center}
.pdp__cta{
  margin-top:9px; background:var(--brand); color:#fff; text-align:center;
  font-size:10.5px; font-weight:700; padding:9px; border-radius:100px;
}

/* ---------- fabric swatches (CSS-built, no images) ---------- */
.sw{background-color:#8a8f7a}
.sw--1{ /* grey jacquard damask */
  background:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,.5) 0 12%, transparent 13%),
    radial-gradient(circle at 75% 75%, rgba(255,255,255,.45) 0 12%, transparent 13%),
    repeating-linear-gradient(45deg,#cfcbc4 0 6px,#bdb8b0 6px 12px),
    linear-gradient(135deg,#d8d4cd,#b3aea6);
}
.sw--2{ /* teal weave */
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.1) 0 2px, transparent 2px 4px),
    linear-gradient(140deg,#15807a,#0D9488 55%,#2aa79c);
}
.sw--3{ /* olive velvet drape */
  background:
    repeating-linear-gradient(103deg, rgba(0,0,0,.13) 0 9px, rgba(255,255,255,.11) 9px 20px),
    linear-gradient(120deg,#6f6a45,#9b9468 60%,#c3bb8e);
}
.sw--4{ /* pink floral print */
  background:
    radial-gradient(circle at 30% 35%, #d98a92 0 14%, transparent 15%),
    radial-gradient(circle at 70% 65%, #c9727e 0 12%, transparent 13%),
    radial-gradient(circle at 80% 20%, #e8b7a6 0 9%, transparent 10%),
    linear-gradient(135deg,#f0d9cd,#dcb0ab);
}
.sw--5{ /* mehroon flora patch */
  background:
    radial-gradient(circle at 28% 30%, #c2566a 0 13%, transparent 14%),
    radial-gradient(circle at 68% 58%, #9e3b4f 0 11%, transparent 12%),
    radial-gradient(circle at 48% 82%, #7a8a5a 0 9%, transparent 10%),
    repeating-linear-gradient(33deg, rgba(0,0,0,.05) 0 5px, transparent 5px 11px),
    linear-gradient(140deg,#d8cdae,#bda98d);
}
.sw--6{ /* rama dune patch */
  background:
    repeating-linear-gradient(60deg, rgba(255,255,255,.16) 0 5px, transparent 5px 13px),
    linear-gradient(135deg,#2f6f63,#4e9184 60%,#83b3a5);
}
.sw--7{ /* wine damask */
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.22) 0 10%, transparent 11%),
    repeating-linear-gradient(45deg,#6d2233 0 7px,#5b1b2a 7px 14px),
    linear-gradient(135deg,#7d2b3c,#4b1624);
}
.sw--8{ /* beige velvet */
  background:
    repeating-linear-gradient(97deg, rgba(0,0,0,.09) 0 8px, rgba(255,255,255,.14) 8px 18px),
    linear-gradient(120deg,#c9b294,#e0cfb5);
}

/* =================================================================
   STAT STRIP
================================================================= */
.strip{background:var(--ink); color:#D6C9BE}
.strip__in{
  max-width:var(--wrap); margin-inline:auto; padding:30px 22px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
.strip__i{display:flex; flex-direction:column; gap:2px; border-left:2px solid rgba(255,255,255,.14); padding-left:16px}
.strip__i:first-child{border-left:0; padding-left:0}
.strip__i b{font-size:23px; color:var(--peach-2); letter-spacing:-.02em; line-height:1.2}
.strip__i span{font-size:14.5px; color:#B9A99B; line-height:1.45}

/* =================================================================
   PROBLEM
================================================================= */
.pains{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.pain{
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:28px 26px 30px; position:relative; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pain:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--peach-2)}
.pain__n{
  font-size:13px; font-weight:700; color:var(--brand-600);
  background:var(--peach); border-radius:8px; padding:3px 9px; display:inline-block; margin-bottom:14px;
}
.pain h3{font-size:19.5px; margin-bottom:9px}
.pain p{font-size:16px}

/* =================================================================
   HOW IT WORKS — steps
================================================================= */
.step{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
  padding:56px 0; border-top:1px dashed var(--line);
}
.step:first-of-type{border-top:0; padding-top:20px}
.step--flip .step__copy{order:2}
.step__n{
  display:inline-block; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brand); margin-bottom:12px;
}
.step__copy h3{font-size:clamp(25px,3vw,33px); margin-bottom:14px}
.step__copy p{font-size:17.5px}
.ticks{margin-top:20px; display:flex; flex-direction:column; gap:10px}
.ticks li{position:relative; padding-left:29px; font-size:16px}
.ticks li::before{
  content:""; position:absolute; left:0; top:5px; width:18px; height:18px; border-radius:50%;
  background:var(--green-bg); border:1.5px solid #86efac;
}
.ticks li::after{
  content:""; position:absolute; left:5px; top:10px; width:8px; height:4px;
  border-left:2px solid var(--green); border-bottom:2px solid var(--green);
  transform:rotate(-45deg);
}
.step__art{display:flex; flex-direction:column; align-items:center; gap:16px; min-width:0}

/* ---------- generic browser/desktop mock ---------- */
.mock{
  width:100%; background:#fff; border:1px solid var(--line-soft); border-radius:18px;
  overflow:hidden; box-shadow:var(--sh-2);
}
.mock__bar{
  display:flex; align-items:center; gap:6px; padding:10px 14px;
  background:#F7F3EE; border-bottom:1px solid var(--line-soft);
}
.mock__bar i{width:9px; height:9px; border-radius:50%; background:#DDD3C8}
.mock__bar i:first-child{background:#f0a9a0}
.mock__bar i:nth-child(2){background:#f3ce9a}
.mock__bar i:nth-child(3){background:#a9d4b0}
.mock__bar span{
  margin-left:10px; font-size:11.5px; color:#98897c; background:#fff;
  border:1px solid var(--line-soft); border-radius:100px; padding:3px 14px;
}
.mock__body{padding:16px; font-size:13px}

.pill{
  font-size:11.5px; font-weight:700; color:var(--body);
  background:#F4F2F0; border-radius:100px; padding:4px 12px;
}
.pill--brand{background:var(--brand); color:#fff}

.badge{font-size:11px; font-weight:700; padding:3px 10px; border-radius:100px; white-space:nowrap; display:inline-block}
.badge--green{background:var(--green-bg); color:var(--green)}
.badge--grey{background:#F3F4F6; color:#6B7280}
.badge--blue{background:#EEF2FF; color:#4338CA}
.badge--amber{background:var(--peach); color:var(--rust)}

/* ---------- step 1: product manager ---------- */
.prodmgr__top{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.prodmgr__top b{font-size:16px; color:var(--ink)}
.prow{
  display:grid; grid-template-columns:1.7fr .8fr .9fr .8fr .8fr; gap:10px; align-items:center;
  padding:9px 4px; border-top:1px solid var(--line-soft); font-size:12.5px;
}
.prow--head{
  border-top:0; font-size:10.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:#98897c; padding-bottom:6px;
}
.prow__p{display:flex; align-items:center; gap:9px; font-weight:700; color:var(--ink); min-width:0}
.prow__p .sw{width:30px; height:30px; border-radius:8px; flex:none}
.prodmgr__up{
  margin-top:14px; display:flex; align-items:center; gap:8px;
  border:1.5px dashed var(--peach-2); border-radius:12px; padding:10px; background:var(--cream);
}
.up{flex:1; font-size:12px; color:var(--rust); font-weight:500}
.thumb{width:34px; height:34px; border-radius:8px; flex:none}

/* ---------- step 2: whatsapp chat ---------- */
.wachat{
  width:100%; max-width:400px; border-radius:18px; overflow:hidden;
  box-shadow:var(--sh-2); border:1px solid var(--line-soft); background:#ECE2D8;
}
.wachat__bar{display:flex; align-items:center; gap:9px; padding:11px 14px; background:#0f766e; color:#fff}
.wachat__bar b{font-size:14px}
.wachat__on{font-size:11px; color:#b8e6e0; margin-left:auto}
.wachat__body{
  padding:14px; display:flex; flex-direction:column; gap:9px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 2px, transparent 2px 12px),
    #EDE3D9;
}
.bub{
  max-width:86%; padding:9px 12px; border-radius:12px; font-size:13.5px;
  background:#fff; color:var(--ink); box-shadow:0 1px 1px rgba(0,0,0,.07); line-height:1.45;
}
.bub--in{align-self:flex-start; border-top-left-radius:3px}
.bub--out{align-self:flex-end; background:#DCF8C6; border-top-right-radius:3px; max-width:92%}
.bub__t{display:block; font-size:10.5px; color:#6b8a5a; text-align:right; margin-top:5px}
.linkprev{display:flex; gap:10px; background:rgba(255,255,255,.62); border-radius:8px; padding:8px; align-items:center}
.linkprev__img{width:52px; height:52px; border-radius:6px; flex:none}
.linkprev__txt{display:flex; flex-direction:column; gap:1px; min-width:0}
.linkprev__txt b{font-size:12.5px; color:var(--ink)}
.linkprev__txt span{font-size:11px; color:var(--body)}
.linkprev__url{color:var(--brand) !important; font-weight:700}

.callout{
  width:100%; max-width:400px; background:var(--green-bg); border:1px solid #bbf7d0;
  border-radius:var(--r); padding:14px 18px; display:flex; flex-direction:column; gap:3px;
}
.callout b{color:var(--green); font-size:15px}
.callout span{font-size:14.5px; color:var(--body)}

/* ---------- step 4: orders ---------- */
.ordview__stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px}
.stat{background:#F9F7F4; border:1px solid var(--line-soft); border-radius:12px; padding:11px 13px; display:flex; flex-direction:column}
.stat b{font-size:20px; color:var(--ink); letter-spacing:-.02em; line-height:1.2}
.stat span{font-size:11.5px; color:#98897c}
.stat--brand b{color:var(--brand-600)}
.orow{
  display:flex; align-items:center; gap:11px; padding:10px 4px;
  border-top:1px solid var(--line-soft); border-left:3px solid var(--brand-500); padding-left:11px; margin-top:4px;
}
.orow .sw{width:34px; height:34px; border-radius:9px; flex:none}
.orow__id{display:flex; flex-direction:column; flex:1; min-width:0}
.orow__id b{font-size:13.5px; color:var(--ink)}
.orow__id em{font-style:normal; font-size:11.5px; color:#98897c}
.orow__n{font-size:12.5px; font-weight:700; color:var(--ink); white-space:nowrap}
.timeline{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft)}
.tl{
  position:relative; padding-top:20px; font-size:11.5px; font-weight:700; color:#B9AEA4;
  display:flex; flex-direction:column;
}
.tl em{font-style:normal; font-weight:400; font-size:10.5px; color:#B9AEA4}
.tl::before{content:""; position:absolute; left:0; top:4px; width:11px; height:11px; border-radius:50%; background:#E7DED5}
.tl::after{content:""; position:absolute; left:11px; top:9px; right:0; height:2px; background:#E7DED5}
.tl:last-child::after{display:none}
.tl--done{color:var(--green)}
.tl--done::before{background:var(--green)}
.tl--done::after{background:var(--green)}
.tl--done em{color:var(--body)}
.tl--now{color:var(--brand-600)}
.tl--now::before{background:var(--brand-600); box-shadow:0 0 0 4px var(--peach)}
.tl--now em{color:var(--body)}

/* =================================================================
   SCREENS — two up
================================================================= */
.twoup{display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:start}
.twoup__col{display:flex; flex-direction:column; gap:14px; min-width:0}
.twoup__tag{
  align-self:flex-start; font-size:13px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; padding:6px 14px; border-radius:100px;
}
.twoup__tag--owner{background:#EDE9FE; color:var(--violet)}
.twoup__tag--buyer{background:#CCFBF1; color:#0f766e}
.twoup__note{font-size:15px; color:var(--body)}

/* ---------- dashboard ---------- */
.dash{display:grid; grid-template-columns:135px 1fr; min-height:430px}
.dash__side{background:#16110E; padding:14px 10px; display:flex; flex-direction:column; gap:3px}
.dash__brand{display:flex; align-items:center; gap:7px; color:#fff; font-size:11.5px; font-weight:700; margin-bottom:12px}
.dash__brand .avatar{background:var(--brand)}
.dash__nav{font-size:11.5px; color:#9C8D82; padding:6px 9px; border-radius:8px}
.dash__nav--on{background:var(--brand); color:#fff; font-weight:700}
.dash__main{padding:14px; background:#FAF8F6; min-width:0}
.dash__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.dash__head b{font-size:14.5px; color:var(--ink)}
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px}
.kpi{background:#fff; border:1px solid var(--line-soft); border-radius:10px; padding:8px 9px; display:flex; flex-direction:column; min-width:0}
.kpi span{font-size:9.5px; color:#98897c; letter-spacing:.03em}
.kpi b{font-size:14px; color:var(--ink); letter-spacing:-.02em; line-height:1.3}
.kpi em{font-style:normal; font-size:9.5px; color:#98897c}
.kpi em.up{color:var(--green); font-weight:700}
.dash__row{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px}
.panel{background:#fff; border:1px solid var(--line-soft); border-radius:10px; padding:10px}
.panel__t{display:block; font-size:11px; color:var(--ink); margin-bottom:9px}
.bars{display:flex; align-items:flex-end; gap:4px; height:62px}
.bars i{flex:1; background:linear-gradient(180deg,var(--brand-500),var(--brand)); border-radius:3px 3px 0 0; min-height:6px}
.rankrow{display:grid; grid-template-columns:52px 1fr 22px; align-items:center; gap:6px; font-size:10px; color:var(--body); margin-bottom:5px}
.rankrow b{font-size:10px; color:var(--ink); text-align:right}
.meter{display:block; height:6px; border-radius:100px; background:#F1E7DC; overflow:hidden}
.meter u{display:block; height:100%; background:var(--teal); border-radius:100px}
.statusline{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.big{font-size:24px; color:var(--brand-600); letter-spacing:-.02em}
.muted{font-size:10.5px; color:#98897c; line-height:1.35}

/* ---------- buyer cart ---------- */
.cartview{background:#F4F3F2}
.cartview__head{display:flex; align-items:baseline; gap:10px; margin-bottom:12px}
.cartview__head b{font-size:20px; color:var(--ink); letter-spacing:-.02em}
.citem{display:flex; align-items:center; gap:10px; background:#fff; border-radius:12px 12px 0 0; padding:10px 12px; margin-top:8px}
.citem .sw{width:38px; height:38px; border-radius:9px; flex:none; position:relative}
.citem .sw::after{
  content:attr(data-q); position:absolute; right:-6px; top:-6px;
  background:var(--brand-500); color:#fff; font-size:9px; font-weight:700;
  min-width:18px; height:18px; border-radius:50%; display:grid; place-items:center; padding:0 4px;
  border:2px solid #fff;
}
.citem__t{display:flex; flex-direction:column}
.citem__t b{font-size:13.5px; color:var(--ink)}
.citem__t em{font-style:normal; font-size:11px; color:var(--teal); font-weight:500}
.cvar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:#fff; border-radius:0 0 12px 12px; padding:10px 12px; border-top:1px solid #F1EFED;
}
.cvar b{font-size:12px; color:var(--ink)}
.cvar em{display:block; font-style:normal; font-size:10.5px; color:#98897c}
.notes{background:#fff; border-radius:12px; padding:12px; margin-top:10px; display:flex; flex-direction:column; gap:6px}
.notes__l{font-size:10px; font-weight:700; letter-spacing:.09em; color:#98897c}
.notes__v{
  font-size:12.5px; color:var(--body); border:1px solid var(--line-soft);
  border-radius:9px; padding:10px 11px; background:#FCFBFA;
}
.notes__p{font-size:10.5px; color:#B0A69D}
.summary{background:#fff; border-radius:12px; padding:12px; margin-top:10px; display:flex; flex-direction:column; gap:6px}
.summary span{display:flex; justify-content:space-between; font-size:12.5px}
.summary em{font-style:normal; color:var(--body)}
.summary b{color:var(--ink)}
.cartview__cta{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px}
.btn-wa,.btn-place{text-align:center; font-size:12.5px; font-weight:700; padding:11px; border-radius:100px; color:#fff}
.btn-wa{background:#22c55e}
.btn-place{background:linear-gradient(135deg,var(--brand-500),var(--brand)); box-shadow:0 10px 20px -12px rgba(194,65,12,.9)}

/* =================================================================
   FEATURES
================================================================= */
.feats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.feat{
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:22px 20px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.feat:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--peach-2)}
.feat h3{font-size:17.5px; margin:14px 0 0}
.feat p{font-size:15px; line-height:1.55}
.feat__ic{
  width:42px; height:42px; border-radius:12px; display:block; position:relative;
  background:var(--peach); border:1px solid var(--peach-2);
}
.feat__ic::before,.feat__ic::after{content:""; position:absolute}

/* icon glyphs — pure CSS */
.fi--link::before{left:11px; top:18px; width:20px; height:6px; border:2px solid var(--brand); border-radius:100px}
.fi--link::after{left:17px; top:14px; width:8px; height:14px; border:2px solid var(--brand); border-radius:100px; background:var(--peach)}
.fi--grid::before{left:11px; top:11px; width:8px; height:8px; background:var(--brand); border-radius:2px; box-shadow:12px 0 var(--brand-500), 0 12px var(--brand-500), 12px 12px var(--brand)}
.fi--cam::before{left:10px; top:14px; width:22px; height:15px; border:2px solid var(--brand); border-radius:4px}
.fi--cam::after{left:17px; top:18px; width:8px; height:8px; border:2px solid var(--brand-500); border-radius:50%}
.fi--tag::before{left:12px; top:12px; width:17px; height:17px; border:2px solid var(--brand); border-radius:3px; transform:rotate(45deg)}
.fi--tag::after{left:16px; top:16px; width:5px; height:5px; background:var(--brand-500); border-radius:50%}
.fi--list::before{left:12px; top:13px; width:6px; height:6px; background:var(--brand); border-radius:50%; box-shadow:0 7px var(--brand), 0 14px var(--brand)}
.fi--list::after{left:22px; top:15px; width:9px; height:2px; background:var(--brand-500); box-shadow:0 7px var(--brand-500), 0 14px var(--brand-500)}
.fi--swatch::before{left:10px; top:13px; width:11px; height:11px; border-radius:50%; background:var(--brand)}
.fi--swatch::after{left:19px; top:18px; width:11px; height:11px; border-radius:50%; background:var(--teal)}
.fi--box::before{left:11px; top:13px; width:20px; height:16px; border:2px solid var(--brand); border-radius:3px}
.fi--box::after{left:11px; top:19px; width:20px; height:2px; background:var(--brand-500)}
.fi--key::before{left:10px; top:15px; width:12px; height:12px; border:2px solid var(--brand); border-radius:50%}
.fi--key::after{left:21px; top:20px; width:11px; height:2px; background:var(--brand); box-shadow:-2px 4px 0 -1px var(--brand-500)}
.fi--edit::before{left:11px; top:23px; width:20px; height:2px; background:var(--brand)}
.fi--edit::after{left:16px; top:12px; width:11px; height:4px; background:var(--brand-500); transform:rotate(-45deg); border-radius:1px}
.fi--chart::before{left:12px; top:22px; width:4px; height:8px; background:var(--brand); box-shadow:6px -5px 0 0 var(--brand-500), 12px -10px 0 0 var(--brand)}
.fi--chart::after{left:12px; top:31px; width:19px; height:2px; background:var(--brand-500)}
.fi--users::before{left:12px; top:13px; width:9px; height:9px; border-radius:50%; background:var(--brand); box-shadow:10px 2px 0 -1px var(--teal)}
.fi--users::after{left:10px; top:24px; width:22px; height:8px; border-radius:6px 6px 3px 3px; background:var(--peach-2)}
.fi--doc::before{left:13px; top:11px; width:16px; height:20px; border:2px solid var(--brand); border-radius:3px}
.fi--doc::after{left:17px; top:17px; width:8px; height:2px; background:var(--brand-500); box-shadow:0 5px var(--brand-500)}

/* =================================================================
   BEFORE / AFTER
================================================================= */
.ba{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.ba__col{border-radius:var(--r-xl); padding:32px 30px 36px}
.ba__col--before{background:#F9F7F5; border:1px solid var(--line-soft)}
.ba__col--after{background:var(--green-bg); border:1px solid #bbf7d0}
.ba__t{display:block; font-size:14px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:20px}
.ba__col--before .ba__t{color:#8A7F75}
.ba__col--after .ba__t{color:var(--green)}
.ba ul{display:flex; flex-direction:column; gap:13px}
.ba li{position:relative; padding-left:32px; font-size:16.5px}
.ba__col--before li{color:#7A7169}
.ba__col--before li::before{
  content:""; position:absolute; left:2px; top:9px; width:14px; height:14px; border-radius:50%;
  background:#E7E2DD;
  background-image:linear-gradient(45deg,transparent 44%,#9a918a 44% 56%,transparent 56%),
                   linear-gradient(-45deg,transparent 44%,#9a918a 44% 56%,transparent 56%);
}
.ba__col--after li{color:#1f3d2b}
.ba__col--after li::before{
  content:""; position:absolute; left:0; top:6px; width:19px; height:19px; border-radius:50%;
  background:#fff; border:1.5px solid #86efac;
}
.ba__col--after li::after{
  content:""; position:absolute; left:5px; top:12px; width:8px; height:4px;
  border-left:2px solid var(--green); border-bottom:2px solid var(--green); transform:rotate(-45deg);
}

/* =================================================================
   PRICING
================================================================= */
.plans{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:start}
.plan{
  background:#241B16; border:1px solid rgba(255,255,255,.1); border-radius:var(--r-xl);
  padding:30px 26px 32px; display:flex; flex-direction:column; position:relative;
  transition:transform .18s ease, border-color .18s ease;
}
.plan:hover{transform:translateY(-4px); border-color:rgba(254,215,170,.4)}
.plan--pop{background:linear-gradient(170deg,#3a2117,#241B16 55%); border-color:var(--brand-500); box-shadow:0 30px 70px -40px rgba(245,73,0,.9)}
.plan--pop2{border-color:rgba(254,215,170,.35)}
.plan__flag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%); white-space:nowrap;
  background:var(--brand-600); color:#fff; font-size:11.5px; font-weight:700;
  letter-spacing:.04em; padding:5px 14px; border-radius:100px;
  box-shadow:0 10px 20px -10px rgba(245,73,0,.9);
}
.plan__flag--alt{background:var(--peach-2); color:var(--rust)}
.plan__n{font-size:22px; color:#fff}
.plan__for{font-size:14px; color:#A8988C; margin-top:5px; min-height:42px; line-height:1.45}
.plan__p{margin:16px 0 22px; display:flex; align-items:baseline; gap:7px}
.plan__p b{font-size:38px; color:#fff; letter-spacing:-.03em; line-height:1}
.plan__p span{font-size:14px; color:#A8988C}
.plan__f{display:flex; flex-direction:column; gap:10px; margin-bottom:26px; flex:1}
.plan__f li{position:relative; padding-left:26px; font-size:15px; color:#D6C9BE}
.plan__f li b{color:#fff}
.plan__f li::before{
  content:""; position:absolute; left:0; top:8px; width:14px; height:14px; border-radius:50%;
  background:rgba(134,239,172,.16);
}
.plan__f li::after{
  content:""; position:absolute; left:4px; top:12px; width:7px; height:3.5px;
  border-left:2px solid #86efac; border-bottom:2px solid #86efac; transform:rotate(-45deg);
}
.plan__f li.no{color:#7C6C61}
.plan__f li.no::before{background:rgba(255,255,255,.08)}
.plan__f li.no::after{
  left:4.5px; top:13px; width:7px; height:0; border-left:0;
  border-bottom:2px solid #7C6C61; transform:none;
}
.plan .btn--outline{color:#fff; border-color:rgba(255,255,255,.28)}
.plan .btn--outline:hover{background:var(--brand); border-color:var(--brand); color:#fff}
.plan__note{display:block; text-align:center; font-size:12px; color:#8A7A6E; margin-top:11px}

/* Advanced plan — talk to us instead of a feature list */
.plan--talk{border-color:rgba(134,239,172,.3)}
.plan--talk:hover{border-color:rgba(134,239,172,.55)}
.plan__talkbox{
  flex:1; display:flex; flex-direction:column; gap:9px; margin-bottom:26px;
  background:rgba(22,101,52,.16); border:1px solid rgba(134,239,172,.22);
  border-radius:var(--r); padding:18px 18px 20px;
}
.plan__talkbox b{color:#fff; font-size:16.5px; line-height:1.3}
.plan__talkbox p{font-size:14.5px; color:#C7B9AD; line-height:1.55}

/* ---------- after payment ---------- */
.afterpay{
  margin-top:46px; background:linear-gradient(135deg,rgba(22,101,52,.22),rgba(13,148,136,.14));
  border:1px solid rgba(134,239,172,.28); border-radius:var(--r-xl); padding:36px 34px 34px; text-align:center;
}
.afterpay__t{display:block; font-size:clamp(20px,2.4vw,26px); color:#fff; letter-spacing:-.02em; margin-bottom:26px}
.afterpay__steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px; text-align:left; margin-bottom:28px;
}
.apstep{
  background:rgba(0,0,0,.24); border:1px solid rgba(255,255,255,.1); border-radius:var(--r);
  padding:18px 20px; display:flex; flex-direction:column; gap:4px; position:relative;
}
.apstep i{
  font-style:normal; width:27px; height:27px; border-radius:50%; background:var(--brand-600); color:#fff;
  display:grid; place-items:center; font-size:13.5px; font-weight:700; margin-bottom:6px;
}
.apstep b{color:#fff; font-size:16.5px}
.apstep em{font-style:normal; font-size:14.5px; color:#B9A99B; line-height:1.5}
.afterpay__fine{margin-top:16px; font-size:13.5px; color:#9C8D82}

/* ---------- comparison table ---------- */
.tablewrap{margin-top:56px}
.tbl__h{font-size:22px; color:#fff; margin-bottom:18px}
.tbl__scroll{overflow-x:auto; border:1px solid rgba(255,255,255,.12); border-radius:var(--r-lg); background:rgba(0,0,0,.2)}
.tbl{min-width:760px; font-size:15px}
.tbl th,.tbl td{padding:14px 18px; text-align:center; border-bottom:1px solid rgba(255,255,255,.08)}
.tbl thead th{
  background:rgba(255,255,255,.05); color:#fff; font-size:15px; letter-spacing:.02em;
  position:sticky; top:0;
}
.tbl tbody th{text-align:left; color:#E4D9CF; font-weight:500; max-width:330px}
.tbl tbody th b{color:#fff}
.tbl__sub{display:block; font-style:normal; font-size:12.5px; color:#9C8D82; margin-top:4px; line-height:1.5}
.tbl td{color:#D6C9BE}
.tbl td b{color:#fff; font-size:17px}
.tbl .is-pop{background:rgba(245,73,0,.08)}
.tbl thead .is-pop{background:rgba(245,73,0,.18)}
.tbl .y{color:#86efac; font-weight:500}
.tbl .n{color:#7C6C61}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}

/* Advanced column — one merged "talk to us" cell instead of limits */
.tbl .is-talk{
  vertical-align:middle; padding:18px 20px;
  background:linear-gradient(180deg, rgba(22,101,52,.22), rgba(13,148,136,.12));
  border-left:1px solid rgba(134,239,172,.22);
}
.talkcell{display:flex; flex-direction:column; align-items:center; gap:7px}
.talkcell b{color:#fff; font-size:21px; letter-spacing:-.02em}
.talkcell em{font-style:normal; font-size:13.5px; color:#B9A99B; line-height:1.45}
.talkcell__btn{
  margin-top:6px; background:#16a34a; color:#fff; font-weight:700; font-size:14px;
  padding:11px 20px; border-radius:100px; white-space:nowrap;
  transition:background .16s ease, transform .16s ease;
}
.talkcell__btn:hover{background:#15803d; transform:translateY(-2px)}

/* ---------- add-ons ---------- */
.addons{margin-top:52px}
.addons__sub{font-size:16px; color:#B9A99B; margin-top:-8px; margin-bottom:20px; max-width:620px}
.addons__grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.addon{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r); padding:18px 18px 20px; display:flex; flex-direction:column; gap:3px;
}
.addon b{color:#fff; font-size:15.5px; line-height:1.3}
.addon span{font-size:13.5px; color:#A8988C}
.addon em{font-style:normal; font-size:17px; font-weight:700; color:var(--peach-2); margin-top:8px}
.addons__fine{margin-top:18px; font-size:13.5px; color:#9C8D82}

/* =================================================================
   FAQ
================================================================= */
.faq{display:flex; flex-direction:column; gap:12px}
.q{
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--r);
  padding:4px 22px; transition:border-color .18s ease, box-shadow .18s ease;
}
.q[open]{border-color:var(--peach-2); box-shadow:var(--sh-1); background:var(--cream)}
.q summary{
  cursor:pointer; list-style:none; padding:16px 34px 16px 0; position:relative;
  font-size:17.5px; font-weight:700; color:var(--ink); letter-spacing:-.015em;
}
.q summary::-webkit-details-marker{display:none}
.q summary::after{
  content:""; position:absolute; right:2px; top:23px; width:10px; height:10px;
  border-right:2.2px solid var(--brand); border-bottom:2.2px solid var(--brand);
  transform:rotate(45deg); transition:transform .2s ease;
}
.q[open] summary::after{transform:rotate(-135deg); top:27px}
.q p{padding:0 0 18px; font-size:16.5px; max-width:64ch}

/* =================================================================
   FINAL CTA
================================================================= */
.cta{
  background:
    radial-gradient(700px 400px at 20% 0%, rgba(249,115,22,.35), transparent 65%),
    linear-gradient(135deg,var(--rust),var(--brand) 55%,var(--brand-600));
  color:#FFE9D8; padding:96px 0 100px; text-align:center;
}
.cta__kick{
  display:inline-block; background:rgba(255,255,255,.16); color:#fff;
  font-size:13.5px; font-weight:700; letter-spacing:.06em;
  padding:7px 16px; border-radius:100px; margin-bottom:22px;
}
.cta h2{color:#fff; font-size:clamp(31px,4.4vw,48px)}
.cta p{margin:20px auto 0; font-size:18.5px; max-width:620px; color:#FFE0C9}
.cta__btns{display:flex; flex-wrap:wrap; gap:13px; justify-content:center; margin-top:34px}
.cta__fine{font-size:14.5px !important; color:rgba(255,255,255,.7) !important; margin-top:22px !important}

/* =================================================================
   FOOTER
================================================================= */
.foot{background:var(--dark); color:#A8988C; padding:64px 0 0; font-size:15px}
.foot__in{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:34px; padding-bottom:48px}
.foot__brand p{margin-top:14px; max-width:320px; line-height:1.6}
.foot__nav,.foot__contact{display:flex; flex-direction:column; gap:10px}
.foot__nav b,.foot__contact b{color:#fff; font-size:15px; margin-bottom:2px}
.foot__nav a,.foot__contact a{color:#A8988C; transition:color .16s ease}
.foot__nav a:hover,.foot__contact a:hover{color:var(--peach-2)}
.foot__contact span{font-size:14px; color:#7C6C61}
.foot__base{
  border-top:1px solid rgba(255,255,255,.1); padding:22px;
  display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:center;
  font-size:13.5px; color:#7C6C61; text-align:center;
}

/* =================================================================
   RESPONSIVE
================================================================= */
@media (max-width:1080px){
  .feats{grid-template-columns:repeat(2,1fr)}
  .plans{grid-template-columns:repeat(2,1fr); gap:26px 18px}
  .addons__grid{grid-template-columns:repeat(3,1fr)}
  .pains{grid-template-columns:repeat(2,1fr)}
  .nav__links{display:none}
}
@media (max-width:920px){
  .hero__in{grid-template-columns:1fr; gap:52px; padding-top:56px; text-align:left}
  .hero__copy h1{font-size:clamp(34px,8vw,46px)}
  .hl{white-space:normal}
  .float--a{left:-2%; top:6%}
  .float--b{right:-2%; bottom:10%}
  .strip__in{grid-template-columns:repeat(2,1fr); gap:20px}
  .strip__i:nth-child(3){border-left:0; padding-left:0}
  .step,.twoup,.ba{grid-template-columns:1fr; gap:34px}
  .step--flip .step__copy{order:0}
  .foot__in{grid-template-columns:1fr 1fr; gap:28px}
}
@media (max-width:640px){
  body{font-size:16px}
  .sec{padding:72px 0}
  .wrap{padding-inline:18px}
  .hero__in{padding:44px 18px 72px}
  .sechead{margin-bottom:38px}
  .sechead .sub{font-size:17px}
  .pains,.plans,.addons__grid,.afterpay__steps,.ordview__stats,.cartview__cta{grid-template-columns:1fr}
  .feats{grid-template-columns:repeat(2,1fr); gap:12px}
  .feat{padding:16px 14px}
  .feat h3{font-size:15px; margin-top:10px}
  .strip__in{grid-template-columns:1fr}
  .strip__i{border-left:0; padding-left:0}
  .float{display:none}
  .phone{width:300px}
  .phone--sm{width:292px}
  .dash{grid-template-columns:1fr}
  .dash__side{flex-direction:row; flex-wrap:wrap; gap:6px; padding:10px}
  .dash__brand{width:100%; margin-bottom:4px}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .dash__row{grid-template-columns:1fr}
  .prow{grid-template-columns:1.6fr .9fr .9fr; font-size:11.5px}
  .prow span:nth-child(3),.prow span:nth-child(5){display:none}
  .prow--head span:nth-child(3),.prow--head span:nth-child(5){display:none}
  .btn{width:100%}
  .nav__cta{gap:8px}
  .nav__cta .btn{width:auto; padding:9px 13px; font-size:13.5px; gap:6px}
  .nav__cta .btn--ghost{display:inline-flex}
  .hero__btns,.cta__btns{flex-direction:column}
  .ba__col,.afterpay{padding:26px 22px 30px}
  .foot__in{grid-template-columns:1fr; gap:26px}
  .q summary{font-size:16.5px}
}

@media (max-width:430px){
  .brand__name{display:none}
  .nav__cta .btn{padding:9px 11px; font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .btn:hover,.pain:hover,.feat:hover,.plan:hover{transform:none}
}