/* OTP HeroSMS Connect — homepage styles ([otp_home] + OTP Home template).
   Light marketplace theme; every selector is prefixed otp-home-. The
   section rules are scoped under .otp-home so nothing leaks into (or is
   inherited oddly from) the active theme when the shortcode path is
   used. No external fonts or assets.

   Layout model (v1.1.2): the homepage is served by the plugin's own
   page template (templates/page-otp-home.php), a standalone document,
   so .otp-home is a direct child of <body> and simply width:100% —
   the v1.1.1 viewport-width breakout and its html/body overflow
   guard were REMOVED: on Twenty Twenty-Five the theme's
   constrained-layout margins overrode the breakout and rendered the
   page pushed right and clipped. .otp-home-inner re-centres the design
   at a 1200px measure with side padding. Via the [otp_home] shortcode
   on a normal themed page the block just fills the theme's column.
   The header/footer rules below are used by the template only.
   (No viewport-width units or overflow guards anywhere in this file:
   layout is plain width:100% + max-width centring throughout.) */

.otp-home {
    --otp-blue: #2563EB;
    --otp-ink: #0F1B3D;
    --otp-gray: #4B5563;
    --otp-tint: #F2F6FE;
    --otp-tint-2: #EAF1FD;
    --otp-border: #E2E8F2;
    --otp-green: #22C55E;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--otp-gray);
    font-size: 16px;
    line-height: 1.55;
    width: 100%;
}
.otp-home-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 24px 24px;
}
.otp-home *, .otp-home *::before, .otp-home *::after { box-sizing: border-box; }
.otp-home a { text-decoration: none; }
.otp-home h1, .otp-home h2, .otp-home h3, .otp-home p, .otp-home ol { margin: 0; }
/* Grid children may not force tracks wider than the container. */
.otp-home-hero-grid > *, .otp-home-apps > *, .otp-home-features > *, .otp-home-steps > * { min-width: 0; }

/* ---------- template chrome (OTP Home template only) ---------- */
.otp-home-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: #fff;
    border-bottom: 1px solid #E2E8F2;
    box-shadow: 0 1px 14px rgba(15, 27, 61, 0.05);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Keep the sticky header below the WP admin bar for logged-in admins. */
body.admin-bar .otp-home-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .otp-home-header { top: 46px; } }
.otp-home-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
}
/* Brand lockup: blue mark + two-tone wordmark (header + footer). */
.otp-home-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    white-space: nowrap;
    flex: 0 0 auto;
}
.otp-home-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #2563EB;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.28);
}
.otp-home-logo-mark svg { width: 22px; height: 22px; display: block; }
.otp-home-logo-text {
    color: #0F1B3D;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.3px;
    line-height: 1.1;
}
.otp-home-logo-vn { color: #2563EB; font-weight: 700; }
/* Centre marketplace nav (desktop; hidden on small screens). */
.otp-home-mainnav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    flex: 1 1 auto;
    min-width: 0;
}
.otp-home-mainnav a {
    color: #4B5563;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.otp-home-mainnav a:hover { color: #2563EB; }
.otp-home-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; flex: 0 0 auto; }
.otp-home-nav a {
    color: #0F1B3D;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}
.otp-home-nav a:hover { color: #2563EB; }
.otp-home-nav a.otp-home-nav-cta {
    background: #2563EB;
    color: #fff;
    padding: 9px 20px;
    border-radius: 999px;
}
.otp-home-nav a.otp-home-nav-cta:hover { background: #1D4ED8; color: #fff; }

.otp-home-footer {
    background: #F2F6FE;
    border-top: 1px solid #E2E8F2;
    margin-top: 56px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #4B5563;
}
.otp-home-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 44px 24px 0;
}
.otp-home-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
    gap: 36px;
}
.otp-home-footer-col { min-width: 0; }
.otp-home-footer-blurb { font-size: 14.5px; line-height: 1.55; margin: 14px 0 0; max-width: 300px; }
.otp-home-footer-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    background: #fff;
    border: 1px solid #E2E8F2;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: #0F1B3D;
}
.otp-home-footer-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #22C55E;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}
.otp-home-footer-h {
    color: #0F1B3D;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin: 6px 0 14px;
}
.otp-home-footer-links { list-style: none; margin: 0; padding: 0; }
.otp-home-footer-links li { margin-bottom: 10px; }
.otp-home-footer-links a { color: #4B5563; font-size: 14.5px; font-weight: 500; text-decoration: none; }
.otp-home-footer-links a:hover { color: #2563EB; }
.otp-home-footer-support { font-size: 14.5px; line-height: 1.55; margin: 0; }
.otp-home-footer-mail { margin: 8px 0 0; }
.otp-home-footer-mail a { color: #2563EB; font-size: 14.5px; font-weight: 700; text-decoration: none; }
.otp-home-footer-mail a:hover { color: #1D4ED8; }
.otp-home-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    flex-wrap: wrap;
    border-top: 1px solid #E2E8F2;
    margin-top: 38px;
    padding: 20px 0 24px;
}
.otp-home-footer-copy { font-size: 13px; margin: 0; }
.otp-home-footer-lawful { font-size: 13px; margin: 0; }

@media (max-width: 1024px) {
    .otp-home-footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 36px; }
}
@media (max-width: 760px) {
    /* Centre nav collapses away; logo + auth buttons stay. */
    .otp-home-mainnav { display: none; }
    .otp-home-header-inner { justify-content: space-between; }
}
@media (max-width: 640px) {
    .otp-home-header-inner { padding: 10px 16px; }
    .otp-home-logo-mark { width: 34px; height: 34px; }
    .otp-home-logo-text { font-size: 16.5px; }
    .otp-home-nav { gap: 14px; }
    .otp-home-nav a.otp-home-nav-cta { padding: 8px 16px; }
    .otp-home-footer-inner { padding: 34px 16px 0; }
    .otp-home-footer-grid { grid-template-columns: 1fr; gap: 26px; }
    .otp-home-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- shared bits ---------- */
.otp-home-btn {
    display: inline-block;
    background: var(--otp-blue);
    color: #fff;
    font-weight: 600;
    font-size: 15.5px;
    padding: 13px 28px;
    border-radius: 10px;
    border: 1.5px solid var(--otp-blue);
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.otp-home-btn:hover { background: #1D4ED8; border-color: #1D4ED8; color: #fff; transform: translateY(-1px); }
.otp-home-btn-outline { background: transparent; color: var(--otp-blue); }
.otp-home-btn-outline:hover { background: var(--otp-tint-2); color: var(--otp-blue); }

.otp-home-icon-box {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--otp-tint-2);
    color: var(--otp-blue);
}
.otp-home-icon-box svg { width: 20px; height: 20px; }
.otp-home-icon-box-lg { width: 46px; height: 46px; border-radius: 12px; }
.otp-home-icon-box-lg svg { width: 23px; height: 23px; }

.otp-home-section { padding: 44px 0 8px; }
.otp-home-h2 {
    color: var(--otp-ink);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.4px;
    text-align: center;
}
.otp-home-sub {
    text-align: center;
    max-width: 640px;
    margin: 10px auto 30px;
    font-size: 15.5px;
}

/* ---------- 1. hero ---------- */
.otp-home-hero {
    background: linear-gradient(180deg, var(--otp-tint) 0%, var(--otp-tint-2) 100%);
    border: 1px solid var(--otp-border);
    border-radius: 18px;
    padding: 48px;
}
.otp-home-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 44px;
    align-items: center;
}
.otp-home-eyebrow {
    color: var(--otp-blue);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.otp-home-title {
    color: var(--otp-ink);
    font-size: clamp(34px, 4.6vw, 52px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.6px;
}
.otp-home-dot { color: var(--otp-blue); }
.otp-home-lede { margin-top: 18px; font-size: 17px; max-width: 520px; }
.otp-home-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.otp-home-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    background: #fff;
    border: 1px solid var(--otp-border);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--otp-ink);
}
.otp-home-status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--otp-green);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}
.otp-home-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid #D9E5F8;
}
.otp-home-stat strong {
    display: block;
    color: var(--otp-ink);
    font-size: 23px;
    font-weight: 800;
    line-height: 1.15;
}
.otp-home-stat span { display: block; font-size: 13px; }

.otp-home-pipe-card {
    background: #fff;
    border: 1px solid var(--otp-border);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 12px 32px rgba(15, 27, 61, 0.07);
}
.otp-home-pipe-title {
    color: var(--otp-ink);
    font-weight: 700;
    font-size: 16.5px;
    margin-bottom: 8px;
}
.otp-home-pipe-list { list-style: none; padding: 0; }
.otp-home-pipe-step {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--otp-border);
}
.otp-home-pipe-step:last-child { border-bottom: 0; padding-bottom: 2px; }
.otp-home-pipe-text strong { display: block; color: var(--otp-ink); font-size: 15px; line-height: 1.3; }
.otp-home-pipe-text small { display: block; font-size: 13px; color: var(--otp-gray); }

/* ---------- 2. all apps grid ---------- */
.otp-home-apps {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}
.otp-home-app-card {
    background: #fff;
    border: 1px solid var(--otp-border);
    border-radius: 14px;
    padding: 20px 12px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.otp-home-app-card:hover {
    border-color: #BFD3F8;
    box-shadow: 0 8px 22px rgba(15, 27, 61, 0.08);
    transform: translateY(-2px);
}
.otp-home-app-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.4px;
    margin-bottom: 10px;
}
.otp-home-app-name {
    color: var(--otp-ink);
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1.3;
    word-break: break-word;
}
.otp-home-app-price { color: var(--otp-blue); font-weight: 700; font-size: 14px; margin-top: 5px; }
.otp-home-app-stock { font-size: 12px; color: #94A3B8; margin-top: 2px; }
.otp-home-app-buy {
    margin-top: 12px;
    background: var(--otp-blue);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    padding: 7px 22px;
    border-radius: 999px;
}
.otp-home-app-buy:hover { background: #1D4ED8; color: #fff; }
.otp-home-apps-fallback { text-align: center; grid-column: 1 / -1; }

/* ---------- 3. can't-find banner ---------- */
.otp-home-banner {
    margin-top: 44px;
    background: var(--otp-tint);
    border: 1.5px solid var(--otp-blue);
    border-radius: 16px;
    padding: 28px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.otp-home-banner h2 { color: var(--otp-ink); font-size: 22px; font-weight: 800; letter-spacing: -0.3px; }
.otp-home-banner p { margin-top: 5px; font-size: 15px; max-width: 560px; }

/* ---------- 4. features ---------- */
.otp-home-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.otp-home-feature-card {
    background: #fff;
    border: 1px solid var(--otp-border);
    border-radius: 14px;
    padding: 24px;
}
.otp-home-feature-card h3 { color: var(--otp-ink); font-size: 16.5px; font-weight: 700; margin: 14px 0 6px; }
.otp-home-feature-card p { font-size: 14px; }

/* ---------- 5. how it works ---------- */
.otp-home-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.otp-home-step-card {
    background: #fff;
    border: 1px solid var(--otp-border);
    border-radius: 14px;
    padding: 24px;
}
.otp-home-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--otp-blue);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
}
.otp-home-step-card h3 { color: var(--otp-ink); font-size: 16.5px; font-weight: 700; margin: 14px 0 6px; }
.otp-home-step-card p { font-size: 14px; }

/* ---------- 6. platform pills ---------- */
.otp-home-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto;
}
.otp-home-pill {
    border: 1px solid #D7E3FA;
    background: #fff;
    color: var(--otp-ink);
    font-size: 13.5px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 999px;
    transition: border-color .15s ease, color .15s ease;
}
.otp-home-pill:hover { border-color: var(--otp-blue); color: var(--otp-blue); }

/* ---------- 7. closing CTA ---------- */
.otp-home-cta-band {
    margin-top: 48px;
    background: var(--otp-tint-2);
    border: 1px solid var(--otp-border);
    border-radius: 18px;
    padding: 46px 32px;
    text-align: center;
}
.otp-home-cta-band h2 { color: var(--otp-ink); font-size: 28px; font-weight: 800; letter-spacing: -0.4px; }
.otp-home-cta-band p { margin: 10px auto 24px; max-width: 520px; font-size: 15.5px; }

/* ---------- responsive ----------
   Desktop (>=1025px) uses the base rules: hero two columns, apps 6
   across, features 4 across, steps 3 across, stats 4 across. */
@media (max-width: 1024px) {
    .otp-home-hero { padding: 40px 36px; }
    .otp-home-hero-grid { gap: 32px; }
    .otp-home-apps { grid-template-columns: repeat(4, 1fr); }
    .otp-home-features { grid-template-columns: repeat(2, 1fr); }
    /* Stats drop to a 2x2 grid from here down: while the hero is still
       two columns its left half is only ~470px wide, so four-across
       crammed the labels ("Stock & Prices" wrapped mid-phrase). */
    .otp-home-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
    .otp-home-hero { padding: 34px 26px; }
    .otp-home-hero-grid { grid-template-columns: 1fr; gap: 30px; }
    .otp-home-apps { grid-template-columns: repeat(3, 1fr); }
    .otp-home-steps { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .otp-home-inner { padding: 4px 16px 20px; }
    .otp-home-hero { padding: 28px 20px; }
    .otp-home-apps { grid-template-columns: repeat(2, 1fr); }
    .otp-home-pipe-card { padding: 22px; }
    .otp-home-banner { padding: 24px; flex-direction: column; align-items: stretch; }
    .otp-home-banner .otp-home-btn { text-align: center; }
    .otp-home-section { padding-top: 36px; }
    .otp-home-cta-band { padding: 36px 22px; }
}
@media (max-width: 460px) {
    .otp-home-features { grid-template-columns: 1fr; }
    .otp-home-h2 { font-size: 25px; }
    .otp-home-ctas .otp-home-btn { width: 100%; text-align: center; }
    .otp-home-stat strong { font-size: 20px; }
}

/* ---------- 8. prices page (OTP Prices template, v1.2.4) ----------
   The rate card root carries .otp-home too, so the palette variables,
   base type and heading margin resets above all apply; everything
   below is scoped under .otp-prices. Tables stay inside their card:
   the wrapper scrolls horizontally on small phones and the page
   itself never overflows. v1.2.6: the stacked jump pills became a
   tab picker (one service card visible at a time, driven by the
   template's inline script + the `hidden` attribute — the guard
   below keeps `hidden` absolute even where a display rule exists),
   and tables are capped at 25 visible rows with a "Show all"
   toggle (.otp-prices-more). */
.otp-prices [hidden] { display: none !important; }
.otp-prices-hero {
    background: linear-gradient(180deg, var(--otp-tint) 0%, var(--otp-tint-2) 100%);
    border: 1px solid var(--otp-border);
    border-radius: 18px;
    padding: 40px 48px;
}
.otp-prices-title {
    color: var(--otp-ink);
    font-size: clamp(30px, 4vw, 42px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
}
.otp-prices-sub { margin-top: 10px; font-size: 16px; max-width: 640px; }
.otp-prices-picker-label {
    margin-top: 26px;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--otp-ink);
}
.otp-prices-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.otp-prices-tab {
    border: 1px solid #D7E3FA;
    background: #fff;
    color: var(--otp-ink);
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    padding: 7px 15px;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.otp-prices-tab:hover { border-color: var(--otp-blue); color: var(--otp-blue); }
.otp-prices-tab-active,
.otp-prices-tab-active:hover {
    background: var(--otp-blue);
    border-color: var(--otp-blue);
    color: #fff;
}
.otp-prices-search { position: relative; max-width: 520px; margin-top: 18px; }
.otp-prices-search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #94A3B8;
    pointer-events: none;
}
.otp-prices-search-icon svg { width: 18px; height: 18px; display: block; }
.otp-prices-search input {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    font-size: 15px;
    color: var(--otp-ink);
    background: #fff;
    border: 1.5px solid var(--otp-border);
    border-radius: 12px;
    padding: 13px 16px 13px 44px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.otp-prices-search input:focus {
    border-color: var(--otp-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.otp-prices-noresults { text-align: center; margin-top: 30px; font-size: 15px; }
.otp-prices-more-wrap { text-align: center; margin-top: 16px; }
.otp-prices-more {
    border: 1.5px solid var(--otp-blue);
    background: #fff;
    color: var(--otp-blue);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.otp-prices-more:hover { background: var(--otp-blue); color: #fff; }

.otp-prices-card {
    background: #fff;
    border: 1px solid var(--otp-border);
    border-radius: 16px;
    padding: 26px 28px;
    margin-top: 22px;
    box-shadow: 0 6px 18px rgba(15, 27, 61, 0.05);
    scroll-margin-top: 90px; /* clear the sticky header on anchor jumps */
}
.otp-prices-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.otp-prices-card-head .otp-home-app-badge { margin-bottom: 0; flex: 0 0 auto; }
.otp-prices-card-head h2 {
    color: var(--otp-ink);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.3px;
}
.otp-prices-card-count { margin-left: auto; font-size: 13px; color: #94A3B8; white-space: nowrap; }

.otp-prices-table-wrap { overflow-x: auto; }
.otp-prices-table {
    width: 100%;
    min-width: 340px;
    border-collapse: collapse;
    font-size: 14.5px;
}
.otp-prices-table th {
    text-align: left;
    color: var(--otp-ink);
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 8px 12px;
    border-bottom: 2px solid var(--otp-border);
}
.otp-prices-table td {
    padding: 7px 12px;
    border-bottom: 1px solid var(--otp-border);
    color: var(--otp-gray);
}
.otp-prices-table tbody tr:nth-child(even) { background: var(--otp-tint); }
.otp-prices-table tbody tr:hover { background: var(--otp-tint-2); }
.otp-prices-table tbody tr:last-child td { border-bottom: 0; }
/* Numeric columns (Price, Stock): header AND values right-aligned.
   This rule MUST stay scoped under .otp-prices-table: the bare
   .otp-prices-num class (specificity 0,1,0) loses to
   .otp-prices-table th { text-align: left } (0,1,1), which left the
   <th> cells left-aligned at the column start while the <td> values
   right-aligned at the column end — headers floated mid-table away
   from their values (fixed in v1.2.8). Scoped: 0,2,0 — wins. */
.otp-prices-table .otp-prices-num { text-align: right; font-variant-numeric: tabular-nums; }
/* Fixed-ish numeric column widths so Price/Stock read as clean
   vertical lines; the Country column absorbs the remaining width.
   th and td share each width, and both use the same 12px right
   padding from the base rules above, so each header sits exactly
   over its values at every viewport width. */
.otp-prices-table th:nth-child(2),
.otp-prices-table td:nth-child(2) { width: 120px; }
.otp-prices-table th:nth-child(3),
.otp-prices-table td:nth-child(3) { width: 140px; }
.otp-prices-price { color: var(--otp-blue); font-weight: 700; }

.otp-prices-note {
    font-size: 14.5px;
    background: var(--otp-tint);
    border: 1px solid var(--otp-border);
    border-radius: 12px;
    padding: 14px 18px;
}
.otp-prices-note a { color: var(--otp-blue); font-weight: 600; }
.otp-prices-updated {
    margin-top: 28px;
    font-size: 13px;
    color: #94A3B8;
    text-align: center;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 640px) {
    .otp-prices-hero { padding: 28px 20px; }
    .otp-prices-card { padding: 20px 16px; }
    .otp-prices-card-head h2 { font-size: 18.5px; }
    .otp-prices-table { font-size: 13.5px; }
    .otp-prices-table th, .otp-prices-table td { padding: 7px 8px; }
    /* Narrower numeric columns on phones; headers stay right-aligned
       over their values (the wrap scrolls internally if needed). */
    .otp-prices-table th:nth-child(2),
    .otp-prices-table td:nth-child(2) { width: 96px; }
    .otp-prices-table th:nth-child(3),
    .otp-prices-table td:nth-child(3) { width: 104px; }
    /* One-row scrollable tab bar: pills never wrap or squeeze. */
    .otp-prices-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
    }
    .otp-prices-tab { flex: 0 0 auto; }
}