/* Per-product marketing page (server-rendered at /service/<slug>). Reuses app.css
   variables + landing.css navbar/footer; this adds the product-specific layout. */

/* Full-bleed photo hero with a white scrim (matches the main landing hero). */
.svc-hero { position: relative; overflow: hidden; min-height: 74vh; display: flex; flex-direction: column; justify-content: center; }
.svc-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; background: #eef2f9; }
.svc-hero-scrim { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        radial-gradient(120% 92% at 50% 44%, rgba(255,255,255,.34) 0%, rgba(255,255,255,.70) 55%, rgba(238,242,249,.93) 100%),
        linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.38) 45%, rgba(238,242,249,.96) 100%);
}
.svc-hero-inner { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; padding: 128px 20px 56px; text-align: center; }
.svc-hero h1 { text-shadow: 0 1px 14px rgba(255,255,255,.7); }
.svc-hero .tagline { text-shadow: 0 1px 10px rgba(255,255,255,.8); }
.svc-hero .svc-ic {
    width: 74px; height: 74px; margin: 0 auto 22px; border-radius: 20px;
    display: grid; place-items: center; background: var(--grad); color: #fff;
    box-shadow: 0 12px 34px var(--glow);
}
.svc-hero .svc-ic svg { width: 38px; height: 38px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.svc-hero h1 { font-size: clamp(28px, 6vw, 46px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 14px; color: var(--ink); }
.svc-hero .tagline { color: var(--muted); font-size: clamp(15px, 2.4vw, 18px); line-height: 1.8; max-width: 620px; margin: 0 auto 26px; }
.svc-price-line { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 24px; direction: ltr; }
.svc-price-line .amt { font-size: 24px; font-weight: 900; }
.svc-price-line .per { color: var(--muted); font-weight: 600; font-size: .8em; }
.svc-price-line .loc { display: block; color: var(--muted); font-weight: 600; font-size: 13px; margin-top: 4px; }
.svc-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.svc-sec { max-width: 1000px; margin: 0 auto; padding: 40px 20px; }
.svc-sec > h2 { text-align: center; font-size: clamp(22px, 4vw, 30px); font-weight: 800; margin-bottom: 30px; color: var(--ink); }

.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.feat-card { background: var(--card); border: 1px solid var(--bd); border-radius: var(--radius); padding: 22px; }
.feat-card .fic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-tint); color: var(--accent); margin-bottom: 14px; }
.feat-card .fic svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.feat-card h3 { font-size: 16px; font-weight: 800; margin-bottom: 7px; color: var(--ink); }
.feat-card p { font-size: 14px; color: var(--muted); line-height: 1.75; }

.svc-pricing { max-width: 460px; margin: 0 auto; }
.price-card { background: var(--card); border: 1.5px solid var(--bd2); border-radius: var(--radius); padding: 30px; text-align: center; box-shadow: 0 10px 40px rgba(15,23,42,.06); }
.price-card .big { font-size: 40px; font-weight: 900; color: var(--ink); direction: ltr; }
.price-card .big .per { font-size: 16px; font-weight: 600; color: var(--muted); }
.price-card .yearly { margin-top: 10px; font-size: 14px; color: var(--muted); }
.price-card .yearly b { color: #0a7d33; }
.price-card .loc { margin-top: 6px; font-size: 13px; color: var(--muted); direction: ltr; }
.price-card .lp-btn { margin-top: 22px; width: 100%; }
.price-card ul { list-style: none; margin: 22px 0 0; padding: 0; text-align: start; }
.price-card li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; font-size: 14px; color: var(--ink); }
.price-card li svg { flex: 0 0 auto; width: 18px; height: 18px; stroke: #16a34a; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }

.svc-faq { max-width: 720px; margin: 0 auto; }
.faq-item { border: 1px solid var(--bd); border-radius: 12px; margin-bottom: 10px; overflow: hidden; background: var(--card); }
.faq-item summary { padding: 16px 18px; font-weight: 700; font-size: 15px; cursor: pointer; list-style: none; color: var(--ink); display: flex; justify-content: space-between; gap: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--muted); font-weight: 800; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { padding: 0 18px 16px; color: var(--muted); font-size: 14px; line-height: 1.8; margin: 0; }

.svc-back { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 700; font-size: 14px; text-decoration: none; }
.svc-bottom-cta { text-align: center; padding: 20px 20px 70px; }

@media (max-width: 640px) {
    .svc-hero { min-height: 78vh; }
    .svc-hero-inner { padding: 104px 16px 44px; }
    .svc-sec { padding: 30px 16px; }
    .svc-cta-row .lp-btn { width: 100%; max-width: 320px; }
}

/* ── Product walkthrough screenshots ──
   Desktop captures on wide screens, phone captures on narrow ones. */
.svc-shots { max-width: 1080px; }
.shots-sub { text-align: center; color: var(--muted); font-size: 15px; line-height: 1.8; margin: -18px 0 34px; }
.shot-step { margin: 0 0 46px; }
.shot-cap { display: flex; align-items: flex-start; gap: 14px; max-width: 720px; margin: 0 auto 18px; text-align: start; }
.shot-n {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center; background: var(--grad); color: #fff;
    font-weight: 900; font-size: 15px; box-shadow: 0 6px 18px var(--glow);
}
.shot-cap b { display: block; font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.shot-cap span span { display: block; color: var(--muted); font-size: 14px; line-height: 1.75; }
.shot-img {
    display: block; width: 100%; height: auto; border-radius: 16px;
    border: 1px solid var(--bd); background: #fff;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .13);
}
/* phone captures already ship inside a device frame → no border/shadow, narrower */
.shot-phone { display: none; max-width: 300px; margin: 0 auto; border: 0; box-shadow: none; background: none; border-radius: 0; }
@media (max-width: 820px) {
    .shot-desktop { display: none; }
    .shot-phone { display: block; }
    .shot-step { margin-bottom: 38px; }
    .shot-cap { margin-bottom: 14px; }
}

/* ── Currency picker (no-JS <details> dropdown) ── */
.ccy-pick { position: relative; }
.ccy-pick summary {
    list-style: none; cursor: pointer; user-select: none;
    padding: 8px 12px; border: 1px solid var(--bd2); border-radius: 10px;
    background: #fff; color: var(--ink); font-weight: 800; font-size: 12.5px; direction: ltr;
}
.ccy-pick summary::-webkit-details-marker { display: none; }
.ccy-pick summary::after { content: " ▾"; color: var(--muted); }
.ccy-pick summary:hover { border-color: var(--accent); }
.ccy-menu {
    position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 1200;
    background: #fff; border: 1px solid var(--bd2); border-radius: 12px; padding: 6px;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .16);
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; min-width: 190px;
}
.ccy-menu a {
    display: block; text-align: center; padding: 8px 6px; border-radius: 8px;
    font-size: 12px; font-weight: 700; color: var(--ink); text-decoration: none; direction: ltr;
}
.ccy-menu a:hover { background: var(--bg3); }
.ccy-menu a.on { background: var(--grad); color: #fff; }
@media (max-width: 560px) {
    .ccy-pick summary { padding: 7px 8px; font-size: 11px; }
    .ccy-menu { min-width: 168px; }
}

/* Free-trial signalling on the product pages. */
.svc-trial-pill {
    display: inline-block; margin-bottom: 10px;
    font-size: 12.5px; font-weight: 800; color: #fff;
    background: #0f9d76; border-radius: 20px; padding: 5px 14px;
}
.svc-price-line .after { font-size: 13px; font-weight: 600; opacity: .8; }
.svc-trial-note {
    font-size: 13px; line-height: 1.85; font-weight: 600; color: #0f9d76;
    background: rgba(15, 157, 118, .08); border: 1px solid rgba(15, 157, 118, .25);
    border-radius: 12px; padding: 10px 14px; margin: 14px 0;
}