/* Score lookup: the form page, the report page and the site's privacy page. Builds on /css/site.css tokens and components,
   and follows the design system's owned-media leaders template (design-system/templates/owned-media-leaders). */
.score-hero{--suit:clamp(140px,16vw,240px);position:relative;z-index:2;padding-bottom:clamp(40px,4vw,64px)}
.score-h2{font-size:var(--fs-sub)}
.score-fine{margin-top:24px;font-size:var(--fs-small);color:var(--graphite)}
.on-ink .score-fine{color:var(--graphite-ink)}

/* form page: hero */
.score-title__l2{display:block;padding-left:8vw;margin-top:.08em;font-style:italic;font-weight:var(--fw-display-italic)}
.score-beta{display:inline-block;margin-left:.3em;vertical-align:top;font:400 .225em/1 var(--font-hand);font-feature-settings:var(--ff-hand);font-variation-settings:normal;letter-spacing:0;transform:rotate(-10deg)}
.score-hero .mk--hl > svg{height:1em;transform:translateY(-58%)}
.score-hero__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:32px 40px;flex-wrap:wrap;margin-top:clamp(36px,4.5vw,64px);max-width:calc(100% - var(--suit))}
.score-hero__foot .lead{max-width:38em;text-wrap:pretty}
.score-hero__foot--stack{flex-direction:column;align-items:flex-start;gap:20px}   /* thanks page: the note sits under the lead, at the left */
.score-suitcase{position:absolute;right:calc(var(--gutter) + clamp(24px,5vw,96px));bottom:calc(var(--suit) / -2);width:var(--suit)}
@media (max-width:720px){.score-hero__foot{max-width:none}.score-suitcase{width:130px;bottom:-65px}}

/* form page: the form, on ink */
.score-hero__cta{margin-left:clamp(40px,7vw,120px);vertical-align:middle;letter-spacing:normal;font-style:normal;white-space:nowrap}   /* sits after 'score beta' on the title's last line */
.score-why{padding-top:calc(clamp(140px,16vw,240px) / 2 + 32px)}   /* just clears the suitcase hanging over from the hero */
.score-ask__hl{margin-bottom:clamp(28px,3vw,44px)}
.score-form{display:flex;align-items:flex-start;gap:44px 24px;flex-wrap:wrap;width:100%;max-width:1100px}
.score-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.score-consent{flex-basis:100%}
.score-check{display:flex;gap:14px;align-items:flex-start;font-size:1rem;line-height:1.4;cursor:pointer}
.field .score-check input{appearance:none;-webkit-appearance:none;flex:none;width:24px;height:24px;margin:0;padding:0;border:2px solid currentColor;border-radius:0;background:transparent;display:grid;place-content:center;cursor:pointer}
.field .score-check input::after{content:"";width:12px;height:12px;background:var(--pink);transform:scale(0);transition:transform var(--dur-fast) var(--ease-settle)}
.field .score-check input:checked::after{transform:scale(1)}
.field .score-check input:focus{padding:0;border-bottom-width:2px}
.field .score-check input:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.score-check a{color:inherit}
.score-consent .field__error{position:static;margin-top:4px}
/* company autocomplete (score.js): a square paper box under the field, the active row banded pink */
.score-combo{position:relative}
.score-suggest{position:absolute;top:calc(100% - 4px);left:0;right:0;z-index:70;margin:0;padding:0;list-style:none;background:var(--white);color:var(--black);border:2px solid var(--black)}
.score-suggest li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 16px;cursor:pointer;border-top:1px solid var(--line)}
.score-suggest li:first-child{border-top:0}
.score-suggest li[aria-selected=true],.score-suggest li:hover{background:var(--pink)}
.score-suggest__name{font:var(--fw-display) 1.25rem/1.2 var(--font-display);font-variation-settings:var(--fv-text)}
.score-suggest__domain{font-size:var(--fs-small);color:var(--graphite);white-space:nowrap}
.score-match{margin:0;min-height:0}
.score-match:empty{display:none}

.score-match--found{font-size:var(--fs-small);color:var(--graphite-ink)}
.score-match--missing{margin-top:14px;font:1.6rem/1.1 var(--font-hand);font-feature-settings:var(--ff-hand);color:var(--pink);transform:rotate(-1.5deg);transform-origin:left}
.score-combo[data-error] .score-match{display:none}
.score-done{max-width:1100px}
.score-done .lead{margin-top:24px}
.score-done .hl:focus{outline:none}
/* thanks page: the total and rank on a luggage tag (the home page's .tag, blown up); the breakdown goes by email.
   The string starts at the eyelet's center and runs out past the tag's left edge, under the eyelet ring. */
/* thanks page (Sean 2026-10-28): the visitor's tag with a handwritten line beside it, the headline, then a sample report fanned
   out as three pages ("Yours is in your inbox"), then the note down to the booking calendar. Everything centred. */
.score-hero--thanks{display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden;padding-bottom:clamp(56px,7vw,104px)}
.score-hero--thanks .hl--mega{font-size:clamp(3.4rem,7.4vw,7.4rem);max-width:11em}
.score-hero--thanks .score-hero__foot{max-width:none;margin-top:22px;align-items:center}
.score-hero--thanks .score-hero__foot .lead{max-width:30em}
.score-peek{position:relative;max-width:100%;margin-bottom:88px}
.score-peek[hidden]{display:none}
.score-tag--thanks{width:400px;max-width:100%}
.score-tag--thanks .score-tag__n{font-size:clamp(4.2rem,7vw,5.6rem)}
.score-verdict{position:absolute;left:calc(100% + 28px);top:8px;text-align:left}
.score-verdict .note__line{font-size:2.1rem}
.score-verdict .note__text{white-space:nowrap}
.score-verdict .note__arrow{display:block;padding:8px 0 0}
.score-verdict .manic{transform:rotate(185deg) scale(.8)}
@media (max-width:1180px){.score-verdict{position:static;margin:28px auto 0;align-items:center;text-align:center}.score-verdict .note__arrow{display:none}}
@media (max-width:600px){.score-peek{margin-bottom:48px}.score-verdict{display:none}.score-hero--thanks .score-talk{padding-top:40px}}   /* phones: no handwritten line (Sean 2026-10-28) */
/* the sample: page images are 2x; blurred a touch so it reads as a preview */
/* the deck is laid out in percentages of its own width (1100px at full size, 560x424 pages), so it scales with the window */
.score-sample{position:relative;width:min(1100px,90%);aspect-ratio:1100/500;margin-top:clamp(40px,5vw,70px)}
.score-sample[hidden]{display:none}
.score-sample__deck{position:absolute;inset:0}
.score-sample__page{position:absolute;top:16%;width:50.9%;aspect-ratio:560/424;overflow:hidden;background:var(--paper);border:2px solid var(--black);box-shadow:8px 8px 0 var(--black);transition:transform .45s var(--ease-settle),box-shadow .45s}
.score-sample__page img{display:block;width:100%;height:auto;filter:blur(1.35px)}
.score-sample__page--l{left:-2.7%;transform:rotate(-8deg);background:var(--black)}
.score-sample__page--r{left:51.8%;transform:rotate(7deg)}
.score-sample__page--c{left:24.5%;top:6%;z-index:2;overflow:visible}
.score-sample:hover .score-sample__page--l{transform:translate(-12.5%,-1.4%) rotate(-12deg)}
.score-sample:hover .score-sample__page--r{transform:translate(12.5%,-1.4%) rotate(11deg)}
.score-sample:hover .score-sample__page--c{transform:translateY(-5.7%);box-shadow:12px 14px 0 var(--black)}
.score-sample__pill{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;white-space:nowrap;background:var(--black);color:var(--pink);font:700 .95rem/1 var(--font-type);letter-spacing:.02em;padding:12px 18px;border-radius:999px;transition:background-color .2s,color .2s}
.score-sample__pill:hover{background:var(--pink);color:var(--black)}
@media (max-width:600px){.score-sample__page{box-shadow:5px 5px 0 var(--black)}.score-sample__pill{font-size:.68rem;padding:8px 12px;gap:6px}}
@media (prefers-reduced-motion:reduce){.score-sample__page{transition:none}}
.score-talk{display:flex;justify-content:center;margin-top:clamp(24px,3vw,40px)}
.score-talk .note{align-items:center}
.score-talk .note__arrow--down{padding-top:16px}
.score-talk .note__arrow--down .manic{transform:rotate(110deg)}   /* site.css has 80deg; turned 30deg further clockwise and dropped clear of the text (Sean) */
.score-how__hl{background:var(--black);color:var(--pink);padding:0 .2em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.score-tag{--eye:31px;position:relative;width:min(440px,100%);padding:22px 26px 24px 64px;display:flex;flex-direction:column;gap:6px;background:var(--paper);border:2px solid var(--black);border-radius:8px 22px 22px 8px;box-shadow:6px 8px 0 var(--black);transform:rotate(-3deg)}
.score-tag::before{content:"";position:absolute;z-index:2;left:calc(var(--eye) - 9px);top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:var(--pink);border:2px solid var(--black);box-shadow:0 0 0 5px var(--paper),0 0 0 7px var(--black)}
.score-tag__no{font:700 .8125rem/1.2 var(--font-type)}
.score-tag__name{font:var(--fw-display) clamp(1.6rem,2.6vw,2.4rem)/1.1 var(--font-display);font-variation-settings:var(--fv-text);overflow-wrap:anywhere}
.score-tag__n{margin-top:10px;white-space:nowrap;color:var(--pink-deeper);font-family:var(--font-display);font-weight:var(--fw-display-heavy);font-variation-settings:var(--fv-display);font-size:clamp(4.5rem,9vw,7rem);line-height:var(--lh-crush);letter-spacing:var(--ls-crush)}
.score-tag__pts{margin-left:.08em;font:var(--fw-display) .3em/1 var(--font-display);font-variation-settings:var(--fv-text);letter-spacing:0;color:var(--black)}   /* "52/100" on one line, both pages (Sean 2026-10-28) */

/* the rubric on the form page: a donut of the 100 points (pink-to-ink ramp, darkest = most points) and its legend, sorted by
   points. Hovering or focusing a legend row thickens its slice. Slices run clockwise from 12 o'clock in legend order. */
.score-rubric{display:grid;grid-template-columns:clamp(220px,26vw,340px) minmax(0,1fr);gap:40px clamp(32px,5vw,80px);align-items:center;margin-top:clamp(40px,5vw,72px);max-width:1280px}
.score-donut{display:block;width:100%;height:auto;overflow:visible}
.score-donut__slice{fill:none;stroke-width:40;transition:stroke-width 420ms cubic-bezier(.22,1,.36,1)}
.score-rubric:has(li[data-k=research]:is(:hover,:focus-visible)) .score-donut__slice[data-k=research],
.score-rubric:has(li[data-k=recency]:is(:hover,:focus-visible)) .score-donut__slice[data-k=recency],
.score-rubric:has(li[data-k=editorial]:is(:hover,:focus-visible)) .score-donut__slice[data-k=editorial],
.score-rubric:has(li[data-k=interviews]:is(:hover,:focus-visible)) .score-donut__slice[data-k=interviews],
.score-rubric:has(li[data-k=bylines]:is(:hover,:focus-visible)) .score-donut__slice[data-k=bylines],
.score-rubric:has(li[data-k=distribution]:is(:hover,:focus-visible)) .score-donut__slice[data-k=distribution]{stroke-width:56}
.score-donut__n{font:700 13px/1 var(--font-type);text-anchor:middle;pointer-events:none}
.score-donut__total{font:800 44px/1 var(--font-display);text-anchor:middle}
.score-donut__unit{font:700 11px/1 var(--font-type);text-anchor:middle}
.score-legend{list-style:none;margin:0;padding:0;border-bottom:2px solid var(--black)}
.score-legend li{display:grid;grid-template-columns:minmax(0,12.5rem) 3.6rem minmax(0,1fr);column-gap:16px;align-items:baseline;padding:14px 0;border-top:2px solid var(--black);cursor:default}
.score-legend li:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
/* the swatch sits inline in the name, its center on the capitals' center (cap height ~.66em above the baseline) */
.score-legend__sw{display:inline-block;width:20px;height:20px;margin-right:16px;border:2px solid var(--black);vertical-align:calc(.33em - 10px)}
.score-legend__name{font:var(--fw-display) 1.35rem/1.15 var(--font-display);font-variation-settings:var(--fv-text)}
.score-legend__pts{font:700 .875rem/1 var(--font-type);white-space:nowrap}
.score-legend p{margin:0;font-size:1rem;line-height:1.45}
@media (max-width:860px){.score-rubric{grid-template-columns:1fr}.score-donut{max-width:300px}.score-legend li{grid-template-columns:minmax(0,1fr) auto}.score-legend p{grid-column:1 / -1;margin-top:4px;padding-left:36px}}

/* report (/score/r/…): pink tag → black "where your points are" → white ranked table → pink booking */
.rep-hero{padding-bottom:clamp(56px,7vw,96px)}
.rep-hero .hl{font-size:clamp(3rem,7.5vw,6.5rem)}
.rep-hero__row{display:flex;align-items:center;flex-wrap:wrap;gap:40px clamp(48px,6vw,96px);margin-top:clamp(36px,4.5vw,56px);padding-left:clamp(48px,7vw,96px)}
.rep-hero__side{flex:1 1 300px;max-width:30em;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.rep-hero__side .lead{max-width:none}
.rep-quiet{max-width:36em;font-size:1rem}
@media (max-width:720px){.rep-hero__side{margin-left:calc(-1 * clamp(48px,7vw,96px))}}
@media (max-width:600px){.rep-hero__row{justify-content:center;padding-left:0}.rep-hero__side{margin-left:0}}   /* phones: the tag centred (Sean 2026-10-28) */
.rep-gain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px clamp(40px,5vw,80px);margin-top:clamp(36px,4.5vw,56px);max-width:1280px}
.rep-gain > div{display:flex;flex-direction:column;gap:12px}
.rep-gain__n{font-family:var(--font-display);font-weight:var(--fw-display-heavy);font-variation-settings:var(--fv-display);font-size:clamp(3rem,5.5vw,4.6rem);line-height:var(--lh-crush);letter-spacing:var(--ls-crush);color:var(--pink)}
.rep-gain__n small{font:400 1rem/1 var(--font-body);color:var(--white);margin-left:6px;letter-spacing:0}
.rep-gain__name{font:var(--fw-display) 1.6rem/1.1 var(--font-display);font-variation-settings:var(--fv-text)}
.rep-gain__tip{margin:0;font-size:1.0625rem;line-height:1.45}
.rep-close{margin-top:clamp(28px,3.5vw,44px);font-size:var(--fs-lead);max-width:34em}
@media (max-width:860px){.rep-gain{grid-template-columns:1fr}}
/* the ranked table (after the category-creation carousel): 01, name over what we found, bar to scale, big number */
.rep-sub{margin-top:20px;font-size:var(--fs-lead);max-width:34em}
.rep-tbl{list-style:none;margin:clamp(32px,4vw,48px) 0 0;padding:0;border-bottom:2px solid var(--black);max-width:1280px}
.rep-tbl li{display:grid;grid-template-columns:3rem minmax(0,1.25fr) minmax(0,1fr) 9rem;column-gap:clamp(16px,2.5vw,36px);align-items:center;padding:clamp(18px,2vw,26px) 0;border-top:2px solid var(--black)}
.rep-tbl__i{font:700 .875rem/1 var(--font-type);align-self:start;padding-top:.7em}
.rep-tbl__name{display:block;font:var(--fw-display) clamp(1.6rem,2.6vw,2.4rem)/1.1 var(--font-display);font-variation-settings:var(--fv-text);letter-spacing:-.01em}
.rep-tbl__why{margin:6px 0 0;font-size:.9375rem;line-height:1.45;color:var(--graphite);max-width:34em}
.rep-tbl__bar{display:block;height:clamp(26px,2.6vw,38px);width:var(--w);border:2px solid var(--black);position:relative}
.rep-tbl__bar i{position:absolute;inset:0 auto 0 0;background:var(--black)}
.rep-tbl__n{justify-self:end;white-space:nowrap;font-family:var(--font-display);font-weight:var(--fw-display-heavy);font-variation-settings:var(--fv-display);font-size:clamp(2.6rem,4.6vw,4.2rem);line-height:1;letter-spacing:var(--ls-crush)}
.rep-tbl__n small{font:italic 400 .42em/1 var(--font-display);letter-spacing:0;margin-left:2px}
@media (max-width:760px){.rep-tbl li{grid-template-columns:2rem minmax(0,1fr) auto;row-gap:12px}.rep-tbl__bar{grid-column:2 / -1;grid-row:2}}
.rep-book .lead{margin-top:20px}
.rep-book .book__cal{margin-top:clamp(28px,3.5vw,44px);padding-top:clamp(20px,2.5vw,32px);background:var(--paper);border:2px solid var(--black)}   /* Cal's card sits flush at the iframe top; the padding matches the space Cal leaves below it */
.rep-fine{margin-top:clamp(28px,3.5vw,44px);font-size:var(--fs-small);display:flex;flex-direction:column;gap:6px}
.rep-fine p{margin:0}
.rep-fine a{color:inherit}

/* the serif arrow sits high in the button at line-height .5 (site.css .btn::after): center its em box on the text */
.score-form .btn::after{line-height:1;position:relative;top:.17em}
/* the closing line under the cards: centred, in parentheses (Sean 2026-10-26) */
.rep-close{text-align:center;margin-left:auto;margin-right:auto}
/* you vs. your competitors: rows reuse .rep-tbl; one bar scale out of the score max, the company's own bar in pink */
.rep-vs__name{display:block;font:var(--fw-display) clamp(1.6rem,2.6vw,2.4rem)/1.1 var(--font-display);font-variation-settings:var(--fv-text);letter-spacing:-.01em}
.rep-vs__you{font:700 .75rem/1 var(--font-type);text-transform:uppercase;letter-spacing:.08em;background:var(--pink);color:var(--black);padding:4px 7px;vertical-align:middle;margin-left:8px}
.rep-vs__note{margin:6px 0 0;font-size:.9375rem;line-height:1.45;color:var(--graphite);max-width:34em}
.rep-vs__bar{display:block;height:clamp(26px,2.6vw,38px);border:2px solid var(--black);position:relative}
.rep-vs__bar i{position:absolute;inset:0 auto 0 0;background:var(--black)}
.rep-step{--size:48px;justify-self:start;color:var(--pink-deeper)}
/* the company's own row: an ink band (paper text, pink bar on a paper outline), bleeding a little past the list edges */
.rep-vs .is-self{background:var(--ink);color:var(--paper);margin:0 calc(-1 * clamp(12px,1.5vw,20px));padding-left:clamp(12px,1.5vw,20px);padding-right:clamp(12px,1.5vw,20px)}
.rep-vs .is-self .rep-step{color:var(--pink)}
.rep-vs .is-self .rep-vs__bar{border-color:var(--paper)}
.rep-vs .is-self .rep-vs__bar i{background:var(--pink)}
.rep-vs .is-self .rep-vs__note{color:var(--graphite-ink)}
.rep-vs__also{margin-top:clamp(20px,2.5vw,28px);font-size:var(--fs-body);max-width:40em}
.rep-vs__src{margin-top:12px;font-size:var(--fs-small);color:var(--graphite);max-width:48em}
.rep-vs__src a{color:inherit}
@media (max-width:760px){.rep-vs__bar{grid-column:2 / -1;grid-row:2}}
@media (max-width:760px){.rep-step{--size:36px}}