/* Free SEO audit: /get-verdikt and /get-verdikt/report. Sized on the 1920px Figma frames (page "V1 · SEO audit"). */
:root { --wine: #35001c; --plum: #2a0013; --pink-1: #ffd0e4; --pink-2: #e9d6df; --muted: #a68b98; --paper: #fafaf8; }

/* ---------- hero (both pages) ---------- */
.audit-hero { position: relative; min-height: calc(900 * var(--px)); color: #fff; overflow: hidden; isolation: isolate; }
.audit-hero_crumbs { position: absolute; left: calc(40 * var(--px)); top: calc(177 * var(--px)); margin: 0; z-index: 2; }
.audit-hero_title { position: absolute; left: calc(40 * var(--px)); bottom: calc(269 * var(--px)); margin: 0; font-family: var(--font-body); font-weight: 400; font-size: calc(76 * var(--px)); line-height: 1.09; letter-spacing: -0.01em; z-index: 2; }
.audit-hero_lead { position: absolute; right: calc(40 * var(--px)); bottom: calc(284 * var(--px)); width: calc(380 * var(--px)); margin: 0; font-size: calc(18 * var(--px)); line-height: 1.45; z-index: 2; }
.audit-hero_facts { position: absolute; left: calc(40 * var(--px)); bottom: calc(142 * var(--px)); margin: 0; font-size: calc(12 * var(--px)); color: var(--pink-1); z-index: 2; }
.audit-hero_facts span, .audit-vs_tag span, .report-cta_label span { margin: 0 .7em; }
.audit-owner { margin-left: 1.2em; padding: .15em .5em; border: 1px solid currentColor; color: var(--pink-1); }

/* Live wall: the latest audits as tiny blocks, under the paragraph on the right */
.audit-live { position: absolute; right: calc(40 * var(--px)); bottom: calc(160 * var(--px)); width: calc(380 * var(--px)); z-index: 2; display: flex; flex-direction: column; gap: calc(10 * var(--px)); }
.audit-live[hidden] { display: none; }
.audit-live_wall { display: grid; grid-template-columns: repeat(38, 1fr); gap: calc(2 * var(--px)); }
.audit-live_wall i { aspect-ratio: 1; box-sizing: border-box; border: 1px dashed rgba(255, 255, 255, .22); }
.audit-live_wall i.is-poor { border: 0; background-color: rgba(255, 77, 160, .8); }
.audit-live_wall i.is-needs-work { border: 0; background-color: rgba(255, 255, 255, .28); }
.audit-live_wall i.is-good { border: 0; background-color: rgba(255, 255, 255, .85); }
.audit-live_wall i.is-new { background-color: var(--hot); outline: 1px solid var(--hot); outline-offset: 1px; }
.audit-live_label { margin: 0; font-size: calc(11 * var(--px)); color: var(--pink-1); }

/* URL bar */
.audit-bar { position: absolute; left: calc(40 * var(--px)); right: calc(40 * var(--px)); bottom: calc(32 * var(--px)); height: calc(88 * var(--px)); margin: 0; display: flex; align-items: center; gap: calc(24 * var(--px)); padding: 0 calc(16 * var(--px)) 0 calc(24 * var(--px)); background-color: var(--plum); z-index: 3; }
.audit-bar_field { flex: 1; display: flex; flex-direction: column; gap: calc(8 * var(--px)); margin: 0; font-weight: 400; cursor: text; min-width: 0; }
.audit-bar_label { font-size: calc(12 * var(--px)); color: var(--hot); }
.audit-bar_input { width: 100%; height: auto; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; font-family: var(--font-body); font-size: calc(18 * var(--px)); line-height: 1.3; outline: none; }
.audit-bar_input::placeholder { color: rgba(255, 255, 255, .55); }
.audit-bar:focus-within { box-shadow: inset 0 0 0 1px rgba(255, 77, 160, .55); }
.audit-bar_btn { width: calc(264 * var(--px)); height: calc(56 * var(--px)); padding: 0 calc(22 * var(--px)); font-size: calc(18 * var(--px)); border: 0; transition: opacity .35s ease, background-color .35s ease; }
.audit-hero[data-audit="landing"] .audit-bar_btn:not(.is-ready) { opacity: .45; }
.audit-bar_btn[aria-busy="true"] { opacity: 1; cursor: progress; }
.audit-bar_turnstile { position: absolute; right: 0; top: calc(100% + 8px); }
.audit-bar_error { position: absolute; left: calc(40 * var(--px)); bottom: calc(126 * var(--px)); margin: 0; padding: calc(8 * var(--px)) calc(12 * var(--px)); background-color: var(--plum); border-left: 2px solid var(--hot); font-size: calc(15 * var(--px)); line-height: 1.4; max-width: calc(820 * var(--px)); z-index: 4; }
.audit-bar_error a { color: var(--pink-1); }

/* Block assembly: 12 dashed slots, and pieces that fly into them as the address is typed */
.audit-build { position: absolute; left: calc(700 * var(--px)); top: calc(150 * var(--px)); width: calc(760 * var(--px)); z-index: 1; pointer-events: none; }
.audit-build_stage { position: relative; aspect-ratio: 760 / 540; }
.audit-build_slot, .audit-build_piece { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); box-sizing: border-box; }
.audit-build_slot { border: 1px dashed rgba(255, 255, 255, .22); }
.audit-build_piece { background-color: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .28); opacity: 0; will-change: transform, opacity; transition: background-color .4s ease, border-color .4s ease; }
.audit-build_piece.is-button { background-color: var(--primary); border-color: rgba(255, 255, 255, .28); }
.audit-build_piece.is-last.is-done { background-color: rgba(173, 0, 82, .9); border: 2px solid var(--hot); }
.audit-build.is-running .audit-build_piece { animation: audit-scan 1.1s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes audit-scan { 50% { background-color: rgba(255, 77, 160, .35); border-color: var(--hot); } }
.audit-build_label { margin: calc(16 * var(--px)) 0 0; font-size: calc(12 * var(--px)); color: var(--pink-1); transition: color .3s ease; }
.audit-build.is-done .audit-build_label { color: var(--hot); }

/* ---------- sections ---------- */
.audit-sec { padding: calc(120 * var(--px)) calc(40 * var(--px)) calc(140 * var(--px)); display: flex; flex-direction: column; gap: calc(96 * var(--px)); }
.audit-sec.is-dark { background-color: var(--ink); color: #fff; }
.audit-sec.is-light { background-color: #fff; color: #0a0a0a; }
.audit-sec .blog-label p:last-child { color: inherit; }
.audit-sec_head { display: grid; grid-template-columns: calc(602 * var(--px)) 1fr; align-items: start; }
.audit-sec_intro { display: flex; flex-direction: column; gap: calc(28 * var(--px)); }
.audit-sec_title { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: calc(64 * var(--px)); line-height: 1.1; letter-spacing: -0.01em; }
.audit-sec_title.is-wine { color: var(--wine); }
.audit-sec_lead { margin: 0; max-width: calc(640 * var(--px)); font-size: calc(22 * var(--px)); line-height: 1.45; color: var(--muted); }
.audit-sec_lead.is-grey { color: #5c5c5c; }
.audit-sec_statement { margin: 0; max-width: calc(1100 * var(--px)); font-size: calc(44 * var(--px)); line-height: 1.2; letter-spacing: -0.01em; }
.audit-sec_note { margin: calc(-40 * var(--px)) 0 0; font-size: calc(13 * var(--px)); color: var(--muted); }
.audit-chip { display: inline-flex; align-self: flex-start; padding: calc(5 * var(--px)) calc(8 * var(--px)); background-color: var(--primary); color: #fff; font-size: calc(12 * var(--px)); line-height: 1.2; }

/* What it checks */
.audit-groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(24 * var(--px)); }
.audit-group { border: 1px solid rgba(255, 255, 255, .12); }
.audit-group_head { display: flex; flex-direction: column; gap: calc(14 * var(--px)); padding: calc(28 * var(--px)); }
.audit-group_name { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: calc(30 * var(--px)); line-height: 1.2; }
.audit-group_q { margin: 0; font-size: calc(16 * var(--px)); color: var(--muted); }
.audit-group_list { list-style: none; margin: 0; padding: 0; }
.audit-group_list li { display: flex; gap: calc(14 * var(--px)); padding: calc(18 * var(--px)) calc(28 * var(--px)); border-top: 1px solid rgba(255, 255, 255, .08); font-size: calc(17 * var(--px)); line-height: 1.4; color: var(--pink-2); }
.audit-group_tick { color: var(--hot); font-size: calc(14 * var(--px)); line-height: 1.7; }

/* How it works */
.audit-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.audit-step { display: flex; flex-direction: column; gap: calc(16 * var(--px)); padding: calc(28 * var(--px)) calc(40 * var(--px)) 0 0; border-top: 1px solid rgba(10, 10, 10, .15); }
.audit-step_num { color: var(--primary); font-size: calc(13 * var(--px)); }
.audit-step_title { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: calc(24 * var(--px)); line-height: 1.25; }
.audit-step_text { margin: 0; font-size: calc(17 * var(--px)); line-height: 1.45; color: #5c5c5c; }
.audit-vs { display: grid; grid-template-columns: 1fr 1fr; gap: calc(24 * var(--px)); }
.audit-vs_card { display: flex; flex-direction: column; align-items: flex-start; gap: calc(20 * var(--px)); padding: calc(36 * var(--px)); background-color: var(--paper); border: 1px solid rgba(10, 10, 10, .12); }
.audit-vs_card.is-verdict { background-color: var(--primary); border-color: var(--primary); color: #fff; }
.audit-vs_tag { margin: 0; font-size: calc(12 * var(--px)); color: #8a8a8a; }
.audit-vs_card.is-verdict .audit-vs_tag { color: var(--pink-1); }
.audit-vs_title { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: calc(40 * var(--px)); line-height: 1.15; }
.audit-vs_list { list-style: none; margin: 0 0 calc(8 * var(--px)); padding: 0; display: flex; flex-direction: column; gap: calc(12 * var(--px)); }
.audit-vs_list li { position: relative; padding-left: calc(28 * var(--px)); font-size: calc(18 * var(--px)); line-height: 1.4; }
.audit-vs_list li::before { content: "→"; position: absolute; left: 0; font-family: var(--font-mono); font-size: calc(14 * var(--px)); line-height: 1.8; color: var(--primary); }
.audit-vs_card.is-verdict .audit-vs_list li::before { color: var(--pink-1); }
.audit-vs_btn { column-gap: calc(80 * var(--px)); font-size: calc(18 * var(--px)); padding: calc(16 * var(--px)) calc(18 * var(--px)) calc(16 * var(--px)) calc(22 * var(--px)); width: auto; }
.audit-vs_btn.is-light { width: auto; }

/* FAQ */
.audit-faq { display: grid; grid-template-columns: calc(600 * var(--px)) 1fr; column-gap: calc(670 * var(--px)); padding-top: calc(40 * var(--px)); background-image: linear-gradient(#e7b3c9, #e7b3c9), linear-gradient(#e7b3c9, #e7b3c9); background-size: 1px 100%, 1px 100%; background-position: calc(640 * var(--px)) 0, calc(1280 * var(--px)) 0; background-repeat: no-repeat; }
.audit-faq_left { display: flex; flex-direction: column; gap: calc(140 * var(--px)); }
.audit-faq_title { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: calc(96 * var(--px)); line-height: 1.02; letter-spacing: -0.02em; color: var(--wine); }
.audit-faq_card { display: flex; flex-direction: column; gap: calc(12 * var(--px)); max-width: calc(560 * var(--px)); padding: calc(24 * var(--px)); background-color: var(--primary); color: #fff; }
.audit-faq_card-label { margin: 0; font-size: calc(12 * var(--px)); color: var(--pink-1); }
.audit-faq_card-label.is-white { margin-top: calc(28 * var(--px)); color: #fff; font-size: calc(13 * var(--px)); }
.audit-faq_card-q { margin: 0; font-size: calc(26 * var(--px)); line-height: 1.2; }
.audit-faq_card-a { margin: 0; font-size: calc(16 * var(--px)); line-height: 1.45; color: #ffe3ef; }
.audit-faq_list { align-self: start; margin-top: calc(210 * var(--px)); }
.audit-faq_item { border-top: 1px solid var(--rose); }
.audit-faq_item:last-child { border-bottom: 1px solid var(--rose); }
.audit-faq_q { display: grid; grid-template-columns: 1fr auto; gap: calc(8 * var(--px)) calc(24 * var(--px)); padding: calc(18 * var(--px)) 0 calc(28 * var(--px)); cursor: pointer; list-style: none; }
.audit-faq_q::-webkit-details-marker { display: none; }
.audit-faq_num { grid-column: 1; font-size: calc(12 * var(--px)); color: #8a8a8a; }
.audit-faq_text { grid-column: 1; font-size: calc(22 * var(--px)); line-height: 1.3; }
.audit-faq_q .note_faq-icon { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.audit-faq_item[open] .note_faq-icon::after { transform: rotate(0deg); }
.audit-faq_a { margin: 0; padding-bottom: calc(28 * var(--px)); font-size: calc(18 * var(--px)); line-height: 1.55; color: rgba(10, 10, 10, .75); }
.audit-faq_q:focus-visible, .passed_head:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; }

/* ---------- report ---------- */
.report-head { position: absolute; left: calc(40 * var(--px)); top: calc(222 * var(--px)); z-index: 2; display: flex; flex-direction: column; gap: calc(8 * var(--px)); max-width: calc(1080 * var(--px)); }
.report-head_label, .report-head_meta { margin: 0; font-size: calc(12 * var(--px)); color: var(--pink-1); }
.report-head_meta { opacity: .85; }
.report-head_meta:empty { display: none; }
.report-head { z-index: 3; }

/* Facts under the address: date, checks, pages read, builder. The last three open a list on hover, focus or tap. */
.report-chips { list-style: none; margin: calc(6 * var(--px)) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: calc(8 * var(--px)); }
.report-chips:empty { display: none; }
.report-chip { position: relative; display: inline-flex; align-items: center; gap: calc(8 * var(--px)); padding: calc(8 * var(--px)) calc(14 * var(--px)) calc(8 * var(--px)) calc(12 * var(--px)); background-color: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); font-size: calc(15 * var(--px)); line-height: 1.2; color: #fff; outline: none; transition: background-color .25s ease, border-color .25s ease; }
.report-chip.is-pink { background-color: var(--primary); border-color: var(--primary); }
.report-chip_icon { width: calc(16 * var(--px)); height: calc(16 * var(--px)); flex-shrink: 0; }
.report-chip.has-tip { cursor: help; }
.report-chip.has-tip .report-chip_text { text-decoration: underline dotted rgba(255, 255, 255, .6); text-underline-offset: .25em; }
.report-chip.has-tip:hover, .report-chip.has-tip:focus-visible, .report-chip.has-tip.is-open { background-color: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .4); }
.report-chip.has-tip:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
.report-tip { position: absolute; left: 0; top: calc(100% + 10 * var(--px)); z-index: 10; min-width: calc(260 * var(--px)); max-width: calc(380 * var(--px)); padding: calc(14 * var(--px)) calc(16 * var(--px)); background-color: var(--ink); border: 1px solid rgba(255, 77, 160, .6); box-shadow: 0 calc(16 * var(--px)) calc(40 * var(--px)) rgba(0, 0, 0, .35); opacity: 0; visibility: hidden; transform: translateY(calc(-4 * var(--px))); transition: opacity .2s ease, transform .2s ease, visibility 0s .2s; pointer-events: none; }
.report-chip.has-tip:hover .report-tip, .report-chip.has-tip:focus .report-tip, .report-chip.has-tip.is-open .report-tip { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease; }
.report-tip_label { margin: 0 0 calc(10 * var(--px)); font-size: calc(11 * var(--px)); color: var(--hot); }
.report-tip_list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(7 * var(--px)); }
.report-tip_list li { display: flex; justify-content: space-between; gap: calc(20 * var(--px)); font-size: calc(14 * var(--px)); line-height: 1.35; color: var(--pink-2); }
.report-tip_list li span + span { color: var(--muted); white-space: nowrap; }
.report-tip_path { font-family: var(--font-mono); font-size: calc(13 * var(--px)); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.report-tip_note { margin: calc(12 * var(--px)) 0 0; padding-top: calc(10 * var(--px)); border-top: 1px solid rgba(255, 255, 255, .1); font-size: calc(12 * var(--px)); line-height: 1.45; color: var(--muted); }
.report-head_host { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: calc(44 * var(--px)); line-height: 1.2; overflow-wrap: anywhere; }
.report-score { position: absolute; left: calc(28 * var(--px)); top: calc(400 * var(--px)); z-index: 2; display: flex; align-items: flex-start; }
.report-score_num { margin: 0; display: flex; align-items: flex-end; font-size: calc(300 * var(--px)); line-height: .82; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.report-score_of { margin: 0 0 calc(10 * var(--px)) calc(8 * var(--px)); font-size: calc(18 * var(--px)); letter-spacing: 0; color: var(--pink-1); }
.report-stamp { margin: calc(55 * var(--px)) 0 0 calc(-40 * var(--px)); padding: calc(10 * var(--px)) calc(22 * var(--px)); border: calc(4 * var(--px)) solid #fff; font-size: calc(44 * var(--px)); line-height: 1.1; text-transform: uppercase; white-space: nowrap; transform: rotate(-8deg); transform-origin: 0 50%; }
.report-stamp:empty { display: none; }
.report-stamp.is-poor { border-color: var(--hot); color: var(--hot); }
.report-summary { position: absolute; right: calc(40 * var(--px)); top: calc(420 * var(--px)); width: calc(700 * var(--px)); z-index: 2; display: flex; flex-direction: column; gap: calc(22 * var(--px)); }
.report-summary_label { margin: 0; font-size: calc(12 * var(--px)); color: var(--pink-1); }
/* "Empty to Google": a hard flag above the summary when the HTML has (almost) no content */
.report-flag { display: flex; align-items: flex-start; gap: calc(16 * var(--px)); padding: calc(14 * var(--px)) calc(16 * var(--px)); border: 1px solid var(--hot); background-color: rgba(21, 0, 11, .55); }
.report-flag[hidden] { display: none; }
.report-flag_tag { flex-shrink: 0; margin: 0; padding: calc(5 * var(--px)) calc(9 * var(--px)); background-color: var(--hot); color: var(--ink); font-size: calc(12 * var(--px)); line-height: 1.2; white-space: nowrap; }
.report-flag_text { margin: 0; font-size: calc(16 * var(--px)); line-height: 1.45; color: #fff; }
.report-summary_text { margin: 0; font-size: calc(26 * var(--px)); line-height: 1.35; }
.report-meter { position: relative; height: calc(10 * var(--px)); background-color: rgba(255, 255, 255, .15); }
.report-meter_fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background-color: var(--hot); }
.report-meter_tick { position: absolute; left: var(--at); top: 0; bottom: 0; width: 1px; background-color: rgba(255, 255, 255, .6); }
.report-meter_legend { margin: calc(-10 * var(--px)) 0 0; display: flex; justify-content: space-between; font-size: calc(11 * var(--px)); color: var(--pink-1); opacity: .8; }
.report-actions { display: flex; gap: calc(12 * var(--px)); }
.report-action { padding: calc(12 * var(--px)) calc(18 * var(--px)); border: 1px solid rgba(255, 255, 255, .4); background: transparent; color: #fff; font-size: calc(13 * var(--px)); cursor: pointer; transition: background-color .25s ease, border-color .25s ease; }
.report-action:hover { background-color: rgba(255, 255, 255, .1); border-color: #fff; }
.report-action[hidden] { display: none; }
.audit-hero.is-report .audit-bar_btn { opacity: 1; }
.audit-hero.is-report:not([data-state="ready"]) :is(.report-score, .report-summary) { visibility: hidden; }
.audit-hero.is-report[data-state="missing"] .report-head_host { font-size: calc(64 * var(--px)); }
[data-state="loading"] ~ .report-only, [data-state="missing"] ~ .report-only { display: none; }

/* Breakdown chart: one bar per category, as tall as the category's weight; the pink fill is the score */
.chart { --k: calc(14 * var(--px)); --axis: calc(56 * var(--px)); position: relative; margin-left: calc(602 * var(--px)); padding-top: calc(90 * var(--px)); }
.chart_grid { position: absolute; left: 0; right: 0; top: calc(90 * var(--px)); height: calc(30 * var(--k)); }
.chart_line { position: absolute; left: var(--axis); right: 0; bottom: calc(var(--p) * var(--k)); height: 1px; background-color: rgba(255, 255, 255, .07); }
.chart_line.is-base { background-color: rgba(255, 255, 255, .35); }
.chart_line span { position: absolute; left: calc(-1 * var(--axis)); top: 0; transform: translateY(-50%); font-family: var(--font-mono); font-size: calc(11 * var(--px)); color: var(--muted); }
.chart_unit { position: absolute; left: 0; top: calc(56 * var(--px)); margin: 0; font-family: var(--font-mono); font-size: calc(11 * var(--px)); color: var(--muted); }
.chart_cols { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: calc(40 * var(--px)); margin-left: calc(var(--axis) + 70 * var(--px)); }
.chart_col { display: flex; flex-direction: column; }
.chart_area { position: relative; height: calc(30 * var(--k)); display: flex; align-items: flex-end; }
.chart_track { position: relative; width: calc(150 * var(--px)); height: calc(var(--max) * var(--k)); background-color: rgba(255, 255, 255, .03); border: 1px dashed rgba(255, 255, 255, .3); box-sizing: border-box; }
.chart_fill { position: absolute; left: -1px; right: -1px; bottom: -1px; height: calc(var(--score) * var(--k)); background-color: var(--primary); border-top: 3px solid var(--hot); box-sizing: border-box; transform-origin: 50% 100%; }
.chart_fill.is-empty { border-top: 0; }
.chart_lost { position: absolute; left: calc(12 * var(--px)); top: calc(12 * var(--px)); font-family: var(--font-mono); font-size: calc(12 * var(--px)); color: var(--muted); }
.chart_num { position: absolute; left: 0; bottom: calc(var(--max) * var(--k) + 14 * var(--px)); margin: 0; display: flex; align-items: baseline; gap: calc(6 * var(--px)); white-space: nowrap; }
.chart_num b { font-weight: 400; font-size: calc(64 * var(--px)); line-height: 1; font-variant-numeric: tabular-nums; }
.chart_num small { font-family: var(--font-mono); font-size: calc(15 * var(--px)); color: var(--pink-1); }
.chart_num small.is-low { color: var(--hot); }
.chart_label { display: flex; flex-direction: column; gap: calc(12 * var(--px)); padding-top: calc(28 * var(--px)); }
.chart_name { margin: 0; font-size: calc(24 * var(--px)); line-height: 1.2; }
.chart_q { margin: 0; max-width: calc(210 * var(--px)); font-size: calc(15 * var(--px)); line-height: 1.4; color: var(--muted); }

/* Fixes */
.fixes { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(10, 10, 10, .15); }
.fix { display: grid; grid-template-columns: calc(40 * var(--px)) calc(110 * var(--px)) 1fr calc(150 * var(--px)) calc(380 * var(--px)); column-gap: calc(32 * var(--px)); align-items: start; padding: calc(30 * var(--px)) 0; border-bottom: 1px solid rgba(10, 10, 10, .15); }
.fix_num { padding-top: calc(4 * var(--px)); font-size: calc(13 * var(--px)); color: #8a8a8a; }
.fix_sev { justify-self: start; padding: calc(5 * var(--px)) calc(8 * var(--px)); font-size: calc(11 * var(--px)); line-height: 1.2; border: 1px solid currentColor; }
.fix_sev.is-critical { background-color: var(--primary); border-color: var(--primary); color: #fff; }
.fix_sev.is-warning { color: var(--primary); }
.fix_sev.is-notice { color: #5c5c5c; border-color: #8a8a8a; }
.fix_sev.is-passed { color: #0a0a0a; border-color: rgba(10, 10, 10, .3); }
.fix_body { display: flex; flex-direction: column; gap: calc(8 * var(--px)); max-width: calc(760 * var(--px)); }
.fix_title { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: calc(24 * var(--px)); line-height: 1.3; }
.fix_detail { margin: 0; font-size: calc(17 * var(--px)); line-height: 1.45; color: #5c5c5c; overflow-wrap: anywhere; }
.fix_cat { padding-top: calc(4 * var(--px)); font-size: calc(12 * var(--px)); line-height: 1.6; color: #8a8a8a; }
.fix_cat b { display: block; font-weight: 400; color: var(--primary); }
.fix_guide { display: flex; flex-direction: column; gap: calc(6 * var(--px)); color: #0a0a0a; text-decoration: none; font-size: calc(16 * var(--px)); line-height: 1.4; }
.fix_guide span:first-child { font-size: calc(11 * var(--px)); color: var(--primary); }
.fix_guide:hover span:last-child { color: var(--primary); }
.passed { border-bottom: 1px solid rgba(10, 10, 10, .15); margin-top: calc(-96 * var(--px)); }
.passed[hidden] { display: none; }
.passed_head { display: grid; grid-template-columns: calc(40 * var(--px)) calc(110 * var(--px)) 1fr auto; column-gap: calc(32 * var(--px)); align-items: center; padding: calc(30 * var(--px)) 0; cursor: pointer; list-style: none; }
.passed_head::-webkit-details-marker { display: none; }
.passed_tick { font-size: calc(13 * var(--px)); color: #8a8a8a; }
.passed_title { font-size: calc(24 * var(--px)); }
.passed[open] .note_faq-icon::after { transform: rotate(0deg); }
.passed_list { list-style: none; margin: 0; padding: 0 0 calc(30 * var(--px)) calc(182 * var(--px)); display: flex; flex-wrap: wrap; gap: calc(8 * var(--px)); }
.passed_list li { padding: calc(8 * var(--px)) calc(12 * var(--px)); background-color: #f3ecef; color: var(--wine); font-size: calc(15 * var(--px)); }

/* Verdict hand-off */
.report-cta { display: grid; grid-template-columns: 1fr calc(620 * var(--px)); column-gap: calc(80 * var(--px)); align-items: end; padding: calc(56 * var(--px)); background-color: var(--primary); color: #fff; margin-top: calc(-24 * var(--px)); scroll-margin-top: calc(120 * var(--px)); }
.report-cta_copy { display: flex; flex-direction: column; gap: calc(20 * var(--px)); }
.report-cta_label { margin: 0; font-size: calc(12 * var(--px)); color: var(--pink-1); }
.report-cta_title { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: calc(52 * var(--px)); line-height: 1.12; letter-spacing: -0.01em; }
.report-cta_text { margin: 0; max-width: calc(720 * var(--px)); font-size: calc(19 * var(--px)); line-height: 1.45; color: #ffe3ef; }
.report-cta_form { display: flex; flex-direction: column; gap: calc(16 * var(--px)); margin: 0; }
.report-cta_field { display: flex; flex-direction: column; gap: calc(8 * var(--px)); margin: 0; padding: calc(18 * var(--px)) calc(24 * var(--px)); background-color: var(--plum); font-weight: 400; cursor: text; }
.report-cta_field input { width: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; font-family: var(--font-body); font-size: calc(18 * var(--px)); outline: none; }
.report-cta_field input::placeholder { color: rgba(255, 255, 255, .55); }
.report-cta_field:focus-within { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.report-cta_btn { font-size: calc(18 * var(--px)); padding: calc(18 * var(--px)) calc(22 * var(--px)); border: 0; }
.report-cta_note { margin: 0; font-size: calc(11 * var(--px)); color: var(--pink-1); }
.report-cta_note.is-error { color: #fff; }
.report-cta_done { margin: 0; font-size: calc(26 * var(--px)); line-height: 1.35; }

/* ---------- tablet and phone ---------- */
@media screen and (max-width: 991px) {
  .audit-hero { min-height: 0; padding: calc(150 * var(--px)) 5vw calc(40 * var(--px)); display: flex; flex-direction: column; gap: calc(28 * var(--px)); }
  .audit-hero > :not(.blog-hero_bg) { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; }
  .audit-hero_crumbs { font-size: calc(14 * var(--px)); }
  .audit-build { width: 100%; margin: calc(20 * var(--px)) 0 calc(10 * var(--px)); }
  .audit-build_label { font-size: calc(12 * var(--px)); }
  .audit-hero_title { font-size: calc(72 * var(--px)); }
  .audit-hero_lead { width: auto; max-width: 34em; font-size: calc(20 * var(--px)); }
  .audit-hero_facts { font-size: calc(12 * var(--px)); line-height: 1.8; }
  .audit-live { width: 100%; max-width: 30em; }
  .audit-live_label { font-size: calc(12 * var(--px)); }
  .audit-bar { height: auto; flex-wrap: wrap; padding: calc(18 * var(--px)); gap: calc(16 * var(--px)); }
  .audit-bar_field { flex-basis: 100%; }
  .audit-bar_label { font-size: calc(12 * var(--px)); }
  .audit-bar_input { font-size: 16px; }
  .audit-bar_btn { width: 100%; height: auto; padding: calc(16 * var(--px)) calc(20 * var(--px)); font-size: calc(18 * var(--px)); }
  .audit-bar_turnstile { position: static; }
  .audit-bar_error { max-width: none; font-size: calc(15 * var(--px)); padding: calc(12 * var(--px)) calc(14 * var(--px)); }
  .audit-sec { padding: calc(80 * var(--px)) 5vw calc(100 * var(--px)); gap: calc(56 * var(--px)); }
  .audit-sec_head { grid-template-columns: 1fr; row-gap: calc(28 * var(--px)); }
  .audit-sec_title { font-size: calc(52 * var(--px)); }
  .audit-sec_lead { font-size: calc(19 * var(--px)); max-width: none; }
  .audit-sec_statement { font-size: calc(34 * var(--px)); }
  .audit-sec_note { margin: 0; font-size: calc(12 * var(--px)); line-height: 1.6; }
  .audit-chip { font-size: calc(12 * var(--px)); }
  .audit-groups { grid-template-columns: 1fr 1fr; }
  .audit-group_name { font-size: calc(28 * var(--px)); }
  .audit-group_q { font-size: calc(16 * var(--px)); }
  .audit-group_list li { font-size: calc(16 * var(--px)); }
  .audit-steps { grid-template-columns: 1fr 1fr; row-gap: calc(40 * var(--px)); }
  .audit-step_title { font-size: calc(24 * var(--px)); }
  .audit-step_text { font-size: calc(16 * var(--px)); }
  .audit-vs { grid-template-columns: 1fr; }
  .audit-vs_card { padding: calc(28 * var(--px)); }
  .audit-vs_tag { font-size: calc(12 * var(--px)); }
  .audit-vs_title { font-size: calc(34 * var(--px)); }
  .audit-vs_list li { font-size: calc(17 * var(--px)); }
  .audit-vs_btn { font-size: calc(18 * var(--px)); padding: calc(14 * var(--px)) calc(18 * var(--px)); column-gap: calc(40 * var(--px)); }
  .audit-faq { grid-template-columns: 1fr; row-gap: calc(48 * var(--px)); background-image: none; }
  .audit-faq_left { gap: calc(40 * var(--px)); }
  .audit-faq_title { font-size: calc(72 * var(--px)); }
  .audit-faq_card { padding: calc(24 * var(--px)); }
  .audit-faq_card-label { font-size: calc(12 * var(--px)); }
  .audit-faq_card-q { font-size: calc(24 * var(--px)); }
  .audit-faq_card-a { font-size: calc(16 * var(--px)); }
  .audit-faq_list { margin-top: 0; }
  .audit-faq_num { font-size: calc(12 * var(--px)); }
  .audit-faq_text { font-size: calc(20 * var(--px)); }
  .audit-faq_a { font-size: calc(17 * var(--px)); }
  .report-head_label, .report-head_meta { font-size: calc(12 * var(--px)); line-height: 1.6; }
  .report-head_host { font-size: calc(40 * var(--px)); }
  .report-chip { font-size: calc(15 * var(--px)); padding: calc(8 * var(--px)) calc(12 * var(--px)); }
  .report-chip_icon { width: calc(15 * var(--px)); height: calc(15 * var(--px)); }
  .report-tip { min-width: calc(280 * var(--px)); max-width: calc(420 * var(--px)); }
  .report-tip_label, .report-tip_note { font-size: calc(12 * var(--px)); }
  .report-tip_list li { font-size: calc(15 * var(--px)); }
  .report-tip_path { font-size: calc(14 * var(--px)); }
  .report-score { margin: calc(10 * var(--px)) 0; }
  .report-score_num { font-size: calc(200 * var(--px)); }
  .report-score_of { font-size: calc(16 * var(--px)); }
  .report-stamp { font-size: calc(32 * var(--px)); margin-top: calc(30 * var(--px)); }
  .report-summary { width: auto; }
  .report-summary_label { font-size: calc(12 * var(--px)); }
  .report-summary_text { font-size: calc(22 * var(--px)); }
  .report-flag_tag { font-size: calc(12 * var(--px)); }
  .report-flag_text { font-size: calc(16 * var(--px)); }
  .report-meter { height: calc(8 * var(--px)); }
  .report-meter_legend { font-size: calc(11 * var(--px)); margin-top: 0; }
  .report-action { font-size: calc(13 * var(--px)); }
  .chart { --k: calc(12 * var(--px)); --axis: calc(40 * var(--px)); margin-left: 0; }
  .chart_cols { margin-left: calc(var(--axis) + 16 * var(--px)); column-gap: calc(20 * var(--px)); }
  .chart_track { width: 100%; }
  .chart_num b { font-size: calc(48 * var(--px)); }
  .chart_name { font-size: calc(20 * var(--px)); }
  .chart_q { font-size: calc(14 * var(--px)); }
  .fix { grid-template-columns: calc(110 * var(--px)) 1fr; grid-template-areas: "sev body" ". cat" ". guide"; column-gap: calc(20 * var(--px)); row-gap: calc(14 * var(--px)); }
  .fix_num { display: none; }
  .fix_sev { grid-area: sev; font-size: calc(11 * var(--px)); }
  .fix_body { grid-area: body; }
  .fix_cat { grid-area: cat; padding: 0; font-size: calc(12 * var(--px)); }
  .fix_cat b { display: inline; margin-left: .8em; }
  .fix_guide { grid-area: guide; font-size: calc(16 * var(--px)); }
  .fix_guide span:first-child { font-size: calc(11 * var(--px)); }
  .fix_title { font-size: calc(22 * var(--px)); }
  .fix_detail { font-size: calc(16 * var(--px)); }
  .passed { margin-top: calc(-56 * var(--px)); }
  .passed_head { grid-template-columns: calc(110 * var(--px)) 1fr auto; column-gap: calc(20 * var(--px)); }
  .passed_tick { display: none; }
  .passed_title { font-size: calc(22 * var(--px)); }
  .passed_list { padding-left: 0; }
  .passed_list li { font-size: calc(15 * var(--px)); }
  .report-cta { grid-template-columns: 1fr; row-gap: calc(32 * var(--px)); padding: calc(32 * var(--px)); margin-top: 0; }
  .report-cta_label { font-size: calc(12 * var(--px)); }
  .report-cta_title { font-size: calc(40 * var(--px)); }
  .report-cta_text { font-size: calc(18 * var(--px)); }
  .report-cta_field input { font-size: 16px; }
  .report-cta_btn { font-size: calc(18 * var(--px)); }
  .report-cta_note { font-size: calc(11 * var(--px)); }
}
@media screen and (max-width: 767px) {
  .audit-hero { padding-top: calc(110 * var(--px)); gap: calc(20 * var(--px)); }
  .audit-hero_crumbs, .audit-hero_facts, .audit-build_label, .audit-bar_label, .report-head_label, .report-head_meta, .report-summary_label { font-size: calc(11 * var(--px)); }
  .audit-hero_title { font-size: calc(44 * var(--px)); }
  .audit-hero_lead { font-size: calc(16 * var(--px)); }
  .audit-bar_btn, .audit-vs_btn, .report-cta_btn { font-size: calc(16 * var(--px)); }
  .audit-bar_error { font-size: calc(14 * var(--px)); }
  .audit-sec_title { font-size: calc(34 * var(--px)); }
  .audit-sec_lead { font-size: calc(16 * var(--px)); }
  .audit-sec_statement { font-size: calc(24 * var(--px)); }
  .audit-sec_note { font-size: calc(11 * var(--px)); }
  .audit-groups, .audit-steps { grid-template-columns: 1fr; }
  .audit-group_head { padding: calc(20 * var(--px)); gap: calc(10 * var(--px)); }
  .audit-group_name { font-size: calc(24 * var(--px)); }
  .audit-group_q, .audit-group_list li, .audit-step_text, .audit-vs_list li, .audit-faq_card-a, .audit-faq_a, .fix_detail { font-size: calc(15 * var(--px)); }
  .audit-group_list li { padding: calc(14 * var(--px)) calc(20 * var(--px)); }
  .audit-step { padding-right: 0; gap: calc(10 * var(--px)); }
  .audit-step_title { font-size: calc(20 * var(--px)); }
  .audit-vs_card { padding: calc(22 * var(--px)); }
  .audit-vs_title { font-size: calc(26 * var(--px)); }
  .audit-vs_tag, .audit-faq_card-label, .audit-faq_num, .audit-chip, .fix_cat, .report-cta_label { font-size: calc(11 * var(--px)); }
  .audit-faq_title { font-size: calc(48 * var(--px)); }
  .audit-faq_card-q { font-size: calc(20 * var(--px)); }
  .audit-faq_text { font-size: calc(18 * var(--px)); }
  .report-head_host { font-size: calc(26 * var(--px)); }
  .report-chips { gap: calc(6 * var(--px)); position: relative; }
  /* On phones the list opens under the whole row, full width, so it never runs off the screen */
  .report-chip { position: static; }
  .report-tip { left: 0; right: 0; max-width: none; }
  .report-chip { font-size: calc(13 * var(--px)); padding: calc(7 * var(--px)) calc(10 * var(--px)); gap: calc(6 * var(--px)); }
  .report-chip_icon { width: calc(14 * var(--px)); height: calc(14 * var(--px)); }
  .report-tip { min-width: calc(250 * var(--px)); max-width: calc(330 * var(--px)); padding: calc(12 * var(--px)) calc(14 * var(--px)); }
  .report-tip_label, .report-tip_note { font-size: calc(11 * var(--px)); }
  .report-tip_list li { font-size: calc(14 * var(--px)); }
  .report-tip_path { font-size: calc(13 * var(--px)); }
  .report-score_num { font-size: calc(130 * var(--px)); }
  .report-stamp { font-size: calc(20 * var(--px)); margin: calc(16 * var(--px)) 0 0 calc(-14 * var(--px)); border-width: calc(3 * var(--px)); padding: calc(6 * var(--px)) calc(12 * var(--px)); }
  .report-summary_text { font-size: calc(18 * var(--px)); }
  .report-flag { flex-direction: column; gap: calc(10 * var(--px)); }
  .report-flag_tag { font-size: calc(11 * var(--px)); }
  .report-flag_text { font-size: calc(15 * var(--px)); }
  .report-meter_legend { font-size: calc(10 * var(--px)); }
  .chart { --k: calc(8 * var(--px)); --axis: calc(26 * var(--px)); padding-top: calc(70 * var(--px)); }
  .chart_grid { top: calc(70 * var(--px)); }
  .chart_unit { top: calc(40 * var(--px)); }
  .chart_line span, .chart_unit { font-size: calc(9 * var(--px)); }
  .chart_cols { column-gap: calc(10 * var(--px)); margin-left: calc(var(--axis) + 8 * var(--px)); }
  .chart_num { bottom: calc(var(--max) * var(--k) + 8 * var(--px)); gap: 2px; }
  .chart_num b { font-size: calc(30 * var(--px)); }
  .chart_num small { font-size: calc(10 * var(--px)); }
  .chart_lost { left: calc(5 * var(--px)); top: calc(6 * var(--px)); font-size: calc(10 * var(--px)); }
  .chart_label { padding-top: calc(16 * var(--px)); gap: calc(8 * var(--px)); }
  .chart_name { font-size: calc(14 * var(--px)); }
  .chart_q { display: none; }
  .chart .audit-chip { font-size: calc(10 * var(--px)); }
  .fix { grid-template-columns: 1fr; grid-template-areas: "sev" "body" "cat" "guide"; row-gap: calc(12 * var(--px)); padding: calc(24 * var(--px)) 0; }
  .fix_title, .passed_title { font-size: calc(19 * var(--px)); }
  .fix_guide { font-size: calc(15 * var(--px)); }
  .passed_head { grid-template-columns: auto 1fr auto; padding: calc(24 * var(--px)) 0; }
  .passed_list li { font-size: calc(14 * var(--px)); }
  .report-cta { padding: calc(24 * var(--px)); }
  .report-cta_title { font-size: calc(28 * var(--px)); }
  .report-cta_text { font-size: calc(16 * var(--px)); }
  .report-cta_done { font-size: calc(20 * var(--px)); }
}
/* Loose pieces bob gently while they wait for a slot. Uses the separate `translate` property so it never fights GSAP's transform. */
.audit-build_piece.is-floating { animation: audit-bob 3.2s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -0.7s); }
@keyframes audit-bob { from { translate: 0 -4px; } to { translate: 0 6px; } }
@media (prefers-reduced-motion: reduce) {
  .audit-build.is-running .audit-build_piece, .audit-build_piece.is-floating { animation: none; }
}