/* Bubble Notes landing page.
   Palette and type are from the designer's brand book (Branding/BubbleNotes.pdf):
   navy #16113A, purple #7515F9, coral #FF7978, yellow #FEB800, white; Poppins
   Bold for headings, Regular for body. The page ground is the app's own dark
   surface (#241b2f) so the site and the app feel like one thing.
   Mobile-first: the base rules are the phone layout, the media queries widen it. */

:root {
    --ground: #241b2f;
    --ground-deep: #1a1625;
    --navy: #16113a;
    --surface: #2d2438;
    --purple: #7515f9;
    --purple-light: #b58cff;
    --coral: #ff7978;
    --yellow: #feb800;
    --white: #ffffff;
    --text-soft: rgba(255, 255, 255, 0.72);
    --text-faint: rgba(255, 255, 255, 0.5);
    --line: rgba(255, 255, 255, 0.08);
    --radius: 18px;
    --gutter: 20px;
    --max: 1080px;
}

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

html {
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
}

body {
    margin: 0;
    background: var(--ground);
    color: var(--white);
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    /* Contains and clips the emblem below, which hangs off the right edge.
       html clips too, or body's overflow would move to the viewport and the
       page would still scroll sideways on iOS Safari. */
    position: relative;
    overflow-x: clip;
}

/* The brand book's covers set a huge, faint emblem behind the content and
   crop it at the edge. Same move here, fixed to the top of the page. */
body::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -120px;
    width: 420px;
    height: 630px;
    background: url('emblem.svg') no-repeat center / contain;
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
}

main,
.topbar,
.footer {
    position: relative;
    z-index: 1;
}

h1,
h2,
h3,
p {
    margin: 0;
}

a {
    color: inherit;
}

/* ---- Top bar ------------------------------------------------------------ */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--max);
    margin: 0 auto;
    padding: 20px var(--gutter);
}

.topbar-logo img {
    display: block;
    width: 116px;
    height: auto;
}

.topbar-link {
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    color: var(--text-soft);
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    transition: color 0.2s, border-color 0.2s;
}

.topbar-link:hover {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.24);
}

/* ---- Shared ------------------------------------------------------------- */

main {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Stands in for Apple's badge until the listing exists: same shape, but
   plain text, because there is nothing to link to yet. */
.store-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 14px;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.store-badge small {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--text-soft);
}

.store-badge-icon {
    width: 26px;
    height: 26px;
    fill: currentColor;
    flex: none;
}

.topbar-link:focus-visible,
.faq summary:focus-visible,
.footer a:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 3px;
}

/* ---- Pricing ------------------------------------------------------------ */

.pricing {
    padding-bottom: 72px;
}

/* The brand pattern from the book, at low strength so the card reads first. */
.pricing-card {
    position: relative;
    overflow: hidden;
    padding: 40px 24px;
    text-align: center;
    background: var(--navy);
    border: 1px solid var(--line);
    border-radius: 28px;
    isolation: isolate;
}

.pricing-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('pattern-tile.svg') repeat center / 44px 52px;
    opacity: 0.12;
    -webkit-mask-image: radial-gradient(ellipse at center, transparent 35%, #000 85%);
    mask-image: radial-gradient(ellipse at center, transparent 35%, #000 85%);
    z-index: -1;
}

.pricing-title {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-soft);
}

.price-amount {
    display: block;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--white);
}

.price-trial {
    display: inline-block;
    margin-top: 18px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(117, 21, 249, 0.35);
    color: var(--white);
    font-weight: 600;
    font-size: 14px;
}

.price-detail {
    max-width: 26em;
    margin: 18px auto 28px;
    color: var(--text-soft);
}

.price-device {
    margin-top: 14px;
    font-size: 14px;
    color: var(--text-faint);
}

/* ---- Footer ------------------------------------------------------------- */

.footer {
    max-width: var(--max);
    margin: 0 auto;
    padding: 32px var(--gutter) 40px;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 18px;
    justify-items: start;
    font-size: 14px;
    color: var(--text-faint);
}

.footer-emblem {
    display: block;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
}

.footer a {
    text-decoration: none;
    color: var(--text-soft);
}

.footer a:hover {
    color: var(--white);
}

/* ---- Wider screens ------------------------------------------------------ */

@media (min-width: 720px) {
    :root {
        --gutter: 32px;
    }

    .pricing-card {
        padding: 56px;
    }

    .footer {
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 28px;
    }
}

@media (min-width: 940px) {
    body::before {
        width: 640px;
        height: 960px;
        right: -180px;
        top: -120px;
    }

    .topbar-logo img {
        width: 140px;
    }
}