/* =========================================================================
   CoRater.org — THE single stylesheet.
   Rebranding = change the tokens in :root below. Nothing else hard-codes a
   colour, font, radius or the logo. Layout uses logical properties
   (margin-inline / inset-inline) so the RTL languages (Arabic, Urdu) mirror
   automatically from <html dir="rtl">.
   ========================================================================= */

:root {
    /* ---- Brand palette: white + green #85c448 + grey #4e4c48 (from the logo)
            and shades of each. Change these and the whole site reskins. ---- */
    --green:        #85c448;   /* primary brand green (logo "Co" + star) */
    --green-dark:   #6fa838;   /* hover / pressed */
    --green-darker: #5a8a2c;   /* deep accent / active text on tint */
    --green-soft:   #eef6e2;   /* pale green wash for backgrounds */
    --green-line:   #cfe6ad;   /* light green borders */

    --grey:         #4e4c48;   /* primary brand grey (logo "RATER") = main ink */
    --grey-soft:    #6c6a65;   /* secondary text + secondary chart series */
    --grey-muted:   #97948f;   /* muted text */

    /* Semantic aliases (rest of the sheet refers to these) */
    --brand:        var(--green);
    --brand-ink:    #2f2e2b;        /* dark text on the green button (legible) */
    --brand-soft:   var(--green-soft);
    --accent:       var(--grey-soft); /* second chart colour stays in-palette */
    --good:         var(--green-dark);
    --amber:        #e0a32e;        /* score 33–65% */
    --warn:         #b8741f;        /* warm grey-brown, harmonises with the palette */
    --bad:          #c0392b;        /* score < 33% (red) */

    /* Pie-chart green shades (light → dark) for "what shapes raters' views" */
    --pie-1: #5a8a2c;
    --pie-2: #6fa838;
    --pie-3: #85c448;
    --pie-4: #a9d77f;
    --pie-5: #cce8b2;

    /* ---- Neutrals (warm-grey scale tuned to #4e4c48) ---- */
    --ink:          var(--grey);
    --ink-soft:     var(--grey-soft);
    --muted:        var(--grey-muted);
    --line:         #e4e3df;
    --paper:        #ffffff;
    --paper-2:      #f7f7f4;

    /* ---- Logo (served SVG wordmark; borderless, sized up) ---- */
    --logo-size:    44px;

    /* ---- Type ---- */
    --font:         system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
    --fs-base:      16px;

    /* ---- Shape & space ---- */
    --radius:       10px;
    --radius-sm:    6px;
    --gap:          1rem;
    --maxw:         960px;
    --shadow:       0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
}

/* ---- Reset-ish ---- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--fs-base); }
body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: var(--paper-2);
    line-height: 1.5;
}
h1, h2, h3 { line-height: 1.2; color: var(--ink); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--muted); }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 1rem; }

/* =========================================================================
   Header / nav / language switcher
   ========================================================================= */
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { display: inline-flex; align-items: center; }
.brand:hover { text-decoration: none; }
/* Borderless wordmark — just the logo, sized up, no frame. */
.brand__logo { height: var(--logo-size); width: auto; display: block; }

.site-nav { display: flex; align-items: center; gap: .5rem; }
/* Header nav links rendered as compact buttons (like the main CTA). */
.site-nav .btn { padding: .45rem .9rem; font-size: .92rem; }

.lang-switcher { position: relative; }
.lang-switcher__btn {
    font: inherit; cursor: pointer; background: var(--paper-2);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: .35rem .6rem; color: var(--ink-soft);
}
.lang-switcher__menu {
    position: absolute; inset-inline-end: 0; top: calc(100% + 6px);
    list-style: none; margin: 0; padding: .35rem;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
    min-width: 180px; max-height: 320px; overflow-y: auto;
    display: none; z-index: 50;
}
.lang-switcher.is-open .lang-switcher__menu { display: block; }
.lang-switcher__menu li a { display: block; padding: .4rem .6rem; border-radius: var(--radius-sm); color: var(--ink-soft); }
.lang-switcher__menu li a:hover { background: var(--brand-soft); text-decoration: none; }
.lang-switcher__menu li[aria-selected="true"] a { font-weight: 700; color: var(--brand); }

/* Mobile call-to-action bar under the header (hidden on desktop) */
.header-cta { display: none; }
.header-cta__inner { display: flex; gap: .5rem; padding-block: .6rem; }
.header-cta .btn { flex: 1; text-align: center; }

@media (max-width: 640px) {
    .site-nav .nav-home,            /* logo is the home link on mobile */
    .site-nav .nav-link { display: none; }
    .header-cta { display: block; background: var(--paper); border-bottom: 1px solid var(--line); }
}

.site-main { padding-block: 2rem; min-height: 60vh; }

/* =========================================================================
   Buttons / notices / generic forms
   ========================================================================= */
.btn {
    display: inline-block; font: inherit; cursor: pointer;
    padding: .6rem 1.1rem; border-radius: var(--radius-sm);
    border: 1px solid transparent; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--brand); color: var(--brand-ink); font-weight: 600; }
.btn--primary:hover { background: var(--green-dark); }
.btn--ghost { background: var(--paper); color: var(--ink-soft); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--green); color: var(--green-darker); }

.notice { border-radius: var(--radius); padding: .9rem 1rem; margin-block: 1rem; border: 1px solid var(--line); }
.notice--ok  { background: #ecfdf5; border-color: #a7f3d0; }
.notice--err { background: #fef2f2; border-color: #fecaca; }
.notice ul { margin: 0; padding-inline-start: 1.2rem; }

.form { display: grid; gap: 1rem; max-width: 560px; }
.form label { display: grid; gap: .3rem; }
.form label > span { font-weight: 600; }
.form input, .form textarea, .form select {
    font: inherit; padding: .55rem .65rem; border: 1px solid var(--line);
    border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); width: 100%;
}
.snippet {
    background: var(--ink); color: #e6edf3; padding: 1rem; border-radius: var(--radius);
    overflow-x: auto; font-size: .85rem; white-space: pre-wrap; word-break: break-all;
}
.key { background: var(--paper); border: 1px solid var(--line); padding: .25rem .5rem; border-radius: var(--radius-sm); }

/* =========================================================================
   Home / hero / search / lists
   ========================================================================= */
.hero { text-align: center; padding-block: 1.5rem 2.5rem; }
.hero__title { font-size: 2rem; margin-block: .25rem; }
.hero__tagline { color: var(--muted); }
.search { display: flex; gap: .5rem; max-width: 520px; margin-inline: auto; margin-top: 1.25rem; }
.search input { flex: 1; font: inherit; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }

.company-list__items { list-style: none; padding: 0; display: grid; gap: .5rem; }
.company-list__items li a {
    display: block; background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius); padding: .8rem 1rem; color: var(--ink);
}
.company-list__items li a:hover { border-color: var(--brand); text-decoration: none; }

/* =========================================================================
   Profile page
   ========================================================================= */
.profile { display: grid; gap: 2rem; }
.profile__head h1 { display: flex; align-items: center; gap: .5rem; }
.profile__bio { color: var(--ink-soft); max-width: 60ch; }
.badge-tick {
    display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem;
    font-size: .9rem; background: var(--good); color: #fff; border-radius: 50%;
}

.score-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.score-card {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.25rem; text-align: center;
}
.score-card--unverified { border-style: dashed; background: var(--paper-2); }
.score-card__label { margin-block: 0 1rem; font-size: 1rem; }
.score-card__num { margin: .6rem 0 0; font-size: 1.6rem; font-weight: 800; line-height: 1; }
.score-card__scope { margin: .35rem 0 0; font-size: .85rem; }
.score-card__note { margin-top: .75rem; font-size: .78rem; color: var(--warn); }

/* Favourability = a SOLID disc (pie) filled to --pct in the threshold colour
   (--fill: green/amber/red), with the CoRater star overlaid on top. */
.score-disc {
    --pct: 0; --fill: var(--green);
    position: relative; width: 140px; height: 140px; border-radius: 50%;
    margin-inline: auto;
    background: conic-gradient(var(--fill) calc(var(--pct) * 1%), var(--green-soft) 0);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.score-disc__star {
    position: absolute; inset: 0; margin: auto;
    width: 46%; height: 46%; object-fit: contain;
    filter: drop-shadow(0 1px 1px rgba(255,255,255,.6));
}
.score-disc--sm { width: 104px; height: 104px; }

/* Score shown next to the company name */
.name-score { font-size: 1.4rem; font-weight: 800; vertical-align: middle; }

.btn--rate { margin-top: .5rem; }

/* Per-metric micro ratings — verified: small rings with the score in the middle */
.metric-circles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 1rem; }
.metric-circle-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .4rem; }
.metric-circle {
    --pct: 0; --fill: var(--green);
    position: relative; width: 72px; height: 72px; border-radius: 50%;
    display: grid; place-items: center;
    background: conic-gradient(var(--fill) calc(var(--pct) * 1%), var(--line) 0);
}
.metric-circle::before { content: ""; position: absolute; width: 52px; height: 52px; border-radius: 50%; background: var(--paper); }
.metric-circle__num { position: relative; font-weight: 800; font-size: .95rem; }
.metric-circle__label { font-size: .78rem; line-height: 1.25; color: var(--ink-soft); max-width: 11ch; }
.profile__metrics--anon { margin-top: 1.5rem; }
.profile__country { margin: .15rem 0 .5rem; font-size: 1rem; }

/* ECO section — reverse circles (white ring, green inner, white score) on green */
.eco { background: var(--green); color: #fff; border-radius: var(--radius); padding: 1.5rem; }
.eco h2 { color: #fff; }
.eco-grid { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.eco-item { display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; }
.eco-circle {
    --pct: 0; position: relative; width: 72px; height: 72px; border-radius: 50%;
    display: grid; place-items: center;
    background: conic-gradient(#fff calc(var(--pct) * 1%), rgba(255,255,255,.30) 0);
}
.eco-circle::before { content: ""; position: absolute; width: 52px; height: 52px; border-radius: 50%; background: var(--green); }
.eco-circle--total { width: 104px; height: 104px; }
.eco-circle--total::before { width: 78px; height: 78px; }
.eco-circle__num { position: relative; color: #fff; font-weight: 800; }
.eco-circle--total .eco-circle__num { font-size: 1.6rem; }
.eco-label { color: #fff; font-size: .8rem; max-width: 13ch; }
.eco-label small { opacity: .85; }
/* Social score: same reverse-circle treatment, teal-green to set it apart. */
.eco--social { background: #48c18d; }
.eco--social .eco-circle::before { background: #48c18d; }

/* Boycott — the only negative metric: dark section, reversed colour (0 green → 100 red) */
.boycott { background: #c14848; color: #fff; border-radius: var(--radius); padding: 1.5rem; }
.boycott h2 { color: #fff; }
.boycott-row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.boycott-circle {
    --pct: 0; --fill: var(--green); position: relative; width: 96px; height: 96px; border-radius: 50%;
    display: grid; place-items: center; flex: 0 0 auto;
    background: conic-gradient(var(--fill) calc(var(--pct) * 1%), rgba(255,255,255,.22) 0);
}
.boycott-circle::before { content: ""; position: absolute; width: 70px; height: 70px; border-radius: 50%; background: #c14848; }
.boycott-circle__num { position: relative; color: #fff; font-weight: 800; font-size: 1.2rem; }
.boycott-q { margin: 0 0 .35rem; font-weight: 600; }
.boycott-note { margin: 0; color: rgba(255,255,255,.82); font-size: .85rem; max-width: 48ch; }

/* ---- Mobile tweaks ---- */
@media (max-width: 640px) {
    .showcase-card__head { flex-direction: column; }   /* logo + score on separate lines */
    /* Centre the CoRater logo in the header on mobile. */
    .site-header__inner { justify-content: center; }
    .brand { margin-inline: auto; }
}
@media (max-width: 560px) {
    .profile__head { text-align: center; }              /* centres name, visit-site + rate */
    .profile__head h1 { font-size: 1.5rem; }            /* ~20% smaller */
    .profile__bio { text-align: start; margin-inline: auto; }
    /* Centre the eco + boycott boxes and the "what shapes views" pie on mobile */
    .eco, .boycott { text-align: center; }
    .eco-grid { justify-content: center; }
    .boycott-row { flex-direction: column; align-items: center; justify-content: center; }
    .profile__influences .pie-wrap { justify-content: center; }
}

/* Tier 2 driver bars — fill colour set per-bar by threshold (--fill). */
.drivers { display: grid; gap: .6rem; }
.driver { display: grid; grid-template-columns: 1fr 2fr auto; align-items: center; gap: .75rem; }
.driver__bar { background: var(--line); border-radius: 999px; height: 12px; overflow: hidden; }
.driver__fill { display: block; height: 100%; background: var(--fill, var(--green)); border-radius: 999px; }
.driver__value { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Tier 3 — a pure pie chart (conic-gradient, shades of green) + a small legend. */
.pie-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.pie {
    width: 180px; height: 180px; border-radius: 50%; flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.pie-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.pie-legend li { display: flex; align-items: center; gap: .55rem; }
.pie-legend__swatch { width: 14px; height: 14px; border-radius: 3px; flex: 0 0 auto; }
.pie-legend__pct { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Recent ratings (anonymised list) */
.recent-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.recent {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: .6rem .9rem;
}
.recent__score { font-weight: 800; font-size: 1.1rem; font-variant-numeric: tabular-nums; min-width: 3rem; }
.recent__date { margin-inline-start: auto; font-size: .82rem; }

/* =========================================================================
   Rating form (the tap-to-toggle sliders)
   ========================================================================= */
.rating-form { display: grid; gap: 1.5rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; }
.rating-form__hint { color: var(--muted); font-size: .85rem; margin: 0; }
.rating-form__tier { border: 0; padding: 0; margin: 0; display: grid; gap: 1rem; }
.rating-form__tier > legend { font-weight: 800; font-size: 1.05rem; padding: 0; margin-bottom: .25rem; }

.metric { display: grid; gap: .4rem; padding-block: .35rem; }
.metric__label { font-weight: 600; text-align: center; }
.metric__control { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .5rem; }
.metric__anchor {
    font: inherit; cursor: pointer; border: 1px solid var(--line); background: var(--paper-2);
    border-radius: var(--radius-sm); width: 2rem; height: 1.9rem; color: var(--ink-soft);
}
.metric__anchor:hover { border-color: var(--brand); color: var(--brand); }

/* Range input — neutral while inactive; once active, slider.js sets accent-color
   on the element from red→amber→green by the polarity-adjusted value. */
.metric__slider { width: 100%; accent-color: var(--muted); opacity: .55; }
.metric.is-active .metric__slider { opacity: 1; }

.metric__state {
    font-size: .8rem; min-width: 5.5rem; text-align: end;
    color: var(--muted); font-variant-numeric: tabular-nums;
}
.metric.is-active .metric__state { font-weight: 700; }

.metric--yesno .metric__yesno { display: flex; gap: 1.25rem; }
.metric--yesno label { display: inline-flex; align-items: center; gap: .35rem; }

.influences { display: grid; gap: .5rem; }
.influence { display: flex; align-items: center; gap: .5rem; }

.rating-form__submit { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.rating-form__verify { display: flex; gap: .5rem; flex: 1; min-width: 280px; }
.rating-form__verify input { flex: 1; font: inherit; padding: .6rem .65rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }

/* =========================================================================
   Sponsored blocks (text ads on free company pages + emails)
   ========================================================================= */
.sponsor-slot { display: grid; gap: .75rem; }
.sponsor-slot--top { margin-bottom: 1.5rem; }
.sponsor-slot--bottom { margin-top: 2rem; }
.sponsor {
    --c: #1565c0;
    position: relative; background: #fff; border: 2px solid var(--c);
    border-radius: 10px; padding: 1rem 1.2rem;
}
.sponsor__tag {
    position: absolute; inset-block-start: .55rem; inset-inline-end: .9rem;
    color: var(--green); font-weight: 800; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .05em;
}
.sponsor__name { display: block; font-size: 1.3rem; font-weight: 800; color: var(--c); text-decoration: none; padding-inline-end: 5rem; }
.sponsor__name:hover { text-decoration: underline; }
.sponsor__bio { margin: .45rem 0; color: #1c1c1c; }
.sponsor__site { color: var(--c); font-weight: 600; word-break: break-word; }
.sponsor__site-note { color: var(--muted); font-weight: 400; font-size: .85em; }

/* Sponsorship management */
.btn--sm { padding: .3rem .65rem; font-size: .85rem; }
.spon-colours { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.spon-colour input { position: absolute; opacity: 0; }
.spon-colour span { display: block; width: 30px; height: 30px; border-radius: 6px; border: 3px solid transparent; cursor: pointer; }
.spon-colour input:checked + span { border-color: var(--ink); }
.spon-list { list-style: none; padding: 0; display: grid; gap: .5rem; }
.spon-item { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .55rem .8rem; }
.spon-swatch { width: 18px; height: 18px; border-radius: 4px; flex: 0 0 auto; }
.spon-item__tokens { font-variant-numeric: tabular-nums; font-weight: 600; }
.spon-item__actions { margin-inline-start: auto; display: flex; gap: .4rem; flex-wrap: wrap; }
.spon-topup { display: flex; gap: .3rem; }
.spon-topup input { width: 4.5rem; font: inherit; padding: .3rem .4rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.spon-latlng { display: flex; gap: .4rem; }
.spon-latlng input { flex: 1; }

/* =========================================================================
   Landing page (marketing)
   ========================================================================= */
.btn--lg { padding: .8rem 1.5rem; font-size: 1.05rem; font-weight: 700; }

.lp-hero {
    display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.5rem; align-items: center;
    padding-block: 1rem 3rem;
}
.lp-hero__title { font-size: clamp(2rem, 4.5vw, 3.1rem); margin: 0 0 1rem; letter-spacing: -.01em; }
.lp-hero__sub { font-size: 1.12rem; color: var(--ink-soft); margin: 0 0 1.5rem; max-width: 38ch; }
.lp-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin: 2.5rem 0; }
.lp-hero__search { max-width: 380px; margin: 0; }

/* home2 — richer hero (live data on the left): top-align the two columns */
.lp-hero--data { align-items: start; }
.lp-hero__live { display: grid; gap: 1.1rem; margin-top: 1.75rem; }
.lp-hero__chart figcaption { font-size: .8rem; font-weight: 700; color: var(--ink-soft); margin-bottom: .35rem; }
.lp-hero__chart .recent-list { margin: 0; }

/* home2 — hero trust strip */
.lp-hero__points { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .6rem; max-width: 34ch; }
.lp-hero__point { display: flex; align-items: flex-start; gap: .6rem; font-size: .88rem; line-height: 1.4; color: var(--ink-soft); }
.lp-hero__point svg { width: 20px; height: 20px; margin-top: 1px; color: var(--green); flex: none; }
.lp-hero__point strong { color: var(--ink); font-weight: 700; }

/* home2 — verified vs anonymous split in the showcase */
.showcase-split { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; align-items: start; }
.showcase-split__col { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .5rem; border-radius: var(--radius-sm); }
.showcase-split__col--anon { background: var(--paper-2); border: 1px dashed var(--line); }
.showcase-split .score-disc { width: 76px; height: 76px; }
.showcase-split__num { margin: .3rem 0 0; font-size: 1.5rem; font-weight: 800; }
.showcase-split__lbl { margin: 0; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); }
.showcase-split__n { margin: 0; font-size: .72rem; }
.showcase-gap { margin: .8rem 0 0; font-size: .8rem; color: var(--ink-soft); }
.showcase-integrity { display: flex; align-items: center; gap: .7rem; text-align: left; margin: 1rem 0 .25rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper-2); }
.showcase-integrity > svg { width: 26px; height: 26px; color: var(--green); flex: none; }
.showcase-integrity__h { margin: 0 0 .25rem; font-size: .78rem; font-weight: 600; color: var(--ink-soft); }
.showcase-spark { width: 100%; height: 30px; display: block; }
.showcase-growth { width: 100%; height: 40px; display: block; margin-bottom: .25rem; }
.lp-example__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.lp-example__panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; }
.lp-example__panel figcaption { font-weight: 700; font-size: .9rem; margin-bottom: .6rem; }
.lp-example__panel .recent-list { margin: 0; }

/* Example profile card */
.showcase-card {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0,0,0,.08); padding: 1.5rem; text-align: center;
}
.showcase-card__kicker {
    display: inline-block; margin: 0 0 .75rem; padding: .15rem .6rem;
    background: var(--green-soft); color: var(--green-darker);
    border-radius: 999px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.showcase-card__head { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin-bottom: 1rem; }
.showcase-card__based { margin: .6rem 0 1rem; font-size: .85rem; }
.showcase-card__sub { text-align: center; margin: 1rem 0 .6rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.showcase-card .pie-wrap { justify-content: center; }
.showcase-badge__logo { height: 16px; width: auto; }
.drivers--mini .driver { grid-template-columns: 1fr 1.4fr auto; gap: .5rem; font-size: .85rem; }
.pie--sm { width: 120px; height: 120px; }
.showcase-badge {
    display: flex; align-items: center; gap: .6rem; margin-top: 1.25rem;
    padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper-2);
}
.showcase-badge__brand { font-weight: 800; color: var(--green); }
.showcase-badge__score { font-weight: 800; font-size: 1.15rem; }
.showcase-badge__label { margin-inline-start: auto; font-size: .78rem; }

/* Generic landing section */
.lp-section { padding-block: 2.5rem; border-top: 1px solid var(--line); }
.lp-section__title { text-align: center; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 2rem; }

/* Feature grid */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.25rem; }
.feature { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.feature__icon { width: 38px; height: 38px; color: var(--green); margin-bottom: .75rem; }
.feature__h { margin: 0 0 .4rem; font-size: 1.1rem; }
.feature__t { margin: 0; color: var(--ink-soft); }
.lp-section__intro { text-align: center; max-width: 62ch; margin: -1.25rem auto 2rem; color: var(--ink-soft); font-size: 1.05rem; }
.lp-why__closing { text-align: center; font-weight: 600; color: var(--green-darker); margin: 1.75rem 0 0; font-size: 1.05rem; }

/* How it works */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; counter-reset: step; }
.step { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.step__n {
    display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; margin-bottom: .6rem;
    background: var(--green); color: #fff; border-radius: 50%; font-weight: 800;
}
.step h3 { margin: 0 0 .4rem; }
.step p { margin: 0; color: var(--ink-soft); }

/* Closing CTA band */
.lp-cta {
    text-align: center; padding: 3rem 1.5rem; margin-top: 2.5rem;
    background: linear-gradient(135deg, var(--green-soft), #fff);
    border: 1px solid var(--green-line); border-radius: var(--radius);
}
.lp-cta h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 .5rem; }
.lp-cta p { color: var(--ink-soft); margin: 0 0 1.5rem; }

.search-results { display: grid; gap: 1rem; }

/* OpenStreetMap location picker */
.loc-reach .metric__yesno { display: flex; flex-direction: column; gap: .7rem; align-items: flex-start; }
/* Beat the broad `.form label { display:grid }` rule that stacks radio above text. */
.loc-reach .metric__yesno label { display: flex !important; align-items: center; gap: .55rem; cursor: pointer; }
.loc-reach .metric__yesno input[type="radio"] { flex: 0 0 auto; width: auto; margin: 0; }
.locpicker { display: grid; gap: .6rem; margin-block: .5rem 1rem; }
.locpicker__search { display: flex; gap: .5rem; }
.locpicker__search input { flex: 1; font: inherit; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.locpicker__results { display: grid; gap: 2px; }
.locpicker__result { text-align: start; font: inherit; cursor: pointer; padding: .45rem .6rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-soft); }
.locpicker__result:hover { border-color: var(--green); background: var(--green-soft); }
.locpicker__map { height: 320px; border: 1px solid var(--line); border-radius: var(--radius); }
.locpicker__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.locpicker__item { display: flex; align-items: center; gap: .5rem; justify-content: space-between; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .45rem .7rem; }
.locpicker__remove { border: 0; background: transparent; cursor: pointer; font-size: 1.2rem; line-height: 1; color: var(--bad); }

@media (max-width: 760px) {
    .lp-hero { grid-template-columns: 1fr; }
    .showcase-card { order: -1; }
}

/* =========================================================================
   Company dashboard / verify / admin
   ========================================================================= */
.pill { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.pill--ok   { background: var(--green-soft); color: var(--green-darker); }
.pill--warn { background: #fdf2dc; color: var(--warn); }
.pill--bad  { background: #fbe7e4; color: var(--bad); }
.pill--muted { background: var(--paper-2); color: var(--grey-soft); border: 1px solid var(--line); }

.biz, .verify, .admin { display: grid; gap: 1rem; max-width: 760px; }

/* Account navigation */
.acct-nav { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--line); padding-bottom: .5rem; margin-bottom: .5rem; }
.acct-nav a { padding: .45rem .8rem; border-radius: var(--radius-sm); color: var(--ink-soft); font-weight: 600; }
.acct-nav a:hover { background: var(--paper-2); text-decoration: none; }
.acct-nav a.is-active { background: var(--green-soft); color: var(--green-darker); }
.acct-nav__out { margin-inline-start: auto; color: var(--muted) !important; }

/* Backlink badge style chooser */
.badge-styles { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.badge-style { cursor: pointer; }
.badge-style input { position: absolute; opacity: 0; }
.badge-style__preview { display: inline-block; padding: 10px 14px; border-radius: 8px; line-height: 0; border: 2px solid transparent; }
.badge-style.is-active .badge-style__preview, .badge-style input:checked + .badge-style__preview { border-color: var(--green); box-shadow: 0 0 0 2px var(--green-soft); }
.badge-style img { display: block; }
.badge-style { display: inline-flex; flex-direction: column; align-items: center; gap: .25rem; }
.badge-style__tag { font-size: .68rem; color: var(--green-darker); font-weight: 700; }
.badge-flagship { display: grid; gap: .3rem; max-width: 320px; margin-top: 1rem; }
.badge-flagship select { font: inherit; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }

/* Subscription / checkout */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1rem 0; }
.plan-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; display: grid; gap: .5rem; align-content: start; }
.plan-card--premium { border-color: var(--green); box-shadow: 0 0 0 1px var(--green) inset; }
.plan-card--current { outline: 2px solid var(--green); outline-offset: 2px; }
.plan-card__tag { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #fff; background: var(--green); border-radius: 999px; padding: .1rem .5rem; vertical-align: middle; }
.plan-card__price { font-size: 2rem; font-weight: 800; margin: 0; color: var(--green-darker); }
.plan-card__price small { font-size: .9rem; font-weight: 600; color: var(--muted); }
.breakdown { width: 100%; max-width: 420px; border-collapse: collapse; }
.breakdown td { padding: .55rem .2rem; border-bottom: 1px solid var(--line); }
.breakdown td:last-child { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.breakdown__total td { font-weight: 800; font-size: 1.1rem; border-bottom: 0; }
.notice--warn-soft { background: #fdf6e6; border: 1px solid var(--green-line); color: var(--ink-soft); }
.biz__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.biz h2 { margin-bottom: 0; }
.biz h3 { margin: .75rem 0 .25rem; font-size: 1rem; }

.verify__steps { display: grid; gap: 1rem; padding-inline-start: 1.2rem; }
.verify__urls { list-style: none; padding: 0; display: grid; gap: .3rem; }
.verify__urls code { background: var(--paper); border: 1px solid var(--line); padding: .2rem .45rem; border-radius: var(--radius-sm); }

.doc-list { list-style: none; padding: 0; display: grid; gap: .4rem; }
.doc-list li { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { text-align: start; padding: .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.admin-actions--col { flex-direction: column; align-items: stretch; gap: .5rem; }
.admin-bio { max-width: 40ch; }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .75rem; }
.pricing-grid label { display: grid; gap: .25rem; }
.admin-bio__text { margin: .35rem 0 0; font-size: .9rem; }
.admin-actions input[type="text"] { font: inherit; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer { margin-top: 3rem; background: var(--paper); }
/* Three full-width, centred sections with generous spacing. */
.site-footer__inner {
    max-width: none;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 1rem; padding: 2.5rem 1rem;
}
.site-footer__brand { border-top: 1px solid var(--line); }
.site-footer__logo { display: block; }
.site-footer__nav { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }
/* Bottom two sections: grey background, white text. */
.site-footer__inner:nth-child(n+2) { background: var(--grey); color: #fff; }
.site-footer__legal p { margin: 0; color: #fff; font-size: .85rem; }
.site-footer__parent { margin-top: .4rem; color: rgba(255,255,255,.82) !important; }

/* =========================================================================
   RTL niceties — most mirroring is automatic via logical properties.
   Only truly directional glyphs need an explicit flip.
   ========================================================================= */
[dir="rtl"] .metric__anchor--low  { transform: scaleX(-1); }
[dir="rtl"] .metric__anchor--high { transform: scaleX(-1); }

@media (max-width: 560px) {
    .metric__control { grid-template-columns: auto 1fr auto; }
    .metric__state { grid-column: 1 / -1; text-align: start; }
    .driver { grid-template-columns: 1fr auto; }
    .driver__bar { grid-column: 1 / -1; order: 3; }
}

/* =========================================================================
   Overflow guard — nothing should be wider than the viewport on any page
   ========================================================================= */
html, body { overflow-x: hidden; }                 /* page-level safety net */
img, svg, video, canvas, iframe { max-width: 100%; }
/* NOTE: do NOT force `height:auto` here — it overrides fixed-height logo images
   (which are SVGs with no intrinsic size) and blows them up to full width. */
pre, code, .verify__urls code { overflow-wrap: anywhere; }
table { max-width: 100%; }

/* Flex/grid children default to min-width:auto and refuse to shrink below their
   content — that's what pushes sliders and inputs past the screen edge. */
.metric, .metric__control, .metric__control > *, .metric__slider,
.driver, .driver > *, .driver__bar,
.rating-form, .rating-form__tier, .rating-form__submit, .rating-form__submit > *,
.score-grid, .lp-hero, .pie-wrap, .biz, .verify, .admin { min-width: 0; }
.metric__slider { width: 100%; }

/* The email-verify field must be allowed to shrink on small screens. */
.rating-form__verify { flex: 1 1 220px; min-width: 0; }

@media (max-width: 560px) {
    .rating-form { padding: 1rem; }
    .rating-form__submit { flex-direction: column; align-items: stretch; }
    .rating-form__verify { flex-wrap: wrap; }
    .rating-form__verify .btn, .rating-form__submit > .btn { width: 100%; }
    /* Wide tables scroll within themselves rather than stretching the page. */
    .admin-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* --- Visitor stats (admin only) ------------------------------------------ */
.stats-range { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin: 1rem 0 1.5rem; }
.stats-range label { display: grid; gap: .25rem; font-size: .85rem; color: var(--grey-muted); }
.stats-range input { padding: .4rem .5rem; border: 1px solid #d8d6d2; border-radius: 6px; }

.stats-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin-bottom: 1.5rem; }
.stat-card { background: #fff; border: 1px solid #ece9e4; border-radius: 10px; padding: .85rem 1rem; display: flex; flex-direction: column; gap: .15rem; }
.stat-card__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--grey-muted); }
.stat-card__val { font-size: 1.7rem; font-weight: 800; color: var(--grey); line-height: 1.1; }
.stat-card__val--green { color: var(--green); }
.stat-card__val--amber { color: var(--amber); }
.stat-card__val--grey { color: var(--grey-muted); }
.stat-card__sub { font-size: .72rem; color: var(--grey-muted); }

.stats-chart { background: #fff; border: 1px solid #ece9e4; border-radius: 10px; padding: 1rem; margin-bottom: 1.5rem; }
.stats-chart__legend { display: flex; gap: 1rem; font-size: .8rem; color: var(--grey-muted); margin-bottom: .75rem; }
.stats-chart__legend span { display: inline-flex; align-items: center; gap: .35rem; }
.dot { width: .65rem; height: .65rem; border-radius: 50%; display: inline-block; }
.dot--green { background: var(--green); }
.dot--amber { background: var(--amber); }
.dot--grey { background: var(--grey-muted); }
.stats-bars { display: flex; align-items: flex-end; gap: 2px; height: 160px; }
.stats-bar { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; min-width: 3px; }
.stats-bar__stack { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 3px 3px 0 0; overflow: hidden; background: #f4f2ee; }
.stats-bar:hover .stats-bar__stack { outline: 2px solid var(--green); outline-offset: -2px; }
.seg { display: block; width: 100%; }
.seg--green { background: var(--green); }
.seg--amber { background: var(--amber); }
.seg--grey { background: var(--grey-muted); }
.stats-chart__axis { display: flex; justify-content: space-between; font-size: .72rem; color: var(--grey-muted); margin-top: .4rem; }

.stats-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1rem; }
.stats-two h2 { font-size: 1rem; }

/* --- Profile score trends (inline SVG) ----------------------------------- */
.profile__trends { margin-top: 1.5rem; }
.trend { margin: 0 0 1.5rem; }
.trend figcaption { font-weight: 700; font-size: .9rem; color: var(--grey); margin-bottom: .35rem; }
.trend-svg { width: 100%; height: auto; display: block; background: #fff; border: 1px solid #ece9e4; border-radius: 8px; }
.trend__axis { display: flex; justify-content: space-between; font-size: .72rem; color: var(--grey-muted); margin-top: .25rem; }
.profile__views { font-size: .82rem; color: var(--grey-muted); }
.profile__views::before { content: "·"; margin: 0 .4rem; }
.dist { display: grid; gap: .35rem; }
.dist__row { display: grid; grid-template-columns: 5.5rem 1fr 2.5rem; align-items: center; gap: .6rem; }
.dist__label { font-size: .78rem; color: var(--grey-muted); text-align: right; font-variant-numeric: tabular-nums; }
.dist__track { background: var(--paper-2); border: 1px solid var(--line); border-radius: 4px; height: 18px; overflow: hidden; }
.dist__bar { display: block; height: 100%; border-radius: 3px; min-width: 1px; }
.dist__count { font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.anomaly-list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .3rem; }
.anomaly-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; padding: .4rem .6rem; border-radius: 6px; background: #f6f4f0; font-size: .85rem; border-left: 4px solid var(--grey-muted); }
.anomaly-item--negative { border-left-color: #c0392b; }
.anomaly-item--positive { border-left-color: #3a9d3a; }
.anomaly-item--mixed { border-left-color: #b8740f; }
.anomaly-date { font-weight: 700; font-variant-numeric: tabular-nums; }
.anomaly-dir { font-weight: 600; }
.anomaly-vol { color: var(--grey-muted); }
.anomaly-avg { margin-inline-start: auto; font-weight: 700; }
.admin-table--compact td, .admin-table--compact th { padding: .35rem .5rem; font-size: .82rem; }
.table-scroll { overflow-x: auto; }
@media (max-width: 760px) { .stats-two { grid-template-columns: 1fr; } }