/* ====================================================================
   MANUFAKTUR X STUDIO - PARTNER ACQUISITION LANDING
   Bright design system (Archivo / Hanken Grotesk). No em dashes.
   ==================================================================== */
:root{
  --white:#ffffff;
  --bg:#faf7f1;
  --surface:#fffdf9;
  --bg-soft:#f2eee5;
  --bg-band:#ece7dc;
  --navy:#0d1b2a;
  --navy-2:#13283f;
  --ink:#1b232c;
  --muted:#5a6470;
  --muted-light:rgba(247,244,238,.70);
  --accent:#ec5a1c;
  --accent-2:#ff7a3d;
  --accent-ink:#c2440b;
  --line:#e6e1d6;
  --line-strong:#d6cfbf;
  --ok:#0f9488;
  --err:#d1352b;
  --shadow-sm:0 1px 2px rgba(27,35,44,.05), 0 2px 6px rgba(27,35,44,.04);
  --shadow:0 2px 4px rgba(27,35,44,.05), 0 10px 24px rgba(27,35,44,.07);
  --shadow-lg:0 4px 10px rgba(27,35,44,.06), 0 18px 44px rgba(27,35,44,.10);
  --r:6px; --r-lg:10px; --r-xl:16px;
  --fh:'Archivo',system-ui,-apple-system,sans-serif;
  --fb:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--fb); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--fh); color:var(--ink); margin:0; line-height:1.06; letter-spacing:-.01em}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px}
@media(max-width:480px){ .wrap{padding:0 18px} }
.accent{color:var(--accent)}
.ital{font-style:italic}
::selection{background:var(--accent); color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible,.btn:focus-visible{outline:3px solid var(--accent-2); outline-offset:3px}

/* ---- eyebrow ---- */
.eyebrow{display:inline-flex; align-items:center; gap:10px; font-family:var(--fh); font-weight:700; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin:0 0 18px}
.eyebrow::before{content:""; width:28px; height:2px; background:var(--accent); display:inline-block}
.eyebrow.center{justify-content:center}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; font-family:var(--fh); font-weight:700; font-size:14px; letter-spacing:.05em; text-transform:uppercase; padding:15px 28px; border-radius:var(--r); border:1.5px solid var(--accent); background:var(--accent); color:#fff; transition:background .2s,border-color .2s,color .2s,transform .2s,box-shadow .2s; box-shadow:0 1px 2px rgba(27,35,44,.12)}
.btn:hover{background:var(--accent-ink); border-color:var(--accent-ink); transform:translateY(-1px); box-shadow:0 4px 12px rgba(27,35,44,.16)}
.btn .arrow{transition:transform .2s}
.btn:hover .arrow{transform:translateX(4px)}
.btn-sm{padding:11px 20px; font-size:13px}
.btn-lg{padding:17px 34px; font-size:15px}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-strong); box-shadow:none}
.btn-ghost:hover{background:transparent; color:var(--accent); border-color:var(--accent)}
.btn-block{width:100%}
.btn[disabled]{opacity:.6; cursor:not-allowed; transform:none}

/* ===================== HEADER ===================== */
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,253,249,.86); backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line); transition:box-shadow .25s}
.site-header.scrolled{box-shadow:0 6px 24px rgba(13,27,42,.08)}
.nav{display:flex; align-items:center; justify-content:space-between; min-height:66px; gap:24px}
.brand{font-family:var(--fh); font-weight:800; font-size:22px; letter-spacing:.02em; text-transform:uppercase; color:var(--navy); white-space:nowrap; display:inline-flex; align-items:baseline; gap:8px}
.brand .star{font-style:italic; color:var(--accent)}
.brand .sub{font-family:var(--fh); font-weight:700; font-size:12px; letter-spacing:.14em; color:var(--accent); text-transform:uppercase; align-self:center; padding:3px 8px; border:1px solid var(--line-strong); border-radius:40px}
.nav-right{display:flex; align-items:center; gap:14px}
.lang-switch{position:relative}
.lang-btn{display:inline-flex; align-items:center; gap:7px; font-family:var(--fh); font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); background:transparent; border:1px solid var(--line-strong); border-radius:40px; padding:8px 13px; cursor:pointer; transition:border-color .2s,color .2s}
.lang-btn:hover{border-color:var(--accent); color:var(--accent)}
.lang-btn svg{width:14px; height:14px}
.lang-menu{position:absolute; top:calc(100% + 8px); right:0; z-index:60; background:var(--surface); border:1px solid var(--line-strong); border-radius:14px; box-shadow:var(--shadow-lg); padding:6px; width:220px; max-height:340px; overflow:auto; display:none}
.lang-menu.open{display:block}
.lang-menu a{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; font-size:14px; font-weight:500; transition:background .15s,color .15s}
.lang-menu a:hover{background:var(--bg-soft); color:var(--accent)}
.lang-menu a.on{color:var(--accent); font-weight:700; background:rgba(236,90,28,.08)}
.lang-menu .fl{width:22px; text-align:center; font-size:15px}
@media(max-width:600px){ .nav{gap:12px} .nav-right .btn{display:none} }
@media(max-width:520px){ .hide-xs{display:none} .brand{font-size:19px} .brand .sub{display:none} }

/* ===================== INVITATION OFFER BANNER ===================== */
.offer-banner{position:relative; z-index:3; background:linear-gradient(100deg,#13283f 0%, #17324f 55%, #1b3a5c 100%); color:#fff; border-bottom:1px solid rgba(255,255,255,.10); box-shadow:0 8px 24px rgba(13,27,42,.22)}
.offer-inner{display:flex; align-items:center; justify-content:center; gap:16px; padding:14px 28px; text-align:center; flex-wrap:wrap}
.offer-check{flex:none; width:30px; height:30px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(236,90,28,.4)}
.offer-check svg{width:17px; height:17px; color:#fff}
.offer-text{margin:0; font-size:15px; line-height:1.5; color:rgba(255,255,255,.95)}
.offer-lead{font-family:var(--fh); font-weight:800; letter-spacing:.005em; color:#fff}
.offer-company{font-weight:700; color:#fff; border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:1px}
.offer-email{font-weight:700; color:#fff; border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:1px; white-space:nowrap}
/* Always on its own line so a long company name never crowds the "no credit
   card" clause (it wrapped mid-sentence for long agency names). */
.offer-sub{display:block; margin-top:3px; color:rgba(255,255,255,.82); font-weight:500}
@media(max-width:640px){ .offer-inner{gap:12px; padding:12px 18px} .offer-text{font-size:13.5px} .offer-sub{display:block} .offer-sub::before{display:none} }

/* ---- hero offer highlight ---- */
.hero-offer{display:inline-flex; flex-direction:column; align-items:flex-start; gap:7px; margin:0 0 26px; padding:12px 20px; background:rgba(19,40,63,.07); border:1px solid rgba(19,40,63,.20); border-radius:18px; font-size:14px; font-weight:600; color:var(--navy-2)}
.hero-offer .ho-main{display:inline-flex; align-items:center; gap:11px; flex-wrap:wrap}
.hero-offer .ho-badge{flex:none; font-family:var(--fh); font-weight:800; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--accent); padding:4px 10px; border-radius:40px}
.hero-offer .ho-invite{font-size:12.5px; font-weight:600; color:var(--muted); padding-left:1px}
.hero-offer .ho-company{font-weight:800; color:var(--navy-2)}
@media(max-width:480px){ .hero-offer{font-size:13px} .hero-offer .ho-invite{font-size:12px} }

/* ===================== HERO ===================== */
.hero{position:relative; overflow:hidden; background:radial-gradient(120% 90% at 88% 6%, rgba(236,90,28,.12), transparent 55%),linear-gradient(180deg,#fbfaf7 0%, #f3f0e9 100%); border-bottom:1px solid var(--line)}
.hero::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:46px 46px; mask-image:linear-gradient(180deg,rgba(0,0,0,.4),transparent 70%)}
.hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center; padding-top:72px; padding-bottom:76px}
.hero h1{font-size:clamp(24px,3.1vw,40px); font-weight:900; text-transform:uppercase; letter-spacing:-.015em; line-height:1.05; color:var(--navy)}
.hero h1 .accent{display:block}
.hero .lede{margin:20px 0 28px; font-size:clamp(15px,1.3vw,18px); color:var(--muted); max-width:52ch}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.hero-note{margin-top:18px; font-size:13.5px; color:var(--muted); display:flex; align-items:center; gap:9px}
.hero-note svg{width:17px; height:17px; color:var(--ok); flex:none}
.hero-visual{position:relative}
.hero-visual .frame{position:relative; background:linear-gradient(160deg,#ffffff,#f4f1ea); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); overflow:hidden; aspect-ratio:4/4.3}
.hero-visual .frame model-viewer{position:absolute; inset:0; width:100%; height:100%; display:block; background:transparent; --poster-color:transparent}
.hero-visual iframe{width:100%; height:100%; border:0; display:block; background:transparent}
.hero-visual .fallimg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-visual .vtag{position:absolute; left:16px; top:16px; z-index:3; display:inline-flex; align-items:center; gap:7px; background:var(--navy); color:#fff; font-family:var(--fh); font-weight:700; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; padding:7px 13px; border-radius:40px}
.hero-visual .vtag .dot{width:7px; height:7px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 0 0 rgba(255,122,61,.7); animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,122,61,.6)}70%{box-shadow:0 0 0 8px rgba(255,122,61,0)}100%{box-shadow:0 0 0 0 rgba(255,122,61,0)}}
.hero-visual .marginbadge{position:absolute; right:-30px; bottom:122px; z-index:6; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); padding:14px 18px; min-width:150px}
.hero-visual .marginbadge .mb-l{font-family:var(--fh); font-weight:700; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.hero-visual .marginbadge .mb-v{font-family:var(--fh); font-weight:900; font-size:26px; color:var(--navy); line-height:1.1}
.hero-visual .marginbadge .mb-v .accent{display:inline}

/* ---- hero product switcher ---- */
.hero-switch{position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:5; display:flex; flex-wrap:wrap; justify-content:center; gap:6px; width:calc(100% - 20px); max-width:calc(100% - 20px); padding:8px; border-radius:16px; background:rgba(13,27,42,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.1); box-shadow:0 10px 30px rgba(13,27,42,.28)}
.hero-switch .hs-pill{appearance:none; cursor:pointer; border:0; border-radius:11px; padding:9px 15px; font-family:var(--fh); font-weight:700; font-size:12.5px; letter-spacing:.01em; line-height:1; color:rgba(255,255,255,.72); background:transparent; transition:background .18s ease, color .18s ease, transform .12s ease; white-space:nowrap}
.hero-switch .hs-pill:hover{color:#fff; background:rgba(255,255,255,.1)}
.hero-switch .hs-pill:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px}
.hero-switch .hs-pill:active{transform:scale(.96)}
.hero-switch .hs-pill.is-active{color:#fff; background:var(--accent); box-shadow:0 4px 12px rgba(236,90,28,.4)}
.hero-switch .hs-pill.is-active:hover{background:var(--accent)}

@media(max-width:980px){ .hero .wrap{grid-template-columns:1fr; gap:34px; padding-top:44px; padding-bottom:48px} .hero-visual{order:-1; max-width:440px; margin:0 auto; width:100%} .hero-visual .marginbadge{right:-14px} }
@media(max-width:520px){
  .hero .wrap{padding-top:36px}
  .hero-switch{bottom:12px; gap:4px; padding:6px; width:calc(100% - 12px); max-width:calc(100% - 12px)}
  .hero-switch .hs-pill{padding:8px 10px; font-size:11px}
  /* badge would collide with the bottom switcher on a narrow frame - move it to the top-right corner */
  .hero-visual .marginbadge{right:10px; bottom:auto; top:52px; min-width:0; padding:11px 14px}
  .hero-visual .marginbadge .mb-v{font-size:23px}
}

/* ===================== TRUST STRIP ===================== */
.trust{background:var(--navy); color:var(--muted-light); border-bottom:1px solid rgba(255,255,255,.06)}
.trust .wrap{display:flex; align-items:center; justify-content:center; gap:14px 42px; flex-wrap:wrap; padding:22px 28px; text-align:center}
.trust .ti{display:inline-flex; align-items:center; gap:11px; font-size:14.5px}
.trust .ti b{font-family:var(--fh); color:#fff; font-weight:800}
.trust .ti svg{width:19px; height:19px; color:var(--accent); flex:none}
.trust .sep{width:1px; height:22px; background:rgba(255,255,255,.14)}
@media(max-width:700px){ .trust .sep{display:none} }

/* ===================== SECTION SHELL ===================== */
section.block{padding:96px 0}
.sec-head{max-width:720px; margin:0 auto 58px; text-align:center}
.sec-head h2{font-weight:900; font-size:clamp(24px,3vw,38px); text-transform:uppercase; color:var(--navy)}
.sec-head .lede{margin:16px auto 0; font-size:clamp(15px,1.2vw,18px); color:var(--muted); max-width:60ch}
.reveal{opacity:0; transform:translateY(22px)}
.reveal.in{opacity:1; transform:none; transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}

/* ===================== HOW IT WORKS ===================== */
.how{background:var(--bg)}
.how-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.how-card{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:38px 32px 34px; box-shadow:var(--shadow-sm); transition:transform .2s,box-shadow .2s,border-color .2s}
.how-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:#efe7d8}
.how-card .num{font-family:var(--fh); font-weight:900; font-size:15px; color:var(--accent); letter-spacing:.1em}
.how-card .ico{width:56px; height:56px; border-radius:14px; background:rgba(236,90,28,.10); color:var(--accent); display:flex; align-items:center; justify-content:center; margin:16px 0 20px}
.how-card .ico svg{width:28px; height:28px}
.how-card h3{font-family:var(--fh); font-weight:800; font-size:20px; text-transform:uppercase; color:var(--navy); margin-bottom:10px}
.how-card p{margin:0; color:var(--muted); font-size:15px; line-height:1.6}
.how-card .step-line{position:absolute; top:52px; right:-13px; z-index:2; color:var(--line-strong)}
.how-card:last-child .step-line{display:none}
.how-card .step-line svg{width:26px; height:26px}
@media(max-width:860px){ .how-grid{grid-template-columns:1fr} .how-card .step-line{display:none} }

/* ===================== BENEFITS ===================== */
.benefits{background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.ben-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.ben-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:32px 28px; box-shadow:var(--shadow-sm); transition:transform .2s,box-shadow .2s,border-color .2s}
.ben-card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:#efe7d8}
.ben-card .ico{width:48px; height:48px; border-radius:50%; background:rgba(236,90,28,.10); color:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:18px}
.ben-card .ico svg{width:24px; height:24px}
.ben-card h3{font-family:var(--fh); font-weight:800; font-size:17.5px; color:var(--navy); margin-bottom:8px}
.ben-card p{margin:0; color:var(--muted); font-size:14.5px; line-height:1.55}
@media(max-width:860px){ .ben-grid{grid-template-columns:1fr 1fr} }
@media(max-width:540px){ .ben-grid{grid-template-columns:1fr} }

/* ===================== PRODUCTS ===================== */
.products{background:var(--bg)}
.prod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.prod-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .2s,box-shadow .2s,border-color .2s; display:flex; flex-direction:column}
.prod-card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:#efe7d8}
.prod-card .pmedia{position:relative; aspect-ratio:4/3.2; background:radial-gradient(circle at 50% 42%,#ffffff,#eee9df 84%); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--accent)}
.prod-card .pmedia svg{width:52px; height:52px; opacity:.9}
.prod-card .pmedia model-viewer{position:absolute; inset:0; width:100%; height:100%; display:block; background:transparent; --poster-color:transparent}
.prod-card-bespoke{text-decoration:none; color:inherit; border:1.5px dashed var(--accent); background:linear-gradient(160deg,#fff,#fdf6f0)}
.prod-card-bespoke:hover{border-color:var(--accent); box-shadow:var(--shadow)}
.prod-card-bespoke .pmedia{background:radial-gradient(circle at 50% 42%,#fff,#faede1 84%); border-bottom:1px dashed rgba(236,90,28,.35)}
.prod-card-bespoke h3{color:var(--accent)}
.prod-card-bespoke .pmedia .pbespoke-sketch{width:auto; height:auto; max-width:62%; max-height:70%; opacity:.85; color:#b9bdc6}
.prod-cta{display:flex; justify-content:center; margin-top:44px}
.prod-cta-btn{background:var(--navy); border-color:var(--navy); box-shadow:0 6px 18px rgba(13,27,42,.22)}
.prod-cta-btn:hover{background:var(--navy-2); border-color:var(--navy-2)}
.prod-card .pbadge{position:absolute; left:14px; top:14px; z-index:3; display:inline-flex; align-items:center; background:var(--accent); color:#fff; font-family:var(--fh); font-weight:700; font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:6px 11px; border-radius:40px}
.prod-card .pbody{padding:20px 20px 22px}
.prod-card h3{font-family:var(--fh); font-weight:800; font-size:16.5px; text-transform:uppercase; color:var(--navy); margin-bottom:6px}
.prod-card p{margin:0; color:var(--muted); font-size:13.5px; line-height:1.5}
@media(max-width:960px){ .prod-grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:720px){ .prod-grid{grid-template-columns:1fr 1fr} }
@media(max-width:440px){ .prod-grid{grid-template-columns:1fr} }

/* ===================== FAQ ===================== */
.faq{background:var(--bg-soft); border-top:1px solid var(--line)}
.faq-wrap{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:14px}
.faq-item{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden; transition:border-color .2s,box-shadow .2s}
.faq-item[open]{border-color:#efe0cd; box-shadow:var(--shadow)}
.faq-item summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px 26px; font-family:var(--fh); font-weight:700; font-size:17px; color:var(--navy)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .pm{flex:none; width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line-strong); display:flex; align-items:center; justify-content:center; color:var(--accent); transition:transform .25s,border-color .2s,background .2s}
.faq-item[open] summary .pm{transform:rotate(45deg); background:var(--accent); border-color:var(--accent); color:#fff}
.faq-item summary .pm svg{width:14px; height:14px}
.faq-item .a{padding:0 26px 24px; color:var(--muted); font-size:15px; line-height:1.65; max-width:66ch}

/* ===================== SIGNUP ===================== */
.signup{position:relative; background:linear-gradient(160deg,var(--navy),#0a1622); color:#fff; overflow:hidden}
.signup::before{content:""; position:absolute; inset:0; opacity:.14; background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px); background-size:48px 48px; mask-image:radial-gradient(circle at 88% 4%,rgba(0,0,0,.8),transparent 60%)}
.signup .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; padding-top:90px; padding-bottom:96px}
.signup .eyebrow{color:var(--accent-2)}
.signup .eyebrow::before{background:var(--accent-2)}
.signup h2{color:#fff; font-weight:900; font-size:clamp(24px,3vw,38px); text-transform:uppercase}
.signup .lede{color:rgba(255,255,255,.82); margin:18px 0 24px; font-size:clamp(15px,1.2vw,18px); max-width:46ch}
.signup . perk-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px}
.signup ul.perks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px}
.signup ul.perks li{display:flex; gap:12px; align-items:center; font-size:15.5px; color:rgba(255,255,255,.92); font-weight:500}
.signup ul.perks .ck{flex:none; width:24px; height:24px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center}
.signup ul.perks .ck svg{width:13px; height:13px}
.card-form{background:var(--surface); color:var(--ink); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); padding:38px 36px}
.card-form h3{font-family:var(--fh); font-weight:900; font-size:24px; text-transform:uppercase; color:var(--navy); margin-bottom:6px}
.card-form .sub{color:var(--muted); font-size:14.5px; margin-bottom:26px}
.field{margin-bottom:18px}
.field label{display:block; font-family:var(--fh); font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); margin-bottom:8px}
.field input{width:100%; font-family:var(--fb); font-size:15.5px; padding:14px 15px; background:var(--bg); border:1.5px solid var(--line-strong); border-radius:var(--r); color:var(--ink); outline:none; transition:border-color .18s,box-shadow .18s}
.field input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(236,90,28,.14)}
.field input::placeholder{color:#9aa2ac}
.field select{width:100%; font-family:var(--fb); font-size:15.5px; padding:14px 40px 14px 15px; background-color:var(--bg); border:1.5px solid var(--line-strong); border-radius:var(--r); color:var(--ink); outline:none; cursor:pointer; -webkit-appearance:none; -moz-appearance:none; appearance:none; transition:border-color .18s,box-shadow .18s; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa2ac' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; background-size:17px}
.field select:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(236,90,28,.14)}
.field select:invalid{color:#9aa2ac}
.field select option{color:var(--ink)}
.field .hint{margin-top:7px; font-size:12.5px; color:var(--muted)}
.field.invalid input,.field.invalid select{border-color:var(--err); box-shadow:0 0 0 3px rgba(209,53,43,.12)}
.field .err{display:none; margin-top:7px; font-size:12.5px; color:var(--err); font-weight:600}
.field.invalid .err{display:block}
/* company-details subgroup */
.form-section{display:flex; align-items:center; gap:14px; margin:28px 0 20px; font-family:var(--fh); font-weight:800; font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted)}
.form-section span{flex:none}
.form-section::before,.form-section::after{content:""; height:1.5px; background:var(--line-strong); border-radius:2px; flex:1 1 auto}
.form-section::before{flex-grow:0; width:14px}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field-row-zip{grid-template-columns:.82fr 1.18fr}
@media(max-width:560px){ .field-row{grid-template-columns:1fr; gap:0} }
.form-msg{display:none; margin:2px 0 16px; padding:12px 15px; border-radius:var(--r); font-size:13.5px; font-weight:600}
.form-msg.err{display:block; background:rgba(209,53,43,.10); color:var(--err); border:1px solid rgba(209,53,43,.24)}
.form-reassure{display:flex; align-items:center; justify-content:center; gap:8px; margin:14px 0 0; font-size:13px; font-weight:600; color:#0c6b62}
.form-reassure svg{width:16px; height:16px; color:var(--ok); flex:none}
.form-foot{margin-top:14px; font-size:12.5px; color:var(--muted); line-height:1.5; text-align:center}
.form-foot a{color:var(--accent); font-weight:600}
.spin{width:17px; height:17px; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
/* success state */
.form-success{display:none; text-align:center; padding:14px 4px 8px}
.form-success.show{display:block}
.form-success .badge{width:78px; height:78px; border-radius:50%; background:rgba(15,148,136,.12); color:var(--ok); display:flex; align-items:center; justify-content:center; margin:0 auto 22px}
.form-success .badge svg{width:40px; height:40px}
.form-success h3{font-family:var(--fh); font-weight:900; font-size:24px; text-transform:uppercase; color:var(--navy); margin-bottom:10px}
.form-success p{color:var(--muted); font-size:15px; margin-bottom:26px; line-height:1.6}
@media(max-width:920px){ .signup .wrap{grid-template-columns:1fr; gap:40px; padding-top:60px; padding-bottom:66px} .signup .intro{max-width:560px} }

/* ===================== BESPOKE ===================== */
.bespoke{position:relative; overflow:hidden; background:radial-gradient(120% 100% at 8% 2%, rgba(236,90,28,.14), transparent 55%),linear-gradient(160deg,#12283f 0%, #0d1b2a 100%); color:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.bespoke::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.15; background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px); background-size:46px 46px; mask-image:radial-gradient(circle at 86% 6%,rgba(0,0,0,.75),transparent 62%)}
.bespoke .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; padding-top:92px; padding-bottom:92px}
.bespoke .eyebrow{color:var(--accent-2)}
.bespoke .eyebrow::before{background:var(--accent-2)}
.bespoke h2{color:#fff; font-weight:900; font-size:clamp(30px,4vw,52px); text-transform:uppercase; line-height:1.02; letter-spacing:-.015em}
.bespoke h2 .accent{color:var(--accent-2); display:block}
.bespoke .lede{margin:22px 0 26px; color:rgba(255,255,255,.82); font-size:clamp(16px,1.35vw,19px); max-width:52ch}
.bespoke .bp-points{list-style:none; margin:0 0 30px; padding:0; display:flex; flex-direction:column; gap:13px}
.bespoke .bp-points li{display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:rgba(255,255,255,.92); font-weight:500}
.bespoke .bp-points .ck{flex:none; width:24px; height:24px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; margin-top:1px}
.bespoke .bp-points .ck svg{width:13px; height:13px}
.bp-visual{position:relative}
.bp-offers{display:flex; flex-direction:column; gap:16px}
.bp-offer{position:relative; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.15); border-radius:var(--r-xl); padding:24px 26px; box-shadow:var(--shadow-lg)}
.bp-offer-accent{background:linear-gradient(160deg,rgba(236,90,28,.16),rgba(255,255,255,.05)); border-color:rgba(255,122,61,.4)}
.bp-offer-tag{display:inline-flex; align-items:center; font-family:var(--fh); font-weight:800; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); padding:5px 11px; border-radius:40px}
.bp-offer-accent .bp-offer-tag{background:var(--accent); border-color:var(--accent)}
.bp-offer-ico{position:absolute; top:22px; right:24px; width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.10); color:var(--accent-2); display:flex; align-items:center; justify-content:center}
.bp-offer-ico svg{width:22px; height:22px}
.bp-offer h3{font-family:var(--fh); font-weight:800; font-size:19px; text-transform:uppercase; color:#fff; margin:14px 0 8px; padding-right:48px}
.bp-offer p{margin:0; color:rgba(255,255,255,.80); font-size:14.5px; line-height:1.55}
@media(max-width:920px){ .bespoke .wrap{grid-template-columns:1fr; gap:40px; padding-top:62px; padding-bottom:66px} .bp-visual{max-width:520px} }
@media(max-width:480px){ .bp-offer{padding:20px} .bp-offer h3{font-size:17.5px; padding-right:44px} .bp-offer-ico{top:20px; right:20px; width:38px; height:38px} }

/* ===================== FOOTER ===================== */
footer{background:#08131f; color:var(--muted-light)}
.foot-main{padding-top:60px; padding-bottom:40px; display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:48px}
.foot-brand .brand{color:#fff; font-size:24px; margin-bottom:16px}
.foot-brand p{font-size:14px; line-height:1.6; max-width:40ch; margin:0 0 18px; color:var(--muted-light)}
.foot-col h4{font-family:var(--fh); font-weight:800; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:#fff; margin-bottom:18px; position:relative; padding-bottom:12px}
.foot-col h4::after{content:""; position:absolute; left:0; bottom:0; width:32px; height:2px; background:var(--accent)}
.foot-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.foot-col a{font-size:14px; transition:color .2s,padding-left .2s}
.foot-col a:hover{color:#fff; padding-left:4px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.10); padding:20px 0; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px}
@media(max-width:820px){ .foot-main{grid-template-columns:1fr 1fr; gap:36px} }
@media(max-width:520px){ .foot-main{grid-template-columns:1fr} .foot-bottom{flex-direction:column; align-items:flex-start} }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .reveal{opacity:1 !important; transform:none !important}
}

.mb-note{font-size:11px; line-height:1.2; color:var(--muted); margin-top:4px; font-family:var(--fb); font-weight:500}

/* ===================== CHANNELS (two ways to sell) ===================== */
.channels-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:40px}
.channel-card{margin:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column}
.channel-card img{display:block; width:100%; height:auto; background:var(--bg-soft); border-bottom:1px solid var(--line)}
.channel-card figcaption{padding:22px 24px}
.channel-card figcaption h3{font-family:var(--fh); font-weight:800; font-size:19px; color:var(--navy); margin:0 0 7px}
.channel-card figcaption p{font-size:14.5px; line-height:1.6; color:var(--muted); margin:0}
@media(max-width:760px){ .channels-grid{grid-template-columns:1fr; gap:20px} }

.field-note{display:flex; gap:8px; align-items:flex-start; font-size:13px; color:var(--muted); line-height:1.5; margin:-4px 2px 4px}
.field-note::before{content:""; flex:0 0 auto; width:15px; height:15px; margin-top:1px; background:no-repeat center/contain; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ec5a1c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E")}

/* Channel tag pills under the "Sell anywhere" intro */
.channel-tags{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.channel-tags li{font-family:var(--fh); font-weight:700; font-size:12.5px; letter-spacing:.02em; color:var(--navy-2);
  background:var(--surface); border:1px solid var(--line-strong); border-radius:40px; padding:8px 15px}

/* Partner-terms acceptance checkbox on the signup form */
.form-accept{display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:13.5px; color:var(--muted); line-height:1.5}
.form-accept input{margin-top:2px; width:17px; height:17px; flex:0 0 auto; accent-color:var(--accent); cursor:pointer}
.form-accept a{color:var(--accent); font-weight:700}
#f-accept-field.invalid .form-accept input{outline:2px solid var(--err); outline-offset:1px}

/* ===================== BRAND PREVIEW (in your brand) ===================== */
.brandprev{ --brand-accent: var(--accent) }
.bp-card{ max-width:860px; margin:40px auto 0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); overflow:hidden }
.bp-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 22px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#fff,#fbfaf7) }
.bp-brand{ display:flex; align-items:center; gap:10px; min-height:30px }
.bp-brand img{ max-height:30px; max-width:150px; width:auto; object-fit:contain }
.bp-brand #bpName{ font-family:var(--fh); font-weight:800; font-size:16px; color:var(--navy); letter-spacing:-.01em }
.bp-live{ font-family:var(--fh); font-weight:700; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--brand-accent); padding:5px 11px; border-radius:40px }
.bp-body{ display:grid; grid-template-columns:1.35fr 1fr; gap:0 }
/* The live, brandable Studio configurator - the SAME viewer the seller sees in
   Studio -> Design, embedded here in read-only preview mode and recolored to the
   invited partner's brand via postMessage. */
.bp-viewer{ display:block; width:100%; height:600px; border:0; background:transparent }
@media (max-width:720px){ .bp-viewer{ height:720px } }
/* Product switcher above the preview - pick any product, see it in your brand */
.bp-switch{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; max-width:860px; margin:26px auto 14px }
.bp-pill{ font-family:var(--fh); font-weight:700; font-size:13px; letter-spacing:.01em; color:var(--navy); background:var(--surface); border:1px solid var(--line); border-radius:40px; padding:9px 16px; cursor:pointer; transition:background .15s,color .15s,border-color .15s }
.bp-pill:hover{ border-color:var(--navy) }
.bp-pill.is-active{ background:var(--navy); color:#fff; border-color:var(--navy) }
.bp-more{ max-width:640px; margin:18px auto 0; font-size:14.5px; color:var(--muted); line-height:1.5; text-align:center }
.bp-catalog{ max-width:640px; margin:14px auto 0; font-size:13.5px; color:var(--muted); line-height:1.5; text-align:center }
.bp-disclaimer{ display:block; max-width:600px; margin:20px auto 0; padding:13px 18px; background:rgba(19,40,63,.035); border:1px solid var(--line); border-radius:12px; font-size:12px; color:var(--muted); line-height:1.55; text-align:center }
.bp-disclaimer-ico{ display:inline-block; width:14px; height:14px; vertical-align:-2px; margin-right:6px; color:var(--navy); opacity:.55 }
.bp-more a{ color:var(--brand-accent); font-weight:700; text-decoration:none; white-space:nowrap }
.bp-more a:hover{ text-decoration:underline }
.bp-controls{ padding:26px 26px 28px; border-left:1px solid var(--line); display:flex; flex-direction:column }
.bp-price{ font-family:var(--fh); font-weight:900; font-size:34px; color:var(--navy); line-height:1 }
.bp-note{ font-size:12.5px; color:var(--muted); margin:5px 0 20px }
.bp-row{ margin-bottom:16px }
.bp-l{ display:block; font-family:var(--fh); font-weight:700; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-bottom:7px }
.bp-pills{ display:flex; gap:8px }
.bp-pills b{ flex:1; text-align:center; font-family:var(--fb); font-weight:600; font-size:13.5px; padding:9px 6px; border:1px solid var(--line-strong); border-radius:10px; color:var(--ink); background:#fff }
.bp-pills b.on{ background:var(--brand-accent); border-color:var(--brand-accent); color:#fff }
.bp-cta{ margin-top:auto; font-family:var(--fh); font-weight:800; font-size:14px; letter-spacing:.03em; text-transform:uppercase; color:#fff; background:var(--brand-accent); border:none; border-radius:12px; padding:15px; cursor:default; box-shadow:0 2px 10px rgba(0,0,0,.08) }
@media(max-width:720px){ .bp-body{ grid-template-columns:1fr } .bp-controls{ border-left:none; border-top:1px solid var(--line) } }