/* Shared styles for the public product pages (/ecommerce/, /marche-gros/). */
/* ── INTIGO E-commerce page. White + ink, one warm accent, the
   landing's dotted-wave separators. Weights <= 400 everywhere. ── */
:root {
    --ink: #111111;
    --ink-2: #33333a;
    --muted: rgba(17, 17, 17, 0.62);
    --line: #e8e6e1;
    --soft: #f6f5f2;
    --accent: #7d5f39;
    --orange: #ff7a00;
    --font-title: 'Roboto Condensed', 'Arial Narrow', sans-serif;
    --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
    --shadow: 0 30px 70px rgba(17, 17, 17, 0.12), 0 6px 18px rgba(17, 17, 17, 0.06);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--ink); font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-title); font-weight: 400; margin: 0; }
p { margin: 0; }
em { font-style: normal; color: var(--accent); }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.sec { padding: 88px 0; }
.eyebrow { font-family: var(--font-title); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.h2 { font-size: clamp(34px, 4.4vw, 54px); font-weight: 300; line-height: 1.04; letter-spacing: -0.01em; }
.lead { font-size: 17px; line-height: 1.65; color: var(--muted); font-weight: 300; margin-top: 16px; max-width: 58ch; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }
.btn { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 24px; border-radius: 999px; font-size: 15px; text-decoration: none; white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(17,17,17,.2); }
.btn-light { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn-on-dark { background: #fff; color: var(--ink); }
.btn-ghost-dark { color: #fff; border: 1px solid rgba(255,255,255,.28); }

/* Nav */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .25s, box-shadow .25s; }
.nav.scrolled { background: rgba(255,255,255,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.nav-in { max-width: 1160px; margin: 0 auto; padding: 0 24px; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.nav-logo img { height: 32px; width: auto; }
.nav .logo-dark { display: none; }
.nav.scrolled .logo-dark { display: block; }
.nav.scrolled .logo-light { display: none; }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links a { display: block; padding: 8px 12px; border-radius: 999px; font-size: 14px; text-decoration: none; color: rgba(255,255,255,.82); }
.nav.scrolled .nav-links a { color: var(--ink-2); }
.nav-links a:hover { background: rgba(255,255,255,.1); }
.nav.scrolled .nav-links a:hover { background: var(--soft); }
.nav-cta { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: #fff; color: var(--ink); text-decoration: none; font-size: 14px; }
.nav.scrolled .nav-cta { background: var(--ink); color: #fff; }

/* Hero (dark, like the presentation cover) */
.hero { position: relative; overflow: hidden; background: #0c0c0f; color: #fff; padding: 140px 0 96px; }
.hero::before { content: ''; position: absolute; width: 760px; height: 760px; right: -220px; top: -260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,122,0,.26), transparent 62%); }
.hero::after { content: ''; position: absolute; width: 560px; height: 560px; left: -200px; bottom: -320px; border-radius: 50%; background: radial-gradient(circle, rgba(201,168,130,.18), transparent 65%); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); font-size: 13px; color: rgba(255,255,255,.8); }
.badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(255,122,0,.2); }
.hero h1 { font-size: clamp(44px, 6vw, 78px); font-weight: 300; line-height: 1.0; letter-spacing: -0.02em; margin: 22px 0 20px; }
.hero h1 em { color: #f0c79a; }
.hero-sub { font-size: 18px; line-height: 1.65; color: rgba(255,255,255,.72); font-weight: 300; max-width: 46ch; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.hero-note { margin-top: 18px; font-size: 13px; color: rgba(255,255,255,.5); }
.hero-visual { position: relative; }
.browser { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 50px 100px rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.08); }
.browser-bar { height: 32px; background: #f1efeb; display: flex; align-items: center; gap: 6px; padding: 0 12px; }
.browser-bar span { width: 9px; height: 9px; border-radius: 50%; background: #d6d2cb; }
.browser-bar i { margin-left: 12px; flex: 1; max-width: 260px; height: 18px; border-radius: 6px; background: #fff; font-style: normal; font-size: 11px; color: #888; display: flex; align-items: center; padding: 0 10px; }
.browser img { width: 100%; aspect-ratio: 800 / 600; object-fit: cover; object-position: top; }
.phone-float { position: absolute; left: -48px; bottom: -40px; width: 170px; border-radius: 26px; background: #111; padding: 7px; box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.phone-float img { border-radius: 20px; aspect-ratio: 9 / 18; object-fit: cover; object-position: 92% 0; }
.chip-float { position: absolute; right: -14px; top: 54px; background: #fff; color: var(--ink); border-radius: 16px; padding: 12px 16px; box-shadow: var(--shadow); font-size: 13px; }
.chip-float b { display: block; font-family: var(--font-title); font-weight: 400; font-size: 22px; }

/* Key figures */
.figs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: -48px; position: relative; z-index: 2; }
.fig { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 22px 24px; box-shadow: 0 14px 34px rgba(17,17,17,.06); }
.fig-n { font-family: var(--font-title); font-weight: 300; font-size: 44px; line-height: 1; color: var(--ink); }
.fig-l { font-size: 15px; color: var(--ink); margin-top: 8px; }
.fig-t { font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.5; }

/* Problem / solution */
.ps { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 44px; }
.ps-card { border-radius: 26px; padding: 34px; }
.ps-card--before { background: var(--soft); }
.ps-card--after { background: var(--ink); color: #fff; }
.ps-card h3 { font-size: 26px; margin-bottom: 18px; }
.ps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ps-list b { display: block; font-weight: 400; font-size: 16px; }
.ps-list span { font-size: 14px; color: var(--muted); }
.ps-card--after .ps-list span { color: rgba(255,255,255,.62); }
.ps-list li { padding-left: 22px; position: relative; }
.ps-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: #c9c3b8; }
.ps-card--after .ps-list li::before { background: var(--orange); }

/* 5 steps */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 44px; counter-reset: s; }
.step { position: relative; background: var(--soft); border-radius: 22px; padding: 22px 20px 24px; }
.step::before { counter-increment: s; content: counter(s); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--font-title); font-size: 15px; margin-bottom: 16px; }
.step h3 { font-size: 20px; }
.step p { font-size: 14px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.steps-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-top: 40px; }
.shot { border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); background: #fff; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.tag { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); background: #fff; }

/* Builder bento */
.bento { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: auto auto; gap: 16px; margin-top: 44px; }
.tile { position: relative; overflow: hidden; background: var(--soft); border-radius: 26px; padding: 30px; display: flex; flex-direction: column; }
.tile h3 { font-size: 24px; line-height: 1.15; }
.tile p { font-size: 15px; color: var(--muted); margin-top: 8px; max-width: 46ch; }
.tile--big { grid-row: span 2; }
.tile .shot { margin-top: 26px; }
.tile--big .shot { margin-top: auto; }
.tile-crop { margin-top: 24px; height: 230px; border-radius: 18px 18px 0 0; overflow: hidden; box-shadow: var(--shadow); margin-bottom: -30px; }
.tile-crop img { width: 100%; }
.themes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.theme { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 14px; }
.theme small { font-size: 12px; color: var(--muted); }
.list-num { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.list-num li { font-size: 14px; color: var(--muted); padding-left: 18px; position: relative; }
.list-num li b { color: var(--ink); font-weight: 400; }
.list-num li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* Buyer side */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split--rev .split-media { order: -1; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.duo .shot:nth-child(2) { margin-top: 48px; }

/* Sell more grid */
.tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 44px; }
.tool { background: var(--soft); border-radius: 22px; padding: 24px; transition: background .2s, transform .2s; }
.tool:hover { background: #efede8; transform: translateY(-2px); }
.tool h3 { font-size: 20px; }
.tool p { font-size: 14px; color: var(--muted); margin-top: 6px; line-height: 1.5; }

/* AI (dark) */
.ai { position: relative; overflow: hidden; background: #0c0c0f; color: #fff; border-radius: 40px; margin: 0 16px; }
.ai::before { content: ''; position: absolute; width: 700px; height: 700px; left: 50%; top: -420px; margin-left: -350px; border-radius: 50%; background: radial-gradient(circle, rgba(255,122,0,.22), transparent 62%); }
.ai .wrap { position: relative; z-index: 1; }
.ai .eyebrow { color: #f0c79a; }
.ai .lead { color: rgba(255,255,255,.66); }
.ai-shot { margin-top: 44px; border-radius: 18px; overflow: hidden; box-shadow: 0 50px 100px rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.08); }
.ai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.ai-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 22px; padding: 22px; }
.ai-card h3 { font-size: 20px; }
.ai-card p { font-size: 14px; color: rgba(255,255,255,.62); margin-top: 6px; line-height: 1.5; }
.ai-steps { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 22px; }
.ai-steps span { padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); font-size: 13px; color: rgba(255,255,255,.8); }

/* Highlights */
.hl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 44px; border-top: 1px solid var(--line); }
.hl div { padding: 26px 22px 26px 0; border-bottom: 1px solid var(--line); }
.hl div:not(:nth-child(4n)) { border-right: 1px solid var(--line); }
.hl div:not(:nth-child(4n+1)) { padding-left: 22px; }
.hl b { display: block; font-family: var(--font-title); font-weight: 300; font-size: 34px; color: var(--accent); line-height: 1; }
.hl h3 { font-size: 19px; margin-top: 12px; }
.hl p { font-size: 14px; color: var(--muted); margin-top: 6px; line-height: 1.5; }

/* Plans */
.plans3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; align-items: stretch; }
.p3 { position: relative; display: flex; flex-direction: column; background: var(--soft); border-radius: 26px; padding: 30px 28px; }
.p3--pro { background: var(--ink); color: #fff; overflow: hidden; }
.p3--pro::before { content: ''; position: absolute; width: 320px; height: 320px; right: -110px; top: -140px; border-radius: 50%; background: radial-gradient(circle, rgba(255,122,0,.32), transparent 62%); }
.p3 > * { position: relative; }
.p3-tag { position: absolute !important; top: 26px; right: 24px; padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(240,199,154,.6); color: #f0c79a; font-size: 12px; }
.p3-name { font-family: var(--font-title); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.p3--pro .p3-name { color: #f0c79a; }
.p3-price { margin-top: 8px; font-size: 14px; color: var(--muted); }
.p3--pro .p3-price { color: rgba(255,255,255,.6); }
.p3-price span { font-family: var(--font-title); font-weight: 300; font-size: 52px; line-height: 1; color: var(--ink); margin-right: 4px; }
.p3--pro .p3-price span { color: #fff; }
.p3-limits, .p3-feats { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: 14px; }
.p3--pro .p3-limits, .p3--pro .p3-feats { border-top-color: rgba(255,255,255,.14); }
.p3-limits b { font-weight: 400; font-family: var(--font-title); font-size: 17px; }
.p3-feats { color: var(--muted); margin-bottom: 26px; }
.p3--pro .p3-feats { color: rgba(255,255,255,.72); }
.p3-feats li { padding-left: 18px; position: relative; }
.p3-feats li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.p3--pro .p3-feats li::before { background: var(--orange); }
.p3 .btn { margin-top: auto; justify-content: center; }


/* ── Screenshots, Dribbble-style: soft pastel stages, big radii,
   a tilted collage in the hero. ── */
.stage { padding: 26px; border-radius: 32px; border: 0; box-shadow: none; overflow: hidden; }
.stage img { border-radius: 18px; box-shadow: 0 24px 50px rgba(17, 17, 17, 0.14), 0 4px 12px rgba(17, 17, 17, 0.06); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.stage:hover img { transform: translateY(-4px) scale(1.01); }
.stage--mint  { background: linear-gradient(160deg, #e3efe2, #d4e8d6); }
.stage--peach { background: linear-gradient(160deg, #fbeadb, #f6dcc6); }
.stage--sand  { background: linear-gradient(160deg, #f5eddc, #ece0c6); }
.stage--lilac { background: linear-gradient(160deg, #ece7f7, #ddd5f1); }
.tile-crop { border-radius: 22px 22px 0 0; box-shadow: 0 24px 50px rgba(17, 17, 17, 0.14); }
.tile .shot { border-radius: 22px; box-shadow: 0 24px 50px rgba(17, 17, 17, 0.12); border: 0; }
.ai-shot { border-radius: 26px; }

.collage {
    position: relative; height: 560px; border-radius: 36px; overflow: hidden;
    background: linear-gradient(150deg, #e3efe2 0%, #f6dcc6 55%, #ddd5f1 100%);
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.45);
}
.collage-grid {
    position: absolute; left: -18%; top: -14%; width: 136%;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
    transform: rotate(-12deg);
}
.collage-col { display: grid; gap: 18px; align-content: start; }
.collage-col--down { margin-top: 90px; }
.collage-col img { width: 100%; border-radius: 20px; box-shadow: 0 22px 44px rgba(17, 17, 17, 0.18); background: #fff; }
.collage-grid { animation: collageDrift 18s ease-in-out infinite alternate; }
@keyframes collageDrift { from { translate: 0 0; } to { translate: 0 -60px; } }
@media (prefers-reduced-motion: reduce) { .collage-grid { animation: none; } }


/* Builder (visual first) */
.bld { position: relative; margin: 44px auto 0; max-width: 940px; }
.bld-stage { padding: 40px 120px 0 40px; height: 560px; }
.bld-stage img { border-radius: 18px 18px 0 0; }
.bld-ai {
    position: absolute; right: -10px; top: 70px; width: 300px;
    background: rgba(255,255,255,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-radius: 22px; padding: 20px; box-shadow: 0 30px 60px rgba(17,17,17,.18);
}
.bld-ai-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-title); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.bld-ai-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(255,122,0,.18); animation: aiPulse 2s ease-in-out infinite; }
@keyframes aiPulse { 50% { box-shadow: 0 0 0 8px rgba(255,122,0,0); } }
.bld-ai-msg { margin-top: 12px; background: var(--soft); border-radius: 14px 14px 14px 4px; padding: 10px 14px; font-size: 14px; }
.bld-ai-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.bld-ai-chips span { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; background: #fff; }
.bld-ai-foot { margin-top: 12px; font-size: 12px; color: var(--muted); }
.pills4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 22px auto 0; max-width: 940px; }
.pill4 { background: var(--soft); border-radius: 20px; padding: 18px 20px; }
.pill4 b { display: block; font-family: var(--font-title); font-weight: 300; font-size: 32px; line-height: 1; }
.pill4 span { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; }

/* Buyer side */
.buy { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 860px; margin: 44px auto 0; align-items: start; }
.buy-down { margin-top: 56px; }
.facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.facts span { padding: 9px 16px; border-radius: 999px; background: var(--soft); font-size: 14px; }


/* Onboarding timeline: a line that fills as it comes into view */
.tl { position: relative; max-width: 1000px; margin: 56px auto 0; }
.tl-track { position: absolute; left: 10%; right: 10%; top: 23px; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.tl-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--orange)); transition: width 1.8s cubic-bezier(.4,0,.2,1) .3s; }
.tl.in .tl-fill { width: 100%; }
.tl-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; text-align: center; position: relative; }
.tl-dot { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; border: 1px solid var(--line); font-family: var(--font-title); font-size: 18px; box-shadow: 0 10px 24px rgba(17,17,17,.08); transition: background .4s, color .4s, border-color .4s; }
.tl.in .tl-steps li:nth-child(1) .tl-dot { transition-delay: .3s; }
.tl.in .tl-steps li:nth-child(2) .tl-dot { transition-delay: .7s; }
.tl.in .tl-steps li:nth-child(3) .tl-dot { transition-delay: 1.1s; }
.tl.in .tl-steps li:nth-child(4) .tl-dot { transition-delay: 1.5s; }
.tl.in .tl-steps li:nth-child(5) .tl-dot { transition-delay: 1.9s; }
.tl.in .tl-dot { background: var(--ink); color: #fff; border-color: var(--ink); }
.tl.in .tl-dot--end { background: var(--orange); border-color: var(--orange); }
.tl-steps h3 { font-size: 19px; margin-top: 16px; }
.tl-steps p { font-size: 14px; color: var(--muted); margin-top: 4px; }


/* ── HTML mockups (replace the screenshots) ── */
.m-stage { position: relative; border-radius: 32px; padding: 34px; display: flex; flex-direction: column; align-items: center; }
.m-stage--mint  { background: linear-gradient(160deg, #e3efe2, #d4e8d6); }
.m-stage--peach { background: linear-gradient(160deg, #fbeadb, #f6dcc6); }
.m-stage--sand  { background: linear-gradient(160deg, #f5eddc, #ece0c6); }
.m-stage--lilac { background: linear-gradient(160deg, #ece7f7, #ddd5f1); }
.m-stage--hero  { background: linear-gradient(150deg, #e3efe2 0%, #f6dcc6 55%, #ddd5f1 100%); height: 560px; justify-content: center; box-shadow: 0 50px 100px rgba(0,0,0,.45); border-radius: 36px; }
.m-phone { width: 270px; border-radius: 40px; background: #111; padding: 9px; box-shadow: 0 34px 70px rgba(17,17,17,.25); }
.m-phone--tilt { transform: rotate(-4deg); }
.m-phone--sm { width: 250px; }
.m-screen { position: relative; border-radius: 32px; overflow: hidden; background: #faf7f2; height: 500px; color: #2a1610; }
.m-bar { background: #4a2418; color: #f3e6da; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 22px 8px 5px; }
.m-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; background: #fff; border-bottom: 1px solid #efe7de; }
.m-head b { font-family: var(--font-title); font-weight: 400; font-size: 15px; letter-spacing: .3em; color: #4a2418; }
.m-burger { width: 14px; height: 9px; border-top: 1.5px solid #4a2418; border-bottom: 1.5px solid #4a2418; position: relative; }
.m-burger::after { content: ''; position: absolute; left: 0; right: 0; top: 2.5px; border-top: 1.5px solid #4a2418; }
.m-search { width: 11px; height: 11px; border: 1.5px solid #4a2418; border-radius: 50%; }
.m-banner { position: relative; height: 270px; }
.m-banner img, .m-prod img, .m-cols img, .m-lux img, .m-canvas-banner img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.m-banner-txt { position: absolute; inset: auto 0 0 0; padding: 40px 16px 14px; background: linear-gradient(transparent, rgba(30,14,8,.72)); color: #fff; }
.m-banner-txt small, .m-canvas-banner small, .m-lux small { display: block; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; opacity: .85; }
.m-banner-txt strong { font-family: Georgia, serif; font-weight: 400; font-style: italic; font-size: 26px; line-height: 1.1; }
.m-pad { padding: 14px 16px; }
.m-from { font-size: 12px; }
.m-from b { font-weight: 400; font-size: 18px; }
.m-btn { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 16px; border-radius: 999px; background: #4a2418; color: #fff; font-size: 12px; white-space: nowrap; }
.m-pad .m-btn { width: 100%; margin-top: 10px; }
.m-btn--orange { background: var(--orange); }
.m-btn--gold { background: #c9a14a; color: #111; }
.m-btn--sm { height: 26px; padding: 0 12px; font-size: 11px; width: auto !important; margin-top: 0 !important; }
.m-meta { font-size: 10px; color: #8a7466; margin-top: 10px; text-align: center; }
.m-card { position: absolute; background: #fff; border-radius: 18px; padding: 14px 16px; box-shadow: 0 24px 50px rgba(17,17,17,.18); color: var(--ink); }
.m-card--order { left: -26px; top: 70px; width: 230px; }
.m-card--ship { right: -22px; bottom: 70px; width: 220px; text-align: center; }
.m-card--ship p { font-size: 12px; color: var(--muted); margin-top: 8px; }
.m-card-lab { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.m-live { width: 7px; height: 7px; border-radius: 50%; background: #1f9d55; box-shadow: 0 0 0 4px rgba(31,157,85,.16); }
.m-order-row { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.m-order-row img, .m-line img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.m-order-row b { display: block; font-weight: 400; font-size: 13px; }
.m-order-row span { font-size: 12px; color: var(--muted); }
.m-order-total { margin-top: 10px; font-family: var(--font-title); font-size: 22px; }
.m-order-total span { font-family: var(--font-body); font-size: 12px; color: var(--muted); }

/* editor window */
.m-win { width: 100%; background: #fff; border-radius: 16px 16px 0 0; overflow: hidden; box-shadow: 0 30px 60px rgba(17,17,17,.16); }
.m-win-top { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #eee; font-size: 12px; }
.m-dots { display: flex; gap: 5px; margin-right: 6px; }
.m-dots i { width: 9px; height: 9px; border-radius: 50%; background: #e2ddd5; }
.m-sel { padding: 5px 10px; border: 1px solid #eee; border-radius: 8px; }
.m-seg { display: inline-flex; background: #f3f1ed; border-radius: 8px; padding: 2px; margin-left: auto; }
.m-seg b, .m-seg span { padding: 4px 10px; border-radius: 6px; font-weight: 400; }
.m-seg b { background: #111; color: #fff; }
.m-win-body { display: grid; grid-template-columns: 200px 1fr; height: 470px; }
.m-side { border-right: 1px solid #eee; padding: 14px; background: #fcfbf9; }
.m-side-lab { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.m-row { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #eee; border-radius: 10px; background: #fff; font-size: 13px; margin-bottom: 8px; }
.m-row.is-on { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,122,0,.12); }
.m-grip { width: 8px; height: 12px; background: radial-gradient(circle, #bbb 1px, transparent 1.5px) 0 0 / 4px 4px; }
.m-eye { margin-left: auto; width: 14px; height: 9px; border: 1.5px solid #aaa; border-radius: 50%; }
.m-add { margin-top: 4px; padding: 10px; border: 1px dashed #d9d2c8; border-radius: 10px; font-size: 12px; color: var(--muted); text-align: center; }
.m-canvas { padding: 16px; background: #f6f3ee; overflow: hidden; }
.m-canvas-banner { position: relative; height: 230px; border-radius: 12px; overflow: hidden; }
.m-canvas-banner.is-sel { outline: 2px dashed var(--orange); outline-offset: 3px; }
.m-canvas-banner div { position: absolute; inset: auto 0 0 0; padding: 40px 18px 16px; background: linear-gradient(transparent, rgba(30,14,8,.75)); color: #fff; }
.m-canvas-banner strong, .m-lux strong { display: block; font-family: Georgia, serif; font-weight: 400; font-style: italic; font-size: 28px; line-height: 1.1; margin: 4px 0 10px; }
.m-canvas-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.m-canvas-grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; }
.bld-stage { height: 560px; padding: 40px 120px 0 40px; justify-content: flex-start; }

/* product page + collections */
.m-prod { height: 150px; }
.m-name { font-family: Georgia, serif; font-size: 19px; margin-bottom: 8px; }
.m-offer { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #ece4da; border-radius: 10px; background: #fff; font-size: 12px; margin-bottom: 6px; }
.m-offer i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #c7b8a8; flex: none; }
.m-offer.is-on { border-color: #4a2418; }
.m-offer.is-on i { border: 4px solid #4a2418; }
.m-offer em { font-style: normal; font-size: 9px; padding: 2px 6px; border-radius: 999px; background: #4a2418; color: #fff; }
.m-offer b { margin-left: auto; font-weight: 400; }
.m-field { margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: #f1ebe3; font-size: 11px; color: #9a8676; }
.m-sticky { position: absolute; inset: auto 0 0 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px 14px; background: #fff; border-top: 1px solid #efe7de; font-size: 10px; color: #8a7466; }
.m-sticky b { display: block; font-weight: 400; font-size: 14px; color: #2a1610; }
.m-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 12px; }
.m-cols div { position: relative; height: 180px; border-radius: 12px; overflow: hidden; }
.m-cols span { position: absolute; left: 10px; bottom: 8px; font-family: Georgia, serif; font-size: 14px; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.4); }

/* orders */
.ord { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; margin-top: 44px; align-items: stretch; }
.ord .m-stage { justify-content: center; }
.m-panel { width: 100%; max-width: 440px; background: #fff; border-radius: 20px; padding: 20px; box-shadow: 0 30px 60px rgba(17,17,17,.14); }
.m-panel-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.m-panel-top b { font-family: var(--font-title); font-weight: 400; font-size: 22px; margin-right: auto; }
.m-chip { font-size: 11px; padding: 4px 10px; border-radius: 999px; background: #f4efe7; color: #6a5545; }
.m-chip--ok { background: #e3f3e8; color: #1f7a45; }
.m-line { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f1ede7; font-size: 13px; }
.m-line b { margin-left: auto; font-weight: 400; }
.m-total { display: flex; justify-content: space-between; padding: 12px 0; font-size: 14px; }
.m-total b { font-family: var(--font-title); font-weight: 400; font-size: 22px; }
.m-frise { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 4px 0 16px; }
.m-frise span { font-size: 10px; color: var(--muted); padding-top: 10px; border-top: 3px solid #ece6dd; }
.m-frise span.done { border-top-color: #1f9d55; color: var(--ink); }
.m-panel .m-btn { width: 100%; height: 40px; font-size: 13px; }
.m-cap { margin-top: 18px; font-size: 14px; color: var(--ink-2); text-align: center; }
.m-track { margin-top: 6px; border-left: 2px solid #e8dfd4; padding-left: 14px; }
.m-track p { position: relative; font-size: 12px; color: #b3a495; padding: 7px 0; }
.m-track p::before { content: ''; position: absolute; left: -20px; top: 11px; width: 10px; height: 10px; border-radius: 50%; background: #e8dfd4; }
.m-track p.done { color: #2a1610; }
.m-track p.done::before { background: #1f9d55; }
.m-track p.now { color: #2a1610; font-size: 13px; }
.m-track p.now::before { background: var(--orange); box-shadow: 0 0 0 4px rgba(255,122,0,.2); }
.m-note { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #fff; font-size: 11px; color: #6a5545; line-height: 1.5; }

/* AI */
.m-ai { margin: 44px auto 0; max-width: 980px; display: grid; grid-template-columns: 360px 1fr; gap: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 28px; padding: 16px; }
.m-ai-chat { background: #fff; color: var(--ink); border-radius: 18px; padding: 20px; }
.m-ai-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-title); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.m-bub { margin-top: 12px; background: var(--soft); border-radius: 14px 14px 14px 4px; padding: 10px 14px; font-size: 14px; }
.m-bub--me { background: var(--ink); color: #fff; border-radius: 14px 14px 4px 14px; margin-left: 40px; }
.m-ai-shop { position: relative; border-radius: 18px; overflow: hidden; background: #0f0d0b; min-height: 340px; }
.m-ai-shop-top { position: absolute; z-index: 2; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; }
.m-ai-shop-top .m-chip { background: rgba(255,255,255,.9); }
.m-lux { position: absolute; inset: 0; }
.m-lux img { opacity: .75; filter: saturate(.7) contrast(1.05); }
.m-lux div { position: absolute; inset: auto 0 0 0; padding: 70px 26px 26px; background: linear-gradient(transparent, rgba(10,8,6,.9)); color: #f3e7cf; }
.m-lux small { color: #c9a14a; }

/* Final CTA */
.cta-card { position: relative; overflow: hidden; background: var(--ink); color: #fff; border-radius: 36px; padding: 80px 32px; text-align: center; }
.cta-card::before { content: ''; position: absolute; width: 520px; height: 520px; right: -160px; top: -260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,122,0,.3), transparent 62%); }
.cta-card > * { position: relative; }
.cta-card h2 { font-size: clamp(32px, 4.4vw, 54px); font-weight: 300; line-height: 1.06; max-width: 20ch; margin: 0 auto; }
.cta-card p { color: rgba(255,255,255,.66); margin: 16px auto 30px; max-width: 48ch; }

/* Footer */
.foot { padding: 40px 0 48px; }
.foot-in { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 26px; font-size: 13px; color: var(--muted); }
.foot-in a { color: var(--muted); text-decoration: none; margin-left: 18px; }
.foot-in img { height: 26px; width: auto; }

/* Dotted wave separators (same as the homepage) */
.dot-sep { height: 110px; overflow: hidden; }
.dot-sep canvas { display: block; width: 100%; height: 100%;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 35%, transparent 100%);
            mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 35%, transparent 100%); }

/* Reveal */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js .rv.in { opacity: 1; transform: none; }

@media (max-width: 1000px) {
    .nav-links { display: none; }
    .hero-grid, .split, .steps-foot { grid-template-columns: 1fr; }
    .hero-visual { margin: 10px 0 20px; }
    .collage { height: 460px; }
    .figs, .tools, .hl { grid-template-columns: repeat(2, 1fr); }
    .hl div { border-right: 0 !important; padding-left: 0 !important; }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .bento { grid-template-columns: 1fr; }
    .tile--big { grid-row: auto; }
    .ai-grid, .plans3 { grid-template-columns: 1fr; }
    .pills4 { grid-template-columns: 1fr 1fr; }
    .ord, .m-ai { grid-template-columns: 1fr; }
    .m-win-body { grid-template-columns: 150px 1fr; }
    .tl-track { left: 23px; right: auto; top: 24px; bottom: 24px; width: 2px; height: auto; }
    .tl-fill { width: 100% !important; height: 0; transition: height 1.8s cubic-bezier(.4,0,.2,1) .3s; }
    .tl.in .tl-fill { height: 100%; }
    .tl-steps { grid-template-columns: 1fr; gap: 18px; text-align: left; }
    .tl-steps li { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; align-items: center; }
    .tl-steps li .tl-dot { grid-row: span 2; }
    .tl-steps h3 { margin-top: 0; }
    .bld-stage { padding: 28px 28px 0; height: 460px; }
    .bld-ai { position: relative; right: auto; top: auto; width: auto; margin: -60px 16px 0; }
    .split--rev .split-media { order: 0; }
}
@media (max-width: 640px) {
    .sec { padding: 64px 0; }
    .hero { padding: 116px 0 80px; }
    .hero-visual { margin: 10px 0 30px; }
    .collage { height: 380px; border-radius: 28px; }
    .collage-grid { width: 190%; left: -45%; top: -18%; }
    .collage-grid, .collage-col { gap: 10px; }
    .collage-col--down { margin-top: 50px; }
    .collage-col img { border-radius: 12px; }
    .stage { padding: 16px; border-radius: 24px; }
    .bld-stage { padding: 18px 18px 0; height: 400px; }
    .m-win-body { grid-template-columns: 1fr; height: 360px; }
    .m-side { display: none; }
    .m-seg { display: none; }
    .m-stage { padding: 20px 12px; border-radius: 24px; }
    .m-stage--hero { height: 520px; }
    .m-phone { width: 230px; border-radius: 34px; }
    .m-screen { height: 440px; border-radius: 27px; }
    .m-card--order { left: -4px; top: 18px; width: 200px; padding: 12px; }
    .m-card--ship { right: -4px; bottom: 18px; width: 190px; padding: 12px; }
    .buy { grid-template-columns: 1fr; }
    .m-prod { height: 110px; }
    .m-field, .m-offer em { display: none; }
    .m-sticky { font-size: 9px; }
    .buy-down { margin-top: 0; }
    .buy { gap: 10px; }
    .buy-down { margin-top: 30px; }
    .stage img { border-radius: 12px; }
    .phone-float { width: 112px; left: -24px; bottom: -26px; border-radius: 20px; padding: 5px; }
    .phone-float img { border-radius: 15px; }
    .chip-float { right: -6px; top: 20px; padding: 8px 12px; }
    .chip-float b { font-size: 18px; }
    .figs { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: -36px; }
    .fig { padding: 16px; }
    .fig-n { font-size: 34px; }
    .ps { grid-template-columns: 1fr; }
    .ps-card { padding: 26px 22px; }
    .steps, .tools { grid-template-columns: 1fr; }
    .hl { grid-template-columns: 1fr; }
    .ai { margin: 0 8px; border-radius: 28px; }
    .cta-card { padding: 56px 22px; border-radius: 28px; }
    .dot-sep { height: 72px; }
}
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; transition: none; } }

/* Soft cross-page transition (View Transitions; ignored where unsupported) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .28s ease both; }
::view-transition-new(root) { animation: vtIn .42s ease both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Before → after: one row per problem, the old way struck, the new way in ink */
.swap { max-width: 860px; margin: 40px auto 0; }
.swap-head, .swap-row { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; }
.swap-head { padding: 0 4px 12px; font-family: var(--font-title); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.swap-head span:last-child { color: var(--accent); }
.swap-row { padding: 18px 4px; border-top: 1px solid var(--line); }
.swap-old { font-size: 18px; color: rgba(17,17,17,.4); text-decoration: line-through; text-decoration-color: rgba(17,17,17,.25); }
.swap-new { font-family: var(--font-title); font-size: 24px; color: var(--ink); }
.swap-arrow { position: relative; height: 1px; margin: 0 12px; background: linear-gradient(90deg, rgba(17,17,17,.1), var(--orange)); }
.swap-arrow::after { content: ''; position: absolute; right: -1px; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--orange); border-right: 1px solid var(--orange); transform: rotate(45deg); }
.js .swap.rv .swap-arrow { transform: scaleX(0); transform-origin: left; transition: transform .6s ease; }
.js .swap.rv.in .swap-arrow { transform: none; }
.js .swap.rv.in .swap-row:nth-child(3) .swap-arrow { transition-delay: .12s; }
.js .swap.rv.in .swap-row:nth-child(4) .swap-arrow { transition-delay: .24s; }
.js .swap.rv.in .swap-row:nth-child(5) .swap-arrow { transition-delay: .36s; }
@media (max-width: 640px) {
    .swap-head { display: none; }
    .swap-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
    .swap-arrow { display: none; }
    .swap-old { font-size: 15px; }
    .swap-new { font-size: 21px; }
}

/* Text tiles (marketing tools, supplier facts): no grey boxes — a hairline
   grid with a big title, like the summary list. */
.tools { gap: 0; border-top: 1px solid var(--line); }
.tool { background: transparent; border-radius: 0; padding: 24px 24px 26px 0; border-bottom: 1px solid var(--line); }
.tool:hover { background: transparent; transform: none; }
.tool:not(:nth-child(4n+1)) { padding-left: 24px; border-left: 1px solid var(--line); }
.tool h3 { font-size: 22px; font-weight: 300; }
.tool h3::before { content: ''; display: block; width: 18px; height: 2px; background: var(--orange); margin-bottom: 14px; transition: width .3s ease; }
.tool:hover h3::before { width: 36px; }
.pill4 { background: transparent; border-radius: 0; border-top: 1px solid var(--line); padding: 18px 0 6px; }
@media (max-width: 1000px) {
    .tool { padding-left: 0 !important; border-left: 0 !important; padding-right: 16px; }
    .tool:nth-child(2n) { padding-left: 16px !important; border-left: 1px solid var(--line) !important; }
}
@media (max-width: 640px) {
    .tool:nth-child(2n) { padding-left: 0 !important; border-left: 0 !important; }
}

/* 3-column variant of the text tiles */
.tools--3 { grid-template-columns: repeat(3, 1fr); }
.tools--3 .tool:not(:nth-child(4n+1)) { padding-left: 0; border-left: 0; }
.tools--3 .tool:not(:nth-child(3n+1)) { padding-left: 24px; border-left: 1px solid var(--line); }
@media (max-width: 1000px) { .tools--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .tools--3 { grid-template-columns: 1fr; } }

/* Click demos: hand-drawn yellow arrows + a yellow tap pulse */
.m-arrows { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; overflow: visible; }
.m-arrow { transition: opacity .45s ease; }
.m-arrow.is-gone { opacity: 0; }
.m-arrow-line, .m-arrow-head { fill: none; stroke: #f5b301; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 3px 6px rgba(245, 179, 1, .35)); }
.m-arrow-line { transition: stroke-dashoffset .6s cubic-bezier(.6, .05, .25, 1); }
.m-arrow.is-drawn .m-arrow-line { stroke-dashoffset: 0 !important; }
.m-arrow-head { opacity: 0; transition: opacity .15s ease .5s; }
.m-arrow.is-drawn .m-arrow-head { opacity: 1; }
.m-arrow-dot { fill: #f5b301; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.2); transition: opacity .2s, transform .3s; }
.m-arrow.is-drawn .m-arrow-dot { opacity: 1; transform: none; }
.is-tapped { box-shadow: 0 0 0 4px rgba(245, 179, 1, .55), 0 0 26px rgba(245, 179, 1, .45) !important; transition: box-shadow .25s ease; }
.is-pressed { transform: scale(.96); transition: transform .12s ease; }
.m-offer, .m-btn, [data-demo-total] { transition: border-color .25s, background .25s, color .25s, transform .12s; }
.m-btn.is-done { background: #1f9d55; }
.m-frise span { transition: border-color .4s, color .4s; }
.m-track p, .m-track p::before { transition: color .35s, background .35s, box-shadow .35s; }
.m-toast {
    position: absolute; left: 12px; right: 12px; bottom: 64px; z-index: 5; padding: 10px 12px; border-radius: 12px;
    background: #1f9d55; color: #fff; font-size: 11px; text-align: center;
    opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s;
}
.m-toast.is-on { opacity: 1; transform: none; }

.is-picked { box-shadow: 0 0 0 3px var(--orange), 0 20px 40px rgba(17,17,17,.18) !important; transform: translateY(-3px); transition: transform .25s, box-shadow .25s; }
.m-cols div, .w-card { transition: transform .25s, box-shadow .25s; }
.w-status { transition: background .3s, color .3s; }
.m-bub { transition: opacity .35s ease, transform .35s ease; }
.m-bub.is-hidden { opacity: 0; transform: translateY(8px); }
.w-tier { transition: background .3s, box-shadow .3s; }
.w-shot .m-btn.is-done { background: #1f9d55; }

/* Keyword line inside the h1 (SEO), small and quiet above the slogan */
.h1-kicker { display: block; margin-bottom: 14px; font-family: var(--font-body); font-size: 14px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.62); }

.seo-links { margin-top: 22px; font-size: 14px; color: var(--muted); line-height: 1.8; }
.seo-links a { color: var(--ink-2); text-decoration: underline; text-decoration-color: rgba(17,17,17,.25); text-underline-offset: 3px; }