/* * GSCAnalytics brochureware — design system + components. * * Transcribed from the two approved marketing artifacts (overview + multi-property * playbook). Shared by both pages: the base + overview components are the superset; * playbook-only components (.props, .budget, .flow, .notes) and the handful of * layout differences are scoped under `.gsc-narrow` (set on the playbook ). * * Fonts (Inter + Instrument Serif) are provided by partials/font-head.php, which * is appliance-safe (falls back to system fonts); the stacks below degrade cleanly. */ :root { --band: #003d3f; --band-deep: #032e2e; --brand: #0e6b64; --accent: #1bb7a6; --bright: #6fffd2; --bg: #f8fcfb; --panel: #ffffff; --panel-2: #f2f9f8; --ink: #0d2927; --muted: #4a6b69; --muted-2: #6a8a88; --hairline: rgba(14, 107, 100, 0.14); --hairline-strong: rgba(14, 107, 100, 0.26); --btn-text: #063330; --ring: rgba(27, 183, 166, 0.18); --shadow: 0 12px 40px rgba(0, 0, 0, 0.06); --shadow-md: 0 18px 48px rgba(14, 107, 100, 0.12); --good-bg: rgba(14, 107, 100, 0.10); --good-text: #0e6b64; --warn-bg: rgba(176, 108, 0, 0.10); --warn-text: #8a5800; --alert-bg: rgba(205, 32, 38, 0.08); --alert-text: #a03434; --on-band: #eef9f7; --on-band-muted: #9fc4bf; --serif: "Instrument Serif", Georgia, "Times New Roman", serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; --container: 1180px; } @media (prefers-color-scheme: dark) { :root { --band: #032e2c; --band-deep: #02211f; --bg: #04211f; --panel: #072e2b; --panel-2: #06302c; --ink: #e6f4f2; --muted: #9dbcb9; --muted-2: #7fa3a0; --hairline: rgba(111, 255, 210, 0.13); --hairline-strong: rgba(111, 255, 210, 0.26); --shadow: 0 12px 40px rgba(0, 0, 0, 0.35); --shadow-md: 0 18px 48px rgba(0, 0, 0, 0.45); --good-bg: rgba(111, 255, 210, 0.12); --good-text: #6fffd2; --warn-bg: rgba(255, 196, 87, 0.13); --warn-text: #ffc457; --alert-bg: rgba(255, 118, 118, 0.13); --alert-text: #ff9c9c; --on-band: #eef9f7; --on-band-muted: #93b8b3; } } :root[data-theme="dark"] { --band: #032e2c; --band-deep: #02211f; --bg: #04211f; --panel: #072e2b; --panel-2: #06302c; --ink: #e6f4f2; --muted: #9dbcb9; --muted-2: #7fa3a0; --hairline: rgba(111, 255, 210, 0.13); --hairline-strong: rgba(111, 255, 210, 0.26); --shadow: 0 12px 40px rgba(0, 0, 0, 0.35); --shadow-md: 0 18px 48px rgba(0, 0, 0, 0.45); --good-bg: rgba(111, 255, 210, 0.12); --good-text: #6fffd2; --warn-bg: rgba(255, 196, 87, 0.13); --warn-text: #ffc457; --alert-bg: rgba(255, 118, 118, 0.13); --alert-text: #ff9c9c; --on-band: #eef9f7; --on-band-muted: #93b8b3; } :root[data-theme="light"] { --band: #003d3f; --band-deep: #032e2e; --bg: #f8fcfb; --panel: #ffffff; --panel-2: #f2f9f8; --ink: #0d2927; --muted: #4a6b69; --muted-2: #6a8a88; --hairline: rgba(14, 107, 100, 0.14); --hairline-strong: rgba(14, 107, 100, 0.26); --shadow: 0 12px 40px rgba(0, 0, 0, 0.06); --shadow-md: 0 18px 48px rgba(14, 107, 100, 0.12); --good-bg: rgba(14, 107, 100, 0.10); --good-text: #0e6b64; --warn-bg: rgba(176, 108, 0, 0.10); --warn-text: #8a5800; --alert-bg: rgba(205, 32, 38, 0.08); --alert-text: #a03434; --on-band: #eef9f7; --on-band-muted: #9fc4bf; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; } a { color: var(--brand); } :root[data-theme="dark"] a { color: var(--accent); } @media (prefers-color-scheme: dark) { a { color: var(--accent); } } :root[data-theme="light"] a { color: var(--brand); } h1, h2, h3 { text-wrap: balance; margin: 0; } section { padding: 88px 0; } section + section { border-top: 1px solid var(--hairline); } .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; } .h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4vw, 44px); line-height: 1.12; letter-spacing: -0.01em; max-width: 20ch; } .h2 em { font-style: italic; color: var(--brand); } :root[data-theme="dark"] .h2 em { color: var(--bright); } @media (prefers-color-scheme: dark) { .h2 em { color: var(--bright); } } :root[data-theme="light"] .h2 em { color: var(--brand); } .lede { color: var(--muted); max-width: 62ch; font-size: 18px; margin: 18px 0 0; } .num { font-family: var(--mono); font-variant-numeric: tabular-nums; } /* ── Nav ── */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hairline); } .nav-inner { display: flex; align-items: center; gap: 28px; height: 64px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); } .brand svg { display: block; } .brand-name { font-size: 17px; letter-spacing: -0.02em; } .brand-name b { font-weight: 650; } .brand-name span { font-weight: 400; color: var(--muted); } .nav-links { display: flex; gap: 22px; margin-left: auto; } .nav-links a { color: var(--muted); text-decoration: none; font-size: 14.5px; } .nav-links a:hover { color: var(--ink); } @media (max-width: 900px) { .nav-links { display: none; } } .nav .btn { margin-left: auto; } @media (min-width: 901px) { .nav .btn { margin-left: 0; } } .back { margin-left: auto; font-size: 14.5px; text-decoration: none; color: var(--muted); } .back:hover { color: var(--ink); } /* ── Buttons ── */ .btn { display: inline-block; text-decoration: none; font-weight: 600; font-size: 15.5px; padding: 12px 24px; border-radius: 999px; border: 1px solid transparent; transition: transform 0.15s ease, box-shadow 0.15s ease; } .btn:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .btn-primary { background: linear-gradient(100deg, var(--accent), var(--bright)); color: var(--btn-text); box-shadow: 0 6px 20px var(--ring); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px var(--ring); } .btn-ghost { border-color: var(--hairline-strong); color: var(--ink); } .btn-ghost:hover { border-color: var(--accent); } .band .btn-ghost { color: var(--on-band); border-color: rgba(238, 249, 247, 0.35); } .band .btn-ghost:hover { border-color: var(--bright); } .btn-sm { padding: 8px 18px; font-size: 14px; } /* ── Hero band ── */ .band { background: var(--band); color: var(--on-band); } .hero { background: radial-gradient(900px 420px at 78% -10%, rgba(27, 183, 166, 0.28), transparent 65%), radial-gradient(700px 380px at -10% 110%, rgba(14, 107, 100, 0.5), transparent 60%), var(--band); padding: 84px 0 96px; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; align-items: center; } @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } } .hero .eyebrow { color: var(--bright); } .h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 5.4vw, 62px); line-height: 1.06; letter-spacing: -0.015em; } .h1 .flip { display: block; font-style: italic; color: var(--bright); } .h1 em { font-style: italic; color: var(--bright); } .hero-sub { color: var(--on-band-muted); font-size: 18.5px; max-width: 54ch; margin: 22px 0 30px; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .hero-note { margin-top: 22px; font-family: var(--mono); font-size: 13.5px; color: var(--on-band-muted); } .hero-note code { background: rgba(2, 33, 31, 0.6); border: 1px solid rgba(111, 255, 210, 0.2); border-radius: 8px; padding: 5px 10px; color: var(--bright); margin-right: 10px; } /* ── Export stream card ── */ .stream { background: var(--band-deep); border: 1px solid rgba(111, 255, 210, 0.16); border-radius: 16px; box-shadow: var(--shadow-md); overflow: hidden; font-family: var(--mono); font-size: 12.5px; } .stream-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid rgba(111, 255, 210, 0.14); color: var(--on-band-muted); } .stream-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bright); animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 50% { opacity: 0.3; } } .stream-pill { margin-left: auto; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bright); border: 1px solid rgba(111, 255, 210, 0.35); border-radius: 999px; padding: 2px 10px; } .stream-window { height: 218px; overflow: hidden; position: relative; } .stream-window::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--band-deep), transparent 22%, transparent 72%, var(--band-deep)); pointer-events: none; } .stream table { width: 100%; border-collapse: collapse; } .stream td { padding: 6px 16px; white-space: nowrap; color: rgba(238, 249, 247, 0.82); border-top: 1px solid rgba(111, 255, 210, 0.07); font-variant-numeric: tabular-nums; } .stream td.q { max-width: 240px; overflow: hidden; text-overflow: ellipsis; } .stream td.n { text-align: right; color: var(--on-band-muted); } .stream tbody { animation: scrollrows 26s linear infinite; display: block; } .stream tbody tr { display: table; width: 100%; table-layout: fixed; } @keyframes scrollrows { to { transform: translateY(-50%); } } .stream-count { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 16px; border-top: 1px solid rgba(111, 255, 210, 0.14); } .stream-count .big { font-size: 30px; color: #ffffff; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } .stream-count .label { color: var(--on-band-muted); font-size: 12px; } .cap { margin-left: auto; font-size: 12px; color: var(--on-band-muted); transition: opacity 0.4s; } .cap b { color: #ffc457; font-weight: 500; } .cap.passed b { color: var(--bright); text-decoration: line-through; text-decoration-thickness: 1.5px; } .cap.passed::after { content: " passed ✓"; color: var(--bright); } @media (prefers-reduced-motion: reduce) { .stream tbody, .stream-head .dot { animation: none; } html { scroll-behavior: auto; } } /* ── Walls strip ── */ .walls { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden; background: var(--panel); box-shadow: var(--shadow); margin-top: 48px; } @media (max-width: 980px) { .walls { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .walls { grid-template-columns: 1fr; } } .wall { padding: 28px 26px; border-left: 1px solid var(--hairline); border-top: 1px solid var(--hairline); margin: -1px 0 0 -1px; } .wall .figure { font-family: var(--mono); font-size: 30px; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .wall .what { font-size: 14px; color: var(--muted-2); margin: 6px 0 14px; min-height: 3em; } .wall .fix { font-size: 14.5px; color: var(--ink); border-top: 1px dashed var(--hairline-strong); padding-top: 12px; } .wall .fix::before { content: "→ "; color: var(--accent); font-weight: 700; } /* ── Tool breakout ── */ .tool-breakout { padding: 72px 0 0; } .tool-breakout-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 40px; } @media (max-width: 900px) { .tool-breakout-grid { grid-template-columns: 1fr; } } .tool-breakout-card { background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--hairline); border-radius: 18px; padding: 30px; box-shadow: var(--shadow); } .tool-breakout-card__eyebrow { margin: 0 0 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } .tool-breakout-card h3 { font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; } .tool-breakout-card p { margin: 14px 0 0; color: var(--muted); } .tool-breakout-card .btn { margin-top: 24px; } .tool-breakout-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; } .tool-breakout-list li { position: relative; padding-left: 22px; color: var(--ink); font-size: 15px; } .tool-breakout-list li::before { content: "•"; position: absolute; left: 0; top: 0; color: var(--accent); font-size: 18px; line-height: 1; } /* ── Feature split ── */ .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; margin-top: 40px; } @media (max-width: 980px) { .split { grid-template-columns: 1fr; } } .feature-list { display: grid; gap: 4px; margin-top: 8px; } .feature { padding: 18px 0; border-top: 1px solid var(--hairline); } .feature:last-child { border-bottom: 1px solid var(--hairline); } .feature h3 { font-size: 16.5px; font-weight: 650; margin-bottom: 4px; } .feature p { margin: 0; color: var(--muted); font-size: 15.5px; } .feature .k { font-family: var(--mono); color: var(--brand); font-size: 14px; } :root[data-theme="dark"] .feature .k { color: var(--accent); } @media (prefers-color-scheme: dark) { .feature .k { color: var(--accent); } } :root[data-theme="light"] .feature .k { color: var(--brand); } /* ── Coverage card ── */ .card { background: var(--panel); border: 1px solid var(--hairline); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; } .card-head { padding: 13px 18px; border-bottom: 1px solid var(--hairline); font-family: var(--mono); font-size: 12.5px; color: var(--muted-2); display: flex; align-items: center; gap: 8px; } .cov { width: 100%; border-collapse: collapse; font-size: 13.5px; } .cov th { text-align: left; font-family: var(--mono); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-2); padding: 10px 18px; border-bottom: 1px solid var(--hairline); } .cov td { padding: 11px 18px; border-bottom: 1px solid var(--hairline); } .cov tr:last-child td { border-bottom: none; } .cov .u { font-family: var(--mono); font-size: 12.5px; color: var(--ink); white-space: nowrap; } .cov .t { font-family: var(--mono); font-size: 12px; color: var(--muted-2); white-space: nowrap; } .pill { display: inline-block; font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 3px 10px; white-space: nowrap; } .pill-good { background: var(--good-bg); color: var(--good-text); } .pill-warn { background: var(--warn-bg); color: var(--warn-text); } .pill-alert { background: var(--alert-bg); color: var(--alert-text); } .row-alert td { background: var(--alert-bg); } .row-alert .u { color: var(--alert-text); } /* ── Fan-out diagram ── */ .fanout { padding: 26px; display: grid; gap: 10px; font-family: var(--mono); font-size: 13px; } .fanout .src { display: flex; align-items: center; gap: 10px; color: var(--muted); flex-wrap: wrap; } .fanout .src code { background: var(--panel-2); border: 1px solid var(--hairline); border-radius: 8px; padding: 4px 10px; color: var(--ink); } .fanout .src .hid { color: var(--muted-2); font-size: 12px; margin-left: auto; } .fanout .union { margin-top: 8px; border-top: 1px dashed var(--hairline-strong); padding-top: 14px; color: var(--good-text); font-weight: 600; } /* ── Toolkit grid ── */ .grid8 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; } @media (max-width: 1060px) { .grid8 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .grid8 { grid-template-columns: 1fr; } } .tool { background: var(--panel); border: 1px solid var(--hairline); border-radius: 14px; padding: 22px; box-shadow: var(--shadow); } .tool h3 { font-size: 16px; font-weight: 650; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .tool p { margin: 0; font-size: 14px; color: var(--muted); } .pro { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; font-weight: 600; color: var(--btn-text); background: linear-gradient(100deg, var(--accent), var(--bright)); border-radius: 4px; padding: 2px 6px; } /* ── Steps ── */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; counter-reset: step; } @media (max-width: 900px) { .steps { grid-template-columns: 1fr; } } .step { background: var(--panel); border: 1px solid var(--hairline); border-radius: 14px; padding: 26px; box-shadow: var(--shadow); counter-increment: step; } .step::before { content: "0" counter(step); font-family: var(--mono); font-size: 13px; color: var(--accent); letter-spacing: 0.1em; } .step h3 { font-size: 17px; margin: 10px 0 8px; } .step p { margin: 0; color: var(--muted); font-size: 15px; } .step code { font-family: var(--mono); font-size: 13px; background: var(--panel-2); border: 1px solid var(--hairline); border-radius: 6px; padding: 2px 8px; } .trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 28px; border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; background: var(--panel-2); } @media (max-width: 900px) { .trust { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .trust { grid-template-columns: 1fr; } } .trust div { padding: 20px 22px; border-left: 1px solid var(--hairline); border-top: 1px solid var(--hairline); margin: -1px 0 0 -1px; font-size: 14px; color: var(--muted); } .trust b { display: block; color: var(--ink); font-size: 14.5px; margin-bottom: 4px; } /* ── Pricing ── */ .plans { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; max-width: 880px; } @media (max-width: 800px) { .plans { grid-template-columns: 1fr; } } .plan { background: var(--panel); border: 1px solid var(--hairline); border-radius: 18px; padding: 32px; box-shadow: var(--shadow); display: flex; flex-direction: column; } .plan-pro { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring), var(--shadow-md); } .plan h3 { font-family: var(--serif); font-size: 28px; font-weight: 400; } .plan .price { font-family: var(--mono); font-size: 15px; color: var(--muted); margin: 6px 0 18px; } .plan .price b { color: var(--ink); font-size: 22px; font-weight: 600; } .plan ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 9px; font-size: 15px; } .plan li { padding-left: 24px; position: relative; color: var(--muted); } .plan li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; } .plan li b { color: var(--ink); font-weight: 600; } .plan .btn { margin-top: auto; text-align: center; } .plans-note { max-width: 880px; margin-top: 18px; font-size: 14px; color: var(--muted-2); } /* ── FAQ ── */ .faq { max-width: 780px; margin-top: 36px; } .faq details { border-top: 1px solid var(--hairline); } .faq details:last-child { border-bottom: 1px solid var(--hairline); } .faq summary { cursor: pointer; padding: 18px 0; font-weight: 600; font-size: 16.5px; list-style: none; display: flex; align-items: center; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; margin-left: auto; font-family: var(--mono); color: var(--accent); font-size: 20px; } .faq details[open] summary::after { content: "–"; } .faq details p { margin: 0 0 20px; color: var(--muted); max-width: 65ch; } /* ── Final CTA ── */ .cta-band { padding: 84px 0; text-align: left; } .cta-band .h2 { color: var(--on-band); max-width: none; } .cta-band .h2 em { color: var(--bright); } .cta-band p { color: var(--on-band-muted); font-size: 17.5px; max-width: 56ch; margin: 16px 0 28px; } .cta-row { display: flex; flex-wrap: wrap; gap: 14px; } /* ── Footer ── */ footer { border-top: 1px solid var(--hairline); padding: 40px 0 56px; font-size: 14px; color: var(--muted-2); } .foot { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; } .foot-links { display: flex; gap: 20px; margin-left: auto; } .foot-links a { color: var(--muted); text-decoration: none; } .foot-links a:hover { color: var(--ink); } .foot-legal { margin-top: 18px; font-size: 12.5px; color: var(--muted-2); max-width: 75ch; } /* ── Reveal ── */ .reveal { opacity: 0; transform: translateY(10px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ── Tool detail pages ── */ .tool-hero { background: radial-gradient(860px 420px at 85% -10%, rgba(27, 183, 166, 0.24), transparent 64%), radial-gradient(560px 260px at 10% 115%, rgba(14, 107, 100, 0.34), transparent 68%), var(--band); padding: 76px 0 84px; } .tool-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr); gap: 40px; align-items: start; } @media (max-width: 980px) { .tool-hero-grid { grid-template-columns: 1fr; } } .tool-hero .eyebrow { color: var(--bright); } .tool-hero-sub { color: var(--on-band-muted); font-size: 18.5px; max-width: 58ch; margin: 22px 0 30px; } .tool-proof { background: rgba(2, 33, 31, 0.7); border: 1px solid rgba(111, 255, 210, 0.18); border-radius: 18px; box-shadow: var(--shadow-md); overflow: hidden; } .tool-proof__head { padding: 13px 18px; border-bottom: 1px solid rgba(111, 255, 210, 0.16); font-family: var(--mono); font-size: 12.5px; color: var(--on-band-muted); } .tool-proof__body { padding: 22px 22px 24px; color: var(--on-band); } .tool-proof__body h3 { font-size: 17px; margin-bottom: 8px; } .tool-proof__body p { margin: 0; color: var(--on-band-muted); font-size: 14.5px; } .tool-proof-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; } .tool-proof-list li { border-top: 1px solid rgba(111, 255, 210, 0.14); padding-top: 12px; font-size: 14px; } .tool-proof-list strong { display: block; color: var(--on-band); font-size: 13px; margin-bottom: 4px; } .tool-bullets { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; } @media (max-width: 720px) { .tool-bullets { grid-template-columns: 1fr; } } .tool-bullets li { background: var(--panel); border: 1px solid var(--hairline); border-radius: 14px; padding: 18px 20px 18px 46px; position: relative; box-shadow: var(--shadow); } .tool-bullets li::before { content: "✓"; position: absolute; left: 18px; top: 18px; color: var(--accent); font-weight: 700; } .tool-bullets strong { display: block; font-size: 15px; margin-bottom: 4px; } .tool-bullets span { color: var(--muted); font-size: 14.5px; } .detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 40px; } @media (max-width: 980px) { .detail-grid { grid-template-columns: 1fr; } } .detail-card { background: var(--panel); border: 1px solid var(--hairline); border-radius: 16px; padding: 24px; box-shadow: var(--shadow); } .detail-card h3 { font-size: 18px; margin-bottom: 8px; } .detail-card p { margin: 0; color: var(--muted); font-size: 15px; } .tool-link-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; } /* ════════════════════════════════════════════════════════════════════════ * Multi-property playbook — extra components + narrow-layout overrides. * Scoped under .gsc-narrow (set on the playbook ). * ════════════════════════════════════════════════════════════════════════ */ .gsc-narrow { --container: 1080px; } .gsc-narrow section { padding: 72px 0; } .gsc-narrow .h2 { font-size: clamp(28px, 3.6vw, 40px); max-width: 22ch; } .gsc-narrow .lede { font-size: 17.5px; margin-top: 16px; } .gsc-narrow .hero { background: radial-gradient(800px 380px at 82% -10%, rgba(27, 183, 166, 0.26), transparent 65%), var(--band); padding: 72px 0 80px; } .gsc-narrow .h1 { max-width: 18ch; } .gsc-narrow .hero-sub { max-width: 58ch; font-size: 18px; margin: 20px 0 0; } .gsc-narrow .split { gap: 48px; margin-top: 36px; } @media (max-width: 940px) { .gsc-narrow .split { grid-template-columns: 1fr; } } /* One site, many verified views */ .props { padding: 10px 0; } .prop { display: flex; align-items: baseline; gap: 14px; padding: 12px 18px; border-top: 1px solid var(--hairline); font-size: 14.5px; } .prop:first-child { border-top: none; } .prop code { font-family: var(--mono); font-size: 13px; background: var(--panel-2); border: 1px solid var(--hairline); border-radius: 8px; padding: 4px 10px; white-space: nowrap; } .prop .covers { color: var(--muted-2); font-size: 13.5px; } /* Inspection budget table */ table.budget { width: 100%; border-collapse: collapse; font-size: 14px; } .budget th { text-align: left; font-family: var(--mono); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-2); padding: 10px 18px; border-bottom: 1px solid var(--hairline); } .budget td { padding: 11px 18px; border-bottom: 1px solid var(--hairline); } .budget td:last-child, .budget th:last-child { text-align: right; } .budget .u { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; } .budget .n { font-family: var(--mono); font-variant-numeric: tabular-nums; } .budget tfoot td { border-bottom: none; font-weight: 650; background: var(--panel-2); } .budget tfoot .n { color: var(--good-text); } /* Overflow flow */ .flow { padding: 22px; display: grid; gap: 12px; font-family: var(--mono); font-size: 13px; } .flow-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); } .flow-row code { background: var(--panel-2); border: 1px solid var(--hairline); border-radius: 8px; padding: 4px 10px; color: var(--ink); font-size: 12.5px; } .flow-row .arr { color: var(--accent); font-weight: 700; } .flow-row .why { color: var(--muted-2); font-size: 12px; } .flow-note { border-top: 1px dashed var(--hairline-strong); padding-top: 12px; color: var(--muted-2); font-size: 12.5px; } /* Honest small print */ .notes { margin-top: 36px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--panel-2); padding: 24px 26px; } .notes h3 { font-size: 15px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-2); font-weight: 500; margin-bottom: 12px; } .notes ul { margin: 0; padding-left: 20px; color: var(--muted); font-size: 15px; display: grid; gap: 8px; }