/* conicore.io — generated by cloudflare-deploy/build.py, r2 */ @font-face { font-family: 'Archivo Disp'; font-style: normal; font-weight: 600 900; font-stretch: 125%; src: url(/assets/fonts/archivo-disp.86b5bbe2.woff2) format('woff2'); } @font-face { font-family: 'Archivo Body'; font-style: normal; font-weight: 400 600; src: url(/assets/fonts/archivo-body.7150c0ec.woff2) format('woff2'); } @font-face { font-family: 'Plex Mono'; font-style: normal; font-weight: 400; src: url(/assets/fonts/plex-mono-400.c36f509c.woff2) format('woff2'); } @font-face { font-family: 'Plex Mono'; font-style: normal; font-weight: 600; src: url(/assets/fonts/plex-mono-600.ad4580d8.woff2) format('woff2'); } :root { color-scheme: dark; --base: #0A0C0E; --base-2: #0E1216; --surface: #12171C; --surface-2: #161C22; --line: #232B31; --line-soft: #1A2127; --text: #F3F6F5; --text-2: #AEB7B8; --text-3: #6E7A7C; --teal: #19D3BE; --teal-2: #12B7E0; --teal-deep: #0B7C86; --teal-ink: #05201F; --wrap: 1240px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; } /* body already had overflow-x:hidden, but — not — is the actual scrolling element in most browsers, so decorative absolutely-positioned glow blobs bleeding past their container edge (.glow-a right:-8%, .glow-b left:-16%, both sized in vw) were still expanding the page's true scrollable width by ~30px on mobile — a real, if modest, horizontal-overflow bug on every page. */ body { margin: 0; background: var(--base); color: var(--text); font-family: 'Archivo Body', -apple-system, Helvetica, Arial, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } .mono { font-family: 'Plex Mono', ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; } a { color: inherit; text-decoration: none; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 3px; } img { max-width: 100%; display: block; } h1, h2, h3, h4 { text-wrap: balance; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 2.2rem; } /* ---------- buttons ---------- */ .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: 'Archivo Body', sans-serif; font-weight: 600; font-size: 0.95rem; padding: 0.8rem 1.5rem; border-radius: 999px; cursor: pointer; border: 1px solid transparent; text-align: center; transition: transform .18s ease, box-shadow .25s ease, background .2s, border-color .2s, color .2s; white-space: nowrap; } .btn-primary { color: var(--teal-ink); background: linear-gradient(180deg, #2AE6CE 0%, var(--teal) 45%, var(--teal-deep) 130%); box-shadow: 0 6px 24px -6px rgba(25,211,190,.55), inset 0 1px 0 rgba(255,255,255,.35); } .btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 62%); transform: translateX(-130%); transition: transform .6s ease; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 38px -8px rgba(25,211,190,.75), inset 0 1px 0 rgba(255,255,255,.45); } .btn-primary:hover::after { transform: translateX(130%); } .btn-ghost { color: var(--text); background: rgba(255,255,255,.03); border-color: var(--line); } .btn-ghost:hover { border-color: var(--teal); background: rgba(25,211,190,.08); transform: translateY(-2px); } .btn-ring { color: var(--teal); background: var(--base); border-color: var(--teal); } .btn-ring:hover { color: #eafffb; background: rgba(25,211,190,.12); transform: translateY(-2px); box-shadow: 0 10px 28px -12px rgba(25,211,190,.6); } .btn-lg { padding: 0.95rem 1.8rem; font-size: 1.02rem; } .btn-sm { padding: 0.58rem 1.1rem; font-size: 0.86rem; } /* ---------- header / nav ---------- */ .site-header { position: sticky; top: 0; z-index: 40; background: rgba(10,12,14,.72); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; } .site-header.scrolled { border-bottom-color: var(--line-soft); background: rgba(10,12,14,.9); } .nav { display: flex; align-items: center; gap: 2rem; padding: 1.15rem 0; } .brand { font-family: 'Archivo Disp', sans-serif; font-stretch: 108%; font-weight: 800; font-size: 1.2rem; letter-spacing: 0.14em; cursor: pointer; display: inline-flex; flex-direction: column; align-items: stretch; line-height: 1; width: max-content; } .brand-tag { font-family: 'Plex Mono', monospace; font-weight: 600; font-size: 0.48rem; letter-spacing: 0; text-transform: uppercase; color: var(--text-2); margin-top: 5px; width: 100%; text-align: justify; text-align-last: justify; } .nav-links { display: flex; gap: 2.2rem; margin-left: 1.2rem; } .nav-links a { position: relative; font-size: 1rem; font-weight: 600; color: var(--text-2); padding: 0.3rem 0; transition: color .2s; } .nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: linear-gradient(90deg, var(--teal), var(--teal-2)); transition: right .25s ease; } .nav-links a:hover { color: var(--text); } .nav-links a:hover::after, .nav-links a.active::after { right: 0; } .nav-links a.active { color: var(--text); } .nav-spacer { flex: 1; } .nav-cta { display: inline-flex; } .burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; margin-left: auto; } .burger span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: .25s; } .burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger.open span:nth-child(2) { opacity: 0; } .burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* mobile sheet */ .sheet { position: fixed; inset: 0 0 0 auto; width: min(82vw, 340px); z-index: 60; background: linear-gradient(180deg, var(--surface), var(--base)); border-left: 1px solid var(--line); padding: 5.5rem 1.8rem 2rem; transform: translateX(100%); transition: transform .3s ease; display: flex; flex-direction: column; gap: 0.4rem; } .sheet.open { transform: translateX(0); } .sheet a { padding: 0.85rem 0; font-size: 1.1rem; border-bottom: 1px solid var(--line-soft); color: var(--text-2); } .sheet a.active, .sheet a:hover { color: var(--teal); } .sheet .btn { margin-top: 1.2rem; } .overlay { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.6); opacity: 0; visibility: hidden; transition: .3s; backdrop-filter: blur(2px); } .overlay.open { opacity: 1; visibility: visible; } /* ---------- routing ---------- */ [data-route] { display: none; } [data-route].active { display: block; animation: fadein .4s ease; } @keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-route].active { animation: none; } } /* ---------- hero ---------- */ .hero { position: relative; } .glow { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(30px); } .glow-a { width: 60vw; height: 60vw; max-width: 820px; max-height: 820px; top: -14%; right: -8%; background: radial-gradient(circle at center, rgba(25,211,190,.34) 0%, rgba(18,183,224,.16) 38%, transparent 66%); } .glow-b { width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; top: 32%; left: -16%; background: radial-gradient(circle at center, rgba(18,120,180,.20) 0%, transparent 64%); } .hero-inner { position: relative; z-index: 2; display: flex; align-items: stretch; justify-content: space-between; gap: 1.5rem; min-height: 74vh; padding-top: 0.5rem; transform: translateX(1.5cm); } .hero-copy { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; flex: 0 0 58%; max-width: 58%; padding: 1.5rem 0 0; text-align: left; transform: translateX(calc(10.5vw - 38px)); } /* Very wide screens: freeze the hero grouping at its ~1440px look so the vw-based shift can't keep pushing the headline into the founder's face. */ @media (min-width: 1441px) { .hero-copy { transform: translateX(113px); } .portrait { transform: translateX(-130px) translateY(-3.5rem) scale(1.2); } } h1 { font-family: 'Archivo Body', sans-serif; font-weight: 700; font-size: clamp(3.4rem, 6.4vw, 5.7rem); line-height: 1.03; letter-spacing: -0.03em; margin: 0 0 1.7rem; } .grad { background: linear-gradient(100deg, var(--teal) 10%, var(--teal-2) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; /* background-clip:text paints only the line box, so descenders (the y in "automatically") get sheared at tight line-heights. Fixed with line-height on the headings rather than inline-block, which would make the span an atomic box and force ugly wraps like an orphaned ", 24/7.". */ /* The painted box for an inline element is the font's em box plus padding, and this display face's descenders overshoot it — hence the sheared y. */ padding-bottom: 0.2em; } .hero-sub { font-size: 1.32rem; color: var(--text-2); margin: 0 0 2.6rem; max-width: 27rem; align-self: flex-start; } .cta-group { display: flex; gap: 1.1rem; align-items: center; justify-content: flex-start; flex-wrap: wrap; } .hero-stats { display: flex; gap: 2rem; justify-content: space-between; max-width: 860px; margin: 0 auto; padding: 2.2rem 0 0; border-top: 1px solid var(--line-soft); } .hero-stats .s { text-align: center; flex: 0 0 auto; } .hero-stats .s .n { font-family: 'Archivo Disp', sans-serif; font-stretch: 108%; font-weight: 800; font-size: clamp(2.4rem, 4.2vw, 3.6rem); line-height: 1; letter-spacing: -0.01em; } .hero-stats .s .l { font-size: 1.05rem; color: var(--text-3); margin-top: 0.5rem; } .hero-photo { position: relative; display: flex; justify-content: center; align-items: stretch; flex: 0 0 40%; align-self: stretch; margin-left: -4%; pointer-events: none; } .portrait-ring { position: absolute; z-index: 0; left: 50%; top: 45%; transform: translate(-50%,-50%) scale(1.1); width: 150%; aspect-ratio: 1 / 1.02; border-radius: 50%; background: radial-gradient(circle at 50% 46%, rgba(25,211,190,.34), rgba(18,120,180,.14) 42%, transparent 64%); filter: blur(30px); } .hero-backdrop { position: absolute; z-index: 0; left: 46%; top: 44%; transform: translate(-50%,-50%); width: 175%; height: 95%; pointer-events: none; } .portrait { position: relative; z-index: 1; width: 100%; height: 100%; max-height: 88vh; object-fit: contain; object-position: center top; transform: translateX(calc(-9vw + 1.2cm - 45px)) translateY(-3.5rem) scale(1.2); transform-origin: center top; filter: drop-shadow(0 20px 44px rgba(0,0,0,.5)); } /* ---------- generic sections ---------- */ .section { position: relative; padding: 3.4rem 0; border-top: 1px solid var(--line-soft); } .section.tint { /* Option B "elevated band": flat surface tone lifts the section off the base so alternating sections read as separate bands, plus a crisp top hairline. */ background: radial-gradient(80% 120% at 82% 0%, rgba(18,183,224,.07), transparent 55%), var(--surface); border-top-color: var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); } .section-head { max-width: 46rem; margin: 0 auto 2.2rem; text-align: center; } .kicker { font-family: 'Plex Mono', monospace; font-size: 0.76rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal); margin: 0 0 1rem; } .section-head h2 { font-family: 'Archivo Body', sans-serif; font-weight: 600; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 1rem; } .section-head p { color: var(--text-2); font-size: 1.1rem; margin: 0; } /* page hero (inner pages) */ .page-hero { position: relative; padding: 3rem 0 2.2rem; border-bottom: 1px solid var(--line-soft); overflow: hidden; } .page-hero .glow-a { top: -30%; right: 6%; opacity: .8; } .page-hero-inner { position: relative; z-index: 2; max-width: 52rem; } /* FAQ-only faint "?" backdrop: sits ABOVE the glow, BELOW the content (z-index 1), clustered on the right and masked to fade out toward the left. */ .faq-qmarks, .price-syms, .hiw-cogs { position: absolute; z-index: 1; inset: 0; width: 100%; pointer-events: none; /* covers the right ~70%; fades fully out at 25% from the left, solid past ~55% */ -webkit-mask-image: linear-gradient(90deg, transparent 25%, #000 55%); mask-image: linear-gradient(90deg, transparent 25%, #000 55%); } .faq-qmarks text, .price-syms text { fill: var(--teal); font-family: 'Archivo Disp', sans-serif; font-weight: 800; } .hiw-cogs { fill: var(--teal); } @media (max-width: 900px) { .faq-qmarks, .price-syms, .hiw-cogs { display: none; } } /* Same 1.5cm inset as the two-column heroes, so every inner page starts its headline on the same vertical line. The two-column heroes shift their copy column instead — shifting the whole inner would drag their phone/photo too. Margin, not transform: these elements carry .reveal, whose .in state sets transform:none and would wipe a translate out the moment it animated in. */ .page-hero-inner:not(.lead-hero):not(.recept-hero) { margin-left: 57px; } @media (max-width: 900px) { .page-hero-inner:not(.lead-hero):not(.recept-hero) { margin-left: 0; } } .page-hero h1 { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.14; margin-bottom: 1.2rem; text-align: left; } .page-hero p { font-size: 1.24rem; color: var(--text-2); max-width: 38rem; margin: 0 0 2rem; } /* spotlight cards */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; max-width: 1080px; margin: 0 auto; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; max-width: 940px; margin: 0 auto; } .card { position: relative; padding: 2rem 1.8rem; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)); border: 1px solid var(--line); overflow: hidden; transition: transform .25s ease, border-color .25s ease; } .card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: radial-gradient(240px circle at var(--mx, -100px) var(--my, -100px), rgba(25,211,190,.6), transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .25s ease; pointer-events: none; } .card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(300px circle at var(--mx, -100px) var(--my, -100px), rgba(25,211,190,.10), transparent 55%); opacity: 0; transition: opacity .25s ease; } .card:hover { transform: translateY(-4px); border-color: rgba(25,211,190,.25); } .card:hover::before, .card:hover::after { opacity: 1; } .card .ico { width: 46px; height: 46px; border-radius: 12px; margin-bottom: 1.3rem; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; background: linear-gradient(160deg, rgba(25,211,190,.22), rgba(18,120,180,.12)); border: 1px solid rgba(25,211,190,.25); color: var(--teal); } .card .ico svg { width: 24px; height: 24px; display: block; } .card .k { font-family: 'Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); margin-bottom: 1rem; } .card h3 { font-family: 'Archivo Body', sans-serif; font-weight: 600; font-size: 1.3rem; margin: 0 0 0.7rem; letter-spacing: -0.01em; } .card p { color: var(--text-2); font-size: 0.98rem; margin: 0 0 1.2rem; } .card ul { margin: 0 0 1.4rem; padding: 0; list-style: none; } .card ul li { position: relative; padding-left: 1.5rem; margin-bottom: 0.55rem; color: var(--text-2); font-size: 0.96rem; } .card ul li::before { content: "→"; position: absolute; left: 0; color: var(--teal); } .card .more { color: var(--teal); font-weight: 600; font-size: 0.95rem; display: inline-flex; gap: 0.4rem; align-items: center; } .card .more::after { content: "→"; transition: transform .2s; } .card:hover .more::after { transform: translateX(4px); } /* big stat / 5-minute */ .lead-figure { display: grid; grid-template-columns: auto 1fr; gap: 2.4rem; align-items: center; max-width: 62rem; margin: 0 auto; } .big-stat { font-family: 'Archivo Disp', sans-serif; font-stretch: 112%; font-weight: 800; font-size: clamp(4rem, 12vw, 8.5rem); line-height: 0.85; letter-spacing: -0.03em; background: linear-gradient(160deg, var(--teal) 0%, var(--teal-2) 60%, var(--teal-deep) 120%); -webkit-background-clip: text; background-clip: text; color: transparent; } .lead-figure .txt h2 { font-family: 'Archivo Body', sans-serif; font-weight: 600; font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 0.8rem; } .lead-figure .txt p { color: var(--text-2); margin: 0 0 0.6rem; max-width: 34rem; font-size: 1.08rem; } .cite { font-size: 0.74rem !important; color: var(--text-3) !important; margin: 0.6rem 0 0 !important; } /* dashboard mock */ .dash { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, var(--surface), var(--base-2)); max-width: 1000px; margin: 0 auto; box-shadow: 0 30px 80px -40px rgba(0,0,0,.8); } .dash-top { display: flex; align-items: center; gap: 0.6rem; padding: 1rem 1.3rem; border-bottom: 1px solid var(--line); } .dash-top .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--line); } .dash-top .dot.g { background: #2fd08a; } .dash-top .dot.y { background: #e4c15a; } .dash-top .dot.r { background: #e46a6a; } .dash-top .title { margin-left: 0.8rem; font-family: 'Plex Mono', monospace; font-size: 0.8rem; color: var(--text-2); } .dash-top .pill { margin-left: auto; font-family: 'Plex Mono', monospace; font-size: 0.72rem; color: var(--teal); border: 1px solid rgba(25,211,190,.3); background: rgba(25,211,190,.08); padding: 0.25rem 0.7rem; border-radius: 999px; } .dash-scroll { overflow-x: auto; } table.log { width: 100%; border-collapse: collapse; font-family: 'Plex Mono', monospace; font-size: 0.84rem; min-width: 640px; } table.log th { text-align: left; font-weight: 400; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); padding: 0.9rem 1.3rem; border-bottom: 1px solid var(--line); } table.log td { padding: 0.85rem 1.3rem; border-bottom: 1px solid var(--line-soft); color: var(--text-2); white-space: nowrap; } table.log tr:last-child td { border-bottom: 0; } table.log td.src { color: var(--text); } .tag { display: inline-block; padding: 0.18rem 0.6rem; border-radius: 999px; font-size: 0.72rem; } .tag.booked { color: #6ff0c0; background: rgba(47,208,138,.12); border: 1px solid rgba(47,208,138,.3); } .tag.followup { color: #7fd6ea; background: rgba(18,183,224,.12); border: 1px solid rgba(18,183,224,.3); } .tag.new { color: #e4c15a; background: rgba(228,193,90,.12); border: 1px solid rgba(228,193,90,.3); } /* dashboard grid + phone mockup */ .dash-grid { display: grid; grid-template-columns: 300px 1fr; gap: 2rem; align-items: center; max-width: 1000px; margin: 0 auto; } /* phone lifted directly under the hero */ .lead-phone-hero { display: flex; justify-content: center; margin: -0.6rem auto 0; } /* lone lead-log table (phone now lives up by the hero) */ .dash-only { max-width: 760px; margin: 0 auto; } .phone { position: relative; width: 300px; justify-self: center; border-radius: 38px; padding: 12px; background: linear-gradient(160deg, #23292e, #0c0f12); border: 1px solid #2c343a; box-shadow: 0 40px 90px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06); } .phone-notch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 96px; height: 20px; background: #0c0f12; border-radius: 0 0 14px 14px; z-index: 3; } .phone-screen { border-radius: 28px; overflow: hidden; background: radial-gradient(120% 80% at 80% 0%, rgba(25,211,190,.12), transparent 55%), var(--base); padding: 1.5rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 1rem; min-height: 520px; } .ph-top { display: flex; align-items: center; justify-content: space-between; margin-top: 0.4rem; } .ph-brand { font-family: 'Archivo Disp', sans-serif; font-stretch: 108%; font-weight: 800; font-size: 0.82rem; letter-spacing: 0.12em; } .ph-live { font-family: 'Plex Mono', monospace; font-size: 0.62rem; color: var(--teal); border: 1px solid rgba(25,211,190,.3); background: rgba(25,211,190,.08); padding: 0.15rem 0.5rem; border-radius: 999px; } .ph-label { font-size: 0.72rem; color: var(--text-3); } .ph-big { font-family: 'Archivo Disp', sans-serif; font-stretch: 108%; font-weight: 800; font-size: 2.6rem; line-height: 1; margin: 0.15rem 0; } .ph-delta { font-size: 0.72rem; color: #6ff0c0; } .ph-spark { width: 100%; height: 60px; margin-top: 0.6rem; display: block; } .ph-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; } .ph-tile { border: 1px solid var(--line); border-radius: 12px; padding: 0.7rem 0.8rem; background: rgba(255,255,255,.02); } .ph-tile-n { font-family: 'Archivo Disp', sans-serif; font-stretch: 108%; font-weight: 700; font-size: 1.3rem; color: var(--teal); } .ph-tile-l { font-size: 0.68rem; color: var(--text-3); margin-top: 0.15rem; } .ph-rows { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.2rem; } .ph-row { display: flex; align-items: center; gap: 0.55rem; font-size: 0.74rem; color: var(--text-2); } .ph-row-t { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ph-row-x { color: var(--text-3); } .ph-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; } .ph-dot.g { background: #6ff0c0; } .ph-dot.t { background: var(--teal); } .ph-dot.y { background: #e4c15a; } /* proof band */ .proof-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; max-width: 1000px; margin: 0 auto; } .pb-tile { position: relative; padding: 1.8rem 1.7rem; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); overflow: hidden; } .pb-n { font-family: 'Archivo Disp', sans-serif; font-stretch: 108%; font-weight: 800; font-size: clamp(2.2rem, 3.6vw, 3rem); line-height: 1; color: var(--teal); } .pb-l { color: var(--text-2); font-size: 0.92rem; margin-top: 0.5rem; } .pb-spark { width: 100%; height: 40px; margin-top: 1rem; display: block; } .pb-bars { display: flex; align-items: flex-end; gap: 5px; height: 44px; margin-top: 1rem; } .pb-bars i { flex: 1; background: linear-gradient(180deg, var(--teal), var(--teal-deep)); border-radius: 3px; opacity: 0.85; } .pb-tile.pb-center { text-align: center; } .pb-donut { position: relative; width: 96px; height: 96px; margin: 0.3rem auto; } .pb-donut svg { width: 100%; height: 100%; } .pb-donut-arc { transition: stroke-dashoffset 1.4s cubic-bezier(.3,0,.2,1); } .pb-donut-c { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; color: var(--text); } @media (prefers-reduced-motion: reduce) { .pb-donut-arc { transition: none; } } /* calculator */ .calc { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; max-width: 1000px; margin: 0 auto; align-items: stretch; } .calc-figure { position: relative; z-index: 0; max-width: 1000px; height: 200px; margin: 0 auto 1.6rem; } .calc-figure::before { content: ''; position: absolute; inset: -18% -8%; z-index: -1; pointer-events: none; background: radial-gradient(58% 72% at 50% 50%, rgba(25,211,190,.34), transparent 70%); filter: blur(38px); } .calc-figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; opacity: 0.82; -webkit-mask-image: radial-gradient(120% 145% at 50% 42%, #000 38%, transparent 82%); mask-image: radial-gradient(120% 145% at 50% 42%, #000 38%, transparent 82%); } .calc-figure::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 90% at 50% 42%, rgba(25,211,190,.16), transparent 62%), linear-gradient(180deg, transparent 42%, rgba(10,12,14,.6)); } .calc-prompt { font-family: 'Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); margin: 0; display: flex; align-items: center; gap: 0.55rem; } .calc-prompt::before { content: ''; width: 26px; height: 1px; background: linear-gradient(90deg, var(--teal), transparent); } .calc-controls { display: flex; flex-direction: column; justify-content: center; gap: 2rem; padding: 2.4rem; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); } .ctrl-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; gap: 1rem; } .ctrl-top label { color: var(--text-2); font-size: 0.98rem; } .ctrl-top output { font-family: 'Plex Mono', monospace; font-size: 1.35rem; font-weight: 600; color: var(--teal); font-variant-numeric: tabular-nums; } .calc-note { font-size: 0.78rem; color: var(--text-3); margin: 0.4rem 0 0; } input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; margin: 0; background: linear-gradient(90deg, var(--teal) 0%, var(--teal-2) var(--pct,50%), var(--line) var(--pct,50%)); cursor: pointer; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #4defd9, var(--teal-deep)); box-shadow: 0 2px 12px -2px rgba(25,211,190,.9), 0 0 0 5px rgba(25,211,190,.14); border: 0; } input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #4defd9, var(--teal-deep)); box-shadow: 0 2px 12px -2px rgba(25,211,190,.9), 0 0 0 5px rgba(25,211,190,.14); } .calc-result { display: flex; flex-direction: column; align-items: flex-start; padding: 2.4rem; border-radius: 20px; border: 1px solid rgba(25,211,190,.28); background: radial-gradient(130% 130% at 100% 0%, rgba(25,211,190,.16), transparent 55%), linear-gradient(160deg, var(--surface), var(--base-2)); box-shadow: 0 24px 70px -40px rgba(25,211,190,.4); } .res-label { font-family: 'Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); } .res-big { font-family: 'Archivo Disp', sans-serif; font-stretch: 108%; font-weight: 800; font-size: clamp(2.8rem, 5vw, 4rem); line-height: 1; margin: 0.5rem 0 0.4rem; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; } .res-sub { color: var(--text-2); font-size: 0.98rem; } .res-divider { width: 100%; height: 1px; background: var(--line); margin: 1.6rem 0; } .res-recover { font-family: 'Archivo Disp', sans-serif; font-stretch: 108%; font-weight: 800; font-size: clamp(2.4rem, 4.4vw, 3.4rem); line-height: 1; margin: 0.5rem 0 0.4rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; background: linear-gradient(100deg, var(--teal), var(--teal-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .calc-result .btn { margin-top: 1.8rem; } .calc-bars { width: 100%; margin-top: 1.4rem; display: flex; flex-direction: column; gap: 0.7rem; } .cbar { display: flex; flex-direction: column; gap: 0.3rem; } .cbar-l { font-size: 0.74rem; color: var(--text-3); } .cbar-track { width: 100%; height: 9px; border-radius: 999px; background: rgba(255,255,255,.05); overflow: hidden; } .cbar-fill { height: 100%; width: 0; border-radius: 999px; transition: width .5s cubic-bezier(.4,0,.2,1); } .cbar-fill.lost { background: linear-gradient(90deg, #7a4a4a, #b56b6b); } .cbar-fill.won { background: linear-gradient(90deg, var(--teal-deep), var(--teal)); } @media (prefers-reduced-motion: reduce) { .cbar-fill { transition: none; } } /* transcript */ .transcript { max-width: 640px; margin: 0 auto; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.02); padding: 1.6rem; } .transcript .turn { margin-bottom: 1rem; } .transcript .who { font-family: 'Plex Mono', monospace; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; display: block; margin-bottom: 0.25rem; } .transcript .turn.ai .who { color: var(--teal); } .transcript .turn.caller .who { color: var(--text-3); } .transcript .turn p { margin: 0; } .transcript .result { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px dashed var(--line); display: flex; justify-content: space-between; font-size: 0.9rem; } .transcript .result b { color: #6ff0c0; } /* collapsible sample-call transcript (saves vertical space) */ details.transcript-collapse { padding: 0; } details.transcript-collapse > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.6rem; font-weight: 600; color: var(--text-1); } details.transcript-collapse > summary::-webkit-details-marker { display: none; } details.transcript-collapse > summary .ts-chev { color: var(--teal); font-size: 1.1rem; transition: transform .2s; } details.transcript-collapse[open] > summary .ts-chev { transform: rotate(180deg); } details.transcript-collapse > summary .ts-hint { font-family: 'Plex Mono', monospace; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-left: auto; } details.transcript-collapse .transcript-body { padding: 0.4rem 1.6rem 1.6rem; } /* orange attention glow on the receptionist "hear a live call" button */ a.btn[data-transcript] { border-color: #F97316; color: #F97316; animation: btnGlowOrange 1.8s ease-in-out infinite; } a.btn[data-transcript]:hover { background: rgba(249,115,22,.12); } @keyframes btnGlowOrange { 0%,100% { box-shadow: 0 0 16px -4px rgba(249,115,22,.55); } 50% { box-shadow: 0 0 30px 0 rgba(249,115,22,.9); } } @media (prefers-reduced-motion: reduce) { a.btn[data-transcript] { animation: none; box-shadow: 0 0 18px -4px rgba(249,115,22,.6); } } /* "In your pocket": the real demo running inside the phone graphic. The dashboard's mobile layout only resolves cleanly at ~520px, so the frame is rendered at that width and scaled down. transform keeps it fully interactive. */ .pocket-demo { display: flex; flex-direction: column; align-items: center; gap: 1rem; } /* Sized so the whole phone sits inside a laptop viewport alongside the heading — the frame was previously taller than the screen, forcing a scroll to see its foot. */ /* As tall as the viewport allows while still showing the whole frame: the screen tracks vh, and the iframe height is that divided back out by the scale. */ .phone.phone-lg { width: 420px; } .phone-screen-live { padding: 0; min-height: 0; height: min(760px, 72vh); position: relative; } .pocket-frame { position: absolute; top: 0; left: 0; border: 0; width: 520px; height: calc(min(760px, 72vh) / 0.76154); transform: scale(0.76154); transform-origin: top left; } .pocket-note { font-family: 'Plex Mono', monospace; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin: 0; } @media (max-width: 460px) { .phone.phone-lg { width: min(92vw, 380px); } } /* Receptionist hero: copy left, cut-out photo right */ .recept-hero { max-width: none; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1.4rem; align-items: center; } .recept-hero .recept-hero-copy { max-width: 45rem; transform: translateX(57px); } .recept-hero .recept-hero-photo { display: flex; justify-content: flex-end; } /* The original studio photo, white background and all, held in a circular frame. */ .recept-hero .recept-hero-photo img { width: clamp(300px, 28vw, 380px); aspect-ratio: 1; display: block; object-fit: cover; object-position: 50% 42%; border-radius: 50%; border: 1px solid rgba(25,211,190,.35); box-shadow: 0 0 0 10px rgba(25,211,190,.06), 0 30px 70px -28px rgba(0,0,0,.85); } @media (max-width: 900px) { .recept-hero { grid-template-columns: 1fr; gap: 1rem; } .recept-hero .recept-hero-copy { transform: none; } .recept-hero .recept-hero-photo { justify-content: center; } .recept-hero .recept-hero-photo img { width: min(78vw, 340px); } } /* Lead-gen hero: copy left, phone right */ .lead-hero { max-width: none; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1.4rem; align-items: center; } /* Copy runs wider than the default page-hero so it reaches toward the phone — the visible gap was dead space in the 1fr column, not the grid gap. */ .lead-hero .lead-hero-copy { max-width: 45rem; transform: translateX(57px); } .lead-hero .lead-hero-copy h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); } .lead-hero .lead-hero-copy > p { font-size: 1.3rem; max-width: 42rem; } .lead-hero .lead-hero-phone { display: flex; justify-content: flex-end; transform: translateX(-76px); position: relative; } /* Teal wash behind the hero phone, echoing the home hero's backdrop. */ .lead-hero .lead-hero-phone::before { content: ''; position: absolute; z-index: 0; pointer-events: none; width: 130%; aspect-ratio: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at center, rgba(25,211,190,.26) 0%, rgba(18,120,180,.12) 42%, transparent 68%); filter: blur(6px); } .lead-hero .lead-hero-phone .phone { position: relative; z-index: 1; } /* Same lead-data plate that sits behind the founder on the home hero. */ .lead-hero .lead-backdrop { position: absolute; z-index: 0; pointer-events: none; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 210%; height: 130%; } @media (max-width: 900px) { .lead-hero .lead-backdrop { display: none; } } @media (max-width: 900px) { .lead-hero { grid-template-columns: 1fr; gap: 1.6rem; } .lead-hero .lead-hero-copy { transform: none; } .lead-hero .lead-hero-phone { justify-content: center; transform: none; } } /* steps */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; counter-reset: step; } .step { position: relative; padding: 2rem 1.5rem; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008)); } .step .num { font-family: 'Archivo Disp', sans-serif; font-weight: 800; font-size: 2.6rem; line-height: 1; background: linear-gradient(160deg, var(--teal), var(--teal-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 0.9rem; } .step h3 { font-size: 1.15rem; font-weight: 600; margin: 0 0 0.5rem; } .step p { color: var(--text-2); font-size: 0.95rem; margin: 0; } .step:not(:last-child)::after { content: ''; position: absolute; top: 2.55rem; right: -1.15rem; width: 1.2rem; height: 1.2rem; z-index: 3; pointer-events: none; background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319D3BE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4 16 12 8 20'/%3E%3C/svg%3E"); animation: stepArrow 1.4s ease-in-out infinite; } @keyframes stepArrow { 0%,100% { transform: translateX(-3px); opacity: .5; } 50% { transform: translateX(3px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .step::after { animation: none; transform: translateX(0); opacity: .8; } } /* pricing */ .price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.4rem; max-width: 1120px; margin: 0 auto; } .price-card { position: relative; padding: 2.4rem 2rem; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); overflow: hidden; display: flex; flex-direction: column; } .price-card .btn { margin-top: auto; align-self: flex-start; } .price-card.feature { border-color: rgba(25,211,190,.35); box-shadow: 0 20px 60px -30px rgba(25,211,190,.4); } .price-card .svc { font-family: 'Plex Mono', monospace; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); margin-bottom: 1rem; } .price-card h3 { font-size: 1.5rem; font-weight: 600; margin: 0 0 0.4rem; } .price-card .from { font-family: 'Archivo Disp', sans-serif; font-weight: 800; font-size: 1.7rem; margin: 1rem 0 0.2rem; } .price-card .note { color: var(--text-3); font-size: 0.9rem; margin-bottom: 1.4rem; } .price-card ul { list-style: none; padding: 0; margin: 0 0 1.8rem; } .price-card ul li { position: relative; padding-left: 1.7rem; margin-bottom: 0.7rem; color: var(--text-2); } .price-card ul li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 700; } .included { max-width: 900px; margin: 2.5rem auto 0; padding: 1.6rem 2rem; border: 1px dashed var(--line); border-radius: 16px; color: var(--text-2); text-align: center; } .included b { color: var(--text); } /* FAQ */ .faq-wrap { max-width: 780px; margin: 0 auto; } .faq-group { margin-bottom: 2.6rem; } .faq-group > h3 { font-family: 'Plex Mono', monospace; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); margin: 0 0 1rem; } details.qa { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 0.7rem; background: rgba(255,255,255,.02); overflow: hidden; transition: border-color .2s; } details.qa[open] { border-color: rgba(25,211,190,.3); } details.qa summary { list-style: none; cursor: pointer; padding: 1.1rem 1.3rem; font-weight: 600; font-size: 1.05rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } details.qa summary::-webkit-details-marker { display: none; } details.qa summary .plus { color: var(--teal); font-size: 1.3rem; transition: transform .25s; flex-shrink: 0; } details.qa[open] summary .plus { transform: rotate(45deg); } details.qa .a { padding: 0 1.3rem 1.2rem; color: var(--text-2); } /* generic content prose */ .prose { max-width: 720px; margin: 0 auto; } .prose p { color: var(--text-2); font-size: 1.06rem; margin: 0 0 1.3rem; } .prose h2 { font-size: 1.6rem; font-weight: 600; margin: 2.4rem 0 1rem; letter-spacing: -0.01em; } .prose h3 { font-size: 1.15rem; font-weight: 600; margin: 1.8rem 0 0.6rem; } .prose a.inline { color: var(--teal); border-bottom: 1px solid rgba(25,211,190,.4); } /* about */ .about-lede { max-width: 68ch; } .about-close { margin-top: 2.2rem !important; } /* Full-width room shot: proof on the landing page, establishing shot on About. */ .section-shot { position: relative; max-width: 940px; margin: 2.8rem auto 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); line-height: 0; box-shadow: 0 24px 60px rgba(0,0,0,.45); } .section-shot.lede { margin: 0 auto 2.8rem 0; } .section-shot img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; } /* closer CTA */ .closer { margin-top: 0; padding: 3rem 2.5rem; border-radius: 20px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; background: radial-gradient(120% 180% at 0% 0%, rgba(25,211,190,.16), transparent 55%), linear-gradient(120deg, var(--surface), var(--base-2)); border: 1px solid var(--line); position: relative; overflow: hidden; } .closer h2 { font-family: 'Archivo Body', sans-serif; font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -0.02em; margin: 0 0 0.5rem; } .closer p { color: var(--text-2); margin: 0; } /* footer */ .foot { border-top: 1px solid var(--line-soft); background: var(--base-2); } .foot-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem; padding: 4rem 0 2.5rem; } .foot h4 { font-family: 'Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin: 0 0 1.1rem; } .foot .brand { font-size: 1.3rem; margin-bottom: 0.8rem; } .foot p { color: var(--text-2); font-size: 0.92rem; margin: 0 0 0.6rem; max-width: 22rem; } .foot a.fl { display: block; color: var(--text-2); font-size: 0.92rem; padding: 0.3rem 0; transition: color .2s; } .foot a.fl:hover { color: var(--teal); } .foot-bottom { border-top: 1px solid var(--line-soft); padding: 1.3rem 0; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-family: 'Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); } /* modal */ .modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(4,6,8,.7); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 1.5rem; opacity: 0; visibility: hidden; transition: .25s; } .modal-overlay.open { opacity: 1; visibility: visible; } .modal { width: min(560px, 100%); max-height: 92vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(180deg, var(--surface), var(--base-2)); padding: 2.2rem; transform: translateY(14px) scale(.98); transition: .25s; } .modal-overlay.open .modal { transform: none; } .modal h3 { font-size: 1.6rem; font-weight: 600; margin: 0 0 0.4rem; letter-spacing: -0.01em; } .modal .sub { color: var(--text-2); margin: 0 0 1.6rem; } .modal .close { position: absolute; top: 1.2rem; right: 1.4rem; background: none; border: 0; color: var(--text-2); font-size: 1.6rem; cursor: pointer; line-height: 1; } .field { margin-bottom: 1rem; } .field label { display: block; font-size: 0.82rem; color: var(--text-2); margin-bottom: 0.4rem; letter-spacing: .02em; } .field input, .field select, .field textarea { width: 100%; padding: 0.8rem 0.95rem; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text); font-family: inherit; font-size: 0.98rem; transition: border-color .2s, background .2s; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal); background: rgba(25,211,190,.04); } .field textarea { resize: vertical; min-height: 70px; } .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; } .form-msg { margin-top: 0.8rem; font-size: 0.9rem; min-height: 1.2rem; } .form-msg.err { color: #f0a0a0; } .modal .success { text-align: center; padding: 1.5rem 0; } .modal .success .check { width: 66px; height: 66px; margin: 0 auto 1.2rem; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #33e6cc, var(--teal-deep)); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--teal-ink); box-shadow: 0 0 30px -4px rgba(25,211,190,.7); } .modal .success h3 { margin-bottom: 0.5rem; } .disclaimer { font-size: 0.78rem; color: var(--text-3); margin-top: 1rem; text-align: center; } /* contact page */ .contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 2.6rem; align-items: start; max-width: 1000px; margin: 0 auto; } .contact-info h3 { font-size: 1.4rem; margin: 0 0 0.5rem; } .contact-info > p { color: var(--text-2); margin: 0 0 1.2rem; } .contact-list { list-style: none; padding: 0; margin: 0 0 1.6rem; display: flex; flex-direction: column; gap: 0.7rem; } .contact-list li { display: flex; gap: 1rem; align-items: baseline; color: var(--text); border-bottom: 1px solid var(--line-soft); padding-bottom: 0.7rem; } .contact-list .ci-l { font-family: 'Plex Mono', monospace; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); width: 5.5rem; flex: 0 0 auto; } .contact-form { padding: 2rem; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); } .contact-success { text-align: center; padding: 1rem 0; } .contact-success .check { width: 66px; height: 66px; margin: 0 auto 1rem; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #33e6cc, var(--teal-deep)); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--teal-ink); box-shadow: 0 0 30px -4px rgba(25,211,190,.7); } .contact-success h3 { margin-bottom: 0.4rem; } /* back-to-home footer bar on inner pages */ .back-home { border-top: 1px solid var(--line-soft); padding: 1.9rem 0 2.6rem; text-align: center; } .back-home-link { color: var(--teal); font-weight: 600; font-size: 0.98rem; display: inline-flex; gap: 0.45rem; align-items: center; cursor: pointer; transition: color .2s; } .back-home-link::before { content: "\2190"; display: inline-block; transition: transform .2s; } .back-home-link:hover::before { transform: translateX(-3px); } /* audio player */ .player { border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.2rem; background: linear-gradient(180deg, rgba(25,211,190,.06), rgba(255,255,255,.012)); margin-bottom: 1.3rem; } .trans-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.4rem; } .recept-avatar { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(25,211,190,.4); background: radial-gradient(circle at 40% 30%, rgba(25,211,190,.35), rgba(11,124,134,.5)); box-shadow: 0 0 0 4px rgba(25,211,190,.1); } .recept-avatar img { width: 100%; height: 100%; object-fit: cover; } .recept-avatar span { font-family: 'Archivo Disp', sans-serif; font-weight: 800; font-size: 0.9rem; color: var(--teal-ink); letter-spacing: 0.04em; } .player-top { display: flex; align-items: center; gap: 1rem; } .player-ico { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--teal-ink); font-size: 1.05rem; background: linear-gradient(180deg,#2AE6CE,var(--teal-deep)); box-shadow: 0 4px 18px -4px rgba(25,211,190,.6); transition: transform .15s; user-select: none; } .player-ico:hover { transform: scale(1.06); } .player-meta { display: flex; flex-direction: column; gap: 0.15rem; } .player-meta b { font-size: 0.95rem; font-weight: 600; } .player-meta span { font-size: 0.8rem; color: var(--text-3); } .player-bar { margin-top: 1rem; height: 7px; border-radius: 999px; background: var(--line); cursor: pointer; overflow: hidden; } .player-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--teal), var(--teal-2)); border-radius: 999px; transition: width .1s linear; } .read-toggle { margin-bottom: 0.6rem; } .read-toggle button { background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 0.95rem; padding: 0; } /* reveal */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } .mt { margin-top: 3rem; } .center { text-align: center; } .lead-link { color: var(--teal); font-weight: 600; display: inline-flex; gap: .4rem; align-items: center; } .lead-link.lg { font-size: 1.22rem; font-weight: 700; } .audit-note { font-size: 0.86rem; color: var(--text-3); margin: 0.9rem 0 0; } .audit-note b { color: var(--teal); font-weight: 700; } .num-k { font-family: 'Archivo Disp', sans-serif; font-weight: 800; font-size: 2.5rem; line-height: 1; margin-bottom: 0.7rem; background: linear-gradient(160deg, var(--teal), var(--teal-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; } .lead-link::after { content:"→"; transition: transform .2s; } .lead-link:hover::after { transform: translateX(4px); } @media (max-width: 940px) { .section-shot { margin-top: 2rem; } .section-shot.lede { margin-bottom: 2rem; } .contact-grid { grid-template-columns: 1fr; gap: 1.8rem; } .foot-inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 1200px) and (min-width: 901px) { .hero-sub { max-width: 20rem; } .hero-copy { transform: translateX(calc(9vw - 38px)); } .portrait { transform: translateX(calc(-8vw + 1.2cm - 45px)) translateY(-3.5rem) scale(1.12); } } /* Nav dead zone: from just above the mobile burger breakpoint (901px) up to ~1150px, the 7 nav links + logo + CTA don't fit on one line and wrap into a ragged 2-3 row stack (measured: single row only from ~1200px). Reuse the mobile burger pattern here WITHOUT touching hero/section layout, which already reads correctly in this range — this is a nav-only fix. */ @media (max-width: 1150px) and (min-width: 901px) { .nav-links, .nav-cta { display: none; } .burger { display: flex; } } @media (max-width: 900px) { .wrap { padding: 0 1.3rem; } .nav-links, .nav-cta { display: none; } .burger { display: flex; } .brand { font-size: 1.08rem; } .hero-inner { min-height: auto; padding-top: 0.4rem; gap: 0.7rem; transform: none; } .hero-copy { padding: 0.4rem 0 1rem; transform: none; flex: 1 1 100%; max-width: 100%; } h1 { text-wrap: normal; font-size: clamp(2rem, 7.5vw, 3.4rem); margin-bottom: 0.9rem; } .hero-sub { font-size: 0.86rem; margin-bottom: 1.2rem; } .cta-group { gap: 0.55rem; width: 100%; justify-content: center; } .btn-lg { padding: 0.65rem 1rem; font-size: 0.8rem; } .brand-tag { font-size: 0.55rem; } .page-hero h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); } .page-hero p { font-size: 1.08rem; } /* Mobile: drop the founder cutout entirely so the hero text is the feature. Desktop is unaffected — this lives only inside the max-width:900px query. */ .hero-photo { display: none; } .hero-stats { gap: 0.8rem; padding-top: 1.4rem; max-width: none; } .hero-stats .s .n { font-size: 1.6rem; } .hero-stats .s .l { font-size: 0.72rem; } .grid-3, .grid-2, .price-grid, .calc, .dash-grid { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr 1fr; } .step::after { display: none; } .calc-figure { height: 150px; } .lead-figure { grid-template-columns: 1fr; gap: 1rem; text-align: center; } .big-stat { margin: 0 auto; } .page-hero h1 { text-align: left; } .closer { padding: 2rem 1.5rem; } .row2 { grid-template-columns: 1fr; } /* Lead Gen page, phones only: the wide lead-log table gets cut off, so hide it (the phone graphic up top already shows the dashboard). */ [data-route="/lead-generation"] .dash-only { display: none; } /* teal outline on the Capture / Follow up / Log cards */ [data-route="/lead-generation"] .grid-3 .card { border-color: rgba(25,211,190,.55); box-shadow: 0 0 0 1px rgba(25,211,190,.25), 0 0 30px -14px rgba(25,211,190,.6); } .lead-phone-hero { margin-top: 0.4rem; } } @media (max-width: 560px) { .steps { grid-template-columns: 1fr; } .foot-inner { grid-template-columns: 1fr; } } /* ============================================================ Mobile proportion pass. Everything above was written desktop-first and then squeezed; on a 390px screen that left the hero headline at ~1.9rem, the hero ending less than two-thirds down the first screen, and the receptionist photo / lead-gen phone straddling the fold. svh, not vh: mobile browsers count vh against the *expanded* viewport, so 100vh hides content behind the address bar on first paint. ============================================================ */ @media (max-width: 700px) { /* --- home hero owns the first screen --- */ /* No founder photo on mobile now, so the hero fits its text instead of reserving the photo's full-screen height (which left a big empty gap). */ .hero-inner { min-height: calc(100svh - 8.5rem); justify-content: flex-start; } h1 { font-size: clamp(3rem, 14vw, 4.6rem); line-height: 1.0; margin-bottom: 1.3rem; } .hero-sub { font-size: 1rem; margin-bottom: 1.5rem; max-width: 22rem; } .hero-note { font-size: 0.84rem; } .btn-lg { padding: 0.78rem 1.15rem; font-size: 0.9rem; } .hero-stats { padding-top: 1.8rem; } /* --- inner-page heroes: headline up, media down, whole hero in one screen --- */ .page-hero { padding: 2.2rem 0 2rem; } .page-hero h1 { font-size: clamp(2rem, 8.6vw, 2.7rem); } .page-hero p { font-size: 1.02rem; } /* The photo and the phone were ~305px and ~330px tall on a 390px screen, which pushed each hero across the fold. */ .recept-hero { gap: 1.4rem; } .recept-hero .recept-hero-photo img { width: min(52vw, 200px); } .lead-hero .lead-hero-phone .phone { width: 210px; padding: 8px; border-radius: 28px; } .lead-hero .lead-hero-phone .phone-screen { min-height: 0; padding: 0.95rem 0.75rem 0.85rem; gap: 0.6rem; } .lead-hero .lead-hero-phone .phone-notch { width: 66px; height: 13px; top: 14px; } .ph-big { font-size: 1.9rem; } .ph-spark { height: 36px; } /* The activity feed is the first thing to go — the headline number and the two tiles carry the idea, and this is what keeps the phone inside the fold. */ .lead-hero .lead-hero-phone .ph-rows { display: none; } /* Lead Gen's copy is the longest on the site; without this the phone starts below the fold no matter how small it gets. */ .lead-hero .kicker { font-size: 0.64rem; letter-spacing: 0.14em; margin-bottom: 0.7rem; } .lead-hero .lead-hero-copy > p { font-size: 0.95rem; } .lead-hero .cta-group [data-link="/how-it-works"] { display: none; } /* --- the pocket demo is redundant on a phone --- */ .pocket-section { display: none; } /* --- calculator: sliders and the total belong on one screen --- */ .calc-figure { display: none; } .calc { gap: 0.8rem; } .calc-controls { padding: 1.25rem 1.15rem; gap: 1.15rem; border-radius: 16px; } .calc-prompt { font-size: 0.66rem; } .calc-note { display: none; } .calc-result { padding: 1.25rem 1.15rem; border-radius: 16px; } .res-big { font-size: 2.5rem; margin: 0.3rem 0 0.25rem; } .res-recover { font-size: 2.1rem; margin: 0.3rem 0 0.25rem; } .res-sub { font-size: 0.88rem; } .res-divider { margin: 1rem 0; } .calc-bars { margin-top: 0.9rem; gap: 0.5rem; } .calc-result .btn { margin-top: 1.1rem; } }