/* Homepage. Extracted from an inline <style> block in Index.cshtml so it is
   cacheable, minifiable, visible to the design system, and one less reason
   to keep 'unsafe-inline' in the style-src policy. */

.review-trust{position:relative}.review-trust-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;margin-bottom:28px}.review-trust-heading h2{max-width:760px;margin:.45rem 0 1rem;font-size:clamp(2.2rem,5vw,4.8rem);letter-spacing:-.055em;line-height:1}.review-trust-heading p{color:var(--dr-text-muted)}.review-aggregate{min-width:190px;padding-left:22px;border-left:1px solid var(--dr-line)}.review-aggregate strong{display:block;font-size:2.6rem;letter-spacing:-.06em;color:var(--dr-text)}.review-aggregate strong span{font-size:1rem;color:var(--dr-text-muted)}.review-aggregate small{display:block;max-width:180px;color:var(--dr-text-muted)}.review-empty{padding:32px;border:1px solid var(--dr-line);border-radius:16px;background:var(--dr-navy-850)}.review-empty p{margin:.45rem 0 0;color:var(--dr-text-muted)}.review-trust-strip{border-block:1px solid var(--dr-line);background:transparent}.review-trust-strip .site-container{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;padding-block:14px;color:var(--dr-text-muted);font-size:var(--dr-text-xs)}.review-trust-strip span::first-letter{color:var(--dr-green)}@media(max-width:860px){.review-trust-heading{grid-template-columns:1fr}.review-aggregate{padding-left:0;padding-top:16px;border-left:0;border-top:1px solid var(--dr-line)}.review-grid{grid-template-columns:1fr}.review-card--featured{grid-row:auto}}@media(prefers-reduced-motion:reduce){.review-card{transition:none}.review-card:hover{transform:none}}

/* ---- Verified review cards ---------------------------------------------
   The section renders one featured review and at most two supporting ones,
   so the grid only has to compose at 1, 2 or 3 cards. */
.review-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--dr-space-3);
    align-items: start;
}

.review-grid--1 {
    grid-template-columns: minmax(0, 720px);
}

.review-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.review-grid--3 .review-card--featured {
    grid-row: span 2;
}

.review-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    padding: var(--dr-space-5);
    border: 1px solid var(--dr-line);
    border-radius: var(--dr-radius-lg);
    background: var(--dr-navy-850);
    transition:
        border-color var(--dr-motion-base) var(--dr-ease),
        transform var(--dr-motion-base) var(--dr-ease);
}

.review-card--featured {
    padding: var(--dr-space-8);
}

.review-card:hover {
    border-color: var(--dr-line-strong);
    transform: translateY(-2px);
}

.review-stars-public {
    color: var(--dr-green);
    letter-spacing: 0.1em;
}

.review-card h3 {
    margin: var(--dr-space-3) 0 var(--dr-space-2);
    font-size: 1rem;
    font-weight: 600;
}

.review-card--featured h3 {
    font-size: 1.15rem;
}

.review-card blockquote {
    flex: 1 1 auto;
    margin: 0;
    color: var(--dr-text-soft);
    font-size: var(--dr-text-base);
    line-height: 1.65;
}

.review-card--featured blockquote {
    font-size: var(--dr-text-md);
}

.review-card footer {
    display: flex;
    align-items: center;
    gap: var(--dr-space-3);
    margin-top: var(--dr-space-5);
    padding-top: var(--dr-space-4);
    border-top: 1px solid var(--dr-line);
}

.review-card footer img {
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid var(--dr-line);
}

.review-card footer div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.review-card footer strong {
    font-size: var(--dr-text-sm);
}

/* Verification is stated in words and marked with a glyph, so it does not
   depend on the green alone. The status comes from the backend. */
.review-verified {
    display: inline-flex;
    align-items: center;
    gap: var(--dr-space-1);
    color: var(--dr-green);
    font-size: var(--dr-text-xs);
    font-weight: 600;
}

.review-verified::before {
    content: "\2713";
}

@media (max-width: 860px) {
    .review-grid,
    .review-grid--1,
    .review-grid--2 {
        grid-template-columns: 1fr;
    }

    .review-grid--3 .review-card--featured {
        grid-row: auto;
    }

    .review-card--featured {
        padding: var(--dr-space-5);
    }
}

/* =========================================================================
   Hero: the signature product sequence
   -------------------------------------------------------------------------
   One listing moving through DETECT -> ANALYSE -> COMPARE -> SCORE -> DECIDE.

   The motion is a single staggered entrance, not a loop. Nothing on this page
   moves forever. The stages are visible by default and only animate while the
   document is in the "running" motion state, which v2.js sets and clears for
   reduced-motion, background tabs and an off-screen hero. If the script never
   runs, the markup's data-motion="paused" leaves everything legible.
   ========================================================================= */

.dr-hero {
    padding-block: clamp(var(--dr-space-14), 9vw, 120px) var(--dr-space-18);
}

.dr-hero .site-container {
    display: grid;
    gap: clamp(var(--dr-space-8), 5vw, var(--dr-space-18));
}

.dr-hero-copy {
    max-width: 62ch;
}

.dr-hero h1 {
    margin: var(--dr-space-4) 0 var(--dr-space-5);
    font-size: clamp(2.5rem, 7vw, 4.6rem);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1.02;
}

.dr-hero h1 em {
    color: var(--dr-green);
    font-style: normal;
}

.dr-hero-lead {
    margin: 0 0 var(--dr-space-2);
    font-size: clamp(1.1rem, 2.2vw, 1.4rem);
    font-weight: 500;
}

.dr-hero-sub {
    max-width: 52ch;
    margin: 0 0 var(--dr-space-6);
    color: var(--dr-text-muted);
    font-size: var(--dr-text-md);
    line-height: 1.6;
}

/* ---- Pipeline panel ----------------------------------------------------- */
.dr-pipeline {
    margin: 0;
    border: 1px solid var(--dr-line);
    border-radius: var(--dr-radius-lg);
    background: var(--dr-navy-850);
    overflow: hidden;
}

.dr-pipeline-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--dr-space-3);
    padding: var(--dr-space-4) var(--dr-space-5);
    border-bottom: 1px solid var(--dr-line);
    background: var(--dr-navy-800);
}

.dr-pipeline-title {
    display: inline-flex;
    align-items: center;
    gap: var(--dr-space-2);
    color: var(--dr-text);
    font-size: var(--dr-text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dr-pipeline .v2-demo-label {
    color: var(--dr-warning);
    font-size: var(--dr-text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---- Stages ------------------------------------------------------------- */
.dr-stages {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dr-stage {
    display: flex;
    flex-direction: column;
    gap: var(--dr-space-2);
    min-width: 0;
    padding: var(--dr-space-5);
    border-right: 1px solid var(--dr-line);
}

.dr-stage:last-child {
    border-right: 0;
}

.dr-stage-label {
    display: flex;
    align-items: center;
    gap: var(--dr-space-2);
    margin: 0;
    color: var(--dr-text-muted);
    font-size: var(--dr-text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dr-stage-num {
    color: var(--dr-green);
    font-variant-numeric: tabular-nums;
}

.dr-stage-title {
    margin: 0;
    color: var(--dr-text);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25;
}

.dr-stage-meta {
    margin: 0;
    color: var(--dr-text-muted);
    font-size: var(--dr-text-sm);
    line-height: 1.5;
}

.dr-stage-value {
    margin: auto 0 0;
    color: var(--dr-text);
    font-size: 1.6rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.dr-stage-value span {
    display: block;
    color: var(--dr-text-muted);
    font-size: var(--dr-text-xs);
    font-weight: 400;
    letter-spacing: 0;
}

.dr-stage-facts {
    display: grid;
    gap: var(--dr-space-2);
    margin: auto 0 0;
}

.dr-stage-facts > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--dr-space-3);
}

.dr-stage-facts dt {
    color: var(--dr-text-muted);
    font-size: var(--dr-text-xs);
}

.dr-stage-facts dd {
    margin: 0;
    color: var(--dr-text);
    font-size: var(--dr-text-sm);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.dr-score {
    margin-top: auto;
}

.dr-score-value {
    margin: 0;
    color: var(--dr-green);
    font-size: 2.6rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1;
}

.dr-score-value span {
    color: var(--dr-text-muted);
    font-size: 1rem;
    font-weight: 400;
}

.dr-score-note {
    margin: var(--dr-space-2) 0 0;
    color: var(--dr-text-muted);
    font-size: var(--dr-text-xs);
    line-height: 1.5;
}

/* ---- Distribution sparkline --------------------------------------------- */
.dr-spark {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 46px;
    margin-top: auto;
}

.dr-spark i {
    flex: 1 1 0;
    min-height: 2px;
    border-radius: 1px;
    background: var(--dr-green);
    opacity: 0.55;
}

/* The illustrative distribution. These are fixed decorative proportions, not
   measured data, so they belong in the stylesheet rather than in a style
   attribute on every bar. */
.dr-spark i:nth-child(1) { height: 25%; }
.dr-spark i:nth-child(2) { height: 38%; }
.dr-spark i:nth-child(3) { height: 52%; }
.dr-spark i:nth-child(4) { height: 70%; }
.dr-spark i:nth-child(5) { height: 90%; }
.dr-spark i:nth-child(6) { height: 100%; }
.dr-spark i:nth-child(7) { height: 82%; }
.dr-spark i:nth-child(8) { height: 60%; }
.dr-spark i:nth-child(9) { height: 43%; }
.dr-spark i:nth-child(10) { height: 24%; }
.dr-spark i:nth-child(11) { height: 14%; }

.dr-pipeline-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--dr-space-3);
    padding: var(--dr-space-4) var(--dr-space-5);
    border-top: 1px solid var(--dr-line);
    color: var(--dr-text-muted);
    font-size: var(--dr-text-sm);
}

.v2-motion-toggle {
    min-height: 34px;
    padding: var(--dr-space-1) var(--dr-space-3);
    border: 1px solid var(--dr-line);
    border-radius: var(--dr-radius-pill);
    background: transparent;
    color: var(--dr-text-soft);
    font-size: var(--dr-text-xs);
    cursor: pointer;
    white-space: nowrap;
}

.v2-motion-toggle:hover {
    border-color: var(--dr-line-strong);
    color: var(--dr-text);
}

/* ---- The entrance ------------------------------------------------------- */
@keyframes dr-stage-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@keyframes dr-spark-grow {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

:root[data-motion="running"] .dr-stage {
    animation: dr-stage-in var(--dr-motion-story) var(--dr-ease-out) both;
}

:root[data-motion="running"] .dr-stage:nth-child(1) { animation-delay: 0ms; }
:root[data-motion="running"] .dr-stage:nth-child(2) { animation-delay: 160ms; }
:root[data-motion="running"] .dr-stage:nth-child(3) { animation-delay: 320ms; }
:root[data-motion="running"] .dr-stage:nth-child(4) { animation-delay: 480ms; }
:root[data-motion="running"] .dr-stage:nth-child(5) { animation-delay: 640ms; }

:root[data-motion="running"] .dr-spark i {
    transform-origin: bottom;
    animation: dr-spark-grow var(--dr-motion-slow) var(--dr-ease-out) both;
    /* --bar is a length percentage, so it cannot be used in a time calc().
       The bars are staggered positionally instead. */
    animation-delay: 420ms;
}

:root[data-motion="running"] .dr-spark i:nth-child(2) { animation-delay: 450ms; }
:root[data-motion="running"] .dr-spark i:nth-child(3) { animation-delay: 480ms; }
:root[data-motion="running"] .dr-spark i:nth-child(4) { animation-delay: 510ms; }
:root[data-motion="running"] .dr-spark i:nth-child(5) { animation-delay: 540ms; }
:root[data-motion="running"] .dr-spark i:nth-child(6) { animation-delay: 570ms; }
:root[data-motion="running"] .dr-spark i:nth-child(7) { animation-delay: 600ms; }
:root[data-motion="running"] .dr-spark i:nth-child(8) { animation-delay: 630ms; }
:root[data-motion="running"] .dr-spark i:nth-child(9) { animation-delay: 660ms; }
:root[data-motion="running"] .dr-spark i:nth-child(10) { animation-delay: 690ms; }
:root[data-motion="running"] .dr-spark i:nth-child(11) { animation-delay: 720ms; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
    .dr-stages {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dr-stage {
        border-bottom: 1px solid var(--dr-line);
    }

    .dr-stage:nth-child(3n) {
        border-right: 0;
    }
}

@media (max-width: 640px) {
    .dr-stages {
        grid-template-columns: 1fr;
    }

    .dr-stage {
        border-right: 0;
        gap: var(--dr-space-3);
        padding: var(--dr-space-4);
    }

    .dr-stage:last-child {
        border-bottom: 0;
    }

    .dr-stage-value,
    .dr-stage-facts,
    .dr-spark,
    .dr-score {
        margin-top: 0;
    }

    .dr-pipeline-foot {
        align-items: flex-start;
        flex-direction: column;
    }

    .v2-motion-toggle {
        min-height: var(--dr-touch-min);
    }
}

@media (prefers-reduced-motion: reduce) {
    :root[data-motion="running"] .dr-stage,
    :root[data-motion="running"] .dr-spark i {
        animation: none;
    }
}

/* The lifecycle example names an illustrative listing. It is presented like a
   heading but is not one: demo data does not belong in the document outline. */
.v2-outcome-title {
    margin: 0 0 var(--dr-space-2);
    color: var(--dr-text);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
}