/* app.infoischia.com — the InfoIschia app's own site (blueprints/app_site.py).
   Same look as the 2022 site: Poppins, blue #1967ff / pink #eb4bb6,
   lilac backgrounds, rounded white cards with a soft grey shadow.
   Prefix `as-` (app site) so nothing collides with the booking site CSS. */
:root {
    --as-blue: #1967ff;
    --as-blue-dark: #0f4fd6;
    --as-pink: #eb4bb6;
    --as-pink-dark: #d23aa0;
    --as-lilac: #efedff;
    --as-lilac-soft: #f4f2ff;
    --as-blue-soft: #d4ddfd;
    --as-pink-soft: #f4d9ee;
    --as-grey: #999797;
    --as-grey-2: #aba9bc;
    --as-dark: #252a35;
    --as-shadow: 0 0 10px rgba(153, 151, 151, .55);
    --as-radius: 1rem;
    --as-radius-lg: 2rem;
}

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

.as-body {
    margin: 0;
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--as-dark);
    background: #fff;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
.as-body img { max-width: 100%; height: auto; display: block; }
.as-body a { color: var(--as-blue); }
.as-body p { margin: 0 0 1rem; }

.as-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.as-center { text-align: center; }
.as-pink { color: var(--as-pink); }
.as-blue { color: var(--as-blue); }

/* ── header ─────────────────────────────────────────────────────────── */
.as-header { padding: 1.25rem 0; }
.as-header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.as-logo { font-weight: 700; font-size: 1.9rem; letter-spacing: -.02em; text-decoration: none; line-height: 1; }
.as-logo-pro { color: var(--as-pink); font-size: .7rem; font-weight: 600; margin-left: .15rem; }
.as-header-link { font-weight: 600; font-size: 1.05rem; text-decoration: none; }
.as-header-link:hover { text-decoration: underline; }

/* ── store badges ───────────────────────────────────────────────────── */
.as-badges { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 1rem; }
.as-badge {
    display: inline-flex; align-items: center; gap: .6rem;
    background: #fff; border-radius: var(--as-radius); box-shadow: var(--as-shadow);
    padding: .55rem 1.1rem .55rem .85rem; min-width: 10.5rem;
    text-decoration: none; color: var(--as-blue);
    transition: transform .15s ease, box-shadow .15s ease;
}
.as-badge:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(25, 103, 255, .25); }
.as-badge-icon { font-size: 1.9rem; line-height: 1; }
.as-badge-text { display: flex; flex-direction: column; line-height: 1.2; }
.as-badge-text small { font-size: .7rem; font-weight: 500; }
.as-badge-text strong { font-size: .95rem; font-weight: 700; }

/* ── buttons ────────────────────────────────────────────────────────── */
.as-btn {
    display: inline-block; text-align: center; font-weight: 700; font-size: 1rem;
    padding: .7rem 1.5rem; border-radius: .75rem; text-decoration: none;
    color: #fff; border: 0; transition: background-color .15s ease;
}
.as-body .as-btn { color: #fff; }
.as-btn-blue { background: var(--as-blue); }
.as-btn-blue:hover { background: var(--as-blue-dark); }
.as-btn-pink { background: var(--as-pink); }
.as-btn-pink:hover { background: var(--as-pink-dark); }
.as-btn-lg { font-size: 1.15rem; padding: .9rem 2.5rem; }

/* ── landing hero ───────────────────────────────────────────────────── */
.as-hero { padding: 1rem 0 0; overflow: hidden; }
.as-hero-grid { display: grid; gap: 2.5rem; align-items: center; }
.as-hero-title {
    color: var(--as-blue); font-weight: 800; font-size: 2.3rem; line-height: 1.15;
    letter-spacing: -.02em; margin: 1rem 0 .75rem;
}
.as-hero-lead { color: var(--as-grey); font-size: 1.05rem; max-width: 32rem; }
.as-hero-business { font-size: .85rem; font-weight: 600; text-decoration: none; }
.as-hero-business:hover { text-decoration: underline; }
.as-hero-visual { position: relative; display: flex; justify-content: center; padding: 1rem 0 2rem; }
.as-hero-circle {
    position: absolute; top: 0; left: 50%; width: 22rem; height: 22rem; border-radius: 50%;
    transform: translateX(-35%);
    background: radial-gradient(circle at 40% 40%, var(--as-lilac-soft) 0 60%, var(--as-lilac) 61% 100%);
}
.as-hero-phone { position: relative; width: 17rem; filter: drop-shadow(0 10px 30px rgba(37, 42, 53, .12)); }
.as-hero-pills { display: none; }
.as-pill {
    font-weight: 600; font-size: .9rem; padding: .7rem 1.4rem .7rem 1rem; min-width: 7.5rem;
    border-radius: .9rem; color: var(--as-dark); list-style: none;
}
.as-pill-blue { background: var(--as-blue-soft); }
.as-pill-pink { background: var(--as-pink-soft); }
.as-chevron { text-align: center; color: var(--as-blue); font-size: 2.2rem; padding: 1rem 0 0; }

/* Diagonal lilac band of the 2022 site, redrawn in CSS (was a 670 KB SVG). */
.as-stripe {
    background:
        linear-gradient(152deg, transparent 0 38%, var(--as-lilac) 38% 70%, transparent 70% 100%);
}

/* ── features ───────────────────────────────────────────────────────── */
.as-features { padding: 2rem 0 4rem; }
.as-features-grid { display: grid; gap: 2.5rem; align-items: center; }
.as-features-visual { position: relative; max-width: 28rem; margin: 0 auto; }
.as-features-circle {
    position: absolute; inset: 3% 12% 30% 0; border-radius: 50%;
    background: radial-gradient(circle, #fff 0 55%, var(--as-lilac) 56% 100%);
}
.as-features-visual img { position: relative; }
.as-section-title {
    color: var(--as-blue); font-weight: 800; font-size: 1.7rem; line-height: 1.2;
    letter-spacing: -.01em; margin: 0 0 1.5rem;
}
.as-feature-list {
    list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem;
}
.as-feature-card {
    background: #fff; border: 2px solid var(--as-blue); border-radius: var(--as-radius);
    box-shadow: var(--as-shadow); padding: .8rem 1rem;
}
.as-feature-title { font-weight: 700; font-size: .95rem; margin: 0 0 .3rem; color: var(--as-dark); }
.as-feature-title .bi { color: var(--as-blue); margin-right: .35rem; font-size: 1.05rem; }
.as-feature-text { color: var(--as-grey); font-size: .8rem; margin: 0; line-height: 1.45; }

.as-business-card {
    display: flex; flex-direction: column; align-items: center; gap: .15rem;
    background: #fff; border-radius: var(--as-radius); box-shadow: var(--as-shadow);
    margin: 2rem 0; padding: 1.25rem 1rem; text-decoration: none; text-align: center;
    transition: transform .15s ease;
}
.as-business-card:hover { transform: translateY(-2px); }
.as-business-title { color: var(--as-blue); font-weight: 800; font-size: 1.6rem; line-height: 1.2; }
.as-business-title .bi { font-size: 1rem; vertical-align: super; }
.as-business-sub { color: var(--as-blue); font-weight: 500; font-size: 1.1rem; }

.as-social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.as-social-card {
    display: flex; flex-direction: column; align-items: center; gap: .75rem;
    background: var(--as-blue-soft); border-radius: var(--as-radius); box-shadow: var(--as-shadow);
    padding: 1.4rem .75rem; text-decoration: none; font-weight: 700; font-size: .85rem; text-align: center;
}
.as-social-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--as-blue); color: #fff; font-size: 1.7rem;
}

/* ── pro page ───────────────────────────────────────────────────────── */
.as-page-title {
    color: var(--as-blue); font-weight: 800; font-size: 1.9rem; line-height: 1.2;
    letter-spacing: -.02em; text-align: center; margin: .5rem 0 2rem;
}
.as-subtitle { color: var(--as-blue); font-weight: 700; font-size: 1.4rem; margin: 0 0 1rem; }
.as-pro-hero { padding: 1rem 0 3rem; }
.as-pro-grid { display: grid; gap: 2.5rem; align-items: center; }
.as-pro-copy { color: var(--as-grey); }
.as-pro-copy strong { color: var(--as-dark); }
.as-check-list, .as-plan-list { list-style: none; margin: 0; padding: 0; }
.as-check-list li { display: flex; gap: .6rem; margin-bottom: .75rem; font-size: .95rem; }
.as-check-list .bi, .as-plan-list .bi { color: var(--as-blue); flex: 0 0 auto; }
.as-pro-visual {
    position: relative; background: var(--as-lilac-soft); border-radius: var(--as-radius-lg);
    padding: 1.5rem 1.5rem 3rem; box-shadow: var(--as-shadow);
}
.as-pro-dashboard { width: 88%; border-radius: var(--as-radius); }
.as-pro-panel {
    position: absolute; right: -.5rem; bottom: -1.5rem; width: 36%;
    filter: drop-shadow(0 8px 20px rgba(37, 42, 53, .15));
}

.as-plans { padding: 3rem 0 4rem; }
.as-plans-grid { display: grid; gap: 2rem; max-width: 56rem; margin: 0 auto; align-items: start; }
.as-plan {
    background: #fff; border-radius: var(--as-radius-lg); box-shadow: var(--as-shadow);
    padding: 1.75rem 1.5rem; display: flex; flex-direction: column;
}
.as-plan-label { font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem; }
.as-plan-price { color: var(--as-blue); font-weight: 800; font-size: 2.2rem; line-height: 1.1; margin-bottom: .35rem; }
.as-plan-price-text { font-size: 1.6rem; }
.as-plan-period { font-size: 1rem; font-weight: 600; }
.as-plan-gross { color: var(--as-grey); font-size: .85rem; margin-bottom: .75rem; }
.as-plan-desc { color: var(--as-blue); font-size: .85rem; font-weight: 500; }
.as-plan .as-btn { margin: .25rem 0 1.25rem; }
.as-plan-includes { color: var(--as-blue); font-weight: 700; margin-bottom: .6rem; }
.as-plan-list li { display: flex; gap: .55rem; margin-bottom: .5rem; font-size: .85rem; color: var(--as-blue); }
.as-plan-note { color: var(--as-grey); font-size: .8rem; margin: .75rem 0 0; }

.as-signup { padding: 3rem 0 4rem; }
.as-signup-grid { display: grid; gap: 2rem; align-items: center; max-width: 56rem; }
.as-signup-art { max-width: 18rem; margin: 0 auto; }
.as-signup-body { text-align: center; }
.as-signup-note { color: var(--as-grey); font-size: .9rem; margin-top: 1.25rem; }
.as-signup-login { font-weight: 600; }

/* ── simple pages (delete data, 404) ────────────────────────────────── */
.as-simple { padding: 2rem 0 4rem; }
.as-simple-card {
    max-width: 44rem; background: #fff; border-radius: var(--as-radius-lg); box-shadow: var(--as-shadow);
    padding: 2rem 1.5rem; font-size: 1.05rem;
}
.as-lost-art { max-width: 11rem; margin: 0 auto 1rem; }

/* ── footer ─────────────────────────────────────────────────────────── */
.as-footer { background: var(--as-lilac); margin-top: 2rem; }
.as-footer-grid { display: grid; gap: 2rem; padding-top: 2.5rem; padding-bottom: 2rem; align-items: center; text-align: center; }
.as-footer-brand { display: flex; align-items: flex-end; justify-content: center; gap: .9rem; }
.as-footer-mark { width: 2.1rem; }
.as-footer-name { font-weight: 700; font-size: 2rem; line-height: 1; }
.as-footer-links { display: flex; flex-direction: column; gap: .35rem; font-weight: 700; }
.as-footer-links a { text-decoration: none; }
.as-footer-links a:hover { text-decoration: underline; }
.as-footer-title { color: var(--as-blue); font-weight: 700; margin: 0; }
.as-footer-app .as-badges { justify-content: center; margin: .75rem 0 0; }
.as-footer-bottom { border-top: 1px solid rgba(25, 103, 255, .12); }
.as-footer-bottom-row {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
    padding-top: 1rem; padding-bottom: 1rem;
}
.as-footer-bottom-row p { margin: 0; color: var(--as-blue); font-weight: 500; font-size: .9rem; }
.as-footer-social { display: flex; gap: 1rem; font-size: 1.7rem; }
.as-footer-social a { text-decoration: none; }

/* ── ≥ 576px ────────────────────────────────────────────────────────── */
@media (min-width: 576px) {
    .as-feature-list { grid-template-columns: 1fr 1fr; }
    .as-hero-title { font-size: 2.8rem; }
}

/* ── ≥ 768px ────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .as-logo { font-size: 2.6rem; }
    .as-plans-grid { grid-template-columns: 1fr 1fr; }
    .as-signup-grid { grid-template-columns: 1fr 1.3fr; margin: 0 auto; }
    .as-footer-grid { grid-template-columns: 1fr 1fr 1fr; text-align: left; }
    .as-footer-brand { justify-content: flex-start; }
    .as-footer-links { text-align: center; }
    .as-footer-app { text-align: center; }
    .as-page-title { font-size: 2.4rem; }
}

/* ── ≥ 992px ────────────────────────────────────────────────────────── */
@media (min-width: 992px) {
    .as-header { padding: 2rem 0 1rem; }
    .as-hero-grid { grid-template-columns: 1.3fr 1fr; }
    .as-hero-copy { padding-left: 1.5rem; }
    .as-hero-title { font-size: 3rem; }
    .as-hero-lead { font-size: 1.2rem; }
    .as-hero-visual { justify-content: flex-start; padding-left: 2rem; }
    .as-hero-circle { width: 30rem; height: 30rem; left: 0; transform: translateX(22%); }
    .as-hero-phone { width: 18.5rem; }
    .as-hero-pills {
        display: flex; flex-direction: column; gap: .8rem; margin: 0; padding: 0;
        position: absolute; left: calc(2rem + 18.5rem - .75rem); top: 3rem;
    }
    .as-features-grid { grid-template-columns: 1fr 1.25fr; }
    .as-features-visual { max-width: none; }
    .as-pro-grid { grid-template-columns: 1fr 1.3fr; }
    .as-pro-copy { padding-left: 2rem; }
    .as-stripe {
        background:
            linear-gradient(160deg, transparent 0 42%, var(--as-lilac) 42% 68%, transparent 68% 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .as-badge, .as-business-card, .as-btn { transition: none; }
    .as-badge:hover, .as-business-card:hover { transform: none; }
}