/* TrustCheck app mode: the site opened from a phone's home screen (html.is-app, set by partials/app_mode_head).
   One look on iPhone and Android (owner's references, 2026-10-26): a soft grey canvas, white rounded cards with soft
   shadows, one ink-black card per screen for the main action or numbers, round icon buttons, grouped list rows, and a
   floating black tab bar whose white pill holds the current tab. Only the system font and the back glyph follow the
   platform (.pf-ios / .pf-android). Nothing here applies to the ordinary website, except the install prompt (.as-install). */

.as-appbar, .as-tabbar { display: none; }

/* ---------- Tokens ---------- */
html.is-app {
    --a-canvas: #f2f2f4;
    --a-card: #ffffff;
    --a-ink: #0f0f10;
    --a-ink-2: #5c5c64;
    --a-ink-3: #6b6b73;
    --a-fill: #e9e9ed;
    --a-line: rgba(15, 15, 16, .07);
    --a-hero: #0f0f10;
    --a-hero-2: #1e1e21;
    --a-on-hero: #ffffff;
    --a-on-hero-2: rgba(255, 255, 255, .62);
    --a-btn: #0f0f10;
    --a-on-btn: #ffffff;
    --a-amber: #f5a623;
    --a-amber-ink: #8a5300;
    --a-red: #c4271b;
    --a-red-soft: #fdeceb;
    --a-green: #13804a;
    --a-r: 24px;
    --a-r-md: 18px;
    --a-r-sm: 14px;
    --a-shadow: 0 1px 2px rgba(15, 15, 16, .04), 0 8px 24px -14px rgba(15, 15, 16, .16);
    --a-shadow-sm: 0 1px 2px rgba(15, 15, 16, .05), 0 3px 10px -6px rgba(15, 15, 16, .14);
    --a-shadow-hero: 0 2px 4px rgba(15, 15, 16, .12), 0 18px 36px -18px rgba(15, 15, 16, .55);
    --a-bar-h: 60px;
    --as-cap-h: 66px;
    --as-cap-gap: max(12px, calc(env(safe-area-inset-bottom) - 8px));
    --as-dock: calc(var(--as-cap-h) + var(--as-cap-gap) + 10px);
}
html.is-app[data-theme="dark"] {
    --a-canvas: #0b0b0c;
    --a-card: #19191b;
    --a-ink: #f4f4f5;
    --a-ink-2: #a8a8b0;
    --a-ink-3: #8f8f98;
    --a-fill: #26262a;
    --a-line: rgba(255, 255, 255, .08);
    --a-hero: #232327;
    --a-hero-2: #2e2e33;
    --a-btn: #f4f4f5;
    --a-on-btn: #0f0f10;
    --a-amber-ink: #ffc65c;
    --a-red: #ff8a80;
    --a-red-soft: rgba(255, 138, 128, .14);
    --a-green: #5fd39b;
    --a-shadow: 0 1px 2px rgba(0, 0, 0, .5);
    --a-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --a-shadow-hero: 0 1px 2px rgba(0, 0, 0, .6);
}
html.pf-ios.is-app { --a-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif; }
html.pf-android.is-app { --a-font: Roboto, "Google Sans", system-ui, sans-serif; }
html.is-app { --tc-font: var(--a-font); --font: var(--a-font); }

/* ---------- Frame ---------- */
html.is-app { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; background: var(--a-canvas); }
html.is-app body { overscroll-behavior-y: none; padding-bottom: calc(var(--as-dock) + 8px); font-family: var(--a-font); }
html.is-app ::selection { background: rgba(245, 166, 35, .32); color: inherit; }
html.is-app .tc-topbar, html.is-app .tc-footer, html.is-app .tc-skip { display: none !important; }
/* The header says where you are, and inside the app you are on the real TrustCheck */
html.is-app .tc-crumbs, html.is-app .tc-breadcrumb, html.is-app .tc-notice-bar,
html.is-app body.tc-site nav[aria-label="Breadcrumb"], html.is-app body.tc-site [data-tcui="breadcrumb"] { display: none !important; }
/* Ads in app mode: blog pages only */
html.is-app:not(.as-blog) .tc-ad-unit, html.is-app:not(.as-blog) ins.adsbygoogle { display: none !important; }
html.is-app .cookies-card { bottom: calc(var(--as-dock) + 12px) !important; border-radius: var(--a-r) !important; }

/* ---------- Header: round back, centred title, round search ---------- */
html.is-app .as-appbar { display: block; position: sticky; top: 0; z-index: 1080; padding-top: env(safe-area-inset-top); background: transparent; view-transition-name: as-appbar; user-select: none; -webkit-user-select: none;
    transition: background-color .2s ease-out, box-shadow .2s ease-out; }
html.is-app.as-scrolled .as-appbar { background: color-mix(in srgb, var(--a-canvas) 86%, transparent); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); box-shadow: 0 1px 0 var(--a-line); }
html.is-app .as-appbar-inner { display: flex; align-items: center; gap: 10px; height: var(--a-bar-h); padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); position: relative; }
html.is-app :is(.as-back, .as-action) { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%;
    background: var(--a-card); color: var(--a-ink); box-shadow: var(--a-shadow-sm); text-decoration: none; cursor: pointer; position: relative; overflow: hidden; transition: transform .15s ease-out; }
html.is-app :is(.as-back, .as-action):active { transform: scale(.92); }
html.is-app .as-action { margin-left: auto; }
html.is-app .as-action .as-g { width: 21px; height: 21px; }
html.is-app .as-back-label { display: none; }
html.is-app .as-back-ios, html.is-app .as-back-md { display: none; }
html.pf-ios.is-app .as-back-ios { display: block; width: 10px; height: 17px; margin-right: 2px; }
html.pf-android.is-app .as-back-md { display: block; width: 22px; height: 22px; }
html.is-app .as-title { position: absolute; left: 76px; right: 76px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 600 17px/1.2 var(--a-font); letter-spacing: -0.2px; color: var(--a-ink); }
html.is-app .as-brand { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; text-decoration: none; }
html.is-app .as-brand .trustcheck-logo { width: 128px; height: auto; color: var(--a-ink); display: block; }
/* A page with its own big title: the bar's small title appears once that title scrolls under it */
html.is-app.as-large .as-title { opacity: 0; transition: opacity .18s; }
html.is-app.as-large.as-title-in .as-title { opacity: 1; }
/* Back buttons inside the member and sign-in top bars: only in the app, never on the website */
.as-back--inline { display: none; }
html.is-app .as-back--inline { display: inline-flex; margin-right: 4px; }
html.is-app .auth__top { justify-content: flex-start; gap: 8px; }
html.is-app .auth__top > .app-row { margin-left: auto; }

/* ---------- Tab bar: a floating black capsule; the current tab is a white pill with its name ---------- */
html.is-app .as-tabbar { display: flex; position: fixed; z-index: 1090; left: 50%; bottom: var(--as-cap-gap); width: min(calc(100% - 32px), 420px); height: var(--as-cap-h);
    transform: translate3d(-50%, var(--as-vv-shift, 0px), 0); padding: 7px; gap: 4px; border-radius: 999px; background: #0f0f10;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18), 0 18px 38px -14px rgba(0, 0, 0, .55); view-transition-name: as-tabbar; user-select: none; -webkit-user-select: none; will-change: transform; }
html.is-app[data-theme="dark"] .as-tabbar { background: #232327; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 38px -14px rgba(0, 0, 0, .9); }
html.is-app .as-tab { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 999px; color: #8e8e97; text-decoration: none; position: relative;
    transition: flex-grow .35s cubic-bezier(.3, 1.2, .4, 1), color .2s ease-out, transform .12s ease-out; }
html.is-app .as-tab:active { transform: scale(.94); }
html.is-app .as-tab.is-active { flex-grow: 2.1; color: #0f0f10; }
html.is-app .as-tab > :not(.as-tab-pill) { position: relative; z-index: 1; }
html.is-app .as-tab-pill { position: absolute; inset: 0; border-radius: 999px; background: #ffffff; view-transition-name: as-tab-pill; }
html.is-app .as-tab-icon { display: grid; place-items: center; background: none !important; }
html.is-app .as-tab .as-g { width: 23px; height: 23px; }
html.is-app .as-tab-label { font: 600 14px/1 var(--a-font); letter-spacing: -0.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.is-app .as-tab:not(.is-active) .as-tab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html.is-app .as-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .25); }
html.is-app .as-tab.is-active .as-avatar { box-shadow: 0 0 0 1.5px #0f0f10; }
::view-transition-group(as-tab-pill) { animation-duration: .42s; animation-timing-function: cubic-bezier(.3, 1.2, .45, 1); }
::view-transition-old(as-tab-pill), ::view-transition-new(as-tab-pill) { animation: none; }
@media (max-width: 360px) { html.is-app .as-tab-label { font-size: 13px; } html.is-app .as-tab .as-g { width: 21px; height: 21px; } }
html.is-app.as-kb .as-tabbar { opacity: 0; pointer-events: none; transform: translate3d(-50%, 120%, 0); transition: opacity .15s, transform .2s; }

/* ---------- Platform glyphs (appGlyph): Phosphor on iOS, Material Symbols elsewhere; tabs fill when active ---------- */
.as-g { display: block; flex: none; }
.as-g-ios { display: none; }
html.pf-ios .as-g-ios { display: block; }
html.pf-ios .as-g-md { display: none; }
.as-tab .as-g-fill { display: none !important; }
.as-tab.is-active .as-g-line { display: none !important; }
.as-tab.is-active .as-g-fill.as-g-md { display: block !important; }
html.pf-ios .as-tab.is-active .as-g-fill.as-g-md { display: none !important; }
html.pf-ios .as-tab.is-active .as-g-fill.as-g-ios { display: block !important; }
.as-ripple { display: none; }

/* ---------- Page transitions (installed app only) ---------- */
@media (display-mode: standalone) {
    @view-transition { navigation: auto; }
}
::view-transition-group(as-tabbar), ::view-transition-group(as-appbar) { animation: none; }
::view-transition-old(as-tabbar), ::view-transition-new(as-tabbar) { animation: none; }
html.pf-ios::view-transition-old(root) { animation: as-ios-out .38s cubic-bezier(.2, .8, .2, 1) both; }
html.pf-ios::view-transition-new(root) { animation: as-ios-in .38s cubic-bezier(.2, .8, .2, 1) both; }
html.pf-ios.as-nav-back::view-transition-old(root) { animation: as-ios-back-out .34s cubic-bezier(.2, .8, .2, 1) both; z-index: 2; }
html.pf-ios.as-nav-back::view-transition-new(root) { animation: as-ios-back-in .34s cubic-bezier(.2, .8, .2, 1) both; z-index: 1; }
@keyframes as-ios-in { from { transform: translateX(100%); } }
@keyframes as-ios-out { to { transform: translateX(-28%); filter: brightness(.92); } }
@keyframes as-ios-back-in { from { transform: translateX(-28%); filter: brightness(.92); } }
@keyframes as-ios-back-out { to { transform: translateX(100%); } }
html.pf-android::view-transition-old(root) { animation: as-md-out .09s cubic-bezier(.4, 0, 1, 1) both; }
html.pf-android::view-transition-new(root) { animation: as-md-in .21s cubic-bezier(0, 0, .2, 1) .09s both; }
@keyframes as-md-out { to { opacity: 0; } }
@keyframes as-md-in { from { opacity: 0; transform: scale(.96); } }
html.as-nav-tab::view-transition-old(root) { animation: as-md-out .12s linear both; }
html.as-nav-tab::view-transition-new(root) { animation: as-md-in .18s ease-out both; }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
    html.is-app .as-tab { transition: none; }
}
html.as-swiping body > *:not(.as-tabbar) { transition: none; }

/* ---------- Install prompt (phone browsers, not in the app) ---------- */
.as-install { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 1095; display: flex; align-items: flex-start; gap: 12px; padding: 14px 12px 14px 14px; border-radius: 22px; background: var(--tc-surface, #fff); color: var(--tc-ink, #09090b); border: 1px solid var(--tc-line, #e4e4e7); box-shadow: 0 12px 40px -12px rgba(0, 0, 0, .35); max-width: 520px; margin: 0 auto; font-family: inherit; animation: as-install-in .35s cubic-bezier(.16, 1, .3, 1); }
.as-install[hidden] { display: none; }
@keyframes as-install-in { from { transform: translateY(24px); opacity: 0; } }
.as-install-icon { border-radius: 11px; flex: 0 0 auto; }
.as-install-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; font-size: 13px; line-height: 1.4; color: var(--tc-ink-2, #52525b); }
.as-install-text strong { font-size: 15px; color: var(--tc-ink, #09090b); }
.as-install-text svg { vertical-align: -3px; color: #007aff; margin: 0 1px; }
.as-install-go { align-self: center; flex: 0 0 auto; border: 0; border-radius: 999px; padding: 10px 16px; font-weight: 600; font-size: 14px; background: #0f0f10; color: #fff; cursor: pointer; }
.as-install-close { align-self: center; flex: 0 0 auto; border: 0; background: transparent; color: var(--tc-ink-3, #71717a); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.as-install[data-platform="ios"] .as-install-android, .as-install[data-platform="android"] .as-install-ios { display: none; }
.as-install-steps { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; font-size: 13px; line-height: 1.4; color: var(--tc-ink-2, #52525b); }
.as-install-steps b, .as-install-manual b { color: var(--tc-ink, #09090b); font-weight: 600; }
.as-install-steps svg { vertical-align: -2px; color: #007aff; margin: 0 1px; }
html.is-standalone .as-install { display: none !important; }
html.is-app .as-install { bottom: calc(var(--as-dock) + 10px); }

/* ---------- Every website page inside the app ----------
   The website's own tokens are re-pointed, so every TrustCheck page follows: canvas ground, white cards with soft
   shadows and big corners, near-invisible lines, black primary buttons. */
html.is-app body.tc-site {
    --tc-paper: var(--a-canvas); --tc-surface: var(--a-card); --tc-line: var(--a-line); --tc-line-strong: rgba(15, 15, 16, .12); --tc-row-hover: var(--a-fill);
    --tc-radius: var(--a-r); --tc-radius-sm: var(--a-r-sm); --tc-shadow: var(--a-shadow); --tc-shadow-lift: var(--a-shadow);
    --tc-ink: var(--a-ink); --tc-ink-2: var(--a-ink-2); --tc-ink-3: var(--a-ink-3);
    background: var(--a-canvas); color: var(--a-ink);
}
html.is-app[data-theme="dark"] body.tc-site { --tc-line-strong: rgba(255, 255, 255, .14); }
html.is-app body.tc-site :is(.tc-section, .tc-section--paper, .tc-hero-band, .tc-main, .pc-main, main) { background: transparent !important; }
html.is-app body.tc-site .tc-section, html.is-app body.tc-site .tc-section--paper { padding-top: 14px !important; padding-bottom: 14px !important; border: 0 !important; }
html.is-app body.tc-site .tc-wrap { width: min(100% - 32px, var(--tc-wrap, 1200px)); }

/* Page headers: website heroes become a compact screen title with one line of context, no bands or badges */
html.is-app :is(.th-hero, .sxc-hero, .sxb-hero, .sxl-hero, .sxr-hero, .sxw-hero, .pc-hero, .ra-hero, .rw-hero, .tl-hero, .lg-hero, .iv-hero, .hb-hero, .ct-hero, .bx-hero, .bp-hero, .bh-hero, .bc-hero) {
    background: none !important; background-image: none !important; border: 0 !important; padding-top: 2px !important; padding-bottom: 6px !important; min-height: 0 !important; text-align: left !important; color: var(--a-ink) !important; }
html.is-app :is(.th-hero, .sxc-hero, .sxb-hero, .sxl-hero, .sxr-hero, .sxw-hero, .pc-hero, .ra-hero, .rw-hero, .tl-hero, .lg-hero, .iv-hero, .hb-hero, .ct-hero, .bx-hero, .bp-hero, .bh-hero, .bc-hero)::before,
html.is-app :is(.th-hero, .sxc-hero, .sxb-hero, .sxl-hero, .sxr-hero, .sxw-hero, .pc-hero, .ra-hero, .rw-hero, .tl-hero, .lg-hero, .iv-hero, .hb-hero, .ct-hero, .bx-hero, .bp-hero, .bh-hero, .bc-hero)::after,
html.is-app :is(.sxs-hero, .sxv-hero)::before, html.is-app :is(.sxs-hero, .sxv-hero)::after { display: none !important; }
html.is-app :is(.th-hero, .sxc-hero, .sxb-hero, .sxl-hero, .sxr-hero, .sxw-hero, .pc-hero, .ra-hero, .rw-hero, .tl-hero, .lg-hero, .iv-hero, .hb-hero, .ct-hero, .bx-hero, .bp-hero, .bh-hero, .bc-hero) [class*="-hero-inner"] {
    padding-top: 0 !important; padding-bottom: 6px !important; text-align: left !important; justify-items: stretch !important; }
html.is-app :is(.th-hero, .sxc-hero, .sxb-hero, .sxl-hero, .sxr-hero, .sxw-hero, .pc-hero, .ra-hero, .rw-hero, .tl-hero, .lg-hero, .iv-hero, .hb-hero, .ct-hero, .bx-hero, .bp-hero, .bh-hero, .bc-hero) :is(.pc-eyebrow, .iv-eyebrow, .ct-eyebrow, .tl-eyebrow, .th-eyebrow, .sxl-kicker, [data-tcui="badge"]) { display: none !important; }
html.is-app :is(.th-hero, .sxc-hero, .sxb-hero, .sxl-hero, .sxr-hero, .sxw-hero, .pc-hero, .ra-hero, .rw-hero, .tl-hero, .lg-hero, .iv-hero, .hb-hero, .ct-hero, .bx-hero, .bp-hero, .bh-hero, .bc-hero) h1 {
    font: 700 28px/1.14 var(--a-font) !important; letter-spacing: -0.025em !important; margin: 4px 0 6px !important; text-align: left !important; max-width: none !important; color: var(--a-ink) !important; }
html.is-app :is(.th-hero, .sxc-hero, .sxb-hero, .sxl-hero, .sxr-hero, .sxw-hero, .pc-hero, .ra-hero, .rw-hero, .tl-hero, .lg-hero, .iv-hero, .hb-hero, .ct-hero, .bx-hero, .bp-hero, .bh-hero, .bc-hero) h1 span { background: none !important; color: inherit !important; padding: 0 !important; box-shadow: none !important; text-decoration: none !important; }
html.is-app :is(.th-hero, .sxc-hero, .sxb-hero, .sxl-hero, .sxr-hero, .sxw-hero, .pc-hero, .ra-hero, .rw-hero, .tl-hero, .lg-hero, .iv-hero, .hb-hero, .ct-hero, .bx-hero, .bp-hero, .bh-hero, .bc-hero) h1 span::before,
html.is-app :is(.th-hero, .sxc-hero, .sxb-hero, .sxl-hero, .sxr-hero, .sxw-hero, .pc-hero, .ra-hero, .rw-hero, .tl-hero, .lg-hero, .iv-hero, .hb-hero, .ct-hero, .bx-hero, .bp-hero, .bh-hero, .bc-hero) h1 span::after { display: none !important; }
html.is-app :is(.sxc-lead, .pc-lead, .ra-lead, .rw-lead, .lg-lead, .hb-lead, .ct-lead, .bh-lead, .iv-lead, .sxl-lead, .sxr-lead, .sxw-lead, .sxb-lead, .th-lead, .tl-lead) {
    font: 400 15px/1.45 var(--a-font) !important; color: var(--a-ink-2) !important; margin: 0 0 14px !important; max-width: none !important;
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.is-app .sxl-hero .sxi-try { color: var(--a-ink-3) !important; }

/* Section titles: quiet and close to their content, like the references' "Recent activity" */
html.is-app body.tc-site :is(.tc-h2, .tc-section-title, .pc-tips h2, .pc-results-title, .sxl-sec > h2) { font: 650 19px/1.25 var(--a-font) !important; letter-spacing: -0.015em !important; margin-bottom: 4px; }
html.is-app body.tc-site .tc-section-lead { display: none; }
html.is-app body.tc-site :is(.tc-h3) { font-weight: 650; letter-spacing: -0.01em; }

/* Numbers: each page's stat strip becomes the screen's one black card */
html.is-app :is(.tl-stats, .th-stats, .sxw-stats, .sxi-stats, .sxg-stats, .sxc-stats, .sxb-stats, .ra-stats, .iv-stats, .bx-stats) {
    display: grid !important; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 14px 10px !important; margin: 14px 0 6px !important; padding: 20px 20px 18px !important;
    border-radius: var(--a-r) !important; background: var(--a-hero) !important; color: var(--a-on-hero) !important; box-shadow: var(--a-shadow-hero) !important; border: 0 !important; }
html.is-app :is(.tl-stats, .th-stats, .sxw-stats, .sxi-stats, .sxg-stats, .sxc-stats, .sxb-stats, .ra-stats, .iv-stats, .bx-stats) > * {
    background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; }
html.is-app :is(.tl-stats, .th-stats, .sxw-stats, .sxi-stats, .sxg-stats, .sxc-stats, .sxb-stats, .ra-stats, .iv-stats, .bx-stats) :is(dd, strong, b, .tc-num, [data-tcui="animated-number"]) {
    color: var(--a-on-hero) !important; font: 700 26px/1.05 var(--a-font) !important; letter-spacing: -0.02em !important; font-variant-numeric: tabular-nums; margin: 0 !important; order: -1; }
html.is-app :is(.tl-stats, .th-stats, .sxw-stats, .sxi-stats, .sxg-stats, .sxc-stats, .sxb-stats, .ra-stats, .iv-stats, .bx-stats) :is(dt, dt *, small, p) {
    color: var(--a-on-hero-2) !important; font: 500 12.5px/1.3 var(--a-font) !important; letter-spacing: 0 !important; text-transform: none !important; }
html.is-app :is(.tl-stats, .th-stats, .sxw-stats, .sxi-stats, .sxg-stats, .sxc-stats, .sxb-stats, .ra-stats, .iv-stats, .bx-stats) dd * { font: inherit !important; color: inherit !important; letter-spacing: inherit !important; }
html.is-app :is(.tl-stats, .th-stats, .sxw-stats, .sxi-stats, .sxg-stats, .sxc-stats, .sxb-stats, .ra-stats, .iv-stats, .bx-stats) { width: 100% !important; max-width: none !important; justify-self: stretch !important; align-self: stretch !important; box-sizing: border-box; }
html.is-app :is(.tl-stats, .th-stats, .sxw-stats, .sxi-stats, .sxg-stats, .sxc-stats, .sxb-stats, .ra-stats, .iv-stats, .bx-stats) dt [data-tcui="badge"], html.is-app :is(.bx-stats, .iv-stats) dt [data-tcui="badge"] * { background: transparent !important; color: var(--a-on-hero-2) !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; display: inline !important; font: 500 12.5px/1.3 var(--a-font) !important; opacity: 1 !important; visibility: visible !important; }

/* Buttons: black pills for the main action, white pills for the rest */
html.is-app body.tc-site .tc-btn { border-radius: 999px !important; min-height: 48px; padding-inline: 20px; font-weight: 600; font-size: 15px; box-shadow: none; border: 0; }
html.is-app body.tc-site .tc-btn-sm { min-height: 38px; padding-inline: 14px; font-size: 14px; }
html.is-app body.tc-site :is(.tc-btn-primary, a.tc-btn-primary, .tc-btn-dark) { background: var(--a-btn) !important; color: var(--a-on-btn) !important; }
html.is-app body.tc-site :is(.tc-btn-primary, .tc-btn-dark):active { transform: scale(.98); }
html.is-app body.tc-site [data-tcui="magnetic-button"][data-variant="primary"], html.is-app body.tc-site [data-tcui="magnetic-button"][data-variant="primary"] > * {
    background: var(--a-btn) !important; color: var(--a-on-btn) !important; border-color: transparent !important; box-shadow: none !important; border-radius: 999px !important; }
html.is-app body.tc-site :is(.tc-btn-outline, a.tc-btn-outline) { background: var(--a-card) !important; color: var(--a-ink) !important; border: 0 !important; box-shadow: var(--a-shadow-sm) !important; }

/* Fields */
html.is-app body.tc-site :is(.tc-input, .tc-field input:not([type="checkbox"]):not([type="radio"]), .tc-field select, .tc-field textarea, .tc-form input:not([type="checkbox"]):not([type="radio"]):not([type="search"]), .tc-form select, .tc-form textarea) {
    border-radius: var(--a-r-sm) !important; min-height: 50px; background: var(--a-card) !important; border: 1px solid var(--a-line) !important; box-shadow: var(--a-shadow-sm); font-size: 16px; }
html.is-app body.tc-site :is(.tc-field, .tc-form) textarea { min-height: 120px; }
html.is-app body.tc-site :is(.tc-input, .tc-field input, .tc-field select, .tc-field textarea, .tc-form input, .tc-form select, .tc-form textarea):focus { border-color: var(--a-ink) !important; outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--a-ink) 14%, transparent) !important; }

/* Search: a white pill with a black round go button (references: "Search Shipping" with its round button) */
html.is-app :is(.pc-search-field, .tc-search-field) { background: var(--a-card) !important; border: 0 !important; box-shadow: var(--a-shadow) !important; border-radius: 999px !important; padding: 0 6px 0 18px !important; min-height: 56px; gap: 10px; }
html.is-app :is(.pc-search-field, .tc-search-field):focus-within { box-shadow: 0 0 0 2px var(--a-ink), var(--a-shadow) !important; }
html.is-app :is(.pc-search-field, .tc-search-field) input { font-size: 16px !important; padding: 12px 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; min-height: 0 !important; }
html.is-app :is(.pc-search-field, .tc-search-field) input::placeholder { color: var(--a-ink-3); }
html.is-app .pc-search { margin-top: 2px !important; width: 100% !important; }
html.is-app body.tc-site :is(.pc-search, .pc-search-field, .tc-search-field, .tc-search) :is(.pc-search-btn, .tc-btn, .tc-search-btn) { width: 44px; height: 44px; min-height: 44px !important; padding: 0 !important; border-radius: 50% !important; font-size: 0 !important; flex: none; border: 0 !important;
    background-color: var(--a-btn) !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 20px !important; color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") !important; }
html.is-app[data-theme="dark"] body.tc-site :is(.pc-search, .pc-search-field, .tc-search-field, .tc-search) :is(.pc-search-btn, .tc-btn, .tc-search-btn) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f0f10' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") !important; }
html.is-app body.tc-site :is(.pc-search, .pc-search-field, .tc-search-field, .tc-search) :is(.pc-search-btn, .tc-btn, .tc-search-btn) > * { display: none !important; }

/* Chips and filter rows: white pills that scroll sideways; the chosen one is black */
html.is-app body.tc-site .tc-chip, html.is-app .sxi-try button { min-height: 36px; padding: 0 15px !important; border: 0 !important; border-radius: 999px !important; background: var(--a-card) !important; color: var(--a-ink) !important; box-shadow: var(--a-shadow-sm); font-size: 14px !important; font-weight: 500; }
html.is-app body.tc-site :is(.tc-chip[aria-pressed="true"], .tc-chip[aria-current], .tc-chip.is-active, .tc-chip.active) { background: var(--a-btn) !important; color: var(--a-on-btn) !important; }
html.is-app :is(.pc-examples, .pc-stores, .pc-suggest-chips, .sxi-try) { flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto; scrollbar-width: none; margin-left: -16px !important; margin-right: -16px !important; padding: 4px 16px 6px !important; scroll-padding: 0 16px; gap: 8px !important; }
html.is-app :is(.pc-examples, .pc-stores, .pc-suggest-chips, .sxi-try)::-webkit-scrollbar { display: none; }
html.is-app :is(.pc-examples, .sxi-try) > span:first-child { display: none; }
html.is-app :is(.pc-examples, .pc-suggest-chips) .tc-chip, html.is-app .sxi-try button { flex: none; }
html.is-app .pc-stores li { flex: none; height: 32px !important; padding: 0 12px !important; border: 0 !important; border-radius: 999px !important; background: var(--a-card) !important; box-shadow: var(--a-shadow-sm); }
html.is-app .pc-stores img { height: 15px !important; }

/* Segmented controls: a grey track with a black pill for the current choice */
html.is-app body.tc-site :is(.tc-tabs, .pc-sort) { display: flex !important; width: 100%; gap: 2px; padding: 4px !important; border: 0 !important; border-radius: 999px !important; background: var(--a-fill) !important; overflow-x: auto; scrollbar-width: none; box-shadow: none !important; }
html.is-app body.tc-site :is(.tc-tabs, .pc-sort) > :is(a, button) { flex: 1 0 auto; justify-content: center; text-align: center; min-height: 38px; padding: 0 14px !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; color: var(--a-ink-2) !important; font-weight: 600; font-size: 14px; box-shadow: none !important; display: inline-flex; align-items: center; }
html.is-app body.tc-site :is(.tc-tabs, .pc-sort) > :is([aria-current], [aria-selected="true"], .is-active, .active) { background: var(--a-btn) !important; color: var(--a-on-btn) !important; }

/* Lists and tips: grouped rows on one white card */
html.is-app .pc-tips ul { display: block !important; border-radius: var(--a-r); overflow: hidden; background: var(--a-card); box-shadow: var(--a-shadow); }
html.is-app .pc-tips li { display: flex !important; align-items: flex-start; gap: 12px; border: 0 !important; border-radius: 0 !important; padding: 15px 16px !important; background: transparent !important; position: relative; }
html.is-app .pc-tips li + li::before { content: ""; position: absolute; top: 0; left: 68px; right: 16px; border-top: 1px solid var(--a-line); }
html.is-app .pc-tips li > span { flex: none; width: 40px; height: 40px; border-radius: 50% !important; border: 0 !important; background: var(--a-fill) !important; display: grid; place-items: center; }
html.is-app .pc-stat { border: 0 !important; box-shadow: none !important; }
html.is-app .pc-suggest { border: 0 !important; background: var(--a-card) !important; box-shadow: var(--a-shadow) !important; border-radius: var(--a-r-md) !important; }
html.is-app .pc-stats { display: none !important; }
html.is-app .pc-results-head > div:first-child { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.is-app .pc-results { gap: 12px !important; }
html.is-app .pc-results > .pc-filter { order: -2; margin-left: -16px; margin-right: -16px; padding: 0 16px 2px; }
html.is-app .pc-results > .pc-results-head { order: -1; }
html.is-app .sxs-hero { background-image: none !important; border-bottom: 0 !important; }
html.is-app .sxl-hero .sxl-search .tc-search-field { border-color: transparent; }
html.is-app .sxi-reg { border-radius: var(--a-r) !important; border: 0 !important; box-shadow: var(--a-shadow) !important; }
html.is-app .sxl-list a { border: 0 !important; box-shadow: var(--a-shadow-sm) !important; border-radius: var(--a-r-sm) !important; }

/* ---------- Member area and sign-in screens (tc-app.css): same canvas, cards and buttons ---------- */
html.is-app .app-body {
    --background: var(--a-canvas); --card: var(--a-card); --subtle: var(--a-canvas); --muted: var(--a-fill); --accent: var(--a-fill);
    --border: var(--a-line); --input: var(--a-line); --sidebar: var(--a-card); --sidebar-border: var(--a-line); --sidebar-accent: var(--a-fill);
    --topbar-bg: color-mix(in srgb, var(--a-canvas) 86%, transparent); --row-hover: var(--a-fill);
    --radius-md: 12px; --radius-lg: 18px; --radius-xl: var(--a-r);
    --shadow-xs: var(--a-shadow-sm); --shadow-sm: var(--a-shadow); --font: var(--a-font);
    background: var(--a-canvas);
}
html.is-app .app-sidebar { z-index: 1100; }
html.is-app .app-main, html.is-app .auth { padding-bottom: 8px; }
html.is-app .app-topbar { padding-top: env(safe-area-inset-top); height: auto; min-height: calc(var(--a-bar-h) + env(safe-area-inset-top)); border-bottom: 0 !important; gap: 8px; padding-inline: 16px; }
html.is-app .app-topbar .app-icon-btn, html.is-app .auth__top .app-icon-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--a-card); box-shadow: var(--a-shadow-sm); border: 0; color: var(--a-ink); }
/* App top bar: back, menu, title, notifications and the account menu (search and theme live in the menu and settings) */
html.is-app .app-topbar :is(.app-topbar__sep, .app-search-btn, .app-theme-btn) { display: none !important; }
html.is-app .app-topbar .app-topbar__right { gap: 8px; }
html.is-app .app-topbar .app-avatar-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--a-card); box-shadow: var(--a-shadow-sm); }
html.is-app .app-crumbs { flex: 1 1 auto; min-width: 0; justify-content: center; font-size: 17px; font-weight: 600; color: var(--a-ink); }
html.is-app .app-crumbs > :not([aria-current]) { display: none; }
html.is-app .app-crumbs [aria-current] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--a-ink); }
html.is-app .auth__top { padding-top: calc(env(safe-area-inset-top) + 8px); }
html.is-app .app-body :is(.btn--base, .btn-primary, .app-btn--primary, .app-btn-primary) { border-radius: 999px !important; min-height: 48px; }
html.is-app .app-body :is(.card, .app-card, .dash-card) { border: 0 !important; border-radius: var(--a-r) !important; box-shadow: var(--a-shadow) !important; }

/* ---------- Home (/app): greeting, the black check card, round quick actions, grouped lists ---------- */
html.is-app .as-appbar[data-as-home] { position: fixed; left: 0; right: 0; top: 0; }
html.is-app body:has(.as-appbar[data-as-home]) main { padding-top: calc(env(safe-area-inset-top) + 6px); }
html.is-app.as-large:not(.as-title-in) .as-appbar[data-as-home] { visibility: hidden; }
.ah { max-width: 560px; margin: 0 auto; padding: 4px 16px 28px; color: var(--a-ink); }
.ah a { -webkit-tap-highlight-color: transparent; color: inherit; }
.ah-head { display: flex; align-items: center; gap: 12px; padding: 8px 0 18px; }
.ah-avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--a-card); box-shadow: var(--a-shadow-sm); color: var(--a-ink-2); }
.ah-avatar .as-g { width: 24px; height: 24px; }
.ah-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ah-hello { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ah-greet { margin: 0; font-size: 13px; line-height: 1.3; color: var(--a-ink-2); }
.ah-title { margin: 0; font: 700 21px/1.2 var(--a-font); letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ah-round { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--a-card); box-shadow: var(--a-shadow-sm); color: var(--a-ink) !important; text-decoration: none; transition: transform .15s ease-out; }
.ah-round:active { transform: scale(.92); }
.ah-round .as-g { width: 21px; height: 21px; }
.ah-signin { flex: none; height: 42px; padding: 0 18px; border-radius: 999px; background: var(--a-btn); color: var(--a-on-btn) !important; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; text-decoration: none; }

.ah-check { position: relative; display: block; margin: 0; padding: 22px 18px 18px; border-radius: 28px; background: var(--a-hero); color: var(--a-on-hero); box-shadow: var(--a-shadow-hero); overflow: hidden; isolation: isolate; }
.ah-check-title { display: block; margin: 0 0 16px; font: 700 26px/1.12 var(--a-font); letter-spacing: -0.025em; color: var(--a-on-hero); }
.ah-field { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 6px 0 16px; border-radius: 999px; background: #fff; color: #6b6b73; transition: box-shadow .15s; }
.ah-field:focus-within { box-shadow: 0 0 0 3px rgba(245, 166, 35, .55); }
.ah-field .as-g { width: 20px; height: 20px; }
.ah-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 16px var(--a-font); color: #0f0f10; -webkit-appearance: none; appearance: none; caret-color: #b26b00; }
.ah-field input::placeholder { color: #6b6b73; opacity: 1; }
.ah-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ah-go { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; background: var(--a-amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f0f10' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 20px no-repeat; }
.ah-go:active { transform: scale(.94); }

.ah-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.ah-quick a { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--a-ink); font-size: 12.5px; font-weight: 500; text-align: center; }
.ah-quick span:first-child { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--a-card); box-shadow: var(--a-shadow-sm); transition: transform .15s ease-out; }
.ah-quick a:active span:first-child { transform: scale(.92); }
.ah-quick .as-g { width: 24px; height: 24px; }
.ah-quick span:last-child { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ah-section { margin-top: 28px; }
.ah-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px 12px; }
.ah-section-head h2 { margin: 0; font: 650 18px/1.25 var(--a-font); letter-spacing: -0.015em; }
.tc-site .ah .ah-section-head a { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; color: var(--a-ink-2); text-decoration: none; white-space: nowrap; }
.ah-section-head a .as-g { width: 14px; height: 14px; }

/* Grouped rows (reported numbers, alerts, reviews): one white card, round avatars, inset dividers, chevrons */
.ah-list { list-style: none; margin: 0; padding: 4px 0; border-radius: var(--a-r); background: var(--a-card); box-shadow: var(--a-shadow); }
.ah-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none; color: var(--a-ink); }
.ah-row:active { background: var(--a-fill); }
.ah-list li:first-child .ah-row { border-radius: var(--a-r) var(--a-r) 0 0; }
.ah-list li:last-child .ah-row { border-radius: 0 0 var(--a-r) var(--a-r); }
.ah-list li + li .ah-row::before { content: ""; position: absolute; top: 0; left: 68px; right: 16px; border-top: 1px solid var(--a-line); }
.ah-row-icon { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--a-fill); color: var(--a-ink-2); font-size: 16px; font-weight: 700; }
.ah-row-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ah-row-icon .as-g { width: 20px; height: 20px; }
.ah-row-icon--bad { background: var(--a-red-soft); color: var(--a-red); }
.ah-row-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ah-row-title { font-size: 15.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ah-row-sub { font-size: 13px; line-height: 1.35; color: var(--a-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ah-row-text { font-size: 13.5px; line-height: 1.4; color: var(--a-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ah-row-end { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12.5px; color: var(--a-ink-3); font-variant-numeric: tabular-nums; }
.ah-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--a-red-soft); color: var(--a-red); white-space: nowrap; }
.ah-chev { flex: none; color: var(--a-ink-3); }
.ah-chev .as-g { width: 14px; height: 14px; }
.ah-stars { flex: none; display: inline-flex; gap: 1px; color: color-mix(in srgb, var(--a-ink) 18%, transparent); }
.ah-stars .is-on { color: var(--a-amber); }
.ah-row-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }

/* Rails: most trusted brands and guides */
.ah-rail { display: flex; gap: 12px; margin: -6px -16px 0; padding: 6px 16px 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
.ah-rail::-webkit-scrollbar { display: none; }
.ah-brand { flex: none; width: 148px; display: flex; flex-direction: column; gap: 3px; padding: 16px; border-radius: var(--a-r); background: var(--a-card); box-shadow: var(--a-shadow); color: var(--a-ink); text-decoration: none; scroll-snap-align: start; }
.ah-brand-logo { width: 48px; height: 48px; margin-bottom: 12px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--a-fill); font-size: 19px; font-weight: 700; color: var(--a-ink-2); }
.ah-brand-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ah-brand-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ah-brand-score { display: flex; align-items: center; gap: 2px; font-size: 13px; color: var(--a-ink-2); font-variant-numeric: tabular-nums; }
.ah-brand-score b { font-size: 17px; font-weight: 700; }
.ah-tone-excellent b { color: var(--tc-score-excellent, #13804a); }
.ah-tone-great b { color: var(--tc-score-great, #3d7f22); }
.ah-tone-good b { color: var(--tc-score-good, #5f7a00); }
.ah-tone-average b { color: var(--tc-score-average, #ad5208); }
.ah-tone-poor b { color: var(--tc-score-poor, #b4261c); }
.ah-tone-new b { color: var(--tc-score-new, #71717a); }
.ah-verified { margin-left: 4px; color: var(--a-green); }
.ah-guide { flex: none; width: 250px; display: flex; flex-direction: column; gap: 10px; padding: 8px 8px 14px; border-radius: var(--a-r); background: var(--a-card); box-shadow: var(--a-shadow); color: var(--a-ink); text-decoration: none; scroll-snap-align: start; }
.ah-guide img { width: 100%; height: 128px; border-radius: 18px; object-fit: cover; display: block; background: var(--a-fill); }
.ah-guide span { padding: 0 6px; font-size: 14px; line-height: 1.38; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.is-app body:has(.ah) { background: var(--a-canvas); }

@media (max-width: 370px) {
    .ah-check-title { font-size: 23px; }
    .ah-quick span:first-child { width: 52px; height: 52px; }
    .ah-quick a { font-size: 11.5px; }
}

/* ---------- Finish review fixes (2026-10-26) ---------- */
/* Write review: no white band under the header */
html.is-app :is(.rw-body, .rw-main, .bx-main, .bp-main) { background: transparent !important; }
html.is-app :is(.rw-main, .bx-card, .bp-panel, .sxc-box, .tc-empty, .tc-trust, .tc-panel) { border: 0 !important; box-shadow: var(--a-shadow) !important; border-radius: var(--a-r) !important; background: var(--a-card) !important; }
html.is-app .tc-empty { border-style: none !important; }
html.is-app .tc-trust details, html.is-app .tc-trust summary { border: 0 !important; background: transparent !important; }

/* Outline tags become soft grey pills */
html.is-app [data-tcui="badge"][data-variant="outline"], html.is-app :is(.sxi-reg-short, .sxv-reg-short) { border: 0 !important; background: var(--a-fill) !important; color: var(--a-ink-2) !important; box-shadow: none !important; }

/* Check: the kind switcher is a segmented pill, inside one white card */
html.is-app .sxc-card { border: 0 !important; box-shadow: var(--a-shadow) !important; border-radius: var(--a-r) !important; background: var(--a-card) !important; padding: 14px !important; }
html.is-app .sxc-kinds [role="tablist"] { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; gap: 2px !important; padding: 4px !important; border: 0 !important; border-radius: 999px !important; background: var(--a-fill) !important; box-shadow: none !important; }
html.is-app .sxc-kinds [role="tablist"]::-webkit-scrollbar { display: none; }
html.is-app .sxc-kinds [role="tab"] { flex: 1 0 auto !important; min-height: 38px; padding: 0 12px !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important; font-size: 13.5px !important; font-weight: 600 !important; color: var(--a-ink-2) !important; white-space: nowrap; }
html.is-app .sxc-kinds [role="tab"][aria-selected="true"] { background: var(--a-btn) !important; color: var(--a-on-btn) !important; }
html.is-app .sxc-kinds [role="tablist"] > :not([role="tab"]) { background: transparent !important; box-shadow: none !important; border: 0 !important; }
html.is-app .sxc-kinds [role="tab"] svg { display: none; }

/* Grouped rows: the check legend, licence lists and the business list sit on one white card with inset dividers */
html.is-app :is(.sxc-legend, .sxl-list, .bl-list) { display: block !important; margin: 0; padding: 4px 0 !important; list-style: none; border-radius: var(--a-r); background: var(--a-card); box-shadow: var(--a-shadow); gap: 0 !important; }
html.is-app :is(.sxc-legend, .sxl-list, .bl-list) > * { position: relative; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
html.is-app :is(.sxc-legend, .sxl-list, .bl-list) > * + *::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; border-top: 1px solid var(--a-line); z-index: 1; }
html.is-app .sxl-list a { border: 0 !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; min-height: 56px; }
html.is-app .sxc-legend > li { padding: 14px 16px !important; }
html.is-app .bl-row { display: flex !important; align-items: center; gap: 12px !important; padding: 14px 16px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
html.is-app .bl-row > :is(.bl-write, .bl-save, form, .bl-actions), html.is-app .bl-row :is(.bl-write, .bl-save) { display: none !important; }
html.is-app .bl-logo, html.is-app .bl-logo > * { width: 44px !important; height: 44px !important; border-radius: 50% !important; border: 0 !important; flex: none; overflow: hidden; }
html.is-app .bl-main { flex: 1 1 auto; min-width: 0; }
html.is-app .bl-name { font-size: 15.5px !important; font-weight: 600 !important; margin: 0 !important; }
html.is-app .bl-meta { font-size: 13px !important; margin: 2px 0 0 !important; }
html.is-app .bl-badges [data-tcui="badge"]:not([data-tone="success"]) { display: none !important; }
html.is-app .bl-badges:not(:has([data-tone="success"])) { display: none !important; }
html.is-app .bl-score { flex: none; text-align: right; }
html.is-app .bl-score strong { font-size: 18px !important; }
html.is-app .bl-score > span:last-child { font-size: 11.5px !important; }
html.is-app .bx-stats dt [data-tcui="badge"] :is(button, svg) { display: none !important; }

/* Business page: round logo, no stray info row, a plain white score card */
html.is-app .bp-logo, html.is-app .bp-logo > * { border-radius: 50% !important; border: 0 !important; overflow: hidden; box-shadow: var(--a-shadow-sm); }

/* Share: one row of round white buttons, WhatsApp in its green */
html.is-app .tc-share-row { gap: 10px !important; flex-wrap: nowrap !important; }
html.is-app .tc-share-btn { width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: var(--a-card) !important; color: var(--a-ink) !important; box-shadow: var(--a-shadow-sm) !important; display: inline-grid !important; place-items: center; font-size: 0 !important; flex: none !important; }
html.is-app .tc-share-btn--wa { color: #1f9d55 !important; }
html.is-app .tc-share-btn :is(span:not(.tc-visually-hidden)) { display: none !important; }
html.is-app .tc-share-btn svg { width: 19px !important; height: 19px !important; }

/* Sign-in screens: the app's own header and canvas, no website logo tile, footer or monospace divider */
html.is-app .auth-body, html.is-app .auth, html.is-app .auth__main, html.is-app .auth__body, html.is-app .auth__card { background: var(--a-canvas) !important; box-shadow: none !important; border: 0 !important; }
html.is-app :is(.auth-mark, .auth__foot, .auth__aside) { display: none !important; }
html.is-app .auth__top .app-logo { display: none !important; }
html.is-app .auth__top .app-theme-btn { display: none !important; }
html.is-app .auth-divider { font: 500 13px/1.3 var(--a-font) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--a-ink-3) !important; }
html.is-app .auth-body .app-input { border-radius: var(--a-r-sm) !important; min-height: 50px; background: var(--a-card) !important; border: 1px solid var(--a-line) !important; box-shadow: var(--a-shadow-sm); }
html.is-app .auth-body :is(.app-btn--submit, .app-btn--primary) { border-radius: 999px !important; min-height: 52px; background: var(--a-btn) !important; color: var(--a-on-btn) !important; border: 0 !important; }
html.is-app .auth-body .app-btn--outline { border-radius: 999px !important; min-height: 52px; background: var(--a-card) !important; border: 0 !important; box-shadow: var(--a-shadow-sm) !important; }
html.is-app .auth-note, html.is-app .tc-ghana-only { border: 0 !important; background: transparent !important; padding: 0 !important; color: var(--a-ink-2) !important; font-size: 13px !important; }
/* The trustcheck.club warning: its red title and the three help links, on one white card */
html.is-app .tc-not-club { font-size: 0 !important; border: 0 !important; background: var(--a-card) !important; box-shadow: var(--a-shadow) !important; border-radius: var(--a-r) !important; padding: 14px 16px !important; }
html.is-app .tc-not-club > svg { width: 18px; height: 18px; }
html.is-app .tc-not-club-title { font-size: 14.5px !important; color: var(--a-red) !important; }
html.is-app .tc-not-club-links { font-size: 13.5px !important; margin-top: 6px !important; display: flex !important; flex-wrap: wrap; gap: 4px 14px; }

/* Member top bar: notifications in a round white button; the setup stepper stays inside its card */
html.is-app .app-topbar .app-bell > :is(a, button) { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--a-card); box-shadow: var(--a-shadow-sm); border: 0; }
html.is-app .app-body [data-tcui="stepper"] { overflow: hidden; }

/* Tools: the featured card is a plain white card with a grey round icon and a stacked title */
html.is-app .ti-card { border: 0 !important; box-shadow: var(--a-shadow) !important; border-radius: var(--a-r) !important; background-image: none !important; }
html.is-app .ti-card--feature > a { display: block !important; margin: 10px 0 4px; font-size: 17px; font-weight: 650; }
html.is-app .ti-feature-try { display: none !important; }
html.is-app .ti-icon { border-radius: 50% !important; background: var(--a-fill) !important; color: var(--a-ink) !important; border: 0 !important; }

/* Price check: no focus ring at rest from autofocus; only keyboard or typing shows it */
html.is-app :is(.pc-search-field, .tc-search-field):focus-within:not(:has(input:focus-visible)) { box-shadow: var(--a-shadow) !important; }

/* ---------- Typography (2026-10-26): one role scale, no overflow ----------
   Roles: title 28 (24 on small phones), section 18, body 15-16, row title 15.5, small 13, meta 12.5. Text wraps
   instead of running past the screen: long words and numbers break, headings balance, flex text can shrink. */
html.is-app { --a-t-title: 28px; --a-t-section: 18px; --a-t-body: 15.5px; --a-t-small: 13px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 360px) { html.is-app { --a-t-title: 24px; --a-t-section: 17px; } }
html.is-app body { font-size: var(--a-t-body); line-height: 1.5; font-feature-settings: "kern"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html.is-app :is(h1, h2, h3, h4, p, li, dd, dt, td, th, blockquote, label, summary, figcaption, a, strong, span) { overflow-wrap: break-word; }
html.is-app :is(h1, h2, h3, h4) { text-wrap: balance; }
html.is-app :is(p, li, dd, blockquote) { text-wrap: pretty; }
html.is-app :is(.tc-num, [data-tcui="animated-number"], .tc-pc-row-side strong, .ah-row-end) { font-variant-numeric: tabular-nums; }
html.is-app :is(.th-hero, .sxc-hero, .sxb-hero, .sxl-hero, .sxr-hero, .sxw-hero, .pc-hero, .ra-hero, .rw-hero, .tl-hero, .lg-hero, .iv-hero, .hb-hero, .ct-hero, .bx-hero, .bp-hero, .bh-hero, .bc-hero, .sxv-hero, .sxs-hero) h1 { font-size: var(--a-t-title) !important; }
html.is-app body.tc-site :is(.tc-h2, .tc-section-title, .pc-tips h2, .pc-results-title, .sxl-sec > h2) { font-size: calc(var(--a-t-section) + 1px) !important; }
html.is-app .tc-prose { font-size: 16.5px; line-height: 1.65; }
html.is-app .tc-prose :is(h2) { font-size: 21px; line-height: 1.25; letter-spacing: -0.015em; }
html.is-app .tc-prose :is(h3) { font-size: 18px; line-height: 1.3; }
html.is-app :is(pre, code) { overflow-wrap: normal; }
html.is-app pre { max-width: 100%; overflow-x: auto; }
/* Flex and grid children that hold text may shrink below their natural width */
html.is-app :is(.tc-search-field, .pc-search-field) input { min-width: 0 !important; width: 100% !important; flex: 1 1 auto !important; }
html.is-app :is(.tc-search, .pc-search, .iv-search) { min-width: 0; max-width: 100%; }
html.is-app :is(.ah-row-body, .ah-hello, .bl-main, .tc-pc-row-main, .sxi-reg, .tc-trust-meta) { min-width: 0; }
/* Home: headlines and names get two lines instead of being cut at one */
html.is-app .ah-row-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
html.is-app .ah-row-top .ah-row-title { -webkit-line-clamp: 1; }
html.is-app .ah-brand-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; min-height: 2.5em; }
html.is-app .ah-check-title { text-wrap: balance; }
@media (max-width: 360px) { html.is-app .ah-check-title { font-size: 22px; } html.is-app .ah-title { font-size: 19px; } }
/* Price offers: the price and "Review shop" link wrap inside their column */
html.is-app .tc-pc-row-side { min-width: 0; max-width: 42%; text-align: right; }
html.is-app .tc-pc-row-side a { white-space: normal !important; font-size: 12.5px; line-height: 1.3; display: inline-block; }
/* TC UI trend cards and labels on the black card: wrap, never cut */
html.is-app :is(.tcui-st-label, .tcui-st-sub, .tcui-spn-clabel) { white-space: normal !important; text-overflow: clip !important; overflow: visible !important; }
html.is-app .tl-stats { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important; }
/* Check: the example numbers are a chip row like every other screen, without the "Try:" label */
html.is-app .sxc-try { display: flex; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; gap: 8px !important; margin-left: -14px !important; margin-right: -14px !important; padding: 4px 14px 6px !important; }
html.is-app .sxc-try::-webkit-scrollbar { display: none; }
html.is-app .sxc-try > span:first-child { display: none; }
html.is-app .sxc-try button { flex: none; min-height: 34px; padding: 0 14px !important; border: 0 !important; border-radius: 999px !important; background: var(--a-fill) !important; color: var(--a-ink) !important; font-size: 13.5px !important; }
html.is-app .sxc-try[hidden] { display: none !important; }
/* Member area: long titles in the header shrink with an ellipsis rather than pushing buttons away */
html.is-app .app-crumbs { min-width: 0; overflow: hidden; }
html.is-app .app-body :is(h1, h2, h3) { overflow-wrap: break-word; text-wrap: balance; }
html.is-app .ah-row-sub { white-space: normal; text-overflow: clip; }
html.is-app .ah-row-top { flex-wrap: wrap; row-gap: 2px; }
html.is-app .ah-row-top .ah-row-title { -webkit-line-clamp: 2; flex: 1 1 140px; }
/* Currency trends: the three charts stack inside the black card instead of squeezing side by side */
html.is-app .tl-stats { grid-template-columns: 1fr !important; gap: 0 !important; padding: 6px 18px !important; }
html.is-app .tl-stats > * { padding: 14px 0 !important; }
html.is-app .tl-stats > * + * { border-top: 1px solid rgba(255, 255, 255, .1) !important; }

/* ---------- Launch intro (partials/app_intro): the splash, alive ----------
   Frame one equals the iPhone launch image: the app canvas with the black tile and amber shield, centred. Then the tile
   settles with a spring, the check draws, one amber ring pulses, the name rises letter by letter, and the intro zooms
   away into the app. The page underneath stays hidden until the zoom starts, so nothing flashes. */
.as-intro { display: none; }
html.as-launch .as-intro { position: fixed; inset: 0; z-index: 3000; display: block; background: #f2f2f4; color: #0f0f10; cursor: pointer;
    -webkit-user-select: none; user-select: none; font-family: var(--a-font, system-ui, sans-serif); }
html.as-launch:not(.as-intro-out) body > :not(.as-intro):not(script) { visibility: hidden; }
.as-intro-tile { position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; margin: -66px 0 0 -66px; border-radius: 34px; background: #0f0f10;
    display: grid; place-items: center; box-shadow: 0 2px 4px rgba(15, 15, 16, .14), 0 16px 32px -14px rgba(15, 15, 16, .45); }
.as-intro-mark { display: block; width: 76px; height: 76px; }
.as-intro-ring { position: absolute; inset: 0; border-radius: 34px; box-shadow: 0 0 0 3px rgba(245, 166, 35, .9); opacity: 0; }
.as-intro-check { stroke-dasharray: 1; stroke-dashoffset: 1; }
.as-intro-word { position: absolute; left: 0; right: 0; top: calc(50% + 92px); margin: 0; text-align: center; font-size: 34px; line-height: 1.1; font-weight: 750; letter-spacing: -0.035em; white-space: nowrap; }
.as-intro-word b { font-weight: inherit; color: #f5a623; }
.as-intro-word span { display: inline-block; opacity: 0; transform: translateY(16px); }
.as-intro-tag { position: absolute; left: 0; right: 0; top: calc(50% + 140px); margin: 0; text-align: center; font-size: 16px; font-weight: 500; color: #5c5c64; opacity: 0; }
.as-intro-foot { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 34px); margin: 0; text-align: center; font-size: 13px; font-weight: 500; color: #6b6b73; letter-spacing: .01em; opacity: 0; }

html.as-launch:not(.as-launch-still) .as-intro-tile { animation: as-intro-pop .72s cubic-bezier(.3, 1.45, .45, 1) both; }
html.as-launch:not(.as-launch-still) .as-intro-check { animation: as-intro-draw .42s cubic-bezier(.65, 0, .35, 1) .16s both; }
html.as-launch:not(.as-launch-still) .as-intro-ring { animation: as-intro-ring .8s cubic-bezier(.16, 1, .3, 1) .5s both; }
html.as-launch:not(.as-launch-still) .as-intro-word span { animation: as-intro-rise .5s cubic-bezier(.16, 1, .3, 1) calc(.5s + var(--i) * 32ms) both; }
html.as-launch:not(.as-launch-still) .as-intro-tag { animation: as-intro-fade .5s ease-out .86s both; }
html.as-launch:not(.as-launch-still) .as-intro-foot { animation: as-intro-fade .5s ease-out .95s both; }
@keyframes as-intro-pop { 0% { transform: scale(1); } 22% { transform: scale(.9); } 58% { transform: scale(1.045); } 100% { transform: scale(1); } }
@keyframes as-intro-draw { to { stroke-dashoffset: 0; } }
@keyframes as-intro-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes as-intro-rise { to { opacity: 1; transform: none; } }
@keyframes as-intro-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Leaving: the intro zooms toward the viewer and fades, the app comes up from slightly behind */
html.as-launch-out .as-intro { animation: as-intro-away .46s cubic-bezier(.4, 0, .2, 1) both; pointer-events: none; }
html.as-launch-out body > :not(.as-intro):not(script) { animation: as-intro-under .5s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes as-intro-away { to { opacity: 0; transform: scale(1.12); } }
@keyframes as-intro-under { from { opacity: 0; transform: scale(.97); } }

@media (prefers-reduced-motion: reduce) {
    html.as-launch .as-intro :is(.as-intro-tile, .as-intro-check, .as-intro-ring, .as-intro-word span, .as-intro-tag, .as-intro-foot) { animation: none !important; }
    html.as-launch .as-intro .as-intro-check { stroke-dashoffset: 0; }
    html.as-launch .as-intro :is(.as-intro-word span, .as-intro-tag, .as-intro-foot) { opacity: 1; transform: none; }
    html.as-launch-out .as-intro { animation: as-intro-fade-out .2s linear both; }
    html.as-launch-out body > :not(.as-intro):not(script) { animation: none; }
    @keyframes as-intro-fade-out { to { opacity: 0; } }
}
@media (max-height: 640px) { .as-intro-word { font-size: 30px; top: calc(50% + 86px); } .as-intro-tag { top: calc(50% + 128px); } }