/* ============================================================
Ductsmith — premium editorial layer
Loaded AFTER builder.css to elevate the generated site:
Fraunces (display serif) + Hanken Grotesk (body), warm-tinted
depth, hairline rules, paper grain, refined components.
Fonts are -loaded in by enhance.mjs.
============================================================ */
:root {
--font-display: "Newsreader", Georgia, "Times New Roman", serif;
--font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
--gold: #b3873a; /* refined brass for fine accents (decorative) */
--gold-ink: #7d5a1e; /* deep brass for small TEXT — 4.5:1 on cream (WCAG AA) */
--gold-soft: #c9a35a;
--ink-2: #56624f; /* warm secondary text */
/* warm-tinted depth (the builder defaults to cold blue shadows) */
--c-line: #e4dbc4;
--shadow-sm: 0 1px 2px rgba(43,38,20,.05), 0 8px 22px rgba(43,38,20,.07);
--shadow: 0 2px 4px rgba(43,38,20,.05), 0 14px 32px rgba(43,38,20,.10), 0 34px 70px rgba(43,38,20,.10);
}
/* ---------- Type foundations ---------- */
body {
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: var(--c-ink);
letter-spacing: -0.004em;
}
h1, h2, h3, h4, .plan .price, .stat-num, .brand-name {
font-family: var(--font-display);
font-weight: 600;
letter-spacing: -0.018em;
font-optical-sizing: auto;
}
h1 { font-size: clamp(42px, 6.4vw, 78px); line-height: 1.02; font-weight: 600; }
h2 { font-size: clamp(31px, 4.3vw, 52px); line-height: 1.06; font-weight: 580; }
h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.012em; }
.lead {
font-family: var(--font-body);
font-size: clamp(17px, 1.5vw, 21px);
line-height: 1.62;
color: var(--ink-2);
letter-spacing: -0.003em;
max-width: 60ch;
}
/* Eyebrow — fine tracked label with a brass hairline tick */
.eyebrow {
font-family: var(--font-body);
font-size: 12px;
letter-spacing: 0.28em;
font-weight: 700;
color: var(--gold-ink);
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: 0.55; }
.eyebrow.center { justify-content: center; }
.eyebrow.center::after { content: ""; width: 26px; height: 1px; background: currentColor; opacity: 0.55; }
/* Tracked labels can be wider than a phone — tighten + allow wrap so they
don't clip at the right edge. */
@media (max-width: 560px) {
.eyebrow { font-size: 11px; letter-spacing: 0.13em; gap: 9px; row-gap: 3px; flex-wrap: wrap; justify-content: center; }
.eyebrow::before, .eyebrow.center::after { width: 16px; }
}
/* ---------- Paper grain (tactile depth, very subtle) ---------- */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 9998;
pointer-events: none;
opacity: 0.04;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 140px;
}
/* ---------- Rhythm ---------- */
section { padding: clamp(76px, 11vh, 156px) 0; }
.container { max-width: 1180px; padding: 0 28px; }
section.alt { background: var(--c-alt); }
/* More side breathing room + a slightly smaller hero headline on phones so the
text isn't hugging the screen edges. */
@media (max-width: 560px) {
.container { padding: 0 34px; }
.hero-copy h1 { font-size: clamp(36px, 7.8vw, 44px); }
}
/* ---------- Nav ---------- */
.site-nav { backdrop-filter: blur(14px) saturate(1.1); border-bottom: 1px solid transparent; }
.brand-name { font-weight: 600; font-size: 19px; letter-spacing: -0.01em; }
.nav-links a { position: relative; font-weight: 500; letter-spacing: 0.005em; color: var(--ink-2); }
.nav-links a::after {
content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1.5px;
background: var(--gold); transition: right 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-links a:hover { color: var(--c-ink); }
.nav-links a:hover::after { right: 0; }
/* ---------- Hero — atmospheric warmth ---------- */
.hero { background: var(--c-bg); }
.hero::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(60% 55% at 50% 8%, rgba(255,251,240,0.9), transparent 60%),
radial-gradient(40% 40% at 16% 24%, rgba(63,125,86,0.10), transparent 70%),
radial-gradient(38% 40% at 86% 78%, rgba(179,135,58,0.12), transparent 70%);
}
/* The hero's grid column was `auto`-sized to the headline's max-content (~600px),
overflowing small screens. Constrain the column to the container width so the
headline wraps instead of pushing the whole page wider than the viewport. */
.hero-center { grid-template-columns: minmax(0, 1fr); }
.hero-center .hero-copy { width: 100%; padding: 16vh 0 14vh; position: relative; z-index: 2; }
.hero-copy h1 { margin-bottom: 0.34em; }
.hero-copy .lead { font-size: clamp(18px, 1.7vw, 23px); color: var(--ink-2); }
/* Hero trust badges (the "14-day launch ✓" row) */
.badges, .hero-badges { margin-top: 30px; }
.badge, .hero-badges span {
font-weight: 600; color: var(--ink-2); font-size: 13.5px; letter-spacing: 0.01em;
}
/* ---------- Buttons (refine; lift handled in scrolly.js) ---------- */
/* Soft-rectangle buttons (was a full pill) — reads more editorial/premium and
agrees with the serif type + squared cards. Small label pills stay round. */
.btn, .nav-cta { font-family: var(--font-body); letter-spacing: 0.005em; font-weight: 700; border-radius: 12px; }
.btn { padding: 15px 28px; }
.btn-ghost { border-width: 1.5px; }
/* ---------- Cards (feature grid) ---------- */
.grid { gap: 22px; margin-top: 44px; }
.card {
border: 1px solid var(--c-line);
border-radius: 18px;
box-shadow: var(--shadow-sm);
background: linear-gradient(180deg, #fff, #fffdf7);
transition: transform 0.45s cubic-bezier(0.22,1,0.36,1), box-shadow 0.45s, border-color 0.45s;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: #d8cca8; }
.card .pic.icon { font-size: 34px; height: auto; padding: 24px 22px 0; background: none; justify-content: flex-start; }
.card-body { padding: 18px 22px 24px; }
.card-body .tag { color: var(--gold); letter-spacing: 0.16em; font-size: 10.5px; }
.card-body h3 { margin-bottom: 0.4em; }
.card-body p { color: var(--ink-2); line-height: 1.55; }
/* ---------- Stats — Fraunces numerals + brass hairline dividers ---------- */
.stats { gap: 0; }
.stat { padding: 6px 28px; position: relative; }
.stats > div + div::before {
content: ""; position: absolute; left: 0; top: 14%; height: 72%; width: 1px;
background: linear-gradient(var(--c-line), transparent);
}
.stat-num { color: var(--c-primary); font-weight: 560; font-variation-settings: "opsz" 144; letter-spacing: -0.03em; }
.stat-label { color: var(--c-muted); font-weight: 600; font-size: 13.5px; letter-spacing: 0.01em; }
/* ---------- Split (live demo) ---------- */
.split { gap: 60px; }
.split-media { border-radius: 18px; box-shadow: var(--shadow); border: 1px solid rgba(43,38,20,.06); }
.checks li { font-weight: 600; }
.checks li::before { background: var(--c-primary); box-shadow: 0 2px 6px rgba(45,90,61,.3); }
.checks li span { color: var(--ink-2); }
/* ---------- Pricing ---------- */
.plans { gap: 26px; margin-top: 46px; }
.plan { border-radius: 20px; padding: 32px; box-shadow: var(--shadow-sm); transition: transform 0.4s, box-shadow 0.4s; }
.plan:hover { box-shadow: var(--shadow); }
.plan.featured {
border: 1px solid var(--gold);
box-shadow: 0 2px 4px rgba(43,38,20,.06), 0 20px 44px rgba(45,90,61,.16), 0 0 0 1px rgba(179,135,58,.25) inset;
background: linear-gradient(180deg, #fffdf6, #fff);
}
.plan-badge { background: var(--gold); letter-spacing: 0.12em; box-shadow: 0 4px 10px rgba(43,38,20,.18); }
.plan h3 { font-size: 22px; }
.plan .price { color: var(--c-ink); font-size: 46px; font-weight: 560; }
.plan .price span { font-family: var(--font-body); color: var(--c-muted); }
.plan ul li { font-size: 15px; color: var(--ink-2); }
.plan ul li::before { color: var(--gold); }
/* ---------- FAQ — editorial accordion ---------- */
.faq { gap: 14px; }
.faq details { border: 1px solid var(--c-line); border-radius: 16px; background: var(--c-card); transition: box-shadow 0.3s, border-color 0.3s; }
.faq details[open] { box-shadow: var(--shadow-sm); border-color: #d8cca8; }
.faq summary { font-family: var(--font-display); font-weight: 600; font-size: 18px; padding: 20px 24px; letter-spacing: -0.01em; }
.faq summary::after { color: var(--gold); font-weight: 400; font-size: 24px; }
.faq .faq-a { padding: 0 24px 22px; color: var(--ink-2); line-height: 1.6; }
/* ---------- CTA band ---------- */
.cta-band.on-grad { background: linear-gradient(135deg, #234c34, #2d5a3d 55%, #355f44); }
.cta-band.on-grad h2 { font-weight: 560; }
.cta-band.on-grad .lead { color: rgba(255,255,255,.86); }
/* ---------- Contact ---------- */
.contact-form { border-radius: 18px; box-shadow: var(--shadow-sm); padding: 28px; }
.contact-form input, .contact-form textarea { border-radius: 12px; padding: 14px 16px; transition: border-color 0.25s, box-shadow 0.25s; }
.contact-form input:focus, .contact-form textarea:focus { box-shadow: 0 0 0 3px rgba(45,90,61,.12); }
.contact-item b { font-family: var(--font-body); font-weight: 700; }
/* ---------- Footer ---------- */
.foot-col h4 { font-family: var(--font-body); letter-spacing: 0.14em; color: var(--gold); }
.foot-col a { color: var(--ink-2); }
.foot-base { border-top: 1px solid var(--c-line); }
/* ---------- Device mockup (live demo) ---------- */
#demo .device-stage { position: relative; aspect-ratio: auto; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.browser-frame {
border-radius: 14px; overflow: hidden; background: #fff;
border: 1px solid rgba(43,38,20,.12);
box-shadow: 0 2px 4px rgba(43,38,20,.06), 0 26px 52px rgba(43,38,20,.18), 0 64px 96px rgba(43,38,20,.12);
}
.bf-bar {
height: 42px; display: flex; align-items: center; gap: 14px; padding: 0 16px;
background: linear-gradient(#f5f0e2, #ece5d3); border-bottom: 1px solid rgba(43,38,20,.08);
}
.bf-dots { display: inline-flex; gap: 7px; flex: none; }
.bf-dots i { width: 11px; height: 11px; border-radius: 50%; }
.bf-dots i:nth-child(1) { background: #e0795f; }
.bf-dots i:nth-child(2) { background: #d8a94a; }
.bf-dots i:nth-child(3) { background: #6fae6a; }
.bf-url {
flex: 1; max-width: 300px; margin: 0 auto; text-align: center; white-space: nowrap;
font-family: var(--font-body); font-size: 12.5px; color: #8a8064; letter-spacing: 0.01em;
background: #fffdf7; border: 1px solid rgba(43,38,20,.08); border-radius: 999px; padding: 5px 14px;
overflow: hidden; text-overflow: ellipsis;
}
.bf-screen img { width: 100%; height: auto; display: block; }
.phone-frame {
position: absolute; right: -14px; bottom: -32px; width: 27%; min-width: 120px; max-width: 168px;
background: #0e1512; border-radius: 26px; padding: 7px; border: 1px solid rgba(255,255,255,.08);
box-shadow: 0 2px 4px rgba(43,38,20,.12), 0 26px 52px rgba(43,38,20,.32);
}
.phone-frame::before {
content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
width: 32%; height: 5px; border-radius: 5px; background: rgba(255,255,255,.16); z-index: 2;
}
.pf-screen { border-radius: 20px; overflow: hidden; }
.pf-screen img { width: 100%; height: auto; display: block; }
@media (max-width: 860px) { .phone-frame { right: -6px; bottom: -18px; width: 30%; } }
/* ---------- Comparison ("how I'm different") ---------- */
#compare .eyebrow { display: flex; justify-content: center; margin-bottom: 16px; }
#compare h2 { text-align: center; max-width: 20ch; margin: 0 auto; }
.cmp-grid { display: grid; grid-template-columns: 1fr 1.14fr 1fr; gap: 20px; align-items: stretch; margin-top: 52px; }
.cmp-card { border: 1px solid var(--c-line); border-radius: 20px; padding: 30px 28px; background: var(--c-card); }
.cmp-card h3 { font-size: 19px; margin-bottom: 20px; letter-spacing: -0.01em; }
.cmp-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.cmp-card li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.4; }
.cmp-card li::before {
position: absolute; left: 0; top: 0; width: 19px; height: 19px; border-radius: 50%;
display: grid; place-items: center; font-size: 11px; font-weight: 800;
}
.cmp-them { background: color-mix(in srgb, var(--c-alt) 55%, #fff); }
.cmp-them h3 { color: var(--ink-2); font-weight: 580; }
.cmp-them li { color: #57644f; } /* darkened from var(--c-muted) — 4.5:1 on the tinted card (WCAG AA) */
.cmp-them li::before { content: "\00d7"; color: #b08a86; background: rgba(176,138,134,.15); }
.cmp-us {
position: relative; background: linear-gradient(180deg, #fffdf6, #fff); border: 1px solid var(--gold);
transform: translateY(-12px);
box-shadow: 0 2px 4px rgba(43,38,20,.06), 0 28px 56px rgba(45,90,61,.18), 0 0 0 1px rgba(179,135,58,.22) inset;
}
.cmp-us .cmp-tag {
position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
background: var(--gold-ink); color: #fff; font-family: var(--font-body); /* AA on the deep brass */
font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
padding: 6px 16px; border-radius: 999px; box-shadow: 0 4px 10px rgba(43,38,20,.18); white-space: nowrap;
}
.cmp-us h3 { color: var(--c-primary); }
.cmp-us li { color: var(--c-ink); font-weight: 500; }
.cmp-us li::before { content: "\2713"; color: #fff; background: var(--c-primary); }
@media (max-width: 860px) {
.cmp-grid { grid-template-columns: 1fr; gap: 30px; margin-top: 44px; }
.cmp-us { order: -1; transform: none; }
}
/* ---------- Process timeline ("working together") ---------- */
#process .eyebrow { display: flex; justify-content: center; margin-bottom: 16px; }
#process h2 { text-align: center; max-width: 18ch; margin: 0 auto; }
.tl { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; position: relative; }
.tl::before { content: ""; position: absolute; top: 19px; left: 9%; right: 9%; height: 2px; background: linear-gradient(90deg, transparent, var(--c-line) 12%, var(--c-line) 88%, transparent); }
.tl-step { position: relative; padding-top: 58px; }
.tl-node {
position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%;
background: var(--c-bg); border: 1.5px solid var(--gold); color: var(--gold);
display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 17px;
box-shadow: 0 4px 12px rgba(179,135,58,.18);
}
.tl-day { display: block; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 8px; }
.tl-step h3 { font-size: 20px; margin-bottom: 8px; }
.tl-step p { color: var(--ink-2); font-size: 15px; line-height: 1.5; margin: 0; max-width: 24ch; }
@media (max-width: 860px) {
.tl { grid-template-columns: 1fr; gap: 0; margin-top: 42px; }
.tl::before { left: 19px; right: auto; top: 40px; bottom: 30px; width: 2px; height: auto; background: linear-gradient(180deg, transparent, var(--c-line) 8%, var(--c-line) 92%, transparent); }
.tl-step { padding: 0 0 34px 62px; }
.tl-step p { max-width: none; }
}
/* ============================================================
MAP HERO — "Answered First in OC" (P2 — static shell)
Cream daylight stage: copy left, SVG OC map right. The motion
(incoming ripples, brass "answered" pulses, floating tags,
radar sweep, live counter) is layered on in P3 by a lazy
hero-map.js. This block is the static, first-paint structure.
============================================================ */
.dm-hero { display: flex; align-items: center; min-height: clamp(560px, 82vh, 880px); }
.dm-hero-inner {
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
gap: clamp(32px, 5vw, 72px);
align-items: center;
width: 100%;
position: relative;
z-index: 2;
}
.dm-copy { padding: 0; }
.dm-copy h1 { font-size: clamp(38px, 4.6vw, 62px); margin-bottom: 0.28em; }
.dm-copy .lead { margin-inline: 0; max-width: 36ch; }
.dm-copy .btn-row { justify-content: flex-start; }
/* --- the map stage --- */
.dm-map {
position: relative;
aspect-ratio: 6 / 5;
border-radius: 20px;
overflow: hidden;
background:
radial-gradient(120% 120% at 30% 90%, rgba(53, 107, 83, .10), transparent 55%),
linear-gradient(160deg, #f6eed6, #ece0c0);
border: 1px solid rgba(176, 121, 47, .22);
box-shadow:
0 2px 4px rgba(43, 38, 20, .05),
0 24px 52px rgba(43, 38, 20, .14),
0 0 0 1px rgba(255, 255, 255, .5) inset;
}
.dm-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Radar sweep — element is present now (kept subtle/static); P3 rotates it.
No mix-blend-mode: multiply forces a full re-composite every frame and tanks
the sweep on weak GPUs; a plain low-alpha brass wedge reads near-identically
and stays cheap. will-change keeps the rotating layer GPU-promoted. */
.dm-sweep {
position: absolute; left: 52%; top: 50%; width: 150%; height: 150%;
transform: translate(-50%, -50%);
pointer-events: none; z-index: 1; border-radius: 50%;
background: conic-gradient(from 0deg, rgba(170, 120, 52, .18) 0deg, rgba(170, 120, 52, 0) 55deg, rgba(170, 120, 52, 0) 360deg);
will-change: transform;
}
.dm-layer { position: absolute; inset: 0; z-index: 3; }
.dm-dot {
position: absolute; width: 9px; height: 9px; border-radius: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(circle, #e3c189, #b8863f 70%);
box-shadow: 0 0 0 3px rgba(184, 134, 63, .16);
}
.dm-clabel {
position: absolute; transform: translate(-50%, 9px); z-index: 3;
font-family: var(--font-body);
font-size: 10px; font-weight: 700; letter-spacing: 0.01em;
color: rgba(36, 74, 57, .72); white-space: nowrap;
}
.dm-hud {
position: absolute; left: 14px; top: 14px; z-index: 8;
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--font-body);
font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: #46594f;
background: rgba(255, 253, 247, .96);
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
border: 1px solid rgba(176, 121, 47, .3);
border-radius: 999px; padding: 5px 12px 5px 9px;
box-shadow: 0 6px 18px rgba(20, 38, 30, .16);
}
/* The unmistakable "this is a demo" tag. */
.dm-demo {
text-transform: uppercase; letter-spacing: 0.1em; font-weight: 800; font-size: 9.5px;
color: #fff; background: var(--gold); border-radius: 5px; padding: 2px 6px;
}
.dm-live { width: 7px; height: 7px; border-radius: 50%; background: #1e9e63; flex: none; }
/* ---- FULL-BLEED variant (exploration): map covers the whole hero, copy
overlaid on a left-fade scrim. Toggled by adding `dm-full` to the section. ---- */
/* Full-bleed wants real vertical presence — fill most of the viewport.
padding:0 is critical: the map is absolute inset:0, which fills the PADDING
box, so the inherited `section` padding would otherwise show as cream bands
above/below the map. Zeroing it lets the map go truly edge-to-edge. */
.dm-hero.dm-full { position: relative; min-height: clamp(680px, 94vh, 1080px); padding: 0; }
.dm-hero.dm-full .dm-map {
position: absolute; inset: 0; z-index: 0;
aspect-ratio: auto; border-radius: 0; border: 0; box-shadow: none;
}
/* Left-to-right cream scrim so the headline stays legible over the map. */
.dm-hero.dm-full::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(90deg,
var(--c-bg) 0%, rgba(245, 236, 215, .92) 30%,
rgba(245, 236, 215, .55) 50%, rgba(245, 236, 215, 0) 66%);
}
.dm-hero.dm-full .dm-hero-inner { grid-template-columns: minmax(0, 1fr); }
.dm-hero.dm-full .dm-copy { max-width: 600px; position: relative; z-index: 2; }
/* In full-bleed the HUD would collide with the copy — move it top-right. */
.dm-hero.dm-full .dm-hud { left: auto; right: 20px; top: 20px; }
/* Labels now sit over the deep-green land — switch them to cream for contrast. */
.dm-hero.dm-full .dm-clabel { color: rgba(245, 236, 215, .92); text-shadow: 0 1px 3px rgba(20, 38, 30, .4); }
/* On phones, stop overlaying text on the map (a wide map sliced into a tall
column reads as a muddy green shape behind the headline). Stack instead:
copy on clean cream, then the map as a contained band below — far more
legible, and the coastline + markers read at a friendly size. */
/* Phones: keep the map full-bleed (immersive, no card) and put the copy to the
LEFT over the cream/ocean side — same idea as desktop, just narrower. A strong
left-fade scrim keeps the headline crisp where the coastline approaches. */
@media (max-width: 720px) {
.dm-hero.dm-full {
min-height: clamp(600px, 86vh, 840px);
padding: 0;
}
.dm-hero.dm-full::after {
display: block;
background: linear-gradient(90deg,
var(--c-bg) 0%, rgba(245, 236, 215, .95) 42%,
rgba(245, 236, 215, .6) 62%, rgba(245, 236, 215, 0) 84%);
}
.dm-hero.dm-full .dm-copy { max-width: 74%; }
.dm-hero.dm-full .dm-copy h1 { font-size: clamp(32px, 9vw, 44px); }
/* Hide the city labels on phones — too little room, they crowd the seam. */
.dm-hero.dm-full .dm-clabel { display: none; }
/* Compact, corner-pinned DEMO badge (sits above the scrim now, so no fade). */
.dm-hero.dm-full .dm-hud { left: auto; right: 12px; top: 68px; font-size: 10px; padding: 4px 10px 4px 8px; gap: 6px; }
.dm-hero.dm-full .dm-hud-spec { display: none; }
}
/* Map below copy on tablet/phone; keep it generous and uncramped. */
@media (max-width: 860px) {
.dm-hero { min-height: 0; }
.dm-hero-inner { grid-template-columns: 1fr; gap: 30px; }
.dm-copy { order: 1; }
.dm-copy .lead { max-width: none; }
.dm-map { order: 2; aspect-ratio: 7 / 5; }
}
@media (max-width: 560px) {
.dm-copy h1 { font-size: clamp(34px, 8vw, 42px); }
.dm-copy .eyebrow { justify-content: flex-start; }
.dm-map { aspect-ratio: 4 / 3; }
}
/* ============================================================
CONVERSION UPGRADE (preview) — ROI math, guarantee, Gus note,
demo play-overlay. Native to the cream/forest/brass system.
============================================================ */
/* ---------- "The math" ROI band ---------- */
#roi { text-align: center; }
#roi .eyebrow { display: inline-flex; justify-content: center; margin-bottom: 16px; }
#roi h2 { max-width: 20ch; margin: 0 auto; }
.roi-sub { max-width: 58ch; margin: 18px auto 0; color: var(--ink-2); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.62; }
.roi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 48px auto 0; max-width: 900px; }
.roi-cell {
padding: 28px 20px; border: 1px solid var(--c-line); border-radius: 18px;
background: linear-gradient(180deg, #fff, #fffdf7); box-shadow: var(--shadow-sm);
}
.roi-cell:nth-child(2) {
border-color: var(--gold);
box-shadow: 0 2px 4px rgba(43,38,20,.05), 0 18px 40px rgba(179,135,58,.16), 0 0 0 1px rgba(179,135,58,.22) inset;
background: linear-gradient(180deg, #fffdf6, #fff);
}
.roi-num { font-family: var(--font-display); font-size: clamp(27px, 3.1vw, 38px); font-weight: 560; color: var(--c-primary); letter-spacing: -0.02em; line-height: 1.05; }
.roi-lab { margin-top: 9px; color: var(--ink-2); font-size: 14px; font-weight: 600; line-height: 1.45; }
@media (max-width: 720px) { .roi-grid { grid-template-columns: 1fr; gap: 13px; max-width: 440px; } .roi-cell { padding: 22px 18px; } }
/* ---------- 30-day guarantee badge (under the price) ---------- */
.dm-guarantee {
margin: 32px auto 0; max-width: 600px; text-align: center;
border: 1px solid var(--gold); border-radius: 16px;
background: linear-gradient(180deg, #fffdf6, #fff);
padding: 20px 26px;
box-shadow: 0 2px 4px rgba(43,38,20,.05), 0 16px 34px rgba(179,135,58,.14);
}
.dm-guarantee strong {
display: block; font-family: var(--font-display); font-weight: 600;
font-size: clamp(17px, 1.6vw, 21px); color: var(--c-ink); letter-spacing: -0.01em;
}
.dm-guarantee strong::before {
content: "✓"; color: #fff; background: var(--c-primary);
display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
font-size: 12px; font-weight: 900; margin-right: 10px; vertical-align: 2px;
box-shadow: 0 3px 8px rgba(45,90,61,.3);
}
.dm-guarantee span { display: block; margin-top: 7px; color: var(--ink-2); font-size: 14px; }
/* ---------- Gus note (signed, photo-free) ---------- */
.gus-card {
max-width: 740px; margin: 0 auto; position: relative;
background: linear-gradient(180deg, #fffdf7, #fff);
border: 1px solid var(--c-line); border-left: 3px solid var(--gold);
border-radius: 18px; padding: 34px clamp(26px, 4vw, 40px);
box-shadow: var(--shadow-sm);
}
.gus-card blockquote {
margin: 0; font-family: var(--font-display); font-weight: 500;
font-size: clamp(19px, 2vw, 25px); line-height: 1.48; color: var(--c-ink); letter-spacing: -0.01em;
}
.gus-card figcaption { margin-top: 22px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.gus-sig { font-family: var(--font-display); font-style: italic; font-size: 23px; color: var(--c-primary); font-weight: 600; }
.gus-role { color: var(--c-muted); font-size: 13.5px; font-weight: 600; }
.gus-text { margin-left: auto; color: var(--gold); font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }
.gus-text:hover { color: var(--gold-soft); }
@media (max-width: 560px) { .gus-text { margin-left: 0; } }
/* ---------- Proof slot (founding state + ready testimonial) ---------- */
#proof .eyebrow { display: inline-flex; justify-content: center; margin-bottom: 16px; }
.proof-founding {
max-width: 760px; margin: 0 auto; text-align: center; position: relative;
border: 1px solid var(--c-line); border-radius: 22px;
background: linear-gradient(180deg, #fffdf7, #fff);
padding: clamp(34px, 5vw, 52px) clamp(26px, 4vw, 48px);
box-shadow: var(--shadow-sm);
}
.proof-founding h2 { font-size: clamp(26px, 3.4vw, 40px); margin: 0 auto; max-width: 18ch; }
.proof-founding p { margin: 18px auto 0; max-width: 56ch; color: var(--ink-2); font-size: clamp(16px, 1.4vw, 18px); line-height: 1.62; }
.proof-row { margin-top: 28px; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.proof-chip {
font-family: var(--font-body); font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--gold); background: rgba(179, 135, 58, .1); border: 1px solid rgba(179, 135, 58, .3);
border-radius: 999px; padding: 7px 15px;
}
/* Ready testimonial (renders when TESTIMONIAL is set) */
.proof-quote { max-width: 760px; margin: 0 auto; text-align: center; }
.proof-quote blockquote {
margin: 0; font-family: var(--font-display); font-weight: 500;
font-size: clamp(22px, 2.6vw, 34px); line-height: 1.34; color: var(--c-ink); letter-spacing: -0.015em;
}
.proof-quote figcaption { margin-top: 20px; color: var(--ink-2); font-size: 15px; }
.proof-quote figcaption b { color: var(--c-primary); }
.proof-thread {
display: block; margin: 34px auto 0; max-width: 320px; width: 100%; height: auto;
border-radius: 22px; box-shadow: var(--shadow);
}
/* ---------- Demo: click-to-play overlay + caption ---------- */
.bf-link { display: block; text-decoration: none; color: inherit; cursor: pointer; }
#demo .bf-screen { position: relative; }
.bf-play {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
display: inline-flex; align-items: center; gap: 9px;
background: rgba(20, 38, 30, .82); color: #f3ead4;
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
font-family: var(--font-body); font-weight: 700; font-size: 15px; white-space: nowrap;
padding: 13px 21px; border-radius: 999px;
box-shadow: 0 14px 34px rgba(20, 38, 30, .42);
transition: transform .3s cubic-bezier(.22,1,.36,1), background .3s;
}
.bf-play-i {
display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
background: var(--gold); color: #16271f; font-size: 9px; padding-left: 2px;
}
.bf-link:hover .bf-play { transform: translate(-50%, -50%) scale(1.06); background: rgba(20, 38, 30, .92); }
.bf-cap { text-align: center; margin: 16px 0 0; color: var(--c-muted); font-size: 13px; }
/* Demo poster: a static text-thread inside a phone (mirrors the live modal) */
#demo .dm-phone-screen { position: relative; }
.dm-phone {
position: relative; max-width: 360px; margin: 0 auto;
background: linear-gradient(160deg, #1d3a2e, #0e201a);
border-radius: 38px; padding: 12px;
box-shadow: 0 2px 4px rgba(43,38,20,.12), 0 30px 60px rgba(16,32,26,.34), 0 0 0 1px rgba(255,255,255,.05) inset;
}
.dm-phone-notch {
position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
width: 84px; height: 22px; border-radius: 0 0 14px 14px; background: #0e201a; z-index: 3;
}
.dm-phone-screen {
border-radius: 28px; overflow: hidden;
background: linear-gradient(180deg, #fbf6ea, #f3ead4); padding: 36px 14px 18px;
}
.dm-phone-head {
display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; color: #2f5a45;
padding: 0 6px 12px; border-bottom: 1px solid rgba(176,121,47,.16); margin-bottom: 14px;
}
.dm-phone-time { margin-left: auto; color: #9aa89e; font-weight: 600; }
.dm-live-dot {
width: 7px; height: 7px; border-radius: 50%; background: #1e9e63;
box-shadow: 0 0 0 0 rgba(30,158,99,.5); animation: dmBlink 1.8s ease-in-out infinite;
}
@keyframes dmBlink { 0%,100% { box-shadow: 0 0 0 0 rgba(30,158,99,.5); } 50% { box-shadow: 0 0 0 5px rgba(30,158,99,0); } }
.dm-thread { display: flex; flex-direction: column; gap: 9px; }
.dm-b { max-width: 86%; font-size: 13.5px; line-height: 1.42; padding: 10px 13px; border-radius: 16px; }
.dm-b.cust { align-self: flex-start; background: #e7ebe7; color: #26332c; border-bottom-left-radius: 5px; }
.dm-b.shop { align-self: flex-end; background: linear-gradient(160deg, #356b53, #27513f); color: #f3ead4; border-bottom-right-radius: 5px; }
.dm-stamp { align-self: flex-end; font-size: 10px; font-weight: 800; color: #a9792f; margin: -3px 4px 0; }
.dm-book {
align-self: stretch; margin-top: 3px; background: rgba(53,107,83,.12);
border: 1px solid rgba(53,107,83,.3); border-radius: 13px; padding: 11px 13px;
display: flex; align-items: center; gap: 10px;
}
.dm-book .bk { width: 24px; height: 24px; border-radius: 50%; background: #1e9e63; color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 900; flex: none; }
.dm-book b { font-size: 12.5px; color: #1b2d25; display: block; }
.dm-book span { font-size: 11px; color: #5a6b60; }
@media (prefers-reduced-motion: reduce) { .dm-live-dot { animation: none; } }
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
.card, .nav-links a::after, .plan, .faq details, .bf-play { transition: none; }
}
/* ---- Duotone SVG icons (enhance.mjs swaps the emoji for these) ---- */
.card .pic.icon svg { width: 44px; height: 44px; display: block; }
.ci-ico svg { width: 22px; height: 22px; display: block; }
/* ---- Buttons: solid forest fill + neutral tactile elevation ----
Overrides the builder's green→gold gradient and its 28px tinted glow —
the fill carries the color, the shadow stays neutral. */
.btn-primary {
background: var(--c-primary);
box-shadow: 0 1px 2px rgba(31,58,42,.22), 0 2px 5px rgba(31,58,42,.14);
}
.cta-band.on-grad .btn-primary { background: #fff; box-shadow: 0 12px 28px rgba(0,0,0,.18); }
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 2px 4px rgba(31,58,42,.2), 0 8px 18px rgba(31,58,42,.16);
}
.btn:active { transform: translateY(0); }
/* Footer headings are post-enhance (heading order) — keep the h4 look */
.foot-col h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--c-muted); margin: 0 0 12px; font-family: var(--font-body); font-weight: 700; }
/* Footer text on the alt-cream band — darkened for WCAG AA */
.foot-col h3 { color: #57644f; }
.foot-base, .foot-base span, .foot-base a { color: #57644f; }