/* Slotly marketing site, v6 build (#755).
   Source of truth: reports/cdo/mockup_v6_{home,owners,consumers,story}_2026-10-07.html
   and reports/cdo/V5_BRAND_SYSTEM_SPEC_2026-10-07.md (Paper tokens).
   Public pages are Paper only (spec section 9.2), so there is no Night palette here.
   Button rule (spec 2.1): white text on pink uses #d01a7d (5.09:1). #e91e8c is for
   marks only (wordmark period, dots, slider thumbs, doodle accents), never small text. */

:root {
  color-scheme: light;
  --cream:#fbf6f0; --paper:#fffcf8; --blush:#f8e9ef; --ink:#2b1a2e; --ink-2:#4f3f52; --ink-3:#66576a; --rule:#e6d9dd;
  --pink:#e91e8c; --pink-btn:#d01a7d; --pink-ink:#b8106a; --pink-soft:rgba(233,30,140,.10);
  --green:#1d6e47; --green-soft:rgba(29,110,71,.08);
  /* v6 mockup tints (spec-derived, used as borders and text on plum) */
  --blush-rule:#efd2de; --blush-rule-2:#ecd3dd; --input-rule:#d9c9cf; --on-plum:#e9dfe6; --on-plum-2:#cbbcc7;
  --on-photo:#f1e7ec; --on-photo-2:#dccfd6; --sand:#f3e7d6; --sand-rule:#e8d6bd; --on-plum-pink:#f6b6d6;
  --white:#ffffff;
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
* { box-sizing:border-box; }
html, body { margin:0; overflow-x:hidden; }
body { background:var(--cream); color:var(--ink-2); font:400 17px/1.6 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; }
img, video { display:block; max-width:100%; }
p { margin:0; }
figure { margin:0; }
:focus-visible { outline:2px solid var(--pink); outline-offset:3px; }
.wrap { max-width:1180px; margin:0 auto; padding:0 16px; }
@media (min-width:640px){ .wrap { padding:0 32px; } }
.narrow { max-width:820px; }
.warm img { filter:sepia(.12) saturate(.92) contrast(1.03); }
.tap { min-height:44px; display:inline-flex; align-items:center; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Nav: the <nav> landmark wraps the wordmark and the links (gate0 RULE-022). */
.nav { display:flex; align-items:center; justify-content:space-between; gap:12px; height:72px; }
.wordmark { font:600 28px/1 var(--serif); letter-spacing:-.01em; color:var(--ink); text-decoration:none; }
.wordmark span { color:var(--pink); /* mark */ }
.nav .nl { display:flex; align-items:center; gap:22px; font-size:15px; }
.nav .nl a { text-decoration:none; color:var(--ink-2); min-height:44px; display:inline-flex; align-items:center; white-space:nowrap; }
.nav .nl a:hover { color:var(--ink); }
.nav .nl a.hide-sm { display:none; }
@media (min-width:760px){ .nav .nl a.hide-sm { display:inline-flex; } }
@media (max-width:420px){ .nav .nl { gap:12px; font-size:14px; } .wordmark { font-size:25px; } }
.nav .nl a.pill { background:var(--pink-btn); color:var(--white); border-radius:999px; padding:0 16px; font-weight:700; }
.nav .nl a.pill:hover { background:var(--pink-ink); color:var(--white); }
.nav .nl a.here { color:var(--ink); font-weight:600; }
.on-dark .wordmark, .on-dark .nav .nl a { color:var(--cream); }
.on-dark .nav .nl a:hover { color:var(--white); }

/* Type */
.eyebrow { font:600 13px/1.2 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--ink); display:inline-flex; align-items:center; gap:8px; margin:0; }
.eyebrow::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--pink); flex:none; }
.eyebrow.light { color:var(--cream); }
h1, h2, h3 { color:var(--ink); font-weight:400; margin:0; }
h1 { font:400 42px/1.04 var(--serif); letter-spacing:-.02em; }
h1 em, h2 em { font-style:italic; }
@media (min-width:640px){ h1 { font-size:60px; } }
@media (min-width:1100px){ h1 { font-size:76px; } }
h2 { font:400 34px/1.1 var(--serif); letter-spacing:-.015em; }
@media (min-width:640px){ h2 { font-size:44px; } }
h3 { font:600 19px/1.3 var(--sans); }
.serif-h3 { font:400 24px/1.2 var(--serif); letter-spacing:-.01em; }
.lede { font-size:19px; line-height:1.55; }
.muted { color:var(--ink-3); }
.fine { font-size:14px; color:var(--ink-3); }
.mt8 { margin-top:8px; } .mt12 { margin-top:12px; } .mt16 { margin-top:16px; } .mt24 { margin-top:24px; } .mt32 { margin-top:32px; } .mt48 { margin-top:48px; }
.center { text-align:center; }
.strong { color:var(--ink); font-weight:600; }

/* Buttons */
.actions { display:flex; flex-wrap:wrap; gap:12px; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:0 28px; border-radius:999px; font:700 18px/1.1 var(--sans); text-decoration:none; text-align:center; border:0; cursor:pointer; }
.btn-pink { background:var(--pink-btn); color:var(--white); box-shadow:0 10px 30px rgba(233,30,140,.22); }
.btn-pink:hover { background:var(--pink-ink); }
.btn-line { border:1.5px solid var(--ink); color:var(--ink); background:transparent; }
.btn-line-light { border:1.5px solid rgba(251,246,240,.85); color:var(--cream); background:rgba(43,26,46,.25); }
.btn-big { min-height:60px; padding:0 40px; font-size:19px; }
.btn-block { width:100%; }
@media (max-width:639px){ .actions .btn { width:100%; } }
.link { font-weight:700; color:var(--ink); text-decoration:none; border-bottom:2px solid var(--pink); padding:10px 0 2px; }
.link:hover { color:var(--pink-ink); }

/* Sections */
.sec { padding:72px 0; }
@media (min-width:900px){ .sec { padding:96px 0; } }
.sec-tight { padding:48px 0; }
.blush { background:var(--blush); }
.plum { background:var(--ink); color:var(--on-plum); }
.plum h2, .plum h3 { color:var(--cream); }
.head { max-width:46rem; margin-bottom:36px; }
.head h2 { margin-top:14px; }
.head p { margin-top:14px; }

/* Cards and chips */
.card { background:var(--paper); border:1px solid var(--rule); border-radius:20px; padding:24px; }
.card h3 { margin:12px 0 6px; }
.num { font:400 30px/1 var(--serif); color:var(--pink-ink); }
.grid { display:grid; gap:16px; }
@media (min-width:760px){ .g2 { grid-template-columns:1fr 1fr; } .g3 { grid-template-columns:repeat(3,1fr); } }
@media (min-width:1000px){ .g4 { grid-template-columns:repeat(4,1fr); } }
@media (min-width:760px) and (max-width:999px){ .g4 { grid-template-columns:1fr 1fr; } }
.chip { display:inline-flex; align-items:center; gap:7px; font:600 12px/1 var(--sans); letter-spacing:.04em; text-transform:uppercase; padding:8px 11px; border-radius:999px; background:var(--paper); color:var(--ink); border:1px solid var(--rule); white-space:nowrap; }
.chip::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--green); }
.chip.soon { background:transparent; border:1.5px dashed var(--ink-3); color:var(--ink-2); }
.chip.soon::before { background:transparent; border:1.5px solid var(--ink-3); width:5px; height:5px; }
.chip.solid { background:var(--ink); color:var(--cream); border-color:var(--ink); }
.chip.solid::before { background:var(--pink); }
.chip.plain::before { background:var(--ink-3); }
.story .chip, .storycard .chip { max-width:100%; box-sizing:border-box; white-space:normal; line-height:1.25; }
.story .chip::before, .storycard .chip::before { flex:none; }

/* Photo frames */
.frame { position:relative; border-radius:22px; overflow:hidden; }
.frame img { width:100%; height:100%; object-fit:cover; }
.cap { position:absolute; left:0; right:0; bottom:0; padding:48px 18px 16px; background:linear-gradient(180deg, rgba(43,26,46,0), rgba(43,26,46,.78)); color:var(--white); font:italic 400 17px/1.35 var(--serif); }

/* Steps list */
.steps-ol { list-style:none; padding:0; margin:24px 0 0; display:grid; gap:18px; }
.steps-ol li { display:flex; gap:14px; }
.steps-ol .n { flex:none; width:36px; height:36px; border-radius:50%; border:1.5px solid var(--ink); color:var(--ink); display:flex; align-items:center; justify-content:center; font:400 17px/1 var(--serif); }
.steps-ol .t { color:var(--ink); font-weight:600; }

/* Receipt */
.receipt { background:var(--paper); border:1px solid var(--rule); border-radius:18px; padding:16px 18px; box-shadow:0 18px 40px rgba(43,26,46,.12); }
.receipt .k { font:600 11px/1.2 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--pink-ink); }
.receipt .fill { margin-top:12px; border-radius:12px; padding:10px 12px; text-align:center; background:var(--green-soft); border:1px solid rgba(29,110,71,.25); }
.receipt .fill b { color:var(--green); display:block; font-size:15px; }

/* ROI calculator (math lives in each page's calcROI, unchanged from the live site) */
.calc { background:var(--paper); border:1px solid var(--rule); border-radius:24px; padding:22px; max-width:880px; margin:0 auto; }
@media (min-width:640px){ .calc { padding:36px; } }
.calc-grid { display:grid; gap:32px; }
@media (min-width:700px){ .calc-grid { grid-template-columns:1fr 1fr; } }
.slider-row { display:flex; justify-content:space-between; gap:12px; margin-bottom:10px; font-size:15px; }
.slider-row label { color:var(--ink-2); font-weight:600; }
.slider-row span { color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; }
.sliders { display:grid; gap:26px; }
input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:3px; background:var(--rule); outline:none; margin:10px 0; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:var(--pink); cursor:pointer; border:3px solid var(--white); box-shadow:0 2px 6px rgba(43,26,46,.3); }
input[type=range]::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:var(--pink); border:3px solid var(--white); cursor:pointer; }
.result { background:var(--blush); border:1px solid var(--blush-rule); border-radius:18px; padding:22px; }
.result .big { font:400 48px/1.05 var(--serif); color:var(--ink); margin:4px 0 16px; font-variant-numeric:tabular-nums; }
.line { display:flex; justify-content:space-between; gap:12px; font-size:15px; margin-bottom:8px; }
.line .fee { color:var(--pink-ink); font-weight:700; }
.line .keep { color:var(--green); font-weight:700; }
.okbox { font-size:13px; text-align:center; color:var(--green); background:var(--green-soft); border:1px solid rgba(29,110,71,.2); border-radius:10px; padding:8px; margin-top:10px; }
.assume { font-size:13px; font-style:italic; color:var(--ink-3); margin-top:12px; }
.badge { display:inline-block; font:600 12px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; padding:8px 12px; border-radius:999px; background:var(--pink-soft); color:var(--pink-ink); }

/* CTA band */
.cta-band { background:var(--ink); color:var(--on-plum); border-radius:28px; padding:40px 22px; text-align:center; position:relative; overflow:hidden; }
@media (min-width:640px){ .cta-band { padding:64px 48px; } }
.cta-band h2 { color:var(--cream); margin-top:14px; }
.cta-band p { max-width:36rem; margin:16px auto 0; }
.cta-band .btn { margin-top:28px; }
.cta-band .fine { color:var(--on-plum-2); }

/* FAQ */
details { background:var(--paper); border:1px solid var(--rule); border-radius:18px; }
details + details { margin-top:12px; }
summary { list-style:none; cursor:pointer; padding:16px 20px; min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:16px; color:var(--ink); font-weight:600; }
summary::-webkit-details-marker { display:none; }
summary .plus { font:400 26px/1 var(--serif); color:var(--pink-ink); transition:transform .2s; flex:none; }
details[open] summary .plus { transform:rotate(45deg); }
details .ans { padding:0 20px 20px; font-size:16px; display:grid; gap:10px; }

/* Form */
.inp { width:100%; background:var(--white); border:1px solid var(--input-rule); border-radius:12px; padding:12px 14px; color:var(--ink); font:400 16px/1.3 var(--sans); min-height:50px; }
.inp:focus { border-color:var(--pink-btn); box-shadow:0 0 0 2px var(--pink); }
.lab { display:block; font:600 12px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px; }

/* Footer */
footer { border-top:1px solid var(--rule); padding:36px 0 44px; font-size:14px; color:var(--ink-3); }
footer .links { display:flex; flex-wrap:wrap; gap:4px 18px; margin-top:12px; }
footer .links a { text-decoration:none; min-height:44px; display:inline-flex; align-items:center; }
footer .links a:hover { color:var(--ink); }