/* ========================================================================== Plus One MD — design system Palette anchored on the brand logo: deep navy + teal on warm porcelain. Type: Fraunces (display serif) + Hanken Grotesk (body sans). ========================================================================== */ :root { --paper: #FAF8F3; --paper-deep: #F1EDE4; --white: #FFFFFF; --ink: #14293D; --ink-2: #0E1F2F; --ink-soft: #41566A; --muted: #5E6C7A; --teal: #14807A; --teal-bright:#19A79E; --teal-deep: #0C5F5A; --teal-wash: #E3EFEC; --gold: #C8A24A; --coral: #FF8A73; --line: #E4DDCF; --line-soft: #ECE7DB; --danger: #C24A3F; --shadow-card: 0 1px 2px rgba(20, 41, 61, 0.05), 0 14px 40px -16px rgba(20, 41, 61, 0.22); --shadow-pop: 0 2px 4px rgba(20, 41, 61, 0.06), 0 30px 70px -24px rgba(12, 47, 61, 0.38); --shadow-glow: 0 18px 50px -18px rgba(20, 128, 122, 0.55); --radius: 20px; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; } /* ---------- Self-hosted fonts (latin + latin-ext) ---------- font-display: optional → if a face isn't ready within the ~100ms block period it renders in the fallback for that load and NEVER swaps, so there is no font-driven layout shift (CLS) on any platform. The latin faces are preloaded in each page , so the real fonts usually make the window. */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 600; font-stretch: 100%; font-display: optional; src: url('fonts/fraunces-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 600; font-stretch: 100%; font-display: optional; src: url('fonts/fraunces-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400 600; font-stretch: 100%; font-display: optional; src: url('fonts/fraunces-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400 600; font-stretch: 100%; font-display: optional; src: url('fonts/fraunces-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: optional; src: url('fonts/hanken-grotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: optional; src: url('fonts/hanken-grotesk-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } * { margin: 0; padding: 0; box-sizing: border-box; } /* Belt-and-suspenders against horizontal scroll. The first declaration (hidden) is the universal fallback for browsers without `clip` support (notably iOS Safari < 16); the second (clip) wins on modern browsers and avoids creating a scroll container that could break sticky positioning. */ html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; } body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; overflow-x: clip; } /* Long words (place names, emails) must wrap, never clip off-screen */ h1, h2, h3, h4, p, a, li, blockquote { overflow-wrap: break-word; } ::selection { background: var(--teal); color: #fff; } img { display: block; max-width: 100%; } a { color: inherit; } /* ---------- Layout ---------- */ /* One source of truth for the page gutter: ~24px on phones, growing to 32px on desktop. Applied per-side so notch safe-areas are honoured correctly. */ .wrap, .wrap-m, .wrap-s { --pad: clamp(1.5rem, 4.5vw, 2rem); width: 100%; margin: 0 auto; padding-left: max(var(--pad), env(safe-area-inset-left)); padding-right: max(var(--pad), env(safe-area-inset-right)); } .wrap { max-width: 76rem; } .wrap-m { max-width: 62rem; } .wrap-s { max-width: 47rem; } /* Horizontal-scroll wrapper for wide tables on small screens */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -0.5rem; padding: 0 0.5rem 0.25rem; } .section { padding: 4.5rem 0; } @media (min-width: 64em) { .section { padding: 7rem 0; } } /* ---------- Typography ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal-deep); /* deeper than --teal for AA contrast on paper */ } .eyebrow::before { content: ""; width: 1.6rem; height: 1px; background: var(--teal); opacity: 0.5; } .eyebrow.no-rule::before { display: none; } .display { font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 140; letter-spacing: -0.022em; line-height: 1.02; color: var(--ink); text-wrap: balance; } /* Emphasized phrase: italic teal with a hand-drawn underline swash. The swash is an inline background on the text itself (not an absolute pseudo-element), with box-decoration-break: clone — so it follows the text and re-draws on every wrapped line instead of forcing a no-wrap overflow. */ .display em { font-style: italic; font-weight: 440; color: var(--teal-deep); padding-bottom: 0.06em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='16' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M2 11C40 4 90 4 130 8c25 2.5 45 3 68-1' fill='none' stroke='%2319A79E' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 0.42em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .display-xl { font-size: clamp(2.7rem, 7.2vw, 4.9rem); } .display-lg { font-size: clamp(2.15rem, 4.4vw, 3.4rem); } .display-md { font-size: clamp(1.6rem, 2.6vw, 2.2rem); } .lede { font-size: clamp(1.06rem, 1.35vw, 1.2rem); line-height: 1.7; color: var(--ink-soft); max-width: 38em; } .small-note { font-size: 0.85rem; color: var(--muted); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.95rem 1.7rem; border-radius: 999px; border: 1px solid transparent; font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .btn .arr { transition: transform 0.2s ease; } .btn:hover .arr { transform: translateX(3px); } /* On phones, long CTA labels must wrap rather than clip off the edge */ @media (max-width: 40em) { .btn { white-space: normal; text-align: center; } } /* Visible keyboard focus for all interactive elements */ .btn:focus-visible, .text-link:focus-visible, .faq-q:focus-visible, .main-nav a:focus-visible, .brand:focus-visible, .back-link:focus-visible, .footer-col a:focus-visible, .footer-legal a:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; border-radius: 6px; } .band-ink .btn:focus-visible, .band-ink a:focus-visible { outline-color: #6FE3D4; } .btn-primary { background: linear-gradient(165deg, #1B3550, var(--ink-2)); color: #fff; box-shadow: 0 12px 28px -12px rgba(14, 31, 47, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .btn-primary:hover { background: linear-gradient(165deg, var(--teal), var(--teal-deep)); transform: translateY(-2px); box-shadow: var(--shadow-glow), inset 0 1px 0 rgba(255, 255, 255, 0.12); } /* Hero / high-emphasis CTA — teal with a permanent soft glow */ .btn-glow { background: linear-gradient(165deg, var(--teal-bright), var(--teal-deep)); color: #fff; box-shadow: var(--shadow-glow), inset 0 1px 0 rgba(255, 255, 255, 0.14); } .btn-glow:hover { transform: translateY(-2px); box-shadow: 0 22px 60px -16px rgba(20, 128, 122, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.18); } .btn-light { background: #fff; color: var(--ink); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.4); } .btn-light:hover { background: var(--paper); transform: translateY(-2px); box-shadow: 0 18px 40px -14px rgba(0,0,0,0.5); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--ink); } .btn-block { width: 100%; } .btn-lg { padding: 1.15rem 2.1rem; font-size: 1rem; } .text-link { color: var(--teal-deep); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(20, 128, 122, 0.4); transition: text-decoration-color 0.2s ease; } .text-link:hover { text-decoration-color: var(--teal-deep); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(250, 248, 243, 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft); transition: box-shadow 0.25s ease; } .site-header.is-scrolled { box-shadow: 0 8px 30px -18px rgba(20, 41, 61, 0.25); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 4.25rem; } @media (min-width: 64em) { .header-inner { height: 5rem; } } .brand { display: inline-flex; align-items: center; text-decoration: none; } .brand img { height: 1.85rem; width: auto; } @media (min-width: 64em) { .brand img { height: 2.15rem; } } .main-nav { display: none; } @media (min-width: 56em) { .main-nav { display: flex; align-items: center; gap: 2rem; } .main-nav a { font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); text-decoration: none; transition: color 0.2s ease; } .main-nav a:hover { color: var(--ink); } } .header-cta { display: none; } @media (min-width: 40em) { .header-cta { display: inline-flex; } } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; background: radial-gradient(64rem 38rem at 88% -12%, rgba(25, 167, 158, 0.16), transparent 60%), radial-gradient(52rem 34rem at -12% 14%, rgba(20, 41, 61, 0.07), transparent 55%), var(--paper); } /* Film grain + a giant ghosted "+1" brand watermark behind the hero copy */ .hero::before { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: 0.4; mix-blend-mode: multiply; pointer-events: none; } .hero::after { content: "+1"; position: absolute; top: -3.5rem; left: -1.5rem; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 34rem; line-height: 1; color: var(--teal); opacity: 0.045; pointer-events: none; z-index: 0; } @media (max-width: 64em) { .hero::after { font-size: 20rem; top: -1.5rem; } } .hero-grid { position: relative; z-index: 1; display: grid; gap: 3rem; /* vertical only — never clobber the horizontal gutter from .wrap */ padding-block: 2.75rem 3.5rem; } @media (min-width: 64em) { .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: 4.5rem; padding-block: 5rem 6.5rem; } } .hero-copy .display-xl { margin: 1.4rem 0 1.5rem; } .hero-points { list-style: none; margin-top: 2rem; display: grid; gap: 0.85rem; } .hero-points li { display: flex; align-items: flex-start; gap: 0.8rem; font-size: 1rem; color: var(--ink-soft); } .hero-points strong { color: var(--ink); font-weight: 700; } .check { flex: none; width: 1.45rem; height: 1.45rem; margin-top: 0.15rem; border-radius: 999px; background: var(--teal-wash); color: var(--teal-deep); display: inline-flex; align-items: center; justify-content: center; } .check svg { width: 0.8rem; height: 0.8rem; } .hero-aside { margin-top: 2.4rem; padding-top: 1.7rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: stretch; gap: 1rem 0; } .hero-stat { padding: 0 1.5rem; border-left: 1px solid var(--line); } .hero-stat:first-child { padding-left: 0; border-left: 0; } .hero-stat .num { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 2rem; color: var(--ink); line-height: 1.05; } .hero-stat .num span { color: var(--teal); } .hero-stat .lbl { margin-top: 0.25rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } /* ---------- Form card ---------- */ .form-card { position: relative; background: var(--white); border: 1px solid var(--line-soft); border-radius: calc(var(--radius) + 6px); box-shadow: var(--shadow-pop); padding: 1.8rem 1.5rem 1.6rem; } @media (min-width: 40em) { .form-card { padding: 2.4rem 2.4rem 2rem; } } @media (min-width: 64em) { /* Let the card float a touch above the headline baseline for depth */ .hero-form { position: relative; } .form-card { margin-top: -0.5rem; } } .form-card::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 4px; border-radius: 0 0 6px 6px; background: linear-gradient(90deg, var(--teal-bright), var(--teal-deep) 60%, var(--ink)); } .form-head { margin-bottom: 1.6rem; } .form-head h2, .form-head h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.55rem; letter-spacing: -0.01em; line-height: 1.15; } .form-head p { margin-top: 0.4rem; font-size: 0.9rem; color: var(--muted); } .steps-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; } .steps-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-deep); } .steps-track { flex: 1; max-width: 7rem; height: 4px; background: var(--paper-deep); border-radius: 999px; overflow: hidden; } .steps-bar { display: block; height: 100%; width: 50%; background: var(--teal); border-radius: 999px; transition: width 0.35s ease; } .form-step { border: 0; display: none; } .form-step.is-active { display: block; animation: stepIn 0.3s ease; } @keyframes stepIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } } .fields { display: grid; gap: 1.05rem; } @media (min-width: 40em) { .fields.cols-2 { grid-template-columns: 1fr 1fr; } .fields .span-2 { grid-column: span 2; } } .field label { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.4rem; } .field-input, .field-select { width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem 0.95rem; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .field-input:focus, .field-select:focus { outline: none; background: #fff; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(20, 128, 122, 0.14); } .field-input::placeholder { color: #A8B0B8; } .field-input.input-error, .field-select.input-error { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(194, 74, 63, 0.12); } .field-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 11px; padding-right: 2.4rem; cursor: pointer; } select option { background: #fff; color: var(--ink); } .form-actions { margin-top: 1.5rem; } .form-foot { margin-top: 0.9rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.8rem; color: var(--muted); text-align: center; } .back-link { display: inline-flex; align-items: center; gap: 0.35rem; margin-bottom: 1rem; background: none; border: 0; font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; color: var(--muted); cursor: pointer; } .back-link:hover { color: var(--ink); } .consent { display: flex; align-items: flex-start; gap: 0.7rem; margin-top: 1.2rem; cursor: pointer; user-select: none; } .consent input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; accent-color: var(--teal-deep); cursor: pointer; } .consent span { font-size: 0.85rem; line-height: 1.55; color: var(--ink-soft); } .consent a { color: var(--teal-deep); } .form-error { margin-top: 0.8rem; font-size: 0.85rem; font-weight: 600; color: var(--danger); } .hidden { display: none !important; } /* Success state */ .success-state { text-align: center; padding: 1.5rem 0.5rem; } .success-state .success-mark { width: 3.6rem; height: 3.6rem; margin: 0 auto 1.1rem; border-radius: 999px; background: var(--teal-wash); color: var(--teal-deep); display: flex; align-items: center; justify-content: center; } .success-state .success-mark svg { width: 1.5rem; height: 1.5rem; } .success-state h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.7rem; margin-bottom: 0.6rem; } .success-state p { color: var(--ink-soft); max-width: 26em; margin: 0 auto; } /* ---------- Trust strip ---------- */ .trust-strip { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: var(--white); } .trust-strip-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; padding-block: 1.6rem; } @media (min-width: 56em) { .trust-strip-inner { grid-template-columns: repeat(4, 1fr); padding-block: 1.8rem; } } .trust-item { display: flex; align-items: center; gap: 0.8rem; font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); } .trust-item .check { margin-top: 0; } /* ---------- Marquee ticker ---------- */ .marquee { background: var(--ink-2); color: rgba(244, 241, 234, 0.88); border-top: 1px solid rgba(244, 241, 234, 0.08); border-bottom: 1px solid rgba(244, 241, 234, 0.08); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; } .marquee-track:hover { animation-play-state: paused; } .marquee-item { display: inline-flex; align-items: center; gap: 1.6rem; padding: 0.95rem 0; font-family: var(--font-display); font-style: italic; font-size: 1.15rem; white-space: nowrap; } .marquee-item::after { content: "+1"; font-style: normal; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; color: var(--teal-bright); margin: 0 1.6rem; font-family: var(--font-body); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------- Cards ---------- */ .card { position: relative; background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 1.9rem 1.7rem; box-shadow: var(--shadow-card); overflow: hidden; transition: transform 0.3s cubic-bezier(.2,.7,.3,1), box-shadow 0.3s ease, border-color 0.3s ease; } /* Teal accent bar that sweeps in on hover */ .card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--teal-bright), var(--teal-deep)); transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(.2,.7,.3,1); } .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-pop); border-color: transparent; } .card:hover::after { transform: scaleX(1); } .card:hover .card-icon { background: var(--teal); color: #fff; transform: rotate(-4deg) scale(1.05); } .card h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; letter-spacing: -0.01em; margin-bottom: 0.6rem; } .card p { color: var(--ink-soft); font-size: 0.97rem; } .cards-3 { display: grid; gap: 1.1rem; margin-top: 2.6rem; } @media (min-width: 56em) { .cards-3 { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } } .card-icon { width: 2.8rem; height: 2.8rem; border-radius: 14px; background: var(--teal-wash); color: var(--teal-deep); display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; transition: background 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(.2,.7,.3,1); } .card-icon svg { width: 1.3rem; height: 1.3rem; } /* ---------- Steps (how it works) ---------- */ .steps-grid { display: grid; gap: 1.1rem; margin-top: 2.8rem; } @media (min-width: 56em) { .steps-grid { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } } .step-card { position: relative; background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 2rem 1.7rem 1.9rem; box-shadow: var(--shadow-card); overflow: hidden; transition: transform 0.3s cubic-bezier(.2,.7,.3,1), box-shadow 0.3s ease; } .step-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-pop); } /* Oversized ghosted numeral watermark in the corner */ .step-card::before { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: 0.25; mix-blend-mode: multiply; pointer-events: none; } .step-num { position: relative; display: inline-flex; align-items: baseline; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 3.6rem; line-height: 1; color: var(--teal-deep); margin-bottom: 1.1rem; } .step-num::after { content: ""; margin-left: 0.7rem; width: 2.4rem; height: 2px; align-self: center; background: linear-gradient(90deg, var(--teal), transparent); } .step-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; margin-bottom: 0.6rem; } .step-card p { color: var(--ink-soft); font-size: 0.97rem; } .step-card .step-meta { margin-top: 1.1rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-deep); } /* ---------- Split sections (image + content) ---------- */ .split { display: grid; gap: 2.8rem; align-items: center; } @media (min-width: 60em) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4.5rem; } .split.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .split.flip .split-media { order: 2; } } .arch { position: relative; border-radius: 320px 320px var(--radius) var(--radius); overflow: hidden; aspect-ratio: 4 / 5; max-width: 26rem; margin: 0 auto; box-shadow: var(--shadow-pop); } .arch img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.96) contrast(1.02); } .badge-float { position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%); width: calc(100% - 2.2rem); max-width: 19rem; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); border-radius: 14px; padding: 0.85rem 1.1rem; display: flex; align-items: center; gap: 0.75rem; box-shadow: 0 12px 32px -10px rgba(20, 41, 61, 0.35); } .badge-float .check { margin: 0; } .badge-float .t { font-size: 0.86rem; font-weight: 700; color: var(--ink); line-height: 1.3; } .badge-float .s { font-size: 0.74rem; color: var(--muted); line-height: 1.35; } .feature-list { list-style: none; margin-top: 2rem; display: grid; gap: 1.4rem; } .feature-list li { display: flex; gap: 1rem; align-items: flex-start; } .feature-list .check { margin-top: 0.2rem; } .feature-list h3 { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-bottom: 0.2rem; } .feature-list p { font-size: 0.95rem; color: var(--ink-soft); } /* ---------- Band sections ---------- */ .band-sand { position: relative; background: var(--paper-deep); } .band-sand::before { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: 0.35; mix-blend-mode: multiply; pointer-events: none; } .band-sand > * { position: relative; } .band-ink { position: relative; overflow: hidden; background: radial-gradient(46rem 28rem at 88% -8%, rgba(25, 167, 158, 0.35), transparent 58%), radial-gradient(40rem 30rem at 6% 110%, rgba(20, 128, 122, 0.18), transparent 60%), var(--ink-2); color: #F4F1EA; } .band-ink::before { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: 0.5; mix-blend-mode: overlay; pointer-events: none; } .band-ink > * { position: relative; z-index: 1; } .band-ink .display, .band-ink .display em { color: #F4F1EA; } .band-ink .display em { color: #6FE3D4; } .band-ink .lede { color: rgba(244, 241, 234, 0.82); } .band-ink .eyebrow { color: #6FE3D4; } .band-ink .eyebrow::before { background: #6FE3D4; } /* ---------- "Be honest" pain section ---------- */ .pain-layout { display: grid; gap: 2.5rem; } @media (min-width: 64em) { .pain-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; } } .pain-copy .lede { margin-top: 1.2rem; } /* Hand-drawn coral strike-through that follows the text and wraps per line */ .strike-thru { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='12' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 6C52 2 96 9 134 6c24-2 44-1 64 1' fill='none' stroke='%23FF8A73' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 0 60%; background-size: 100% 0.42em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .pain-grid { display: grid; gap: 1rem; } @media (min-width: 40em) { .pain-grid { grid-template-columns: 1fr 1fr; gap: 1.1rem; } } .pain-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(244, 241, 234, 0.13); border-radius: var(--radius); padding: 1.6rem 1.6rem 1.7rem; transition: transform 0.3s cubic-bezier(.2,.7,.3,1), border-color 0.3s ease, background 0.3s ease; } .pain-card:hover { transform: translateY(-4px); border-color: rgba(255, 138, 115, 0.55); background: rgba(255, 138, 115, 0.06); } .pain-title { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.7rem; line-height: 1; color: var(--coral); margin-bottom: 0.55rem; } .pain-card p { color: rgba(244, 241, 234, 0.82); font-size: 0.96rem; line-height: 1.6; } /* ---------- Quote ---------- */ .quote-band { text-align: center; } .quote-card { position: relative; max-width: 44rem; margin: 0 auto; background: var(--white); border: 1px solid var(--line-soft); border-radius: calc(var(--radius) + 6px); box-shadow: var(--shadow-card); padding: 3rem 2rem 2.4rem; } @media (min-width: 40em) { .quote-card { padding: 3.4rem 3.4rem 2.6rem; } } .quote-mark { position: absolute; top: 0.4rem; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-style: italic; font-size: 6rem; line-height: 1; color: var(--teal); opacity: 0.18; pointer-events: none; } blockquote.pull { position: relative; font-family: var(--font-display); font-weight: 460; font-style: italic; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.32; letter-spacing: -0.01em; color: var(--ink); max-width: 26em; margin: 0 auto; text-wrap: balance; } .quote-attr { margin-top: 1.7rem; padding-top: 1.4rem; border-top: 1px solid var(--line-soft); display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } /* ---------- Cost / transparency table ---------- */ .cost-grid { display: grid; gap: 1.4rem; margin-top: 2.6rem; } @media (min-width: 56em) { .cost-grid { grid-template-columns: 1fr 1fr; gap: 1.6rem; } } .cost-card { position: relative; border-radius: var(--radius); padding: 2.1rem 1.9rem; overflow: hidden; } .cost-card.you { background: radial-gradient(30rem 18rem at 110% -10%, rgba(25, 167, 158, 0.4), transparent 60%), var(--ink); color: #F4F1EA; box-shadow: var(--shadow-glow); } .cost-card.you::before { content: "+1"; position: absolute; right: -1rem; bottom: -3rem; font-family: var(--font-display); font-style: italic; font-size: 12rem; line-height: 1; color: #fff; opacity: 0.05; pointer-events: none; } .cost-card.them { background: var(--white); border: 1px solid var(--line-soft); box-shadow: var(--shadow-card); } .cost-card .cost-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7; margin-bottom: 0.8rem; } .cost-card .cost-figure { font-family: var(--font-display); font-size: 2.6rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 0.9rem; } .cost-card.you .cost-figure em { font-style: italic; color: #8FD6CB; } .cost-card.them .cost-figure { font-size: 1.9rem; } .cost-card p { font-size: 0.95rem; line-height: 1.65; } .cost-card.you p { color: rgba(244, 241, 234, 0.8); } .cost-card.them p { color: var(--ink-soft); } .cost-card ul { list-style: none; margin-top: 1rem; display: grid; gap: 0.5rem; } .cost-card ul li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.92rem; } .cost-card.you ul li { color: rgba(244, 241, 234, 0.8); } .cost-card.them ul li { color: var(--ink-soft); } .cost-card .dot { flex: none; width: 5px; height: 5px; border-radius: 999px; background: var(--teal); margin-top: 0.55rem; } /* ---------- Shop / offer ---------- */ .offer-card { background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 1.5rem 1.6rem; } .price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.6rem 0.9rem; } .price-now { font-family: var(--font-display); font-weight: 500; font-size: 3.1rem; line-height: 1; letter-spacing: -0.02em; color: var(--ink); } .price-now .cur { font-size: 1.4rem; vertical-align: super; color: var(--ink-soft); } .price-was { font-size: 1.2rem; color: var(--muted); text-decoration: line-through; } .price-save { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-deep); background: var(--teal-wash); border-radius: 999px; padding: 0.3rem 0.7rem; } .price-note { margin-top: 0.5rem; font-size: 0.85rem; color: var(--muted); } .incl-list { list-style: none; display: grid; gap: 0.6rem; margin-top: 1.1rem; } .incl-list li { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.5; } .incl-list .check { margin-top: 0.05rem; } .incl-list strong { color: var(--ink); font-weight: 700; } .product-card .tag { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-deep); margin-bottom: 0.5rem; } /* ---------- Shop promo banner (homepage) ---------- */ .shop-promo { position: relative; overflow: hidden; display: grid; gap: 1.6rem; align-items: center; background: radial-gradient(40rem 22rem at 100% 0%, rgba(20, 128, 122, 0.10), transparent 60%), var(--white); border: 1px solid var(--line-soft); border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow-card); padding: 2rem 1.8rem; } .shop-promo::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--teal), #2F86C9); } @media (min-width: 56em) { .shop-promo { grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; padding: 2.4rem 2.6rem; } } .shop-promo .display-md { margin: 0.7rem 0 0.6rem; } .shop-promo p.lede { font-size: 1rem; } .shop-promo-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 0.8rem; margin-top: 1rem; } .shop-promo-price .big { font-family: var(--font-display); font-weight: 500; font-size: 2.2rem; line-height: 1; color: var(--ink); } .shop-promo-price .big .cur { font-size: 1.05rem; vertical-align: super; color: var(--ink-soft); } /* ---------- FAQ ---------- */ .faq-list { margin-top: 2.4rem; border-top: 1px solid var(--line); } .faq-item { border-bottom: 1px solid var(--line); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 1.35rem 0; background: none; border: 0; text-align: left; cursor: pointer; font-family: var(--font-display); font-weight: 500; font-size: 1.18rem; letter-spacing: -0.005em; color: var(--ink); } @media (min-width: 40em) { .faq-q { font-size: 1.3rem; } } .faq-icon { flex: none; width: 1.9rem; height: 1.9rem; border-radius: 999px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--teal-deep); transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease; } .faq-icon svg { width: 0.8rem; height: 0.8rem; } .faq-item.open .faq-icon { transform: rotate(45deg); background: var(--teal-wash); border-color: transparent; } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .faq-a p { padding-bottom: 1.4rem; color: var(--ink-soft); max-width: 46em; font-size: 0.98rem; } /* ---------- CTA section ---------- */ .cta-final { text-align: center; } .cta-final .display-lg { max-width: 18em; margin: 1.3rem auto 1.2rem; } .cta-final .lede { margin: 0 auto 2.2rem; } .cta-sub { margin-top: 1.1rem; font-size: 0.85rem; color: var(--muted); } .band-ink .cta-sub { color: rgba(244, 241, 234, 0.6); } /* ---------- MD cross-banner ---------- */ .md-banner { display: grid; gap: 1.8rem; align-items: center; padding-block: 2.6rem; } @media (min-width: 56em) { .md-banner { grid-template-columns: 1fr auto; gap: 3rem; } } .md-banner h2 { font-family: var(--font-display); font-weight: 480; font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -0.01em; line-height: 1.2; } .md-banner p { margin-top: 0.5rem; } /* ---------- Footer ---------- */ .site-footer { background: var(--ink-2); color: rgba(244, 241, 234, 0.7); padding: 3.6rem 0 2rem; font-size: 0.92rem; } .footer-grid { display: flex; flex-wrap: wrap; gap: 2.4rem 3rem; } .footer-brand { flex: 1 1 100%; } .footer-col { flex: 1 1 9rem; } @media (min-width: 56em) { .footer-brand { flex: 1.6 1 16rem; } } .footer-brand img { height: 1.9rem; width: auto; } .footer-brand .logo-chip { display: inline-flex; background: #fff; border-radius: 10px; padding: 0.5rem 0.8rem; margin-bottom: 1rem; } .footer-brand p { max-width: 22em; line-height: 1.65; } .footer-col h2 { font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(244, 241, 234, 0.72); margin-bottom: 0.9rem; } .footer-col ul { list-style: none; display: grid; gap: 0.55rem; } .footer-col a { color: rgba(244, 241, 234, 0.75); text-decoration: none; transition: color 0.2s ease; } .footer-col a:hover { color: #8FD6CB; } .footer-bottom { margin-top: 2.8rem; padding-top: 1.4rem; border-top: 1px solid rgba(244, 241, 234, 0.12); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 1.5rem; font-size: 0.78rem; color: rgba(244, 241, 234, 0.72); /* AA contrast on the dark footer */ } .footer-bottom a { color: inherit; text-decoration: none; } .footer-bottom a:hover { color: #8FD6CB; } .footer-legal { display: flex; gap: 1.2rem; } /* ---------- Sticky mobile CTA ---------- */ .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom)); background: rgba(250, 248, 243, 0.92); backdrop-filter: blur(14px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform 0.3s ease; } .sticky-cta.is-visible { transform: translateY(0); } .sticky-cta .btn { width: 100%; } @media (min-width: 56em) { .sticky-cta { display: none; } } /* ---------- Reveal on scroll ---------- */ /* Hidden state only applies once main.js tags , so content stays fully visible without JS (and for crawlers). */ html.has-reveal .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.65s ease, transform 0.65s ease; } html.has-reveal .reveal.is-in { opacity: 1; transform: none; } .reveal-d1 { transition-delay: 0.08s; } .reveal-d2 { transition-delay: 0.16s; } .reveal-d3 { transition-delay: 0.24s; } /* Cards double as reveal targets — keep their hover lift crisp and make sure it out-specifies the reveal's `transform: none` once revealed. */ html.has-reveal .card, html.has-reveal .step-card { transition: opacity 0.6s ease, transform 0.35s cubic-bezier(.2,.7,.3,1), box-shadow 0.3s ease, border-color 0.3s ease; } html.has-reveal .card.is-in:hover, html.has-reveal .step-card.is-in:hover { transform: translateY(-5px); } @media (prefers-reduced-motion: reduce) { html.has-reveal .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } .marquee-track { animation: none; } * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; } } /* ---------- Section headers ---------- */ .section-head { max-width: 44em; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head.center .eyebrow::before { display: none; } .section-head .display-lg { margin: 1.2rem 0 1.1rem; } /* ---------- City pages ---------- */ .area-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.55rem; } .area-chips li { background: var(--white); border: 1px solid var(--line-soft); border-radius: 999px; padding: 0.45rem 1rem; font-size: 0.88rem; font-weight: 600; color: var(--ink-soft); } .mini-steps { list-style: none; counter-reset: ministep; display: grid; gap: 1rem; max-width: 44em; } .mini-steps li { counter-increment: ministep; position: relative; padding-left: 3rem; color: var(--ink-soft); line-height: 1.65; } .mini-steps li strong { color: var(--ink); } .mini-steps li::before { content: counter(ministep, decimal-leading-zero); position: absolute; left: 0; top: 0.1rem; font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--teal); } /* ---------- Article / legal prose ---------- */ .prose { max-width: 44em; } .prose h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.7rem; letter-spacing: -0.01em; line-height: 1.2; margin: 2.6rem 0 0.9rem; } .prose h3 { font-size: 1.08rem; font-weight: 700; margin: 1.8rem 0 0.5rem; } .prose p, .prose li { color: var(--ink-soft); line-height: 1.75; } .prose p { margin-bottom: 1.05rem; } .prose ul, .prose ol { padding-left: 1.4rem; margin-bottom: 1.05rem; } .prose li { margin-bottom: 0.45rem; } .prose a { color: var(--teal-deep); } .prose strong { color: var(--ink); font-weight: 700; } .prose .callout { background: var(--teal-wash); border-left: 3px solid var(--teal); border-radius: 0 14px 14px 0; padding: 1.2rem 1.4rem; margin: 1.8rem 0; } .prose .callout p { margin-bottom: 0; color: var(--ink); } .article-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin: 1.2rem 0 0; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .inline-cta { background: var(--ink); color: #F4F1EA; border-radius: var(--radius); padding: 2rem 1.8rem; margin: 2.4rem 0; } .inline-cta h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.45rem; margin-bottom: 0.5rem; } .inline-cta p { color: rgba(244, 241, 234, 0.78); font-size: 0.95rem; margin-bottom: 1.3rem; }