/* ===================================================================
   /mobile-app, /browser-extension and their detail pages.

   Everything is scoped under .asp so this file cannot restyle the
   shared header, footer or the SEO content sections the layout renders
   after the page. Palette and radii follow a2z-tokens.css (white paper,
   warm beige card offset, one blue accent, navy headings); the values
   are repeated here because _LayoutBrowserExtension does not load that
   file, and pulling it in for six custom properties would cost a request.

   The hero keeps the banner artwork the pages already had (cyan for apps,
   peach for extensions) and paints the band in the artwork's own flat
   colour, so on a wide screen the image simply continues to the edges.
   =================================================================== */

.asp {
    --asp-blue: #2583dc;
    --asp-blue-strong: #1a6ec0;
    --asp-blue-soft: #eaf3fc;
    --asp-navy: #1d2440;
    --asp-heading: #343a52;
    --asp-ink: #1b1b1f;
    --asp-muted: #5f5b57;
    --asp-paper: #ffffff;
    --asp-soft: #fdfbf9;
    --asp-line: #e3dfdb;
    --asp-offset: #f8f2ee;
    --asp-star: #f5a524;
    --asp-r-sm: 10px;
    --asp-r-md: 14px;
    --asp-r-lg: 20px;
    --asp-shadow: 0 16px 34px -14px rgb(72 60 52 / 22%);

    /* The layout's navbar is fixed-top. */
    padding-top: 76px;
    color: var(--asp-ink);
    background: var(--asp-paper);
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.asp *,
.asp *::before,
.asp *::after { box-sizing: border-box; }

.asp :where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }
.asp :where(ul, ol) { padding: 0; list-style: none; }
.asp a { color: var(--asp-blue-strong); }
.asp svg { width: 1em; height: 1em; flex: none; }

.asp-shell { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.asp-narrow { max-width: 860px; }
.asp-muted { color: var(--asp-muted); }

.asp-h2 {
    font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem);
    line-height: 1.2;
    font-weight: 700;
    color: var(--asp-heading);
    letter-spacing: -0.01em;
}

.asp-section { padding: clamp(40px, 6vw, 72px) 0; }
.asp-section--tight { padding: 32px 0 8px; }
.asp-section--soft { background: var(--asp-soft); border-block: 1px solid var(--asp-line); }

.asp-section-head {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: 8px 24px; margin-bottom: 28px;
}
.asp-section-head .asp-muted { margin-top: 6px; max-width: 60ch; }

/* ---------- buttons, chips, links ---------- */

.asp-btn {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 48px; padding: 0 22px;
    border-radius: 999px; border: 2px solid transparent;
    font-family: inherit; font-size: .98rem; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.asp-btn:focus-visible,
.asp-store:focus-visible,
.asp-card-name a:focus-visible,
.asp-faq summary:focus-visible,
.asp-shots:focus-visible { outline: 3px solid var(--asp-blue); outline-offset: 3px; }
.asp-btn--primary { background: var(--asp-navy); color: #fff !important; box-shadow: 0 6px 16px -6px rgb(29 36 64 / 55%); }
.asp-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgb(29 36 64 / 60%); }
.asp-btn--ghost { background: rgb(255 255 255 / 72%); color: var(--asp-navy) !important; border-color: rgb(29 36 64 / 18%); }
.asp-btn--ghost:hover { background: #fff; transform: translateY(-2px); }
.asp-btn svg { width: 1.15em; height: 1.15em; }

.asp-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.asp-link:hover { text-decoration: underline; }

.asp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.asp-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    background: var(--asp-blue-soft); color: var(--asp-blue-strong);
    font-size: .78rem; font-weight: 600;
}
.asp-chip--soft { background: #f2efec; color: var(--asp-muted); }

/* ---------- stars ---------- */

.asp-stars { position: relative; display: inline-block; line-height: 0; vertical-align: -2px; }
.asp-stars-row { display: inline-flex; gap: 1px; color: #d9d4cf; white-space: nowrap; }
.asp-stars-row svg { width: 15px; height: 15px; }
.asp-stars-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: var(--asp-star); }

.asp-rating { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .88rem; }
.asp-rating-value { font-weight: 700; color: var(--asp-heading); }

/* ---------- hub hero ---------- */

.asp-hero {
    position: relative; overflow: hidden;
    background: var(--asp-hero-bg, #0dc0df);
    min-height: clamp(420px, 36vw, 470px);
    display: flex; align-items: center;
    isolation: isolate;
}
.asp-hero-art {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%;
    object-fit: cover; object-position: right center;
}
/* A soft wash behind the text so it stays readable where art and copy meet. */
.asp-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, var(--asp-hero-bg) 0%, var(--asp-hero-bg) 38%, transparent 70%);
    opacity: .9;
}
.asp-hero-inner { padding-block: 48px; }
.asp-hero-inner > * { max-width: 620px; }

.asp-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; margin-bottom: 18px;
    border-radius: 999px; background: rgb(255 255 255 / 78%);
    color: var(--asp-navy); font-size: .85rem; font-weight: 600;
    box-shadow: 0 2px 8px -4px rgb(0 0 0 / 25%);
}
.asp-eyebrow svg { width: 1.1em; height: 1.1em; color: var(--asp-blue); }

.asp-hero-title {
    font-size: clamp(2.1rem, 1.3rem + 3vw, 3.4rem);
    line-height: 1.08; font-weight: 800; letter-spacing: -0.025em;
    color: var(--asp-navy);
}
.asp-hero-lead {
    margin-top: 16px; font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
    color: #1f2a44; max-width: 54ch;
}
.asp-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.asp-trust { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 24px; font-size: .9rem; font-weight: 500; color: var(--asp-navy); }
.asp-trust li { display: inline-flex; align-items: center; gap: 7px; }
.asp-trust svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--asp-navy); color: #fff; }

/* ---------- breadcrumb ---------- */

.asp-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px 0; padding-block: 16px 0; font-size: .85rem; color: var(--asp-muted); }
.asp-breadcrumb li + li::before { content: "/"; margin: 0 10px; color: #bdb6af; }
.asp-breadcrumb a { color: var(--asp-muted); text-decoration: none; }
.asp-breadcrumb a:hover { color: var(--asp-blue-strong); text-decoration: underline; }
.asp-breadcrumb [aria-current] { color: var(--asp-heading); font-weight: 600; }
.asp-breadcrumb--top ol { padding-block: 18px 16px; }

/* ---------- cards ---------- */

.asp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }

.asp-card {
    position: relative; display: flex; flex-direction: column; gap: 14px;
    padding: 22px; background: var(--asp-paper);
    border: 1px solid var(--asp-line); border-radius: var(--asp-r-lg);
    box-shadow: 4px 4px 0 var(--asp-offset);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.asp-card:hover { transform: translateY(-3px); border-color: #cfd9e6; box-shadow: 6px 6px 0 var(--asp-offset), var(--asp-shadow); }
.asp-card-head { display: flex; gap: 14px; align-items: center; }
.asp-card-icon {
    width: 64px; height: 64px; flex: none; border-radius: 16px; object-fit: contain;
    background: #f4f6fa; border: 1px solid var(--asp-line);
}
.asp-card-icon--blank { display: grid; place-items: center; color: var(--asp-blue); font-size: 28px; }
.asp-card-titles { min-width: 0; }
.asp-card-name { font-size: 1.05rem; line-height: 1.3; font-weight: 700; color: var(--asp-heading); }
.asp-card-name a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.asp-card-name a::after { content: ""; position: absolute; inset: 0; border-radius: var(--asp-r-lg); }
.asp-card-desc {
    color: var(--asp-muted); font-size: .92rem;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.asp-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.asp-card-more { display: inline-flex; align-items: center; gap: 4px; font-size: .88rem; font-weight: 600; color: var(--asp-blue-strong); white-space: nowrap; }
.asp-card:hover .asp-card-more svg { transform: translateX(3px); }
.asp-card-more svg { transition: transform .18s ease; }

.asp-empty { padding: 28px; border: 1px dashed var(--asp-line); border-radius: var(--asp-r-md); text-align: center; color: var(--asp-muted); }

/* ---------- features and steps ---------- */

.asp-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin-top: 28px; }
.asp-feature { padding: 24px; background: var(--asp-paper); border: 1px solid var(--asp-line); border-radius: var(--asp-r-lg); }
.asp-feature-icon {
    display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px;
    border-radius: 14px; background: var(--asp-blue-soft); color: var(--asp-blue); font-size: 24px;
}
.asp-feature h3 { font-size: 1.05rem; font-weight: 700; color: var(--asp-heading); margin-bottom: 6px; }
.asp-feature p { font-size: .92rem; color: var(--asp-muted); }

.asp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 28px; counter-reset: asp-step; }
.asp-steps li { position: relative; padding: 24px 24px 24px 76px; border: 1px solid var(--asp-line); border-radius: var(--asp-r-lg); counter-increment: asp-step; }
.asp-steps li::before {
    content: counter(asp-step); position: absolute; left: 22px; top: 22px;
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
    background: var(--asp-navy); color: #fff; font-weight: 700;
}
.asp-steps h3 { font-size: 1.02rem; font-weight: 700; color: var(--asp-heading); margin-bottom: 4px; }
.asp-steps p { font-size: .92rem; color: var(--asp-muted); }

/* ---------- blog ---------- */

.asp-grid--blog { margin-top: 28px; }
.asp-blog { position: relative; overflow: hidden; border: 1px solid var(--asp-line); border-radius: var(--asp-r-lg); background: var(--asp-paper); }
.asp-blog img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.asp-blog h3 { padding: 16px 18px 0; font-size: 1rem; font-weight: 700; line-height: 1.35; }
.asp-blog h3 a { color: var(--asp-heading); text-decoration: none; }
.asp-blog h3 a::after { content: ""; position: absolute; inset: 0; }
.asp-blog p { padding: 6px 18px 18px; font-size: .9rem; color: var(--asp-muted); }

/* ---------- detail hero ---------- */

.asp-dhero {
    position: relative;
    background:
        radial-gradient(120% 140% at 100% 0%, rgb(255 255 255 / 55%) 0%, transparent 55%),
        linear-gradient(135deg, color-mix(in srgb, var(--asp-hero-bg) 34%, #fff) 0%, color-mix(in srgb, var(--asp-hero-bg) 14%, #fff) 100%);
    border-bottom: 1px solid var(--asp-line);
}
@supports not (background: color-mix(in srgb, red, blue)) {
    .asp--app .asp-dhero { background: linear-gradient(135deg, #b7ecf5 0%, #e7f8fb 100%); }
    .asp--extension .asp-dhero { background: linear-gradient(135deg, #ffe0d6 0%, #fff4f0 100%); }
}
.asp-dhero-inner { display: grid; grid-template-columns: 1fr auto; gap: 28px 40px; align-items: center; padding-block: 36px 40px; }
.asp-dhero-main { display: flex; gap: 24px; align-items: flex-start; }
.asp-dhero-icon {
    width: 112px; height: 112px; flex: none; object-fit: contain;
    border-radius: 26px; background: #fff; padding: 10px;
    border: 1px solid rgb(29 36 64 / 10%); box-shadow: 0 14px 30px -14px rgb(29 36 64 / 45%);
}
.asp-dhero-text .asp-eyebrow { margin-bottom: 12px; }
.asp-dhero-title { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.7rem); line-height: 1.12; font-weight: 800; color: var(--asp-navy); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.asp-dhero-lead { margin-top: 10px; max-width: 62ch; color: #2b3450; }

.asp-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.asp-stat {
    display: flex; flex-direction: column; min-width: 104px; padding: 10px 16px;
    background: rgb(255 255 255 / 80%); border: 1px solid rgb(29 36 64 / 10%); border-radius: var(--asp-r-md);
}
.asp-stat-value { display: inline-flex; align-items: center; gap: 8px; font-size: 1.15rem; font-weight: 700; color: var(--asp-navy); line-height: 1.3; }
.asp-stat-label { font-size: .78rem; color: var(--asp-muted); }

.asp-dhero-actions { display: flex; flex-direction: column; gap: 10px; min-width: 250px; }
.asp-store {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 18px; min-height: 58px;
    border-radius: var(--asp-r-md); background: var(--asp-navy); color: #fff !important;
    text-decoration: none; box-shadow: 0 8px 18px -10px rgb(29 36 64 / 70%);
    transition: transform .15s ease, box-shadow .15s ease;
}
.asp-store:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgb(29 36 64 / 75%); }
.asp-store img { width: 28px; height: 28px; object-fit: contain; }
.asp-store .asp-store-mark { width: 28px; height: 28px; padding: 3px; border-radius: 8px; background: #fff; color: #111; }
.asp-store span { display: flex; flex-direction: column; line-height: 1.2; font-weight: 700; font-size: 1.02rem; }
.asp-store small { font-size: .72rem; font-weight: 500; opacity: .8; }
.asp-share { justify-content: center; min-height: 44px; }

/* ---------- screenshots ---------- */

.asp-shots {
    display: flex; gap: 16px; margin-top: 20px; padding: 4px 4px 18px;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: thin;
}
.asp-shots li { flex: none; scroll-snap-align: start; }
.asp-shots img {
    display: block; width: auto; height: clamp(320px, 42vw, 480px); aspect-ratio: 9 / 16; object-fit: cover;
    border-radius: 18px; border: 1px solid var(--asp-line); background: #f1efec;
    box-shadow: 0 12px 26px -16px rgb(0 0 0 / 35%);
}

/* ---------- about + side card ---------- */

.asp-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }

.asp-prose { font-size: 1.02rem; color: #2a2a31; }
.asp-prose > * + * { margin-top: 14px; }
.asp-prose h2 { margin-top: 30px; font-size: 1.35rem; font-weight: 700; color: var(--asp-heading); line-height: 1.3; }
.asp-prose > .asp-h2:first-child { margin-top: 0; font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem); }
.asp-prose h3 { margin-top: 24px; font-size: 1.12rem; font-weight: 700; color: var(--asp-heading); }
.asp-prose ul, .asp-prose ol { padding-left: 1.3em; }
.asp-prose ul { list-style: disc; }
.asp-prose ol { list-style: decimal; }
.asp-prose li + li { margin-top: 6px; }
.asp-prose li::marker { color: var(--asp-blue); }
.asp-prose img { max-width: 100%; height: auto; }

.asp-side { position: sticky; top: 96px; }
.asp-side-card { padding: 22px; border: 1px solid var(--asp-line); border-radius: var(--asp-r-lg); background: var(--asp-paper); box-shadow: 4px 4px 0 var(--asp-offset); }
.asp-side-title { font-size: 1.05rem; font-weight: 700; color: var(--asp-heading); margin-bottom: 14px; }
.asp-side-links li + li { margin-top: 8px; }
.asp-side-links a {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    border: 1px solid var(--asp-line); border-radius: var(--asp-r-sm);
    color: var(--asp-heading); font-weight: 600; text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}
.asp-side-links a:hover { border-color: var(--asp-blue); background: var(--asp-blue-soft); }
.asp-side-links img { width: 24px; height: 24px; object-fit: contain; }
.asp-side-links .asp-store-mark { width: 24px; height: 24px; color: #111; }
.asp-side-links span { flex: 1; }
.asp-side-links svg { color: var(--asp-blue); width: 20px; height: 20px; }

.asp-facts { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--asp-line); font-size: .9rem; }
.asp-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.asp-facts dt { color: var(--asp-muted); font-weight: 500; }
.asp-facts dd { font-weight: 600; color: var(--asp-heading); text-align: right; }

/* ---------- FAQ ---------- */

.asp-faq { margin-top: 24px; }
.asp-faq details { border: 1px solid var(--asp-line); border-radius: var(--asp-r-md); background: var(--asp-paper); }
.asp-faq details + details { margin-top: 12px; }
.asp-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; }
.asp-faq summary::-webkit-details-marker { display: none; }
.asp-faq summary h3 { font-size: 1rem; font-weight: 600; color: var(--asp-heading); }
.asp-faq summary svg { width: 20px; height: 20px; color: var(--asp-blue); transition: transform .2s ease; }
.asp-faq details[open] summary svg { transform: rotate(90deg); }
.asp-faq details p { padding: 0 20px 18px; color: var(--asp-muted); }

/* ---------- responsive ---------- */

@media (max-width: 991.98px) {
    .asp-detail-grid { grid-template-columns: 1fr; }
    .asp-side { position: static; }
    .asp-dhero-inner { grid-template-columns: 1fr; }
    .asp-dhero-actions { flex-direction: row; flex-wrap: wrap; min-width: 0; }
    .asp-store { flex: 1 1 220px; }
}

@media (max-width: 767.98px) {
    .asp { padding-top: 68px; }

    /* On a phone the artwork becomes a band above the copy instead of
       sitting behind it, so neither covers the other. */
    .asp-hero { display: block; min-height: 0; }
    .asp-hero-art { position: relative; inset: auto; z-index: 0; height: 150px; }
    .asp-hero::before { display: none; }
    .asp-hero-inner { padding-block: 26px 34px; }
    .asp-hero-actions .asp-btn { flex: 1 1 100%; justify-content: center; }

    .asp-dhero-main { flex-direction: column; gap: 16px; }
    .asp-dhero-icon { width: 88px; height: 88px; border-radius: 22px; }
    .asp-stat { min-width: 0; flex: 1 1 40%; }
    .asp-steps li { padding: 20px 20px 20px 70px; }
}

@media (prefers-reduced-motion: reduce) {
    .asp *, .asp *::before, .asp *::after { transition: none !important; }
}