/* The checker's look, shared by /confidentgarbage and /report.
   One copy, because a second would drift: three separate copies of the
   house rules drifted apart this week before anyone noticed. */
/* A single-purpose page. The shell keeps the mark and the one way in, so
       nothing competes with the box the reader came here to fill. */
    .nav-links, .nav-login, .hamburger { display: none !important; }

    /* One band, one action. Ink rather than a field of orange, which put the
       loudest colour on the page under the quietest reading of it. */
    .cg-cta { margin-top: 48px; background: var(--bg-dark); color: #fff;
      border-radius: 14px; padding: 34px 38px;
      display: flex; align-items: center; justify-content: space-between; gap: 40px; }
    .cg-cta-text { max-width: 58ch; }
    .cg-cta h2 { font-size: 25px; font-weight: 600; letter-spacing: -.025em; line-height: 1.25;
      margin: 0 0 10px; color: #fff; text-wrap: balance; }
    .cg-cta p { font-size: 15.5px; line-height: 1.6; margin: 0; color: rgba(255, 255, 255, .76); }
    .cg-cta-go { flex: none; display: inline-flex; align-items: center; gap: 9px;
      font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap;
      padding: 15px 26px; border-radius: 7px;
      background: var(--brand-primary); color: #fff;
      transition: background .15s ease; }
    .cg-cta-go:hover { background: var(--brand-primary-hover); }
    @media (max-width: 780px) {
      .cg-cta { flex-direction: column; align-items: flex-start; gap: 24px; padding: 28px 26px; }
      .cg-cta h2 { font-size: 22px; }
    }

    /* Two boxes of equal height at the top, the input matched to the score panel
       beside it. Everything the grading produces runs full width underneath. */
    /* The headline, the sentence and the box you type in are one thing. As two
       sections they stacked 62px of hero padding onto 88px of section padding
       and left 150px of empty ground between the promise and the box. */
    /* The whole tool should sit above the fold on a laptop. Measured at
       1440x764, a Chrome window on a 13in MacBook: the Grade it button ended
       33px below it, so the first thing a visitor had to do was scroll to find
       the thing they came for. The top comes in, and a tall window gets the
       breathing room back. */
    .page-hero { padding: 24px 0 22px; border-bottom: 0; }
    @media (min-height: 900px) { .page-hero { padding-top: 72px; } }
    /* The two names are the argument, so the second one carries the colour of
       the end of the dial it sits at, and the marks for both stand beside them. */
    /* The stamps run the height of the words: the green one starts where the
       headline starts, the red one finishes where the sentence under it
       finishes, so the pair falls across the block. */
    .cg-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px;
      align-items: stretch; }
    .cg-h1-b { color: var(--brand-ink); }
    .cg-stamps { display: flex; align-items: stretch; }
    .cg-stamps img:first-child { align-self: flex-start; }
    .cg-stamps img:last-child { align-self: flex-end; }
    .cg-stamps img { width: 138px; height: auto; }
    .cg-stamps img:first-child { transform: rotate(-8deg); }
    .cg-stamps img:last-child { margin-left: -26px; transform: rotate(7deg); }
    @media (max-width: 900px) {
      .cg-hero { grid-template-columns: 1fr; gap: 26px; }
      .cg-stamps img { width: 104px; }
    }
    /* The site hides a hard break in a page headline on a phone, because
       elsewhere it strands a two-word orphan. Here the break carries the
       argument: without it the line reads "Grounded Judgementor". */
    @media (max-width: 768px) {
      .page-hero h1 br { display: inline; }
    }
    /* The count, the upload and the button do not fit on one line at 375px:
       Grade it ran 15px past the right edge. The count takes its own line and
       the two controls share the next one. */
    @media (max-width: 560px) {
      .cg-bar { flex-wrap: wrap; gap: 12px; }
      .cg-count { width: 100%; order: 2; }
      .cg-actions { width: 100%; order: 1; }
      .cg-upload, #cg-go { flex: 1 1 0; justify-content: center; text-align: center; }
    }
    .page-hero .lede { margin-bottom: 0; }
    .cg-tool { padding: 20px 0 112px; }
    @media (min-height: 900px) { .cg-tool { padding-top: 30px; } }

    .cg-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
      gap: 32px; align-items: stretch; }
    .cg-top form { display: flex; flex-direction: column; min-height: 372px; }

    .cg-text { flex: 1 1 auto; min-height: 240px; width: 100%; resize: vertical;
      font-family: var(--mono); font-size: 13.5px; line-height: 1.65; color: var(--text-primary);
      background: var(--bg-white); border: 1px solid var(--border-medium); border-radius: 10px;
      padding: 16px 18px; }
    .cg-text:focus { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
    .cg-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px;
      margin-top: 14px; }
    .cg-count { font-family: var(--mono); font-size: 11.5px; color: var(--text-tertiary); }
    .cg-actions { display: flex; align-items: center; gap: 12px; flex: none; }
    .cg-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
    .cg-upload { display: inline-flex; align-items: center; gap: 9px;
      font-size: 15px; font-weight: 500; color: var(--text-primary); cursor: pointer;
      /* The button beside it computes to 41px. Set, not derived from padding,
         so half-pixel rounding cannot leave the pair a pixel apart. */
      box-sizing: border-box; height: 41px; padding: 0 22px;
      border: 1.5px solid var(--border-medium); border-radius: 6px;
      transition: border-color .15s ease, color .15s ease; white-space: nowrap; }
    .cg-upload svg { flex: none; }
    .cg-upload:hover { border-color: var(--brand-primary); color: var(--brand-ink); }
    .cg-file-input:focus-visible + .cg-upload { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
    .cg-picked { display: flex; align-items: center; gap: 10px; font-family: var(--mono);
      font-size: 11.5px; color: var(--text-primary); }
    .cg-picked button { appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
      font-family: var(--mono); font-size: 11.5px; color: var(--brand-ink); text-decoration: underline; }
    .cg-text[disabled] { color: var(--text-tertiary); background: var(--bg-light); }
    .cg-error { color: var(--brand-ink); font-size: 14.5px; margin-top: 14px; }
    .cg-progress { font-size: 13.5px; color: var(--text-secondary); margin-top: 10px; }
    .cg-detail { font-family: var(--mono); font-size: 12.5px; line-height: 1.7;
      color: var(--text-secondary); background: var(--bg-light); border: 1px solid var(--border-medium);
      border-radius: 8px; padding: 12px 14px; margin-top: 10px; white-space: pre-wrap; overflow-x: auto; }

    /* Score panel */
    /* Grading runs for the better part of a minute against an empty dial. The
       panel says what is being done while it waits. The cadence is its own: the
       readings run in parallel, so there is no per-step timing to report. */
    /* The dial stays where it is and the step being worked on appears over it,
       one at a time. A list of what has not happened yet is a plan, not
       progress. */
    /* The dial keeps working and the step sits under it, in the space the
       verdict will take, so nothing is written across the needle or the number. */
    /* Over the block the verdict will occupy, not pinned to the foot of the
       panel. Pinned, it left a 59px hole between the dial and the step text
       that closed the moment a score arrived, so the panel looked half empty
       for the whole 40 seconds a reader is watching it. */
    .cg-working { position: absolute; left: 0; right: 0; bottom: 22px; height: 104px;
      z-index: 2; display: flex; flex-direction: column; align-items: center;
      justify-content: center; gap: 9px; padding: 0 24px; }
    .cg-scorecol.is-working .cg-empty .cg-gauge { opacity: 1; }
    .cg-scorecol.is-working .cg-empty-note { visibility: hidden; }
    .cg-scorecol.is-working #cg-needle-idle { transition: none; }
    .cg-scorecol.is-working .cg-empty .cg-gauge-num { fill: var(--text-tertiary); }
    .cg-step { font-size: 15px; font-weight: 500; text-align: center; line-height: 1.45;
      color: var(--text-primary); animation: cg-step-in .45s ease both; }
    @keyframes cg-step-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
    .cg-work-head { display: flex; align-items: center; gap: 9px; font-family: var(--mono);
      font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
      color: var(--brand-ink); }
    .cg-work-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-primary);
      animation: cg-pulse 1.4s ease-in-out infinite; }
    @keyframes cg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
    @media (prefers-reduced-motion: reduce) {
      .cg-work-dot, .cg-step { animation: none; }
    }

    .cg-scorecol [hidden] { display: none !important; }
    .cg-scorecol { position: relative; --cg-b5: #3f6a4c; --cg-b4: #7d8a3c; --cg-b3: #b08423;
      --cg-b2: #c0682b; --cg-b1: #a33327; --cg-pos: #7a5a8f;
      background: var(--bg-white); border: 1px solid var(--border-medium); border-radius: 10px;
      padding: 22px 24px; text-align: center; display: flex; flex-direction: column;
      justify-content: center; min-height: 372px; }
    .cg-empty { color: var(--text-tertiary); }
    .cg-empty .cg-gauge { opacity: .28; }
    .cg-empty-note { font-family: var(--mono); font-size: 12.5px; line-height: 1.7;
      margin-top: 0; min-height: 104px; display: flex; align-items: center;
      justify-content: center; }

    .cg-gauge { width: 100%; max-width: 300px; height: auto; display: block; margin: 0 auto; }
    .cg-tick { font-family: var(--mono); font-size: 13px; fill: var(--text-tertiary); }
    .cg-gauge-num { font-family: var(--mono); font-size: 58px; font-weight: 600;
      fill: var(--text-primary); letter-spacing: -.03em; }
    .cg-gauge-of { font-family: var(--mono); font-size: 12px; fill: var(--text-tertiary);
      letter-spacing: .1em; text-transform: uppercase; }
    /* Under each mark, so the ends of the scale are named as well as drawn.
       Set as written rather than upper-cased: these are the two names the
       whole page turns on. */
    .cg-stamp-label { font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
      fill: var(--text-tertiary); }
    .cg-label-good { fill: #3f6a4c; }
    .cg-label-bad { fill: #a33327; }
    #cg-needle { transition: transform .9s cubic-bezier(.22,.61,.36,1); transform-box: view-box; }
    @media (prefers-reduced-motion: reduce) { #cg-needle { transition: none; } }
    /* The verdict block holds its height whatever the wording, so the panel
       does not resize under the reader when the result lands. A two-word band
       with a one-line meaning and a four-word band with three lines occupy the
       same space. */
    .cg-verdict-block { min-height: 104px; display: flex; flex-direction: column;
      align-items: center; justify-content: center; }
    .cg-band { font-size: 23px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
    .cg-meaning { color: var(--text-secondary); font-size: 15px; line-height: 1.32;
      margin-top: 4px; max-width: 34ch; }
    /* Under both panels rather than inside one of them, because it points at
       the page and not at the dial. */
    .cg-scroll-hint { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
      color: var(--brand-ink); margin: 26px 0 0; text-align: center; }
    @media (min-width: 861px) {
      .cg-scorecol, .cg-top form, .rp-left { height: 375px; }
    }

    /* The bar shows the composition of the score, so it always fills. Headroom
       lives in the key beneath, where "18 of 55" says it without dead space. */
    .cg-stack { display: flex; height: 30px; border-radius: 5px; overflow: hidden;
      border: 1px solid var(--border-medium); max-width: 760px; }
    .cg-stack span { display: flex; align-items: center; justify-content: center;
      font-family: var(--mono); font-size: 11px; font-weight: 600; color: #fff; min-width: 0; }
    .cg-keys { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 12px 0 0;
      font-family: var(--mono); font-size: 12px; color: var(--text-secondary); }
    .cg-keys i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; }
    .cg-sum:empty { display: none; }
    .cg-sum { font-family: var(--mono); font-size: 12.5px; color: var(--text-tertiary);
      margin-top: 12px; }

    /* Everything below the two boxes */
    .cg-h2 { margin: 52px 0 16px; }

    /* A faint line between the parts of the analysis, with the same air above
       and below it. */
    .cg-sep { border: 0; border-top: 1px solid var(--border-light); margin: 52px 0 0; }

    /* What the score says about the business behind the writing. Both pages
       show it, so it lives here rather than twice in two page heads. */
    .rp-mean { margin-bottom: 0; }
    .rp-mean .cg-h2 { margin-top: 0; }
    .rp-mean-body p { font-size: 16.5px; line-height: 1.65; color: var(--text-secondary);
      max-width: 68ch; margin: 0 0 15px; }
    /* The opening paragraph carries the finding, so it is set as one: larger and
       in the text colour, which colour alone was too slight to say. Marked by a
       class rather than :first-child, because the openings that do not apply are
       hidden and hidden is still first. */
    .rp-mean-open { font-size: 20px; line-height: 1.5; letter-spacing: -.012em;
      color: var(--text-primary); max-width: 60ch; margin: 0 0 22px; }
    .rp-mean-go { display: inline-flex; align-items: center; gap: 9px; margin-top: 10px;
      font-size: 15.5px; font-weight: 600; color: #fff; text-decoration: none;
      background: var(--brand-primary); border-radius: 7px; padding: 12px 22px; }
    .rp-mean-go:hover { background: var(--brand-primary-hover); }
    .cg-lead { color: var(--text-secondary); font-size: 15px; max-width: 66ch; margin: -6px 0 20px; }

    .cg-tests { list-style: none; display: grid; gap: 1px; background: var(--border-light);
      border: 1px solid var(--border-light); border-radius: 10px; margin: 0; }
    .cg-tests li:first-child { border-radius: 9px 9px 0 0; }
    .cg-tests li:last-child { border-radius: 0 0 9px 9px; }
    .cg-tests li:only-child { border-radius: 9px; }
    .cg-tests li:hover, .cg-tests li:focus-within { position: relative; z-index: 6; }
    .cg-tests li { background: var(--bg-white); padding: 18px 22px;
      display: grid; grid-template-columns: 86px minmax(0, 260px) minmax(0, 1fr); gap: 24px;
      align-items: baseline; }
    /* A hairline chip read as a label. A reader scanning the column has to see
       the answer before they read the row, so the verdict is filled. */
    .cg-verdict { display: inline-block; font-family: var(--mono); font-size: 10.5px; font-weight: 700;
      letter-spacing: .12em; text-transform: uppercase; padding: 6px 11px; border-radius: 4px;
      color: #fff; text-align: center; }
    .cg-pass { background: #3f6a4c; }
    .cg-fail { background: #a33327; }
    .cg-na { background: var(--text-tertiary); }
    .cg-tests b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.015em;
      margin-bottom: 6px; }
    /* What each test asks sits behind the mark, so the row is the verdict and
       the answer. */
    .cg-test-name { position: relative; }
    .cg-info { appearance: none; margin-left: 8px; width: 16px; height: 16px; padding: 0;
      border: 1px solid var(--border-medium); border-radius: 50%; background: transparent;
      font-family: var(--mono); font-size: 10px; line-height: 1; color: var(--text-tertiary);
      cursor: help; vertical-align: 2px; }
    .cg-info:hover, .cg-info:focus-visible { border-color: var(--brand-primary); color: var(--brand-ink); }
    .cg-tip { position: absolute; left: 0; top: calc(100% + 9px); width: 300px; z-index: 20;
      background: var(--text-primary); color: var(--bg-white); border-radius: 8px;
      padding: 11px 13px; font-size: 13.5px; line-height: 1.5; font-weight: 400;
      text-align: left; letter-spacing: 0; opacity: 0; visibility: hidden;
      transition: opacity .15s ease; pointer-events: none; }
    .cg-info:hover .cg-tip, .cg-info:focus-visible .cg-tip { opacity: 1; visibility: visible; }
    /* The last rows have no room below, so those open upward. */
    .cg-tests li:nth-last-child(-n+2) .cg-tip { top: auto; bottom: calc(100% + 9px); }
    @media (max-width: 780px) {
      .cg-tip { width: min(300px, 78vw); left: auto; right: 0; }
    }
    .cg-tests .thispage { font-family: var(--mono); font-size: 10px; font-weight: 700;
      letter-spacing: .12em; text-transform: uppercase; color: var(--text-tertiary);
      display: block; margin-bottom: 6px; }
    .cg-tests li.v-pass .thispage { color: #3f6a4c; }
    .cg-tests li.v-fail .thispage { color: #a33327; }
    .cg-tests .why { color: var(--text-primary); font-size: 15px; line-height: 1.6; }
    @media (max-width: 820px) {
      .cg-tests li { grid-template-columns: 1fr; gap: 10px; }
    }

    .cg-group-n { position: relative; }
    .cg-group { display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
      margin: 34px 0 6px; padding-bottom: 8px; border-bottom: 2px solid var(--brand-ink); }
    .cg-group-n { font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--text-primary); }
    .cg-group-s { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em;
      text-transform: uppercase; color: var(--brand-ink); white-space: nowrap; }
    .cg-group-note { font-size: 15px; line-height: 1.55; color: var(--text-secondary);
      margin: 0 0 16px; }
    .cg-clean { font-size: 15px; color: var(--text-secondary); margin: 0 0 6px; }
    .cg-find { --cg-sev: var(--border-medium);
      position: relative; background: var(--bg-light); border: 1px solid var(--border-light);
      border-radius: 12px; padding: 20px 24px 20px 28px; margin-bottom: 12px; overflow: hidden; }
    .cg-find::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
      background: var(--cg-sev); }
    .cg-find.sev-high { --cg-sev: #a33327; }
    .cg-find.sev-medium { --cg-sev: #c0682b; }
    .cg-find.sev-low { --cg-sev: #b08423; }
    .cg-rule { display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 600;
      letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary);
      margin-bottom: 8px; }
    .cg-find-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
    .cg-find-marks { display: flex; align-items: baseline; gap: 12px; flex: none; }
    .cg-single { position: relative; font-family: var(--mono); font-size: 9.5px; font-weight: 600;
      letter-spacing: .12em; text-transform: uppercase; color: var(--text-tertiary);
      white-space: nowrap; }
    .cg-find.unagreed { background: transparent; border-style: dashed; }
    .cg-find q { display: block; font-size: 18.5px; font-weight: 500; line-height: 1.45;
      letter-spacing: -.012em; color: var(--text-primary); }
    .cg-sev { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .12em;
      text-transform: uppercase; color: var(--cg-sev); white-space: nowrap; }
    .cg-find-body { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px; }
    .cg-find p { font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); margin: 0; }
    .cg-find .cg-fix { background: var(--bg-white); border: 1px solid var(--border-light);
      border-radius: 8px; padding: 13px 15px; color: var(--text-primary); }
    .cg-find p b { display: block; font-family: var(--mono); font-size: 9.5px; font-weight: 600;
      letter-spacing: .12em; text-transform: uppercase; color: var(--text-tertiary);
      margin-bottom: 5px; }
    @media (max-width: 780px) { .cg-find-body { grid-template-columns: 1fr; gap: 14px; } }

    .cg-stamp { font-family: var(--mono); font-size: 11.5px; color: var(--text-tertiary); margin-top: 22px; }

    @media (max-width: 860px) {
      .cg-top { grid-template-columns: 1fr; }
      .cg-top form { min-height: 0; }
      .cg-text { min-height: 200px; flex: 0 0 auto; height: 240px; }
    }

    /* ---------- /check: the same reading, with a field in front of it -------
       One address, nothing else. The paste box and the upload live on
       /confidentgarbage, where a reader brings words rather than a site. */
    /* Outside the hero grid, so the stamps still fall across the headline and the
       sentence under it rather than reaching for the bottom of a form. The room
       underneath belongs to the field: it is the only thing on the page until
       there is an address, and it goes with the field when one arrives. */
    .page-report .ck-form { margin: 30px 0 180px; max-width: 520px; }
    @media (max-width: 768px) { .page-report .ck-form { margin-bottom: 90px; } }
    .page-report .ck-label { position: absolute; left: -9999px; }
    .page-report .ck-row { display: flex; gap: 10px; flex-wrap: wrap; }
    .page-report .ck-row input {
      flex: 1 1 260px; min-width: 0; box-sizing: border-box; height: 46px;
      font: inherit; font-size: 16px; padding: 0 15px;
      border: 1px solid var(--border-medium); border-radius: 8px;
      background: var(--bg-white); color: var(--text-primary); }
    .page-report .ck-row input::placeholder { color: var(--text-tertiary); }
    .page-report .ck-row input:focus { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
    .page-report .ck-row button {
      flex: none; box-sizing: border-box; height: 46px; padding: 0 24px;
      font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
      border: 0; border-radius: 8px; background: var(--brand-primary); color: #fff; }
    .page-report .ck-row button:hover { background: var(--brand-primary-hover); }
    .page-report .ck-note { font-family: var(--mono); font-size: 12px; line-height: 1.6;
      color: var(--text-tertiary); margin: 10px 0 0; }
    .page-report .ck-note.is-bad { color: var(--brand-ink); }

    /* ---------- the report page -------------------------------------------
       Everything below belongs to /report/<domain> and nothing else. It lived
       in that page's own <style>, which loads after this file, so its .cg-top
       rules quietly beat the ones here at every width: the frame stopped
       stacking on a phone and nobody could see why from either file. Scoped to
       .page-report on the body and kept here, so one file owns the layout and
       the ordering is visible in one place. */
    /* One frame around both halves, so the result can be lifted whole into a
       post: the site on the left, the dial on the right, a single card. The
       pieces keep their own styles and give up their own borders. */
    /* Both halves are fractions of the frame, so the picture's half keeps its
       proportions at every width and the dial's half keeps pace. A fixed pixel
       column plus a fixed pixel height agreed only at one viewport; anywhere
       narrower the picture lost its right-hand edge, which on a homepage is the
       logo, the nav and the call to action. */
    .page-report .cg-top { grid-template-columns: 1.5fr 1fr; gap: 0; align-items: stretch;
      background: var(--bg-white); border: 1px solid var(--border-medium);
      border-radius: 14px; overflow: hidden; }
    .page-report .cg-top .cg-scorecol { border: 0; border-radius: 0; background: transparent;
      border-left: 1px solid var(--border-light); }
    .page-report .rp-why { padding: 0 30px; }

    /* The argument holds the column until the picture of their site is ready,
       then hands it over. Both sit in the same box the dial does, so the swap
       changes what is there and never how much room it takes. */
    .page-report .rp-left { position: relative; min-height: 372px; }
    .page-report .rp-why { display: flex; flex-direction: column; justify-content: center; min-height: 372px;
      padding-right: 8px; transition: opacity .45s ease; }
    .page-report .rp-shot { position: absolute; inset: 0; margin: 0; opacity: 0; pointer-events: none;
      overflow: hidden; background: var(--bg-white); transition: opacity .6s ease; }
    /* The box is now cut to the capture's own proportions, so cover crops
       nothing at any width. Left top keeps the anchor honest if a capture ever
       comes back a different shape. */
    /* Four pixels wider than the box, anchored left, so the right edge falls
       outside it. Captures carry a scrollbar there: fin.ai's last eight pixels
       are pure white against a #faf9f6 page, which read as a gap. Four CSS
       pixels is under two per cent of a 2560 wide capture. */
    .page-report .rp-shot img { width: calc(100% + 4px); max-width: none; height: 100%;
      object-fit: cover; object-position: left top;
      display: block; background: var(--bg-white); }
    .page-report .rp-left.has-shot .rp-why { opacity: 0; pointer-events: none; }
    .page-report .rp-left.has-shot .rp-shot { opacity: 1; }
    @media (prefers-reduced-motion: reduce) {
      .page-report .rp-why, .page-report .rp-shot { transition: none; }
    }
    .page-report .rp-lead { font-size: 19px; line-height: 1.5; letter-spacing: -.01em; color: var(--text-primary);
      margin: 0 0 16px; max-width: 42ch; }
    .page-report .rp-why p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 12px;
      max-width: 52ch; }
    .page-report .rp-note { font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--brand-ink); }
    /* Stacked, the picture leads and the dial sits under it inside the same
       frame. The picture takes its own shape rather than a letterboxed slot,
       because a phone screenshot is the thing being lifted into a post. */
    @media (max-width: 860px) {
      /* Stacking, stated after the two-column rule it overrides. Both carry the
         same specificity, so order decides, and now both are in this file where
         the order can be read. When they lived in two files the two-column rule
         won at every width and the frame never stacked on a phone. */
      .page-report .cg-top { grid-template-columns: 1fr; }
      .page-report .cg-top .cg-scorecol { border-left: 0; border-top: 1px solid var(--border-light); }
      .page-report .rp-left { min-height: 0; }
      .page-report .rp-why { min-height: 0; margin-bottom: 0; padding: 26px 22px; }
      .page-report .rp-left.has-shot .rp-why { display: none; }
      .page-report .rp-shot { position: static; }
      /* Stacked, the picture keeps its own shape and nothing is cropped, so it
         takes the full width rather than the four pixels of overscan. */
      .page-report .rp-shot img { width: 100%; height: auto; }
    }
    /* The first thing under the dial, because a reader who came for a number
       leaves with a reading of their business. The two versions are both in the
       page rather than assembled in script, so the voice gate measures the words
       a reader actually gets. */
    /* The hero's tail and the reading's head stand the same distance from the
       colour change, so the seam reads as one break rather than two. */
    .page-report .cg-tool { padding-bottom: 72px; }
    .page-report #cg-result { padding-top: 72px; }
    @media (max-width: 768px) {
      .page-report .cg-tool { padding-bottom: 48px; }
      .page-report #cg-result { padding-top: 48px; }
    }

    /* How far above the threshold decides which qualifier shows, on the same
       boundaries the dial already draws. All three are in the page so the voice
       gate reads every version a reader can get. */
    .page-report .rp-deg[hidden] { display: none; }

    /* The lighter of the two asks. Talking to an architect is the ask this page
       is for, so the copy of the report stays a line of text and a field: offered
       where a reader pauses at the dial, and again once they reach the end. */
    /* A picture is on its way, so the panel looks like one arriving. It used to
       hold three paragraphs of research, which filled the frame with dense text
       for the ten seconds before the screenshot landed. Those paragraphs now
       sit under the reading they support. */
    .page-report .rp-why { align-items: center; }
    .page-report .rp-skel { width: 100%; max-width: 460px; border: 1px solid var(--border-light);
      border-radius: 10px; overflow: hidden; background: var(--bg-white);
      animation: rp-breathe 2.4s ease-in-out infinite; }
    .page-report .rp-skel-bar { display: flex; gap: 6px; align-items: center; padding: 9px 12px;
      background: var(--bg-light); border-bottom: 1px solid var(--border-light); }
    .page-report .rp-skel-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-medium); }
    .page-report .rp-skel-page { padding: 22px 20px 26px; display: flex; flex-direction: column; gap: 11px; }
    .page-report .rp-skel-page span { display: block; height: 11px; border-radius: 3px; background: var(--border-light); }
    .page-report .rp-skel-l1 { width: 62%; height: 20px !important; }
    .page-report .rp-skel-l2 { width: 88%; }
    .page-report .rp-skel-l3 { width: 71%; }
    @keyframes rp-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
    @media (prefers-reduced-motion: reduce) { .rp-skel { animation: none; opacity: .8; } }

    /* Under the frame while the grading runs. Held to a reading width and
       centred, because it is the only thing on the page at that moment. */
    .rp-research { margin: 34px auto 0; max-width: 70ch; }
    .rp-research .rp-lead { font-size: 18px; line-height: 1.5; color: var(--text-primary);
      max-width: 58ch; margin: 0 0 16px; }
    .page-report .rp-research p { font-size: 15.5px; line-height: 1.65; color: var(--text-secondary);
      margin: 0 0 13px; }

    .page-report .rp-error { max-width: 64ch; margin: 26px auto 0; text-align: center; }

    .page-report .rp-send { text-align: center; margin: 12px 0 0; }
    .page-report #rp-send-bottom { margin-top: 22px; }
    .page-report .rp-send-open { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
      font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--brand-ink);
      background: none; border: 0; padding: 5px 6px; }
    .page-report .rp-send-open:hover { text-decoration: underline; }
    .page-report .rp-send-open svg { width: 14px; height: 12px; flex: none; }
    .page-report .rp-send form { display: none; justify-content: center; gap: 8px; flex-wrap: wrap; }
    .page-report .rp-send.is-open .rp-send-open { display: none; }
    .page-report .rp-send.is-open form { display: flex; }
    .page-report .rp-send input[type=email] { flex: 0 1 260px; min-width: 0; font: inherit; font-size: 14.5px;
      padding: 9px 13px; border: 1px solid var(--border-medium); border-radius: 7px;
      background: var(--bg-white); color: var(--text-primary); }
    .page-report .rp-send input[type=email]:focus { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
    /* Filled once the form is open. The restraint belongs to the collapsed line
       of text, and a submit button the same colour as the page it sits on reads
       as missing. */
    .page-report .rp-send form button { flex: none; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
      padding: 10px 18px; border: 0; border-radius: 7px;
      background: var(--brand-primary); color: #fff; }
    .page-report .rp-send form button:hover { background: var(--brand-primary-hover); }
    .page-report .rp-send form button[disabled] { opacity: .55; cursor: default; }
    .page-report .rp-send-status { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
      line-height: 1.6; color: var(--text-tertiary); margin: 9px 0 0; }
    .page-report .rp-send-status.is-bad { color: var(--brand-ink); }
    /* Nothing said yet is nothing to leave room for, and its margin was the 9px
       that stopped the two sides of the seam matching. */
    .page-report .rp-send-status:empty { margin: 0; }

    /* Last in the block, so these win over the stacked defaults above. The
       picture's half takes the shape of the capture itself, 2560 by 1600, and
       the frame takes its height from that: the whole page shows, and nothing
       is left over underneath it. The dial then has the full height to fill. */
    @media (min-width: 861px) {
      .page-report .cg-top .cg-scorecol, .page-report .rp-left, .page-report .rp-why { height: auto; min-height: 0; }
      .page-report .rp-left { aspect-ratio: 1.6; }
      .page-report .cg-top .cg-gauge { max-width: 300px; }
    }