/* =====================================================================
   PAGE KIT - shared building blocks for inner pages (see docs/page-kit.md).
   Loaded after v2.css on every v2 page.
   ===================================================================== */
.js:not(.hero-ready) [data-split] { visibility: hidden; }

/* page hero */
.page-hero { position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--header-h) + 72px) 0 0; background: linear-gradient(135deg, var(--spark-navy-deep) 0%, var(--spark-navy) 55%, var(--spark-teal) 100%); }
.page-hero::after { content: ""; position: absolute; z-index: -1; right: -15%; top: -20%; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; background: radial-gradient(circle, rgba(0, 223, 186, 0.14) 0%, rgba(0, 223, 186, 0) 60%); pointer-events: none; }
.page-hero-inner { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr); gap: 48px; align-items: center; padding-bottom: 80px; }
.crumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; font-size: 14px; font-weight: 600; color: var(--spark-mist); }
.crumbs a { color: var(--spark-mist); text-decoration: none; }
.crumbs a:hover { color: var(--white); }
.crumbs .feather { width: 14px; height: 14px; color: var(--spark-aqua); }
.page-title { font-size: clamp(38px, 4.6vw, 64px); font-weight: 700; line-height: 1.06; letter-spacing: -0.026em; max-width: 18ch; }
.page-title > span { display: block; }
.page-title .accent { color: var(--spark-aqua); }
.page-lead { margin-top: 24px; max-width: 58ch; font-size: clamp(17px, 1.3vw, 20px); color: var(--spark-mist); }
.page-hero .hero-actions { margin-top: 32px; }
.page-hero .chips { margin-top: 32px; }
.hero-icon { justify-self: center; position: relative; display: grid; place-items: center; width: clamp(150px, 15vw, 220px); aspect-ratio: 1; border-radius: 50%; background: var(--spark-navy-deep); border: 3px solid var(--spark-aqua); color: var(--spark-aqua); box-shadow: 0 32px 64px -32px rgba(0, 0, 0, 0.6); }
.hero-icon .feather { width: 38%; height: 38%; stroke-width: 1.6; }
.hero-icon.is-neon { border-color: var(--spark-neon); color: var(--spark-neon); }

/* section colour variants */
.section-deep { background: var(--spark-navy-deep); }
.section-navy { background: var(--spark-navy); }
.section-light { background: var(--spark-frost); color: var(--spark-ink); }
.section-white { background: var(--white); color: var(--spark-ink); }
.section-light .section-head h2, .section-white .section-head h2 { color: var(--spark-navy); }
.section-light .section-head p, .section-white .section-head p { color: var(--spark-ink); }
.section-head.solo { grid-template-columns: 1fr; }
.section-head.solo h2 { max-width: 22ch; }
.section-head.solo p { justify-self: start; }
.section-head + * { margin-top: 56px; }
.section-body { margin-top: 56px; }
.lede { font-size: 19px; color: var(--spark-mist); max-width: 62ch; }
.section-light .lede, .section-white .lede { color: var(--spark-ink); }
.section-light a:not(.btn), .section-white a:not(.btn) { color: var(--spark-teal); }

/* card grid */
.card-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { position: relative; display: flex; flex-direction: column; padding: 30px; border-radius: var(--radius); background: var(--spark-navy); border: 1px solid var(--aqua-15); transition: transform 250ms var(--ease-out), border-color 250ms ease; }
.section-navy .card { background: rgba(2, 44, 56, 0.6); }
.card .tile { color: var(--spark-aqua); }
.card h3 { margin-top: 22px; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--white); }
.card > h3:first-child, .card > .card-tag + h3 { margin-top: 0; }
.card p { margin-top: 10px; font-size: 16px; color: var(--spark-mist); }
.card ul { margin-top: 16px; display: grid; gap: 6px; }
.card li { position: relative; padding-left: 18px; font-size: 15px; }
.card li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--spark-aqua); }
.card .more { margin-top: auto; padding-top: 22px; display: inline-flex; align-items: center; gap: 8px; color: var(--spark-aqua); font-weight: 600; font-size: 15px; text-decoration: none; }
.card .more .feather { transition: transform 200ms var(--ease-out); }
.card a.stretch { color: inherit; text-decoration: none; }
.card a.stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card .btn { margin-top: auto; align-self: flex-start; }
.card ul + .btn, .card p + .btn { margin-top: 24px; }
.card-tag { display: inline-block; align-self: flex-start; margin-bottom: 16px; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--spark-neon); color: var(--spark-navy); font-size: 12px; font-weight: 700; }
.card .big { display: block; margin-top: 18px; font-size: 40px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: var(--white); }
@media (hover: hover) and (pointer: fine) {
    .card:has(a.stretch):hover, .card:has(.more):hover { transform: translateY(-4px); border-color: var(--aqua-30); }
    .card:hover .more .feather { transform: translateX(4px); }
}
.section-light .card, .section-white .card { background: var(--white); border-color: var(--spark-line); color: var(--spark-ink); }
.section-white .card { background: var(--spark-frost); }
.section-light .card h3, .section-white .card h3, .section-light .card .big, .section-white .card .big { color: var(--spark-navy); }
.section-light .card p, .section-white .card p { color: var(--spark-ink); }
.section-light .card .tile, .section-white .card .tile { color: var(--spark-navy); background: var(--spark-pale); }
.section-light .card li::before, .section-white .card li::before { background: var(--spark-teal); }
.section-light .card .more, .section-white .card .more { color: var(--spark-teal); }
.card.is-featured, .section-light .card.is-featured, .section-white .card.is-featured { background: var(--spark-navy); border-color: var(--spark-navy); color: var(--white); }
.section-light .card.is-featured h3, .section-white .card.is-featured h3, .section-light .card.is-featured .big, .section-white .card.is-featured .big { color: var(--white); }
.section-light .card.is-featured p, .section-white .card.is-featured p { color: var(--spark-mist); }
.section-light .card.is-featured .tile, .section-white .card.is-featured .tile { color: var(--spark-aqua); background: var(--aqua-08); }
.section-light .card.is-featured li::before, .section-white .card.is-featured li::before { background: var(--spark-aqua); }
.section-light .card.is-featured .more, .section-white .card.is-featured .more { color: var(--spark-aqua); }

/* split: copy + panel */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.split.flip > :first-child { order: 2; }
.split h2 { font-size: clamp(30px, 3.2vw, 46px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.section-light .split h2, .section-white .split h2 { color: var(--spark-navy); }
.split-copy > p { margin-top: 18px; color: var(--spark-mist); max-width: 56ch; }
.section-light .split-copy > p, .section-white .split-copy > p { color: var(--spark-ink); }
.split-copy > .btn, .split-copy > .hero-actions, .split-copy > .checklist, .split-copy > .tags { margin-top: 28px; }
.panel { padding: 36px; border-radius: 20px; background: rgba(2, 44, 56, 0.6); border: 1px solid var(--aqua-30); }
.section-light .panel, .section-white .panel { background: var(--white); border-color: var(--spark-line); }
.panel h3 { font-size: 20px; font-weight: 600; }
.section-light .panel h3, .section-white .panel h3 { color: var(--spark-navy); }
.panel h3 + * { margin-top: 18px; }
.panel > p { color: var(--spark-mist); }
.section-light .panel > p, .section-white .panel > p { color: var(--spark-ink); }
.panel > * + * { margin-top: 16px; }
.checklist { display: grid; gap: 12px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.5; }
.checklist .feather { width: 20px; height: 20px; margin-top: 2px; color: var(--spark-aqua); }
.section-light .checklist .feather, .section-white .checklist .feather { color: var(--spark-teal); }
.checklist li.no, .checklist li.no .feather { color: var(--spark-slate); }

/* numbered steps (brand p.08: aqua circles, navy numerals) */
.steps { display: grid; grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr)); gap: 28px; counter-reset: step; }
.steps li { position: relative; }
.steps li::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--spark-aqua); color: var(--spark-navy); font-weight: 700; font-size: 18px; position: relative; z-index: 1; }
.steps li::after { content: ""; position: absolute; top: 24px; left: 60px; right: -16px; height: 2px; background: var(--aqua-30); }
.steps li:last-child::after { display: none; }
.steps h3 { margin-top: 20px; font-size: 19px; font-weight: 600; color: var(--white); }
.steps p { margin-top: 8px; font-size: 15px; color: var(--spark-mist); }
.section-light .steps h3, .section-white .steps h3 { color: var(--spark-navy); }
.section-light .steps p, .section-white .steps p { color: var(--spark-ink); }

/* data table (use in light sections) */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--spark-line); background: var(--white); }
.data-table { width: 100%; border-collapse: collapse; font-size: 15px; color: var(--spark-ink); }
.data-table th, .data-table td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--spark-line); }
.data-table thead th { background: var(--spark-navy); color: var(--white); font-weight: 600; white-space: nowrap; }
.data-table thead th.is-hl { background: var(--spark-teal); }
.data-table tbody tr:nth-child(even) { background: var(--spark-frost); }
.data-table tbody th { font-weight: 600; color: var(--spark-navy); }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.data-table .yes { color: var(--spark-teal); font-weight: 600; }
.data-table .no { color: var(--spark-slate); }
.data-table .feather { width: 18px; height: 18px; vertical-align: -3px; }

/* tabs (site.js wires [data-tabs]) */
.tab-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px; border-radius: var(--radius-pill); background: rgba(2, 44, 56, 0.6); border: 1px solid var(--aqua-15); width: fit-content; max-width: 100%; }
.section-light .tab-list, .section-white .tab-list { background: var(--white); border-color: var(--spark-line); }
.tab-list button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--spark-mist); font: 600 15px/1 var(--font); cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
.section-light .tab-list button, .section-white .tab-list button { color: var(--spark-slate); }
.tab-list button[aria-selected="true"] { background: var(--spark-aqua); color: var(--spark-navy); }
.tab-list button .feather { width: 17px; height: 17px; }
.tab-panel { margin-top: 40px; }
.tab-panel[hidden] { display: none; }

/* faq */
.faq { display: grid; gap: 12px; max-width: 900px; }
.faq details { border-radius: var(--radius); background: rgba(2, 44, 56, 0.6); border: 1px solid var(--aqua-15); }
.section-light .faq details, .section-white .faq details { background: var(--white); border-color: var(--spark-line); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 20px 24px; cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--spark-aqua); font-size: 24px; line-height: 1; transition: transform 200ms var(--ease-out); }
.section-light .faq summary::after, .section-white .faq summary::after { color: var(--spark-teal); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 24px 22px; color: var(--spark-mist); }
.section-light .faq details > div, .section-white .faq details > div { color: var(--spark-ink); }

/* call-outs (brand p.08: info / tip / warning) */
.notice { position: relative; max-width: 75ch; padding: 18px 22px 18px 56px; border-radius: var(--radius-sm); border: 1px solid var(--aqua-15); background: var(--aqua-08); color: var(--spark-mist); }
.notice::before { content: ""; position: absolute; left: 22px; top: 21px; width: 20px; height: 20px; background: var(--spark-aqua); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") no-repeat center / contain; }
.notice strong { color: var(--white); }
.notice.tip { border-color: rgba(204, 248, 89, 0.25); background: rgba(204, 248, 89, 0.08); }
.notice.tip::before { background: var(--spark-neon); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E"); }
.notice.warn { border-color: rgba(192, 57, 43, 0.4); background: rgba(192, 57, 43, 0.12); }
.notice.warn::before { background: #E8705F; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E"); }
.section-light .notice, .section-white .notice, .prose .notice { background: var(--spark-pale); border-color: var(--spark-line); color: var(--spark-ink); }
.section-light .notice::before, .section-white .notice::before, .prose .notice::before { background: var(--spark-teal); }
.section-light .notice strong, .section-white .notice strong, .prose .notice strong { color: var(--spark-navy); }
.section-light .notice.tip, .section-white .notice.tip, .prose .notice.tip { background: #F4FADF; border-color: #DCEBA8; }
.section-light .notice.tip::before, .section-white .notice.tip::before, .prose .notice.tip::before { background: #5B7A0F; }
.section-light .notice.warn, .section-white .notice.warn, .prose .notice.warn { background: #FDECEA; border-color: #F3C2BC; }
.section-light .notice.warn::before, .section-white .notice.warn::before, .prose .notice.warn::before { background: #C0392B; }

/* tags */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid var(--aqua-30); color: var(--spark-mist); font-size: 14px; font-weight: 600; }
.section-light .tags li, .section-white .tags li { border-color: var(--spark-line); background: var(--white); color: var(--spark-navy); }

/* prose (legal and long text, on light) */
.prose-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; }
.toc { position: sticky; top: calc(var(--header-h) + 24px); }
.toc p { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--spark-teal); }
.toc ol { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.toc a { color: var(--spark-ink) !important; text-decoration: none; font-size: 15px; }
.toc a:hover { color: var(--spark-teal) !important; text-decoration: underline; }
.prose { max-width: 760px; color: var(--spark-ink); }
.prose h2 { margin: 56px 0 0; font-size: clamp(24px, 2.2vw, 30px); font-weight: 700; color: var(--spark-navy); line-height: 1.2; scroll-margin-top: calc(var(--header-h) + 24px); }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { margin: 28px 0 0; font-size: 19px; font-weight: 600; color: var(--spark-navy); }
.prose p, .prose ul, .prose ol, .prose .notice, .prose .table-wrap { margin-top: 14px; }
.prose ul { padding-left: 0; display: grid; gap: 8px; }
.prose ul li { position: relative; padding-left: 20px; }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: 0.65em; width: 6px; height: 6px; border-radius: 50%; background: var(--spark-teal); }
.prose ol { padding-left: 22px; display: grid; gap: 8px; }
.prose a { color: var(--spark-teal); }
.prose .meta { color: var(--spark-slate); font-size: 15px; }

/* contact form */
.form-card { padding: 36px; border-radius: 20px; background: var(--white); color: var(--spark-ink); }
.form-card h2 { font-size: 26px; font-weight: 700; color: var(--spark-navy); }
.form-card > p { margin-top: 8px; color: var(--spark-slate); font-size: 15px; }
.form-card form { margin-top: 24px; }
.form-card a { color: var(--spark-teal); }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 15px; color: var(--spark-navy); }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 13px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--spark-slate); background: var(--white); color: var(--spark-ink); font: 16px/1.4 var(--font); transition: border-color 150ms ease, box-shadow 150ms ease; }
.form-group textarea { min-height: 150px; resize: vertical; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--spark-teal); box-shadow: 0 0 0 3px rgba(5, 90, 110, 0.35); }
.form-group.has-error input, .form-group.has-error textarea, .form-group.has-error select { border-color: #C0392B; }
.field-error { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: #B42318; font-size: 14px; font-weight: 600; }
.field-error::before { content: "!"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #C0392B; color: var(--white); font-size: 12px; font-weight: 800; flex: none; }
.submit-button { width: 100%; min-height: 54px; border: 0; border-radius: var(--radius-pill); background: var(--spark-navy); color: var(--white); font: 600 17px/1 var(--font); cursor: pointer; transition: background-color 150ms ease, transform 150ms var(--ease-out); }
.submit-button:hover { background: var(--spark-teal); }
.submit-button:active { transform: scale(0.98); }
.submit-button:disabled { opacity: 0.6; cursor: progress; }
#contact-status { margin-top: 14px; font-weight: 600; color: var(--spark-navy); }
.form-note { margin-top: 16px; font-size: 14px; color: var(--spark-slate); }

/* kit responsive */
@media (max-width: 1023px) {
    .page-hero-inner { grid-template-columns: 1fr; padding-bottom: 64px; }
    .hero-icon { display: none; }
    .card-grid, .card-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .split { grid-template-columns: 1fr; gap: 40px; }
    .split.flip > :first-child { order: 0; }
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
    .steps li::after { display: none; }
    .prose-layout { grid-template-columns: 1fr; gap: 32px; }
    .toc { position: static; }
}
@media (max-width: 639px) {
    .page-hero { padding-top: calc(var(--header-h) + 48px); }
    .card-grid, .card-grid.cols-2, .card-grid.cols-4 { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .panel, .form-card { padding: 24px; }
    .tab-list { border-radius: var(--radius); }
    .tab-list button { flex: 1 1 auto; justify-content: center; }
}

/* kit fixes: pills inside cards keep their pill look; whole-card links keep the heading colour on light */
.card ul.tags { display: flex; gap: 8px; margin-top: 16px; }
.card ul.tags li { padding: 5px 12px; }
.card ul.tags li::before { display: none; }
.section-light .card a.stretch, .section-white .card a.stretch { color: inherit; }
.group-label { margin: 48px 0 20px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--spark-aqua); }
.section-light .group-label, .section-white .group-label { color: var(--spark-teal); }
/* testimonial cards: figure.card > blockquote + figcaption */
figure.card blockquote { margin: 22px 0 0; }
figure.card blockquote p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--white); }
figure.card figcaption { margin-top: auto; padding-top: 22px; }
figure.card figcaption p { margin: 0; font-size: 14px; color: var(--spark-mist); }
figure.card figcaption strong { color: var(--spark-aqua); font-weight: 600; }
code { padding: 2px 8px; border-radius: var(--radius-sm); background: rgba(0, 223, 186, 0.12); color: var(--spark-neon); font: 600 0.92em/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; }
.section-light code, .section-white code, .prose code { background: var(--spark-pale); color: var(--spark-navy); }
.card-grid + .notice, .steps + .notice, .case-tiles + .notice, .plan-grid + .notice { margin-top: 32px; }
/* review fixes: numbered steps use only the aqua circles; headings break evenly instead of leaving one word behind */
ol.steps { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, .page-title > span { text-wrap: balance; }
.page-title { max-width: 24ch; }
.section-head h2 { max-width: 20ch; }
@media (max-width: 639px) {
    .cookie-banner { left: 10px; right: 10px; bottom: 10px; }
    .cookie-banner-inner { gap: 12px; padding: 14px 16px; }
    .cookie-banner-text { font-size: 13px; line-height: 1.45; }
    .cookie-btn { min-height: 42px; }
}

/* showcase card: the one build to look at first, full width across its grid */
.card.card-showcase {
    grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px 56px; align-items: center;
    padding: 40px; background: linear-gradient(135deg, var(--spark-teal) 0%, var(--spark-navy) 70%); border-color: rgba(204, 248, 89, 0.45);
}
.card.card-showcase .tile { color: var(--spark-neon); }
.card.card-showcase h3 { font-size: clamp(24px, 2.2vw, 30px); }
.card.card-showcase .showcase-lead { margin-top: 10px; font-size: 18px; font-weight: 600; color: var(--white); }
.card.card-showcase p + p { margin-top: 12px; }
.card.card-showcase .more { color: var(--spark-neon); }
.card.card-showcase ul { margin-top: 0; padding: 24px 28px; border-radius: var(--radius-sm); background: rgba(2, 44, 56, 0.55); border: 1px solid var(--aqua-15); gap: 10px; }
.card.card-showcase li::before { background: var(--spark-neon); }
@media (hover: hover) and (pointer: fine) { .card.card-showcase:hover { border-color: var(--spark-neon); } }
@media (max-width: 899px) {
    .card.card-showcase { grid-template-columns: 1fr; padding: 30px; }
}

/* product screenshots: a hero shot in place of the icon, phone shots on cards, a wide desktop shot */
.page-hero-inner.has-shot { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.hero-shot { width: 100%; max-width: 620px; height: auto; justify-self: center; }
.shot-card .shot { margin: -30px -30px 0; height: 300px; padding-top: 20px; overflow: hidden; display: flex; justify-content: center; border-radius: var(--radius) var(--radius) 0 0; background: var(--spark-pale); }
.shot-card .shot img { width: 230px; height: auto; display: block; }
.shot-note { margin-top: 24px; font-size: 14px; color: var(--spark-slate); }
.desktop-shot, .split-shot { margin: 0; }
.desktop-shot img { display: block; width: 100%; max-width: 1100px; height: auto; margin: 32px auto 0; }
.split-shot img { display: block; width: 100%; height: auto; }
@media (max-width: 1023px) {
    .page-hero-inner.has-shot { grid-template-columns: 1fr; }
    .hero-shot { max-width: 460px; }
}

/* app screenshots shown as screens: rounded, lifted, with a quiet caption */
.hero-shot.is-screen { margin: 0; }
.is-screen img, .label-shot img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); box-shadow: 0 32px 64px -32px rgba(0, 0, 0, 0.55); }
.is-screen figcaption, .desktop-shot figcaption { margin-top: 12px; font-size: 13px; color: var(--spark-mist); text-align: center; }
.section-light .desktop-shot figcaption, .section-white .desktop-shot figcaption, .section-light .is-screen figcaption { color: var(--spark-slate); }
.label-shot { margin: 0; }
.label-shot img { border: 1px solid var(--spark-line); box-shadow: 0 24px 48px -28px rgba(2, 44, 56, 0.35); }
.label-shot figcaption { margin-top: 14px; font-size: 15px; color: var(--spark-slate); }
.shot-card .shot.is-wide { height: auto; padding: 0; background: none; border-bottom: 1px solid var(--spark-line); }
.shot-card .shot.is-wide img { width: 100%; }
.desktop-shot + .card-grid { margin-top: 48px; }
.card-grid + .notice { margin-top: 32px; }
/* a detailed diagram keeps a readable size on phones and scrolls sideways */
@media (max-width: 767px) {
    .is-diagram .diagram-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .is-diagram .diagram-scroll img { width: 780px; max-width: none; }
}