@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/inter-400.ttf") format("truetype");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/fonts/inter-600.ttf") format("truetype");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/assets/fonts/inter-700.ttf") format("truetype");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("/assets/fonts/inter-800.ttf") format("truetype");
}

:root {
    --sc-teal: #0f766e;
    --sc-ink: #0f172a;
    --sc-muted: #475569;
    --sc-line: #dbe5e8;
    --sc-soft: #f7faf9;
}

html {
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

body {
    color: var(--sc-ink);
    background: #fff;
}

* {
    letter-spacing: 0 !important;
}

.rounded,
.rounded-md,
.rounded-lg,
.rounded-xl,
.rounded-2xl,
.rounded-3xl,
.rounded-full,
.rounded-ui {
    border-radius: 0 !important;
}

.shadow,
.shadow-sm,
.shadow-md,
.shadow-lg,
.shadow-xl,
.shadow-2xl {
    box-shadow: none !important;
}

.bg-soft,
.bg-mist {
    background-color: var(--sc-soft) !important;
}

.bg-cta {
    background-color: var(--sc-teal) !important;
}

.text-cta {
    color: var(--sc-teal) !important;
}

.border-cta {
    border-color: var(--sc-teal) !important;
}

.text-ink {
    color: var(--sc-ink) !important;
}

.gc-shell,
.sc-shell {
    width: min(100% - 32px, 1180px);
    margin-inline: auto;
}

.sc-header {
    border-bottom: 1px solid var(--sc-line);
    background: rgba(255, 255, 255, .96);
}

.sc-header-inner {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.sc-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    font-size: 21px;
}

.sc-logo img {
    width: 38px;
    height: 38px;
}

.sc-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    color: var(--sc-muted);
    font-size: 14px;
    font-weight: 700;
}

.sc-nav a[aria-current="page"] {
    color: var(--sc-teal);
}

.sc-section {
    padding: 56px 0;
}

.sc-card,
.sc-panel {
    border: 1px solid var(--sc-line);
    background: #fff;
}

.sc-card {
    padding: 24px;
}

.sc-panel {
    padding: 28px;
}

.sc-kicker {
    color: var(--sc-teal);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.sc-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr);
    gap: 42px;
    align-items: start;
}

.sc-product-visual {
    border: 1px solid var(--sc-line);
    background: #fff;
    min-height: 460px;
    padding: 24px;
    display: grid;
    gap: 16px;
}

.sc-phone {
    width: min(260px, 100%);
    border: 8px solid #0f172a;
    margin: 0 auto;
    padding: 18px;
    background: #fff;
}

.sc-phone-header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
    color: var(--sc-muted);
}

.sc-notification {
    margin-top: 22px;
    border: 1px solid var(--sc-line);
    padding: 16px;
}

.sc-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.sc-flow span {
    border: 1px solid var(--sc-line);
    padding: 10px;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
}

.marketing-phone-status--valid {
    color: #047857;
}

.marketing-phone-status--invalid {
    color: #b91c1c;
}

.marketing-phone-status--neutral {
    color: #64748b;
}

dialog::backdrop {
    background: rgba(15, 23, 42, .35);
}

@media (max-width: 860px) {
    .sc-hero-grid {
        grid-template-columns: 1fr;
    }

    .sc-nav {
        display: none;
    }
}