:root {
  color-scheme: light;
  --ink: #1d1d1f;
  --text: #333338;
  --muted: #73737a;
  --light-muted: #98989f;
  --line: #e4e4e8;
  --line-strong: #d3d3d8;
  --ground: #f5f5f7;
  --white: #fff;
  --blue: #0071e3;
  --blue-hover: #0064ca;
  --blue-soft: #edf5ff;
  --green: #248a3d;
  --green-soft: #edf8ef;
  --amber: #946200;
  --amber-soft: #fff5dd;
  --red: #c43d32;
  --red-soft: #fff0ee;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  background: var(--ground);
  color: var(--ink);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--ground); }
button, input, select { font: inherit; }
button { color: inherit; }
a { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(0,113,227,.28); outline-offset: 2px; }
::selection { background: rgba(0,113,227,.16); }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.wordmark { text-decoration: none; font-weight: 750; font-size: 17px; letter-spacing: -.065em; color: var(--ink); }
.loading { min-height: 100vh; display: grid; place-content: center; justify-items: center; color: var(--muted); gap: 8px; }
.loading .wordmark { font-size: 22px; }

/* Buttons and shared controls */
.button { border: 1px solid transparent; border-radius: 999px; min-height: 40px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease; white-space: nowrap; }
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: .6; cursor: wait; transform: none; }
.domain-prepare-modal .demo-toggle-row.is-disabled { opacity: .6; cursor: not-allowed; }
.domain-prepare-modal .switch input:disabled + span { background: #d7dce2; cursor: not-allowed; }
.button-primary { color: white; background: var(--blue); }
.button-primary:hover { background: var(--blue-hover); }
.button-quiet { background: var(--white); border-color: var(--line-strong); color: var(--ink); }
.button-quiet:hover { border-color: #a7a7af; background: #fafafa; }
.button-large { min-height: 48px; padding: 0 22px; font-size: 14px; }
.button-small { min-height: 32px; padding: 0 13px; font-size: 12px; }
.button-full { width: 100%; min-height: 48px; }
.text-button { padding: 4px 0; border: 0; background: none; color: var(--blue); font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none; }
.text-button:hover { text-decoration: underline; }
.danger-text { color: var(--red) !important; }
.icon-button { border: 0; border-radius: 50%; width: 30px; height: 30px; display: inline-grid; place-items: center; background: transparent; font-size: 21px; cursor: pointer; }
.icon-button:hover { background: var(--red-soft); }
.button-row, .table-actions { display: inline-flex; align-items: center; gap: 12px; }
.button-row { flex-wrap: wrap; }

/* Marketing */
.marketing-page { background: #fff; min-height: 100vh; }
.marketing-nav { min-height: 68px; padding: 0 clamp(22px,6vw,96px); display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid rgba(29,29,31,.07); background: rgba(255,255,255,.92); }
.marketing-nav nav { display: flex; align-items: center; gap: 30px; }
.marketing-nav nav a { text-decoration: none; color: #626269; font-size: 13px; transition: color .15s ease; }
.marketing-nav nav a:hover { color: var(--ink); }
.marketing-nav > div { display: flex; gap: 9px; }
.hero { min-height: 615px; padding: 90px clamp(22px,9vw,140px) 76px; display: grid; grid-template-columns: minmax(340px,.9fr) minmax(380px,1.1fr); gap: clamp(35px,6vw,95px); align-items: center; overflow: hidden; background: radial-gradient(ellipse at 76% 55%, #eaf3ff 0%, rgba(242,247,255,.8) 24%, rgba(255,255,255,0) 54%), #fff; }
.hero:not(.hero-with-slot) { grid-template-columns: minmax(350px,.85fr) minmax(430px,1.15fr); }
.hero-copy { max-width: 565px; position: relative; z-index: 2; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: #727279; font-size: 10px; font-weight: 700; letter-spacing: .105em; line-height: 1.3; }
.eyebrow-dot { width: 7px; height: 7px; background: var(--blue); border-radius: 50%; }
.hero h1 { max-width: 670px; margin: 18px 0 20px; font-size: clamp(44px,5.5vw,72px); line-height: .99; letter-spacing: -.065em; font-weight: 720; }
.hero-lede { max-width: 500px; margin: 0; color: #6b6b72; font-size: clamp(16px,1.4vw,19px); line-height: 1.55; letter-spacing: -.015em; }
.hero-actions { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.hero-note { margin-top: 23px; color: #78787e; display: flex; align-items: center; gap: 8px; font-size: 11px; }
.check-mark { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: #36844c; background: var(--green-soft); font-weight: 700; }
.hero-visual { min-width: 0; position: relative; display: grid; place-items: center; min-height: 405px; }
.visual-glow { position: absolute; width: 72%; height: 72%; background: #d9eaff; border-radius: 50%; filter: blur(52px); opacity: .7; }
.app-preview { width: min(100%,610px); position: relative; border-radius: 18px; background: white; box-shadow: 0 28px 70px rgba(38,76,122,.14), 0 1px 4px rgba(0,0,0,.08); border: 1px solid rgba(0,0,0,.07); transform: perspective(1100px) rotateY(-5deg) rotateX(2deg); overflow: hidden; }
.preview-top { min-height: 42px; display: flex; align-items: center; gap: 11px; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid #ededf0; color: #9a9aa1; font-size: 9px; }
.preview-lights { display: flex; gap: 4px; }
.preview-lights i { width: 6px; height: 6px; border-radius: 50%; background: #d9d9de; }
.preview-avatar { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: #536f91; background: #eaf2fb; font-size: 9px; }
.preview-body { min-height: 308px; display: grid; grid-template-columns: 122px 1fr; }
.preview-nav { padding: 17px 9px; border-right: 1px solid #f0f0f2; display: flex; flex-direction: column; gap: 6px; color: #898990; font-size: 9px; }
.preview-nav span { padding: 7px 8px; border-radius: 6px; }
.preview-nav .preview-active { background: #f0f6ff; color: #126fcb; font-weight: 600; }
.preview-main { padding: 27px 24px; }
.preview-main > small { font-size: 8px; color: #9a9aa1; letter-spacing: .1em; font-weight: 700; }
.preview-main h3 { font-size: 24px; margin: 8px 0 4px; letter-spacing: -.05em; }
.preview-main > p { margin: 0; font-size: 10px; color: #8b8b91; }
.preview-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 20px; }
.preview-cards > div { padding: 11px 12px; border-radius: 9px; border: 1px solid #ededf0; display: grid; gap: 5px; }
.preview-cards span { color: #9999a0; font-weight: 700; letter-spacing: .08em; font-size: 7px; }
.preview-cards b { color: #25252a; font-size: 19px; }
.preview-cards small { color: #9999a0; font-size: 8px; }
.preview-row { display: flex; gap: 8px; align-items: center; border-top: 1px solid #f0f0f2; margin-top: 15px; padding: 11px 1px 0; color: #4b4b52; font-size: 9px; }
.preview-row i { width: 7px; height: 7px; border-radius: 50%; background: #e7b84a; }
.preview-row em { margin-left: auto; color: #8f680b; font-size: 8px; font-style: normal; }
.preview-row.preview-muted { margin-top: 0; padding-top: 8px; color: #888890; }
.preview-muted i { background: #51a667; }
.preview-muted em { color: #73737a; }
.benefit-strip { display: flex; justify-content: center; gap: clamp(34px,8vw,130px); padding: 25px 22px; border-top: 1px solid #f0f0f2; border-bottom: 1px solid #f0f0f2; background: #fbfbfc; }
.benefit-strip > div { display: flex; flex-direction: column; gap: 4px; }
.benefit-strip b { font-size: 12px; font-weight: 650; }
.benefit-strip span { color: #898990; font-size: 11px; }
.how-section, .plans-section { max-width: 1100px; margin: 0 auto; padding: 100px 28px; }
.section-intro { max-width: 560px; margin-bottom: 42px; }
.section-intro h2 { margin: 12px 0; font-size: clamp(32px,4vw,48px); line-height: 1.05; letter-spacing: -.06em; }
.section-intro p { color: #77777e; font-size: 15px; line-height: 1.55; margin: 0; }
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; }
.steps article { padding-top: 20px; border-top: 1px solid var(--line); }
.step-number { color: var(--blue); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.steps h3 { margin: 15px 0 9px; font-size: 18px; letter-spacing: -.03em; }
.steps p { margin: 0; max-width: 280px; color: #77777e; font-size: 13px; line-height: 1.55; }
.steps code { font-size: 11px; background: #f3f3f5; padding: 2px 4px; border-radius: 4px; }
.plans-section { max-width: none; padding-left: max(28px,calc((100vw - 1044px)/2)); padding-right: max(28px,calc((100vw - 1044px)/2)); background: #f7f7f9; }
.public-plans { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 12px; }
.public-plan { min-height: 88px; background: white; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.public-plan > div { display: grid; gap: 6px; }
.plan-name { font-weight: 650; font-size: 14px; }
.plan-interval { color: #828289; font-size: 11px; }
.public-plan strong { font-size: 16px; white-space: nowrap; }
.public-plan small { color: #8a8a91; font-weight: 400; font-size: 10px; }
.closing-cta { max-width: 1100px; margin: 0 auto; padding: 75px 28px; display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.closing-cta h2 { margin: 12px 0 8px; font-size: 31px; letter-spacing: -.055em; }
.closing-cta p { margin: 0; color: #77777e; max-width: 600px; font-size: 13px; line-height: 1.5; }
.marketing-footer { border-top: 1px solid #ededf0; padding: 24px clamp(22px,6vw,96px); display: flex; align-items: center; gap: 25px; color: #898990; font-size: 10px; }
.marketing-footer .wordmark { color: #49494f; font-size: 14px; }
.marketing-footer span:last-child { margin-left: auto; }
.ad-slot { min-height: 350px; display: grid; place-items: center; }
.ad-slot-inner { width: min(100%,390px); aspect-ratio: 1.12; padding: 18px; border: 1px dashed #bbc8d8; border-radius: 18px; background: rgba(255,255,255,.75); display: grid; place-items: center; align-content: center; gap: 14px; color: #808895; text-align: center; }
.slot-tag { font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.ad-mini-art { width: 190px; height: 185px; position: relative; display: grid; place-items: center; }
.art-orbit { position: absolute; width: 166px; height: 166px; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #f5fbff, #d8e9ff 56%, #eaf3ff 57%); border: 1px solid #d3e3f5; }
.art-card { z-index: 1; width: 144px; height: 152px; padding: 14px; border-radius: 12px; background: white; box-shadow: 0 10px 22px rgba(47,91,143,.15); display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.art-card .wordmark { font-size: 11px; }
.art-card i { margin-top: 13px; font-size: 9px; color: var(--blue); font-style: normal; }
.art-card b { margin-top: 5px; font-size: 17px; line-height: 1.03; letter-spacing: -.045em; }
.art-card small { margin-top: auto; color: #8d8d95; font-size: 7px; }
.ad-slot-inner > p { margin: 0; font-size: 10px; }

/* Sign in and account */
.auth-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; background: radial-gradient(ellipse at 50% 10%, #eaf3ff 0, transparent 48%), #f5f5f7; padding: 36px 18px 55px; }
.auth-page > .wordmark { align-self: flex-start; margin-left: max(0px,calc((100vw - 980px)/2)); font-size: 18px; }
.auth-card { width: min(100%,420px); margin: auto; padding: 38px; border: 1px solid rgba(0,0,0,.06); border-radius: 20px; background: #fff; box-shadow: 0 16px 44px rgba(0,0,0,.05); }
.back-link { display: block; margin: 0 0 29px; padding: 0; border: 0; background: none; color: #75757c; font-size: 11px; cursor: pointer; }
.auth-card h1 { margin: 11px 0 8px; font-size: 29px; line-height: 1.08; letter-spacing: -.055em; }
.auth-card > p { margin: 0 0 24px; color: #77777e; font-size: 13px; line-height: 1.5; }
.stack-form { display: grid; gap: 15px; }
.stack-form label, .settings-form label, .inline-form label, .filter-row label { display: grid; gap: 7px; font-size: 11px; color: #515158; font-weight: 600; }
.stack-form input, .stack-form select, .settings-form input, .inline-form input, .search-form input, .filter-row input, .table-input, .rate-form input { min-height: 42px; width: 100%; padding: 0 12px; border: 1px solid #d7d7dc; border-radius: 9px; background: #fff; color: var(--ink); outline: none; font-size: 12px; }
.stack-form input:focus, .settings-form input:focus, .inline-form input:focus, .search-form input:focus, .table-input:focus { border-color: #7eb2ec; box-shadow: 0 0 0 3px rgba(0,113,227,.12); }
.auth-card .button-full { margin-top: 5px; }
.auth-switch { margin-top: 24px; text-align: center; color: #77777e; font-size: 11px; }
.auth-switch button { padding: 0; border: 0; background: none; color: var(--blue); font-size: inherit; font-weight: 600; cursor: pointer; }
.form-footnote { margin: 0; color: #919199; text-align: center; font-size: 10px; }

/* Workspace layout */
.app-shell { min-height: 100vh; background: var(--ground); }
.topbar { height: 58px; position: sticky; top: 0; z-index: 12; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; background: rgba(255,255,255,.91); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.topbar .wordmark { font-size: 16px; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.user-email { color: #717178; font-size: 11px; }
.avatar { width: 29px; height: 29px; border: 0; border-radius: 50%; background: #eaf2fb; color: #236ab1; font-size: 11px; font-weight: 700; }
.workspace { display: grid; grid-template-columns: 224px minmax(0,1fr); min-height: calc(100vh - 58px); }
.sidebar { position: sticky; top: 58px; height: calc(100vh - 58px); padding: 26px 15px 15px; border-right: 1px solid var(--line); background: #fbfbfc; display: flex; flex-direction: column; }
.side-label { margin: 0 9px 10px; color: #9a9aa0; font-size: 9px; letter-spacing: .12em; font-weight: 700; }
.admin-label { margin-top: 25px; }
.nav-item { width: 100%; min-height: 37px; display: flex; align-items: center; gap: 11px; padding: 0 10px; margin: 1px 0; border: 0; border-radius: 8px; background: transparent; color: #66666e; text-align: left; font-size: 12px; cursor: pointer; transition: background .15s ease,color .15s ease; }
.nav-item svg { width: 16px; height: 16px; color: #8d8d94; }
.nav-item:hover { background: #f0f0f3; color: var(--ink); }
.nav-item.selected { color: #0969c2; background: #eaf3ff; font-weight: 600; }
.nav-item.selected svg { color: #1774cf; }
.sidebar-bottom { margin-top: auto; padding: 14px 9px 5px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 7px; color: #898990; font-size: 10px; }
.sidebar-bottom .text-button { margin-left: auto; font-size: 10px; }
.small-dot { width: 7px; height: 7px; flex: 0 0 7px; display: inline-block; border-radius: 50%; background: #e3ae39; }
.dot-green, .verified-label .small-dot { background: #36a153; }
.main-content { min-width: 0; width: min(100%,1280px); padding: 39px clamp(22px,4vw,58px) 70px; margin: 0 auto; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.page-heading .eyebrow { font-size: 9px; }
.page-heading h1 { margin: 8px 0 7px; font-size: clamp(26px,3vw,34px); font-weight: 680; letter-spacing: -.055em; line-height: 1.07; }
.page-heading p { margin: 0; color: #7b7b82; font-size: 12px; line-height: 1.45; }
.heading-action { flex: 0 0 auto; }
.notice { margin: 0 0 18px; padding: 12px 15px; border: 1px solid #d8e6f6; border-radius: 10px; background: #f3f8ff; color: #375d82; font-size: 11px; line-height: 1.45; }
.notice.success { color: #367447; background: #f0f8f1; border-color: #d9ebdd; }
.notice.error { color: #95453e; background: #fff5f3; border-color: #f2d8d5; }
.stat-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 0 0 20px; }
.stat-card { min-width: 0; padding: 16px 17px; border: 1px solid var(--line); border-radius: 13px; background: white; display: grid; align-content: start; gap: 7px; }
.stat-card > span { color: #8b8b92; font-size: 8px; letter-spacing: .1em; font-weight: 700; }
.stat-card > strong { min-height: 28px; font-size: 23px; font-weight: 660; letter-spacing: -.055em; }
.stat-card > small { color: #898990; font-size: 10px; line-height: 1.3; }
.panel { margin-bottom: 17px; padding: 19px; border: 1px solid var(--line); border-radius: 15px; background: white; min-width: 0; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.panel-heading h2 { margin: 0; font-size: 14px; letter-spacing: -.025em; font-weight: 640; }
.panel-heading p { margin: 5px 0 0; color: #85858c; font-size: 10px; line-height: 1.4; }
.domain-list { display: grid; gap: 11px; }
.domain-card { padding: 16px; border: 1px solid #ebebee; border-radius: 12px; background: #fff; }
.domain-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.domain-title { min-width: 0; display: flex; align-items: center; gap: 10px; }
.domain-title h3 { margin: 0; overflow-wrap: anywhere; font-size: 13px; font-weight: 650; letter-spacing: -.02em; }
.domain-subtitle { display: block; margin-top: 4px; color: #898990; font-size: 10px; }
.domain-icon { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 10px; background: #f0f6ff; color: #347ec6; }
.domain-icon svg { width: 16px; height: 16px; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; background: #f2f2f4; color: #66666e; font-size: 9px; line-height: 1; white-space: nowrap; }
.status-pill > span { width: 5px; height: 5px; border-radius: 50%; background: #8e8e95; }
.status-pill.active, .status-pill.issued, .status-pill.succeeded { color: #2c7741; background: var(--green-soft); }
.status-pill.active > span, .status-pill.issued > span, .status-pill.succeeded > span { background: #3b9b53; }
.status-pill.demo, .status-pill.pending_payment, .status-pill.pending, .status-pill.processing { color: #8b6515; background: var(--amber-soft); }
.status-pill.demo > span, .status-pill.pending_payment > span, .status-pill.pending > span, .status-pill.processing > span { background: #d5a02b; }
.status-pill.payment_failed, .status-pill.cancelled, .status-pill.disabled, .status-pill.failed, .status-pill.expired { color: #a3433b; background: var(--red-soft); }
.status-pill.payment_failed > span, .status-pill.cancelled > span, .status-pill.disabled > span, .status-pill.failed > span, .status-pill.expired > span { background: #d85e53; }
.dns-record { margin: 14px 0 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.dns-record > div { min-width: 0; padding: 9px 10px; background: #f8f8fa; border-radius: 8px; display: grid; gap: 5px; }
.dns-record span { color: #94949b; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; font-weight: 650; }
.dns-record code, code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.dns-record code { overflow-wrap: anywhere; color: #44444a; font-size: 10px; }
.domain-card-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: #8b8b92; font-size: 9px; }
.verified-label { display: inline-flex; align-items: center; gap: 5px; color: #3c8550; font-size: 10px; }
.domain-compact { padding: 12px; }
.domain-compact .dns-record { display: none; }
.domain-compact .domain-card-bottom { margin-top: 10px; }
.domain-compact .domain-title h3 { font-size: 12px; }
.two-column { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; align-items: start; }
.two-column .panel { margin: 0; }
.help-card { display: flex; align-items: flex-start; gap: 11px; }
.help-symbol { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; background: #eff5fd; color: #417db9; font-size: 18px; }
.help-card strong { font-size: 11px; }
.help-card p { margin: 5px 0 7px; color: #7e7e85; font-size: 10px; line-height: 1.45; }
.quiet-callout { margin-top: 20px; padding: 16px 17px; border-left: 2px solid #9cc6f3; background: #f8fbff; }
.quiet-callout strong { font-size: 11px; }
.quiet-callout p { margin: 5px 0 0; max-width: 760px; color: #787880; font-size: 10px; line-height: 1.5; }
.empty-state { display: grid; justify-items: center; padding: 26px 18px 30px; text-align: center; }
.empty-glyph { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #f1f6fd; color: #4384c3; font-size: 17px; }
.empty-state h3 { margin: 12px 0 5px; font-size: 13px; letter-spacing: -.02em; }
.empty-state p { max-width: 390px; margin: 0 0 16px; color: #87878e; font-size: 10px; line-height: 1.45; }

/* Timeline and reports */
.timeline { position: relative; display: grid; }
.timeline-item { position: relative; display: grid; grid-template-columns: 14px minmax(0,1fr); gap: 10px; padding-bottom: 18px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item:not(:last-child)::before { content: ''; position: absolute; top: 12px; bottom: 0; left: 5px; width: 1px; background: #e3e3e7; }
.timeline-pin { position: relative; z-index: 1; width: 11px; height: 11px; margin-top: 3px; border: 2px solid #b8b8bf; border-radius: 50%; background: white; }
.timeline-pin.pin-blue { border-color: var(--blue); background: #e9f3ff; }
.timeline-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.timeline-top strong { font-size: 10px; font-weight: 640; }
.timeline-top time { flex: 0 0 auto; color: #94949a; font-size: 9px; }
.timeline-item p { margin: 4px 0 0; color: #7d7d84; font-size: 10px; line-height: 1.45; }
.timeline-domain { display: inline-block; margin-top: 5px; color: #6c6c73; font-size: 9px; font-family: ui-monospace,monospace; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
th { padding: 9px 11px; border-bottom: 1px solid #ededf0; color: #9999a0; font-size: 8px; letter-spacing: .08em; font-weight: 700; }
td { padding: 11px; border-bottom: 1px solid #f0f0f2; color: #55555c; font-size: 10px; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
td strong { color: #34343a; font-weight: 620; }
.table-sub { display: block; margin-top: 4px; color: #96969d; font-size: 8px; font-weight: 400; }
.table-empty { padding: 25px; color: #888890; text-align: center; }
.copy-link { display: flex; gap: 10px; align-items: center; }
.copy-link code { min-width: 0; overflow-wrap: anywhere; flex: 1; padding: 11px 12px; border-radius: 8px; background: #f7f7f9; color: #55555d; font-size: 10px; }
.compact-stats { margin-top: 14px; }
.compact-stats .stat-card { min-height: 93px; }
.preference-row { display: flex; align-items: center; gap: 16px; }
.preference-row > div { flex: 1; }
.preference-row strong { font-size: 11px; }
.preference-row p { margin: 4px 0 0; color: #888890; font-size: 9px; }
.switch { position: relative; width: 39px; height: 23px; flex: 0 0 39px; display: inline-block; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: #d6d6da; cursor: pointer; transition: background .18s ease; }
.switch span::before { content: ''; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .18s ease; }
.switch input:checked + span { background: #35a34f; }
.switch input:checked + span::before { transform: translateX(16px); }
.switch input:focus-visible + span { outline: 3px solid rgba(0,113,227,.3); outline-offset: 2px; }
.compact-switch { transform: scale(.83); transform-origin: left center; }
.account-line { min-height: 36px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #f0f0f2; color: #818188; font-size: 10px; }
.account-line:first-child { border-top: 0; }
.account-line strong { color: #414147; font-size: 10px; }
.paddle-status { display: flex; align-items: center; gap: 12px; margin-bottom: 17px; padding: 12px 13px; border: 1px solid #ececf0; border-radius: 10px; background: #fafafd; }
.paddle-status.connected { background: #f3faf4; border-color: #dceee0; }
.paddle-mark { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; background: #635bff; color: white; font-weight: 750; font-style: italic; }
.paddle-status strong { font-size: 11px; }
.paddle-status p { margin: 4px 0 0; color: #85858c; font-size: 9px; }
.inline-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
.inline-form input { min-height: 36px; font-size: 10px; }
.webhook-row { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 1px solid #f0f0f2; color: #898990; font-size: 9px; }
.webhook-row code { color: #55555d; font-size: 9px; overflow-wrap: anywhere; }
.field-note { margin: 10px 0 0; color: #94949b; font-size: 9px; line-height: 1.45; }
.price-table .table-input { min-height: 31px; padding: 0 8px; border-radius: 7px; font-size: 10px; }
.price-table .currency-input { width: 58px; text-transform: lowercase; }
.price-table code { color: #929299; font-size: 8px; }
.form-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 15px; color: #919199; font-size: 9px; }
.rate-form { display: inline-flex; align-items: center; gap: 5px; }
.rate-form input { width: 64px; min-height: 29px; padding: 0 6px; border-radius: 6px; font-size: 10px; }
.rate-form span { color: #85858c; font-size: 9px; }
.inline-select { min-height: 30px; max-width: 220px; padding: 0 7px; border: 1px solid #e0e0e5; border-radius: 7px; background: white; color: #56565d; font-size: 9px; }
.search-form { display: flex; width: min(100%,420px); gap: 8px; margin-bottom: 15px; }
.search-form input { min-height: 34px; font-size: 10px; }
.search-form .button { flex: 0 0 auto; }
.settings-form { display: grid; gap: 15px; }
.settings-form label { max-width: 600px; }
.settings-form input { min-height: 37px; font-size: 10px; }
.settings-form small { color: #929299; font-size: 9px; font-weight: 400; line-height: 1.4; }
.settings-form .button { justify-self: start; margin-top: 2px; }
.checkbox-line { display: flex !important; align-items: center; gap: 9px !important; max-width: none !important; color: #55555c; }
.checkbox-line input { width: 15px; height: 15px; min-height: 0; accent-color: var(--blue); }
.settings-divider { height: 1px; margin: 4px 0 1px; background: #ededf0; }
.form-section-title { font-weight: 650; font-size: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.callout-line { display: flex; align-items: flex-start; gap: 10px; }
.callout-line strong { font-size: 10px; }
.callout-line p { margin: 5px 0 0; color: #87878e; font-size: 9px; }
.admin-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 17px; }
.admin-stats .stat-card { min-height: 94px; padding: 13px 14px; }
.admin-stats .stat-card > strong { font-size: 21px; }
.report-stats { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; margin-bottom: 16px; }
.report-stats .stat-card { min-height: 92px; padding: 13px; }
.report-stats .stat-card > strong { font-size: 18px; overflow: hidden; text-overflow: ellipsis; }
.filter-row { display: flex; align-items: end; gap: 9px; margin: -10px 0 15px; }
.filter-row label { width: 145px; }
.filter-row input { min-height: 34px; font-size: 10px; }
.report-bars { display: grid; gap: 13px; }
.report-bar-row { display: grid; grid-template-columns: minmax(80px,1fr) 2fr auto; align-items: center; gap: 10px; font-size: 9px; color: #76767d; }
.report-bar-row > strong { font-size: 9px; color: #494950; }
.report-bar-row > small { grid-column: 3; margin-top: -7px; color: #a0a0a6; font-size: 8px; text-align: right; }
progress { appearance: none; width: 100%; height: 6px; border: 0; overflow: hidden; border-radius: 99px; background: #ebedf1; }
progress::-webkit-progress-bar { background: #ebedf1; border-radius: 99px; }
progress::-webkit-progress-value { background: #5b9de4; border-radius: 99px; }
progress::-moz-progress-bar { background: #5b9de4; border-radius: 99px; }

/* Modal */
.modal-backdrop { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; overflow-y: auto; padding: 24px; background: rgba(26,31,38,.29); backdrop-filter: blur(5px); }
.modal-card { position: relative; width: min(100%,450px); max-height: calc(100vh - 48px); overflow-y: auto; padding: 30px; border: 1px solid rgba(0,0,0,.06); border-radius: 18px; background: #fff; box-shadow: 0 22px 65px rgba(0,0,0,.18); }
.modal-card h2 { margin: 10px 0 7px; font-size: 26px; letter-spacing: -.055em; }
.modal-card > p { margin: 0 0 21px; color: #7d7d84; font-size: 11px; line-height: 1.5; }
.modal-close { position: absolute; top: 13px; right: 14px; width: 29px; height: 29px; border: 0; border-radius: 50%; background: #f1f1f3; color: #6d6d74; font-size: 19px; cursor: pointer; }
.modal-close:hover { background: #e8e8eb; }
.modal-card > .form-footnote { display: block; margin-top: 13px; }
.plan-modal { width: min(100%,480px); }
.modal-plans { display: grid; gap: 9px; margin: 17px 0; }
.plan-choice { display: grid; grid-template-columns: 1fr auto; gap: 5px 14px; padding: 13px 14px; border: 1px solid #e2e2e6; border-radius: 11px; background: white; text-align: left; cursor: pointer; }
.plan-choice:hover { border-color: #78ace3; background: #f8fbff; }
.plan-choice span { color: #77777e; font-size: 10px; }
.plan-choice strong { grid-column: 2; grid-row: 1/3; align-self: center; font-size: 17px; }
.plan-choice small { color: #9a9aa0; font-size: 9px; }

@media (max-width: 1100px) {
  .admin-stats { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .report-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .hero { padding-left: 6vw; padding-right: 6vw; }
}
@media (max-width: 820px) {
  .hero, .hero:not(.hero-with-slot) { grid-template-columns: 1fr; padding-top: 70px; text-align: center; }
  .hero-copy { max-width: 650px; margin: 0 auto; }
  .hero .eyebrow, .hero-note { justify-content: center; }
  .hero-actions { justify-content: center; }
  .hero-visual { min-height: 320px; }
  .app-preview { transform: none; }
  .benefit-strip { gap: 25px; }
  .workspace { grid-template-columns: 64px minmax(0,1fr); }
  .sidebar { padding: 19px 8px 12px; align-items: center; }
  .side-label { display: none; }
  .admin-label { display: none; }
  .nav-item { width: 42px; justify-content: center; padding: 0; }
  .nav-item span { position: absolute; left: -10000px; }
  .sidebar-bottom { width: 100%; justify-content: center; padding: 12px 0 4px; }
  .sidebar-bottom > span:not(.small-dot), .sidebar-bottom .text-button { position: absolute; left: -10000px; }
  .main-content { padding: 30px 22px 55px; }
}
@media (max-width: 620px) {
  .marketing-nav { height: 60px; padding: 0 17px; }
  .marketing-nav nav { display: none; }
  .marketing-nav > div { gap: 3px; }
  .marketing-nav .button { min-height: 34px; padding: 0 12px; font-size: 10px; }
  .hero, .hero:not(.hero-with-slot) { min-height: 0; padding: 65px 22px 45px; gap: 30px; }
  .hero h1 { font-size: clamp(40px,12vw,55px); }
  .hero-lede { font-size: 15px; }
  .hero-actions { gap: 8px; }
  .hero-actions .button { width: 100%; }
  .hero-visual { min-height: 255px; margin: 0 -8px; }
  .app-preview { border-radius: 12px; }
  .preview-body { grid-template-columns: 75px 1fr; min-height: 250px; }
  .preview-nav { font-size: 7px; padding: 10px 5px; }
  .preview-main { padding: 18px 13px; }
  .preview-main h3 { font-size: 18px; }
  .preview-cards { margin-top: 13px; }
  .preview-cards > div { padding: 8px; }
  .benefit-strip { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 22px; }
  .benefit-strip > div { display: flex; flex-direction: row; align-items: baseline; gap: 9px; }
  .how-section, .plans-section { padding: 62px 22px; }
  .steps { grid-template-columns: 1fr; gap: 22px; }
  .steps article { padding-top: 14px; }
  .steps h3 { margin: 10px 0 5px; }
  .closing-cta { display: grid; padding: 55px 22px; }
  .closing-cta .button { justify-self: start; }
  .marketing-footer { flex-wrap: wrap; gap: 8px 16px; padding: 20px 22px; }
  .marketing-footer span:last-child { margin-left: 0; width: 100%; }
  .ad-slot-inner { aspect-ratio: 1.25; }
  .topbar { height: 52px; padding: 0 15px; }
  .workspace { min-height: calc(100vh - 52px); grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 15; top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: 58px; padding: 5px 7px; border: 0; border-top: 1px solid var(--line); background: rgba(255,255,255,.97); backdrop-filter: blur(16px); flex-direction: row; justify-content: flex-start; overflow-x: auto; }
  .nav-item { flex: 0 0 43px; height: 42px; }
  .admin-label, .side-label, .sidebar-bottom { display: none; }
  .main-content { width: 100%; padding: 25px 15px 85px; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 14px; margin-bottom: 20px; }
  .page-heading h1 { font-size: 29px; }
  .heading-action { width: 100%; }
  .heading-action .button { width: 100%; }
  .stat-grid { gap: 8px; }
  .stat-card { padding: 12px 11px; }
  .stat-card > span { font-size: 7px; }
  .stat-card > strong { font-size: 19px; }
  .stat-card > small { font-size: 8px; }
  .panel { padding: 15px 12px; border-radius: 13px; }
  .two-column { grid-template-columns: 1fr; gap: 12px; }
  .dns-record { grid-template-columns: 1fr; }
  .domain-card { padding: 13px 11px; }
  .domain-card-bottom { align-items: flex-start; flex-direction: column; }
  .domain-compact .domain-card-bottom { align-items: flex-start; }
  .domain-compact .button-row { gap: 8px; }
  .admin-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .report-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .report-stats .stat-card { min-height: 81px; }
  .form-grid { grid-template-columns: 1fr; }
  .inline-form { grid-template-columns: 1fr; }
  .inline-form .button { justify-self: start; }
  .form-actions { align-items: flex-start; flex-direction: column; }
  .filter-row { flex-wrap: wrap; }
  .filter-row label { width: calc(50% - 6px); }
  .filter-row .button { width: 100%; }
  .copy-link { align-items: stretch; flex-direction: column; }
  .preference-row { flex-wrap: wrap; }
  .preference-row > div { flex: 1 1 70%; }
  .preference-row .button { margin-left: auto; }
  .auth-card { padding: 27px 22px; }
  .auth-page > .wordmark { margin-left: 0; }
  .modal-backdrop { padding: 12px; }
  .modal-card { padding: 25px 19px; }
  .page-heading .heading-action { width: auto; }
  .webhook-row { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.api-access { margin: 18px 0 4px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fbfbfd; }
.api-access > summary { width: fit-content; color: var(--blue); font-weight: 600; cursor: pointer; }
.api-access > p { margin: 12px 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.api-access .account-line { gap: 18px; padding: 8px 0; }
.api-access code { overflow-wrap: anywhere; text-align: right; }
.config-block { margin: 12px 0; padding: 14px; overflow-x: auto; border-radius: 10px; background: #f0f0f5; color: var(--ink); font-size: 12px; line-height: 1.65; white-space: pre; }
.manual-update-form { display: flex; align-items: end; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.manual-update-form label { flex: 1; }
.manual-update-form input { margin-top: 7px; }
.manual-update-form button:disabled, .manual-update-form input:disabled { opacity: .48; cursor: not-allowed; }
@media (max-width: 620px) {
  .api-access { margin-inline: -3px; padding: 13px 11px; }
  .api-access .account-line { align-items: flex-start; flex-direction: column; gap: 3px; }
  .api-access code { text-align: left; }
  .manual-update-form { align-items: stretch; flex-direction: column; }
}

.user-email{text-decoration:none;color:inherit}.user-email:hover{color:var(--blue)}.pagination{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:20px}.pagination span{font-size:12px;color:var(--muted)}

/* Domain setup: a clear status, a permanent CNAME and a path to each client. */
.domain-live-status{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin:20px 0 0;padding:16px 18px;background:#f7f9fc;border:1px solid #e8edf3;border-radius:14px}
.domain-status-main{display:flex;align-items:flex-start;flex-direction:column;gap:9px;font-size:12px;color:#576272}.domain-live-status .status-pill{font-size:11px;padding:7px 10px;font-weight:600}
.status-pill.waiting_for_completion{color:#86621a;background:#fff3d8}.status-pill.waiting_for_completion>span{background:#cc9227}
.domain-status-meta{max-width:370px;text-align:right;font-size:11px;line-height:1.6;color:#667383}.domain-status-meta time{font-weight:600;color:#485567}.domain-status-meta p{margin:5px 0 0;color:#667383}
.domain-setup-guides{padding:20px 0 4px}.domain-setup-guides>div{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px}.domain-setup-guides strong{font-size:13px;font-weight:600}.domain-setup-guides>div>span,.domain-setup-guides>small{font-size:11px;color:var(--muted)}
.domain-setup-guides nav{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.domain-setup-guides nav a{display:inline-flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid #dde6f1;border-radius:9px;background:#fff;color:#0868c9;font-size:12px;font-weight:550;text-decoration:none;transition:background .15s,border-color .15s}.domain-setup-guides nav a:hover{background:#f1f7ff;border-color:#9ac4ee}.domain-setup-guides nav a:focus-visible{outline:3px solid #90bff0;outline-offset:2px}
.challenge-test{margin-top:20px;padding:22px;background:#fff;border:1px solid #e2e8f0;border-radius:14px}.challenge-test-heading{display:flex;gap:13px}.challenge-test-icon{display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:11px;background:#eef5ff;color:#0071e3}.challenge-test-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}.challenge-test .eyebrow{font-size:9px;letter-spacing:.1em;color:#6f8299}.challenge-test h4{font-size:16px;letter-spacing:-.025em;margin:5px 0 6px;font-weight:600}.challenge-test-heading p{font-size:12px;line-height:1.6;max-width:620px;margin:0;color:#697586}
.challenge-test .manual-update-form{display:block;margin-top:20px;padding:0;border:0}.challenge-test label{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#344254;font-weight:600}.challenge-test label span{font-weight:400;color:#8591a1;font-size:11px}.challenge-input-row{display:flex;gap:10px;align-items:center;margin-top:8px}.challenge-test .challenge-input-row input{flex:1;min-width:0;margin:0;padding:12px 14px;border:1px solid #dce3ec;border-radius:10px;background:#fbfcfe;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;letter-spacing:.01em}.challenge-input-row button{min-height:42px;white-space:nowrap}.challenge-help{font-size:11px;line-height:1.75;color:#6b7788;margin:10px 0 0}.challenge-help a{display:inline;color:#0068d0;text-decoration:underline;text-underline-offset:3px}.challenge-test .manual-update-form input:disabled{background:#f4f6f9;opacity:.7}.challenge-test .manual-update-form button:disabled{opacity:.5}
@media(max-width:760px){.domain-live-status{flex-direction:column;gap:12px}.domain-status-meta{text-align:left;max-width:none}.challenge-test{padding:16px}.challenge-input-row{flex-direction:column;align-items:stretch}.challenge-test .challenge-input-row input{width:100%}.domain-card-top{flex-wrap:wrap}.domain-setup-guides nav a{padding:9px 11px}.domain-setup-guides>div>span{line-height:1.6}}