/* ========================================================= CollegeHound homepage — approved system (Sep 9–10, 2026) Served at /assets/homepage.css and linked from the home template (lib/collegehound_web/marketing/controllers/marketing_html/home.html.heex), NOT from the root layout — the marketing is locked for this pass and this file is homepage-only, so it should not load on every page. It is deliberately NOT part of priv/static/assets/marketing.css: that blob is ch-elysia build output and an append here would be lost the next time it is copied in. Fonts (Montserrat, Lato) come from the @font-face rules already inside marketing.css; there is no self-hosted Montserrat 800 italic, so .marker renders a synthetic oblique. Source of truth: "CollegeHound Homepage Spec" §1–§10. Every color below is a token; no literal hex elsewhere. ========================================================= */ :root { /* Palette (brand) */ --ch-cream: #FBF9F1; --ch-navy: #0C1E78; --ch-slate: #363854; --ch-gray: #6E746A; /* AA-corrected; palette #8A9085 fails at 13px */ --ch-beige: #E4E2D3; --ch-band: #EFEDE3; /* derived */ --ch-royal: #2245B3; --ch-royal-hover: #1C3A99; --ch-royal-active: #172F82; --ch-navy-hover: #0A1860; --ch-gold: #FAE291; --ch-terracotta: #AA5F38; --ch-forest: #265632; --ch-tan: #C0B194; --ch-brown: #4A3A20; --ch-lavender: #9A8CAE; /* AA-corrected; palette #9789AC fails on navy */ --ch-on-navy-soft: #C9CDE6; /* derived */ --ch-green-light: #86E16E; --ch-white: #FFFFFF; --ch-cream-active: #EFEDE3; /* Chip tints (derived) */ --chip-reach-bg: #F6E6DD; --chip-safety-bg: #E3F4D9; --chip-neutral-bg: #F1EFE8; --card-divider: #F0EDE4; --card-header-divider: #EEEBE2; /* Shape */ --radius-card: 16px; --radius-card-lg: 18px; --radius-pill: 999px; --shadow-card: 0 18px 50px rgba(12, 30, 120, 0.08); --shadow-card-sm: 0 10px 30px rgba(12, 30, 120, 0.06); /* Type */ --font-display: "Montserrat", Arial, sans-serif; --font-body: "Lato", "Helvetica Neue", Arial, sans-serif; --fs-hero: clamp(42px, 4.3vw, 62px); --fs-h2: clamp(30px, 2.8vw, 40px); --fs-h3-diff: clamp(26px, 2vw, 28px); --fs-sub: clamp(19px, 1.5vw, 22px); --fs-lead: clamp(17px, 1.4vw, 20px); --fs-body: 17px; --fs-small: 13px; --fs-eyebrow: clamp(11px, 0.85vw, 12px); /* Spacing */ --gutter: 24px; --section-y: 56px; --content-max: 1200px; --measure: 60ch; --transition: 120ms ease; } @media (min-width: 1024px) { :root { --gutter: 64px; --section-y: 96px; } } @media (min-width: 768px) and (max-width: 1023px) { :root { --gutter: 40px; --section-y: 72px; } } /* ---------- Fonts ---------- marketing.css already declares Montserrat 400/500/600/700/800 and Lato 400/700, all upright. The one face it has no file for is the 800 italic the gold .marker word needs; without it the browser slants the upright 800 and the redesign's one signature reads as a synthetic oblique. Declared here rather than in marketing.css because that file is ch-elysia build output. Latin subset (Google Fonts v31, OFL) — enough for the three approved marker words; add the latin-ext file with its own unicode-range if a marker word ever needs it. */ @font-face { font-family: "Montserrat"; src: url("/fonts/Montserrat-ExtraBoldItalic-41061cbbe9aca55ef1126a86365a59a3.woff2?vsn=d") format("woff2"); font-weight: 800; font-style: italic; font-display: swap; } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* The marketing root layout puts `class="bg-white text-slate-900"` on . Those Tailwind class selectors outrank a bare `body` element selector, so the cream ground and slate text below need a rule that carries the class too — otherwise every section renders on white. */ body.bg-white { background: var(--ch-cream); } body.text-slate-900 { color: var(--ch-slate); } body { margin: 0; background: var(--ch-cream); color: var(--ch-slate); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.55; -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; display: block; } h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: var(--ch-navy); } a:hover { color: var(--ch-royal); } :focus-visible { outline: 2px solid var(--ch-royal); outline-offset: 3px; border-radius: 2px; } .on-navy :focus-visible { outline-color: var(--ch-cream); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 16px; top: -48px; z-index: 100; background: var(--ch-navy); color: var(--ch-cream); padding: 10px 14px; border-radius: 6px; font-weight: 700; text-decoration: none; } .skip-link:focus { top: 12px; } /* ---------- Type roles ---------- */ .h-hero { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-hero); line-height: 1.04; letter-spacing: -0.025em; color: var(--ch-navy); text-wrap: balance; } .h-section { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.02em; color: var(--ch-navy); text-wrap: balance; } .h-diff { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3-diff); line-height: 1.2; letter-spacing: -0.01em; color: var(--ch-navy); text-wrap: balance; max-width: 30ch; } .h-sub { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sub); line-height: 1.25; color: var(--ch-navy); } .eyebrow { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ch-royal); /* At 390 the hero eyebrow wrapped with "2018" alone on the second line. Balance splits it evenly instead of leaving the year stranded. */ text-wrap: balance; } .lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ch-slate); max-width: 56ch; } .body { font-size: var(--fs-body); line-height: 1.55; color: var(--ch-slate); max-width: var(--measure); /* Stops a single-word last line. FAQ 5 ended on "one." by itself at 1440. Ignored by engines that do not support it, so it can only improve. */ text-wrap: pretty; } .small { font-size: var(--fs-small); line-height: 1.5; color: var(--ch-gray); } strong { color: var(--ch-navy); font-weight: 700; } /* Gold marker: one word per approved heading only (hero, Binder, Scout) */ .marker { font-style: italic; color: var(--ch-navy); padding: 0 0.04em 0.06em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M4 8 C40 2 78 11 118 6 S176 3 196 8' fill='none' stroke='%23FAE291' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 0 96%; background-size: 100% 0.28em; } /* ---------- Buttons & links (§3) ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1; text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; transition: background-color var(--transition), color var(--transition); } @media (min-width: 1024px) { .btn { min-height: 54px; } } .btn svg { width: 18px; height: 18px; flex: none; transition: transform var(--transition); } .btn:hover svg { transform: translateX(2px); } .btn-primary { background: var(--ch-royal); color: var(--ch-white); } .btn-primary:hover { background: var(--ch-royal-hover); color: var(--ch-white); } .btn-primary:active { background: var(--ch-royal-active); } .btn-inverted { background: var(--ch-cream); color: var(--ch-navy); } .btn-inverted:hover { background: var(--ch-white); color: var(--ch-navy); } .btn-inverted:active { background: var(--ch-cream-active); } .btn-header { min-height: 44px; padding: 0 20px; font-size: 15px; background: var(--ch-navy); color: var(--ch-cream); } .btn-header:hover { background: var(--ch-royal); color: var(--ch-cream); } .btn-header:active { background: var(--ch-navy-hover); } .btn-block { width: 100%; } .btn-sm { min-height: 48px; font-size: 15px; padding: 0 22px; } .link { display: inline-flex; align-items: center; gap: 6px; color: var(--ch-royal); font-weight: 700; text-decoration: none; min-height: 44px; /* hit target */ } .link svg { width: 16px; height: 16px; flex: none; transition: transform var(--transition); } .link:hover { color: var(--ch-royal); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .link:hover svg { transform: translateX(2px); } .link:active { color: var(--ch-navy); } .link-inline { min-height: 0; } .prose a { color: var(--ch-navy); text-decoration: underline; text-underline-offset: 2px; } .prose a:hover { color: var(--ch-royal); } @media (prefers-reduced-motion: reduce) { .btn, .link, .btn svg, .link svg { transition: none; } .btn:hover svg, .link:hover svg { transform: none; } } /* ---------- Layout primitives ---------- */ .container { max-width: var(--content-max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .section { padding-top: var(--section-y); padding-bottom: var(--section-y); border-top: 1px solid var(--ch-beige); } .section-head { display: flex; flex-direction: column; gap: 14px; } .section-head + * { margin-top: 28px; } @media (min-width: 1024px) { .section-head + * { margin-top: 36px; } } .grid-2 { display: grid; grid-template-columns: 1fr; gap: 28px; } .grid-3 { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 64px; } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; } } .stack { display: flex; flex-direction: column; } .stack-4 { gap: 4px; } .stack-6 { gap: 6px; } .stack-8 { gap: 8px; } .stack-10 { gap: 10px; } .stack-14 { gap: 14px; } .cell { max-width: 52ch; } /* ---------- Announcement band (block 0) ---------- */ .band { background: var(--ch-band); color: var(--ch-navy); font-size: var(--fs-small); line-height: 1.4; text-align: center; padding: 9px 20px; } .band-inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; } .band .link { min-height: 44px; padding: 0 4px; margin: -13px 0; white-space: nowrap; } /* ---------- Header (block 1) ---------- */ .site-header { border-bottom: 1px solid var(--ch-beige); background: var(--ch-cream); } .site-header .container { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; gap: 12px; min-width: 0; } .site-header .wordmark { flex: none; } .site-nav { flex: none; } @media (max-width: 359px) { .wordmark span { display: none; } .btn-header { padding: 0 14px; } } @media (min-width: 1024px) { .site-header .container { padding-top: 20px; padding-bottom: 20px; } } .wordmark { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ch-navy); min-height: 44px; } .wordmark img { width: 30px; height: 30px; } /* Real dog mark: viewBox 81x76, so fix the height and let the width follow. */ .wordmark svg { height: 30px; width: auto; color: var(--ch-navy); } .wordmark span { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.01em; } @media (min-width: 1024px) { .wordmark span { font-size: 20px; } } .site-nav { display: flex; align-items: center; gap: 14px; } .site-nav a:not(.btn) { color: var(--ch-slate); text-decoration: none; font-size: 14px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; } .site-nav a:not(.btn):hover { color: var(--ch-navy); } .site-nav a[aria-current="page"] { color: var(--ch-navy); font-weight: 700; } .site-nav a.nav-desktop { display: none; } @media (min-width: 1024px) { .site-nav { gap: 32px; } .site-nav a:not(.btn) { font-size: 15px; } .site-nav a.nav-desktop { display: inline-flex; } } /* ---------- Hero (block 2) ---------- */ .hero { padding-top: 48px; padding-bottom: 28px; } .hero-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; } .hero-copy { display: flex; flex-direction: column; gap: 18px; max-width: 560px; } .hero-copy .lead { max-width: 34ch; font-size: clamp(18px, 1.5vw, 20px); } .hero-actions { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; } .hero-actions .small { text-align: center; } .hero-visual { display: flex; flex-direction: column; gap: 10px; } @media (min-width: 768px) { .hero-actions { flex-direction: row; align-items: center; gap: 18px; } .hero-actions .small { text-align: left; font-size: 14px; } } @media (min-width: 1024px) { .hero { padding-top: 96px; padding-bottom: 88px; } .hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; } .hero-copy { gap: 22px; } .hero-copy .lead { max-width: 30ch; } } @media (min-width: 768px) and (max-width: 1023px) { .hero { padding-top: 72px; padding-bottom: 56px; } .hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; } } /* Mobile: Binder card slightly wider than the text column */ @media (max-width: 767px) { .hero-visual { margin-left: -8px; margin-right: -8px; } .hero-visual .small { padding: 0 8px; } } /* ---------- Binder preview (card: product surface) ---------- */ .binder { background: var(--ch-white); border: 1px solid var(--ch-beige); border-radius: var(--radius-card); box-shadow: var(--shadow-card-sm); overflow: hidden; } @media (min-width: 1024px) { .binder { border-radius: var(--radius-card-lg); box-shadow: var(--shadow-card); } } .binder-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--card-header-divider); } @media (min-width: 1024px) { .binder-head { padding: 16px 20px; } } .binder-title { display: flex; align-items: center; gap: 8px; } .binder-title b { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ch-navy); } @media (min-width: 1024px) { .binder-title b { font-size: 15px; } } .binder-meta { display: flex; align-items: center; gap: 10px; } .binder-meta .label { font-size: 12px; color: var(--ch-gray); } .pill-outline { font-size: 12px; font-weight: 700; color: var(--ch-navy); border: 1px solid var(--ch-navy); border-radius: var(--radius-pill); padding: 4px 10px; } .binder-row { display: grid; grid-template-columns: 3px 1fr; gap: 0 13px; align-items: center; border-bottom: 1px solid var(--card-divider); } .binder-row:last-child { border-bottom: 0; } .binder-bar { align-self: stretch; } .bar-reach { background: var(--ch-terracotta); } .bar-target { background: var(--ch-tan); } .bar-safety { background: var(--ch-forest); } .binder-main { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 14px 0; } .binder-line { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .binder-school { font-weight: 700; font-size: 15px; color: var(--ch-navy); } .binder-when { font-size: 12px; color: var(--ch-gray); white-space: nowrap; } .binder-facts { font-size: 13px; color: var(--ch-gray); } .chips { display: flex; gap: 6px; flex-wrap: wrap; } .chip { font-size: 11px; font-weight: 700; border-radius: var(--radius-pill); padding: 3px 9px; line-height: 1.4; } .chip-reach { color: var(--ch-terracotta); background: var(--chip-reach-bg); } .chip-target { color: var(--ch-brown); background: var(--ch-gold); } .chip-safety { color: var(--ch-forest); background: var(--chip-safety-bg); } .chip-status { color: var(--ch-slate); background: var(--chip-neutral-bg); font-weight: 400; } @media (min-width: 1024px) { .binder-row { grid-template-columns: 3px 1fr auto; gap: 0 14px; } .binder-main { padding: 14px 0; gap: 5px; } .binder-school { font-size: 16px; } .binder-side { display: flex; align-items: center; gap: 8px; padding-right: 18px; } .binder-side .binder-when { margin-right: 2px; } .binder-main .binder-when, .binder-main .chips { display: none; } } @media (max-width: 1023px) { .binder-side { display: none; } .binder-meta .label { display: none; } } /* ---------- Binder statement (block 5, below desktop) ---------- */ .binder-statement { padding-top: 40px; } @media (min-width: 1024px) { .binder-statement { display: none; } } /* ---------- Without / With (block 3) ---------- */ .list-marks li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-body); line-height: 1.5; } .list-marks li svg { flex: none; margin-top: 5px; width: 14px; height: 14px; } .list-without li { color: var(--ch-gray); } .list-with li { color: var(--ch-navy); } .h-sub.muted { color: var(--ch-gray); } /* ---------- Four questions (block 4) ---------- */ .ident { font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; color: var(--ch-gray); } /* ---------- Scout (block 6) ---------- */ .scout-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; } @media (min-width: 1024px) { .scout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; } } .scout-copy { display: flex; flex-direction: column; gap: 14px; max-width: 520px; } @media (min-width: 1024px) { .scout-copy { gap: 20px; order: 2; } .scout-transcript { order: 1; } } .transcript { display: flex; flex-direction: column; gap: 10px; max-width: 600px; } .bubble-user { align-self: flex-end; max-width: 86%; background: var(--ch-navy); color: var(--ch-cream); font-size: 15px; line-height: 1.45; padding: 12px 16px; border-radius: 18px 18px 4px 18px; } .bubble-scout { align-self: flex-start; max-width: 92%; background: var(--ch-white); border: 1px solid var(--ch-beige); padding: 14px 16px; border-radius: 18px 18px 18px 4px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-card-sm); } @media (min-width: 1024px) { .bubble-user { max-width: 80%; font-size: 16px; padding: 14px 18px; } .bubble-scout { padding: 18px 20px; gap: 12px; } } .scout-label { display: flex; align-items: center; gap: 8px; } .scout-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--ch-royal); } .scout-label b { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; color: var(--ch-navy); } .bubble-scout p, .bubble-scout li { font-size: 15px; line-height: 1.5; color: var(--ch-slate); } @media (min-width: 1024px) { .bubble-scout p, .bubble-scout li { font-size: 16px; } } .steps-inline { display: flex; flex-direction: column; gap: 8px; } .steps-inline li { display: flex; gap: 10px; } .steps-inline .n { flex: none; font-family: var(--font-display); font-weight: 800; color: var(--ch-royal); } .transcript-caption { padding: 4px 8px 0; max-width: 520px; } .questions { display: flex; flex-direction: column; max-width: 820px; border-bottom: 1px solid var(--ch-beige); } .question { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; border-top: 1px solid var(--ch-beige); } .question q { font-size: 17px; line-height: 1.4; color: var(--ch-navy); font-style: italic; quotes: "“" "”"; } .question .src { font-size: 14px; color: var(--ch-gray); } @media (min-width: 1024px) { .question { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 18px 0; } .question q { font-size: 19px; } .question .link { flex: none; margin: -9px 0 -9px; padding: 9px 0; min-height: 44px; align-self: flex-start; } } /* ---------- Proof (block 7) ---------- */ .quote { display: flex; flex-direction: column; gap: 10px; max-width: 46ch; } .quote blockquote { font-size: 17px; line-height: 1.45; color: var(--ch-navy); } @media (min-width: 1024px) { .quote blockquote { font-size: 19px; } } .quote figcaption { font-size: var(--fs-small); color: var(--ch-gray); } .quote figcaption b { color: var(--ch-slate); } .interns { display: flex; flex-direction: column; gap: 18px; padding-top: 12px; border-top: 1px solid var(--ch-beige); margin-top: 8px; } .intern-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; } @media (min-width: 768px) { .intern-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .intern-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .intern b { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ch-navy); display: block; } /* Award labels sit one step above --fs-small (13px). They are the smallest text on the page carrying real information, and 13px gray is the one place where size and contrast are both at their floor at once. 14px reads comfortably while staying clearly subordinate to the 15px navy name, and the gray is kept so the approved color hierarchy does not move. */ .intern .small { font-size: 14px; } /* "Ahead of the Curve Award" is the only one of the six long enough to wrap, so the row read as ragged. The award names are real and cannot be shortened, so reserve two lines for every label instead: the six then sit on a common baseline whether their text wraps or not. */ .intern .small { display: block; min-height: 2lh; } /* ---------- Privacy promise (block 7b) ---------- */ .privacy .h-diff { margin-bottom: 28px; } .privacy .privacy-link { margin-top: 24px; } @media (min-width: 1024px) { .privacy .privacy-link { margin-top: 32px; } } /* ---------- Pricing (block 8) ---------- */ .tiers { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 920px; } @media (min-width: 768px) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .tier { display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: var(--radius-card); background: var(--ch-white); border: 1px solid var(--ch-beige); color: var(--ch-navy); } .tier-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ch-gray); } .tier-price { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -0.02em; } .tier-note { font-size: 14px; color: var(--ch-gray); } .tier-list { display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.45; color: var(--ch-slate); } .tier-list li { display: flex; gap: 10px; align-items: flex-start; } .tier-list svg { flex: none; margin-top: 5px; width: 14px; height: 14px; } .tier-plus { background: var(--ch-navy); border-color: var(--ch-navy); color: var(--ch-cream); } .tier-plus .tier-name, .tier-plus .tier-note { color: var(--ch-on-navy-soft); } .tier-plus .tier-list { color: var(--ch-cream); } .steps { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; margin-top: 36px; } @media (min-width: 1024px) { .steps { flex-direction: row; gap: 40px; } } .step { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--ch-slate); max-width: 30ch; } .step .num { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ch-navy); color: var(--ch-cream); font-family: var(--font-display); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; } /* ---------- FAQ (block 9) ---------- */ .faq { display: flex; flex-direction: column; max-width: 760px; border-bottom: 1px solid var(--ch-beige); } .faq-item { display: flex; flex-direction: column; gap: 8px; padding: 22px 0; border-top: 1px solid var(--ch-beige); } /* ---------- Closing band (block 10): the one full-bleed navy ---------- */ .closing { background: var(--ch-navy); color: var(--ch-cream); padding: 64px var(--gutter); text-align: center; } @media (min-width: 1024px) { .closing { padding: 96px var(--gutter); } } .closing-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 720px; margin: 0 auto; } @media (min-width: 1024px) { .closing-inner { gap: 18px; } } .closing .h-section { color: var(--ch-cream); max-width: 22ch; } .closing .lead { color: var(--ch-on-navy-soft); max-width: 46ch; } .closing .fine { font-size: var(--fs-small); color: var(--ch-lavender); } .closing .btn { margin-top: 6px; } @media (max-width: 767px) { .closing .btn { width: 100%; } } .closing a:not(.btn) { color: var(--ch-cream); } /* ---------- Footer (unchanged this pass) ---------- The live footer markup is kept verbatim from the previous template, so it carries Tailwind classes rather than .site-footer and the rules below do not reach it. This one rule does: it gives those links the same 44px hit target the rest of the page has, and the negative margin cancels the padding so the footer's spacing is unchanged. */ footer .max-w-4xl a { display: inline-block; padding: 12px 4px; margin: -12px 0; } /* ---------- Footer (unchanged this pass) ---------- */ .site-footer { padding: 32px var(--gutter); text-align: center; font-size: 14px; color: var(--ch-gray); } .site-footer p { margin: 0 0 6px; max-width: none; } .site-footer a { color: var(--ch-navy); display: inline-block; padding: 12px 4px; margin: -12px 0; }