/* The free SEO and GEO report. Loaded on /free-seo-geo-report only.
   The rest of the site is flat white and hairlines; this page is the one
   place it gets atmosphere, so the brand colours drift behind frosted panels.
   The grid, the type and the right angles stay exactly as everywhere else.

   The colour fields are radial gradients, not blurred circles: the site forces
   border-radius:0 on everything, and a gradient needs no radius and no filter,
   so it is cheap enough to animate on a phone. */

.lab { position:relative; overflow:hidden; overflow:clip; isolation:isolate; border-top:0;
  padding:0; min-height:min(100vh, 1100px); background:#FBFBFA; }
/* The padding lives on the wrap, not the section, so the sticky sky starts
   at the very top edge instead of below a white strip. */
.lab > .wrap { padding-top:clamp(56px,8vw,120px); padding-bottom:clamp(72px,9vw,140px); }

/* ---- the sky ------------------------------------------------------------ */
/* Sticky, one screen tall, so the colour stays behind whatever is in view
   however long the report gets. overflow:clip on .lab rather than hidden,
   because hidden would make .lab the scroller and stop sticky working. */
.sky { position:sticky; top:0; height:100vh; margin-bottom:-100vh; z-index:-1; pointer-events:none; overflow:hidden; }
.sky i { position:absolute; display:block; width:70vmax; height:70vmax; opacity:.72;
  will-change:transform; animation:drift 26s var(--ease) infinite alternate; }
.sky i:nth-child(1) { left:-18%; top:-30%; background:radial-gradient(closest-side, rgba(114,164,126,.85), rgba(114,164,126,0)); }
.sky i:nth-child(2) { right:-22%; top:-12%; background:radial-gradient(closest-side, rgba(250,128,114,.62), rgba(250,128,114,0)); animation-duration:31s; animation-delay:-8s; }
.sky i:nth-child(3) { left:18%; bottom:-46%; background:radial-gradient(closest-side, rgba(207,227,211,.95), rgba(207,227,211,0)); animation-duration:22s; animation-delay:-4s; }
.sky i:nth-child(4) { right:4%; bottom:-30%; background:radial-gradient(closest-side, rgba(255,211,201,.9), rgba(255,211,201,0)); animation-duration:35s; animation-delay:-14s; }
.sky i:nth-child(5) { left:38%; top:8%; width:44vmax; height:44vmax; opacity:.28;
  background:radial-gradient(closest-side, rgba(47,79,58,.7), rgba(47,79,58,0)); animation-duration:40s; animation-delay:-20s; }
/* Fine grain, so the gradients read as light rather than as a banding test. */
.sky::after { content:''; position:absolute; inset:0; opacity:.07; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes drift {
  0%   { transform:translate3d(0,0,0) scale(1); }
  33%  { transform:translate3d(6vw,4vh,0) scale(1.12); }
  66%  { transform:translate3d(-4vw,7vh,0) scale(.94); }
  100% { transform:translate3d(3vw,-5vh,0) scale(1.06); }
}
/* While the report runs, the sky wakes up: brighter, quicker. */
.lab[data-state="running"] .sky i { opacity:.9; animation-duration:11s; }
.lab[data-state="running"] .sky i:nth-child(5) { opacity:.4; }
.sky i { transition:opacity 1.6s var(--ease); }

/* ---- glass ------------------------------------------------------------- */
.glass { background:rgba(255,255,255,.62); border:1px solid rgba(10,10,10,.14);
  -webkit-backdrop-filter:blur(22px) saturate(160%); backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 40px 90px -50px rgba(10,10,10,.45), inset 0 1px 0 rgba(255,255,255,.7); }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .glass { background:rgba(255,255,255,.92); } }

/* ---- state switching ---------------------------------------------------- */
.lab__stage { transition:opacity .6s var(--ease), transform .8s var(--ease), filter .6s var(--ease); }
.lab__stage[hidden] { display:none; }
.lab__stage.is-leaving { opacity:0; transform:translateY(-16px) scale(.985); filter:blur(6px); }
.lab__stage.is-entering { opacity:0; transform:translateY(24px); filter:blur(6px); }

/* ---- the form ----------------------------------------------------------- */
.lab__intro { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:var(--gap) calc(var(--gap) * 1.6); align-items:end; }
.lab__h1 { font-size:clamp(2.6rem,6.4vw,6rem); margin-top:18px; }
.lab__intro .lead { margin-top:24px; }
.lab__form { padding:clamp(24px,3vw,40px); }
.lab__label { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.16em; color:var(--muted); margin-bottom:10px; }
.lab__url { display:flex; align-items:baseline; border-bottom:2px solid var(--ink); transition:border-color .25s; }
.lab__url:focus-within { border-color:var(--accent-text); }
.lab__proto { font-size:clamp(1.1rem,2vw,1.6rem); color:var(--muted); letter-spacing:-.02em; padding-right:2px; user-select:none; }
.lab__url input { flex:1; min-width:0; border:0; background:transparent; font:inherit; font-weight:700;
  font-size:clamp(1.4rem,2.6vw,2.2rem); letter-spacing:-.03em; padding:10px 0 12px; color:var(--ink); outline:0; }
.lab__url input::placeholder { color:rgba(10,10,10,.28); }
.lab__pair { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:20px 28px; margin-top:28px; }
.lab__form .field input { background:transparent; }
.lab__form .check { margin-top:24px; }
.lab__go { margin-top:28px; width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 26px; font-size:13px; cursor:pointer; }
.lab__go svg { transition:transform .4s var(--ease); }
.lab__go:hover svg { transform:translateX(6px); }
.lab__go:disabled { opacity:.6; cursor:progress; }
.lab__fine { font-size:12.5px; color:var(--muted); margin-top:16px; line-height:1.5; }
.lab__fine a { color:inherit; }
.lab__err { font-size:14px; color:var(--accent-text); margin-top:14px; min-height:1.3em; }
.lab__ts { margin-top:20px; min-height:65px; }
.lab__promise { list-style:none; margin:clamp(36px,5vw,64px) 0 0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border-top:1px solid var(--ink); }
.lab__promise li { padding:16px 16px 0 0; font-size:13px; line-height:1.4; color:var(--muted); }
.lab__promise b { display:block; color:var(--ink); font-size:12px; text-transform:uppercase; letter-spacing:.12em; margin-bottom:6px; }
.lab__promise span { display:inline-block; font-variant-numeric:tabular-nums; color:var(--accent-text); font-weight:700; margin-right:6px; }

/* ---- running ------------------------------------------------------------ */
.run { display:grid; grid-template-columns:minmax(260px,.8fr) minmax(0,1.4fr); gap:calc(var(--gap) * 1.3); align-items:start; }
.run__side { position:sticky; top:110px; }
.run__host { font-size:clamp(1.5rem,2.6vw,2.4rem); font-weight:700; letter-spacing:-.035em; line-height:1.05; overflow-wrap:anywhere; margin-top:14px; }
.run__plat { font-size:13px; color:var(--muted); margin-top:10px; min-height:1.4em; }

/* The scope: a slow outer dial, a quick salmon arc and the real progress. */
.scope { position:relative; width:min(100%, 320px); aspect-ratio:1; margin-top:clamp(24px,3vw,40px); }
.scope svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.scope__dial { animation:spin 60s linear infinite; transform-origin:50% 50%; }
.scope__arc { animation:spin 2.6s cubic-bezier(.5,.1,.5,.9) infinite; transform-origin:50% 50%; }
.scope__sweep { position:absolute; inset:12%; opacity:.55;
  background:conic-gradient(from 0deg, rgba(114,164,126,0) 0deg, rgba(114,164,126,.0) 280deg, rgba(114,164,126,.55) 355deg, rgba(114,164,126,0) 360deg);
  -webkit-mask:radial-gradient(closest-side, transparent 62%, #000 63%, #000 99%, transparent 100%);
          mask:radial-gradient(closest-side, transparent 62%, #000 63%, #000 99%, transparent 100%);
  animation:spin 3.8s linear infinite; }
.scope__prog { transition:stroke-dashoffset 1s var(--ease); }
.scope__mid { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.scope__pct { font-size:clamp(3rem,6vw,4.6rem); font-weight:700; letter-spacing:-.05em; line-height:1; font-variant-numeric:tabular-nums; }
.scope__pct small { font-size:.4em; letter-spacing:0; color:var(--muted); }
.scope__phase { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.2em; margin-top:10px; color:var(--accent-text); min-height:1.2em; transition:opacity .35s; }
.scope__phase.is-swap { opacity:0; }
.lab[data-state="done"] .scope__arc, .lab[data-state="done"] .scope__sweep { animation-play-state:paused; opacity:0; transition:opacity .6s; }
@keyframes spin { to { transform:rotate(360deg); } }

.phases { list-style:none; padding:0; margin:28px 0 0; display:grid; gap:0; border-top:1px solid rgba(10,10,10,.2); max-width:320px; }
.phases li { position:relative; display:flex; justify-content:space-between; gap:12px; padding:11px 0; font-size:13px; color:var(--muted); border-bottom:1px solid rgba(10,10,10,.1); transition:color .4s; }
.phases li::after { content:''; position:absolute; left:0; bottom:-1px; height:1px; width:0; background:var(--ink); transition:width 1.2s var(--ease); }
.phases li.is-on { color:var(--ink); font-weight:700; }
.phases li.is-on::after { width:60%; background:var(--accent); animation:shimmer 1.6s ease-in-out infinite; }
.phases li.is-done { color:var(--ink); }
.phases li.is-done::after { width:100%; background:var(--ink); animation:none; }
.phases em { font-style:normal; font-variant-numeric:tabular-nums; }
@keyframes shimmer { 50% { opacity:.35; } }

.feed { padding:0; min-height:520px; display:flex; flex-direction:column; }
.feed__top { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 22px; border-bottom:1px solid rgba(10,10,10,.12); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.16em; }
.live { display:inline-flex; align-items:center; gap:8px; color:var(--accent-text); }
.live i { width:8px; height:8px; background:var(--accent); animation:beat 1.4s ease-in-out infinite; }
.lab[data-state="done"] .live i { animation:none; background:var(--green); }
@keyframes beat { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(.55); opacity:.45; } }
.feed__count { color:var(--muted); font-variant-numeric:tabular-nums; }

/* The thinking line: what is being done right now, typed out. */
.think { display:flex; gap:14px; align-items:flex-start; padding:18px 22px; border-bottom:1px solid rgba(10,10,10,.12); background:rgba(255,255,255,.45); min-height:76px; }
.think__dots { flex:0 0 auto; display:flex; gap:4px; padding-top:8px; }
.think__dots i { width:5px; height:5px; background:var(--ink); animation:dot 1.1s ease-in-out infinite; }
.think__dots i:nth-child(2) { animation-delay:.15s; } .think__dots i:nth-child(3) { animation-delay:.3s; }
.lab[data-state="done"] .think__dots i { animation:none; opacity:.25; }
@keyframes dot { 0%,80%,100% { transform:translateY(0); opacity:.25; } 40% { transform:translateY(-4px); opacity:1; } }
.think__text { font-size:15px; line-height:1.5; letter-spacing:-.012em; }
.think__text::after { content:''; display:inline-block; width:7px; height:1.05em; margin-left:2px; vertical-align:-2px; background:var(--accent); animation:caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity:0; } }

.rows { list-style:none; margin:0; padding:6px 0; flex:1; max-height:min(64vh, 620px); overflow:auto; scroll-behavior:smooth; overscroll-behavior:contain;
  -webkit-mask:linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
          mask:linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); }
.row { display:grid; grid-template-columns:22px minmax(0,1fr); gap:14px; padding:12px 22px; animation:rise .6s var(--ease) both; }
.row + .row { border-top:1px solid rgba(10,10,10,.07); }
.row__t { font-size:14.5px; font-weight:700; letter-spacing:-.012em; line-height:1.35; }
.row__f { font-size:13.5px; color:var(--muted); line-height:1.45; margin-top:3px; overflow-wrap:anywhere; }
.row--phase { padding:18px 22px 8px; grid-template-columns:1fr; }
.row--phase span { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.22em; color:var(--accent-text); }
@keyframes rise { from { opacity:0; transform:translateY(10px); filter:blur(4px); } to { opacity:1; transform:none; filter:none; } }

/* Status marks. Drawn, not dropped in: the stroke runs on like a pen. */
.mark { width:22px; height:22px; margin-top:1px; }
.mark circle { fill:none; stroke-width:1.5; }
.mark path { fill:none; stroke-width:2; stroke-linecap:square; stroke-dasharray:24; stroke-dashoffset:24; animation:draw .5s .15s var(--ease) forwards; }
.mark--pass circle { stroke:var(--green); fill:rgba(114,164,126,.14); } .mark--pass path { stroke:#2F6B3E; }
.mark--warn circle { stroke:var(--accent); fill:rgba(250,128,114,.16); } .mark--warn path { stroke:#B5442F; }
.mark--fail circle { stroke:var(--accent-text); fill:rgba(191,49,34,.1); } .mark--fail path { stroke:var(--accent-text); }
.mark--info circle { stroke:var(--muted); } .mark--info path { stroke:var(--muted); }
@keyframes draw { to { stroke-dashoffset:0; } }

/* Live cards: what Google shows, what a machine can find out. */
.peek { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:18px; }
.peek > * { animation:rise .8s var(--ease) both; }
.rcard { padding:20px 22px; }
.rcard__h { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.2em; color:var(--muted); margin-bottom:14px; }
.serp__site { display:flex; gap:10px; align-items:center; font-size:13px; color:#202124; }
.serp__fav { width:26px; height:26px; flex:0 0 26px; background:#F1F3F4; display:grid; place-items:center; font-size:12px; font-weight:700; color:#5F6368; }
.serp__url { font-size:12px; color:#4D5156; line-height:1.3; }
.serp__title { font-family:Arial, sans-serif; font-size:19px; line-height:1.3; color:#1A0DAB; margin-top:8px; overflow-wrap:anywhere; }
.serp__desc { font-family:Arial, sans-serif; font-size:14px; line-height:1.55; color:#4D5156; margin-top:4px; overflow-wrap:anywhere; }
.serp__desc.is-missing { color:var(--accent-text); font-style:italic; }
.machine { display:grid; grid-template-columns:auto minmax(0,1fr); gap:7px 16px; font-size:13.5px; margin:0; }
.machine dt { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); padding-top:2px; }
.machine dd { margin:0; overflow-wrap:anywhere; }
.machine dd.is-missing { color:var(--accent-text); }

.run__skip { margin-top:18px; display:none; }
.run__skip.is-on { display:inline-block; animation:rise .6s var(--ease) both; }

/* ---- the report ---------------------------------------------------------- */
.rep__head { display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:center; padding:clamp(28px,4vw,52px); }
.dial { position:relative; width:clamp(180px,22vw,260px); aspect-ratio:1; }
.dial svg { width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.dial__track { stroke:rgba(10,10,10,.1); }
.dial__fill { transition:stroke-dashoffset 2.2s var(--ease-long); }
.dial__num { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.dial__num b { font-size:clamp(3.6rem,7vw,5.6rem); letter-spacing:-.06em; line-height:.9; font-variant-numeric:tabular-nums; }
.dial__num span { font-size:12px; color:var(--muted); letter-spacing:.14em; text-transform:uppercase; margin-top:8px; }
.rep__head .eyebrow { overflow-wrap:anywhere; }
.rep__grade { font-size:clamp(2rem,4.4vw,3.6rem); font-weight:700; letter-spacing:-.04em; line-height:1; margin-top:12px; }
.rep__line { font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.4; letter-spacing:-.015em; margin-top:16px; max-width:52ch; }
.rep__meta { display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:20px; font-size:13px; color:var(--muted); }
.rep__meta b { color:var(--ink); }
.rep__sent { display:inline-flex; gap:10px; align-items:flex-start; margin-top:20px; font-size:14px; padding:10px 14px; background:rgba(114,164,126,.16); border:1px solid rgba(47,79,58,.25); }
.rep__sent[hidden] { display:none; }

.rep__news { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 28px; margin-top:18px; padding:20px 24px; }
.rep__news p { font-size:15px; line-height:1.5; max-width:62ch; }
.rep__news .btn { cursor:pointer; overflow-wrap:anywhere; }
.rep__newsnote { flex-basis:100%; font-size:14px; color:var(--muted); }
.rep__newsnote:empty { display:none; }
.cats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:rgba(10,10,10,.12); margin-top:18px; border:1px solid rgba(10,10,10,.12); }
.cat { background:rgba(255,255,255,.7); padding:22px 22px 24px; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); animation:rise .8s var(--ease) both; }
.cat__top { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.cat__name { font-weight:700; font-size:15px; letter-spacing:-.015em; }
.cat__score { font-size:2rem; font-weight:700; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.cat__bar { height:4px; background:rgba(10,10,10,.1); margin-top:12px; overflow:hidden; }
.cat__bar i { display:block; height:100%; width:0; transition:width 1.6s var(--ease-long); }
.cat__blurb { font-size:13px; color:var(--muted); margin-top:12px; line-height:1.45; }

.rep__peek { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:18px; }
.rep__sec { margin-top:clamp(56px,7vw,96px); }
.rep__sec > .h2 { margin-top:12px; }
.rep__sec > .lead { margin-top:16px; }

.group { margin-top:40px; }
.group__h { display:flex; justify-content:space-between; align-items:baseline; gap:20px; border-bottom:1px solid var(--ink); padding-bottom:12px; }
.group__h h3 { font-size:clamp(1.2rem,2vw,1.6rem); font-weight:700; letter-spacing:-.025em; }
.group__h p { font-size:13px; color:var(--muted); }
.task { border-bottom:1px solid rgba(10,10,10,.14); background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.task summary { list-style:none; cursor:pointer; display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:16px; align-items:start; padding:20px 20px 20px 18px; }
.task summary::-webkit-details-marker { display:none; }
.task summary:hover .task__title { color:var(--accent-text); }
.task__n { font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--muted); padding-top:3px; }
.task__title { font-size:17px; font-weight:700; letter-spacing:-.018em; line-height:1.3; transition:color .2s; }
.task__found { font-size:14px; color:var(--muted); margin-top:5px; line-height:1.45; overflow-wrap:anywhere; }
.task__chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.chip { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; padding:5px 8px; border:1px solid rgba(10,10,10,.18); color:var(--ink); background:rgba(255,255,255,.6); }
.chip--fail { border-color:var(--accent-text); color:var(--accent-text); }
.task__plus { width:22px; height:22px; position:relative; margin-top:3px; }
.task__plus::before, .task__plus::after { content:''; position:absolute; left:50%; top:50%; width:14px; height:1.5px; background:var(--ink); transform:translate(-50%,-50%); transition:transform .4s var(--ease); }
.task__plus::after { transform:translate(-50%,-50%) rotate(90deg); }
.task[open] .task__plus::after { transform:translate(-50%,-50%) rotate(0deg); }
.task__body { display:grid; grid-template-columns:44px minmax(0,1fr); gap:16px; padding:0 20px 26px 18px; animation:rise .5s var(--ease) both; }
.task__body > div { grid-column:2; max-width:68ch; }
.task__body h4 { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.16em; color:var(--muted); margin:16px 0 6px; }
.task__body h4:first-child { margin-top:0; }
.task__body p, .task__body li { font-size:15.5px; line-height:1.6; }
.task__body ol { margin:0; padding-left:20px; list-style:decimal; }
.task__body li::marker { font-weight:700; color:var(--accent-text); }
.task__body li + li { margin-top:4px; }
.task__tip { margin-top:16px; padding:14px 16px; background:rgba(114,164,126,.14); border:1px solid rgba(47,79,58,.18); font-size:14.5px; line-height:1.55; }

.all { margin-top:24px; border-top:1px solid var(--ink); }
.all summary { cursor:pointer; padding:16px 0; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; list-style:none; }
.all summary::-webkit-details-marker { display:none; }
.all ul { list-style:none; margin:0; padding:0; columns:2; column-gap:var(--gap); }
.all li { break-inside:avoid; display:grid; grid-template-columns:22px minmax(0,1fr); gap:12px; padding:10px 0; border-top:1px solid rgba(10,10,10,.08); font-size:14px; }
.all li .mark path { animation:none; stroke-dashoffset:0; }
.all small { display:block; color:var(--muted); font-size:13px; margin-top:2px; }

.rep__cta { margin-top:clamp(56px,7vw,96px); background:var(--ink); color:var(--paper); padding:clamp(32px,5vw,64px); position:relative; overflow:hidden; }
.rep__cta::before { content:''; position:absolute; width:60vmax; height:60vmax; right:-25vmax; top:-30vmax; background:radial-gradient(closest-side, rgba(250,128,114,.35), rgba(250,128,114,0)); animation:drift 30s var(--ease) infinite alternate; pointer-events:none; }
.rep__cta::after { content:''; position:absolute; width:50vmax; height:50vmax; left:-20vmax; bottom:-34vmax; background:radial-gradient(closest-side, rgba(114,164,126,.35), rgba(114,164,126,0)); animation:drift 36s var(--ease) infinite alternate-reverse; pointer-events:none; }
.rep__cta > * { position:relative; z-index:1; }
.rep__cta .lead { color:rgba(255,255,255,.78); margin-top:18px; max-width:56ch; }
.rep__cta .hero__cta { display:flex; flex-wrap:wrap; gap:12px; }
.rep__cta .btn--ghost { color:var(--paper); border-color:var(--paper); }
.rep__cta .btn--ghost:hover { background:var(--paper); color:var(--ink); }
.rep__again { margin-top:28px; }

.fatal { padding:clamp(28px,4vw,48px); max-width:720px; }
.fatal .h2 { margin-top:12px; }
.fatal p { margin-top:14px; }
.fatal .btn { margin-top:24px; }

/* ---- below the lab --------------------------------------------------------- */
.what { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 var(--gap); margin-top:clamp(32px,4vw,56px); }
.what > div { border-top:1px solid var(--ink); padding:22px 0 36px; }
.what h3 { font-size:1.15rem; font-weight:700; letter-spacing:-.02em; }
.what p { font-size:15px; color:var(--muted); margin-top:10px; line-height:1.55; }
.what span { display:block; font-size:11px; font-weight:700; letter-spacing:.2em; color:var(--accent-text); margin-bottom:12px; }

/* ---- small screens ------------------------------------------------------- */
@media (max-width:1024px) {
  .lab__intro { grid-template-columns:minmax(0,1fr); }
  .lab__promise { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .run { grid-template-columns:minmax(0,1fr); }
  .run__side { position:static; display:grid; grid-template-columns:minmax(0,1fr) 150px; gap:20px; align-items:center; }
  .run__side .phases { display:none; }
  .scope { width:150px; margin-top:0; grid-row:1 / span 2; grid-column:2; }
  .scope__pct { font-size:2.3rem; }
  .scope__phase { font-size:9px; letter-spacing:.14em; }
  .cats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .what { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:720px) {
  .lab__pair { grid-template-columns:minmax(0,1fr); }
  .lab__promise { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .peek, .rep__peek { grid-template-columns:minmax(0,1fr); }
  .rep__head { grid-template-columns:minmax(0,1fr); justify-items:start; }
  .cats { grid-template-columns:minmax(0,1fr); }
  .all ul { columns:1; }
  .task summary { grid-template-columns:28px minmax(0,1fr) auto; gap:10px; padding:18px 14px; }
  .task__body { grid-template-columns:28px minmax(0,1fr); gap:10px; padding:0 14px 22px; }
  .feed { min-height:0; }
  .rows { max-height:56vh; }
  .sky i { width:110vmax; height:110vmax; }
}
@media (prefers-reduced-motion:reduce) {
  .sky i, .scope__dial, .scope__arc, .scope__sweep, .rep__cta::before, .rep__cta::after { animation:none !important; }
}