@font-face { font-family:'Sora'; src:url('/assets/fonts/sora-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Sora'; src:url('/assets/fonts/sora-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Sora'; src:url('/assets/fonts/sora-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Source Serif 4'; src:url('/assets/fonts/source-serif-4-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Source Serif 4'; src:url('/assets/fonts/source-serif-4-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('/assets/fonts/jetbrains-mono-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('/assets/fonts/jetbrains-mono-500.woff2') format('woff2'); font-weight:500; font-display:swap; }

:root {
  --ink:      oklch(0.25 0.03 255);
  --body:     oklch(0.4  0.02 255);
  --faint:    oklch(0.45 0.02 255);
  --muted:    oklch(0.55 0.02 255);
  --line:     oklch(0.9  0.01 250);
  --accent:   oklch(0.55 0.16 250);
  --accent-h: oklch(0.48 0.16 250);
  --bg:       white;
  --dark:     oklch(0.27 0.05 255);
  --dark-body: oklch(0.75 0.03 255);
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--body);
       font-family:'Sora',system-ui,sans-serif; font-size:16px; line-height:1.6; }
h1,h2,h3 { font-family:'Source Serif 4',Georgia,serif; color:var(--ink);
           letter-spacing:-0.02em; margin:0 0 12px; }
h1 { font-size:clamp(30px,5vw,44px); font-weight:700; }
h2 { font-size:30px; font-weight:700; }
h3 { font-size:21px; font-weight:600; }
a { color:var(--accent); }
.wrap { max-width:1080px; margin:0 auto; padding:80px 24px; }
/* Long-form pages (migration, security, faq, status, privacy, terms) share
   one measure. /contact keeps its own narrower inline width because a form
   column is not the same measure as running prose. */
.wrap.narrow { max-width:760px; }

/* Standfirst paragraph under an h1. */
.lead { font-size:17px; color:var(--faint); line-height:1.6; max-width:60ch; margin:0 0 56px; }
/* Vertical run of prose sections. */
.stack { display:flex; flex-direction:column; gap:36px; margin-top:32px; }
.meta { font-size:14px; color:var(--muted); }
.fine-print { font-size:14px; color:var(--muted); margin-top:32px; }
.tight { margin:16px 0 0; }
.cta-row { margin-top:48px; }
/* Draft banner on the privacy and terms pages. */
.notice { font-size:14px; background:var(--dark); color:var(--dark-body);
          border-radius:8px; padding:14px 18px; }

header.site { border-bottom:1px solid var(--line); }
header.site .wrap { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; }
.brand { font-family:'Source Serif 4',serif; font-weight:700; color:var(--ink); text-decoration:none; }
.brand span { color:var(--muted); font-weight:400; }
.header-actions { display:flex; gap:12px; align-items:center; }
.header-actions .login { font-size:14px; color:var(--body); text-decoration:none; }
#site-nav { display:flex; gap:22px; }
#site-nav a { color:var(--body); text-decoration:none; font-size:14px; }
#site-nav a:hover, #site-nav a[aria-current="page"] { color:var(--ink); }
.btn { display:inline-block; padding:8px 16px; border-radius:8px;
       text-decoration:none; font-size:14px; font-weight:500; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-h); }
.btn-outline { color:var(--ink); border:1px solid var(--line); background:#fff; }
.btn-outline:hover { border-color:oklch(0.7 0.05 250); }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card { border:1px solid var(--line); border-radius:12px; padding:28px; background:#fff; }
.card.featured { border:2px solid var(--accent); position:relative; }
.badge { position:absolute; top:-11px; left:28px; background:var(--accent); color:#fff;
         font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
         padding:3px 10px; border-radius:99px; }
.price { font-size:36px; font-weight:700; letter-spacing:-0.02em; margin:12px 0 2px; color:var(--ink); }
.price span { font-size:15px; font-weight:400; color:var(--muted); }
.price-annual { font-size:13px; color:var(--muted); }
.plan-name { font-weight:600; }
.plan-features { font-size:14px; color:var(--faint); margin-top:16px; line-height:1.8; }
/* /pricing cards: equal-height columns with the CTA pinned to the bottom. */
.card.plan { display:flex; flex-direction:column; }
.card.plan .plan-features { flex:1; }
.plan-tagline { font-size:13px; color:var(--muted); margin-top:4px; }
.plan-cta { margin-top:24px; display:block; text-align:center; }
/* Boxed aside built on .card. */
.callout { margin-top:28px; }
.callout .callout-title { font-weight:600; margin-bottom:6px; }
.callout p { font-size:14px; line-height:1.7; color:var(--body); margin:0; }

footer.site { border-top:1px solid var(--line); }
footer.site .wrap { padding:40px 24px; font-size:14px; color:var(--muted);
                    display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.footer-links { display:flex; gap:18px; }

/* --- FAQ --- */
.faq-list { display:flex; flex-direction:column; }
.faq-item { padding:28px 0; border-top:1px solid var(--line); }
.faq-item:last-child { border-bottom:1px solid var(--line); }

/* --- security page DNS record block --- */
.dns-block { background:var(--dark); border-radius:10px; padding:20px 24px;
             font-family:'JetBrains Mono',monospace; font-size:13px; line-height:2;
             color:var(--dark-body); overflow-x:auto; }
.dns-block .rec { color:oklch(0.7 0.12 250); }

/* --- migration steps --- */
.step { display:grid; grid-template-columns:56px 1fr; gap:20px; padding-bottom:36px;
        border-left:2px solid var(--line); margin-left:19px; position:relative; }
.step:last-child { border-left:2px solid transparent; padding-bottom:0; }
.step .step-num { width:40px; height:40px; border-radius:50%; background:var(--accent); color:#fff;
                   display:flex; align-items:center; justify-content:center;
                   font-family:'JetBrains Mono',monospace; font-size:15px; margin-left:-21px; }
.step h3 { font-size:19px; margin:6px 0 8px; }
.step p { font-size:15px; line-height:1.7; color:var(--body); margin:0; }

/* --- home page --- */
.kicker { font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.12em;
          text-transform:uppercase; color:var(--accent); margin-bottom:20px; }
.hero { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; padding-top:64px; }
.hero p { font-size:18px; line-height:1.6; color:var(--faint); max-width:44ch; margin:0 0 32px; }
.hero-cta { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.hero .btn-primary { padding:13px 26px; font-size:15px; }
.hero .btn-outline { padding:13px 20px; font-size:15px; }
.badge-row { margin-top:36px; font-family:'JetBrains Mono',monospace; font-size:12px;
             color:var(--muted); display:flex; gap:20px; flex-wrap:wrap; }
.hero-panel { background:var(--dark); border-radius:16px; padding:40px;
              display:flex; flex-direction:column; align-items:center; justify-content:center;
              gap:20px; text-align:center; }
.hero-panel svg { width:180px; height:180px; }
.hero-panel .title { color:#fff; font-weight:600; font-size:20px; }
.hero-panel .sub { color:var(--dark-body); font-size:14px; margin-top:8px; }

.section-included { border-top:1px solid var(--line); background:#fff; }
.section-included .wrap { padding:80px 24px; }
.included-card { border:1px solid var(--line); border-radius:10px; padding:24px; }
.included-card .name { font-weight:600; margin-bottom:8px; }
.included-card .desc { font-size:14px; line-height:1.6; color:var(--faint); }

.plans-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:40px; }
.plans-head h2 { margin:0; }
.plans-head a { font-size:14px; }

.section-dark { background:var(--dark); color:#fff; }
.section-dark .wrap { display:flex; align-items:center; justify-content:space-between;
                       gap:32px; flex-wrap:wrap; padding:72px 24px; }
.section-dark h2 { color:#fff; margin:0 0 8px; font-size:28px; }
.section-dark p { color:var(--dark-body); margin:0; font-size:15px; }
.section-dark .btn { background:#fff; color:var(--dark); font-weight:600; flex-shrink:0; }
.section-dark .btn:hover { background:oklch(0.93 0.01 250); }

/* --- contact form --- */
form { display:flex; flex-direction:column; gap:20px; margin-top:32px; }
form label { display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:500; color:var(--ink); }
form input, form textarea {
  font:inherit; font-size:15px; color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:8px; padding:10px 14px;
  width:100%;
}
form input:focus, form textarea:focus { outline:2px solid var(--accent); outline-offset:1px; }
form textarea { resize:vertical; min-height:120px; }
form button { align-self:flex-start; border:none; cursor:pointer; }
.ok, .err { border-radius:8px; padding:12px 16px; font-size:14px; margin:0 0 8px; }
.ok  { background:oklch(0.95 0.05 150); color:oklch(0.35 0.1 150); border:1px solid oklch(0.8 0.08 150); }
.err { background:oklch(0.95 0.05 25);  color:oklch(0.4  0.15 25);  border:1px solid oklch(0.8 0.1 25); }

@media (max-width:760px) {
  .grid-3 { grid-template-columns:1fr; }
  .hero { grid-template-columns:1fr; padding-top:48px; }

  /* The nav used to be `display:none` here with nothing replacing it, so on a
     phone Features, Migration, Security and FAQ were unreachable from the
     header -- on a site whose whole job is to get a visitor to those pages.
     Wrapping it onto its own row keeps every link reachable and needs no
     JavaScript and no disclosure widget to get right. */
  header.site .wrap { flex-wrap:wrap; row-gap:10px; padding:14px 20px; }
  .brand { flex:1 1 auto; }
  .header-actions { flex:0 0 auto; }
  #site-nav {
    order:3; flex:1 0 100%;
    flex-wrap:wrap; gap:8px 18px;
    padding-top:10px; border-top:1px solid var(--line);
  }
  #site-nav a { font-size:15px; padding:2px 0; }

  /* Long-form pages carry 80px of side padding at desktop width, which leaves
     a narrow measure on a 360px screen. */
  .wrap { padding:48px 20px; }
  .section-dark .wrap, .section-included .wrap { padding:48px 20px; }
  footer.site .wrap { padding:32px 20px; }
}