:root { /* Carbon palette */ --blue-60: #0f62fe; --blue-60-hover: #0353e9; --blue-80: #002d9c; --blue-10: #edf5ff; --white: #ffffff; --gray-10: #f4f4f4; --gray-10-hover: #e8e8e8; --gray-20: #e0e0e0; --gray-30: #c6c6c6; --gray-50: #8d8d8d; --gray-60: #6f6f6f; --gray-70: #525252; --gray-80: #393939; --gray-90: #262626; --gray-100: #161616; --red-60: #da1e28; --font: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font); font-weight: 400; font-size: 1rem; line-height: 1.5; color: var(--gray-100); background: var(--white); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } /* Focus ring — Carbon style */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--blue-60); outline-offset: -2px; } /* ---------- NAV ---------- */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 48px; background: var(--gray-100); display: flex; align-items: center; padding: 0 16px; } .logo { color: var(--white); /* font-size sized so cap-height (~0.71x) matches the visible mark in mark.svg (mark fills ~61% of its 100-unit viewBox; at img 28px that's ~17px visible). */ font-size: 1.5rem; font-weight: 600; letter-spacing: 0.16px; line-height: 1; padding: 0 16px; height: 48px; display: inline-flex; align-items: center; gap: 10px; } .logo img { height: 28px; width: 28px; display: block; } .logo .accent { color: var(--blue-60); } /* IBM Plex Sans with line-height:1 places the baseline near the bottom of the line box, so the cap-height visual center sits ~1.6px below the box center (verified via Canvas TextMetrics, not the font's typo metrics). Nudge up 1px so the wordmark caps align with the icon glyph center. */ .logo .wordmark { transform: translateY(-1px); } .nav-links { list-style: none; display: flex; align-items: center; margin-left: 16px; height: 48px; } .nav-links a { color: var(--gray-30); font-size: 0.875rem; font-weight: 400; letter-spacing: 0.16px; padding: 0 16px; height: 48px; display: inline-flex; align-items: center; transition: color 0.1s, background-color 0.1s; } .nav-links a:hover { color: var(--white); background: var(--gray-80); } /* Active nav indicator — DESIGN.md says active items use weight 600 white. Each page sets data-active-nav="" on ; we match on the link's href to highlight the right item. body-short-02 register from the spec. */ body[data-active-nav="home"] .nav-links a[href="/"], body[data-active-nav="about-3cx"] .nav-links a[href="/3cx-explained.html"], body[data-active-nav="pricing"] .nav-links a[href="/honest-pricing.html"], body[data-active-nav="switch"] .nav-links a[href="/pstn-switch-off.html"], body[data-active-nav="about-us"] .nav-links a[href="/about.html"], body[data-active-nav="support"] .nav-support { color: var(--white); font-weight: 600; } body[data-active-nav="support"] .nav-support-icon { opacity: 1; } .nav-cta { background: var(--blue-60); color: var(--white) !important; padding: 0 64px 0 16px !important; height: 48px; display: inline-flex; align-items: center; position: relative; font-weight: 400; font-size: 0.875rem; letter-spacing: 0.16px; transition: background-color 0.1s; } /* Customer-support link in the nav. Sits to the left of the Free-audit CTA on desktop; both cluster on the right (margin-left:auto on .nav-support pushes the pair). Hidden on mobile — the hamburger keeps the bar tight, and the support page is still reachable from the footer + the menu. */ .nav-support { margin-left: auto; color: var(--gray-30); font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.16px; padding: 0 16px; height: 48px; display: inline-flex; align-items: center; gap: 8px; transition: color 0.1s, background-color 0.1s; white-space: nowrap; } .nav-support:hover { color: var(--white); background: var(--gray-80); } .nav-support-icon { flex-shrink: 0; opacity: 0.7; } .nav-support:hover .nav-support-icon { opacity: 1; } .nav-toggle { display: none; margin-left: auto; width: 48px; height: 48px; background: transparent; border: 0; padding: 0; cursor: pointer; color: var(--white); align-items: center; justify-content: center; } .nav-toggle:hover { background: var(--gray-80); } .nav-toggle svg { display: block; } .nav-toggle .icon-close { display: none; } .nav-toggle[aria-expanded="true"] .icon-open { display: none; } .nav-toggle[aria-expanded="true"] .icon-close { display: block; } .nav-cta::after { content: ''; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; } .nav-cta:hover { background: var(--blue-60-hover); } /* ---------- HERO (legacy: text-on-white for un-migrated pages) ---------- */ .hero { background: var(--white); padding: 144px 32px 96px; border-bottom: 1px solid var(--gray-20); } .hero-inner { max-width: 1056px; margin: 0 auto; } .hero-eyebrow { display: inline-block; background: var(--blue-10); color: var(--blue-60); padding: 4px 8px; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.32px; border-radius: 24px; margin-bottom: 32px; } .hero h1 { font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: 300; line-height: 1.17; color: var(--gray-100); text-wrap: balance; margin-bottom: 24px; } .hero h1 em { color: var(--blue-60); font-style: normal; font-weight: 300; } .hero p { font-size: 1.125rem; line-height: 1.5; color: var(--gray-70); max-width: 60ch; margin-bottom: 48px; } .hero-cta { display: flex; gap: 1px; flex-wrap: wrap; } /* ---------- HERO (full-bleed cinema-poster: only on migrated pages with data-hero) ---------- */ .hero[data-hero] { position: relative; min-height: 640px; display: flex; align-items: center; background: var(--gray-100); overflow: hidden; padding: 96px 0 0; /* clear the 48px fixed nav + breathing room */ /* override legacy white background + border */ border-bottom: none; } /* Picture wraps the image and starts below the 48px fixed nav so what gets rendered is what's visible — no wasted top 48px hidden behind the nav. Both nav and hero bg are Gray 100 so there's no visible seam. */ .hero[data-hero] picture { position: absolute; inset: 48px 0 0 0; z-index: 0; } .hero[data-hero] picture img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero[data-hero]::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 105deg, rgba(22, 22, 22, 0.85) 0%, rgba(22, 22, 22, 0.55) 35%, rgba(22, 22, 22, 0) 55% ); z-index: 1; pointer-events: none; } .hero[data-hero] .hero-inner { position: relative; z-index: 2; max-width: 1056px; margin: 0 auto; width: 100%; padding: 0 32px; } /* Phone is composited in the upper-right of every dark hero image. On tablet+ viewports the headline can run wide enough to crash into the phone, losing contrast where text crosses phone chrome. Reserve a right-side clearance zone scaled to viewport width. Mobile is unaffected — the phone is more cropped and the scrim is stronger top-to-bottom so overlap there isn't a problem. */ @media (min-width: 769px) { .hero[data-hero] .hero-inner { padding-right: clamp(160px, 28vw, 480px); } } .hero[data-hero] .hero-eyebrow { display: inline-block; background: rgba(15, 98, 254, 0.15); color: var(--white); padding: 4px 8px; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.32px; border-radius: 24px; margin-bottom: 32px; border: 1px solid rgba(255, 255, 255, 0.2); } .hero[data-hero] h1 { font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: 300; line-height: 1.17; color: var(--white); text-wrap: balance; margin-bottom: 24px; max-width: 60ch; } .hero[data-hero] h1 em { color: var(--white); font-style: normal; font-weight: 600; /* on dark we use weight, not blue, for emphasis */ } .hero[data-hero] .hero-sub { font-size: clamp(1.125rem, 1.6vw, 1.375rem); font-weight: 300; line-height: 1.4; color: rgba(255, 255, 255, 0.85); max-width: 56ch; margin: 0 0 40px; } /* Secondary CTA on dark heroes: keep the Gray 80 (#393939) fill but add a translucent white outline so the button silhouette doesn't melt into the Gray 100 hero background. */ .hero[data-hero] .btn-secondary { border: 1px solid rgba(255, 255, 255, 0.4); } .hero[data-hero] .btn-secondary:hover { border-color: rgba(255, 255, 255, 0.6); } .hero[data-hero] .hero-cta { display: flex; gap: 1px; flex-wrap: wrap; margin-top: 8px; } @media (max-width: 768px) { .hero[data-hero] { min-height: 520px; padding-top: 80px; } .hero[data-hero]::after { background: linear-gradient( 180deg, rgba(22, 22, 22, 0.75) 0%, rgba(22, 22, 22, 0.45) 100% ); } .hero[data-hero] .hero-inner { padding: 0 16px; } } /* ---------- BUTTONS ---------- */ .btn { display: inline-flex; align-items: center; justify-content: flex-start; height: 48px; padding: 0 64px 0 16px; font-family: var(--font); font-size: 0.875rem; font-weight: 400; letter-spacing: 0.16px; border: 1px solid transparent; border-radius: 0; position: relative; transition: background-color 0.1s, border-color 0.1s, color 0.1s; min-width: 200px; } .btn::after { content: ''; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background-repeat: no-repeat; background-position: center; } .btn-primary { background: var(--blue-60); color: var(--white); } .btn-primary::after { background-image: url("data:image/svg+xml;utf8,"); } .btn-primary:hover { background: var(--blue-60-hover); } .btn-primary:active { background: var(--blue-80); } .btn-secondary { background: var(--gray-80); color: var(--white); } .btn-secondary::after { background-image: url("data:image/svg+xml;utf8,"); } .btn-secondary:hover { background: var(--gray-70); } .btn-tertiary { background: transparent; color: var(--blue-60); border-color: var(--blue-60); } .btn-tertiary::after { background-image: url("data:image/svg+xml;utf8,"); } .btn-tertiary:hover { background: var(--blue-60); color: var(--white); } .btn-tertiary:hover::after { background-image: url("data:image/svg+xml;utf8,"); } .btn-no-chevron { padding: 0 16px; justify-content: flex-start; } .btn-no-chevron::after { content: none; } /* ---------- SECTIONS ---------- */ section { padding: 96px 32px; } .container { max-width: 1056px; margin: 0 auto; } .layer-01 { background: var(--gray-10); } .section-header { margin-bottom: 64px; max-width: 720px; } .section-header h2 { font-size: 2rem; font-weight: 400; line-height: 1.25; color: var(--gray-100); margin-bottom: 16px; } .section-header p { font-size: 1rem; line-height: 1.5; color: var(--gray-70); } /* ---------- URGENCY ---------- */ .urgency-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: start; } .urgency-grid h2 { font-size: 2.625rem; font-weight: 300; line-height: 1.19; color: var(--gray-100); margin-bottom: 24px; } .urgency-grid p { font-size: 1rem; line-height: 1.5; color: var(--gray-70); margin-bottom: 16px; } .deadline-tile { background: var(--white); border-left: 2px solid var(--blue-60); padding: 32px; } .deadline-tile .label { font-size: 0.75rem; font-weight: 400; letter-spacing: 0.32px; color: var(--gray-70); text-transform: uppercase; margin-bottom: 16px; } .deadline-tile .date { font-size: 3rem; font-weight: 300; line-height: 1.17; color: var(--gray-100); margin-bottom: 16px; } .deadline-tile .sub { font-size: 0.875rem; letter-spacing: 0.16px; color: var(--gray-70); line-height: 1.4; } /* ---------- HOW IT WORKS ---------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--gray-20); border: 1px solid var(--gray-20); } .step { background: var(--white); padding: 32px; } .step-num { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--blue-60); color: var(--white); font-size: 1.5rem; font-weight: 300; margin-bottom: 24px; } .step h3 { font-size: 1.25rem; font-weight: 600; color: var(--gray-100); margin-bottom: 12px; letter-spacing: 0; } .step p { font-size: 0.875rem; letter-spacing: 0.16px; line-height: 1.4; color: var(--gray-70); } /* ---------- FIT CHECK (user-count self-select) ---------- */ .fit-check { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--gray-20); border: 1px solid var(--gray-20); } .fit-card { background: var(--white); padding: 32px; display: flex; flex-direction: column; } .fit-card-in { background: var(--gray-100); } .fit-band { font-size: 0.8125rem; letter-spacing: 0.32px; text-transform: uppercase; color: var(--gray-60); margin-bottom: 12px; } .fit-card-in .fit-band { color: var(--gray-30); } .fit-verdict { font-size: 1.5rem; font-weight: 600; letter-spacing: 0; margin-bottom: 16px; color: var(--gray-70); } .fit-card-in .fit-verdict { color: var(--white); } .fit-card-in .fit-verdict::after { content: ""; display: block; width: 32px; height: 3px; background: var(--blue-60); margin-top: 12px; } .fit-card p { font-size: 0.875rem; letter-spacing: 0.16px; line-height: 1.5; color: var(--gray-70); margin-bottom: 0; } .fit-card-in p { color: var(--gray-30); } .fit-cta { display: inline-block; margin-top: 20px; color: var(--blue-60); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.16px; border-bottom: 1px solid var(--blue-60); padding-bottom: 2px; align-self: flex-start; } .fit-cta:hover { color: var(--blue-60-hover); border-bottom-color: var(--blue-60-hover); } /* Dark card needs a hover that goes brighter, not darker, against gray-100 */ .fit-card-in .fit-cta:hover { color: var(--white); border-bottom-color: var(--white); } @media (max-width: 768px) { .fit-check { grid-template-columns: 1fr; } } /* ---------- BLOG & POSTS ---------- */ .hero-compact { padding: 144px 32px 64px; } .hero-compact h1 { font-size: clamp(2rem, 4vw, 3rem); } .hero-compact p { margin-bottom: 0; } .post-meta { font-size: 0.875rem; color: var(--gray-60); letter-spacing: 0.16px; margin-top: 8px; } .post-meta-sep { margin: 0 8px; color: var(--gray-30); } .blog-list { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--gray-20); border: 1px solid var(--gray-20); } .blog-card { background: var(--white); padding: 40px 48px; } .blog-card-meta { font-size: 0.8125rem; letter-spacing: 0.32px; text-transform: uppercase; color: var(--gray-60); margin-bottom: 16px; } .blog-card-sep { margin: 0 8px; color: var(--gray-30); } .blog-card h2 { font-size: 1.5rem; font-weight: 600; line-height: 1.3; color: var(--gray-100); margin: 0 0 16px; letter-spacing: 0; } .blog-card h2 a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s ease; } .blog-card h2 a:hover { border-bottom-color: var(--blue-60); color: var(--blue-60); } .blog-card p { font-size: 1rem; line-height: 1.5; color: var(--gray-70); margin: 0 0 20px; } .blog-card-more { display: inline-block; color: var(--blue-60); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.16px; border-bottom: 1px solid var(--blue-60); padding-bottom: 2px; } .blog-card-more:hover { color: var(--blue-70); border-bottom-color: var(--blue-70); } .post-body { max-width: 720px; margin: 0 auto; font-size: 1.0625rem; line-height: 1.65; color: var(--gray-90); } .post-body .post-lede { font-size: 1.25rem; line-height: 1.55; color: var(--gray-100); margin-bottom: 28px; } .post-body p { margin: 0 0 20px; } .post-body h2 { font-size: 1.625rem; font-weight: 600; color: var(--gray-100); margin: 48px 0 16px; letter-spacing: 0; } .post-body h3 { font-size: 1.25rem; font-weight: 600; color: var(--gray-100); margin: 32px 0 12px; } .post-body ol, .post-body ul { margin: 0 0 24px; padding-left: 28px; } .post-body li { margin-bottom: 10px; } .post-body a { color: var(--blue-60); border-bottom: 1px solid var(--blue-60); } .post-body a:hover { color: var(--blue-70); border-bottom-color: var(--blue-70); } .post-body strong { font-weight: 600; color: var(--gray-100); } .post-blockquote { margin: 32px 0; padding: 24px 28px; background: var(--gray-10); border-left: 4px solid var(--blue-60); font-size: 1.0625rem; font-style: italic; color: var(--gray-90); } .post-table { width: 100%; border-collapse: collapse; margin: 24px 0 32px; font-size: 0.9375rem; } .post-table th, .post-table td { border-bottom: 1px solid var(--gray-20); padding: 12px 16px; text-align: left; vertical-align: top; } .post-table th { background: var(--gray-10); font-weight: 600; color: var(--gray-100); letter-spacing: 0.16px; } .post-table tbody tr:hover { background: var(--gray-10); } @media (max-width: 768px) { .blog-card { padding: 32px 24px; } .post-body { font-size: 1rem; } .post-body .post-lede { font-size: 1.125rem; } .post-body h2 { font-size: 1.375rem; } } /* ---------- FEATURES ---------- */ .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--gray-20); border: 1px solid var(--gray-20); } .feature { background: var(--white); padding: 24px; transition: background-color 0.1s; position: relative; } .feature::before { content: ''; display: block; width: 24px; height: 2px; background: var(--blue-60); margin-bottom: 16px; } .feature:hover { background: var(--gray-10-hover); } .feature h3 { font-size: 1.25rem; font-weight: 600; color: var(--gray-100); margin-bottom: 8px; } .feature p { font-size: 0.875rem; letter-spacing: 0.16px; line-height: 1.4; color: var(--gray-70); } /* ---------- WHY US ---------- */ /* Founder block: quote + attribution under the standard section-header. */ .founder-quote { font-size: 1.125rem; line-height: 1.5; color: var(--gray-70); border-left: 2px solid var(--blue-60); padding-left: 24px; margin: 0 0 16px; max-width: 720px; } .founder-attribution { font-size: 0.875rem; letter-spacing: 0.16px; color: var(--gray-70); line-height: 1.5; margin-bottom: 48px; } .founder-attribution a { color: var(--blue-60); border-bottom: 1px solid var(--blue-60); } .founder-attribution a:hover { color: var(--blue-60-hover); border-bottom-color: var(--blue-60-hover); } .differentiators { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--gray-20); border: 1px solid var(--gray-20); margin-top: 64px; } .diff { background: var(--white); padding: 24px; } .diff-label { display: inline-block; background: var(--blue-10); color: var(--blue-60); padding: 4px 8px; font-size: 0.75rem; letter-spacing: 0.32px; border-radius: 24px; margin-bottom: 16px; } .diff h3 { font-size: 1rem; font-weight: 600; color: var(--gray-100); margin-bottom: 8px; } .diff p { font-size: 0.875rem; letter-spacing: 0.16px; line-height: 1.4; color: var(--gray-70); } /* ---------- PRICING ---------- */ .trust-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 48px; } .trust-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--blue-10); color: var(--blue-60); padding: 4px 12px; font-size: 0.75rem; letter-spacing: 0.32px; border-radius: 24px; } .pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 760px; } .price-card { background: var(--white); border: 1px solid var(--gray-30); padding: 32px; position: relative; display: flex; flex-direction: column; } .price-card.featured { border: 2px solid var(--blue-60); } .price-card.featured::before { content: 'Most popular'; position: absolute; top: -12px; left: 24px; background: var(--blue-60); color: var(--white); padding: 4px 12px; font-size: 0.75rem; letter-spacing: 0.32px; border-radius: 24px; } .price-card h3 { font-size: 1.5rem; font-weight: 400; color: var(--gray-100); margin-bottom: 8px; } .price-card .price { font-size: 3rem; font-weight: 300; line-height: 1.17; color: var(--gray-100); font-variant-numeric: tabular-nums; margin-bottom: 4px; } .price-card .price span { font-size: 0.875rem; font-weight: 400; letter-spacing: 0.16px; color: var(--gray-70); } .price-card .price-note { font-size: 0.875rem; letter-spacing: 0.16px; color: var(--gray-70); margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--gray-20); } .price-card ul { list-style: none; margin-bottom: 32px; flex: 1; } .price-card li { padding: 8px 0; font-size: 0.875rem; letter-spacing: 0.16px; color: var(--gray-100); display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; } .price-card li::before { content: ''; flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; } .price-card .btn { width: 100%; min-width: 0; } /* ---------- FAQ ---------- */ .faq-list { max-width: 720px; } .faq-item { border-bottom: 1px solid var(--gray-30); } .faq-item:first-child { border-top: 1px solid var(--gray-30); } .faq-question { width: 100%; background: none; border: none; padding: 24px 0; font-family: var(--font); font-size: 1rem; font-weight: 600; color: var(--gray-100); text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: color 0.1s; } .faq-question:hover { color: var(--blue-60); } .faq-question::after { content: '+'; font-size: 1.25rem; font-weight: 300; color: var(--gray-70); transition: transform 0.2s; flex-shrink: 0; width: 24px; text-align: center; } .faq-item.open .faq-question::after { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .faq-answer-inner { padding: 0 0 24px; font-size: 0.875rem; letter-spacing: 0.16px; color: var(--gray-70); line-height: 1.5; max-width: 64ch; } /* ---------- CONTACT ---------- */ .contact { background: var(--gray-100); color: var(--white); } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .contact h2 { font-size: 2.625rem; font-weight: 300; line-height: 1.19; color: var(--white); margin-bottom: 24px; } .contact p.lead { font-size: 1rem; line-height: 1.5; color: var(--gray-30); margin-bottom: 32px; max-width: 50ch; } .audit-notice { background: var(--gray-90); border-left: 2px solid var(--blue-60); padding: 24px; } .audit-notice h3 { font-size: 1rem; font-weight: 600; color: var(--white); margin-bottom: 8px; } .audit-notice p { font-size: 0.875rem; letter-spacing: 0.16px; line-height: 1.4; color: var(--gray-30); } .contact-form { background: var(--gray-90); padding: 32px; } .form-group { margin-bottom: 24px; } .form-group label { display: block; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.32px; color: var(--gray-30); margin-bottom: 8px; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0 16px; height: 40px; background: var(--gray-80); border: none; border-bottom: 2px solid var(--gray-60); color: var(--white); font-family: var(--font); font-size: 1rem; letter-spacing: 0; border-radius: 0; transition: border-color 0.1s, background-color 0.1s; } .form-group textarea { padding: 12px 16px; height: auto; min-height: 80px; resize: vertical; } .form-group input:hover, .form-group select:hover, .form-group textarea:hover { background: var(--gray-70); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-bottom-color: var(--blue-60); } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--gray-50); } .form-group select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } .form-group select option { background: var(--gray-90); color: var(--white); } .contact-form .btn { width: 100%; min-width: 0; } /* ---------- FOOTER ---------- */ footer { background: var(--gray-100); border-top: 4px solid var(--blue-60); padding: 48px 32px 24px; } .footer-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; max-width: 1280px; margin: 0 auto 32px; text-align: left; } .footer-group h4 { color: var(--gray-30); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.32px; text-transform: uppercase; margin: 0 0 16px; } .footer-group ul { list-style: none; padding: 0; margin: 0; } .footer-group li { margin: 0; } .footer-group a { display: block; padding: 6px 0; font-size: 0.8125rem; letter-spacing: 0.16px; color: var(--gray-30); text-decoration: none; border: none; } .footer-group a:hover { color: var(--white); text-decoration: underline; } .footer-bottom { border-top: 1px solid var(--gray-80); padding-top: 24px; margin-top: 24px; text-align: center; } footer p { font-size: 0.75rem; letter-spacing: 0.32px; color: var(--gray-50); margin: 4px 0; } .footer-bottom a { display: inline-block; padding: 4px 8px; font-size: 0.8125rem; letter-spacing: 0.16px; color: var(--gray-30); text-decoration: underline; } .footer-bottom a:hover { color: var(--white); } @media (max-width: 1100px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 700px) { .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } } @media (max-width: 400px) { .footer-grid { grid-template-columns: 1fr; } } /* ---------- SCROLL REVEAL ---------- */ .fade-up { opacity: 0; transform: translateY(16px); transition: opacity 0.4s ease, transform 0.4s ease; } .fade-up.visible { opacity: 1; transform: translateY(0); } /* ---------- RESPONSIVE ---------- */ @media (max-width: 768px) { nav { padding: 0 8px; } .logo { padding: 0 8px; } .nav-toggle { display: inline-flex; width: 44px; } .nav-links { display: none; position: fixed; top: 48px; left: 0; right: 0; flex-direction: column; height: auto; margin-left: 0; background: var(--gray-100); border-top: 1px solid var(--gray-80); } .nav-links.open { display: flex; } .nav-links li { width: 100%; } .nav-links a { width: 100%; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--gray-80); } .nav-cta { margin-left: 0; padding: 0 36px 0 12px !important; } .nav-cta::after { right: 12px; } /* Mobile: hide the inline support number. Reachable via the footer support link and the tel: links on the homepage contact section. */ .nav-support { display: none; } section { padding: 64px 16px; } .hero { padding: 96px 16px 64px; } .hero h1 { font-size: 2.25rem; } .hero p { font-size: 1rem; } .urgency-grid, .why-inner, .contact-grid { grid-template-columns: 1fr; gap: 32px; } .urgency-grid h2, .why-inner h2, .contact h2 { font-size: 2rem; } .steps, .features-grid, .differentiators, .pricing-grid { grid-template-columns: 1fr; } .pricing-grid { gap: 32px; } .section-header h2 { font-size: 1.75rem; } .btn { width: 100%; min-width: 0; } } @media (max-width: 1056px) and (min-width: 769px) { .features-grid { grid-template-columns: repeat(2, 1fr); } .what-we-do { grid-template-columns: repeat(2, 1fr); } } /* ---------- COMPARATIVE PRICING ANCHOR ---------- */ /* Primary CTA below the comparison — gateway to the full pricing page. Left-aligned to match the convention of every other body-section CTA on the homepage (Book a free audit on #fit, #payoff, etc.). */ .pricing-cta { margin-top: 32px; } .compare-anchor { display: grid; grid-template-columns: 1.4fr auto 1fr; gap: 32px; align-items: start; } .compare-anchor .compare-vs { align-self: center; font-size: 1.5rem; font-weight: 300; color: var(--gray-50); letter-spacing: 0.32px; text-transform: uppercase; } @media (max-width: 768px) { .compare-anchor { grid-template-columns: 1fr; } .compare-anchor .compare-vs { display: none; } } .compare-anchor .label { font-size: 0.75rem; font-weight: 400; letter-spacing: 0.32px; text-transform: uppercase; margin-bottom: 12px; } .compare-anchor .us .label { color: var(--blue-60); } .compare-anchor .competitors .label { color: var(--gray-50); } .compare-anchor .price { font-weight: 300; line-height: 1.1; font-variant-numeric: tabular-nums; margin-bottom: 8px; } .compare-anchor .us .price { font-size: 3.75rem; color: var(--gray-100); } .compare-anchor .us .price .accent { color: var(--blue-60); white-space: nowrap; } .compare-anchor .competitors .price { font-size: 2rem; color: var(--gray-70); } .compare-anchor .unit { font-size: 0.875rem; letter-spacing: 0.16px; color: var(--gray-70); } .compare-anchor .competitors { padding-top: 12px; } .compare-anchor-note { font-size: 0.875rem; letter-spacing: 0.16px; color: var(--gray-70); margin-top: 12px; line-height: 1.5; } .compare-anchor-note a { color: var(--blue-60); border-bottom: 1px solid var(--blue-60); } /* Mobile stacking (D10): below 600px, stack with "us" first and larger */ @media (max-width: 600px) { .compare-anchor { grid-template-columns: 1fr; gap: 24px; } .compare-anchor .us .price { font-size: 3rem; } .compare-anchor .competitors .price { font-size: 1.5rem; } .compare-anchor .competitors { padding-top: 0; } } /* ---------- PSTN SLIM TILE (homepage CTA into /pstn-switch-off) ---------- */ .pstn-tile { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--gray-10); padding: 24px 32px; margin-top: 48px; } .pstn-tile-text { font-size: 1rem; color: var(--gray-100); line-height: 1.5; } .pstn-tile-text strong { font-weight: 600; } .pstn-tile a { flex-shrink: 0; color: var(--blue-60); font-size: 0.875rem; font-weight: 400; letter-spacing: 0.16px; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; } .pstn-tile a:hover { text-decoration: underline; } @media (max-width: 600px) { .pstn-tile { flex-direction: column; align-items: flex-start; padding: 20px; } } /* ---------- WHAT WE DO (6 service deliverables) ---------- */ .what-we-do { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--gray-20); border: 1px solid var(--gray-20); } .deliverable { background: var(--white); padding: 24px; display: flex; flex-direction: column; } .deliverable .num { font-family: var(--font); font-size: 3rem; /* display-02: 48px */ font-weight: 300; line-height: 1; letter-spacing: -0.01em; color: var(--gray-30); margin-bottom: 24px; } .deliverable h3 { font-size: 1.125rem; font-weight: 600; color: var(--gray-100); margin-bottom: 8px; line-height: 1.3; } .deliverable p { font-size: 0.875rem; letter-spacing: 0.16px; line-height: 1.5; color: var(--gray-70); } @media (max-width: 480px) { .what-we-do { grid-template-columns: 1fr; } } /* ---------- METRIC GRID (reusable proof-point card pattern) ---------- */ .metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--gray-20); border: 1px solid var(--gray-20); } .metric-card { background: var(--white); padding: 32px 24px; display: flex; flex-direction: column; } .metric-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.32px; text-transform: uppercase; color: var(--blue-60); margin-bottom: 12px; } .metric-number { font-size: 1.375rem; font-weight: 600; line-height: 1.3; color: var(--gray-100); margin-bottom: 16px; letter-spacing: -0.16px; } .metric-card p { font-size: 0.875rem; letter-spacing: 0.16px; line-height: 1.5; color: var(--gray-70); margin: 0; } @media (max-width: 768px) { .metric-grid { grid-template-columns: 1fr; } } /* ---------- ABOUT PAGE (D11 magazine-side layout) ---------- */ .about-grid { display: grid; grid-template-columns: 480px 1fr; gap: 48px; align-items: start; } .about-photo { width: 480px; max-width: 100%; /* Square photo above, caption flows below in normal flow. Carbon-style 0px radii, no shadow (per design D11). */ } .about-photo img { width: 100%; height: auto; display: block; background: var(--gray-10); } .about-photo-caption { font-size: 0.8125rem; letter-spacing: 0.16px; color: var(--gray-70); margin: 12px 0 0; } .about-content h1 { font-size: 2.625rem; font-weight: 300; line-height: 1.19; color: var(--gray-100); margin-bottom: 24px; } .about-content p { font-size: 1rem; line-height: 1.6; color: var(--gray-70); margin-bottom: 16px; max-width: 60ch; } .about-content p.lead { font-size: 1.125rem; color: var(--gray-100); margin-bottom: 24px; } .about-facts { background: var(--gray-10); padding: 24px; margin: 32px 0; font-size: 0.875rem; letter-spacing: 0.16px; color: var(--gray-70); } .about-facts dt { font-weight: 600; color: var(--gray-100); margin-bottom: 4px; } .about-facts dd { margin-bottom: 12px; } .about-facts dd:last-child { margin-bottom: 0; } @media (max-width: 768px) { .about-grid { grid-template-columns: 1fr; gap: 32px; } .about-photo { width: 100%; max-width: 480px; } .about-content h1 { font-size: 2rem; } } /* ---------- REFER PAGE (Phase 1: register-interest, no form) ---------- */ .refer-section { max-width: 720px; } .refer-section h2 { font-size: 2rem; font-weight: 400; line-height: 1.25; color: var(--gray-100); margin: 48px 0 16px; } .refer-section h2:first-child { margin-top: 0; } .refer-section p { font-size: 1rem; line-height: 1.6; color: var(--gray-70); margin-bottom: 16px; } .refer-section ul { list-style: none; margin: 16px 0 24px; } .refer-section ul li { padding: 8px 0 8px 24px; position: relative; font-size: 1rem; line-height: 1.5; color: var(--gray-100); } .refer-section ul li::before { content: ''; position: absolute; left: 0; top: 14px; width: 12px; height: 2px; background: var(--blue-60); } .register-interest { background: var(--gray-10); border-left: 2px solid var(--blue-60); padding: 32px; margin-top: 48px; } .register-interest h3 { font-size: 1.25rem; font-weight: 600; color: var(--gray-100); margin-bottom: 12px; } .register-interest p { font-size: 1rem; line-height: 1.6; color: var(--gray-70); margin-bottom: 16px; } .register-interest a.email-cta { display: inline-block; padding: 12px 16px; background: var(--blue-60); color: var(--white); font-size: 0.875rem; letter-spacing: 0.16px; border: none; } .register-interest a.email-cta:hover { background: var(--blue-60-hover); } /* ---------- 404 PAGE ---------- */ .not-found { max-width: 720px; padding: 80px 0; } .not-found h1 { font-size: 2.625rem; font-weight: 300; line-height: 1.19; color: var(--gray-100); margin-bottom: 24px; } .not-found p { font-size: 1rem; line-height: 1.5; color: var(--gray-70); margin-bottom: 32px; } .not-found-links { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; } .not-found-links a { display: inline-block; padding: 12px 16px; border: 1px solid var(--gray-30); color: var(--gray-100); font-size: 0.875rem; letter-spacing: 0.16px; } .not-found-links a:hover { border-color: var(--blue-60); color: var(--blue-60); } /* ---------- HONEST PRICING WIDE TABLE ---------- */ .pricing-table-wide { width: 100%; border-collapse: collapse; margin: 32px 0; font-variant-numeric: tabular-nums; } .pricing-table-wide thead th { text-align: left; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.32px; text-transform: uppercase; color: var(--gray-70); padding: 16px; background: var(--gray-10); border-bottom: 2px solid var(--gray-30); vertical-align: top; width: 25%; } .pricing-table-wide thead th:first-child { color: var(--gray-100); } .pricing-table-wide thead th.ours { color: var(--blue-60); background: var(--blue-10); } .pricing-table-wide thead th .col-sub { display: block; font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.16px; text-transform: none; color: var(--gray-70); margin-top: 4px; } .pricing-table-wide thead th.ours .col-sub { color: var(--blue-60); } .pricing-table-wide tbody td { padding: 16px; vertical-align: top; border-bottom: 1px solid var(--gray-20); font-size: 0.875rem; letter-spacing: 0.16px; line-height: 1.5; } .pricing-table-wide tbody td:first-child { font-weight: 600; color: var(--gray-100); } .pricing-table-wide tbody td.ours { background: rgba(15, 98, 254, 0.04); } .pricing-table-wide .price-line { font-size: 1.125rem; font-weight: 400; color: var(--gray-100); display: block; } .pricing-table-wide td.ours .price-line { color: var(--blue-60); font-weight: 600; } .pricing-table-wide .note { display: block; font-size: 0.75rem; letter-spacing: 0.16px; color: var(--gray-70); margin-top: 4px; line-height: 1.4; } .pricing-table-wide tbody tr:last-child td { border-bottom: none; } .pricing-totals { background: var(--gray-100); color: var(--white); padding: 32px; margin-top: 32px; } .pricing-totals h3 { font-size: 0.75rem; font-weight: 400; letter-spacing: 0.32px; text-transform: uppercase; color: var(--gray-30); margin-bottom: 16px; } .pricing-totals-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .pricing-totals-cell .label { font-size: 0.75rem; letter-spacing: 0.32px; color: var(--gray-30); text-transform: uppercase; margin-bottom: 8px; } .pricing-totals-cell .amount { font-size: 1.5rem; font-weight: 300; color: var(--white); line-height: 1.2; font-variant-numeric: tabular-nums; margin-bottom: 4px; } .pricing-totals-cell.ours .amount { color: var(--blue-60); } .pricing-totals-cell .small { font-size: 0.75rem; letter-spacing: 0.16px; color: var(--gray-30); line-height: 1.4; } /* Mobile: stack the wide table into cards per row (D5-design). Hide the ; reveal a `.col-tag` inside each that's normally hidden on desktop. Each row becomes a labelled card with three stacked prices. */ @media (max-width: 768px) { .pricing-table-wide thead { display: none; } .pricing-table-wide, .pricing-table-wide tbody, .pricing-table-wide tr, .pricing-table-wide td { display: block; width: 100%; } .pricing-table-wide tr { margin-bottom: 24px; background: var(--white); border: 1px solid var(--gray-20); } .pricing-table-wide tbody td { border-bottom: 1px solid var(--gray-20); padding: 16px 20px; } .pricing-table-wide tbody td:first-child { background: var(--gray-10); font-size: 1rem; border-bottom: 1px solid var(--gray-30); } .pricing-table-wide tbody td.ours { background: var(--blue-10); } .pricing-table-wide .col-tag { display: block; font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.32px; text-transform: uppercase; color: var(--gray-70); margin-bottom: 4px; } .pricing-table-wide td.ours .col-tag { color: var(--blue-60); } .pricing-totals-grid { grid-template-columns: 1fr; gap: 16px; } } .col-tag { display: none; } /* ---------- ARTICLE PROSE (long-form pages: /why-managed-3cx, /switch-from-*) ---------- */ .article { max-width: 720px; } .article h2 { font-size: 2rem; font-weight: 400; line-height: 1.25; color: var(--gray-100); margin: 48px 0 16px; } .article h2:first-child { margin-top: 0; } .article h3 { font-size: 1.25rem; font-weight: 600; color: var(--gray-100); margin: 32px 0 8px; } .article p { font-size: 1rem; line-height: 1.6; color: var(--gray-70); margin-bottom: 16px; } .article p.lead { font-size: 1.125rem; color: var(--gray-100); margin-bottom: 24px; } .article ol, .article ul { margin: 16px 0 24px; padding-left: 0; list-style: none; } .article ol li, .article ul li { padding: 8px 0 8px 32px; position: relative; font-size: 1rem; line-height: 1.6; color: var(--gray-100); counter-increment: article-item; } .article ol { counter-reset: article-item; } .article ol li::before { content: counter(article-item, decimal-leading-zero); position: absolute; left: 0; top: 8px; font-size: 0.75rem; letter-spacing: 0.32px; color: var(--blue-60); font-variant-numeric: tabular-nums; } .article ul li::before { content: ''; position: absolute; left: 0; top: 18px; width: 16px; height: 2px; background: var(--blue-60); } .article blockquote { font-size: 1.125rem; line-height: 1.5; color: var(--gray-100); border-left: 2px solid var(--blue-60); padding: 8px 0 8px 24px; margin: 24px 0; font-weight: 300; } .article a:not(.btn) { color: var(--blue-60); border-bottom: 1px solid var(--blue-60); } .article a:not(.btn):hover { color: var(--blue-60-hover); } /* ---------- LEVERS / SWITCH PAGE — labelled red-flag cards ---------- */ .lever-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--gray-20); border: 1px solid var(--gray-20); margin: 32px 0; } .lever { background: var(--white); padding: 24px; } .lever .lever-tag { display: inline-block; background: rgba(218, 30, 40, 0.08); color: var(--red-60); padding: 4px 8px; font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.32px; text-transform: uppercase; margin-bottom: 12px; } .lever h3 { font-size: 1.125rem; font-weight: 600; color: var(--gray-100); margin-bottom: 8px; } .lever p { font-size: 0.9375rem; letter-spacing: 0.16px; line-height: 1.5; color: var(--gray-70); margin-bottom: 8px; } .lever p.our-take { color: var(--gray-100); font-weight: 400; border-top: 1px solid var(--gray-20); padding-top: 12px; margin-top: 12px; } .lever p.our-take strong { color: var(--blue-60); } /* ---------- FORM SUCCESS / ERROR (homepage contact form) ---------- */ .form-success { background: var(--gray-90); padding: 32px; color: var(--white); } .form-success h3 { font-size: 1.5rem; font-weight: 400; color: var(--blue-60); margin-bottom: 12px; } .form-success p { font-size: 0.875rem; letter-spacing: 0.16px; color: var(--gray-30); line-height: 1.5; margin-bottom: 12px; } .form-success ul { list-style: none; margin-top: 16px; } .form-success ul li { padding: 6px 0 6px 20px; position: relative; font-size: 0.875rem; letter-spacing: 0.16px; color: var(--gray-30); } .form-success ul li::before { content: ''; position: absolute; left: 0; top: 11px; width: 12px; height: 2px; background: var(--blue-60); } .form-error { background: rgba(218, 30, 40, 0.1); border-left: 2px solid var(--red-60); padding: 16px; margin: 16px 0; color: var(--white); font-size: 0.875rem; letter-spacing: 0.16px; line-height: 1.5; } .form-error a { color: var(--white); text-decoration: underline; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .fade-up { opacity: 1; transform: none; } } /* ---------- TRUST STRIPS (Trusted Partners + Accreditations) ---------- */ .trust-strip { padding: 56px 32px 64px; background: var(--gray-10); border-top: 1px solid var(--gray-20); } /* Footer top row: Port Phones brand left, contact details right */ .footer-top { max-width: 1280px; margin: 0 auto 32px; padding: 0 0 28px; display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; border-bottom: 1px solid var(--gray-80); } .footer-brand { flex-shrink: 0; } .footer-logo { display: inline-flex; align-items: center; gap: 12px; color: var(--white); font-size: 1.75rem; font-weight: 600; letter-spacing: 0.16px; line-height: 1; text-decoration: none; border: none; } .footer-logo img { height: 36px; width: 36px; display: block; } .footer-logo .accent { color: var(--blue-60); } .footer-logo .wordmark { transform: translateY(-1px); } .footer-tagline { margin: 12px 0 0; font-size: 0.8125rem; letter-spacing: 0.16px; color: var(--gray-50); } .footer-contact { text-align: right; } .footer-contact p { margin: 0 0 4px; font-size: 0.8125rem; letter-spacing: 0.16px; line-height: 1.5; color: var(--gray-30); } .footer-contact a { color: var(--gray-30); text-decoration: none; border: none; } .footer-contact a:hover { color: var(--white); text-decoration: underline; } @media (max-width: 700px) { .footer-top { flex-direction: column; gap: 24px; align-items: flex-start; } .footer-contact { text-align: left; } } /* Footer trust strip: 5 logos on dark, monochrome white treatment */ .footer-trust { max-width: 1280px; margin: 24px auto 0; padding: 28px 0 4px; border-top: 1px solid var(--gray-80); } .footer-trust-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 48px; row-gap: 20px; } .footer-trust-logo { display: flex; align-items: center; justify-content: center; height: 28px; } .footer-trust-logo img { max-height: 24px; max-width: 130px; width: auto; height: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.5; transition: opacity 0.2s ease; display: block; } .footer-trust-logo:hover img { opacity: 1; } @media (max-width: 700px) { .footer-brand { padding: 4px 0 20px; } .footer-logo { font-size: 1.5rem; } .footer-logo img { height: 32px; width: 32px; } .footer-trust-logos { gap: 32px; row-gap: 16px; } } .trust-strip-inner { max-width: 1056px; margin: 0 auto; text-align: center; } .trust-strip-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.32px; text-transform: uppercase; color: var(--gray-70); margin-bottom: 32px; } .trust-strip-label-secondary { margin-top: 56px; } .trust-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 64px; row-gap: 32px; } .trust-logo { display: flex; align-items: center; justify-content: center; height: 40px; } .trust-logo img { max-height: 36px; max-width: 180px; width: auto; height: auto; object-fit: contain; filter: grayscale(100%); opacity: 0.65; transition: filter 0.2s ease, opacity 0.2s ease; display: block; } .trust-logo:hover img { filter: grayscale(0%); opacity: 1; } .accred-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; max-width: 1056px; margin: 0 auto; } .accred-item { padding: 28px 20px; border: 1px solid var(--gray-20); background: var(--white); text-align: center; } .accred-logo { height: 56px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .accred-logo img { max-height: 56px; max-width: 160px; width: auto; height: auto; object-fit: contain; display: block; } .accred-title { font-size: 0.9375rem; font-weight: 600; color: var(--gray-100); letter-spacing: 0; margin-bottom: 6px; line-height: 1.3; } .accred-detail { font-size: 0.8125rem; color: var(--gray-70); line-height: 1.45; } @media (max-width: 700px) { .trust-strip { padding: 40px 24px 48px; } .trust-logos { gap: 40px; row-gap: 28px; } .trust-strip-label-secondary { margin-top: 48px; } } /* ---------- PROBLEM RECOGNITION (homepage section 2) ---------- */ /* Two-column layout: list on the left, typographic kicker aside on the right. Restores visual weight to the right side without inventing new copy. The aside is decorative-only (aria-hidden) — the list itself carries meaning. */ .fit-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 64px; align-items: start; } .fit-aside { padding-top: 8px; border-left: 1px solid var(--gray-20); padding-left: 32px; } .fit-aside .aside-num { font-family: var(--font); font-size: clamp(96px, 12vw, 160px); font-weight: 300; line-height: 1; letter-spacing: -0.02em; color: var(--gray-30); margin-bottom: 16px; } .fit-aside .aside-label { font-size: 0.75rem; font-weight: 400; letter-spacing: 0.32px; text-transform: uppercase; color: var(--gray-70); } @media (max-width: 768px) { .fit-grid { grid-template-columns: 1fr; gap: 24px; } .fit-aside { border-left: none; border-top: 1px solid var(--gray-20); padding-left: 0; padding-top: 24px; } .fit-aside .aside-num { font-size: 96px; } } .problem-list { list-style: none; max-width: 720px; margin: 0 0 48px; padding: 0; } .problem-list li { padding: 16px 0; display: flex; align-items: flex-start; gap: 16px; font-size: 1.125rem; line-height: 1.5; color: var(--gray-100); border-bottom: 1px solid var(--gray-20); } .problem-list li:first-child { border-top: 1px solid var(--gray-20); } .problem-list li > svg.problem-icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 4px; color: var(--gray-70); fill: currentColor; } .problem-list a { color: var(--blue-60); border-bottom: 1px solid var(--blue-60); position: relative; } .problem-list a:hover { color: var(--blue-60-hover); border-bottom-color: var(--blue-60-hover); } /* Expand inline body-link tap targets to ~44px without changing layout. The ::before is invisible but extends the clickable area top/bottom so mobile taps don't have to land on the ~19-24px text glyphs precisely. Applied to inline links that sit in body prose where padding would disrupt line-height and break paragraph rhythm. */ .problem-list a::before, .compare-anchor-note a::before, .faq-answer-inner a::before, .audit-notice a::before, .founder-attribution a::before, .outcomes a::before { content: ''; position: absolute; inset: -12px -4px; } .compare-anchor-note a, .faq-answer-inner a, .audit-notice a, .founder-attribution a, .outcomes a { position: relative; } /* ---------- NEED-PAYOFF OUTCOMES (homepage section 4) ---------- */ .outcomes { list-style: none; max-width: 720px; margin: 0 0 48px; padding: 0; } .outcomes li { padding: 20px 0 20px 32px; position: relative; font-size: 1.125rem; line-height: 1.5; color: var(--gray-100); border-bottom: 1px solid var(--gray-20); } .outcomes li:first-child { border-top: 1px solid var(--gray-20); } .outcomes li::before { content: ''; position: absolute; left: 0; top: 30px; width: 16px; height: 2px; background: var(--blue-60); } /* ---------- SPECIMEN BAND (oversized typographic ornament) ---------- */ .specimen-band { position: relative; overflow: hidden; background: var(--gray-100); color: var(--white); padding: 96px 32px; text-align: center; } /* Optional background