@layer reset, design;
@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    body, h1, h2, h3, p, dl, dd { margin: 0; }
    img { display: block; max-width: 100%; height: auto; }
    input, button, select { font: inherit; }
    button { cursor: pointer; }
    :focus-visible { outline: 3px solid #a11758; outline-offset: 4px; }
    [hidden] { display: none !important; }
}
@layer design {
    :root {
        color-scheme: light;
        --purple: #2a0c6f;
        --ink: #261942;
        --muted: #5f536f;
        --pink: #b90c55;
        --paper: #faf8fc;
        --line: #e7dfef;
        --lavender: #f0e9f8;
        --serif: Georgia, 'Times New Roman', serif;
        --sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
    }
    html { scroll-padding-block: 1rem 7rem; }
    body { background: var(--paper); color: var(--ink); font: 1rem/1.55 var(--sans); }
    a { color: var(--purple); }
    h1, h2, h3 { color: var(--purple); line-height: 1.15; font-family: var(--serif); font-weight: 700; }
    h1 { font-size: clamp(2.45rem, 7.6vw, 4.55rem); letter-spacing: -.05em; }
    h2 { font-size: clamp(1.55rem, 3.8vw, 2rem); letter-spacing: -.035em; }
    h3 { font-size: 1.35rem; letter-spacing: -.025em; }
    p { color: var(--muted); }
    .container { width: min(100% - 2.25rem, 66rem); margin-inline: auto; }
    .skip { position: fixed; z-index: 10; top: .5rem; left: .5rem; padding: .75rem; background: white; transform: translateY(-200%); }
    .skip:focus { transform: none; }
    .masthead { padding-top: env(safe-area-inset-top); color: white; background: var(--purple); border-bottom: 3px solid #dc0d5a; }
    .masthead-inner, .brand { display: flex; align-items: center; }
    .masthead-inner { justify-content: space-between; min-height: 4.25rem; gap: .8rem; }
    .brand { gap: .65rem; color: white; text-decoration: none; font-weight: 650; }
    .brand img { width: clamp(5.4rem, 24vw, 7rem); }
    .brand > span { border-left: 1px solid #a995cc; padding-left: .65rem; }
    .masthead a:focus-visible, .member-hero a:focus-visible { outline-color: white; }
    .demo-badge, .hero-status, .status-tag { border-radius: 100vmax; font-size: .75rem; font-weight: 700; padding: .32rem .65rem; white-space: nowrap; }
    .demo-badge { border: 1px solid #ac91d2; color: #fff; }
    .demo-badge > span, .new-dot { width: .42rem; height: .42rem; border-radius: 100%; display: inline-block; background: #f18db8; vertical-align: .08em; margin-right: .2rem; }
    .main { padding-block: clamp(1.6rem, 4vw, 3rem) calc(7rem + env(safe-area-inset-bottom)); }
    .page-heading { margin-bottom: clamp(1.35rem, 4vw, 2.25rem); }
    .page-heading h1, .welcome-intro h1 { margin-block: .35rem .55rem; }
    .page-heading > p:last-child { font-size: clamp(1rem, 2vw, 1.12rem); }
    .eyebrow { color: var(--pink); font-size: .72rem; font-weight: 750; letter-spacing: .115em; text-transform: uppercase; }
    .welcome { display: grid; gap: 1.35rem; align-items: start; padding-top: clamp(1rem, 5vw, 4rem); }
    .welcome-intro > p:not(.eyebrow) { max-width: 33rem; font-size: 1.1rem; }
    .welcome-action .eyebrow, .panel .eyebrow { margin-bottom: .45rem; }
    .welcome-action form, .panel form { margin-top: 1rem; }
    .welcome-action .button { width: 100%; }
    .install, details { margin-top: 1rem; }
    summary { color: var(--purple); font-weight: 650; cursor: pointer; min-height: 2.75rem; align-content: center; }
    details p { margin: .25rem 0; }
    .dashboard-grid, .tiles, .inbox, .side-stack { display: grid; align-items: start; gap: .85rem; }
    .panel { min-width: 0; padding: clamp(1rem, 3vw, 1.5rem); background: white; border: 1px solid var(--line); border-radius: 1.15rem; box-shadow: 0 .18rem .65rem #2a0c6f06; }
    .panel > p:not(.eyebrow):not(.notice) { margin-block: .5rem .7rem; }
    .next-panel, .wallet-panel { align-self: stretch; }
    .notice { padding: .75rem .9rem; margin-block: .85rem; background: var(--lavender); color: var(--purple); border-left: 3px solid var(--pink); border-radius: .3rem .6rem .6rem .3rem; }
    .form-error { color: #9e1341; margin-block: .7rem; }
    .member-hero {
        position: relative; overflow: hidden; isolation: isolate; min-width: 0; padding: clamp(1.15rem, 4vw, 2rem);
        background: linear-gradient(128deg, #2a0c6f 17%, #431181 72%, #67136d); color: #fff;
        border-radius: 1.35rem; box-shadow: 0 .7rem 1.6rem #2a0c6f25;
    }
    .member-hero::after { content: ''; position: absolute; z-index: -1; inset: -80% -28% auto auto; width: 24rem; height: 24rem; border: 1px solid #ffffff28; box-shadow: 0 0 0 1.6rem #ffffff10, 0 0 0 3.4rem #ffffff0b; border-radius: 50%; pointer-events: none; }
    .member-hero h2 { color: white; margin-block: .55rem .3rem; }
    .member-hero p, .member-hero .eyebrow, .hero-footer span, .card-data dt { color: #f0def9; }
    .hero-top, .hero-footer { display: flex; align-items: center; justify-content: space-between; gap: .55rem; }
    .hero-status { border: 1px solid #ffffff6b; color: white; background: #ffffff13; }
    .hero-footer, .card-data { margin-top: 1.25rem; padding-top: .95rem; border-top: 1px solid #ffffff42; }
    .hero-footer > div { display: grid; }
    .hero-footer > div > span, .card-data dt { font-size: .76rem; }
    .hero-footer .button { flex-shrink: 0; }
    .hero-footer .button span { color: var(--purple); }
    .card-preview .hero-top { margin-bottom: 1.25rem; }
    .card-preview h2 { font-size: clamp(1.9rem, 7vw, 2.8rem); }
    .card-data { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
    .card-data dd { font-weight: 700; }
    .footnote { margin-top: 1.15rem; font-size: .88rem; }
    .section-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .8rem; margin-block: 1.65rem .55rem; }
    .inbox-heading { margin-top: 0; min-height: 2rem; }
    .status-tag { display: inline-block; color: var(--purple); background: var(--lavender); }
    .new-dot { background: var(--pink); margin-left: .25rem; }
    .button { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 2.75rem; border: 1px solid transparent; border-radius: .7rem; padding: .6rem .92rem; background: var(--purple); color: white; font-weight: 700; text-decoration: none; }
    .button:hover { background: #441784; }
    .button-light { background: white; color: var(--purple); }
    .button-light:hover, .button-outline:hover { background: var(--lavender); }
    .button-outline { color: var(--purple); background: white; border-color: #b9a9ce; }
    .wallet-action { background: #181818; }
    .wallet-action:hover { background: #37333c; }
    .text-link, .inline-button { font-weight: 700; text-underline-offset: .2em; display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; }
    .text-link:hover, .inline-button:hover { color: var(--pink); }
    .inline-button { padding: 0; border: 0; background: none; color: var(--purple); text-decoration: underline; }
    .message form { margin-top: 0; }
    label { display: block; font-weight: 650; }
    input[type=password], select { display: block; width: 100%; min-height: 2.75rem; margin-block: .45rem .75rem; border: 1px solid #b9a9ce; border-radius: .55rem; padding: .5rem .6rem; background: white; color: var(--ink); }
    .checkbox { display: flex; align-items: center; min-height: 2.75rem; gap: .55rem; margin-bottom: .6rem; }
    .checkbox input { width: 1.15rem; height: 1.15rem; accent-color: var(--purple); }
    .account-details { margin-top: .65rem; }
    .account-details > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .15rem .65rem; padding-block: .48rem; border-bottom: 1px solid var(--line); }
    .account-details dt { color: var(--muted); }
    .account-details dd { font-weight: 650; }
    .bottom-nav { position: fixed; bottom: 0; inset-inline: 0; z-index: 2; padding-bottom: env(safe-area-inset-bottom); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -.18rem 1.2rem #2a0c6f0c; }
    .nav-inner { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: min(100%, 34rem); }
    .bottom-nav a { display: grid; justify-items: center; align-content: center; gap: .15rem; min-height: 3.8rem; padding: .35rem .1rem; text-decoration: none; color: var(--muted); font-size: .72rem; font-weight: 650; }
    .bottom-nav a[aria-current=page] { color: var(--purple); background: var(--lavender); box-shadow: inset 0 2px var(--purple); }
    .bottom-nav a:hover { background: var(--lavender); }
    .bottom-nav a:focus-visible { outline-offset: -4px; }
    @media (min-width: 44rem) {
        .container { width: min(100% - 3rem, 66rem); }
        .welcome, .dashboard-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 1rem; }
        .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
    }
    @media (max-width: 22rem) {
        .container { width: calc(100% - 1.5rem); }
        .nav-inner { width: 100%; }
        .brand, .brand > span { gap: .35rem; }
        .brand > span { padding-left: .35rem; }
        .hero-footer .button { padding-inline: .55rem; }
    }
}