/* ========================================
   IP TO MOBILE CARRIER (mobile-carrier.html, 2026-10-09): the product hero (css/product-hero.css) over the ASN page's section
   styles (css/asn-company.css); only the differences live here.
   ======================================== */
:root:not([data-json="0"]) .geo-hero-top .geo-hero-input { padding-left: 1.5rem; padding-right: 1.5rem; }
.asn-rows-intro { max-width: 60ch; margin: var(--space-md) 0 0; color: var(--text-secondary); }
.geo-card .gs-tags { display: inline-flex; gap: .4rem; margin-left: .7rem; margin-right: auto; }
.geo-card .gs-type { display: inline-block; padding: .2rem .5rem; border-radius: 6px; background: var(--bg-secondary); font-family: var(--font-mono); font-size: .58rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-primary); }

/* ---- THE CARD'S PICTURE (decided 2026-10-09 from the ?strip= takes; the others and the switch are gone): the operator — mark,
   name, the API's carrier fields — with the country's flag at the right, in a panel where the map was. The markup comes from
   scripts/product-hero.py (mc_strip), bound to the carrier chosen on the switcher above the card. ---- */
.geo-card { --strip-ink: var(--text-primary); --strip-paper: var(--bg-secondary); --strip-dim: var(--text-muted); }
:root[data-card="8"] .geo-card-wrap .geo-card-map--panel { background: #fff; }
:root[data-card="8"]:is([data-theme="dark"]) .geo-card-wrap .geo-card-map--panel { background: var(--bg-secondary); }
:root[data-card="8"] .geo-card-wrap { --map-h: 136px; }   /* a shorter panel: the operator and its line sit close, little air above or between (asked 2026-10-09) */
.geo-strip { position: absolute; inset: 0; display: grid; grid-template-rows: auto auto; row-gap: 12px; align-content: center; padding: 14px 24px; font-family: var(--font-mono); color: var(--strip-ink); }
.mc-ident { display: flex; align-items: center; gap: 18px; }
.mc-logo { width: 48px; height: 48px; border-radius: 10px; flex: none; }
.mc-name { display: block; font-size: 1.6rem; font-weight: 600; letter-spacing: -.01em; }
.mc-meta { display: block; margin-top: 5px; font-size: .66rem; color: var(--strip-dim); }
.mc-meta b { color: var(--strip-ink); font-weight: 600; }
.mc-flag { display: block; width: 48px; height: 48px; margin-left: auto; flex: none; }   /* the emoji flag drawn flat (Twemoji SVG), at the right */
.mc-sub { display: flex; align-items: baseline; gap: 1.1rem; padding-top: 0; font-size: .58rem; color: var(--strip-dim); letter-spacing: .02em; white-space: nowrap; overflow: hidden; }   /* no line above it (asked 2026-10-09) */
.mc-sub b { color: var(--strip-ink); font-weight: 600; }
/* the carrier switcher above the card, in the view toggle's look */
#geo-card { transition: opacity .2s; }
#geo-card.is-swapping { opacity: .55; }
.gs-samples { display: flex; gap: 1.1rem; margin-right: auto; font-family: var(--font-mono); }
.gs-samples button { margin: 0; padding: 0 0 .12rem; border: 0; border-bottom: 1px solid transparent; background: transparent; cursor: pointer; font: inherit; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.gs-samples button:hover { color: var(--text-primary); }
.gs-samples button.is-on { color: var(--text-primary); border-bottom-color: var(--accent); cursor: default; }
.gs-samples button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the ten largest carriers (2026-10-12, in place of the three-field grid): hairline rows with a rank, the group's logo, name and country, its subscribers and the home network's codes */
.mc-top-table { border-top: 1px solid var(--border); }
.mc-top-row { display: grid; grid-template-columns: 2.5rem minmax(0, 6fr) minmax(0, 4fr) minmax(0, 6fr); gap: var(--space-lg); align-items: center; padding: 0.9rem 0; border-bottom: 1px solid var(--border); }
.mc-top-head { padding: 0.6rem 0; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.mc-top-rank { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); }
.mc-top-who { display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 0.9rem; align-items: center; }
.mc-top-logo { grid-row: 1 / 3; width: 28px; height: 28px; border-radius: 6px; object-fit: contain; }
.mc-top-who b { font-weight: 600; letter-spacing: -0.01em; }
.mc-top-who small, .mc-top-subs small, .mc-top-code small { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); }
.mc-top-subs { display: flex; flex-direction: column; } .mc-top-subs b { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 500; color: var(--text-primary); }
.mc-top-code { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.7rem; font-size: 0.9rem; } .mc-top-code b { font-weight: 500; } .mc-top-code code { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-secondary); }
.mc-top-more { margin: 0; padding: 0.9rem 0 0; } .mc-top-more a { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--text-primary); } .mc-top-more a span { display: inline-block; transition: transform var(--duration-fast) var(--ease-out); } .mc-top-more a:hover span { transform: translateX(3px); }
@media (max-width: 767px) { .mc-top-row { grid-template-columns: 2rem minmax(0, 1fr); gap: 0.35rem var(--space-md); } .mc-top-head { display: none; } .mc-top-subs, .mc-top-code { grid-column: 2; } }

/* ---- Phones (2026-10-15): the strip's sub-line wraps; its last words were clipped ---- */
@media (max-width: 767px) { .mc-sub { white-space: normal; flex-wrap: wrap; overflow: visible; } .mc-sub > * { white-space: normal; } }