/* Content-page layout, aligned to the homepage and the two audience landing pages. See STYLES.md §14. Why a third sheet rather than more rules in styles.css: styles.css is the pre-migration marketing sheet — it centres , paints gradients, and colours every heading teal. Pages migrated here opt out of all of that by carrying `class="pg-page"`, so nothing in this file can reach a page that has not been rewritten yet. home.css and audience.css stay untouched, which keeps the homepage and /attorneys, /experts out of the blast radius. Naming mirrors home.css (`home-`) and audience.css (`aud-`): the component set is deliberately the same one, so a block that exists there should be ported rather than reinvented. */ .pg-page { text-align: left; background: var(--color-white); color: var(--color-ink); } /* styles.css colours every heading with the old teal. The display face is applied per component below, not here: only page and section headings are Fraunces, exactly as on the homepage — card and step titles stay on the sans so a grid of them does not read as six competing section headings. */ .pg-page h1, .pg-page h2, .pg-page h3, .pg-page h4 { color: var(--color-ink); } /* The legacy `

…

` strip above the hero is a second, smaller title bar competing with the h1. Migrated pages drop the element; this hides it on any page that still carries one. */ .pg-page > header { display: none; } /* ---------- Layout ---------- */ .pg-shell { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; } .pg-shell--narrow { max-width: 56rem; } .pg-section { padding: 5rem 0; } @media (min-width: 640px) { .pg-section { padding: 6rem 0; } } .pg-section--tight { padding: 3.5rem 0; } .pg-section--hero { padding: 4.5rem 0; } @media (min-width: 640px) { .pg-section--hero { padding: 6rem 0; } } /* ---------- Bands ---------- */ .pg-band--paper { background: var(--color-paper); } .pg-band--wash { background: rgba(215, 234, 236, 0.3); } .pg-band--ink { background: var(--color-ink); color: var(--color-white); } .pg-band--rule { border-top: 1px solid var(--color-slate-200); } .pg-band--ink h2, .pg-band--ink h3, .pg-band--ink .pg-h1, .pg-band--ink .pg-h2, .pg-band--ink .pg-h3 { color: var(--color-white); } .pg-band--ink .pg-lede, .pg-band--ink .pg-body { color: var(--color-slate-300); } /* ---------- Type ---------- */ .pg-eyebrow { margin: 0; font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent-dark); } /* accent is the on-navy variant — it measures about 2:1 on white. */ .pg-eyebrow--accent { color: var(--color-accent); } .pg-eyebrow--brand { color: var(--color-brand); } .pg-eyebrow--muted { color: var(--color-ink-muted); } .pg-page .pg-h1, .pg-page .pg-h2, .pg-page .pg-h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.025em; } .pg-page .pg-h1 { margin: 1.5rem 0 0; max-width: 48rem; font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.05; } .pg-page .pg-h2 { margin: 0; font-size: clamp(1.75rem, 3.2vw, 2.25rem); line-height: 1.2; } .pg-page .pg-h2--spaced { margin-top: 1rem; } .pg-page .pg-h3 { margin: 0; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.02em; } /* Subheading that opens a new group inside a section, e.g. each region in the state directory. */ .pg-page .pg-h3--group { margin-top: 2.5rem; } .pg-em { font-style: italic; } .pg-em--accent { color: var(--color-accent); } .pg-em--accent-dark { color: var(--color-accent-dark); } .pg-em--brand { color: var(--color-brand); } .pg-em--muted { color: var(--color-ink-muted); } .pg-lede { margin: 2rem 0 0; max-width: 44rem; font-size: 1.125rem; line-height: 1.7; color: var(--color-ink-muted); } .pg-body { margin: 1.25rem 0 0; max-width: 48rem; font-size: 1rem; line-height: 1.7; color: var(--color-ink-muted); } .pg-lede a, .pg-body a { color: var(--color-brand); text-decoration: none; } .pg-band--ink .pg-lede a, .pg-band--ink .pg-body a { color: var(--color-accent); } .pg-lede a:hover, .pg-body a:hover { text-decoration: underline; } .pg-note { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--color-ink-faint); } .pg-band--ink .pg-note { color: var(--color-slate-300); } .pg-note--spaced { margin-top: 2rem; } .pg-arrow-link { display: inline-block; margin-top: 1.5rem; font-weight: 600; font-size: 0.9375rem; color: var(--color-brand); text-decoration: none; transition: color 0.15s ease; } .pg-arrow-link:hover { color: var(--color-brand-dark); } .pg-band--ink .pg-arrow-link { color: var(--color-white); } .pg-band--ink .pg-arrow-link:hover { color: var(--color-accent); } /* ---------- Buttons ---------- */ .pg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2.5rem; } .pg-actions--center { justify-content: center; } .pg-actions + .pg-note { margin-top: 1rem; } .pg-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; border: 1px solid transparent; border-radius: var(--radius-button); font-family: var(--font-sans); font-size: 1rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .pg-btn--brand { background: var(--color-brand); color: var(--color-white); } .pg-btn--brand:hover { background: var(--color-brand-dark); color: var(--color-white); } .pg-btn--white { background: var(--color-white); color: var(--color-ink); } .pg-btn--white:hover { background: var(--color-slate-100); color: var(--color-ink); } .pg-btn--outline { border-color: var(--color-slate-300); color: var(--color-ink); } .pg-btn--outline:hover { border-color: var(--color-brand); color: var(--color-brand); } .pg-btn--ghost { border-color: rgba(255, 255, 255, 0.4); color: var(--color-white); } .pg-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); color: var(--color-white); } .pg-btn--on-brand { background: var(--color-white); color: var(--color-brand); } .pg-btn--on-brand:hover { background: var(--color-brand-light); color: var(--color-brand); } /* ---------- Hero ---------- */ .pg-hero-split { display: grid; gap: 3rem; align-items: center; } @media (min-width: 900px) { .pg-hero-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } } /* ---------- Cards ---------- */ .pg-grid { display: grid; gap: 1.5rem; margin-top: 2.5rem; } @media (min-width: 640px) { .pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .pg-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .pg-grid--two { grid-template-columns: minmax(0, 1fr); } @media (min-width: 900px) { .pg-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pg-card { display: flex; flex-direction: column; padding: 1.75rem; border: 1px solid var(--color-slate-200); border-radius: 0.75rem; background: var(--color-white); text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } /* Only cards that are themselves links get the hover affordance; a plain content card that lifts on hover promises a click that never happens. */ a.pg-card:hover { border-color: rgba(12, 110, 117, 0.35); box-shadow: 0 10px 15px -3px rgba(22, 41, 77, 0.06); } .pg-band--ink .pg-card { border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.04); } .pg-page .pg-card h3 { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.35; } .pg-page .pg-card .pg-eyebrow + h3, .pg-page .pg-card .pg-step-n + h3 { margin-top: 0.75rem; } .pg-card p { margin: 0.625rem 0 0; font-size: 0.9375rem; line-height: 1.7; color: var(--color-ink-muted); } .pg-band--ink .pg-card p { color: var(--color-slate-300); } .pg-card p a { color: var(--color-brand); text-decoration: none; font-weight: 500; } .pg-card p a:hover { text-decoration: underline; } /* Publication mark inside a card, sized by height so wordmarks of very different aspect ratios sit on the same optical line. */ .pg-card-brand { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; } .pg-card-brand img { max-height: 28px; max-width: 130px; width: auto; object-fit: contain; } .pg-card-brand .pg-eyebrow { flex: 0 0 auto; } .pg-card-more { display: inline-block; margin-top: auto; padding-top: 1.25rem; font-size: 0.8125rem; font-weight: 600; color: var(--color-brand); } /* ---------- Numbered steps ---------- */ .pg-steps { display: grid; gap: 2.5rem; margin: 2.5rem 0 0; padding: 0; list-style: none; } @media (min-width: 640px) { .pg-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .pg-steps--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pg-steps--five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2rem; } } .pg-page .pg-step h3 { margin: 1rem 0 0; font-size: 1rem; font-weight: 600; line-height: 1.35; } .pg-step p { margin: 0.5rem 0 0; font-size: 0.9375rem; line-height: 1.7; color: var(--color-ink-muted); } .pg-band--ink .pg-step p { color: var(--color-slate-300); } .pg-page .pg-step-n { display: block; margin: 0; font-family: var(--font-display); font-size: 2.25rem; font-weight: 600; line-height: 1; color: var(--color-brand); } /* accent-dark, not accent: these sit on light bands. */ .pg-page .pg-step-n--accent { color: var(--color-accent-dark); } .pg-band--ink .pg-page .pg-step-n, .pg-band--ink .pg-step-n, .pg-band--ink .pg-step-n--accent { color: var(--color-accent); } /* ---------- Check lists ---------- */ .pg-checks { display: grid; gap: 0.875rem; max-width: 48rem; margin: 2rem 0 0; padding: 0; list-style: none; } .pg-checks li { display: flex; gap: 0.75rem; font-size: 0.9375rem; line-height: 1.7; color: var(--color-ink-muted); } .pg-checks li::before { content: "\2713"; flex: 0 0 auto; font-weight: 600; color: var(--color-brand); } .pg-band--ink .pg-checks li { color: var(--color-slate-300); } .pg-band--ink .pg-checks li::before { color: var(--color-accent); } .pg-checks--two { gap: 0.875rem 3rem; } @media (min-width: 800px) { .pg-checks--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; } } /* ---------- Stats ---------- */ .pg-stats { display: grid; gap: 2rem; margin-top: 3rem; } @media (min-width: 640px) { .pg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .pg-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pg-stats--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .pg-stat-figure { font-family: var(--font-display); font-size: 2.75rem; font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: var(--color-brand); } .pg-band--ink .pg-stat-figure { color: var(--color-accent); } .pg-page .pg-stat h3 { margin: 0.75rem 0 0; font-size: 1rem; font-weight: 600; } .pg-stat p { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--color-ink-muted); } .pg-band--ink .pg-stat p { color: var(--color-slate-300); } /* ---------- Split: copy beside a panel ---------- */ .pg-split { display: grid; gap: 3rem; align-items: center; } @media (min-width: 900px) { .pg-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pg-split--top { align-items: start; } /* ---------- Sample chronology ---------- */ /* Same worked example the homepage and /attorneys show, at the size a secondary page can give it. The rows are illustrative, never real records. */ .pg-sample { overflow: hidden; border: 1px solid var(--color-slate-200); border-radius: 0.75rem; background: var(--color-white); box-shadow: 0 20px 25px -5px rgba(22, 41, 77, 0.1); } .pg-sample-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--color-slate-200); background: var(--color-slate-50); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-muted); } .pg-sample-row { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-slate-100); } .pg-sample-row:last-child { border-bottom: 0; } .pg-sample-date { font-size: 0.75rem; font-weight: 600; color: var(--color-ink-faint); } .pg-page .pg-sample-event { margin: 0; font-size: 0.8125rem; font-weight: 600; } .pg-sample-quote { margin: 0.35rem 0 0; font-size: 0.8125rem; line-height: 1.6; color: var(--color-ink-muted); } .pg-sample-cite { display: inline-block; margin-top: 0.5rem; font-size: 0.6875rem; font-weight: 600; color: var(--color-brand); } .pg-sample-row--gap { background: rgba(253, 230, 138, 0.18); } .pg-sample-row--gap .pg-sample-event { color: #92400e; } .pg-sample-note { margin: 1rem 0 0; font-size: 0.75rem; color: var(--color-ink-faint); } .pg-band--ink .pg-sample-note { color: rgba(255, 255, 255, 0.55); } /* ---------- Testimonials ---------- */ .pg-quotes { display: grid; gap: 1.5rem; margin-top: 2.5rem; } @media (min-width: 800px) { .pg-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pg-quote { display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem; margin: 0; padding: 1.75rem; border: 1px solid var(--color-slate-200); border-radius: 0.75rem; background: var(--color-white); } .pg-quote p { margin: 0; font-size: 0.9375rem; line-height: 1.7; color: var(--color-ink); } .pg-quote footer { margin: 0; padding: 0; background: none; color: inherit; text-align: left; font-size: 0.8125rem; line-height: 1.5; color: var(--color-ink-muted); } .pg-quote-name { display: block; font-size: 0.875rem; font-weight: 600; color: var(--color-ink); } /* Headshot beside a name, for cards that attribute a story to a person. The crop is set per image with object-position, since faces sit in different places in each photograph. */ .pg-person { display: flex; align-items: center; gap: 0.875rem; } .pg-person img { flex: 0 0 auto; width: 3.25rem; height: 3.25rem; border-radius: 50%; object-fit: cover; background: var(--color-slate-100); } .pg-page .pg-person h3 { margin: 0; } .pg-card .pg-person + p { margin-top: 1rem; } /* Pull quote, centred, for a band of its own. */ .pg-pullquote { max-width: 56rem; margin: 0 auto; text-align: center; } .pg-pullquote blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2.25rem); font-style: italic; font-weight: 500; line-height: 1.3; letter-spacing: -0.025em; color: var(--color-ink); } .pg-band--ink .pg-pullquote blockquote { color: var(--color-white); } .pg-pullquote .pg-eyebrow { margin-top: 1.5rem; } /* ---------- FAQ ---------- */ /* Plain text, two columns. No accordion: every answer stays visible to readers and to answer engines, which quote these near-verbatim. */ .pg-faq { display: grid; gap: 2.5rem 3rem; margin: 2.5rem 0 0; } @media (min-width: 800px) { .pg-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pg-faq dt { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; line-height: 1.45; color: var(--color-ink); } .pg-faq dd { margin: 0.5rem 0 0; font-size: 0.9375rem; line-height: 1.7; color: var(--color-ink-muted); } .pg-faq a { color: var(--color-brand); } /* ---------- Link lists ---------- */ .pg-columns { display: grid; gap: 3rem; } @media (min-width: 900px) { .pg-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pg-list { display: grid; gap: 1.75rem 3rem; margin: 2rem 0 0; padding: 0; list-style: none; align-items: start; } @media (min-width: 640px) { .pg-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .pg-list--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .pg-list a { font-weight: 600; color: var(--color-ink); text-decoration: none; } .pg-list a:hover { color: var(--color-brand); } .pg-list p { margin: 0.25rem 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--color-ink-muted); } /* Dense directory of links (state index, nearby states). */ .pg-linkgrid { display: grid; gap: 0.5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); } .pg-linkgrid a { display: block; padding: 0.625rem 0.875rem; border: 1px solid var(--color-slate-200); border-radius: 0.5rem; background: var(--color-white); font-size: 0.875rem; font-weight: 500; color: var(--color-ink); text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease; } .pg-linkgrid a:hover { border-color: var(--color-brand); color: var(--color-brand); } /* ---------- Long-form prose ---------- */ .pg-prose { max-width: 48rem; font-size: 1rem; line-height: 1.8; color: var(--color-ink-muted); } .pg-page .pg-prose h2 { margin: 3rem 0 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 1.875rem); line-height: 1.25; letter-spacing: -0.025em; } .pg-page .pg-prose h3 { margin: 2.25rem 0 0; font-size: 1.1875rem; font-weight: 600; line-height: 1.35; } .pg-prose h2:first-child, .pg-prose h3:first-child, .pg-prose p:first-child { margin-top: 0; } .pg-prose p { margin: 1.125rem 0 0; } .pg-prose ul, .pg-prose ol { margin: 1.125rem 0 0; padding-left: 1.25rem; } .pg-prose li { margin-top: 0.5rem; } .pg-prose strong { color: var(--color-ink); } .pg-prose a { color: var(--color-brand); } .pg-prose blockquote { margin: 1.75rem 0 0; padding-left: 1.25rem; border-left: 2px solid var(--color-brand); font-family: var(--font-display); font-style: italic; color: var(--color-ink); } .pg-prose img { max-width: 100%; height: auto; border-radius: 0.75rem; } /* ---------- Table ---------- */ .pg-table-wrap { margin-top: 2.5rem; overflow-x: auto; border: 1px solid var(--color-slate-200); border-radius: 0.75rem; } .pg-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } .pg-table th, .pg-table td { padding: 0.875rem 1.25rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-slate-100); } .pg-table thead th { background: var(--color-slate-50); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-muted); } .pg-table tbody th { font-weight: 600; color: var(--color-ink); } .pg-table td { color: var(--color-ink-muted); } .pg-table tr:last-child th, .pg-table tr:last-child td { border-bottom: 0; } /* ---------- Callout ---------- */ .pg-callout { margin-top: 2.5rem; padding: 1.75rem; border: 1px solid var(--color-slate-200); border-radius: 0.75rem; background: var(--color-white); } /* The one place amber is allowed, and only in the attorney context — it is a callout, not a second brand colour. */ .pg-callout--warn { border-color: #fde68a; background: #fffbeb; } .pg-page .pg-callout h3 { margin: 0; font-size: 1.0625rem; font-weight: 600; } .pg-callout p { margin: 0.625rem 0 0; font-size: 0.9375rem; line-height: 1.7; color: var(--color-ink-muted); } .pg-callout--warn h3 { color: #92400e; } .pg-callout--warn p { color: #92400e; } /* ---------- Closing CTA ---------- */ .pg-cta { padding: 3.5rem 2rem; border-radius: 1rem; text-align: center; color: var(--color-white); } @media (min-width: 640px) { .pg-cta { padding: 4rem; } } .pg-cta--ink { background: var(--color-ink); } .pg-cta--brand { background: var(--color-brand); } .pg-page .pg-cta .pg-h2 { max-width: 40rem; margin: 0 auto; color: var(--color-white); } .pg-cta p { max-width: 36rem; margin: 1rem auto 0; font-size: 0.9375rem; line-height: 1.7; } .pg-cta--ink p { color: var(--color-slate-300); } .pg-cta--brand p { color: var(--color-brand-light); } .pg-cta .pg-eyebrow { color: var(--color-accent); } .pg-cta--brand .pg-eyebrow { color: var(--color-brand-light); } /* ---------- Media ---------- */ .pg-media { overflow: hidden; border-radius: 0.75rem; border: 1px solid var(--color-slate-200); background: var(--color-white); } .pg-media img { display: block; width: 100%; height: auto; } /* Third-party interactive embed. The 41px allowance is the fixed chrome the Arcade player draws below its 16:9 stage. */ .pg-embed { position: relative; width: 100%; height: 0; padding-bottom: calc(57.65% + 41px); margin-top: 2.5rem; overflow: hidden; border: 1px solid var(--color-slate-200); border-radius: 0.75rem; background: var(--color-white); } .pg-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; color-scheme: light; } /* The shared .video-container centres itself with auto margins, which makes it shrink-wrap to nothing as a grid item. */ .pg-split .video-container, .pg-hero-split .video-container { width: 100%; max-width: 100%; } /* ---------- Logos ---------- */ .pg-marks { display: grid; gap: 2rem; margin-top: 2rem; align-items: start; } @media (min-width: 640px) { .pg-marks { grid-template-columns: repeat(2, minmax(0, 25rem)); } } .pg-mark-logo { display: flex; align-items: center; height: 64px; } .pg-mark img { max-height: 64px; max-width: 200px; width: auto; object-fit: contain; } .pg-page .pg-mark h3 { margin: 0.875rem 0 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; } .pg-mark p { margin: 0.5rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--color-ink-muted); } .pg-mark a { color: var(--color-brand); } /* ---------- Status pages ---------- */ /* Payment callbacks and the signup-flow screens open in a popup the app controls, so they get no nav and no footer — a single card, centred in the viewport, that says what happened and stops. */ .pg-status { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1.5rem; background: var(--color-paper); } /* Variant for the status pages that do keep the nav and footer — full-viewport centring there would push the footer a screen below the card. */ .pg-status--framed { min-height: 0; padding: 4rem 1.5rem 5rem; } .pg-status-card { width: 100%; max-width: 30rem; padding: 3rem 2.5rem; border: 1px solid var(--color-slate-200); border-radius: 1rem; background: var(--color-white); box-shadow: 0 10px 15px -3px rgba(22, 41, 77, 0.06); text-align: center; } .pg-status-icon { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; margin-bottom: 1.5rem; border-radius: 50%; background: var(--color-brand-light); color: var(--color-brand-dark); } .pg-status-icon svg { width: 1.75rem; height: 1.75rem; } .pg-status-icon--warn { background: #fdecec; color: #a12d2d; } .pg-status-card h1 { margin: 0 0 0.75rem; font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--color-ink); } .pg-status-card p { margin: 0 0 1rem; font-size: 1rem; line-height: 1.7; color: var(--color-ink-muted); } .pg-status-card p:last-child { margin-bottom: 0; } .pg-status-note { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--color-slate-200); font-size: 0.875rem; color: var(--color-ink-faint); } /* Buttons carry their own colour from .pg-btn--*, which this would otherwise outrank and paint teal-on-teal. */ .pg-status-card a:not(.pg-btn) { color: var(--color-brand); font-weight: 500; } .pg-status-card--wide { max-width: 36rem; } .pg-status-badge { display: inline-block; margin-bottom: 1.25rem; padding: 0.35rem 0.75rem; border-radius: 999px; background: var(--color-brand-light); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-brand-dark); } /* Booking details read back from the Calendly redirect payload. */ .pg-status-details { margin: 1.75rem 0 0; padding: 1.25rem; border: 1px solid var(--color-slate-200); border-radius: 0.75rem; background: var(--color-slate-50); text-align: left; } .pg-status-details h2 { margin: 0 0 0.75rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-faint); } .pg-status-details dl { margin: 0; } .pg-status-details .row { display: grid; grid-template-columns: minmax(5rem, 6rem) 1fr; gap: 0.35rem 0.75rem; align-items: baseline; padding: 0.55rem 0; border-top: 1px solid var(--color-slate-200); font-size: 0.9rem; } .pg-status-details .row:first-of-type { padding-top: 0; border-top: none; } .pg-status-details dt { margin: 0; font-weight: 600; color: var(--color-ink-faint); } .pg-status-details dd { margin: 0; color: var(--color-ink); word-break: break-word; } /* Calendly does not always pass every field through the redirect, so a row can legitimately have nothing to show. */ .pg-status-details .row.is-empty { display: none; } .pg-status-steps { margin: 1.75rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--color-slate-200); list-style: none; text-align: left; } .pg-status-steps li { display: flex; gap: 0.75rem; margin-bottom: 1rem; font-size: 0.9375rem; line-height: 1.6; color: var(--color-ink-muted); } .pg-status-steps li:last-child { margin-bottom: 0; } .pg-status-steps strong { color: var(--color-ink); } .pg-status-steps .step-num { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--color-brand); color: var(--color-white); font-size: 0.75rem; font-weight: 700; } .pg-status-actions { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 2rem; } @media (min-width: 480px) { .pg-status-actions { flex-direction: row; } .pg-status-actions .pg-btn { flex: 1 1 0; } } /* ---------- Footer ---------- */ /* styles.css gives the footer a tight 1rem pad meant for the old centred layout; migrated pages need it to sit on the 72rem column like everything else above it. */ .pg-page footer { padding: 2.5rem 0 0; } .pg-page footer .container { max-width: 72rem; padding: 0 1.5rem 2rem; } @media (max-width: 640px) { .pg-section { padding: 3.5rem 0; } .pg-cta { padding: 2.5rem 1.5rem; } .pg-card, .pg-callout, .pg-quote { padding: 1.5rem; } }