:root {
    --color-primary: #121110;
    --color-secondary: #d28c6a;
    --color-accent: #b66a4a;
    --color-bg: #f1efe9;
    --color-surface: #fff;
    --color-border: #dedbd5;
    --color-text: #121110;
    --color-muted: #706d68;
    --color-success: #246b45;
    --color-danger: #a33a31;
    --sidebar-width: 230px;
    --header-height: 68px;
    --content-max: 1180px;
    --radius-sm: 7px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --space-xs: 6px;
    --space-sm: 10px;
    --space-md: 16px;
    --space-lg: 26px;
    --space-xl: 48px;
    --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --shadow: 0 10px 30px rgba(18, 17, 16, .06);
    --button-height: 44px;
    --button-padding-x: 17px;
    --link-color: #7b4936;
    --stat-min: 145px;
    --message-gap: 14px
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font);
    line-height: 1.55
}

a {
    color: inherit
}

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

.topbar nav {
    display: flex;
    align-items: center;
    gap: 18px
}

.topbar nav a {
    text-decoration: none
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    text-decoration: none
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--color-primary);
    color: white
}

.page {
    min-height: calc(100vh - 130px)
}

.hero {
    max-width: 850px;
    margin: 11vh auto;
    padding: var(--space-xl) var(--space-lg);
    text-align: center
}

.hero h1,
.narrow h1,
.content h1 {
    font-size: clamp(2rem, 5vw, 4.4rem);
    line-height: 1.02;
    margin: 10px 0 18px;
    letter-spacing: -.045em
}

.lead {
    font-size: 1.15rem;
    color: var(--color-muted)
}

.eyebrow {
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .16em;
    color: var(--color-accent)
}

.actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 28px
}

.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: white;
    padding: 11px 17px;
    border-radius: var(--radius-sm);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer
}

.button:hover {
    opacity: .88
}

.button.ghost {
    background: transparent;
    color: var(--color-primary)
}

.button.small {
    padding: 7px 12px
}

.button.full {
    width: 100%
}

.link-button {
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer
}

.inline {
    display: inline
}

.auth-card,
.narrow {
    width: min(92%, 520px);
    margin: 7vh auto
}

.narrow.wide {
    width: min(94%, 980px)
}

.auth-card,
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    box-shadow: var(--shadow)
}

.auth-card h1 {
    margin-top: 0
}

label {
    display: block;
    font-weight: 700;
    margin: 14px 0
}

input {
    width: 100%;
    margin-top: 6px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: white;
    font: inherit
}

input:focus {
    outline: 2px solid color-mix(in srgb, var(--color-secondary) 55%, transparent);
    border-color: var(--color-secondary)
}

.divider {
    text-align: center;
    color: var(--color-muted);
    margin: 18px
}

.muted {
    color: var(--color-muted)
}

.alert,
.success {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    margin: 12px 0
}

.alert {
    background: #fff0ee;
    color: var(--color-danger)
}

.success {
    background: #111512;
    color: var(--color-success)
}

.shell {
    max-width: var(--content-max);
    margin: 25px auto;
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    gap: var(--space-lg);
    padding: 0 var(--space-lg)
}

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.sidebar strong {
    padding: 12px
}

.sidebar a {
    padding: 10px 12px;
    text-decoration: none;
    border-radius: var(--radius-sm)
}

.sidebar a:hover,
.sidebar a.active {
    background: var(--color-surface)
}

.content {
    min-width: 0
}

.card {
    margin: 16px 0;
}

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

.content h1 {
    font-size: 2.6rem
}

.badge {
    background: var(--color-primary);
    color: white;
    border-radius: 99px;
    padding: 5px 10px;
    font-size: .75rem
}

.grid,
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md)
}

.pricing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 30px 0
}

.price.featured {
    outline: 2px solid var(--color-secondary)
}

.price-value {
    font-size: 1.7rem;
    font-weight: 800
}

.center {
    text-align: center
}

.footer {
    text-align: center;
    padding: 28px;
    color: var(--color-muted);
    font-size: .85rem
}

code {
    background: #eeeae3;
    padding: 2px 5px;
    border-radius: 4px
}

@media(max-width:760px) {
    .topbar nav>a:not(.button) {
        display: none
    }

    .shell {
        grid-template-columns: 1fr
    }

    .sidebar {
        flex-direction: row;
        overflow: auto
    }

    .grid,
    .pricing-grid {
        grid-template-columns: 1fr
    }

    .actions {
        flex-direction: column
    }

    .hero {
        margin-top: 5vh
    }
}

/* Mobile-first safety: keep controls tappable and prevent accidental overflow. */
img,
svg,
video {
    max-width: 100%;
    height: auto
}

button,
input,
select,
textarea {
    max-width: 100%
}

@media(max-width:760px) {
    .topbar {
        height: auto;
        min-height: var(--header-height);
        padding: 12px var(--space-md);
        gap: 10px
    }

    .topbar nav {
        gap: 8px
    }

    .topbar .button {
        padding: 9px 11px
    }

    .auth-card,
    .narrow,
    .narrow.wide {
        width: calc(100% - 24px);
        margin: 28px auto
    }

    .auth-card,
    .card {
        padding: var(--space-md);

    }



    .shell {
        margin: 12px auto;
        padding: 0 12px;
        gap: 12px
    }

    .sidebar {
        margin: 0 -12px;
        padding: 0 12px
    }

    .sidebar a {
        white-space: nowrap
    }

    .page-head {
        gap: 12px;
        flex-direction: column
    }

    .content h1 {
        font-size: 2rem
    }

    .hero {
        padding: 32px 16px
    }

    .hero h1,
    .narrow h1 {
        font-size: clamp(2rem, 11vw, 3rem)
    }

    .pricing-grid {
        margin: 20px 0
    }

    .button {
        min-height: 44px
    }

    .google-button {
        min-height: 46px
    }
}

@media(max-width:420px) {
    :root {
        --space-lg: 18px
    }

    .topbar .brand span:last-child {
        max-width: 145px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .hero {
        margin-top: 2vh
    }

    .auth-card {
        border-radius: var(--radius-sm)
    }
}

.toast {
    position: fixed;
    z-index: 1000;
    top: 82px;
    right: 18px;
    max-width: min(420px, calc(100vw - 36px));
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    box-shadow: var(--shadow)
}

.toast.success {
    color: var(--color-success)
}

.toast.error {
    color: var(--color-danger)
}

.button:disabled {
    opacity: .55;
    cursor: not-allowed
}

.button.danger {
    background: var(--color-danger);
    border-color: var(--color-danger)
}

.danger {
    color: var(--color-danger)
}

.danger-zone {
    border-color: color-mix(in srgb, var(--color-danger) 35%, var(--color-border))
}

.token {
    display: block;
    overflow-wrap: anywhere;
    margin-top: 8px
}

.token-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--color-border)
}

.token-row span {
    display: flex;
    flex-direction: column
}

.token-row small {
    color: var(--color-muted)
}

@media(max-width:760px) {
    .toast {
        top: 72px;
        left: 12px;
        right: 12px;
        max-width: none
    }

    .token-row {
        align-items: flex-start
    }
}

.setup-hint {
    margin: 12px 0 0;
    padding: 10px 12px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    font-size: .9rem;
    background: color-mix(in srgb, var(--color-surface) 80%, transparent)
}

.notyf {
    font-family: var(--font)
}

.notyf__toast {
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow)
}

/* Product UI system */
button,
.btn,
.button {
    min-height: var(--button-height)
}

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: #fff;
    padding: 11px var(--button-padding-x);
    border-radius: var(--radius-sm);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer
}

.btn-ghost {
    background: transparent;
    color: var(--color-primary)
}

textarea,
select {
    width: 100%;
    margin-top: 6px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font: inherit
}

.text-link,
.content a:not(.button):not(.card) {
    color: var(--link-color);
    text-decoration: none;
}

.text-link:hover,
.content a:not(.button):not(.card):hover {
    color: var(--color-primary);
    text-decoration: none;
}

a {
    color: var(--link-color);
    text-decoration: none;
    transition: color .15s ease;
}


.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--stat-min), 1fr));
    gap: var(--space-md);
    margin: 0 0 var(--space-md)
}

.stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    box-shadow: var(--shadow)
}

.stat-card span {
    display: block;
    color: var(--color-muted);
    font-size: .85rem
}

.stat-card strong {
    display: block;
    font-size: 1.8rem;
    margin-top: 4px
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-sm)
}

.section-head h3 {
    margin: 0
}

.message-row {
    padding: var(--message-gap) 0;
    border-bottom: 1px solid var(--color-border)
}

.message-row:last-child {
    border-bottom: 0
}

.message-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md)
}

.reply-box {
    margin-left: auto;
    min-width: 90px
}

.reply-box summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--link-color)
}

.reply-box form {
    width: min(520px, 70vw);
    margin-top: 10px
}

.reply-box textarea {
    margin-bottom: 8px
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    color: var(--color-muted)
}

@media(max-width:760px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .section-head,
    .message-meta,
    .pagination {
        align-items: stretch;
        flex-direction: column
    }

    .reply-box {
        margin-left: 0
    }

    .reply-box form {
        width: 100%
    }
}

.row-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap
}

.row-actions form {
    margin: 0
}

.message-row.is-unread>strong,
.message-row.is-unread>div {
    font-weight: 800
}

.domain-card {
    margin-top: var(--space-md)
}

.status-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 9px;
    border-radius: 99px;
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em
}

.status-badge.verified {
    background: #111512;
    color: var(--color-success)
}

.status-badge.pending {
    background: #111512;
    color: #815b12
}

.dns-table {
    margin: 16px 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden
}

.dns-row {
    display: grid;
    grid-template-columns: 70px minmax(160px, 1fr) minmax(220px, 1.4fr) 70px 72px;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border-top: 1px solid var(--color-border)
}

.dns-row:first-child {
    border-top: 0
}

.dns-head {
    font-size: .78rem;
    font-weight: 800;
    background: var(--color-bg)
}

.dns-row code {
    overflow-wrap: anywhere;
    white-space: normal
}

.verify-form {
    margin: 14px 0
}

@media(max-width:900px) {
    .dns-head {
        display: none
    }

    .dns-row {
        grid-template-columns: 1fr
    }

    .dns-row span:empty {
        display: none
    }
}

.domain-checks {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0
}

.check-pill {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 99px;
    background: #fff5df;
    color: #815b12;
    font-size: .78rem;
    font-weight: 800
}

.check-pill.ok {
    background: #111512;
    color: var(--color-success)
}

.dns-copy-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap
}

.dns-row {
    grid-template-columns: 64px minmax(130px, .8fr) minmax(220px, 1.35fr) 64px 90px minmax(150px, .8fr)
}

@media(max-width:900px) {
    .dns-row {
        grid-template-columns: 1fr
    }

    .dns-copy-actions {
        margin-top: 4px
    }
}

/* InboxTron v0.7 launch system */
:root {
    --color-primary: #39e58c;
    --color-secondary: #9af5c3;
    --color-accent: #39e58c;
    --color-bg: #101311;
    --color-surface: #171b18;
    --color-surface-2: #1e2420;
    --color-border: #2c342f;
    --color-text: #f1f5f2;
    --color-muted: #98a39c;
    --color-success: #55e99b;
    --color-danger: #ff7168;
    --link-color: #67eca5;
    --shadow: 0 18px 55px rgba(0, 0, 0, .22);
    --content-max: 1200px
}

html {
    scroll-behavior: smooth
}

body {
    background: var(--color-bg);
    color: var(--color-text)
}

a {
    color: inherit
}

.page {
    overflow: hidden
}

.topbar {
    max-width: 1240px;
    border-bottom: 1px solid transparent
}

.topbar nav a {
    color: #c4ccc7;
    font-size: .92rem
}

.topbar nav a:hover {
    color: #fff
}

.brand {
    font-size: 1.02rem
}

.brand-mark,
.sidebar-mark {
    background: linear-gradient(135deg, #39e58c, #1aa861);
    color: #07130c;
    box-shadow: 0 0 24px rgba(57, 229, 140, .15);
    font-size: .7rem;
    letter-spacing: -.04em
}

.brand-accent {
    color: var(--color-primary)
}

.button {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #07130c;
    box-shadow: 0 0 0 0 rgba(57, 229, 140, 0);
    transition: .2s ease
}

.button:hover {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 8px 28px rgba(57, 229, 140, .14)
}

.button.ghost {
    background: transparent;
    color: #d9e0dc;
    border-color: #3a443e;
    box-shadow: none
}

.button.ghost:hover {
    border-color: #5c6c63;
    background: #171b18
}

.button.danger {
    background: transparent;
    color: #ff8c84;
    border-color: #6b3936
}

.eyebrow {
    color: var(--color-primary)
}

.muted {
    color: var(--color-muted)
}

code {
    background: #202721;
    color: #a9f6cc
}

.card,
.auth-card {
    background: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: var(--shadow)
}

input,
select,
textarea {
    background: #111512;
    color: var(--color-text);
    border-color: var(--color-border)
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid rgba(57, 229, 140, .25);
    border-color: var(--color-primary)
}

.sidebar a:hover,
.sidebar a.active {
    background: #1a211c;
    color: #fff
}

.sidebar a.active {
    box-shadow: inset 2px 0 var(--color-primary)
}

.badge {
    background: #173424;
    color: #75eeaa
}

.footer {
    border-top: 1px solid var(--color-border);
    text-align: left;
    padding: 50px 26px 24px;
    margin-top: 70px
}

.footer-inner {
    max-width: var(--content-max);
    margin: auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 60px
}

.footer-inner>div:first-child p {
    max-width: 390px;
    color: var(--color-muted)
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px
}

.footer-links div {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.footer-links strong {
    margin-bottom: 5px
}

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

.footer-links a:hover {
    color: #fff
}

.footer-bottom {
    max-width: var(--content-max);
    margin: 40px auto 0;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
    color: #707b74;
    font-size: .8rem
}

.landing-hero {
    max-width: 1240px;
    margin: 70px auto 95px;
    padding: 0 26px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center
}

.hero-copy h1 {
    font-size: clamp(3.4rem, 6vw, 6.3rem);
    line-height: .93;
    letter-spacing: -.065em;
    margin: 15px 0 24px
}

.hero-copy h1 span {
    color: var(--color-primary)
}

.hero-copy .lead {
    max-width: 650px;
    font-size: 1.2rem
}

.actions.left {
    justify-content: flex-start
}

.hero-proof {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 26px;
    color: #89968e;
    font-size: .83rem
}

.mail-flow {
    background: #131815;
    border: 1px solid #303a33;
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 35px 100px rgba(0, 0, 0, .36), 0 0 80px rgba(57, 229, 140, .035);
    position: relative
}

.mail-flow:after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(57, 229, 140, .16), transparent 38%);
    pointer-events: none
}

.flow-top {
    display: flex;
    gap: 8px;
    align-items: center;
    color: #7f8c84;
    font-size: .68rem;
    letter-spacing: .08em;
    padding: 2px 5px 15px;
    border-bottom: 1px solid #273029
}

.flow-top code {
    margin-left: auto;
    font-size: .68rem
}

.live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 12px var(--color-primary);
    animation: pulse 1.8s infinite
}

.flow-step {
    display: grid;
    grid-template-columns: 35px 1fr auto;
    gap: 13px;
    align-items: start;
    padding: 18px 8px
}

.flow-step small {
    color: #6f7c74;
    font-size: .65rem;
    letter-spacing: .1em
}

.flow-step strong {
    display: block;
    margin: 3px 0 4px;
    font-size: .93rem
}

.flow-step p {
    margin: 0;
    color: #8f9a93;
    font-size: .79rem
}

.flow-num {
    font: 700 .65rem ui-monospace, monospace;
    color: #556159;
    padding-top: 4px
}

.flow-check {
    color: var(--color-primary)
}

.sent-pill {
    font-size: .6rem;
    letter-spacing: .08em;
    color: #07130c;
    background: var(--color-primary);
    border-radius: 99px;
    padding: 4px 7px
}

.flow-line {
    width: 1px;
    height: 16px;
    background: linear-gradient(var(--color-primary), #263028);
    margin: -8px 0 -8px 25px;
    box-shadow: 0 0 8px rgba(57, 229, 140, .35);
    animation: flowGlow 2.4s infinite
}

.logo-strip {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 20px 26px;
    display: flex;
    justify-content: center;
    gap: 55px;
    color: #69756d;
    font-size: .72rem;
    letter-spacing: .1em
}

.logo-strip strong {
    color: #a5afa9
}

.public-section {
    padding: 110px 26px
}

.section-wrap {
    max-width: var(--content-max);
    margin: auto
}

.section-heading {
    max-width: 720px;
    margin-bottom: 45px
}

.section-heading h2,
.split h2,
.final-cta h2 {
    font-size: clamp(2.3rem, 4vw, 4.3rem);
    line-height: 1;
    letter-spacing: -.05em;
    margin: 10px 0 15px
}

.section-heading p {
    color: var(--color-muted);
    font-size: 1.08rem
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px
}

.feature-card {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: linear-gradient(145deg, #181d1a, #131714);
    padding: 28px;
    min-height: 270px
}

.feature-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid #35503f;
    background: #15251b;
    color: var(--color-primary);
    border-radius: 10px;
    font: 700 1rem ui-monospace, monospace
}

.feature-card h3 {
    font-size: 1.3rem;
    margin-top: 40px
}

.feature-card p {
    color: var(--color-muted)
}

.feature-card a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 700
}

.product-shot-section {
    background: #0d100e;
    border-block: 1px solid #222923
}

.split {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 70px;
    align-items: center
}

.check-list {
    list-style: none;
    padding: 0;
    margin: 30px 0
}

.check-list li {
    padding: 8px 0;
    color: #bdc7c0
}

.check-list li:before {
    content: "✓";
    color: var(--color-primary);
    margin-right: 10px
}

.product-window {
    border: 1px solid #303932;
    background: #121613;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 35px 90px rgba(0, 0, 0, .4)
}

.window-bar {
    height: 40px;
    background: #1a1f1c;
    border-bottom: 1px solid #2b332e;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 13px;
    color: #667169;
    font-size: .65rem
}

.window-bar i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3d4640
}

.window-bar span {
    margin-left: 8px
}

.window-body {
    display: grid;
    grid-template-columns: 110px 1fr;
    min-height: 340px
}

.mini-sidebar {
    border-right: 1px solid #29312b;
    padding: 18px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: .63rem;
    color: #7d8981
}

.mini-sidebar b {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    background: var(--color-primary);
    color: #07130c;
    border-radius: 6px;
    margin-bottom: 12px
}

.mini-sidebar span {
    padding: 7px
}

.mini-sidebar .selected {
    background: #1b251f;
    color: #dce5df;
    border-radius: 5px
}

.mini-content {
    padding: 24px
}

.mini-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px
}

.mini-head small {
    display: block;
    color: var(--color-primary);
    font-size: .55rem;
    letter-spacing: .12em
}

.mini-head strong {
    font-size: 1.05rem
}

.mini-head button {
    background: var(--color-primary);
    border: 0;
    border-radius: 5px;
    padding: 7px 9px;
    font-weight: 700;
    font-size: .6rem
}

.mini-row {
    display: grid;
    grid-template-columns: 1.5fr .5fr .3fr .3fr;
    align-items: center;
    gap: 10px;
    padding: 14px 0;
    border-top: 1px solid #28302a;
    font-size: .65rem
}

.mini-row div b,
.mini-row div code {
    display: block
}

.mini-row code {
    background: transparent;
    padding: 0;
    color: #6f7c74;
    font-size: .6rem
}

.mini-row span {
    color: #9ca79f
}

.code-stage {
    border: 1px solid #2e3931;
    background: #0c100d;
    border-radius: 17px;
    overflow: hidden
}

.code-tabs {
    display: flex;
    border-bottom: 1px solid #273029;
    background: #141915
}

.code-tabs button {
    padding: 14px 20px;
    border: 0;
    background: transparent;
    color: #78847c;
    font-weight: 700;
    cursor: pointer
}

.code-tabs button.active {
    color: var(--color-primary);
    box-shadow: inset 0 -2px var(--color-primary)
}

.code-stage pre {
    margin: 0;
    padding: 32px;
    min-height: 230px;
    overflow: auto
}

.code-stage pre code,
.article-body pre code {
    background: transparent;
    color: #b9f7d3;
    padding: 0
}

.tool-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 16px 24px;
    border-top: 1px solid #273029
}

.tool-chips span {
    border: 1px solid #2f3932;
    border-radius: 99px;
    padding: 5px 9px;
    color: #89968e;
    font: 600 .65rem ui-monospace, monospace
}

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--color-border)
}

.steps article {
    padding: 30px;
    border-right: 1px solid var(--color-border)
}

.steps article:last-child {
    border-right: 0
}

.steps b {
    color: var(--color-primary);
    font: 700 .7rem ui-monospace, monospace
}

.steps h3 {
    font-size: 1.3rem;
    margin-top: 40px
}

.steps p,
.use-grid p {
    color: var(--color-muted)
}

.use-cases {
    background: #131714
}

.use-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--color-border);
    border-radius: 15px;
    overflow: hidden
}

.use-grid>div {
    padding: 30px;
    border-bottom: 1px solid var(--color-border)
}

.use-grid>div:nth-child(odd) {
    border-right: 1px solid var(--color-border)
}

.use-grid>div:nth-last-child(-n+2) {
    border-bottom: 0
}

.simple-pricing {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 800px
}

.simple-pricing article {
    border: 1px solid var(--color-border);
    border-radius: 15px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.simple-pricing article.featured {
    border-color: #397952;
    background: #14231a
}

.simple-pricing article>span {
    font-size: .7rem;
    letter-spacing: .12em;
    color: var(--color-primary)
}

.simple-pricing h3 {
    font-size: 2.5rem;
    margin: 0
}

.simple-pricing p {
    color: var(--color-muted);
    min-height: 48px
}

.simple-pricing .button {
    margin-top: 10px
}

.pricing-note {
    color: #6f7a73;
    font-size: .8rem
}

.narrow-public {
    max-width: 850px
}

.faq-section details {
    border-top: 1px solid var(--color-border);
    padding: 20px 0
}

.faq-section details:last-child {
    border-bottom: 1px solid var(--color-border)
}

.faq-section summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 1.05rem
}

.faq-section details p {
    color: var(--color-muted);
    max-width: 700px
}

.final-cta {
    max-width: 1200px;
    margin: 60px auto 100px;
    padding: 55px;
    border: 1px solid #31513d;
    background: radial-gradient(circle at 80% 20%, rgba(57, 229, 140, .09), transparent 30%), #141a16;
    border-radius: 20px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px
}

.final-cta h2 {
    margin-bottom: 5px
}

.final-cta p {
    color: var(--color-muted)
}

/* App v0.7 */
.head-actions,
.form-actions {
    display: flex;
    gap: 10px;
    align-items: center
}

.mailbox-table {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-surface)
}

.mailbox-table-head,
.mailbox-table-row {
    display: grid;
    grid-template-columns: minmax(260px, 1.5fr) .55fr .45fr .45fr .55fr .4fr;
    gap: 15px;
    align-items: center;
    padding: 13px 16px
}

.mailbox-table-head {
    background: #121713;
    color: #6f7b73;
    text-transform: uppercase;
    font-size: .65rem;
    letter-spacing: .08em
}

.mailbox-table-row {
    border-top: 1px solid var(--color-border)
}

.mailbox-table-row>div strong,
.mailbox-table-row>div code {
    display: block
}

.mailbox-table-row>div code {
    background: transparent;
    padding: 2px 0;
    color: #7f8c84;
    font-size: .78rem
}

.type-pill {
    width: max-content;
    text-transform: capitalize;
    border: 1px solid #344038;
    border-radius: 99px;
    padding: 3px 7px;
    font-size: .68rem;
    color: #9ba79f
}

.status-dot {
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: capitalize;
    color: #a6b1aa;
    font-size: .75rem
}

.status-dot i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #68736c
}

.status-dot.active i {
    background: var(--color-primary);
    box-shadow: 0 0 8px rgba(57, 229, 140, .4)
}

.empty-state {
    text-align: center;
    padding: 60px
}

.create-inbox-card {
    max-width: 700px
}

.form-actions {
    justify-content: flex-end;
    margin-top: 24px
}

.activity-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 16px 0
}

.activity-card {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.activity-card h2,
.usage-card h2 {
    margin: 5px 0 0
}

.activity-counts {
    display: flex;
    gap: 38px
}

.activity-counts div {
    display: flex;
    flex-direction: column
}

.activity-counts strong {
    font-size: 2rem
}

.activity-counts span {
    color: var(--color-muted);
    font-size: .75rem
}

.usage-title {
    display: flex;
    justify-content: space-between;
    align-items: end
}

.usage-title h2 {
    font-size: 2rem
}

.usage-title h2 small {
    color: #718078;
    font-size: 1rem
}

.usage-title>strong {
    color: var(--color-primary)
}

.usage-track {
    height: 7px;
    background: #252d28;
    border-radius: 99px;
    overflow: hidden;
    margin: 18px 0 10px
}

.usage-track span {
    display: block;
    height: 100%;
    background: var(--color-primary);
    border-radius: inherit
}

.inline-link {
    margin-left: 12px
}

/* Docs + blog */
.docs-hero,
.blog-hero {
    padding-bottom: 45px
}

.docs-hero h1,
.blog-hero h1 {
    font-size: clamp(3rem, 6vw, 5.8rem);
    letter-spacing: -.06em;
    margin: 8px 0
}

.docs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding-bottom: 90px
}

.doc-card,
.post-card,
.featured-post {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: 14px;
    padding: 26px;
    text-decoration: none;
    position: relative
}

.doc-card:hover,
.post-card:hover,
.featured-post:hover {
    border-color: #45614f
}

.doc-card h2,
.post-card h2 {
    margin: 12px 0 8px
}

.doc-card p,
.post-card p,
.featured-post p {
    color: var(--color-muted)
}

.doc-arrow {
    position: absolute;
    right: 20px;
    top: 18px;
    color: var(--color-primary)
}

.article-shell {
    max-width: 1280px;
    margin: 55px auto 100px;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 190px minmax(0, 760px) 190px;
    gap: 45px;
    justify-content: center
}

.docs-nav,
.toc {
    position: sticky;
    top: 30px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: .78rem
}

.docs-nav a,
.toc a {
    color: #7f8b83;
    text-decoration: none;
    padding: 5px 0
}

.docs-nav a:hover,
.docs-nav a.active,
.toc a:hover {
    color: var(--color-primary)
}

.docs-nav .docs-home {
    font-weight: 800;
    color: #d7dfda;
    margin-bottom: 8px
}

.toc strong {
    margin-bottom: 6px
}

.toc-l3 {
    padding-left: 10px !important
}

.article-kicker {
    color: var(--color-primary);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em
}

.article>h1 {
    font-size: clamp(2.7rem, 5vw, 4.6rem);
    line-height: .98;
    letter-spacing: -.055em;
    margin: 10px 0 18px
}

.article-deck {
    font-size: 1.15rem;
    color: #9aa69e;
    margin-bottom: 35px
}

.article-body {
    font-size: 1rem;
    color: #c7d0ca
}

.article-body h2 {
    font-size: 1.8rem;
    color: #f2f5f3;
    margin: 50px 0 14px;
    letter-spacing: -.03em;
    scroll-margin-top: 20px
}

.article-body h3 {
    font-size: 1.25rem;
    color: #edf2ee;
    margin: 35px 0 12px;
    scroll-margin-top: 20px
}

.heading-anchor {
    opacity: 0;
    color: #54635a;
    text-decoration: none;
    margin-left: 8px
}

.article-body h2:hover .heading-anchor,
.article-body h3:hover .heading-anchor {
    opacity: 1
}

.article-body p {
    line-height: 1.75
}

.article-body li {
    margin: 8px 0
}

.article-body a {
    color: var(--color-primary)
}

.article-body pre {
    background: #0b0f0c;
    border: 1px solid #29322c;
    border-radius: 10px;
    padding: 20px;
    overflow: auto;
    margin: 22px 0
}

.article-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .88em
}

.post-byline {
    display: flex;
    gap: 16px;
    color: #6f7b73;
    font-size: .75rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 24px;
    margin-bottom: 32px
}

.back-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 40px;
    height: 40px;
    border: 1px solid #344038;
    border-radius: 10px;
    background: #171c19;
    color: var(--color-primary);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: .2s
}

.back-top.visible {
    opacity: 1;
    pointer-events: auto
}

.blog-list {
    padding-bottom: 100px
}

.featured-post {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 38px;
    margin-bottom: 16px
}

.featured-post h2 {
    font-size: 2.1rem;
    max-width: 700px;
    margin: 10px 0
}

.feature-arrow {
    font-size: 2rem;
    color: var(--color-primary)
}

.post-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.post-card {
    min-height: 270px
}

.tag-row {
    display: flex;
    gap: 7px
}

.tag-row span {
    border: 1px solid #334039;
    border-radius: 99px;
    padding: 3px 7px;
    color: #859188;
    font-size: .65rem
}

.post-meta {
    color: #68746c;
    font-size: .72rem
}

.article-cta {
    border: 1px solid #31513d;
    background: #142019;
    border-radius: 14px;
    padding: 28px;
    margin-top: 60px
}

.article-cta h2 {
    margin: 6px 0
}

.article-cta p {
    color: var(--color-muted)
}

@keyframes pulse {
    50% {
        opacity: .45;
        box-shadow: 0 0 4px var(--color-primary)
    }
}

@keyframes flowGlow {
    50% {
        box-shadow: 0 0 16px rgba(57, 229, 140, .7)
    }
}

@media(max-width:980px) {

    .topbar nav a[href="/#product"],
    .topbar nav a[href="/#developers"],
    .topbar nav a[href="/blog"] {
        display: none
    }

    .landing-hero,
    .split {
        grid-template-columns: 1fr
    }

    .landing-hero {
        gap: 45px
    }

    .feature-grid {
        grid-template-columns: 1fr
    }

    .article-shell {
        grid-template-columns: 1fr;
        max-width: 800px
    }

    .docs-nav {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        border-bottom: 1px solid var(--color-border);
        padding-bottom: 20px
    }

    .toc {
        display: none
    }

    .mailbox-table-head {
        display: none
    }

    .mailbox-table-row {
        grid-template-columns: 1fr repeat(4, auto)
    }

    .mailbox-table-row>a {
        grid-column: 1/-1
    }

    .footer-inner {
        grid-template-columns: 1fr
    }

    .activity-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width:760px) {
    .landing-hero {
        margin-top: 35px;
        padding: 0 16px
    }

    .hero-copy h1 {
        font-size: 3.4rem
    }

    .logo-strip {
        justify-content: flex-start;
        overflow: auto;
        gap: 28px;
        white-space: nowrap
    }

    .public-section {
        padding: 75px 16px
    }

    .feature-grid,
    .steps,
    .simple-pricing,
    .docs-grid,
    .post-grid {
        grid-template-columns: 1fr
    }

    .steps article {
        border-right: 0;
        border-bottom: 1px solid var(--color-border)
    }

    .use-grid {
        grid-template-columns: 1fr
    }

    .use-grid>div {
        border-right: 0 !important;
        border-bottom: 1px solid var(--color-border) !important
    }

    .use-grid>div:last-child {
        border-bottom: 0 !important
    }

    .final-cta {
        margin: 30px 12px 70px;
        padding: 30px;
        align-items: flex-start;
        flex-direction: column
    }

    .window-body {
        grid-template-columns: 1fr
    }

    .mini-sidebar {
        display: none
    }

    .mini-row {
        grid-template-columns: 1fr auto
    }

    .mini-row>b {
        display: none
    }

    .footer {
        padding-inline: 16px
    }

    .footer-links {
        grid-template-columns: 1fr 1fr
    }

    .mailbox-table-row {
        grid-template-columns: 1fr 1fr
    }

    .mailbox-table-row>div {
        grid-column: 1/-1
    }

    .head-actions {
        width: 100%
    }

    .head-actions .button {
        flex: 1
    }

    .activity-card {
        align-items: flex-start;
        gap: 25px;
        flex-direction: column
    }

    .article-shell {
        margin-top: 30px;
        padding: 0 16px
    }

    .docs-nav {
        grid-template-columns: 1fr 1fr
    }

    .article>h1 {
        font-size: 2.8rem
    }

    .featured-post {
        padding: 25px
    }

    .feature-arrow {
        display: none
    }
}

.pricing-page {
    min-height: 70vh
}

.pricing-heading {
    max-width: 760px;
    margin-inline: auto
}

.pricing-heading h1 {
    font-size: clamp(3rem, 6vw, 5.5rem);
    line-height: .95;
    letter-spacing: -.055em;
    margin: 10px 0 20px
}

.launch-pricing {
    grid-template-columns: 1fr 1fr;
    max-width: 820px;
    margin: 45px auto 25px
}

.launch-pricing .price {
    display: flex;
    flex-direction: column
}

.launch-pricing .price h3 {
    font-size: 3rem;
    margin: 12px 0
}

.launch-pricing .price p {
    color: var(--color-muted);
    min-height: 52px
}

.launch-pricing .price .button,
.launch-pricing .price form {
    margin-top: auto
}

.launch-pricing .price.featured {
    outline: 0;
    border-color: #397952;
    background: #14231a
}

@media(max-width:760px) {
    .launch-pricing {
        grid-template-columns: 1fr
    }
}

/* v0.7 launch polish */
.pricing-preview .section-heading {
    text-align: center;
    margin-inline: auto
}

.simple-pricing {
    margin-inline: auto;
    width: 100%
}

.pricing-note {
    text-align: center
}

.domain-list-card {
    overflow: hidden
}

@media(max-width:980px) {
    .dns-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }

    .dns-table-row,
    .dns-table-head {
        min-width: 720px
    }

    .content {
        width: 100%
    }
}

@media(max-width:760px) {
    .hero-copy h1 {
        font-size: clamp(2.7rem, 14vw, 3.4rem)
    }

    .mail-flow {
        padding: 14px
    }

    .flow-step {
        grid-template-columns: auto 1fr
    }

    .flow-check {
        grid-column: 2
    }

    .simple-pricing {
        max-width: 520px
    }

    .page-head .head-actions {
        display: flex
    }

    .dns-table {
        margin-inline: -4px
    }

    .final-cta .button {
        width: 100%
    }

    .code-stage pre {
        overflow-x: auto
    }

    .topbar {
        overflow: hidden
    }

    .topbar nav {
        flex-wrap: nowrap
    }

    .content {
        overflow: hidden
    }
}

/* Billing */
.billing-layout {
    max-width: 760px;
    margin-top: var(--space-md)
}

.billing-current h2 {
    font-size: 2rem;
    margin: 8px 0 2px
}

.billing-plan-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: 18px
}

.billing-plan-head p {
    margin: 0
}

.billing-status {
    background: #111512;
    color: var(--color-success)
}

.billing-price {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin: 8px 0
}

.billing-price strong {
    font-size: 1.8rem
}

.billing-price span {
    color: var(--color-muted)
}

.billing-usage {
    padding: 16px 0;
    margin: 18px 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border)
}

.billing-usage>div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px
}

.usage-track {
    height: 8px;
    background: var(--color-bg);
    border-radius: 99px;
    overflow: hidden
}

.usage-track span {
    display: block;
    height: 100%;
    background: var(--color-success);
    border-radius: inherit
}

.billing-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-top: 20px
}

.billing-action h3,
.billing-action p {
    margin: 0
}

.billing-action form {
    min-width: 235px
}

.billing-detail {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 20px
}

.billing-detail span {
    color: var(--color-muted)
}

.billing-help {
    font-size: .9rem;
    margin-bottom: 0
}

@media(max-width:760px) {

    .billing-plan-head,
    .billing-action,
    .billing-detail {
        align-items: stretch;
        flex-direction: column
    }

    .billing-action form {
        min-width: 0
    }

    .billing-usage>div:first-child {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px
    }
}