/* Page Insight visual identity: isolated from the Create23 site. */
/* Self-hosted brand fonts (same files as the site): no request to Google Fonts. */
@font-face{font-family:Inter;src:url(/assets/fonts/inter-latin.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(/assets/fonts/source-serif-4-italic-latin.woff2) format("woff2");font-weight:400 600;font-style:italic;font-display:swap}
/* Fallbacks sized like the brand fonts (same metrics as the site's next/font fallbacks): no jump when the font arrives. */
@font-face{font-family:"Inter Fallback";src:local(Arial);ascent-override:89.79%;descent-override:22.36%;line-gap-override:0%;size-adjust:107.89%}
@font-face{font-family:"Serif Fallback";src:local(Arial);ascent-override:108.76%;descent-override:35.17%;line-gap-override:0%;size-adjust:95.26%}
:root{--green:#7ff454;--ink:#0a0b0f;--paper:#0a0b0f;--border:#dfe3da}
body{background:#0a0b0f;color:#f4f5f0;position:relative}
body::before{content:"";position:absolute;inset:0;min-height:100%;pointer-events:none;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),radial-gradient(closest-side,rgba(127,244,84,.32),rgba(127,244,84,0)),radial-gradient(closest-side,rgba(12,89,50,.55),rgba(12,89,50,0));background-size:76px 76px,76px 76px,min(1100px,110vw) 520px,720px 720px;background-position:center top,center top,50% -300px,calc(100% + 260px) 25%;background-repeat:repeat,repeat,no-repeat,no-repeat;-webkit-mask-image:radial-gradient(ellipse 95% 88% at 50% 24%,#000 32%,transparent 92%);mask-image:radial-gradient(ellipse 95% 88% at 50% 24%,#000 32%,transparent 92%)}
.hero{max-width:1020px}
.hero-main>.eyebrow{justify-content:center;color:#b2c6ac}
.tiny-square{background:#7ff454;border-radius:50%;width:8px;height:8px}
.hero h1{font-weight:800;color:#f4f5f0;font-size:clamp(49px,8.5vw,106px);letter-spacing:-.065em;line-height:.98}
/* Brand rule: green is only ever the italic serif accent of a heading. */
.accent{font-family:"Source Serif 4","Serif Fallback",Georgia,serif;font-style:italic;font-weight:500;letter-spacing:-.04em}
.hero h1>.accent{color:#7ff454;padding-right:.04em}
.faq h2 .accent{color:#7ff454}
.results h2 .accent,.results h3 .accent{color:#0c5932}
.hero-copy{color:#b7c0b3;font-size:clamp(16px,1.6vw,20px)}
.scan-form>label{color:#f4f5f0;font-size:13px}
.input-wrap{border:1px solid #f4f5f0;border-radius:15px;background:#fff;padding:8px 8px 8px 20px;min-height:74px;box-shadow:0 18px 56px #0004}
.input-wrap input{color:#0a0b0f;font-size:16px}
/* Old checker buttons only; the shared .btn (enhanceCtas in app.js) keeps the site's pill style everywhere. */
.primary,.priority-ai-plan .ai-cta:not(.btn){background:#7ff454;color:#0a0b0f;border:0;border-radius:10px;box-shadow:none;font-weight:750}
.primary:hover,.priority-ai-plan .ai-cta:not(.btn):not(:disabled):hover{background:#9aff79}
.form-options>span,.data-note{color:#b8c2b2;font-size:12px}
.example-link{color:#bfd9b2}
.loading{background:#182418;color:#f4f5f0;border-color:#426438}
.loading p,.loading em{color:#b6c4b1}
.error{background:#3d2720;color:#ffe8d6;border-color:#75503f}
.results{background:#f3f3ef;color:#0a0b0f;padding:clamp(20px,3.3vw,42px);border-radius:24px;margin-bottom:55px}
.results .eyebrow{color:#61705b}
.results h2,.results h3,.results h4{color:#0a0b0f}
.results .score-card,.results .authority-card,.results .report-extra{background:#fff}
.faq{border-top:1px solid #ffffff23}
.faq h2,.faq-item button{color:#f4f5f0}
.faq-item{border-bottom-color:#ffffff25}
.faq-item p{color:#b7c1b4}
@media(max-width:720px){.hero h1{font-size:clamp(45px,11.5vw,75px)}.results{padding:16px;border-radius:16px}}

/* Completed scan steps use Create23 neon green on the dark loading panel. */
.loading .load-steps li.done,.loading .load-steps li.done>span{color:#7ff454}
.loading .load-steps li.done em{color:#b9cdb2}

/* The consultation link uses the shared Create23 button.
   Keep its rolling label intact on desktop without the old forced 320px width. */
.consultation .btn{
  width:max-content;
  max-width:100%;
  min-height:50px;
  justify-content:space-between;
  flex-shrink:0;
}
@media(max-width:680px){
  /* A long label can wrap on narrow phones. Clip its animation layer to
     prevent the duplicate hover text from showing outside the button. */
  .consultation .btn{
    width:100%;
    padding-left:18px;
    gap:10px;
  }
  .consultation .btn__label{
    min-width:0;
    white-space:normal;
    overflow:hidden;
  }
  .consultation .btn__label>span{white-space:normal}
  .consultation .btn__label>span::after{content:none}
  .consultation .btn:hover .btn__label>span,
  .consultation .btn:focus-visible .btn__label>span{transform:none}
}

/* Shared size for the address field and Check my website CTA at every width. */
.scan-form .url-entry{--scan-control-height:56px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;gap:12px}
.scan-form .url-entry>.input-wrap{min-width:0;width:100%;height:var(--scan-control-height);min-height:var(--scan-control-height);padding:0 16px;box-shadow:none;flex-wrap:nowrap}
.scan-form .url-entry>.input-wrap input{height:100%;min-width:0;flex:1 1 auto;padding:0}
.scan-form .url-entry>#submit{height:var(--scan-control-height);min-height:var(--scan-control-height);width:max-content;min-width:245px;max-width:none;flex:none;justify-content:space-between;gap:14px;white-space:nowrap;margin:0;padding:6px 6px 6px 22px}
.scan-form .url-entry>#submit .btn__label{min-width:max-content;white-space:nowrap;flex:none;overflow:hidden}
.scan-form .url-entry>#submit .btn__label>span{white-space:nowrap}
.scan-form .url-entry>#submit .btn__icon{flex:0 0 38px}
@media(max-width:680px){
  .scan-form .url-entry{grid-template-columns:minmax(0,1fr);gap:14px}
  .scan-form .url-entry>#submit{width:100%;min-width:0;max-width:100%}
}

/* A missing authority value uses the same typography as its /10 denominator. */
.authority-score-card .score-number .authority-empty{font-size:0.46em;font-weight:500;line-height:1;display:inline-block;vertical-align:baseline}

/* The URL field gets one clean focus ring, not a rectangle inside the input. */
.scan-form .url-entry .input-wrap input,
.scan-form .url-entry .input-wrap input:focus,
.scan-form .url-entry .input-wrap input:focus-visible{
  outline:none;
  box-shadow:none;
}
.scan-form .url-entry .input-wrap:focus-within{
  border-color:#7ff454;
  box-shadow:0 0 0 2px #7ff454;
}
/* Keep Chrome/Safari autofilled URLs the same white as the surrounding field.
   Without an inset fill, WebKit paints saved addresses with a blue rectangle. */
.scan-form .url-entry .input-wrap input:-webkit-autofill,
.scan-form .url-entry .input-wrap input:-webkit-autofill:hover,
.scan-form .url-entry .input-wrap input:-webkit-autofill:focus,
.scan-form .url-entry .input-wrap input:autofill{
  -webkit-box-shadow:0 0 0 1000px #fff inset !important;
  box-shadow:0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color:#0a0b0f !important;
  caret-color:#0a0b0f;
}

/* Report export dropdown — one control on desktop and mobile. */
.report-actions .export-menu{position:relative;display:inline-block;max-width:100%}
.report-actions .export-menu #export-toggle{width:auto;min-width:185px;max-width:100%;justify-content:space-between}
.report-actions .export-options{position:absolute;right:0;top:calc(100% + 10px);width:max-content;min-width:230px;max-width:min(300px,90vw);padding:7px;background:#fff;border:1px solid #dce3d7;border-radius:13px;box-shadow:0 16px 40px #0a0b0f25;z-index:20}
.report-actions .export-options[hidden]{display:none!important}
.report-actions .export-options button{display:block;width:100%;padding:13px 15px;text-align:left;border-radius:8px;font-size:14px;font-weight:600;background:transparent;color:#171923;white-space:normal}
.report-actions .export-options button:hover,.report-actions .export-options button:focus-visible{background:#e8f9df;color:#171923;outline:none}
@media(max-width:600px){.report-actions .export-menu{width:100%}.report-actions .export-menu #export-toggle{width:100%}.report-actions .export-options{width:100%;max-width:100%}}

/* Comfortable gutters at narrower viewport widths and browser zoom levels.
   These rules only affect the embedded checker, not the main Create23 site. */
main{width:min(1240px,calc(100% - 48px));margin-inline:auto}

@media(min-width:681px) and (max-width:1440px){
  .hero{max-width:min(950px,100%)}
  .hero h1{font-size:clamp(56px,6vw,82px);line-height:1.02;letter-spacing:-.058em;margin:16px 0}
  .hero-copy{font-size:clamp(15px,1.4vw,18px);margin-bottom:22px}
  .results{padding:clamp(18px,2.6vw,32px)}
  .scores{gap:clamp(9px,1.1vw,14px)}
  .scores .score-card{padding:clamp(12px,1.3vw,20px)}
  .scores .score-number{font-size:clamp(32px,3.3vw,46px);margin:20px 0 15px}
  .scores .score-label{font-size:11px}
}
@media(max-width:680px){
  main{width:calc(100% - 28px);margin-inline:auto}
  .hero h1{font-size:clamp(36px,10.5vw,55px);line-height:1.03;letter-spacing:-.055em}
  .hero-copy{font-size:15px;margin-bottom:24px}
  .results{padding:clamp(14px,3.6vw,20px)}
}


/* Keep the example report action separate from the checker and visually compact. */
.example-report-strip{
  width:min(760px,100%);
  margin:0 auto;
  padding:24px 0 42px;
  border-top:1px solid #ffffff14;
}
.example-report-strip .example-prompt{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
}
.example-report-strip .example-prompt>span{
  color:#b8c2b2;
  font-size:14px;
  white-space:nowrap;
}
.example-report-strip .btn{
  min-height:50px;
}
@media(max-width:680px){
  .example-report-strip{
    width:100%;
    padding:20px 0 32px;
  }
  .example-report-strip .example-prompt{
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:10px;
    text-align:center;
  }
  .example-report-strip .example-prompt>span{white-space:normal}
  .example-report-strip .btn{width:auto;max-width:100%}
}


/* Center the daily free-check quota line under the checker controls. */
#daily-scan-quota{
  text-align:center;
  width:100%;
  margin-left:auto;
  margin-right:auto;
}


/* One canonical hero spacing rule. The 76px offset mirrors the shared site header. */
.hero{padding:calc(76px + clamp(40px,7vh,88px)) 0 clamp(40px,5vw,72px)}
@media(max-width:720px){.hero{padding:calc(76px + 44px) 0 40px}}


/* ---------------------------------------------------------------------------
   2026-10 refresh: brand headings, ink authority card, compact passed checks.
   --------------------------------------------------------------------------- */

/* Headings follow the site: heavy sans with an italic serif accent. */
.faq h2{font-weight:800;letter-spacing:-.058em;line-height:.98}
.results .report-header h2{font-weight:750;letter-spacing:-.05em;line-height:1.04}

/* Reassurance line + language switch under the address field. */
.scan-form>.form-options{flex-wrap:wrap;justify-content:center;gap:8px 14px}
#daily-scan-quota.quota-empty{color:#ffd9c4}

/* Website authority: a separate 0–10 scale, shown as an ink card instead of violet. */
.results .authority-score-card{background:#0a0b0f!important;border-color:#0a0b0f!important;color:#f4f5f0}
.results .authority-score-card .score-label{color:#c9d2c4}
.results .authority-score-card .authority-source{opacity:1;padding:1px 8px;border:1px solid #ffffff2e;border-radius:999px;color:#c9d2c4}
.results .authority-score-card .score-number{color:#f4f5f0!important}
.results .authority-score-card .score-number span{color:#8f998b}
.results .authority-scale-caption{color:#aeb8aa}
.results .authority-card{border-color:#dde3d9}
.results .authority-metrics>div{background:#f3f6f0}

/* Nothing to fix in a section. */
.all-clear{display:flex;align-items:center;gap:10px;margin:18px 0 6px;padding:13px 16px;border-radius:10px;background:#eef6e9;border-left:3px solid #0c5932;color:#171923;font-size:13px;font-weight:550;line-height:1.5}
.all-clear::before{content:"✓";display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;border-radius:50%;background:#dcefd2;color:#0c5932;font-size:12px;font-weight:700}

/* Passed checks: one compact grid after the findings that need attention. */
.passed-group{margin-top:22px;padding-top:18px;border-top:1px solid var(--border)}
.passed-group h4{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-size:13px;font-weight:650;color:#171923}
.passed-group h4>span{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;border-radius:50%;background:#e4f0dd;color:#33762d;font-size:11px}
.passed-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.passed-list li{min-width:0;padding:10px 13px;border:1px solid #e5eae0;border-radius:9px;background:#f7f9f5;font-size:12px;line-height:1.45}
.passed-list strong{display:block;font-weight:600;color:#171923}
.passed-list span{display:block;margin-top:2px;color:#65705f;font-size:11.5px;overflow-wrap:anywhere}

/* Lighthouse "Passed" filter: short rows without an empty disclosure. */
.check-row.check-row-pass{padding:0}
.check-row-pass .check-summary{display:flex;align-items:center;gap:12px;padding:11px 0}
.check-row-pass .check-summary strong{font-size:12px;font-weight:500;min-width:0;overflow-wrap:anywhere}
.check-row-pass .check-category{margin-left:auto;flex:none}

/* A competitor taken over from a shared link waits for the visitor's click. */
.comparison-hint{margin:14px 0 0;padding:11px 14px;border-radius:9px;background:#f3f6ef;color:#465241;font-size:12.5px;line-height:1.5}

@media(max-width:600px){
  .passed-list{grid-template-columns:1fr}
  .check-row-pass .check-category{display:none}
}

/* "Detailed checks" tab: the same white card as the other tabs, and readable rows
   once the disclosures are expanded (summary → .expanded-report-heading). */
.report-tab-panel .checks-panel{padding:28px;border:1px solid var(--border);border-radius:9px;background:#fff}
.report-tab-panel .checks-panel>.condensed-trigger{padding:0 0 18px;margin-bottom:22px;cursor:default}
.check-row.expanded-report-section{padding:18px 0 16px}
.check-row>.expanded-report-heading{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:8px 12px;margin:0 0 10px}
.check-row>.expanded-report-heading>.check-symbol{grid-column:1;grid-row:1}
.check-row>.expanded-report-heading>strong{grid-column:2;grid-row:1;min-width:0;font-size:14px;font-weight:650;line-height:1.4;overflow-wrap:anywhere}
.check-row>.expanded-report-heading>.check-category{grid-column:3;grid-row:1;margin:0;white-space:nowrap}
.check-row>.expanded-report-heading>.check-value{grid-column:2;grid-row:2;justify-self:start;white-space:normal}
.check-row>.expanded-report-heading>span[aria-hidden]{display:none}
.check-row.expanded-report-section>.check-detail{padding:0 0 0 34px;line-height:1.6}
.check-row .check-items{overflow-wrap:anywhere}
@media(max-width:600px){
  .report-tab-panel .checks-panel{padding:18px}
  .check-row>.expanded-report-heading{grid-template-columns:22px minmax(0,1fr)}
  .check-row.expanded-report-section>.check-detail{padding-left:0}
}
.scan-form>.form-options>span{justify-content:center;text-align:center}

/* Cancel button in the running-check panel: readable red on the dark green panel. */
.loading #cancel{flex:none;align-self:center;margin-left:auto;padding:9px 18px;border:1px solid rgba(255,107,91,.6);border-radius:999px;background:transparent;color:#ff6b5b;font-size:13px;font-weight:650;text-decoration:none;transition:background-color .2s,color .2s,border-color .2s}
.loading #cancel:hover,.loading #cancel:focus-visible{background:#ff6b5b;border-color:#ff6b5b;color:#0a0b0f}
.loading #cancel:focus-visible{outline:2px solid #ff6b5b;outline-offset:3px}
/* Readable step list on the dark panel; the panel reads left-aligned like a status list. */
.loading{text-align:left}
.loading .load-steps{color:#9aa894}
.loading .load-steps li.run{color:#eef3ea}
.loading .load-steps li.fail,.loading .load-steps li.fail>span{color:#ff8a7a}
.loading .load-steps em{color:#9aa894}

/* Consultation: the report travels with the enquiry (saved for /project/ on click). */
.consultation-action{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex-shrink:0;max-width:100%}
.consultation-note{margin:0;font-size:12px;line-height:1.4;color:#4f5a4b;text-align:right}
@media(max-width:680px){.consultation-action{align-items:stretch;width:100%}.consultation-note{text-align:center}}

/* ---------------------------------------------------------------------------
   2026-10 phone pass: readable text, one swipeable tab row, 44px tap targets,
   aligned score cards, a quieter export button. The pinned copy of the tabs
   lives on the host page (components/page-insight/CheckerFrame.tsx): the frame
   is auto-sized, so CSS sticky has nothing to stick to in here.
   --------------------------------------------------------------------------- */

/* Score cards: label, number, bar and rating line up across a row even when one
   label wraps to two lines ("Sichtbarkeit in Suchmaschinen"). */
@supports (grid-template-rows:subgrid){
  .results .scores .score-card{display:grid;grid-row:span 4;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);row-gap:0;align-content:start}
  .results .scores .score-card>.score-label{align-self:start}
  .results .scores .authority-score-card>.authority-scale-caption{grid-row:span 2;align-self:start}
}

/* Tap targets (every width). Small inline links get a larger invisible hit area. */
.results .cls-explanation summary,.results .report-notes summary{display:flex;align-items:center;gap:6px;min-height:44px}
.results .cls-explanation summary::before,.results .report-notes summary::before{content:"▸";font-size:.8em;transition:transform .2s}
.results .cls-explanation[open] summary::before,.results .report-notes[open] summary::before{transform:rotate(90deg)}
.results .cls-explanation summary::-webkit-details-marker,.results .report-notes summary::-webkit-details-marker{display:none}
.results .cls-explanation summary{list-style:none}
.results .report-notes summary{list-style:none}
.results .crux-source{display:inline-flex;align-items:center;min-height:44px;margin-top:0}
.results .link-button,.results .check-detail a{position:relative}
.results .link-button::after,.results .check-detail a::after{content:"";position:absolute;inset:-12px -6px}
.results .ai-explain label{align-items:flex-start;gap:12px;min-height:44px;padding:6px 0;cursor:pointer}
.results .ai-explain label input{flex:none;width:22px;height:22px;margin:0;accent-color:#0a0b0f;cursor:pointer}
.results .filters button{min-height:40px}

@media(max-width:680px){
  .results .scores .score-card{padding:15px 14px}
  .results .report-header>div{min-width:0;max-width:100%}
  .results .report-date{overflow-wrap:anywhere}
  .results .scores .score-card p{overflow-wrap:break-word}
  /* Readable sizes: labels 11px+, meta 12–13px, running text 14px. */
  .eyebrow,.results .eyebrow{font-size:11px}
  .form-options>span,.data-note,.scan-form>.form-options>span{font-size:13px}
  .results :is(.metrics span,.dist-legend span,.score-key span,.insight-stats span,.check-detail small,.comparison-note,.comparison-row>span,.comparison-head span,.authority-source,.ai-label,.crux-badge,.crux-rating,.insight-rating,.cls-comparison span,.cls-comparison small,.social-image-url,.social-image-url span,.group-filters b){font-size:12px}
  .results .scanner-finding>.expanded-report-heading>.finding-badge,.results .finding-badge{font-size:12px}
  .results :is(.report-date,.score-card p,.metrics p,.metrics-heading span,.report-limit,.social-preview>small,.scanner-notes p,.ai-explain small,.authority-scale-caption,.crux-period,.crux-note,.crux-source,.scanner-explainer,.observatory-card p,.condensed-trigger>span,.check-items li,.passed-list span,.next-heading p,.report-device-picker>span,.insight-cls-head span,.check-detail a,.consultation-note,.example-banner,.report-notes summary,.report-notes p,.check-row-pass .check-summary strong){font-size:13px}
  .results .scores .score-label{font-size:13px;line-height:1.35}
  .results .filters button{font-size:13px;padding:9px 14px}
  .results :is(.insight-heading p,.cls-explanation p,.cls-explanation summary,.crux-scope,.crux-extra,.crux-assessment,.scanner-evidence p,.scanner-evidence li,.scanner-action,.passed-list strong,.ai-explain label,.ai-explain>div:first-child>p,.consultation p,.platform-line,.scanner-summary span,.heading-list li,.social-preview p,.authority-metrics span,.check-detail,.check-summary strong,.ai-items p,.comparison-head strong,.authority-card p,.report-extra p,.report-details-heading p,.all-clear,.comparison-hint){font-size:14px;line-height:1.55}
  .results .consultation .consultation-note{font-size:13px;line-height:1.4}
  .results #ai-output>small,.results .observatory-card small,.results .insight-cls small{font-size:13px}
  .results .cls-compact .cls-comparison>div>small{font-size:12px}
  .results .comparison-card>p,.results .observatory-card>p{font-size:14px;line-height:1.55}
  .results .check-detail p{margin-bottom:10px}

  /* Report tabs: one row you can swipe instead of a three-row grid. */
  .results .report-tabs{position:relative;top:auto;display:flex;flex-wrap:nowrap;gap:6px;padding:6px;margin:22px 0 16px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .results .report-tabs::-webkit-scrollbar{display:none}
  .results .report-tabs [data-report-tab]{flex:none;min-height:44px;padding:10px 16px;font-size:13px;white-space:nowrap}

  /* Long button labels wrap instead of running under the arrow (rolling hover text off). */
  .results .btn{justify-content:space-between;gap:10px}
  .results .btn .btn__label{min-width:0;white-space:normal;overflow:hidden}
  .results .btn .btn__label>span{white-space:normal}
  .results .btn .btn__label>span::after{content:none}
  .results .btn:hover .btn__label>span,.results .btn:focus-visible .btn__label>span{transform:none}

  /* Export & share stays one tap away but no longer competes with the scores. */
  .report-actions #export-toggle.btn{--btn-bg:#fff;--btn-fg:#0a0b0f;--btn-icon-bg:#0a0b0f;--btn-icon-fg:#f4f5f0;box-shadow:inset 0 0 0 1.5px #0a0b0f}
  .report-actions #export-toggle.btn:hover{box-shadow:inset 0 0 0 1.5px #0a0b0f,0 10px 26px -14px #0a0b0f66}
}
@media(max-width:340px){
  .results .scores .score-card{padding:14px 11px}
  .results .scores .score-card p{font-size:12px}
}

/* ---------------------------------------------------------------------------
   2026-10 report additions: Google's screenshot under the device switch, "Fix these first"
   written by Gemini above the Gemini improvement plan, and short tap-to-open findings on phones.
   --------------------------------------------------------------------------- */
.fix-first{display:block;margin:22px 0 0;padding:26px 28px;background:#fff;border:1px solid var(--border);border-radius:14px}
/* The card sits inside the Gemini box, right under "Generate my improvement plan" and above the plan. */
#fix-first-slot:empty{display:none}
#fix-first-slot>.fix-first{margin:0}
/* Plan made once per website and session: the button shows that it is done. */
.results .ai-cta.is-done,.results .ai-cta.is-done:disabled{opacity:1;background:#e4f0dd;color:#0c5932;cursor:default;box-shadow:none}
.results .ai-cta.is-done .btn__icon{display:none}
.results .ai-cta.is-done .btn__label>span,.results .ai-cta.is-done:hover .btn__label>span{transform:none!important}
.results .ai-cta.is-done .btn__label>span::after{content:none}
@media(max-width:620px){.results .authority-card>.btn{width:100%;justify-content:space-between}}
.results .ai-explain label:has(input:disabled){cursor:default}
.results .ai-saved-note{margin:0;padding:12px 14px;border-radius:9px;background:#f3f6ef;color:#3c4738;font-size:13.5px;line-height:1.5}
.fix-first h3{font-size:clamp(23px,2.2vw,28px);line-height:1.15;margin:10px 0 6px;letter-spacing:-.03em}
.fix-first-intro{margin:0;max-width:60ch;color:#4f5a4b;font-size:13.5px;line-height:1.55}
.fix-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.fix-list>li{min-width:0}
.fix-item{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:start;gap:4px 14px;padding:14px 16px;border:1px solid #e3e8de;border-radius:11px;background:#f7f9f5;color:#0a0b0f;transition:border-color .2s,background-color .2s,box-shadow .2s}
@media(hover:hover){.fix-item:hover{border-color:#0a0b0f;background:#fff;box-shadow:0 10px 26px -18px #0a0b0f80}.fix-item:hover .fix-go>span{transform:translateX(3px)}}
.fix-item:active{border-color:#0a0b0f;background:#fff}
.fix-item:focus-visible{outline:3px solid #439829;outline-offset:3px}
.fix-num{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#0a0b0f;color:#f4f5f0;font-size:15px;font-weight:750;line-height:1}
.fix-copy{display:flex;flex-direction:column;gap:4px;min-width:0;padding-top:5px}
.fix-copy>strong{font-size:15px;font-weight:650;line-height:1.35;overflow-wrap:anywhere}
.fix-copy>span{color:#4f5a4b;font-size:13px;line-height:1.5;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.fix-go{align-self:center;display:inline-flex;align-items:center;gap:6px;min-height:34px;font-size:13px;font-weight:650;white-space:nowrap;color:#0a0b0f}
.fix-go>span{transition:transform .2s}

/* Gemini writes the three items: a short wait (status line + placeholder rows), then a note on who chose them. */
.fix-ai-status{display:flex;align-items:center;gap:10px;margin:16px 0 0;color:#3c4738;font-size:13.5px;font-weight:550;line-height:1.45}
.fix-ai-dot{flex:none;width:16px;height:16px;border-radius:50%;border:2px solid #cfd8c9;border-top-color:#0a0b0f;animation:fix-spin .9s linear infinite}
.fix-list-loading{margin-top:12px}
.fix-skeleton{cursor:default;pointer-events:none}
.fix-skeleton .fix-num{background:#dfe5da;color:#8b9585}
.fix-skeleton .fix-copy{gap:9px;padding-top:7px}
.fix-skeleton .fix-copy>i{display:block;height:11px;border-radius:6px;background:linear-gradient(90deg,#e6ebe2 0%,#f4f7f2 45%,#e6ebe2 90%);background-size:220% 100%;animation:fix-shimmer 1.4s ease-in-out infinite}
.fix-skeleton .fix-copy>i:first-child{width:52%;height:13px}
.fix-skeleton .fix-copy>i:last-child{width:86%}
.fix-ai-note{display:flex;align-items:flex-start;gap:8px;margin:14px 0 0;color:#56614f;font-size:12.5px;line-height:1.5}
.fix-ai-note>span{flex:none;color:#0c5932;font-size:12px;line-height:1.55}
.fix-first[data-source="gemini"] .fix-list>li{animation:fix-in .45s cubic-bezier(.2,.7,.2,1) both}
.fix-first[data-source="gemini"] .fix-list>li:nth-child(2){animation-delay:.07s}
.fix-first[data-source="gemini"] .fix-list>li:nth-child(3){animation-delay:.14s}
@keyframes fix-spin{to{transform:rotate(360deg)}}
@keyframes fix-shimmer{0%{background-position:100% 0}100%{background-position:-120% 0}}
@keyframes fix-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:680px){.fix-ai-status{font-size:14px}.fix-ai-note{font-size:13px}}
@media(prefers-reduced-motion:reduce){.fix-ai-dot,.fix-skeleton .fix-copy>i,.fix-first[data-source="gemini"] .fix-list>li{animation:none}}
@media print{.fix-ai-status,.fix-list-loading{display:none!important}}

/* What Google saw: the screenshot from Google's test right under the Mobile / Desktop switch,
   in a phone or a browser frame. */
.report-shot.google-shot{margin:20px 0 0;width:max-content;max-width:100%}
.report-shot.google-shot--mobile .google-shot-frame{width:190px}
.report-shot.google-shot--desktop{width:min(460px,100%)}
.report-shot+.scores{margin-top:20px}
.google-shot{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.google-shot-frame{position:relative;overflow:hidden;width:100%}
.google-shot-frame img{display:block;width:100%;height:auto}
.google-shot--mobile .google-shot-frame{max-width:210px;padding:7px;border-radius:30px;background:#0a0b0f;box-shadow:0 22px 44px -26px #0a0b0fa0}
.google-shot--mobile .google-shot-frame img{border-radius:23px;background:#f3f3ef}
.google-shot--desktop .google-shot-frame{padding-top:24px;border:1px solid #d6ddd0;border-radius:11px;background:#eef1ea;box-shadow:0 22px 44px -30px #0a0b0f80}
.google-shot--desktop .google-shot-frame::before{content:"";position:absolute;top:9px;left:12px;width:7px;height:7px;border-radius:50%;background:#c3cbbb;box-shadow:12px 0 #c3cbbb,24px 0 #c3cbbb}
.google-shot--desktop .google-shot-frame img{border-top:1px solid #d6ddd0;background:#fff}
.google-shot figcaption{max-width:260px;color:#61705b;font-size:12px;line-height:1.45;text-align:center}

@media(max-width:680px){
  .fix-first{padding:20px 16px;border-radius:12px}
  .fix-first h3{font-size:23px}
  .fix-first-intro{font-size:14px}
  .fix-item{grid-template-columns:30px minmax(0,1fr) 18px;gap:6px 12px;padding:14px 12px 14px 14px}
  .fix-num{width:30px;height:30px;font-size:14px}
  .fix-copy{padding-top:3px}
  .fix-copy>span{font-size:14px}
  /* The whole row is the link: on phones only the arrow shows ("See details" stays in the link text). */
  .fix-go{align-self:center;justify-content:flex-end;min-height:0;font-size:0;gap:0}
  .fix-go>span{font-size:18px;color:#56614f}
  .report-shot.google-shot{margin:20px auto 0}
  .report-shot.google-shot--mobile .google-shot-frame{width:170px;padding:6px;border-radius:25px}
  .report-shot.google-shot--mobile .google-shot-frame img{border-radius:20px}
  .google-shot figcaption{font-size:13px}

  /* Findings stay short rows on phones: badge, title and "+"; a tap opens the explanation. */
  .results .scanner-finding.tap-to-open>summary{display:grid;grid-template-columns:minmax(0,1fr) 32px;grid-template-areas:"badge open" "title open";align-items:center;gap:8px 12px;min-height:44px;padding:15px 0}
  .results .scanner-finding.tap-to-open>summary>.finding-badge{grid-area:badge;justify-self:start;min-width:0;padding:5px 10px;line-height:1.35}
  .results .scanner-finding.tap-to-open>summary>strong{grid-area:title;flex:none;min-width:0;font-size:15px;font-weight:650;line-height:1.4;overflow-wrap:anywhere}
  .results .scanner-finding.tap-to-open>summary>span[aria-hidden]{grid-area:open;display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0;border:1px solid #d7ddd2;border-radius:50%;background:#fff;color:#0a0b0f;font-size:19px;line-height:1;transition:transform .2s,background-color .2s}
  .results .scanner-finding.tap-to-open[open]>summary>span[aria-hidden]{transform:rotate(45deg);background:#0a0b0f;border-color:#0a0b0f;color:#f4f5f0}
  .results .scanner-finding.tap-to-open>.scanner-evidence{padding:0 0 18px;line-height:1.6}
  .results .check-row.tap-to-open>summary{display:grid;grid-template-columns:22px minmax(0,1fr) 32px;align-items:center;gap:6px 12px;min-height:44px;padding:14px 0}
  .results .check-row.tap-to-open>summary>.check-symbol{grid-column:1;grid-row:1}
  .results .check-row.tap-to-open>summary>strong{grid-column:2;grid-row:1;min-width:0;font-size:14px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
  .results .check-row.tap-to-open>summary>.check-value{display:inline-block;grid-column:2;grid-row:2;justify-self:start;white-space:normal;font-size:12px}
  .results .check-row.tap-to-open>summary>.check-category{display:none}
  .results .check-row.tap-to-open>summary>span[aria-hidden]{grid-column:3;grid-row:1;display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0;color:#56614f;font-size:18px;transition:transform .2s}
  .results .check-row.tap-to-open[open]>summary>span[aria-hidden]{transform:rotate(180deg)}
  .results .check-row.tap-to-open>.check-detail{padding:0 0 16px;line-height:1.6}
  .results .tap-to-open>summary:focus-visible{outline-offset:2px}
}
@media(prefers-reduced-motion:reduce){.fix-item,.fix-go>span,.results .tap-to-open>summary>span[aria-hidden]{transition:none}}
@media print{
  .fix-first{break-inside:avoid;border:1px solid #ddd}
  .fix-go{display:none!important}
  .fix-item{grid-template-columns:28px minmax(0,1fr);background:#fff;box-shadow:none}
  .fix-copy>span{display:block;-webkit-line-clamp:none;overflow:visible}
  .fix-num{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .google-shot-frame{box-shadow:none!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* Score key right under the four 0–100 Lighthouse cards; website authority (0–10) stands apart:
   beside them on wide screens, below the key on smaller ones. */
.results .score-key{font-size:12px;row-gap:6px}
.results .score-key>strong{font-weight:650;color:#3c4738}
.results .scores>.score-key{grid-column:1/5;margin:2px 0 0}
.results .scores>.score-key>span:last-child{margin-left:0}
@media(min-width:901px){.results .scores>.authority-score-card{grid-column:5;grid-row:1/span 4}}
@media(max-width:900px){
  .results .scores{grid-template-columns:repeat(4,minmax(0,1fr))}
  .results .scores>.score-key,.results .scores>.authority-score-card{grid-column:1/-1}
}
@media(max-width:720px){.results .scores{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.results .score-key>strong{flex-basis:100%;font-size:12px}}