/* Listing Desk home page: dark, one warm orange accent, glass surfaces, glowing device frames.
   Loads after site.css and only styles body.home. The page commits to one dark look, so the
   site.css tokens are redefined on body.home and every shared component (FAQ, pricing
   calculator, Etsy table) follows them. Blue marks active states, green marks data only.
   Contrast: --dim on --bg 8.6:1, --ink-on-accent (#140B05) on --accent 7.9:1. */
body.home{
  --bg:#080912; --bg-2:#0C0E1B; --bg-3:#111427;
  --surface:#12152A; --surface-2:#171A31; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --text:#F5F3FA; --dim:#A8A4BE; --mute:#77738F;
  --accent:#FF6B3D; --accent-2:#FF9A4D; --accent-ink:#140B05; --accent-soft:rgba(255,107,61,.14);
  --blue:#7B93FF; --blue-soft:rgba(123,147,255,.14); --green:#45D69B; --green-soft:rgba(69,214,155,.13);
  --glass:rgba(255,255,255,.035); --glass-2:rgba(255,255,255,.06);
  /* site.css tokens, so shared components read dark */
  --coral:#FF6B3D; --coral-ink:#FF8A5F; --coral-soft:rgba(255,107,61,.14); --coral-line:rgba(255,107,61,.35);
  --amber:#FFB547; --amber-soft:rgba(255,181,71,.12); --amber-ink:#FFC870;
  --btn:#FF6B3D; --btn-hover:#FF8455; --btn-ink:#140B05;
  --pos:#45D69B; --pos-dot:#45D69B; --pos-soft:rgba(69,214,155,.13);
  --ink:#05060D; --on-dark:#F5F3FA; --on-dark-dim:#A8A4BE; --ring:#FF8A5F;
  --shadow-sm:none; --shadow:0 24px 60px -30px rgba(0,0,0,.8); --shadow-lg:0 40px 90px -40px rgba(0,0,0,.9);
  --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
  --hx-sans:"Figtree", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color-scheme:dark;
  background:var(--bg); color:var(--text); font-family:var(--hx-sans);
}
.home h1, .home h2, .home h3{ font-family:var(--hx-sans); text-wrap:balance; }
.home p{ text-wrap:pretty; }
.home a{ color:var(--coral-ink); }
.home a:hover{ color:var(--text); }
.home .hl{ background:linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.home .wrap{ max-width:1180px; }

/* ---------- buttons: orange pills with a glow ---------- */
.home .btn{ border-radius:999px; background:linear-gradient(180deg, #FF7A4C, #FF5F2E); color:var(--accent-ink); font-family:var(--hx-sans); font-weight:700; border:0; box-shadow:0 0 0 1px rgba(255,140,90,.45) inset, 0 10px 30px -8px rgba(255,107,61,.55); transition:box-shadow .2s, transform .2s, background .2s; }
.home .btn:hover{ color:var(--accent-ink); transform:translateY(-1px); box-shadow:0 0 0 1px rgba(255,160,110,.6) inset, 0 14px 40px -6px rgba(255,107,61,.8); background:linear-gradient(180deg, #FF8857, #FF6533); }
.home .btn.ghost{ background:var(--glass); color:var(--text); box-shadow:0 0 0 1px var(--line-2) inset; }
.home .btn.ghost:hover{ background:var(--glass-2); color:var(--text); box-shadow:0 0 0 1px rgba(255,255,255,.3) inset; }
.home .cta-note{ color:var(--mute); font-weight:500; }

/* ---------- scroll progress + floating glass nav ---------- */
.hx-progress{ position:fixed; left:0; top:0; height:2px; width:100%; z-index:40; background:linear-gradient(90deg, var(--blue), #A5B4FF); transform-origin:left; transform:scaleX(0); pointer-events:none; }
.home header.top{ background:transparent; border:0; -webkit-backdrop-filter:none; backdrop-filter:none; padding-top:12px; }
.home header.top .top-in{ height:64px; max-width:1180px; padding:0 10px 0 20px; border-radius:999px; border:1px solid transparent; transition:max-width .45s var(--ease-out), background .3s, border-color .3s, box-shadow .3s; }
.home header.top.scrolled .top-in{ max-width:960px; background:rgba(14,16,32,.72); border-color:var(--line-2); -webkit-backdrop-filter:saturate(1.4) blur(16px); backdrop-filter:saturate(1.4) blur(16px); box-shadow:0 20px 40px -20px rgba(0,0,0,.7); }
.home header.top nav a, .home .fnav summary{ color:var(--dim); }
.home header.top nav a:hover, .home .fnav summary:hover, .home .fnav[open] summary{ background:var(--glass-2); color:var(--text); }
.home header.top nav a.hx-login{ color:var(--text); }
.home header.top nav a.btn{ color:var(--accent-ink); padding:10px 18px; }
.home header.top nav a.btn:hover{ color:var(--accent-ink); background:linear-gradient(180deg, #FF8857, #FF6533); }
.home .brand{ color:var(--text); font-family:var(--hx-sans); letter-spacing:-.02em; }
.home .fnav-panel, .home .mnav-panel{ background:#12152A; border-color:var(--line-2); }
.home .mnav summary{ border-color:var(--line-2); }
.home .mnav summary:hover, .home .mnav[open] summary{ background:var(--glass-2); border-color:var(--text); }
.home header.top nav .fnav-panel small{ color:var(--mute); }

/* ---------- labels ---------- */
.hx-eyebrow{ display:inline-flex; align-items:center; gap:10px; margin:0 0 18px; font:700 13px/1.2 var(--hx-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.hx-eyebrow::before{ content:""; width:18px; height:2px; border-radius:2px; background:currentColor; }
.hx-num{ display:flex; align-items:center; gap:12px; margin:0 0 16px; font:700 13px/1.2 var(--hx-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }
.hx-num b{ color:var(--blue); font-weight:800; }
.hx-sec{ position:relative; padding:120px 0; }
.hx-head{ max-width:760px; margin:0 0 56px; }
.hx-head.c{ margin-inline:auto; text-align:center; }
.hx-head h2, .hx-h2{ font-size:clamp(32px, 4.2vw, 46px); line-height:1.08; letter-spacing:-.03em; font-weight:700; margin:0 0 16px; }
.hx-head p{ margin:0; color:var(--dim); font-size:18.5px; line-height:1.6; }
.hx-head p b, .hx-txt p b{ color:var(--text); font-weight:600; }

/* ---------- hero ---------- */
.hx-hero{ position:relative; padding:96px 0 40px; text-align:center; overflow:hidden; isolation:isolate; }
.hx-hero::before{ content:""; position:absolute; inset:-200px -10% auto; height:900px; z-index:-2; background:radial-gradient(42% 46% at 50% 30%, rgba(255,107,61,.22), transparent 70%), radial-gradient(30% 40% at 18% 70%, rgba(123,147,255,.16), transparent 70%), radial-gradient(28% 36% at 84% 64%, rgba(255,154,77,.12), transparent 70%); }
.hx-rings{ position:absolute; left:50%; top:210px; width:1100px; height:1100px; transform:translate(-50%, -50%); z-index:-1; pointer-events:none; background:repeating-radial-gradient(circle, rgba(255,255,255,.05) 0 1px, transparent 1px 90px); -webkit-mask-image:radial-gradient(circle, #000 0 30%, transparent 62%); mask-image:radial-gradient(circle, #000 0 30%, transparent 62%); }
.hx-hero h1{ font-size:clamp(42px, 6.2vw, 74px); line-height:1.02; letter-spacing:-.04em; font-weight:700; margin:0 auto 22px; max-width:900px; }
.hx-lead{ margin:0 auto 34px; max-width:640px; font-size:19.5px; line-height:1.6; color:var(--dim); }
.hx-cta{ justify-content:center; }
.hx-cta .cta-note{ text-align:center; }
.hx-stage{ position:relative; max-width:1080px; margin:64px auto 0; }

/* device frame: a thick rounded bezel with a halo, a mini browser window inside */
.dv{ position:relative; padding:12px; border-radius:28px; background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02)); box-shadow:0 0 0 1px var(--line-2) inset, 0 50px 100px -40px rgba(0,0,0,.9); isolation:isolate; }
.dv::before{ content:""; position:absolute; inset:-40px; z-index:-1; border-radius:60px; background:radial-gradient(60% 60% at 50% 50%, rgba(123,147,255,.28), transparent 70%); filter:blur(10px); }
.dv.warm::before{ background:radial-gradient(60% 60% at 50% 50%, rgba(255,120,60,.26), transparent 70%); }
.dv-win{ border-radius:18px; overflow:hidden; background:var(--bg-2); box-shadow:0 0 0 1px var(--line) inset; text-align:left; }
.dv-bar{ display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.025); }
.dv-bar i{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.14); }
.dv-bar span{ margin-left:8px; padding:4px 12px; border-radius:999px; background:rgba(255,255,255,.05); font:600 12px/1.2 var(--hx-sans); color:var(--mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dv-bar em{ margin-left:auto; font:700 11px/1 var(--hx-sans); font-style:normal; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); padding:5px 9px; border-radius:999px; border:1px solid var(--line); white-space:nowrap; }
.dv-shot{ display:block; width:100%; height:auto; }

/* floating cards over the hero frame */
.fl{ position:absolute; z-index:2; display:flex; align-items:center; gap:12px; padding:12px 16px 12px 12px; border-radius:16px; text-align:left; background:rgba(18,21,42,.86); border:1px solid var(--line-2); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 24px 50px -20px rgba(0,0,0,.8); }
.fl b{ display:block; font-size:14px; line-height:1.25; }
.fl small{ display:block; font-size:12.5px; color:var(--dim); line-height:1.3; margin-top:2px; }
.fl .ic{ flex:0 0 36px; width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; }
.fl .ic svg{ width:18px; height:18px; }
.fl.a{ right:-28px; top:16%; } .fl.a .ic{ background:var(--green-soft); color:var(--green); }
.fl.b{ left:-34px; bottom:12%; } .fl.b .ic{ background:var(--accent-soft); color:var(--accent); }

/* ---------- "made for" row ---------- */
.hx-for{ padding:28px 0 0; }
.hx-for .wrap{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px 34px; color:var(--mute); }
.hx-for span{ font:700 12.5px/1 var(--hx-sans); letter-spacing:.14em; text-transform:uppercase; }
.hx-for b{ font-size:17px; font-weight:700; color:var(--dim); letter-spacing:-.01em; }

/* ---------- how it works: 3 cards joined by dotted lines ---------- */
.hx-band{ background:linear-gradient(180deg, var(--bg-2), var(--bg-3)); border-block:1px solid var(--line); }
.hx-steps{ position:relative; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:40px; counter-reset:s; }
.hx-steps::before{ content:""; position:absolute; left:16%; right:16%; top:96px; border-top:2px dotted rgba(255,107,61,.45); z-index:0; }
.hx-steps li{ position:relative; z-index:1; counter-increment:s; padding:8px; border-radius:22px; background:var(--glass); border:1px solid var(--line); }
.hx-steps li:nth-child(2){ margin-top:36px; } .hx-steps li:nth-child(3){ margin-top:12px; }
.hx-steps .in{ height:100%; padding:26px 24px 28px; border-radius:16px; border:1px dashed rgba(255,255,255,.12); background:var(--bg-2); }
.hx-steps .ic{ display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:14px; background:var(--accent-soft); color:var(--accent); margin:0 0 18px; }
.hx-steps .ic svg{ width:22px; height:22px; }
.hx-steps h3{ font-size:20px; margin:0 0 8px; letter-spacing:-.015em; }
.hx-steps h3::before{ content:"0" counter(s) "  "; color:var(--mute); font-weight:600; white-space:pre; }
.hx-steps p{ margin:0; color:var(--dim); font-size:15.5px; line-height:1.6; }
.hx-after{ margin:44px auto 0; text-align:center; color:var(--dim); font-size:16px; max-width:640px; }
.hx-after b{ color:var(--text); }

/* ---------- CTA strip ---------- */
.hx-strip{ border-block:1px solid var(--line); background:linear-gradient(90deg, rgba(123,147,255,.10), rgba(160,120,255,.08), rgba(123,147,255,.10)); }
.hx-strip .wrap{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:18px 28px; padding-block:30px; }
.hx-strip p{ margin:0; font-size:22px; font-weight:700; letter-spacing:-.02em; }

/* ---------- feature rows (zig-zag) ---------- */
.hx-row{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:72px; align-items:center; padding:56px 0; }
.hx-row.flip .hx-txt{ order:2; }
.hx-txt h3{ font-size:clamp(28px, 3vw, 38px); line-height:1.1; letter-spacing:-.03em; font-weight:700; margin:0 0 16px; }
.hx-txt > p{ margin:0 0 22px; color:var(--dim); font-size:17.5px; line-height:1.65; max-width:500px; }
.hx-ticks{ list-style:none; margin:0 0 26px; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.hx-ticks li{ display:inline-flex; align-items:center; gap:8px; padding:7px 13px 7px 9px; border-radius:999px; background:var(--glass); border:1px solid var(--line); font-size:14px; font-weight:600; color:var(--text); }
.hx-ticks li::before{ content:""; width:16px; height:16px; border-radius:50%; background:var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345D69B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8.5'/%3E%3C/svg%3E") center/11px no-repeat; }
.hx-link{ display:inline-flex; align-items:center; gap:8px; font-weight:700; text-decoration:none; color:var(--accent) !important; }
.hx-link:hover{ color:var(--accent-2) !important; }
.hx-link svg{ width:16px; height:16px; transition:transform .2s; }
.hx-link:hover svg{ transform:translateX(3px); }

/* mock UI pieces inside the frames (real listing data from the demo shop) */
.mk{ padding:22px; font-size:13.5px; color:var(--text); min-height:340px; }
.mk-l{ display:block; margin:0 0 7px; font:700 11px/1 var(--hx-sans); letter-spacing:.1em; text-transform:uppercase; color:var(--mute); }
.mk-box{ border-radius:12px; border:1px solid var(--line-2); background:rgba(255,255,255,.03); padding:11px 13px; line-height:1.5; }
.mk-box.on{ border-color:rgba(255,107,61,.6); box-shadow:0 0 0 3px rgba(255,107,61,.14); }
.mk-gap{ height:16px; }
.mk-ed{ display:grid; grid-template-columns:116px minmax(0,1fr); gap:18px; }
.mk-ed > img{ width:116px; height:auto; aspect-ratio:9/16; object-fit:cover; border-radius:12px; border:1px solid var(--line); }
.mk-title{ min-height:4.5em; font-weight:600; }
.caret{ display:inline-block; width:2px; height:1.05em; margin-left:1px; vertical-align:-2px; background:var(--accent); opacity:0; }
.typing .caret{ opacity:1; }
.mk-tags{ display:flex; flex-wrap:wrap; gap:6px; min-height:64px; align-content:flex-start; }
.mk-tags span{ padding:4px 9px; border-radius:999px; background:var(--glass-2); border:1px solid var(--line); font-size:12px; white-space:nowrap; transition:opacity .35s var(--ease-out), transform .45s var(--ease-out); }
.mk-tags span.off{ opacity:0; transform:translateY(6px) scale(.92); }
.mk-score{ display:flex; align-items:center; gap:12px; margin-top:16px; padding:10px 12px; border-radius:12px; background:var(--green-soft); border:1px solid rgba(69,214,155,.25); }
.mk-score b{ font-size:22px; color:var(--green); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.mk-score b small{ font-size:13px; color:rgba(69,214,155,.7); font-weight:700; }
.mk-score span{ color:var(--dim); font-size:13px; }
.mk-bar{ position:relative; height:6px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden; }
.mk-bar i{ position:absolute; inset:0; border-radius:99px; background:linear-gradient(90deg, var(--blue), #A5B4FF); transform-origin:left; }
.mk-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 14px; }
.mk-head b{ font-size:15px; }
.mk-head small{ color:var(--dim); font-size:12.5px; }
.mk-pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; font:700 11px/1 var(--hx-sans); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; transition:background .3s, color .3s; }
.mk-pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.mk-pill.grey{ background:rgba(255,255,255,.06); color:var(--dim); }
.mk-pill.blue{ background:var(--blue-soft); color:var(--blue); }
.mk-pill.green{ background:var(--green-soft); color:var(--green); }
.mk-pill.orange{ background:var(--accent-soft); color:var(--accent-2); }
.mk-btn{ display:inline-flex; align-items:center; padding:7px 13px; border-radius:999px; background:var(--accent); color:var(--accent-ink); font-weight:700; font-size:12.5px; white-space:nowrap; transition:transform .2s, box-shadow .2s; }
.mk-btn.press{ transform:scale(.95); box-shadow:0 0 0 4px rgba(255,107,61,.25); }
/* mockups grid */
.mk-mocks{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:18px; }
.mk-src{ display:grid; gap:8px; align-content:start; }
.mk-src img{ width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; border-radius:12px; border:1px solid var(--line); }
.mk-src small{ color:var(--mute); font-size:12px; text-align:center; }
.mk-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.mk-cell{ position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden; background:rgba(255,255,255,.05); }
.mk-cell::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%); background-size:220% 100%; opacity:0; }
.mk-cell.wait::after{ opacity:1; animation:mk-shine 1.2s linear infinite; }
@keyframes mk-shine{ from{ background-position:120% 0; } to{ background-position:-120% 0; } }
.mk-cell img{ width:100%; height:100%; object-fit:cover; display:block; transition:opacity .5s var(--ease-out), filter .6s var(--ease-out), transform .6s var(--ease-out); }
.mk-cell.wait img{ opacity:0; filter:blur(12px) saturate(.6); transform:scale(1.04); }
.mk-foot{ display:flex; align-items:center; gap:12px; margin-top:14px; color:var(--dim); font-size:13px; }
.mk-foot .mk-bar{ flex:1; }
/* send + orders lists */
.mk-rows{ display:grid; gap:8px; }
.mk-row{ display:grid; grid-template-columns:18px 40px minmax(0,1fr) auto; align-items:center; gap:12px; padding:9px 12px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid var(--line); }
.mk-row img{ width:40px; height:40px; border-radius:8px; object-fit:cover; }
.mk-row .t{ min-width:0; }
.mk-row .t b{ display:block; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk-row .t small{ display:block; color:var(--mute); font-size:11.5px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk-check{ width:16px; height:16px; border-radius:5px; background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23140B05' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8.5'/%3E%3C/svg%3E") center/12px no-repeat; }
.mk-stats{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin:0 0 14px; }
.mk-stats div{ padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid var(--line); }
.mk-stats small{ display:block; font:700 10.5px/1 var(--hx-sans); letter-spacing:.1em; text-transform:uppercase; color:var(--mute); }
.mk-stats b{ display:block; margin-top:6px; font-size:22px; font-variant-numeric:tabular-nums; }
.mk-ord{ grid-template-columns:40px minmax(0,1fr) auto; transition:opacity .45s var(--ease-out), transform .55s var(--ease-out); }
.mk-ord.off{ opacity:0; transform:translateY(-10px); }
.mk-ord .price{ font-weight:700; font-size:13px; margin-right:4px; color:var(--text); }
.mk-right{ display:flex; align-items:center; gap:8px; }

/* ---------- teams (warm band) ---------- */
.hx-warm{ background:radial-gradient(70% 90% at 0% 50%, rgba(255,107,61,.12), transparent 70%), linear-gradient(180deg, #120D12, #0E0B12); border-block:1px solid rgba(255,140,90,.18); }
.hx-team{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:72px; align-items:center; }
.hx-team .hx-txt > p{ max-width:520px; }
.mk-appr .mk-row{ grid-template-columns:40px minmax(0,1fr) auto; }
.mk-who{ display:flex; align-items:center; gap:10px; margin:0 0 14px; color:var(--dim); font-size:13px; }
.mk-av{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font:800 12px/1 var(--hx-sans); background:linear-gradient(135deg, #7B93FF, #A78BFA); color:#0B0D1C; }

/* ---------- feature grid ---------- */
.hx-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
.gc{ display:flex; flex-direction:column; border-radius:22px; background:var(--glass); border:1px solid var(--line); overflow:hidden; transition:border-color .25s, transform .25s; }
.gc:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.gc-ui{ height:150px; padding:18px; border-bottom:1px solid var(--line); background:radial-gradient(80% 100% at 50% 0%, rgba(123,147,255,.10), transparent 70%); display:flex; flex-direction:column; justify-content:center; gap:8px; font-size:12.5px; color:var(--dim); }
.gc-txt{ padding:20px 22px 24px; }
.gc-txt h3{ font-size:18px; margin:0 0 6px; letter-spacing:-.01em; }
.gc-txt p{ margin:0; color:var(--dim); font-size:14.5px; line-height:1.55; }
.gc-bars{ display:flex; align-items:flex-end; gap:10px; height:96px; padding:0 8px; }
.gc-bars i{ flex:1; border-radius:6px 6px 2px 2px; background:linear-gradient(180deg, rgba(69,214,155,.7), rgba(69,214,155,.15)); transform-origin:bottom; }
.gc-list{ display:grid; gap:7px; }
.gc-list span{ display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--text); }
.gc-list span::before{ content:""; width:14px; height:14px; border-radius:50%; background:var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345D69B' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8.5'/%3E%3C/svg%3E") center/10px no-repeat; }
.gc-search{ display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid var(--line-2); color:var(--text); }
.gc-search svg{ width:14px; height:14px; color:var(--mute); }
.gc-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.gc-chips span{ padding:4px 9px; border-radius:999px; font-size:11.5px; font-weight:700; }
.gc-chips span:nth-child(1){ background:var(--accent-soft); color:var(--accent-2); }
.gc-chips span:nth-child(2){ background:var(--green-soft); color:var(--green); }
.gc-chips span:nth-child(3){ background:var(--blue-soft); color:var(--blue); }
.gc-msg{ max-width:88%; padding:8px 11px; border-radius:14px; line-height:1.4; }
.gc-msg.in{ background:rgba(255,255,255,.06); color:var(--text); border-bottom-left-radius:4px; }
.gc-msg.out{ align-self:flex-end; background:var(--blue-soft); color:#C9D3FF; border-bottom-right-radius:4px; }
.gc-split{ display:grid; gap:7px; }
.gc-split div{ display:grid; grid-template-columns:70px 1fr; align-items:center; gap:10px; }
.gc-split i{ height:10px; border-radius:99px; display:block; }
.gc-tabs{ display:flex; gap:6px; }
.gc-tabs span{ padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.05); font-size:11.5px; font-weight:700; color:var(--dim); }
.gc-tabs span.on{ background:var(--accent-soft); color:var(--accent-2); }
.gc-lines{ display:grid; gap:7px; padding:4px 2px; }
.gc-lines i{ display:block; height:8px; border-radius:99px; background:rgba(255,255,255,.08); }

/* ---------- Etsy connection, pricing, FAQ on the dark page ---------- */
.home .connect li{ background:var(--glass); border-color:var(--line); }
.home .connect li::before{ background:var(--accent-soft); color:var(--accent); }
.home .connect li b{ font-family:var(--hx-sans); }
.home .table-card{ background:var(--glass); border-color:var(--line); }
.home table.data th{ background:rgba(255,255,255,.04); color:var(--dim); }
.home table.data td, .home table.data th{ border-color:var(--line); }
.home .card{ background:var(--glass); border-color:var(--line); }
.home .card h3{ font-family:var(--hx-sans); }
.home .notice-box{ background:var(--amber-soft); color:var(--text); }
.home .notice-box::before{ background:var(--amber); color:#140B05; }
.home h3.sub{ font-family:var(--hx-sans); }
.home .pc .pc-sum{ background:linear-gradient(180deg, #171A33, #10122A); border-color:var(--line-2); }
.home .pc-big, .home .pc-tier b, .home .pc-count input{ font-family:var(--hx-sans); }
.home .pc-count input{ background:rgba(255,255,255,.04); }
.home .pc-tier{ background:rgba(255,255,255,.03); }
.home .pc-trial-card{ background:var(--glass); }
.hx-faq{ max-width:820px; margin:0 auto; }
.home details.faq{ background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; margin:0; box-shadow:none; }
.home details.faq:first-of-type{ border-top:1px solid var(--line); }
.home details.faq summary{ font-family:var(--hx-sans); font-weight:600; font-size:17.5px; padding:22px 56px 22px 2px; }
.home details.faq summary::after{ background-color:var(--glass-2); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF8A5F' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E"); border-radius:50%; right:4px; }
.home details.faq .a{ padding:0 56px 22px 2px; }

/* ---------- final CTA card ---------- */
.hx-final{ position:relative; max-width:1040px; margin:0 auto; padding:84px 40px 76px; border-radius:32px; text-align:center; overflow:hidden; isolation:isolate; background:linear-gradient(#0D0F20, #0D0F20) padding-box, linear-gradient(135deg, rgba(255,107,61,.8), rgba(123,147,255,.7)) border-box; border:1.5px solid transparent; }
.hx-final::before{ content:""; position:absolute; left:50%; bottom:-260px; width:760px; height:420px; transform:translateX(-50%); z-index:-1; border-radius:50%; background:radial-gradient(circle, rgba(255,107,61,.38), transparent 68%); }
.hx-final h2{ font-size:clamp(32px, 4.4vw, 50px); line-height:1.06; letter-spacing:-.035em; margin:0 auto 16px; max-width:720px; font-weight:700; }
.hx-final p{ margin:0 auto 32px; max-width:560px; color:var(--dim); font-size:18.5px; }
.hx-final .cta-row{ justify-content:center; }
.hx-final .cta-note{ text-align:center; }

/* ---------- footer ---------- */
.home footer.site{ background:#05060D; border-top:1px solid var(--line); color:var(--dim); }
.home footer.site .foot-col h2{ font:700 12px/1 var(--hx-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }
.home footer.site a{ color:var(--dim); }
.home footer.site a:hover{ color:var(--text); }
.home footer.site .notice, .home footer.site .company{ color:var(--mute); border-color:var(--line); }

/* ---------- motion: added only by home.js, so the page is complete without it ---------- */
.motion [data-in]{ opacity:0; transform:translateY(26px); filter:blur(8px); }
.motion [data-in].in{ opacity:1; transform:none; filter:none; transition:opacity .8s var(--ease-out), transform .9s var(--ease-out), filter .8s var(--ease-out); }
.motion [data-in].in.dl1{ transition-delay:.08s; } .motion [data-in].in.dl2{ transition-delay:.16s; } .motion [data-in].in.dl3{ transition-delay:.24s; }
.motion .fl{ opacity:0; transform:translateY(14px) scale(.96); filter:blur(6px); }
.motion .fl.in{ opacity:1; transform:none; filter:none; transition:opacity .7s var(--ease-out), transform .8s var(--ease-out), filter .7s var(--ease-out); }
.motion .fl.in.float{ animation:fl-float 7s ease-in-out infinite; }
.motion .fl.b.in.float{ animation-delay:-3.5s; }
@keyframes fl-float{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
.motion .gc-bars i{ transform:scaleY(.15); }
.motion .gc.in .gc-bars i, .motion [data-in].in .gc-bars i{ transform:none; transition:transform 1s var(--ease-out); }
.motion .gc-bars i:nth-child(2){ transition-delay:.1s !important; } .motion .gc-bars i:nth-child(3){ transition-delay:.2s !important; } .motion .gc-bars i:nth-child(4){ transition-delay:.3s !important; }
@media (prefers-reduced-motion: reduce){
  .motion [data-in], .motion .fl, .motion .gc-bars i{ opacity:1 !important; transform:none !important; filter:none !important; animation:none !important; }
  .hx-progress{ display:none; }
}

/* ---------- smaller screens ---------- */
@media (max-width: 1100px){ .fl.a{ right:-8px; } .fl.b{ left:-8px; } }
@media (max-width: 900px){
  .hx-sec{ padding:84px 0; }
  .hx-row, .hx-team{ grid-template-columns:minmax(0,1fr); gap:36px; padding:36px 0; }
  .hx-row.flip .hx-txt{ order:0; }
  .hx-steps{ grid-template-columns:1fr; gap:18px; }
  .hx-steps::before{ display:none; }
  .hx-steps li:nth-child(n){ margin-top:0; }
  .hx-grid{ grid-template-columns:1fr 1fr; }
  .home header.top .top-in{ padding:0 8px 0 16px; }
  .home header.top.scrolled .top-in{ max-width:none; }
}
@media (max-width: 640px){
  .hx-hero{ padding:56px 0 24px; }
  .hx-lead{ font-size:17.5px; }
  .hx-grid{ grid-template-columns:1fr; }
  .hx-stage{ margin-top:40px; }
  .dv{ padding:6px; border-radius:18px; }
  .dv-win{ border-radius:13px; }
  .fl{ position:static; margin:12px auto 0; max-width:320px; }
  .mk{ padding:14px; min-height:0; }
  .mk-ed, .mk-mocks{ grid-template-columns:minmax(0,1fr); }
  .mk-ed > img{ display:none; }
  .mk-src{ grid-template-columns:64px 1fr; align-items:center; }
  .mk-src img{ width:64px; }
  .mk-row{ grid-template-columns:18px 34px minmax(0,1fr); }
  .mk-row img{ width:34px; height:34px; }
  .mk-row > .mk-pill, .mk-row > .mk-right{ grid-column:2 / -1; justify-self:start; }
  .mk-ord{ grid-template-columns:34px minmax(0,1fr); }
  .mk-ord > .mk-right{ grid-column:1 / -1; }
  .mk-appr .mk-row{ grid-template-columns:34px minmax(0,1fr); }
  .mk-appr .mk-row > .mk-pill{ grid-column:2; }
  .hx-strip p{ font-size:19px; text-align:center; }
  .hx-final{ padding:60px 20px 56px; border-radius:24px; }
  .home .hx-cta .btn, .home .hx-final .btn{ flex:1 1 auto; }
  .home header.top nav a.hx-login{ display:none; }
}
.mk-mocks > div, .mk-ed > div, .hx-txt, .dv{ min-width:0; }