/* Self-hosted variable fonts (served from R2 at /assets/fonts). Replaces the render-blocking Google Fonts — faster LCP, no third-party request. */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/assets/fonts/manrope-var.woff2') format('woff2'); } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/assets/fonts/space-grotesk-var.woff2') format('woff2'); } /* Basalt & Ember display faces (2026-08-12 redesign): Big Shoulders Display — heavy condensed industrial headline face. Permanent Marker — hand-tag face for eyebrows/annotations, used sparingly. */ @font-face { font-family: 'Big Shoulders Display'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/big-shoulders-var.woff2') format('woff2'); } @font-face { font-family: 'Permanent Marker'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/permanent-marker.woff2') format('woff2'); } :root { /* ── Basalt & Ember ── bone-kraft paper for reading, basalt walls for feature moments, two accents only: ember (spray-can orange) = action, fir (Douglas fir green) = information. No third hue. */ --bg: #EDE6D6; /* bone kraft paper */ --bg-section: #E3DBC6; /* deeper kraft alternating */ --bg-card: #F5F0E3; /* lighter paper card */ --text: #1A1D17; /* basalt ink */ --text-2: #4C5045; /* lichen gray-green body copy */ --text-muted: #7C7F6F; --border: #C8C0A9; /* dry-grass border */ /* ── color roles ── ember (--cta) = action; fir (--primary) = information/ links/stats; rust (--accent) = decorative only. --indigo and --pink are LEGACY aliases now mapped into the two-accent system — do not use in new code. */ --primary: #2E5B3E; /* fir — links, stats, section info */ --accent: #B0431C; /* rust — decorative */ --cta: #D9531E; /* ember — primary action */ --cta-h: #B84314; /* ember hover */ --cta-dim: rgba(217,83,30,0.10); --primary-dim: rgba(46,91,62,0.10); --accent-dim: rgba(176,67,28,0.10); --green: #2E5B3E; --green-dim: rgba(46,91,62,0.12); --red: #A3341A; --pink: #B0431C; --pink-dim: rgba(176,67,28,0.08); --indigo: #2E5B3E; --indigo-dim: rgba(46,91,62,0.10); --orange: #D9531E; --orange-dim: rgba(217,83,30,0.10); --gold: #D9A31E; /* star ratings + mock-browser dot — ochre */ /* ── walls ── the dark side of the system: header, hero, demo, CTA, footer */ --wall: #14170F; /* basalt wall */ --wall-2: #1D2116; /* lifted wall panel */ --bone: #EDE6D6; /* paint on the wall */ --bone-2: #B7B19D; /* muted bone on the wall */ --wall-border: rgba(237,230,214,0.14); --font: 'Manrope', system-ui, -apple-system, sans-serif; --font-display: 'Big Shoulders Display', 'Space Grotesk', system-ui, sans-serif; --font-marker: 'Permanent Marker', 'Comic Sans MS', cursive; --font-utility: 'Space Grotesk', 'Manrope', system-ui, sans-serif; /* ── type scale ── 9 steps; new rules use these instead of ad-hoc rem values */ --fs-2xs: .7rem; --fs-xs: .78rem; --fs-sm: .85rem; --fs-base: .95rem; --fs-md: 1.05rem; --fs-lg: 1.2rem; --fs-xl: 1.45rem; --fs-2xl: 1.8rem; --fs-3xl: 2.3rem; --max-w: 1200px; /* Crushed radii — screen-print / stencil geometry, nothing pillowy */ --r-sm: 2px; /* inputs, buttons, small chips */ --r: 3px; --r-lg: 6px; /* Hard offset "misregistered print" shadows instead of soft blurs */ --shadow-sm: 2px 2px 0 rgba(26,29,23,0.14); --shadow-md: 4px 4px 0 rgba(26,29,23,0.16); --shadow-lg: 7px 7px 0 rgba(26,29,23,0.18); --shadow-cta: 4px 4px 0 rgba(26,29,23,0.9); --shadow-print: 4px 4px 0 #1A1D17; --shadow-print-lg: 6px 6px 0 #1A1D17; --gradient-cta: linear-gradient(135deg, #D9531E, #B0431C); --gradient-cta-hover: linear-gradient(135deg, #B84314, #9A3A16); /* ── z-index scale ── codifies the EXISTING stacking order; do not redesign. Mobile nav drawer stays at literal 99 — intentionally one below the header. */ --z-header: 100; --z-dropdown: 120; --z-overlay: 9990; --z-grain: 9999; /* ── motion ── the signature ease + standard durations */ --ease-out-expo: cubic-bezier(.16,1,.3,1); --dur-fast: .15s; --dur-med: .35s; --dur-slow: .6s; /* compat aliases — do not use in new code */ --bg-alt: var(--bg-section); --radius: var(--r); --text-3: var(--text-muted); --blue: var(--primary); --bg-card-h: var(--bg-section); --danger: var(--red); } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{ font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.65; -webkit-font-smoothing:antialiased; } /* ── Film grain ── Fixed SVG-noise overlay over the whole page. Adds a fine tactile texture on top of the flat gradients so they don't read as plasticky. pointer-events:none so it never blocks clicks; very low opacity. */ body::after{ content:'';position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none; opacity:.045; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:160px 160px; } /* ── Scroll reveal ── Elements tagged .reveal start dimmed + nudged down; the IntersectionObserver in app.js adds .in when they enter the viewport. */ .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease-out-expo),transform .6s var(--ease-out-expo);} .reveal.in{opacity:1;transform:none;} .reveal-delay-1{transition-delay:.08s;} .reveal-delay-2{transition-delay:.16s;} .reveal-delay-3{transition-delay:.24s;} /* Auto-stagger cards within a grid so they cascade in rather than snapping together. */ .service-grid > .reveal:nth-child(2),.use-case-grid > .reveal:nth-child(2){transition-delay:.06s;} .service-grid > .reveal:nth-child(3),.use-case-grid > .reveal:nth-child(3){transition-delay:.12s;} .service-grid > .reveal:nth-child(4),.use-case-grid > .reveal:nth-child(4){transition-delay:.18s;} .service-grid > .reveal:nth-child(5),.use-case-grid > .reveal:nth-child(5){transition-delay:.24s;} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none;} body::after{display:none;} } a{color:var(--primary);text-decoration:none;} a:hover{text-decoration:underline;} img{max-width:100%;height:auto;} /* ── Layout ── */ .container{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem;} .container--narrow{max-width:760px;margin:0 auto;padding:0 1.5rem;} /* ── Micro-label utility ── the canonical small-caps label. New markup uses this class; the legacy CSS clones below compose the same token values. */ .u-microlabel{text-transform:uppercase;font-weight:700;letter-spacing:.07em;font-size:var(--fs-2xs);} /* ── Header ── basalt wall bar; the site opens on the dark side. */ header{ position:sticky;top:0;z-index:var(--z-header); background:rgba(20,23,15,0.93); backdrop-filter:blur(16px); border-bottom:3px solid var(--cta); padding:0.9rem 0; } .header-inner{ display:flex;justify-content:space-between;align-items:center; max-width:var(--max-w);margin:0 auto;padding:0 1.5rem; } .logo{ font-size:1.55rem;color:var(--bone);flex-shrink:0; display:inline-flex;align-items:center;gap:0.55rem; } .logo:hover{text-decoration:none;} .logo svg{flex-shrink:0;} /* The mark is a live signal: the ember trace draws itself once on load and the node pad breathes. Path length ≈ 73 units — dasharray 80 covers it. */ .logo .trace-main{stroke-dasharray:80;animation:traceDraw 1.1s var(--ease-out-expo) .15s backwards;} @keyframes traceDraw{from{stroke-dashoffset:80;}to{stroke-dashoffset:0;}} .logo .trace-node,.logo .trace-ring{animation:nodePulse 3.2s ease-in-out 1.4s infinite;} @keyframes nodePulse{0%,100%{opacity:1;}50%{opacity:.35;}} .logo .trace-ring{animation-name:ringPulse;} @keyframes ringPulse{0%,100%{opacity:.4;}50%{opacity:.1;}} @media(prefers-reduced-motion:reduce){ .logo .trace-main,.logo .trace-node,.logo .trace-ring{animation:none;} } /* Wordmark: stencil caps in the display face; RUN sits on an ember paint chip (same device as the hero's paint swipe). Sizes in em so the footer's smaller .logo scales the whole lockup. */ .logo-word{ font-family:var(--font-display);font-weight:800;font-size:1.06em; letter-spacing:.025em;line-height:1;text-transform:uppercase; display:inline-flex;align-items:baseline;color:inherit; } .logo-word em{ font-style:normal;color:#14170F;background:var(--cta); padding:.09em .13em .05em;margin-left:.08em; display:inline-block;transform:rotate(-2deg);border-radius:1px; } /* "AI" is half of the company's name, so it should read as part of the name. It was bone-2 (dimmer than WILD), half-size, top-aligned so it floated off the baseline, and a full gap past the chip — the effect was a filename suffix rather than a brand. Now: full bone, sat on the baseline, and pulled in tight against the chip. The trailing letter-spacing is trimmed off the last glyph so the lockup ends cleanly instead of drifting. */ .logo-ai{ font-family:var(--font-utility);font-weight:700;font-size:.54em; letter-spacing:.14em;color:var(--bone); align-self:baseline;margin-left:-.15em; padding-right:0;margin-right:-.14em; } nav{display:flex;align-items:center;gap:0.25rem;} nav a{ color:var(--bone-2);font-size:0.875rem;font-weight:600;padding:0.4rem 0.75rem; border-radius:2px;transition:color .15s,background .15s; } nav a:hover{color:var(--bone);background:rgba(217,83,30,0.18);text-decoration:none;} /* ── Nav dropdown (Services menu) ── Visibility model: ".open" is the single source of truth for "menu is showing". The JS click handler toggles .open on tap (mobile) and click (desktop). Hover-only behavior is gated to (hover: hover) so iOS Safari's "tap fires hover first" quirk can't flash the desktop layout on mobile. */ .nav-dropdown{position:relative;display:inline-block;} /* The header sits on the basalt wall, so this control uses WALL tokens. It previously used paper tokens (--text-2 on near-black ≈ 1.6:1, and --text when open, which is literally darker than the header) — it was the one nav item you couldn't read. Everything here now matches the plain nav links exactly, so it sits in the row instead of looking like another component. */ .nav-dropdown-toggle{ background:none;border:none;cursor:pointer;font-family:var(--font); color:var(--bone-2);font-size:0.875rem;font-weight:600; padding:0.4rem 0.75rem;border-radius:2px; display:inline-flex;align-items:center;gap:0.3rem; position:relative; transition:color .15s,background .15s; } .nav-dropdown-toggle:focus-visible,.nav-dropdown.open .nav-dropdown-toggle{ color:var(--bone);background:rgba(217,83,30,0.18); } /* Open state gets an ember rule under the label — the same 3px ink as the header's bottom border, so "this menu is open" is said in the brand's own mark rather than a generic highlight. */ .nav-dropdown.open .nav-dropdown-toggle::after{ content:"";position:absolute;left:0.75rem;right:0.75rem;bottom:-0.1rem; height:3px;background:var(--cta); } /* The ▾ glyph renders around 9px at 0.66em and reads as a speck. Drawn as a CSS triangle instead: it scales predictably, matches the flat print language, and rotates cleanly. */ .nav-dropdown-caret{ font-size:0;line-height:0;display:inline-block; width:0;height:0;margin-top:1px; border-left:4px solid transparent;border-right:4px solid transparent; border-top:5px solid currentColor;opacity:.9; transition:transform .18s var(--ease-out-expo); } .nav-dropdown.open .nav-dropdown-caret{transform:rotate(180deg);} /* A printed card pinned under the header, not a floating glass panel: square-ish corners, a hard offset shadow (no blur), and a 3px ember cap so the header's ink appears to continue onto the card. Width is sized to five short labels — it was 560px, a leftover from the two-column mega-menu, which left the panel mostly empty. */ .nav-dropdown-menu{ position:absolute;top:calc(100% + 0.55rem);left:50%;transform:translateX(-50%) translateY(-4px); background:var(--bg-card);border:1px solid var(--border);border-top:3px solid var(--cta); border-radius:0 0 var(--r) var(--r); box-shadow:var(--shadow-md); min-width:290px;padding:0.85rem 0.75rem 0.75rem;z-index:var(--z-dropdown); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .16s,visibility .16s,transform .16s var(--ease-out-expo); } .nav-dropdown.open .nav-dropdown-menu{ opacity:1;visibility:visible;pointer-events:auto; transform:translateX(-50%) translateY(0); } /* Hover-capable devices only — prevents iOS tap-as-hover flash. */ @media (hover: hover) and (min-width: 769px) { .nav-dropdown-toggle:hover,.nav-dropdown:hover .nav-dropdown-toggle{ color:var(--text);background:var(--cta-dim); } .nav-dropdown:hover .nav-dropdown-caret{transform:rotate(180deg);} .nav-dropdown:hover .nav-dropdown-menu{ opacity:1;visibility:visible;pointer-events:auto; transform:translateX(-50%) translateY(0); } /* Bridge the visual gap between the toggle and the menu so the cursor can travel from one to the other without leaving the hover region. Without this, the 0.5rem gap above the menu kills :hover before the cursor reaches the menu items. The pseudo-element is invisible but hit-testable. Scoped to hover-capable devices since the mobile menu is position:static and doesn't need bridging. */ .nav-dropdown-menu::before{ content:""; position:absolute; top:-0.5rem;left:0;right:0;height:0.5rem; } /* Add small open/close hysteresis so a hand jitter doesn't close it. */ .nav-dropdown-menu{transition-delay:0s,0s,80ms;} .nav-dropdown:hover .nav-dropdown-menu{transition-delay:0s;} } .nav-dropdown-cols{display:grid;grid-template-columns:1fr;gap:0;} .nav-dropdown-section{display:flex;flex-direction:column;gap:0.05rem;} .nav-dropdown-heading{ font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.07em; color:var(--text-muted);padding:0 0.55rem 0.5rem; } .nav-dropdown-menu a{ display:flex;align-items:center;gap:0.65rem; padding:0.5rem 0.55rem;border-radius:2px; font-size:0.9rem;font-weight:600;color:var(--text); position:relative; transition:background .12s,color .12s,padding-left .12s; } /* Hover reads as a paint stroke down the left edge rather than a rounded blob — same vocabulary as the ember chip in the wordmark. */ .nav-dropdown-menu a::before{ content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px; background:var(--cta);opacity:0;transition:opacity .12s; } .nav-dropdown-menu a:hover,.nav-dropdown-menu a:focus-visible{ background:var(--cta-dim);text-decoration:none;color:var(--text);padding-left:0.75rem; } .nav-dropdown-menu a:hover::before,.nav-dropdown-menu a:focus-visible::before{opacity:1;} /* Fir icons give the list a calm left rail; ember is reserved for the action. */ .nav-dropdown-icon{ width:1.15rem;height:1.15rem;flex-shrink:0;color:var(--primary); display:inline-flex;align-items:center;justify-content:center; } .nav-dropdown-icon svg{width:100%;height:100%;} .nav-dropdown-footer{ margin-top:0.6rem;padding-top:0.6rem;border-top:1px solid var(--border); text-align:right; } .nav-dropdown-footer a{ display:inline-block;padding:0.35rem 0.6rem;color:var(--cta);font-weight:600;font-size:0.875rem; } .nav-dropdown-footer a:hover{color:var(--cta-h);background:transparent;} /* ── Service catalog grid (used on /services index) ── */ .service-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem; } .service-card{ display:flex;flex-direction:column;gap:0.6rem; background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg); padding:1.75rem;text-decoration:none;color:var(--text); transition:transform .2s,box-shadow .2s,border-color .2s; position:relative;overflow:hidden; } .service-card::before{ content:'';position:absolute;top:0;left:0;right:0;height:4px; background:var(--cta);transition:height 0.2s; } .service-card:nth-child(odd)::before{background:var(--cta);} .service-card:nth-child(even)::before{background:var(--primary);} .service-card:hover{ text-decoration:none;transform:translate(-3px,-3px); box-shadow:var(--shadow-print);border-color:var(--text); } .service-card-icon{ font-size:1.5rem;width:52px;height:52px;border-radius:14px; display:flex;align-items:center;justify-content:center; } .service-card:nth-child(odd) .service-card-icon{background:var(--cta-dim);color:var(--cta);} .service-card:nth-child(even) .service-card-icon{background:var(--primary-dim);color:var(--primary);} /* Inline Lucide SVG icons — inherit color via currentColor */ .service-card-icon svg,.uc-icon svg,.iso-icon svg,.nav-dropdown-icon svg,.hero-eyebrow svg,.section-tag--icon svg,.inline-icon svg{display:block;} .use-case-card .uc-icon{color:var(--cta);display:flex;} .nav-dropdown-icon{display:inline-flex;align-items:center;justify-content:center;} .section-tag--icon{display:inline-flex;align-items:center;gap:.4rem;} .inline-icon{display:inline-flex;vertical-align:-.15em;color:var(--cta);} /* ── AI SEO/GEO dashboard mock ── */ .dash{ background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg); box-shadow:0 30px 60px -20px rgba(26,29,23,.25);overflow:hidden; } .dash-bar{ display:flex;align-items:center;gap:.75rem;padding:.7rem 1rem; background:linear-gradient(180deg,#F5F0E3,#EDE6D6);border-bottom:1px solid var(--border); } .dash-dots{display:flex;gap:.4rem;} .dash-dots i{width:11px;height:11px;border-radius:50%;background:#C8C0A9;} .dash-dots i:nth-child(1){background:#A3341A;} .dash-dots i:nth-child(2){background:var(--gold);} .dash-dots i:nth-child(3){background:#4C7A5A;} .dash-url{font-size:.78rem;color:var(--text-muted);font-weight:600;} .dash-body{padding:1.5rem;} .dash-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.25rem;} .dash-title{font-family:var(--font-display);font-weight:800;font-size:1.1rem;color:var(--text);} .dash-sub{font-size:.78rem;color:var(--text-muted);margin-top:.2rem;} .dash-badge{ flex-shrink:0;font-weight:800;font-size:.85rem;color:#2E5B3E; background:rgba(46,91,62,.12);padding:.35rem .7rem;border-radius:100px; } .dash-chart{height:200px;} .dash-chart svg{width:100%;height:100%;} .dash-grid{stroke:var(--border);stroke-width:1;stroke-dasharray:3 5;} .dash-line{fill:none;stroke-width:3;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;} .dash-line--teal{stroke:#D9531E;} .dash-line--indigo{stroke:#2E5B3E;stroke-dasharray:6 5;} .dash-dot--teal{fill:#D9531E;} .dash-dot--indigo{fill:#2E5B3E;} .dash-legend{display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:.5rem;font-size:.8rem;color:var(--text-2);} .dash-legend span{display:inline-flex;align-items:center;gap:.45rem;} .dash-key{width:14px;height:4px;border-radius:2px;} .dash-key--teal{background:#D9531E;} .dash-key--indigo{background:#2E5B3E;} .dash-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.5rem;} .dash-tile{background:var(--bg-section);border-radius:12px;padding:1rem;text-align:center;} .dash-tile-num{font-family:var(--font-display);font-weight:800;font-size:1.6rem;color:var(--cta);line-height:1;} .dash-tile-label{font-size:.72rem;color:var(--text-2);margin-top:.35rem;} @media(max-width:560px){.dash-tiles{grid-template-columns:1fr;}} .service-card h3{font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--text);margin:0;} .service-card p{font-size:0.92rem;color:var(--text-2);line-height:1.6;margin:0;flex:1;} .service-card-arrow{ color:var(--cta);font-weight:600;font-size:0.9rem;margin-top:0.5rem; } /* ── Homepage service rows ── Full-width expandable rows for the 5 service lines. Collapsed: icon / name + tagline / price / chevron. Expands on desktop hover, keyboard focus (:focus-visible via :has), and click/tap (.open toggled by app.js, which also mirrors aria-expanded). Height animates via the grid-template-rows 0fr→1fr trick — no JS measuring, no layout jank. */ .svc-rows{display:flex;flex-direction:column;gap:1rem;margin-top:2.5rem;} .svc-row{ background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg); position:relative;overflow:hidden; transition:box-shadow .25s,border-color .25s,transform .25s; } .svc-row::before{ content:'';position:absolute;top:0;left:0;bottom:0;width:5px;background:var(--cta); } .svc-row:nth-child(odd)::before{background:var(--cta);} .svc-row:nth-child(even)::before{background:var(--primary);} .svc-row:hover,.svc-row.open,.svc-row:focus-within{ box-shadow:var(--shadow-print);border-color:var(--text);transform:translate(-2px,-2px); } .svc-row-h{margin:0;font-size:inherit;font-weight:inherit;} .svc-row-head{ width:100%;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center; gap:1.5rem;padding:1.6rem 1.75rem 1.6rem 2rem; background:none;border:0;cursor:pointer;text-align:left;font:inherit;color:inherit; } .svc-row-head:focus-visible{outline:3px solid var(--primary);outline-offset:-3px;border-radius:var(--r-lg);} .svc-row-icon{ width:56px;height:56px;border-radius:14px;flex-shrink:0; display:flex;align-items:center;justify-content:center; } .svc-row-icon svg{display:block;} .svc-row:nth-child(odd) .svc-row-icon{background:var(--cta-dim);color:var(--cta);} .svc-row:nth-child(even) .svc-row-icon{background:var(--primary-dim);color:var(--primary);} .svc-row-main{display:flex;flex-direction:column;gap:.3rem;min-width:0;} .svc-row-name{ font-family:var(--font-display);font-size:1.4rem;font-weight:700; color:var(--text);line-height:1.25;letter-spacing:-0.01em; } .svc-row-tag{font-size:.93rem;color:var(--text-2);line-height:1.55;} .svc-row-price{text-align:right;flex-shrink:0;line-height:1.15;} .svc-row-price-pre{display:block;font-size:.7rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.07em;} .svc-row-price strong{font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:var(--text);} .svc-row-price-unit{display:block;font-size:.78rem;color:var(--text-muted);} .svc-row-chevron{color:var(--text-muted);display:flex;transition:transform .35s var(--ease-out-expo);} .svc-row-panel{ display:grid;grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease-out-expo); } .svc-row-clip{min-height:0;overflow:hidden;} .svc-row-panel-inner{ opacity:0;transition:opacity .3s ease .05s; padding:0 2rem 1.9rem;max-width:860px; } .svc-row-bullets{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1.5rem; } .svc-row-bullets li{ position:relative;padding-left:1.6rem;font-size:.93rem;color:var(--text);line-height:1.55; } .svc-row-bullets li::before{ content:'';position:absolute;left:0;top:.5rem;width:.8rem;height:.8rem;border-radius:50%; background:var(--cta-dim); background-image:linear-gradient(135deg, transparent 50%, var(--cta) 50%, var(--cta) 65%, transparent 65%); } .svc-row-fit{font-size:.9rem;color:var(--text-2);margin:1.1rem 0 0;} .svc-row-fit strong{color:var(--text);} .svc-row-ctas{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.25rem;} /* Open states: sticky .open (click/tap), keyboard focus on the head, focus anywhere inside the panel (so tabbing to a CTA never lands in a clipped region), and desktop hover. */ .svc-row.open .svc-row-panel, .svc-row:has(.svc-row-head:focus-visible) .svc-row-panel, .svc-row:has(.svc-row-panel :focus) .svc-row-panel{grid-template-rows:1fr;} .svc-row.open .svc-row-panel-inner, .svc-row:has(.svc-row-head:focus-visible) .svc-row-panel-inner, .svc-row:has(.svc-row-panel :focus) .svc-row-panel-inner{opacity:1;} .svc-row.open .svc-row-chevron, .svc-row:has(.svc-row-head:focus-visible) .svc-row-chevron, .svc-row:has(.svc-row-panel :focus) .svc-row-chevron{transform:rotate(180deg);} @media(hover:hover) and (pointer:fine){ .svc-row:hover .svc-row-panel{grid-template-rows:1fr;} .svc-row:hover .svc-row-panel-inner{opacity:1;} .svc-row:hover .svc-row-chevron{transform:rotate(180deg);} } @media(prefers-reduced-motion:reduce){ .svc-row,.svc-row-panel,.svc-row-panel-inner,.svc-row-chevron{transition:none;} } @media(max-width:720px){ .svc-row-head{ grid-template-columns:44px 1fr auto;gap:.6rem .9rem; padding:1.15rem 1.15rem 1.15rem 1.35rem; } .svc-row-icon{width:44px;height:44px;border-radius:11px;grid-row:1;} .svc-row-icon svg{width:20px;height:20px;} .svc-row-main{grid-column:2;grid-row:1;} .svc-row-name{font-size:1.12rem;} .svc-row-tag{font-size:.85rem;} .svc-row-chevron{grid-column:3;grid-row:1;} .svc-row-price{ grid-column:2;grid-row:2;text-align:left; display:flex;align-items:baseline;gap:.35rem; } .svc-row-price strong{font-size:1.15rem;} .svc-row-price-pre,.svc-row-price-unit{display:inline;} .svc-row-panel-inner{padding:0 1.35rem 1.5rem;} .svc-row-bullets{grid-template-columns:1fr;} .svc-row-ctas .btn{width:100%;justify-content:center;} } /* ── Check list (capabilities) ── */ .check-list{ list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0.75rem 1.5rem; padding:0;margin:0; } .check-list li{ position:relative;padding-left:1.75rem;font-size:0.95rem; color:var(--text);line-height:1.55; } .check-list li::before{ content:"";position:absolute;left:0;top:0.45rem; width:0.9rem;height:0.9rem;border-radius:50%; background:var(--cta-dim); background-image:linear-gradient(135deg, transparent 50%, var(--cta) 50%, var(--cta) 65%, transparent 65%); background-position:center;background-size:0.5rem 0.5rem;background-repeat:no-repeat; box-shadow:inset 0 0 0 1px rgba(217,83,30,0.25); } @media(max-width:640px){.check-list{grid-template-columns:1fr;}} /* ── Buyer's-guide criteria grid ── 2-col "how to choose"; single column ≤640px */ .bg-criteria-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:2rem;} @media(max-width:640px){.bg-criteria-grid{grid-template-columns:1fr;}} /* Buttons — screen-print blocks. Ink border + hard offset shadow; hover lifts the print off the paper (translate against the shadow, never opacity). */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:0.5rem; font-size:0.875rem;font-weight:800;padding:0.55rem 1.25rem; text-transform:uppercase;letter-spacing:.05em; border-radius:var(--r-sm);border:2px solid var(--text);cursor:pointer; transition:transform .12s,box-shadow .12s,background .15s; font-family:var(--font);white-space:nowrap;text-decoration:none; } .btn:hover{text-decoration:none;transform:translate(-2px,-2px);} .btn:active{transform:translate(0,0);} .btn-primary{background:var(--cta);color:#14170F;box-shadow:var(--shadow-print);} .btn-primary:hover{background:var(--cta);box-shadow:var(--shadow-print-lg);} .btn-outline{background:transparent;color:var(--text);border:2px solid var(--text);} .btn-outline:hover{box-shadow:var(--shadow-print);} /* On dark walls the outline button paints in bone. */ .hero .btn-outline,.demo-block .btn-outline,.cta-banner .btn-outline,.section--wall .btn-outline{ color:var(--bone);border-color:var(--bone); } .hero .btn-outline:hover,.demo-block .btn-outline:hover,.cta-banner .btn-outline:hover,.section--wall .btn-outline:hover{ box-shadow:4px 4px 0 rgba(237,230,214,0.35); } /* Print shadows on dark walls read in black-on-black — flip them to a paint shadow. */ .hero .btn-primary,.demo-block .btn-primary,.cta-banner .btn-primary,.section--wall .btn-primary{ border-color:#14170F;box-shadow:4px 4px 0 rgba(0,0,0,0.55); } .btn-lg{font-size:1rem;padding:0.8rem 1.75rem;border-radius:var(--r);} .btn-xl{font-size:1.05rem;padding:1rem 2.25rem;border-radius:var(--r);} /* ── Hero ── the basalt wall. Every page that opens with .hero opens on the dark side; the homepage adds .hero--mural for the painted panel. */ .hero{ padding:5rem 0 4rem; background:var(--wall); color:var(--bone); text-align:left; position:relative; overflow:hidden; isolation:isolate; } /* Spray haze: two faint overspray clouds — ember low left, fir high right — baked into one gradient so it rasterizes once and costs nothing per frame. */ .hero::before{ content:'';position:absolute;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(45% 60% at 8% 90%, rgba(217,83,30,0.16), transparent 62%), radial-gradient(40% 55% at 92% 6%, rgba(46,91,62,0.20), transparent 60%), radial-gradient(60% 45% at 50% 110%, rgba(0,0,0,0.5), transparent 70%); } .hero .container{ display:grid;grid-template-columns:1fr 1fr; align-items:center;gap:3rem; position:relative;z-index:1; } .hero-left{display:flex;flex-direction:column;align-items:flex-start;} .hero-eyebrow{ display:inline-flex;align-items:center;gap:0.5rem; font-size:0.8rem;font-weight:700; color:var(--bone); background:rgba(237,230,214,0.07); border:1.5px dashed rgba(237,230,214,0.4); padding:.5rem 1rem;border-radius:2px;margin-bottom:1.75rem; } .hero h1{ font-family:var(--font-display); font-size:clamp(3rem,6.5vw,5.4rem); font-weight:800;line-height:.95;letter-spacing:.005em; text-transform:uppercase; max-width:640px;margin:0 0 1.25rem; color:var(--bone); } .hero h1 em{font-style:normal;color:var(--cta);} /* The stencil swipe: one ember spray stroke painted behind the key phrase, wiping in left-to-right on load. Only background-size animates. */ .hero h1 .highlight{ color:#14170F; padding:0 .12em; background-image:linear-gradient(97deg, transparent 0.5%, var(--cta) 2.5% 97.5%, transparent 99.5%); background-repeat:no-repeat; background-size:100% 92%; background-position:0 55%; animation:paintSwipe .9s var(--ease-out-expo) .25s backwards; box-decoration-break:clone;-webkit-box-decoration-break:clone; } @keyframes paintSwipe{ from{background-size:0% 92%;color:var(--bone);} 60%{color:var(--bone);} to{background-size:100% 92%;color:#14170F;} } @media (prefers-reduced-motion:reduce){ .hero h1 .highlight{animation:none;} } .hero-sub{ font-size:clamp(1rem,2vw,1.15rem);color:var(--bone-2); max-width:480px;margin:0 0 2.25rem;line-height:1.7; } .hero-sub strong{color:var(--bone);} .hero-ctas{display:flex;gap:0.85rem;flex-wrap:wrap;margin-bottom:0;} .hero-proof{ display:flex;align-items:center;gap:.65rem;flex-wrap:wrap; margin-top:1rem;font-size:.8rem;color:var(--bone-2); } .hero-proof-item{display:inline-flex;align-items:center;gap:.3rem;} .hero-proof-item svg{flex-shrink:0;opacity:.7;} .hero-proof-sep{color:var(--bone-2);opacity:.5;} .hero-proof-link{color:var(--cta);font-weight:600;text-decoration:none;} .hero-proof-link:hover{text-decoration:underline;} /* Hero isometric visual */ .hero-visual{ display:flex;align-items:center;justify-content:center; position:relative;min-height:380px; } .iso-scene{ position:relative;width:100%;max-width:420px;height:380px; /* --tx/--ty set by JS on pointer-move for a cursor parallax tilt; default 0. */ transform:perspective(800px) rotateX(calc(12deg + var(--ty,0deg))) rotateZ(-6deg) rotateY(var(--tx,0deg)); transform-style:preserve-3d; transition:transform .25s ease-out; } /* Frosted-glass blocks: translucent tint + real backdrop blur + a diagonal sheen and inner highlight. Static at rest (no per-frame cost); they lift and brighten on hover. */ .iso-block{ position:absolute;border-radius:var(--r-lg); padding:1.25rem;color:#fff;overflow:hidden; border:1px solid rgba(255,255,255,0.4); box-shadow:0 20px 40px rgba(26,29,23,0.18), inset 0 1px 0 rgba(255,255,255,0.45); backdrop-filter:blur(10px) saturate(160%);-webkit-backdrop-filter:blur(10px) saturate(160%); text-shadow:0 1px 4px rgba(26,29,23,0.3); transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s; } .iso-block::after{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(135deg,rgba(255,255,255,0.4),rgba(255,255,255,0) 48%); } .iso-block:hover{transform:translateY(-10px) translateZ(30px) scale(1.03);box-shadow:0 32px 60px rgba(26,29,23,0.26), inset 0 1px 0 rgba(255,255,255,0.6);} .iso-block .iso-icon{font-size:1.75rem;margin-bottom:0.5rem;position:relative;} .iso-block .iso-label{font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;opacity:0.95;position:relative;} .iso-block--voice{background:linear-gradient(135deg,rgba(217,83,30,0.78),rgba(224,106,53,0.55));bottom:20px;left:10%;width:200px;height:130px;z-index:3;} .iso-block--sales{background:linear-gradient(135deg,rgba(46,91,62,0.78),rgba(76,122,90,0.55));bottom:110px;left:45%;width:190px;height:120px;z-index:2;} .iso-block--ops{background:linear-gradient(135deg,rgba(217,83,30,0.78),rgba(251,146,60,0.55));bottom:210px;left:20%;width:180px;height:110px;z-index:1;} .iso-block--custom{background:linear-gradient(135deg,rgba(176,67,28,0.78),rgba(244,114,182,0.55));bottom:0;left:55%;width:170px;height:100px;z-index:4;} @media(max-width:768px){ .hero .container{grid-template-columns:1fr;text-align:center;} .hero-left{align-items:center;} .hero-visual{min-height:280px;} .hero h1{max-width:100%;} .hero-sub{max-width:100%;margin-left:auto;margin-right:auto;} .hero-ctas{justify-content:center;} .hero-proof{justify-content:center;} } .trust-line{ font-size:0.8rem;color:var(--text-muted); display:flex;gap:1.25rem;justify-content:center;flex-wrap:wrap; } .trust-line span{display:flex;align-items:center;gap:0.35rem;} /* ── Stats bar ── */ .stats-bar{ border-top:1px solid var(--border);border-bottom:1px solid var(--border); padding:2rem 0;background:var(--bg-section); } .stats-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1.5rem;text-align:center; } .stat-num{font-family:var(--font-display);font-size:2rem;font-weight:800;color:var(--primary);line-height:1;} .stat-label{font-size:.8rem;color:var(--text-2);margin-top:.25rem;} /* ── Section ── */ .section{padding:5rem 0;} .section--alt{background:var(--bg-section);} /* Dark wall section — for feature moments between paper sections. */ .section--wall{background:var(--wall);color:var(--bone);} .section--wall .section-title{color:var(--bone);} .section--wall .section-sub{color:var(--bone-2);} .section--wall .stat-num{color:var(--cta);} .section--wall .stat-label{color:var(--bone-2);} .section--wall a{color:var(--bone);} /* Section tag — the hand tag. Marker face, ember, a hair off-level. */ .section-tag{ font-family:var(--font-marker); font-size:1rem;font-weight:400;text-transform:none;letter-spacing:.01em; color:var(--accent);margin-bottom:.75rem; display:inline-block;transform:rotate(-1.6deg); } .section--wall .section-tag{color:var(--cta);} .section-title{ font-family:var(--font-display); font-size:clamp(2.1rem,4.2vw,3.4rem);font-weight:800; text-transform:uppercase; letter-spacing:.005em;line-height:.98;margin-bottom:.75rem; } .section-sub{font-size:1rem;color:var(--text-2);max-width:560px;line-height:1.7;} /* ── Pain section ── */ .pain-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem;margin-top:2.5rem; } .pain-card{ background:#FFFFFF;box-shadow:var(--shadow-sm); border-radius:var(--r);padding:1.75rem; transition:box-shadow .15s,transform .15s; } .pain-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);} .pain-card .pain-icon{font-size:1.5rem;margin-bottom:.75rem;} .pain-card h3{font-family:var(--font-display);font-size:1rem;font-weight:700;margin-bottom:.4rem;} .pain-card p{font-size:.875rem;color:var(--text-2);line-height:1.6;} .pain-source{display:block;margin-top:.6rem;font-size:.7rem;color:var(--text-muted);font-style:normal;} .pain-source a{color:var(--text-muted);text-decoration:underline;text-underline-offset:2px;} .pain-source a:hover{color:var(--primary);} /* ── Before/After ── */ .ba-grid{ display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:2.5rem; } .ba-card{ background:#FFFFFF;box-shadow:var(--shadow-sm); border-radius:var(--r);padding:1.75rem; } .ba-card.before{border-top:4px solid var(--red);} .ba-card.after{border-top:4px solid var(--green);} .ba-label{ font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.07em; margin-bottom:1rem; } .ba-card.before .ba-label{color:var(--red);} .ba-card.after .ba-label{color:var(--green);} .ba-card ul{list-style:none;display:flex;flex-direction:column;gap:.6rem;} .ba-card li{ font-size:.9rem;color:var(--text-2); padding-left:1.5rem;position:relative;line-height:1.5; } .ba-card li::before{ content:'';position:absolute;left:0;top:.55rem; width:.6rem;height:.6rem;border-radius:50%; background:var(--text-muted); } .ba-card.before li::before{background:var(--red);opacity:.6;} .ba-card.after li::before{background:var(--green);} /* ── Capabilities checklist (use-case pages) ── 2-col checklist; single column ≤640px */ .caps-list{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1.5rem;margin-top:1.5rem;list-style:none;} .caps-list li::before{content:'✓ ';color:var(--green);font-weight:700;} @media(max-width:640px){.caps-list{grid-template-columns:1fr;}} /* ── How it works ── */ .steps-grid{ display:grid;grid-template-columns:repeat(3,1fr); gap:2rem;margin-top:2.5rem;position:relative; } .steps-grid::before{ content:'';position:absolute;top:1.5rem;left:16%;right:16%;height:1px; background:repeating-linear-gradient(to right,var(--text-muted) 0,var(--text-muted) 4px,transparent 4px,transparent 10px); z-index:0; } .step-card{text-align:center;padding:0 1rem;position:relative;z-index:1;} .step-num{ width:3rem;height:3rem;border-radius:50%; background:var(--gradient-cta); display:flex;align-items:center;justify-content:center; font-family:var(--font-display);font-size:1.1rem;font-weight:800;color:#fff; margin:0 auto 1.25rem; box-shadow:0 4px 12px rgba(217,83,30,0.25); } .step-card h3{font-family:var(--font-display);font-size:1.05rem;font-weight:700;margin-bottom:.5rem;} .step-card p{font-size:.875rem;color:var(--text-2);line-height:1.65;} /* ── Demo CTA block ── a dark wall panel: the flyer wall where demos hang. */ .demo-block{ background:var(--wall-2); border:3px solid var(--text); box-shadow:var(--shadow-print-lg); border-radius:var(--r-lg);padding:3rem 2.5rem;text-align:center;margin-top:3rem; color:var(--bone); } .demo-block h2{font-family:var(--font-display);font-size:clamp(1.8rem,3vw,2.6rem);font-weight:800;text-transform:uppercase;margin-bottom:.75rem;color:var(--bone);} .demo-block p{color:var(--bone-2);max-width:520px;margin:0 auto 2rem;font-size:.95rem;} .demo-audio{ display:flex;align-items:center;justify-content:center;gap:1rem; flex-wrap:wrap;margin-bottom:1.75rem; } .audio-pill{ display:flex;align-items:center;gap:.6rem; background:var(--bg-card);border:1px solid var(--border); border-radius:8px;padding:.5rem 1rem;font-size:.8rem;color:var(--text-2); cursor:pointer;transition:background .15s; } .audio-pill:hover{background:var(--bg-section);} .play-icon{ width:1.75rem;height:1.75rem;border-radius:50%; background:var(--primary);display:flex;align-items:center;justify-content:center; flex-shrink:0; } .play-icon svg{fill:white;width:10px;height:10px;margin-left:1px;} /* ── Chat demo widget ── */ .chat-demo{max-width:540px;margin:0 auto 2rem;} .chat-demo-tabs{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap;justify-content:center;} .chat-tab{ padding:.45rem 1rem;border-radius:6px;border:1px solid var(--border); background:var(--bg);color:var(--text-2);font-size:.85rem;font-weight:600; cursor:pointer;transition:background .15s,border-color .15s,color .15s; } .chat-tab:hover{background:var(--bg-section);color:var(--text);} .chat-tab.active{background:var(--primary);border-color:var(--primary);color:#fff;} .chat-demo-window{ background:var(--bg-card);border:1px solid var(--border); border-radius:var(--r-lg);overflow:hidden; box-shadow:0 4px 24px rgba(0,0,0,0.06); } .chat-demo-header{ background:var(--primary);color:#fff; padding:.65rem 1rem;display:flex;align-items:center;gap:.6rem; font-size:.85rem;font-weight:700; } .chat-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.5);} .chat-messages{padding:.75rem;min-height:200px;max-height:320px;overflow-y:auto;} .chat-bubble{display:flex;flex-direction:column;margin-bottom:.65rem;animation:chatIn .2s ease-out both;} .chat-bubble.agent{align-items:flex-start;} .chat-bubble.caller{align-items:flex-end;} .chat-bubble-label{font-size:.67rem;color:var(--text-muted);margin-bottom:.2rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;} .chat-bubble-text{ display:inline-block;padding:.55rem .85rem;border-radius:12px; font-size:.875rem;line-height:1.5;max-width:88%; } .chat-bubble.agent .chat-bubble-text{background:var(--bg-section);color:var(--text);border-bottom-left-radius:3px;} .chat-bubble.caller .chat-bubble-text{background:var(--primary);color:#fff;border-bottom-right-radius:3px;} .chat-typing{ display:flex;gap:4px;align-items:center;padding:.55rem .85rem; background:var(--bg-section);border-radius:12px;border-bottom-left-radius:3px;width:fit-content; } .chat-typing span{ width:7px;height:7px;border-radius:50%;background:var(--text-muted); animation:typingDot 1.2s infinite ease-in-out; } .chat-typing span:nth-child(2){animation-delay:.2s;} .chat-typing span:nth-child(3){animation-delay:.4s;} @keyframes typingDot{0%,60%,100%{transform:translateY(0);}30%{transform:translateY(-5px);}} @keyframes chatIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}} .chat-demo-cta{padding:1rem;border-top:1px solid var(--border);text-align:center;background:var(--bg);} .chat-demo-restart{ background:none;border:none;color:var(--text-muted);font-size:.8rem;cursor:pointer; text-decoration:underline;display:block;width:100%;margin-top:.5rem; } .chat-personalizer{margin-bottom:.75rem;} .chat-biz-label{display:block;font-size:.75rem;font-weight:600;color:var(--text-2);margin-bottom:.35rem;} .chat-biz-input{ width:100%;padding:.5rem .75rem;border-radius:8px; border:1.5px solid var(--border);background:var(--bg-card); font-size:.875rem;font-family:var(--font);color:var(--text); transition:border-color .15s;outline:none; } .chat-biz-input:focus{border-color:var(--primary);} .chat-biz-input::placeholder{color:var(--text-muted);} .chat-summary{ border-top:1px solid var(--border);padding:.75rem 1rem .6rem; background:var(--green-dim); } .chat-summary-heading{ font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase; letter-spacing:.07em;color:var(--green);margin-bottom:.55rem; } .chat-summary-row{display:flex;gap:.5rem;font-size:.8rem;padding:.15rem 0;} .chat-summary-key{color:var(--text-muted);font-weight:600;min-width:78px;flex-shrink:0;} .chat-summary-val{color:var(--text);font-weight:500;} /* ── Demo page — scenario gallery ── */ .scen-tab-nav{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem;} .scen-tab{ padding:.45rem 1.1rem;border-radius:6px;border:1px solid var(--border); background:var(--bg);color:var(--text-2);font-size:.85rem;font-weight:600; cursor:pointer;transition:background .15s,border-color .15s,color .15s; } .scen-tab:hover{background:var(--bg-section);color:var(--text);} .scen-tab.active{background:var(--indigo);border-color:var(--indigo);color:#fff;} .scen-panel{display:none;} .scen-panel.active{display:block;} .call-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;} .call-card{ background:var(--bg-card);border:1px solid var(--border); border-radius:var(--r-lg);padding:1.5rem; box-shadow:0 2px 12px rgba(0,0,0,0.04); } .call-card-head{margin-bottom:1rem;} .call-ind-badge{ display:inline-block;padding:.2rem .6rem;border-radius:4px; font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em; background:var(--primary-dim);color:var(--primary);margin-bottom:.4rem; } .call-card-title{font-size:1rem;font-weight:700;color:var(--text);margin:.2rem 0 .15rem;} .call-card-sub{font-size:.8rem;color:var(--text-muted);margin:0;} .call-transcript{ border-top:1px solid var(--border);padding-top:.75rem;margin-top:.25rem; display:flex;flex-direction:column;gap:.35rem; } .tl{display:flex;gap:.5rem;font-size:.8rem;line-height:1.5; padding:.3rem .5rem;border-radius:6px;transition:background .2s,color .2s;} .tl--active{background:var(--primary-dim);} .tl--agent .tl-role{color:var(--primary);font-weight:700;min-width:44px;flex-shrink:0;} .tl--caller .tl-role{color:var(--text-muted);font-weight:700;min-width:44px;flex-shrink:0;} .tl-text{color:var(--text-2);} .tl--active .tl-text{color:var(--text);font-weight:500;} .call-preview-label{ display:inline-flex;align-items:center;gap:.4rem; font-size:.75rem;color:var(--text-muted);border:1px dashed var(--border); border-radius:6px;padding:.4rem .8rem;margin-bottom:.75rem; } /* ── Simulated live call experience ── */ /* Ring pulse on play button while ringing */ @keyframes wrRingPulse{ 0%{box-shadow:0 0 0 0 rgba(46,91,62,.6);} 70%{box-shadow:0 0 0 10px rgba(46,91,62,0);} 100%{box-shadow:0 0 0 0 rgba(46,91,62,0);} } .wr-player.ringing .wr-play-btn{animation:wrRingPulse .85s ease-out infinite;} .wr-player.answering .wr-play-btn{background:var(--green);} /* Waveform bars — visible only while playing */ .wr-waveform{display:none;gap:3px;align-items:flex-end;height:20px;margin:.25rem 0 .4rem;} .wr-player.playing .wr-waveform{display:flex;} /* Hiding the scrubber during playback is deliberate ONLY for the simulated live-call players on /demo, where a waveform stands in for a real-time call and scrubbing would break the illusion. Scoped with :has() so every other player — FM episodes, music, the hero — keeps a working seek bar while it plays. Before this scope existed, those players went blank mid-track: bar, timer and duration all hidden, with no waveform in their markup to replace them. */ .wr-player.playing:has(.wr-waveform) .wr-seek-bar{display:none;} .wr-player.playing:has(.wr-waveform) .wr-current, .wr-player.playing:has(.wr-waveform) .wr-duration{display:none;} .wr-wv-bar{ width:4px;border-radius:3px;background:var(--primary); animation:wrWave 1.1s ease-in-out infinite; } .wr-wv-bar:nth-child(1){height:8px;animation-delay:0s;} .wr-wv-bar:nth-child(2){height:13px;animation-delay:.15s;} .wr-wv-bar:nth-child(3){height:18px;animation-delay:.3s;} .wr-wv-bar:nth-child(4){height:13px;animation-delay:.45s;} .wr-wv-bar:nth-child(5){height:8px;animation-delay:.6s;} @keyframes wrWave{0%,100%{transform:scaleY(.3);}50%{transform:scaleY(1);}} /* Phase status bar (Ringing… / Agent answering…) */ .sim-phase-bar{ font-size:.72rem;font-weight:600;letter-spacing:.02em;white-space:nowrap; overflow:hidden;max-height:0;opacity:0;transition:max-height .2s,opacity .2s;margin-bottom:0; } .wr-player.ringing .sim-phase-bar,.wr-player.answering .sim-phase-bar{ max-height:20px;opacity:1;margin-bottom:.3rem; } .wr-player.ringing .sim-phase-bar{color:var(--text-muted);} .wr-player.answering .sim-phase-bar{color:var(--green);} /* Transcript line dimming — future lines fade as audio reveals them */ .tl.tl--future{opacity:.3;transition:opacity .35s ease-out,background .2s;} /* Call summary card — auto-populated after call ends */ .call-sim-summary{ margin-top:.75rem;border-radius:var(--r); border:1px solid rgba(22,163,74,.2);background:var(--green-dim); padding:.75rem 1rem .65rem;animation:callSumIn .35s ease-out both; } .csm-heading{ font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase; letter-spacing:.07em;color:var(--green);margin-bottom:.5rem; } .csm-row{display:flex;gap:.5rem;font-size:.8rem;padding:.12rem 0;} .csm-key{color:var(--text-muted);font-weight:600;min-width:82px;flex-shrink:0;} .csm-val{color:var(--text);font-weight:500;} @keyframes callSumIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}} /* ── Use case cards ── */ .use-case-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem;margin-top:2.5rem; } .use-case-card{ background:#FFFFFF;box-shadow:var(--shadow-sm); border-radius:var(--r);padding:1.75rem; transition:box-shadow .15s,transform .15s; display:block;color:var(--text);text-decoration:none; border-left:3px solid transparent; } .use-case-card:nth-child(1){border-left-color:var(--cta);} .use-case-card:nth-child(2){border-left-color:var(--indigo);} .use-case-card:nth-child(3){border-left-color:var(--orange);} .use-case-card:nth-child(4){border-left-color:var(--pink);} .use-case-card:nth-child(5){border-left-color:var(--cta);} .use-case-card:hover{ box-shadow:0 24px 45px -15px rgba(46,91,62,0.35);transform:translateY(-7px);text-decoration:none; } .use-case-card .uc-icon{font-size:1.75rem;margin-bottom:.75rem;} .use-case-card h3{font-family:var(--font-display);font-size:1rem;font-weight:700;margin-bottom:.4rem;} .use-case-card p{font-size:.825rem;color:var(--text-2);line-height:1.6;} .uc-arrow{color:var(--cta);font-size:.85rem;margin-top:.75rem;display:block;} /* ── Pricing teaser ── */ .price-cards{ display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem;margin-top:2.5rem; } .price-card{ background:#FFFFFF;box-shadow:var(--shadow-sm); border-radius:var(--r);padding:1.75rem;position:relative; display:flex;flex-direction:column; transition:box-shadow .15s,transform .15s; } .price-card::before{ content:'';position:absolute;top:0;left:0;right:0;height:4px; background:var(--border); border-radius:var(--r) var(--r) 0 0; } .price-card:nth-child(odd)::before{background:var(--primary);} .price-card:nth-child(even)::before{background:var(--cta);} .price-card:hover{box-shadow:var(--shadow-print);transform:translate(-3px,-3px);} .price-card.featured{ background:#FFFFFF; box-shadow:var(--shadow-md); } /* Animated conic-gradient border that rotates around the featured card. Uses a registered custom property so the angle can be transitioned; degrades to a static gradient border where @property is unsupported. */ @property --bd-angle{syntax:'';initial-value:0deg;inherits:false;} /* Featured plan wears a stencil frame — dashed ember, hand-cut, no spin. */ .price-card.featured::after{ content:'';position:absolute;inset:4px;border-radius:inherit;pointer-events:none; border:2px dashed var(--cta); } .price-badge{ position:absolute;top:-0.65rem;left:1.5rem;z-index:2; font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em; background:var(--cta);color:#fff;padding:.2rem .6rem;border-radius:20px; } .price-name{font-family:var(--font-display);font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-2);margin-bottom:.5rem;} .price-amount{font-family:var(--font-display);font-size:2.25rem;font-weight:800;color:var(--text);line-height:1;} .price-amount sub{font-size:.9rem;font-weight:500;color:var(--text-2);vertical-align:super;font-size:.7em;} .price-per{font-size:.75rem;color:var(--text-muted);margin-bottom:1.25rem;min-height:2.4em;} .price-features{list-style:none;flex:1;margin-bottom:1.5rem;} .price-features li{ font-size:.85rem;color:var(--text-2);padding:.35rem 0; border-bottom:1px solid var(--border); display:flex;align-items:center;gap:.5rem; } .price-features li::before{content:'✓';color:var(--cta);font-weight:700;flex-shrink:0;} .price-setup{font-size:.75rem;color:var(--text-muted);text-align:center;margin-top:.5rem;} .billing-toggle-wrap{display:flex;align-items:center;gap:.75rem;justify-content:center;margin-bottom:2rem;} .billing-label{font-size:.875rem;color:var(--text-2);font-weight:500;} .billing-switch{ width:2.75rem;height:1.5rem;border-radius:9999px; background:var(--border);border:2px solid transparent;cursor:pointer; position:relative;transition:background .2s;padding:0;flex-shrink:0; } .billing-switch:focus-visible{outline:2px solid var(--cta);outline-offset:2px;} .billing-switch[aria-checked="true"]{background:var(--cta);} .billing-switch-thumb{ position:absolute;top:2px;left:2px; width:1rem;height:1rem; border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .2s; } .billing-switch[aria-checked="true"] .billing-switch-thumb{transform:translateX(1.25rem);} .save-badge{ display:inline-block;font-size:.65rem;font-weight:700; background:var(--green);color:#fff; padding:.15rem .45rem;border-radius:20px; text-transform:uppercase;letter-spacing:.06em;vertical-align:middle; margin-left:.25rem; } /* ── Testimonials ── */ .testimonials{ display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem;margin-top:2.5rem; } .testimonial{ background:#FFFFFF;box-shadow:var(--shadow-sm); border-radius:var(--r);padding:1.75rem; transition:box-shadow .15s; } .testimonial:hover{box-shadow:var(--shadow-md);} .testimonial p{ font-size:.9rem;color:var(--text-2);line-height:1.7; font-style:italic;margin-bottom:1rem; } .testimonial-author{font-size:.8rem;font-weight:700;color:var(--text);} .testimonial-title{font-size:.75rem;color:var(--text-muted);} /* New testimonial card — used by testimonials.ts on conversion pages */ .testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem;margin-top:2rem;} .testimonial-card{background:#FFFFFF;box-shadow:var(--shadow-sm);border-radius:var(--r);padding:1.75rem;margin:0;border-left:3px solid var(--cta);transition:box-shadow .15s,transform .15s;} .testimonial-card:nth-child(2){border-left-color:var(--indigo);} .testimonial-card:nth-child(3){border-left-color:var(--orange);} .testimonial-card:hover{transform:translateY(-2px);} .testimonial-card:hover{box-shadow:var(--shadow-md);} .testimonial-rating{color:var(--gold);font-size:1.05rem;letter-spacing:.05em;margin-bottom:.65rem;} .star-half{display:inline-block;width:.5em;overflow:hidden;vertical-align:bottom;} .testimonial-quote{font-size:.95rem;color:var(--text-2);line-height:1.65;font-style:italic;margin:0 0 1rem;quotes:none;} .testimonial-quote::before,.testimonial-quote::after{content:'';} .testimonial-attr{font-size:.8rem;font-weight:700;color:var(--text);font-style:normal;} /* ── FAQ — the ONE sitewide FAQ component (Phase 2 unification). Markup:
Q
A
── */ .faq-list{margin-top:2rem;display:flex;flex-direction:column;gap:.5rem;} .faq-list > details{ background:#FFFFFF;box-shadow:var(--shadow-sm); border-radius:var(--r);overflow:hidden; } .faq-list > details[open]{box-shadow:var(--shadow-md);} .faq-list > details > summary{ padding:1.1rem 1.5rem;font-size:.95rem;font-weight:600;color:var(--text); cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center; user-select:none; } .faq-list > details > summary::-webkit-details-marker{display:none;} .faq-list > details > summary::after{ content:'+';color:var(--indigo);font-size:1.4rem;font-weight:300; transition:transform .2s;flex-shrink:0;margin-left:1rem;line-height:1; } .faq-list > details[open] > summary::after{transform:rotate(45deg);color:var(--cta);} .faq-list > details[open]{border-left:3px solid var(--indigo);} .faq-answer{ padding:0 1.5rem 1.25rem;font-size:.9rem; color:var(--text-2);line-height:1.75;border-top:1px solid var(--border); padding-top:1rem; } /* Open/close animation — same motion as .svc-row-panel (.45s expo-out).
hides closed content at the UA level, so the svc-row grid-rows trick can't run on a child div; we animate the ::details-content pseudo (height 0 → auto via interpolate-size) instead. @supports-gated: Chromium animates open AND close; browsers without interpolate-size keep today's instant toggle. No JS, no extra wrapper markup needed. */ @supports (interpolate-size: allow-keywords){ .faq-list > details{interpolate-size:allow-keywords;} .faq-list > details::details-content{ height:0;overflow:clip; transition:height .45s var(--ease-out-expo),content-visibility .45s allow-discrete; } .faq-list > details[open]::details-content{height:auto;} @media (prefers-reduced-motion:reduce){ .faq-list > details::details-content{transition:none;} } } /* ── Lead form ── */ .lead-form{display:flex;flex-direction:column;gap:.75rem;max-width:480px;} .lead-form label{font-size:.8rem;font-weight:600;color:var(--text-2);margin-bottom:.2rem;display:block;} .lead-form input, .lead-form select, .lead-form textarea{ width:100%;padding:.65rem .9rem; background:var(--bg-card);border:1px solid var(--border); border-radius:var(--r-sm);color:var(--text);font-size:.9rem;font-family:var(--font); transition:border-color .15s;outline:none; } .lead-form input::placeholder, .lead-form textarea::placeholder{color:var(--text-muted);} .lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-dim);} .lead-form select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239CA0AB' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center;} .lead-form textarea{resize:vertical;min-height:100px;} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;} .form-success{ color:var(--green);font-size:.9rem;font-weight:600; display:none;padding:1rem;background:var(--green-dim); border:1px solid rgba(22,163,74,.2);border-radius:var(--r-sm);text-align:center; } .form-error{ color:var(--red);font-size:.875rem;font-weight:500; display:none;padding:1rem;background:rgba(220,38,38,0.07); border:1px solid rgba(220,38,38,.2);border-radius:var(--r-sm);text-align:center; } /* ── CTA banner ── the last wall before the door. */ .cta-banner{ background:var(--wall); border:3px solid var(--text); box-shadow:var(--shadow-print-lg); border-radius:var(--r-lg);padding:3.5rem 2rem;text-align:center; position:relative;overflow:hidden;isolation:isolate; color:var(--bone); } .cta-banner > *:not(.aurora){position:relative;z-index:1;} .cta-banner h2{font-family:var(--font-display);font-size:clamp(2rem,3.6vw,3rem);font-weight:800;text-transform:uppercase;margin-bottom:.75rem;color:var(--bone);} .cta-banner p{color:var(--bone-2);max-width:500px;margin:0 auto 2rem;} .cta-banner .cta-banner-secondary{font-size:.875rem;margin:1.25rem auto 0;max-width:none;} .cta-banner-secondary a{color:var(--bone);font-weight:600;} .cta-banner-secondary a:hover{color:var(--cta);} /* ── Aurora ── repurposed as slow-drifting overspray haze on dark walls: ember + fir smoke, no third hue. Only transform animates. */ .aurora{ position:absolute;top:50%;left:50%;width:140%;aspect-ratio:1;z-index:0;pointer-events:none; background:conic-gradient(from 0deg, rgba(217,83,30,0.30),rgba(46,91,62,0.26),rgba(217,83,30,0.16), rgba(46,91,62,0.26),rgba(217,83,30,0.30)); filter:blur(60px);opacity:.35; transform:translate(-50%,-50%) rotate(0deg); will-change:transform; animation:auroraSpin 28s linear infinite; } @keyframes auroraSpin{to{transform:translate(-50%,-50%) rotate(360deg);}} @media (prefers-reduced-motion:reduce){.aurora{animation:none;}} .dash-tile-num,.stat-num{font-variant-numeric:tabular-nums;} /* ── Page hero (inner pages) ── paper opener with a painted underline stroke. */ .page-hero{ padding:4rem 0 3rem; background: radial-gradient(ellipse 50% 40% at 30% 0%,rgba(217,83,30,0.07) 0%,transparent 70%), radial-gradient(ellipse 50% 40% at 70% 0%,rgba(46,91,62,0.07) 0%,transparent 70%); text-align:center; } .page-hero h1{font-family:var(--font-display);font-size:clamp(2.2rem,5vw,3.8rem);font-weight:800;text-transform:uppercase;letter-spacing:.005em;line-height:.98;margin-bottom:.75rem;} .page-hero h1::after{ content:'';display:block;width:110px;height:7px;margin:.85rem auto 0; background:var(--cta);transform:rotate(-1.2deg); clip-path:polygon(0 22%,100% 0,97% 78%,2% 100%); } .page-hero p{font-size:1.05rem;color:var(--text-2);max-width:560px;margin:0 auto;} /* ── Prose / content ── */ .prose h2{font-family:var(--font-display);font-size:1.4rem;font-weight:800;margin:2rem 0 .75rem;letter-spacing:-.02em;} .prose h3{font-family:var(--font-display);font-size:1.1rem;font-weight:700;margin:1.5rem 0 .5rem;} .prose p{font-size:.95rem;color:var(--text-2);line-height:1.8;margin-bottom:1rem;} .prose ul{margin-bottom:1rem;padding-left:1.25rem;} .prose ul li{font-size:.95rem;color:var(--text-2);line-height:1.8;margin-bottom:.3rem;} .prose strong{color:var(--text);font-weight:600;} /* ── Breadcrumb ── */ .breadcrumb{ font-size:.8rem;color:var(--text-muted);margin-bottom:2rem; display:flex;gap:.5rem;align-items:center; } .breadcrumb a{color:var(--text-muted);} .breadcrumb a:hover{color:var(--text-2);} /* ── Transcript ── */ .transcript{ background:var(--bg-card);border:1px solid var(--border); border-radius:var(--r);padding:1.5rem;margin:1.5rem 0; font-size:.85rem; } .transcript h4{ font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.07em; color:var(--text-muted);margin-bottom:1rem; } .transcript-line{margin-bottom:.75rem;line-height:1.7;} .transcript-line .speaker{ font-weight:700;color:var(--primary);font-size:.8rem; text-transform:uppercase;letter-spacing:.05em;margin-right:.5rem; } .transcript-line.agent .speaker{color:var(--cta);} /* ── ROI box ── */ .roi-box{ background:var(--green-dim);border:1px solid rgba(22,163,74,.2); border-radius:var(--r);padding:1.5rem;margin:1.5rem 0; } .roi-box h4{color:var(--green);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.07em;font-weight:700;margin-bottom:.75rem;} .roi-box .roi-line{ display:flex;justify-content:space-between;align-items:baseline; font-size:.9rem;padding:.3rem 0;border-bottom:1px solid rgba(22,163,74,.15); } .roi-box .roi-line:last-child{border-bottom:none;} .roi-box .roi-label{color:var(--text-2);} .roi-box .roi-val{font-weight:700;color:var(--green);} /* ── Sample Deliverable Chain ── */ .sample-chain{display:flex;flex-direction:column;gap:0;margin-top:2.5rem;} .sample-step{margin-bottom:0;} .sample-step-badge{ display:inline-flex;align-items:center;gap:.5rem; margin-bottom:.75rem; } .sample-step-num{ display:inline-flex;align-items:center;justify-content:center; width:1.6rem;height:1.6rem;border-radius:50%; background:var(--cta);color:#fff; font-size:.7rem;font-weight:800;flex-shrink:0; } .sample-step-label{ font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase; letter-spacing:.07em;color:var(--text-muted); } .transcript-note{ display:inline-block; background:var(--cta-dim);color:var(--cta); font-size:.68rem;font-weight:700;padding:.1em .45em; border-radius:3px;vertical-align:.1em;margin-left:.25rem; border:1px solid rgba(217,83,30,.2);white-space:nowrap; } .sample-chain-arrow{ text-align:center;color:var(--text-muted);font-size:1.25rem; padding:.6rem 0;line-height:1;user-select:none; } .ai-summary{ background:var(--bg-card);border:1px solid var(--border); border-radius:var(--r);overflow:hidden;margin-bottom:0; } .ai-summary-header{ background:var(--primary-dim);border-bottom:1px solid var(--border); padding:.65rem 1.1rem; display:flex;align-items:center;gap:.5rem; font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase; letter-spacing:.07em;color:var(--primary); } .ai-summary-grid{padding:.75rem 1.1rem;display:flex;flex-direction:column;gap:0;} .ai-summary-row{ display:flex;gap:.75rem;padding:.35rem 0; border-bottom:1px solid var(--border);font-size:.85rem; align-items:baseline; } .ai-summary-row:last-child{border-bottom:none;} .ai-sum-label{ width:6.5rem;flex-shrink:0;font-size:.75rem;font-weight:600; color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em; } .ai-sum-val{color:var(--text-2);flex:1;} .ai-sum-urgent{color:#d97706;font-weight:600;} .ai-sum-good{color:var(--green);font-weight:600;} .cal-event{ display:flex; background:var(--bg-card);border:1px solid var(--border); border-radius:var(--r);overflow:hidden; } .cal-event-bar{width:4px;background:var(--cta);flex-shrink:0;} .cal-event-body{padding:1rem 1.1rem;flex:1;} .cal-event-title{font-weight:700;font-size:.95rem;color:var(--text);margin-bottom:.3rem;} .cal-event-meta{font-size:.82rem;color:var(--text-2);margin-bottom:.15rem;} .cal-event-note{font-size:.78rem;color:var(--text-muted);font-style:italic;margin-top:.4rem;} .cal-event-footer{ font-size:.7rem;color:var(--text-muted);margin-top:.6rem; padding-top:.5rem;border-top:1px solid var(--border); } .sms-mock{ background:var(--bg-card);border:1px solid var(--border); border-radius:var(--r);padding:1rem 1.1rem;max-width:380px; } .sms-mock-header{ display:flex;justify-content:space-between;align-items:center; margin-bottom:.65rem; } .sms-mock-name{font-size:.8rem;font-weight:700;color:var(--text);} .sms-mock-time{font-size:.72rem;color:var(--text-muted);} .sms-bubble{ background:var(--cta);color:#fff; border-radius:14px 14px 4px 14px; padding:.7rem 1rem;font-size:.83rem;line-height:1.55; display:inline-block;max-width:100%; } .sms-status{font-size:.68rem;color:var(--text-muted);margin-top:.4rem;text-align:right;} /* ── Footer ── back wall of the shop. */ footer{ border-top:4px solid var(--cta); padding:3rem 0 2rem; background:var(--wall); color:var(--bone-2); } .footer-grid{ display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2.5rem; } .footer-brand .logo{font-size:1.1rem;color:var(--bone);} .footer-brand .logo span{color:var(--cta);} .footer-brand p{font-size:.8rem;color:var(--bone-2);margin-top:.6rem;max-width:260px;line-height:1.6;} /* Visible NAP — mirrors Organization.telephone/address in the layout schema so the human-readable and machine-readable contact details agree. */ .footer-nap{display:flex;flex-wrap:wrap;gap:.4rem .55rem;align-items:center;margin-top:.85rem;font-size:.85rem;color:var(--bone-2);} .footer-nap a{color:var(--bone-2);border-bottom:1px solid transparent;transition:color .15s,border-color .15s;} .footer-nap a:hover{color:var(--cta);border-bottom-color:var(--cta);} .footer-social{display:flex;gap:.75rem;margin-top:1rem;} .footer-social a{color:var(--bone-2);transition:color .15s;} .footer-social a:hover{color:var(--cta);} .footer-col h4{font-family:var(--font-marker);font-size:.85rem;font-weight:400;text-transform:none;letter-spacing:.02em;color:var(--cta);margin-bottom:.75rem;transform:rotate(-1.2deg);} .footer-col a{ display:block;font-size:.85rem;color:var(--bone-2);margin-bottom:.4rem; } .footer-col a:hover{color:var(--bone);text-decoration:none;} .footer-i18n{ border-top:1px solid var(--wall-border);padding:.6rem 0;margin-top:1.5rem; font-size:.78rem;color:var(--bone-2); display:flex;flex-wrap:wrap;gap:.5rem 1.25rem; } .footer-i18n a{color:var(--bone-2);} .footer-bottom{ border-top:1px solid var(--wall-border);padding-top:1.5rem; display:flex;justify-content:space-between;align-items:center; font-size:.75rem;color:var(--bone-2);flex-wrap:wrap;gap:.75rem; } /* ── Admin ── */ .admin-table{width:100%;border-collapse:collapse;font-size:.85rem;margin-top:1rem;} .admin-table th{ text-align:left;padding:.5rem .75rem;font-size:.75rem; text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted); border-bottom:1px solid var(--border); } .admin-table td{padding:.6rem .75rem;border-bottom:1px solid var(--border);color:var(--text-2);} .admin-table tr:hover td{background:var(--bg-card);} /* ── Audio player interaction ── */ .wr-play-btn:hover{opacity:.85;} .wr-play-btn:active{transform:scale(.95);} /* ── ROI Calculator page ── */ .roi-wrap{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;max-width:1040px;margin:0 auto;align-items:start;} .roi-form{display:flex;flex-direction:column;gap:1.25rem;} .roi-field label{display:block;font-weight:600;margin-bottom:.4rem;color:var(--text);} .roi-field input{ width:100%;padding:.75rem .9rem;border-radius:.6rem;border:1px solid var(--border); background:var(--bg-card);color:var(--text);font-size:1.1rem;font-weight:600; } .roi-field input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-dim);} .roi-field small{display:block;color:var(--text-muted);font-size:.78rem;margin-top:.3rem;line-height:1.5;} .roi-results{display:flex;flex-direction:column;gap:.8rem;position:sticky;top:6rem;} .roi-card{ padding:1.5rem 1.75rem;border-radius:var(--r);border:1px solid var(--border); background:var(--bg-card); } .roi-card.roi-leak{border-color:rgba(220,38,38,.45);background:rgba(220,38,38,.06);} .roi-card.roi-save{border-color:rgba(22,163,74,.45);background:rgba(22,163,74,.06);} .roi-card.roi-multiplier{border-color:rgba(37,99,235,.45);background:rgba(37,99,235,.06);} .roi-card .roi-label{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:.5rem;} .roi-card .roi-value{font-family:var(--font-display);font-size:2.5rem;font-weight:800;line-height:1;letter-spacing:-.02em;} .roi-card.roi-leak .roi-value{color:var(--red);} .roi-card.roi-save .roi-value{color:var(--green);} .roi-card.roi-multiplier .roi-value{color:var(--primary);} .roi-card .roi-sub{font-size:.82rem;color:var(--text-muted);margin-top:.5rem;} .roi-cta{text-align:center;margin-top:1.25rem;} /* ── Blog ── */ .blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;max-width:1100px;margin:0 auto;} .blog-card{ display:block;padding:1.75rem;border-radius:var(--r);border:1px solid var(--border); background:var(--bg-card);text-decoration:none;color:inherit;transition:transform .15s, border-color .15s; overflow:hidden; } .blog-card:hover{transform:translateY(-2px);border-color:var(--primary);} .blog-card-thumb{margin:-1.75rem -1.75rem 1.25rem;overflow:hidden;border-radius:var(--r) var(--r) 0 0;} .blog-card-thumb img{width:100%;height:160px;object-fit:cover;display:block;transition:transform .3s;} .blog-card:hover .blog-card-thumb img{transform:scale(1.03);} .blog-meta{font-size:.78rem;color:var(--text-muted);margin-bottom:.6rem;text-transform:uppercase;letter-spacing:.06em;} .blog-card h3{font-family:var(--font-display);font-size:1.15rem;margin-bottom:.6rem;line-height:1.3;} .blog-card p{font-size:.9rem;color:var(--text-2);line-height:1.55;} .blog-link{display:inline-block;margin-top:.9rem;font-size:.85rem;color:var(--primary);font-weight:600;} .blog-card-list{display:flex;flex-direction:column;gap:.75rem;margin-top:1.5rem;} .blog-card-mini{display:flex;flex-direction:column;gap:.25rem;padding:1.1rem 1.25rem;border-radius:var(--r);border:1px solid var(--border);background:var(--bg-card);text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s;} .blog-card-mini:hover{border-color:var(--primary);box-shadow:var(--shadow-sm);} .blog-card-mini__title{font-size:.95rem;font-weight:700;color:var(--text);line-height:1.35;} .blog-card-mini__desc{font-size:.85rem;color:var(--text-2);line-height:1.5;} .blog-card-mini__meta{font-size:.75rem;color:var(--text-muted);margin-top:.2rem;} .blog-post{padding:3rem 0;} .blog-post h1{font-family:var(--font-display);font-size:clamp(1.75rem,3.5vw,2.5rem);font-weight:800;letter-spacing:-.02em;line-height:1.15;} .blog-meta-top{font-size:.78rem;color:var(--text-muted);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.06em;} .blog-body h2{font-family:var(--font-display);font-size:1.5rem;margin-top:2.5rem;margin-bottom:1rem;color:var(--text);} .blog-body h3{font-family:var(--font-display);font-size:1.15rem;margin-top:1.75rem;margin-bottom:.75rem;color:var(--text);} .blog-body p{margin-bottom:1rem;line-height:1.75;color:var(--text-2);} .blog-body ul, .blog-body ol{margin:1rem 0 1.25rem 1.5rem;color:var(--text-2);line-height:1.75;} .blog-body li{margin-bottom:.4rem;} .blog-body strong{color:var(--text);} .blog-body table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.88rem;} .blog-body table th,.blog-body table td{padding:.6rem .75rem;border-bottom:1px solid var(--border);text-align:left;} .blog-body thead th{border-bottom:2px solid var(--border);font-weight:700;color:var(--text);} .blog-body tbody tr:hover{background:var(--primary-dim);} .blog-body a{color:var(--primary);} .blog-body img{max-width:100%;height:auto;border-radius:.6rem;display:block;margin:1.75rem 0;} .post-hero{margin:0 0 2rem;overflow:hidden;border-radius:.75rem;} .post-hero img{width:100%;height:auto;display:block;object-fit:cover;max-height:400px;} /* The legacy per-item FAQ ruleset was deleted in the Phase 2 unification — every FAQ now renders as .faq-list > details (see the FAQ block above). */ /* ── Case studies ── */ .case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem;max-width:1100px;margin:0 auto;} .case-card{ display:block;padding:1.75rem;border-radius:var(--r);border:1px solid var(--border); background:var(--bg-card);text-decoration:none;color:inherit;transition:transform .15s, border-color .15s; } .case-card:hover{transform:translateY(-2px);border-color:var(--cta);} .case-meta{font-size:.78rem;color:var(--text-muted);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.06em;} .case-card h3{font-size:1.1rem;margin-bottom:1rem;color:var(--text);} .case-hero-metric{font-size:2.5rem;font-weight:800;color:var(--primary);line-height:1;} .case-hero-label{font-size:.82rem;color:var(--text-muted);margin-top:.4rem;} .case-link{display:inline-block;margin-top:1rem;font-size:.85rem;color:var(--primary);font-weight:600;} .case-study{padding:3rem 0;} .case-meta-top{font-size:.78rem;color:var(--text-muted);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.06em;} .projection-banner{ margin:1.5rem 0;padding:1rem 1.25rem;border-radius:.6rem; border:1px solid rgba(250,204,21,.4);background:rgba(250,204,21,.08); color:var(--text-2);font-size:.9rem;line-height:1.6; } .case-metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin:2rem 0;} .case-metric{ padding:1.25rem;border-radius:.7rem;background:var(--bg-card);border:1px solid var(--border);text-align:center; } .case-metric-value{font-size:1.75rem;font-weight:800;color:var(--primary);line-height:1;} .case-metric-label{font-size:.78rem;color:var(--text-muted);margin-top:.4rem;text-transform:uppercase;letter-spacing:.04em;} .case-metric-sub{font-size:.72rem;color:var(--text-muted);margin-top:.3rem;opacity:.8;} .case-study h2{font-size:1.5rem;margin-top:2.5rem;margin-bottom:1rem;color:var(--text);} .case-study p{line-height:1.75;color:var(--text-2);margin-bottom:1rem;} .case-quote{ margin:2rem 0;padding:1.5rem 1.75rem;border-left:3px solid var(--primary); background:var(--bg-card);border-radius:.4rem;font-size:1.05rem;line-height:1.7;color:var(--text-2); } .case-quote cite{display:block;margin-top:.75rem;font-size:.85rem;color:var(--text-muted);font-style:normal;} .founders-offer{max-width:720px;margin:0 auto;text-align:center;} /* ── Mobile hamburger nav ── */ .nav-toggle{ display:none;flex-direction:column;gap:5px;justify-content:center; background:transparent;border:none;cursor:pointer;padding:.4rem; width:2.25rem;height:2.25rem;flex-shrink:0; } .nav-toggle-bar{ display:block;width:22px;height:2px;background:var(--text); border-radius:2px;transition:transform .25s, opacity .2s; transform-origin:center; } .nav-toggle.open .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg);} .nav-toggle.open .nav-toggle-bar:nth-child(2){opacity:0;} .nav-toggle.open .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* Drawer-only CTA: hidden everywhere except inside the open ≤768px drawer. */ .nav-mobile-cta{display:none;} /* Blog intro hub links under hero */ .blog-intro-links{ max-width:720px;margin:1.25rem auto 0;color:var(--text-2);font-size:.95rem; } .blog-intro-links a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(46,91,62,.3);} .blog-intro-links a:hover{border-bottom-color:var(--blue);} /* Blog toolbar — search + result count */ .blog-toolbar{ display:flex;align-items:center;gap:1rem;margin:0 auto 1rem;max-width:1100px;flex-wrap:wrap; } .blog-search{ position:relative;display:flex;align-items:center;flex:1;min-width:240px; background:var(--bg-card);border:1px solid var(--border);border-radius:8px; padding:0 .75rem;transition:border-color .15s; } .blog-search:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,91,62,.15);} .blog-search-icon{flex-shrink:0;color:var(--text-2);margin-right:.5rem;} .blog-search input{ flex:1;background:transparent;border:0;outline:0; padding:.65rem 0;color:var(--text);font-family:var(--font);font-size:.95rem; } .blog-search input::placeholder{color:var(--text-2);} .blog-search input::-webkit-search-cancel-button{display:none;} .blog-search-clear{ background:transparent;border:0;color:var(--text-2);cursor:pointer; font-size:1.4rem;line-height:1;padding:.25rem .35rem;border-radius:4px; transition:background .15s,color .15s; } .blog-search-clear:hover{background:var(--bg-card-h);color:var(--text);} .blog-result-count{ color:var(--text-2);font-size:.85rem;white-space:nowrap; } .blog-empty{ text-align:center;color:var(--text-2);padding:3rem 1rem;font-size:1rem; } /* Blog category filter pills */ .blog-filters{ display:flex;flex-wrap:wrap;gap:.5rem;margin:0 auto 1.75rem;max-width:1100px; } .blog-filter{ background:var(--bg-card);border:1px solid var(--border); border-radius:20px;padding:.35rem .9rem;font-size:.8rem;font-weight:600; color:var(--text-2);cursor:pointer;transition:background .15s,border-color .15s,color .15s; font-family:var(--font); } .blog-filter:hover{background:var(--bg-section);color:var(--text);} .blog-filter.active{background:var(--primary-dim);border-color:rgba(46,91,62,.4);color:var(--primary);} /* Blog cluster tag (inside cards + post meta) */ .blog-cluster-tag{ display:inline-block;font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase; letter-spacing:.07em;color:var(--primary);background:var(--primary-dim); border:1px solid rgba(46,91,62,.2);border-radius:20px; padding:.15rem .55rem;vertical-align:middle; } /* ── Builder-post components (difficulty badge, tool pills, architecture) ── Geometry matches .blog-cluster-tag (20px pill, .15/.55rem padding). */ .post-meta-builder{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1.5rem;} .post-meta-builder .badge{ display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase; letter-spacing:.07em;border-radius:20px;padding:.15rem .55rem;vertical-align:middle; } .badge--beginner{color:var(--green);background:var(--green-dim);border:1px solid rgba(22,163,74,.25);} .badge--intermediate{color:var(--orange);background:var(--orange-dim);border:1px solid rgba(217,83,30,.25);} .badge--advanced{color:var(--red);background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.25);} .tools-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);} .tool-pill{ display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase; letter-spacing:.07em;color:var(--primary);background:var(--primary-dim); border:1px solid rgba(46,91,62,.25);border-radius:20px; padding:.15rem .55rem;vertical-align:middle; } .tool-pill:hover{text-decoration:none;border-color:var(--primary);} .architecture-block{ margin:1.75rem 0;padding:1rem 1.25rem; border:1px solid var(--border);border-radius:var(--r); background:var(--bg-card);box-shadow:var(--shadow-sm); } .architecture-block summary{cursor:pointer;font-family:var(--font-display);font-weight:700;color:var(--text);} .arch-diagram{ margin-top:.75rem;padding:1rem;overflow-x:auto; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.8rem;line-height:1.55;color:var(--text); background:var(--bg-section);border-radius:8px; } /* ── Waveform decorative motif (CSS-only, voice-agent signal) ── */ .wave-motif{ display:inline-flex;align-items:end;gap:3px;height:32px;opacity:.35; pointer-events:none; } .wave-motif span{ display:block;width:3px;border-radius:2px; } .wave-motif span:nth-child(3n+1){background:var(--cta);} .wave-motif span:nth-child(3n+2){background:var(--indigo);} .wave-motif span:nth-child(3n){background:var(--orange);} .wave-motif span:nth-child(1){height:40%;} .wave-motif span:nth-child(2){height:75%;} .wave-motif span:nth-child(3){height:55%;} .wave-motif span:nth-child(4){height:90%;} .wave-motif span:nth-child(5){height:30%;} .wave-motif span:nth-child(6){height:65%;} .wave-motif span:nth-child(7){height:80%;} .wave-motif span:nth-child(8){height:45%;} .wave-motif span:nth-child(9){height:70%;} .wave-motif span:nth-child(10){height:35%;} .wave-motif span:nth-child(11){height:60%;} .wave-motif span:nth-child(12){height:50%;} .wave-motif--sm{height:18px;opacity:.85;} .wave-motif--sm span{background:var(--cta);width:2px;} .wave-motif--cta{opacity:.45;margin:0 auto 1.5rem;display:flex;justify-content:center;} .wave-motif--hero{margin:0 auto 1rem;display:flex;justify-content:center;opacity:.4;} /* ── Landing pages ── */ .lp{padding-bottom:4rem;} .lp-hero{ padding:4rem 0 3rem; background: radial-gradient(ellipse 50% 40% at 30% 0%,rgba(217,83,30,0.06) 0%,transparent 70%), radial-gradient(ellipse 50% 40% at 70% 0%,rgba(46,91,62,0.06) 0%,transparent 70%); text-align:center; } .lp-hero h1{ font-family:var(--font-display);font-size:clamp(1.8rem,4vw,3rem);font-weight:800; letter-spacing:-.03em;margin-bottom:.75rem;line-height:1.2; } .lp-hero p{font-size:1.05rem;color:var(--text-2);max-width:560px;margin:0 auto;line-height:1.7;} .lp-body{max-width:760px;margin:0 auto;padding:2.5rem 1.5rem 0;} .lp-content h2{ font-family:var(--font-display);font-size:1.5rem;font-weight:800;letter-spacing:-.02em; margin:2.5rem 0 1rem;color:var(--text);line-height:1.25; padding-bottom:.5rem;border-bottom:1px solid var(--border); } .lp-content h3{font-family:var(--font-display);font-size:1.15rem;font-weight:700;margin:1.75rem 0 .75rem;color:var(--text);} .lp-content h4{font-family:var(--font-display);font-size:1rem;font-weight:700;margin:1.25rem 0 .5rem;color:var(--text);} .lp-content p{margin-bottom:1rem;line-height:1.8;color:var(--text-2);font-size:.95rem;} .lp-content ul,.lp-content ol{margin:1rem 0 1.25rem 1.5rem;color:var(--text-2);line-height:1.8;} .lp-content li{margin-bottom:.4rem;font-size:.95rem;} .lp-content li::marker{color:var(--cta);} .lp-content strong{color:var(--text);font-weight:600;} .lp-content a{color:var(--primary);} .lp-content a:hover{text-decoration:underline;} .lp-content hr{border:none;border-top:1px solid var(--border);margin:2rem 0;} .lp-content blockquote{ margin:1.5rem 0;padding:1rem 1.5rem; border-left:3px solid var(--primary);background:var(--bg-card); border-radius:.4rem;font-size:.95rem;color:var(--text-2);line-height:1.7; } .lp-content table{ width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.88rem; background:var(--bg-card);border-radius:var(--r);overflow:hidden; box-shadow:var(--shadow-sm); } .lp-content thead tr{background:var(--bg-section);border-bottom:2px solid var(--border);} .lp-content th{ text-align:left;padding:.75rem 1rem;font-size:.78rem;font-weight:700; text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted); } .lp-content td{padding:.75rem 1rem;border-bottom:1px solid var(--border);color:var(--text-2);} .lp-content tr:last-child td{border-bottom:none;} .lp-content tr:hover td{background:rgba(46,91,62,0.03);} .lp-cta{ max-width:760px;margin:3rem auto 0;padding:0 1.5rem; } .lp-cta-inner{ background:linear-gradient(135deg,rgba(217,83,30,0.08),rgba(245,158,11,0.06)); border:1px solid rgba(217,83,30,0.18); border-radius:var(--r-lg);padding:3rem 2rem;text-align:center; } .lp-cta-inner p{color:var(--text-2);margin-top:1rem;font-size:.95rem;} /* ── Two Engines (Homepage) ── */ .two-engines{ display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:2rem; } .engine-card{ display:flex;flex-direction:column;gap:.75rem; background:var(--bg-card);border:1px solid var(--border); border-radius:var(--r-lg);padding:2rem; transition:border-color .2s,box-shadow .2s,transform .15s; text-decoration:none !important;color:var(--text); } .engine-card:hover{ border-color:var(--cta);box-shadow:var(--shadow-md);transform:translateY(-2px); } .engine-icon{color:var(--cta);width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--cta-dim);border-radius:12px;} .engine-card h3{font-size:1.25rem;font-weight:700;color:var(--text);} .engine-card p{color:var(--text-2);font-size:.93rem;line-height:1.7;flex:1;} .engine-arrow{font-size:.875rem;font-weight:600;color:var(--cta);} /* ── Content Network Grid (Homepage) ── */ .network-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem; } .network-card{ position:relative;display:flex;flex-direction:column;gap:.5rem; background:var(--bg-card);border:1px solid var(--border); border-radius:var(--r-lg);padding:2rem 1.75rem; transition:border-color .2s,box-shadow .2s,transform .15s; text-decoration:none !important;color:var(--text);overflow:hidden; } .network-card:hover{ box-shadow:var(--shadow-md);transform:translateY(-2px); } .network-card--crypto{border-top:3px solid #F59E0B;} .network-card--crypto:hover{border-color:#F59E0B;} .network-card--crypto .network-logo{color:#F59E0B;background:rgba(245,158,11,0.10);} .network-card--ai{border-top:3px solid #2563EB;} .network-card--ai:hover{border-color:#2563EB;} .network-card--ai .network-logo{color:#2563EB;background:rgba(37,99,235,0.10);} .network-card--agents{border-top:3px solid #7C3AED;} .network-card--agents:hover{border-color:#7C3AED;} .network-card--agents .network-logo{color:#7C3AED;background:rgba(124,58,237,0.10);} .network-badge{ position:absolute;top:1rem;right:1rem; font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em; padding:.2rem .6rem;border-radius:20px; background:rgba(22,163,74,0.10);color:#2E5B3E; } .network-logo{ width:48px;height:48px;display:flex;align-items:center;justify-content:center; border-radius:12px;margin-bottom:.25rem; } .network-card h3{font-size:1.15rem;font-weight:700;color:var(--text);} .network-domain{font-size:.8rem;font-weight:500;color:var(--text-muted);font-family:monospace;margin-bottom:.25rem;} .network-card p:last-of-type{color:var(--text-2);font-size:.9rem;line-height:1.65;flex:1;} .network-arrow{font-size:.85rem;font-weight:600;color:var(--primary);margin-top:.5rem;} .network-more{text-align:center;margin-top:2rem;color:var(--text-muted);font-size:.9rem;} /* ── Factory Steps (Homepage) ── */ .factory-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem; } .factory-step{ background:var(--bg-card);border:1px solid var(--border); border-radius:var(--r);padding:1.75rem; } .factory-step .step-num{ width:36px;height:36px;display:flex;align-items:center;justify-content:center; background:var(--gradient-cta);color:#fff;font-family:var(--font-display);font-weight:800;font-size:.95rem; border-radius:50%;margin-bottom:1rem; box-shadow:0 4px 12px rgba(217,83,30,0.25); } .factory-step h3{font-family:var(--font-display);font-size:1.05rem;font-weight:700;margin-bottom:.5rem;color:var(--text);} .factory-step p{color:var(--text-2);font-size:.9rem;line-height:1.65;} /* ── Responsive ── */ @media(max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr 1fr;} .ba-grid{grid-template-columns:1fr;} .steps-grid::before{display:none;} .steps-grid{grid-template-columns:1fr;} .roi-wrap{grid-template-columns:1fr;} .roi-results{position:static;} .two-engines{grid-template-columns:1fr;} .network-grid{grid-template-columns:1fr 1fr;} .factory-grid{grid-template-columns:1fr;} } @media(max-width:768px){ .nav-toggle{display:flex;} .nav-cta{display:none;} #main-nav{ display:none;position:absolute;top:100%;left:0;right:0; background:rgba(20,23,15,0.97);backdrop-filter:blur(12px); border-bottom:2px solid var(--cta); flex-direction:column;padding:1rem 1.5rem 1.5rem;gap:.25rem;z-index:99;/* one below --z-header: drawer tucks under the sticky header */ } #main-nav.open{ display:flex; /* Scroll the drawer when its content exceeds the viewport. 100dvh accounts for iOS Safari's collapsing URL bar; 100vh fallback for older browsers. */ max-height:calc(100vh - 4rem); max-height:calc(100dvh - 4rem); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } /* Drawer open/close animation. display participates via allow-discrete: on close the drawer stays rendered while opacity/translate run, then display flips to none at transition end; @starting-style supplies the open from-state. Browsers without transition-behavior drop the whole transition declaration (invalid value) and keep today's instant snap both ways. Closed display:none / open display:flex come from the rules above. */ #main-nav{transition:opacity .25s var(--ease-out-expo),translate .25s var(--ease-out-expo),display .25s allow-discrete;} #main-nav:not(.open){opacity:0;translate:0 -8px;} #main-nav.open{opacity:1;translate:0 0;} @starting-style{ #main-nav.open{opacity:0;translate:0 -8px;} } /* Reduced motion: kill the drawer transitions. Nested @media (house precedent: Task 11 nests @media inside @supports) because the global reduced-motion block near the top of the stylesheet would lose to this later #main-nav transition rule at equal specificity. */ @media (prefers-reduced-motion:reduce){ #main-nav{transition:none;} } #main-nav > a{ font-size:1rem;padding:.75rem .5rem;border-radius:0; border-bottom:1px solid var(--wall-border);color:var(--bone-2); } #main-nav > a:last-child{border-bottom:none;} /* Full-width primary CTA row at the bottom of the drawer — replaces the chrome .nav-cta, which is display:none at this breakpoint. Re-asserts the btn look that #main-nav > a (1,0,1 specificity) would otherwise strip. */ #main-nav > a.nav-mobile-cta{ display:flex;width:100%;justify-content:center; margin-top:.85rem;padding:.8rem 1.75rem; border-bottom:2px solid var(--text);border-radius:2px;color:#14170F; } /* Dropdown on mobile: flatten to inline accordion. !important is used on layout-killing properties to win against any leftover desktop rules — the desktop dropdown is absolute-positioned and we MUST force static flow when the parent #main-nav is the mobile drawer. */ .nav-dropdown{display:block !important;width:100%;position:static !important;} /* Match the links: content-width and horizontally centered (the column parent has align-items:center, but my .nav-dropdown is forced to 100% so the menu can be wide — so I center the toggle WITHIN the dropdown div via margin:auto and width:auto). "Services ▾" sits as one unit. */ .nav-dropdown-toggle{ display:flex; width:auto; margin:0 auto; align-items:center; gap:0.4rem; text-align:left; font-family:var(--font);font-size:1rem;font-weight:400;line-height:1.65; padding:.75rem .5rem;border-radius:0; border-bottom:1px solid var(--wall-border);color:var(--bone-2); } .nav-dropdown-toggle:focus-visible{outline:2px solid var(--cta);outline-offset:-2px;} .nav-dropdown-menu{ position:static !important; transform:none !important; left:auto !important;top:auto !important; opacity:1;visibility:visible;pointer-events:auto; min-width:0;width:100%; background:transparent;border:none;box-shadow:none; padding:0.25rem 0 0.75rem 0.5rem; display:none; transition:none; } .nav-dropdown.open .nav-dropdown-menu{ display:block; transform:none !important; } .nav-dropdown-cols{grid-template-columns:1fr !important;gap:0.75rem;} .nav-dropdown-heading{padding-top:0.75rem;font-size:0.72rem;} .nav-dropdown-menu a{ padding:.7rem .5rem;font-size:.95rem;border-bottom:none; min-height:44px;color:var(--bone-2); } .nav-dropdown-menu a:hover,.nav-dropdown-menu a:focus-visible{color:var(--bone);background:rgba(217,83,30,0.18);} .nav-dropdown-heading{color:var(--bone-2);opacity:.7;} /* Fir icons are tuned for the paper panel; on the dark drawer they sit near 2.5:1, so lift them to bone here. */ .nav-dropdown-icon{color:var(--bone-2);} .nav-dropdown-footer{text-align:left;margin-top:.5rem;padding-top:.5rem;} .nav-dropdown-footer a{padding:.7rem .5rem;min-height:44px;} } @media(max-width:640px){ .hero{padding:3.5rem 0 3rem;} .hero-ctas{flex-direction:column;align-items:center;} /* Iso-scene mobile scale: .iso-block--custom (left:55% + 170px wide) clips at 320–375px viewports. transform is not additive, so the 3D tilt is restated with scale(.72) appended; transform-origin top center anchors the shrunken scene under the hero copy; the negative margin reclaims the 28% of the 380px layout box the scale frees up (380 × .28 ≈ 106px). */ .hero-visual{min-height:0;} .iso-scene{ transform:perspective(800px) rotateX(calc(12deg + var(--ty,0deg))) rotateZ(-6deg) rotateY(var(--tx,0deg)) scale(.72); transform-origin:top center; margin-bottom:-106px; } .form-row{grid-template-columns:1fr;} .footer-grid{grid-template-columns:1fr;} .footer-bottom{flex-direction:column;text-align:center;} .price-cards{grid-template-columns:1fr;} .lp-hero{padding:3rem 0 2rem;} .lp-body{padding:2rem 1rem 0;} .lp-cta-inner{padding:2rem 1.25rem;} .lp-content table{font-size:.8rem;} .lp-content th,.lp-content td{padding:.6rem .75rem;} .network-grid{grid-template-columns:1fr;} } /* ── Trust row ── Thin credibility strip: integration logos + HIPAA/SOC2/Cloudflare badges */ .trust-row{ background:var(--bg-section); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:.9rem 0; overflow-x:auto; } .trust-row-inner{ display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;justify-content:center; } .trust-row-label{ font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.07em; color:var(--text-muted);white-space:nowrap;flex-shrink:0; } .trust-row-logos{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;} .trust-logo{ display:inline-flex;align-items:center;gap:.35rem; font-size:.75rem;font-weight:600;color:var(--text-muted); opacity:.7;transition:opacity .15s;white-space:nowrap; } .trust-logo:hover{opacity:1;} .trust-row-divider{ width:1px;height:1.1rem;background:var(--border);flex-shrink:0; } .trust-row-badges{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;} .trust-badge{ display:inline-flex;align-items:center;gap:.3rem; font-size:.7rem;font-weight:700;letter-spacing:.01em; color:var(--text-2);background:var(--bg-card); border:1px solid var(--border); padding:.28rem .6rem;border-radius:100px;white-space:nowrap; } .trust-badge--hipaa{color:#D9531E;border-color:rgba(217,83,30,.25);} .trust-badge--soc2{color:#2E5B3E;border-color:rgba(46,91,62,.25);} .trust-badge--cf{color:#F6821F;border-color:rgba(246,130,31,.25);} @media(max-width:768px){ .trust-row-divider{display:none;} .trust-row-inner{gap:.85rem;} .trust-row-logos{gap:.85rem;} } /* ── Guarantee band ── Risk-reversal strip repeated on high-intent pages ──── */ .guarantee-band{ background:var(--cta-dim); border-top:1px solid rgba(217,83,30,.2); border-bottom:1px solid rgba(217,83,30,.2); padding:.85rem 0; } .guarantee-band-inner{ display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;justify-content:center; } .guarantee-item{ display:inline-flex;align-items:center;gap:.45rem; font-size:.8rem;font-weight:700;color:var(--cta); white-space:nowrap; } .guarantee-icon{display:inline-flex;align-items:center;flex-shrink:0;color:var(--cta);} .guarantee-sep{color:rgba(217,83,30,.35);font-size:.9rem;flex-shrink:0;} @media(max-width:640px){ .guarantee-sep{display:none;} .guarantee-band-inner{gap:.7rem;} .guarantee-item{font-size:.75rem;white-space:normal;} } /* ── Founder credibility band ── */ .founder-band{padding:2rem 0;} .founder-band-block{ display:flex;align-items:flex-start;gap:2rem; max-width:760px;margin:0 auto; background:var(--bg-card);border:1px solid var(--border); border-radius:var(--r-lg);padding:2rem 2.25rem; box-shadow:var(--shadow-sm); } .founder-band-photo{flex-shrink:0;} .founder-photo{position:relative;display:block;width:80px;height:80px;flex-shrink:0;border-radius:50%;overflow:hidden;} .founder-photo svg{display:block;} .founder-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;} .founder-band-quote{ font-size:1rem;font-weight:700;color:var(--text); line-height:1.5;margin-bottom:.75rem;font-style:italic; } .founder-band-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .75rem;margin-bottom:.6rem;} .founder-band-name{font-size:.95rem;font-weight:700;color:var(--text);} .founder-band-sep{color:var(--text-muted);} .founder-band-title{font-size:.875rem;color:var(--text-2);} .founder-band-bio{font-size:.875rem;color:var(--text-2);line-height:1.65;margin-bottom:.85rem;} .founder-band-links{display:flex;gap:1.5rem;flex-wrap:wrap;} .founder-band-link{font-size:.875rem;font-weight:600;color:var(--cta);} .founder-band-link:hover{color:var(--cta-h);text-decoration:none;} @media(max-width:600px){ .founder-band-block{flex-direction:column;gap:1.25rem;padding:1.5rem;} } /* ── Credibility band ── homepage-only merge of trust-row + guarantee-band + founder-band: founder proof left, integration wordmarks + guarantees right. The three standalone bands above remain in use on pricing/services pages. */ .cred-band{padding:2rem 0;} .cred-band-inner{ display:flex;align-items:stretch;gap:2.25rem; background:var(--bg-card);border:1px solid var(--border); border-radius:var(--r-lg);padding:2rem 2.25rem; box-shadow:var(--shadow-sm); } .cred-founder{display:flex;align-items:flex-start;gap:1.5rem;flex:1.5;min-width:0;} .cred-founder-body{min-width:0;} .cred-proof{ flex:1;display:flex;flex-direction:column;gap:1.25rem;justify-content:center; border-left:1px solid var(--border);padding-left:2.25rem; } .cred-proof-label{ display:block;font-size:.7rem;font-weight:700;text-transform:uppercase; letter-spacing:.07em;color:var(--text-muted);margin-bottom:.5rem; } .cred-wordmarks{display:flex;flex-wrap:wrap;gap:.45rem 1.1rem;} .cred-wordmark{font-size:.8rem;font-weight:600;color:var(--text-muted);white-space:nowrap;} .cred-guarantees{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem;} .cred-guarantee{ display:flex;align-items:center;gap:.5rem; font-size:.825rem;font-weight:700;color:var(--cta); } @media(max-width:768px){ .cred-band-inner{flex-direction:column;gap:1.5rem;padding:1.5rem;} .cred-founder{flex-direction:column;gap:1.25rem;} .cred-proof{border-left:none;padding-left:0;border-top:1px solid var(--border);padding-top:1.5rem;} } /* ── Start-here link list ── compact numbered alternative to the card grid so the section stops duplicating the verticals grid two sections earlier. */ .start-here-list{list-style:none;margin:2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem;} .start-here-row{ display:flex;align-items:center;gap:1.1rem; background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r); padding:.9rem 1.25rem;color:var(--text); transition:transform .15s,box-shadow .15s,border-color .15s; } .start-here-row:hover{transform:translateX(4px);box-shadow:var(--shadow-sm);border-color:var(--primary);text-decoration:none;} .shl-num{ font-family:var(--font-display);font-size:.85rem;font-weight:700;color:var(--primary); width:1.9rem;height:1.9rem;flex-shrink:0;border-radius:50%; background:var(--primary-dim);display:inline-flex;align-items:center;justify-content:center; } .shl-body{min-width:0;flex:1;} .shl-title{font-family:var(--font-display);font-size:.95rem;font-weight:700;margin:0;line-height:1.35;} .shl-desc{display:block;font-size:.8rem;color:var(--text-2);line-height:1.5;} .shl-arrow{flex-shrink:0;font-size:.8rem;font-weight:600;color:var(--cta);white-space:nowrap;} @media(max-width:640px){ .start-here-row{flex-wrap:wrap;gap:.5rem .75rem;} .shl-arrow{margin-left:2.65rem;} } /* ── Specialty-retail / outdoor campaign — additive, page-scoped ────────────── "The Missed-Call Hang-Up." Everything is namespaced under .sr- so it can't leak into the global theme. The trail accent leans on a pine green that sits in the same slate/teal family already in :root, so it reads on-brand rather than bolted-on. --trail is defined locally on .sr-trail and only referenced inside .sr-* rules. */ .sr-trail{--trail:#2E5B3E;} /* Topographic line texture layered behind the hero (and any .sr-topo band). One rasterized SVG of flowing contour lines at low opacity — no animation, no per-frame cost. Masked to fade out toward the bottom so it never fights the content below it. Sits above the hero mesh-gradient, below the copy. */ .sr-topo{position:relative;isolation:isolate;} .sr-topo::after{ content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.6; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760' fill='none' stroke='%230E7A5F' stroke-width='1.4' stroke-opacity='0.1'%3E%3Cpath d='M-40 70 C 150 20 320 130 500 80 C 620 47 740 120 820 80'/%3E%3Cpath d='M-40 158 C 160 96 300 210 520 150 C 640 117 760 188 820 150'/%3E%3Cpath d='M-40 250 C 130 200 340 300 500 245 C 640 198 720 280 820 250'/%3E%3Cpath d='M-40 338 C 170 280 320 400 540 330 C 660 293 760 372 820 338'/%3E%3Cpath d='M-40 430 C 140 372 330 480 500 425 C 630 388 740 458 820 430'/%3E%3Cpath d='M-40 520 C 160 462 300 580 520 510 C 650 473 760 548 820 520'/%3E%3Cpath d='M-40 610 C 130 558 340 660 500 605 C 640 568 730 642 820 610'/%3E%3Cpath d='M-40 700 C 170 642 320 752 540 690 C 660 657 760 728 820 700'/%3E%3C/svg%3E"); background-size:760px 760px; -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 92%); mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 92%); } .sr-eyebrow{color:var(--trail);background:linear-gradient(135deg,rgba(14,122,95,0.10),rgba(217,83,30,0.10));} /* Money-tagged scenario cards — "Speaks your world". Each leads with the dollar figure of the booking/sale at stake so the payer ROI reads at a glance. */ .sr-scene-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:1.1rem;margin-top:2.5rem;} .sr-scene-card{ position:relative;background:var(--bg-card);border:1px solid var(--border); border-radius:var(--r-lg);padding:1.6rem;overflow:hidden; transition:transform .2s,box-shadow .2s,border-color .2s; } .sr-scene-card::before{ content:'';position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,#D9531E,#2E5B3E,#D9531E); } .sr-scene-card:hover{transform:translateY(-6px);box-shadow:0 24px 45px -18px rgba(217,83,30,0.4);border-color:transparent;} .sr-scene-icon{ width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; background:rgba(217,83,30,0.08);color:var(--cta);margin-bottom:.9rem; } .sr-scene-money{ font-family:var(--font-display);font-weight:800;font-size:1.55rem;line-height:1; background:linear-gradient(100deg,#D9531E,#2E5B3E 60%,#D9531E); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } .sr-scene-card h3{font-family:var(--font-display);font-size:1.02rem;font-weight:700;margin:.5rem 0 .35rem;color:var(--text);} .sr-scene-card p{font-size:.86rem;color:var(--text-2);line-height:1.6;margin:0;} .sr-scene-tag{display:block;margin-top:.75rem;font-size:.71rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--trail);} /* Payer-segment band — who actually pays back fast. Three coloured rails. */ .sr-seg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:1rem;margin-top:2rem;} .sr-seg{background:var(--bg-card);border:1px solid var(--border);border-left:3px solid var(--cta);border-radius:var(--r);padding:1.5rem;} .sr-seg:nth-child(2){border-left-color:var(--orange);} .sr-seg:nth-child(3){border-left-color:var(--indigo);} .sr-seg-icon{font-size:1.5rem;margin-bottom:.6rem;color:var(--cta);display:flex;} .sr-seg:nth-child(2) .sr-seg-icon{color:var(--orange);} .sr-seg:nth-child(3) .sr-seg-icon{color:var(--indigo);} .sr-seg h3{font-family:var(--font-display);font-size:1rem;font-weight:700;margin-bottom:.35rem;color:var(--text);} .sr-seg p{font-size:.85rem;color:var(--text-2);line-height:1.6;} .sr-seg-eg{display:block;margin-top:.55rem;font-size:.78rem;color:var(--text-muted);} /* Blog index featured niche banner — surfaces the winning specialty-retail post plus a signal to the /specialty-retail hub. Stacks cleanly on mobile. */ .sr-featured{ display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.25rem 1.5rem; background:linear-gradient(135deg,rgba(217,83,30,0.07),rgba(14,122,95,0.06),rgba(217,83,30,0.05)); border:1px solid rgba(217,83,30,0.18);border-radius:var(--r-lg);padding:1.5rem 1.75rem; } .sr-featured-mark{ display:flex;align-items:center;justify-content:center;width:52px;height:52px; border-radius:14px;background:rgba(217,83,30,0.10);color:var(--trail);flex-shrink:0; } .sr-featured-body{min-width:0;} .sr-featured-kicker{display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--trail);margin-bottom:.2rem;} .sr-featured-title{display:block;font-family:var(--font-display);font-weight:800;font-size:1.15rem;line-height:1.25;margin-bottom:.25rem;color:var(--text);} .sr-featured-sub{display:block;font-size:.85rem;color:var(--text-2);} .sr-featured-sub a{color:var(--trail);font-weight:600;} .sr-featured .btn{flex-shrink:0;} @media(max-width:720px){ .sr-featured{grid-template-columns:auto 1fr;} .sr-featured .btn{grid-column:1 / -1;justify-content:center;} } /* Homepage "Who it's for" highlight — self-contained, uses the same trail rail. */ .sr-home{ display:grid;grid-template-columns:1.1fr 1fr;gap:2.5rem;align-items:center; background:linear-gradient(135deg,rgba(217,83,30,0.06),rgba(14,122,95,0.05),rgba(217,83,30,0.04)); border:1px solid rgba(217,83,30,0.16);border-radius:var(--r-lg);padding:2.5rem; } .sr-home-chips{display:flex;flex-wrap:wrap;gap:.5rem;} .sr-chip{ display:inline-flex;align-items:center;gap:.4rem; font-size:.8rem;font-weight:600;color:var(--text); background:var(--bg-card);border:1px solid var(--border); padding:.4rem .75rem;border-radius:100px; } .sr-chip svg{color:#2E5B3E;} @media(max-width:768px){ .sr-home{grid-template-columns:1fr;gap:1.5rem;padding:1.75rem;} } /* ── Audio player (.wr-player) ── extracted from inline styles (design unify pass). Three markup generators share these classes: components.ts renderAudioPlayer, the demo-post player template in scripts.ts (app.js), and demo.ts's simulated live-call player (which still carries equivalent inline styles — they shadow these rules property-for-property, so it renders unchanged). The pause icon's display:none stays INLINE in the markup: app.js toggles style.display directly, and a class rule would out-cascade the cleared inline value and hide it forever. */ .wr-player{ background:var(--primary-dim);border:1px solid rgba(46,91,62,.25); border-radius:10px;padding:1.1rem 1.25rem; display:flex;align-items:center;gap:1rem; } .wr-player--capped{max-width:480px;} .wr-player--green{background:var(--green-dim);border-color:rgba(22,163,74,.25);} .wr-play-btn{ width:2.75rem;height:2.75rem;flex-shrink:0; border-radius:50%;border:none;cursor:pointer; background:var(--primary); display:flex;align-items:center;justify-content:center; transition:transform .15s,opacity .15s; } .wr-player--green .wr-play-btn{background:var(--green);} .wr-icon-play{margin-left:2px;} .wr-body{flex:1;min-width:0;} .wr-label{ font-size:.85rem;font-weight:700;color:var(--text);margin-bottom:.15rem; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .wr-sublabel{font-size:.75rem;color:var(--text-muted);margin-bottom:.4rem;} .wr-seek-bar{position:relative;height:4px;background:var(--border);border-radius:2px;cursor:pointer;margin-bottom:.35rem;touch-action:none;} /* A 4px-tall bar is a miserable click target, especially on a phone. This pseudo-element extends the hit area to ~20px without changing the visual weight — clicks on a pseudo-element are attributed to its originating element, so the existing .wr-seek-bar handlers pick them up unchanged. */ .wr-seek-bar::before{content:"";position:absolute;left:0;right:0;top:-8px;bottom:-8px;} .wr-seek-bar:focus-visible{outline:2px solid var(--primary);outline-offset:4px;} .wr-progress{position:relative;height:100%;width:0%;background:var(--primary);border-radius:2px;transition:width .1s linear;pointer-events:none;} /* Grab handle: hidden until the player is hovered, focused or playing, so a resting player stays visually quiet but the control is discoverable. */ .wr-progress::after{ content:"";position:absolute;right:-5px;top:50%;transform:translateY(-50%); width:10px;height:10px;border-radius:50%;background:var(--primary); opacity:0;transition:opacity .15s; } .wr-player:hover .wr-progress::after, .wr-player.playing .wr-progress::after, .wr-seek-bar:focus-visible .wr-progress::after{opacity:1;} .wr-player--green .wr-progress{background:var(--green);} .wr-times{display:flex;justify-content:space-between;} .wr-current,.wr-duration{font-size:.7rem;color:var(--text-muted);} /* ── US flag mark (header + footer) ── */ .us-flag{display:block;width:100%;height:auto;border-radius:1px;} .us-flag-wrap{ display:inline-flex;align-items:center;gap:.4rem; font-size:.75rem;color:var(--text-muted);line-height:1; } .us-flag-wrap .us-flag{ width:20px;flex:0 0 20px; /* A hairline keeps the white stripes from bleeding into a light background and the whole mark from floating on a dark one. */ box-shadow:0 0 0 1px rgba(0,0,0,.18); } /* The header is a space-between row, so without margin-right:auto the flag gets treated as its own column and floats in open space between the wordmark and the nav. This pins it beside the logo and lets it absorb the slack instead. The hairline before it does the rest of the work: without a separator the flag reads as the last element OF the wordmark rather than a badge sitting next to it. */ .logo-divider{ width:1px;align-self:stretch;margin:.15rem 0 .15rem .85rem; background:var(--wall-border);flex:0 0 auto; } .us-flag-wrap--header{margin-left:.7rem;margin-right:auto;flex:0 0 auto;} @media (max-width:640px){ .logo-divider{display:none;} } .us-flag-wrap--header .us-flag{width:22px;flex-basis:22px;} /* The header sits on the dark basalt band on some templates — soften the hairline there so it reads as a border, not a glow. */ .section--wall .us-flag-wrap .us-flag, footer .us-flag-wrap .us-flag{box-shadow:0 0 0 1px rgba(255,255,255,.22);} @media (max-width:640px){ /* Header real estate is tight on a phone; the footer mark still carries it. */ .us-flag-wrap--header{display:none;} } /* ── GEO answer snippet ── extracted from renderAnswerSnippet inline styles. */ .answer-snippet{ border-left:3px solid var(--primary);background:var(--primary-dim); border-radius:0 var(--r) var(--r) 0;padding:1.1rem 1.5rem;margin:1.75rem 0; } .answer-snippet-label{ font-size:.7rem;font-weight:700;text-transform:uppercase; letter-spacing:.08em;color:var(--primary);margin-bottom:.5rem; } .answer-snippet-text{font-size:1rem;line-height:1.75;color:var(--text);margin:0;font-weight:500;} /* ── Compare alternatives module ── extracted from renderCompareAlternativesModule inline styles; chip hover moves from onmouseover/onmouseout JS to :hover. */ .compare-chip{ display:inline-block;padding:.45rem .9rem;border:1px solid var(--border); border-radius:6px;font-size:.85rem;color:var(--primary);text-decoration:none; background:var(--bg);transition:border-color .15s,background .15s; white-space:nowrap; } .compare-chip:hover{border-color:var(--primary);background:var(--primary-dim);text-decoration:none;} .compare-chip-row{display:flex;flex-wrap:wrap;gap:.6rem;} .compare-mod-sub{color:var(--text-2);line-height:1.7;margin-bottom:1.5rem;max-width:640px;} .compare-mod-all{margin-top:1.25rem;font-size:.875rem;color:var(--text-2);} /* ── Provider pricing table (.ppt-*) ── extracted from renderAiReceptionistPricingTable. .ppt-spotlight scopes the Rosie AEO box; the bare .aeo-answer class stays unstyled here because compare.ts/integrations.ts reuse that name with their own inline styles. */ .ppt-spotlight{ background:var(--bg);border-left:3px solid var(--primary); padding:1.25rem 1.5rem;border-radius:var(--r);margin-bottom:2rem; } .ppt-spotlight h3{font-size:1rem;font-weight:700;margin:0 0 .4rem;} .ppt-spotlight p{font-size:.9rem;color:var(--text-2);line-height:1.75;margin:0 0 .75rem;} .ppt-spotlight a{font-size:.9rem;font-weight:600;color:var(--primary);} .ppt-scroll{overflow-x:auto;} .ppt-table{width:100%;border-collapse:collapse;font-size:.88rem;} .ppt-table thead th{text-align:left;padding:.7rem 1rem;border-bottom:2px solid var(--border);} .ppt-table thead th.ppt-th--price{border-bottom-color:var(--primary);color:var(--primary);} .ppt-table tbody th{text-align:left;padding:.75rem 1rem;border-bottom:1px solid var(--border);font-weight:600;} .ppt-table tbody td{padding:.75rem 1rem;border-bottom:1px solid var(--border);} .ppt-table tbody td:last-child{color:var(--text-2);} .ppt-table .ppt-row--wildrun th,.ppt-table .ppt-row--wildrun td{background:var(--primary-dim);} .ppt-table .ppt-row--wildrun th{font-weight:700;} .ppt-table .ppt-row--wildrun td:first-of-type{font-weight:700;} .ppt-name-link{color:var(--text);text-decoration:none;} .ppt-name-link:hover{text-decoration:none;} .ppt-name-link--wr{color:var(--primary);font-weight:700;} .ppt-note{font-size:.8rem;color:var(--text-muted);margin-top:1rem;} .ppt-note time{font-style:normal;} /* ── Resource links (equity paragraph) ── extracted from renderResourceLinks. */ .resource-links{font-size:.875rem;color:var(--text-2);margin-top:.875rem;line-height:1.7;} .resource-links--center{text-align:center;} .resource-links a{color:var(--cta);} /* ══ GRAFFITI LAYER ══ Basalt & Ember signature components (2026-08-12). New classes only — nothing above depends on these. */ /* ── Ticker tape ── full-bleed stencil marquee between hero and content. Track holds the phrase list twice; translating -50% loops seamlessly. */ .ticker{ background:var(--cta);border-block:3px solid var(--text); overflow:hidden;white-space:nowrap;user-select:none; } .ticker-track{ display:inline-flex;align-items:center;width:max-content; padding:.55rem 0; animation:tickerRoll 36s linear infinite; } .ticker:hover .ticker-track{animation-play-state:paused;} .ticker-track span{ font-family:var(--font-display);font-weight:800;text-transform:uppercase; font-size:1.05rem;letter-spacing:.06em;color:#14170F; padding:0 1.1rem; } .ticker-track i{font-style:normal;color:rgba(20,23,15,0.55);font-size:.8rem;} @keyframes tickerRoll{to{transform:translateX(-50%);}} @media (prefers-reduced-motion:reduce){.ticker-track{animation:none;}} /* ── Mural frame ── the hero's painted panel: bone frame, hard shadow, hung a degree and a half off level, straightens when you grab it. */ .hero--mural .hero-visual{align-items:center;min-height:0;} .mural-frame{ position:relative;width:100%;max-width:560px; transform:rotate(1.4deg); border:5px solid var(--bone);border-radius:2px; box-shadow:12px 14px 0 rgba(0,0,0,0.45); background:var(--wall-2); transition:transform .35s var(--ease-out-expo); } .mural-frame:hover{transform:rotate(.3deg);} .mural-frame img{display:block;width:100%;height:auto;border-radius:1px;} /* Tape corners */ .mural-frame::before,.mural-frame::after{ content:'';position:absolute;width:88px;height:24px; background:rgba(237,230,214,0.30);border:1px solid rgba(237,230,214,0.18); transform:rotate(-40deg);pointer-events:none; } .mural-frame::before{top:-10px;left:-30px;} .mural-frame::after{bottom:-10px;right:-30px;} .mural-tag{ position:absolute;right:.75rem;bottom:.45rem; font-family:var(--font-marker);font-size:.9rem;color:var(--bone); transform:rotate(-2deg);text-shadow:0 1px 5px rgba(0,0,0,0.8);opacity:.9; pointer-events:none; } @media(max-width:768px){ .mural-frame{max-width:440px;margin:1.5rem auto 0;} } /* ── Dark-hero legibility ── pages like /blog and /case-studies put their own paragraphs and links inside .hero; paint them for the wall. */ .hero p{color:var(--bone-2);} .hero a:not(.btn){color:var(--cta);} /* ── ON AIR chip ── WLDRN FM station light. */ .onair{ display:inline-flex;align-items:center;gap:.5rem; font-family:var(--font-utility);font-weight:700;font-size:.8rem;letter-spacing:.18em; color:var(--bone);border:2px solid var(--cta);border-radius:2px; padding:.35rem .8rem;background:rgba(217,83,30,0.12); } .onair i{width:9px;height:9px;border-radius:50%;background:var(--cta);animation:onairBlink 1.6s ease-in-out infinite;} @keyframes onairBlink{0%,100%{opacity:1;}50%{opacity:.22;}} @media(prefers-reduced-motion:reduce){.onair i{animation:none;}} /* ── Marker annotations ── hand-tagged asides. Use sparingly. */ .tag-note{ font-family:var(--font-marker);font-size:.95rem;line-height:1.5; color:var(--accent);display:inline-block;transform:rotate(-1.5deg); } .section--wall .tag-note,.hero .tag-note{color:var(--cta);} /* ── Boombox ── audio decks on dark walls: hero WLDRN FM + demo-block sample calls share the repaint. */ .hero .wr-player,.demo-block .wr-player,.section--wall .wr-player{ background:rgba(0,0,0,0.38); border:2px solid var(--wall-border);border-radius:3px; } .hero .wr-player{margin-top:1.5rem;} .hero .wr-player .wr-label,.demo-block .wr-player .wr-label,.section--wall .wr-player .wr-label{color:var(--bone);} .hero .wr-player .wr-sublabel,.demo-block .wr-player .wr-sublabel,.section--wall .wr-player .wr-sublabel{color:var(--bone-2);} .hero .wr-player .wr-seek-bar,.demo-block .wr-player .wr-seek-bar,.section--wall .wr-player .wr-seek-bar{background:rgba(237,230,214,0.18);} .hero .wr-player .wr-progress,.demo-block .wr-player .wr-progress,.section--wall .wr-player .wr-progress{background:var(--cta);} .hero .wr-player .wr-progress::after,.demo-block .wr-player .wr-progress::after,.section--wall .wr-player .wr-progress::after{background:var(--cta);} .hero .wr-player .wr-play-btn,.demo-block .wr-player .wr-play-btn,.section--wall .wr-player .wr-play-btn{background:var(--cta);border:2px solid #14170F;} .hero .wr-player .wr-current,.hero .wr-player .wr-duration, .demo-block .wr-player .wr-current,.demo-block .wr-player .wr-duration, .section--wall .wr-player .wr-current,.section--wall .wr-player .wr-duration{color:var(--bone-2);} /* ── Wall stat blocks ── stats painted straight on the dark section. */ .section--wall .stats-grid{border-block:2px dashed var(--wall-border);padding:1.75rem 0;} /* ── Creed ── short manifesto lines in the local-AI wall section. */ .creed{ font-family:var(--font-display);font-weight:700;text-transform:uppercase; font-size:clamp(1.15rem,2.2vw,1.6rem);line-height:1.25;letter-spacing:.015em; color:var(--bone);max-width:640px;margin:1.5rem 0; } .creed em{font-style:normal;color:var(--cta);}