:root {
  --bg: #ffffff;
  --surface: #f4f7fa;
  --border: #dde4ec;
  /* Near-black with a blue cast rather than neutral grey. It reads as considered
     next to the navy without ever competing with it. */
  --text: #12233a;
  --muted: #5c6b7f;
  /* The working blue: links, buttons, active states. Dark enough to hold white text
     at small sizes, which the brighter cyan below is not. */
  --accent: #0a5c9c;
  --accent-soft: #eaf2f9;
  /* Used sparingly — the underline on the current nav item, the hero rule. It is the
     accent colour, not a background colour. */
  --cyan: #00a0df;
  /* Hero and closing panel. Everything else on the page stays white. */
  --navy: #0b2740;
  --danger: #c62828;
  --ok: #15803d;
  --radius: 8px;
  --font: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { width: min(960px, 92vw); margin: 0 auto; }
.page { padding: 32px 0 64px; min-height: 60vh; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.empty { padding: 48px 0; text-align: center; }

/* ---------- Header ---------- */
.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 62px;
}
.brand { font-weight: 700; font-size: 18px; color: var(--text); }
.main-nav { display: flex; gap: 20px; margin-right: auto; }
.main-nav a { color: var(--muted); padding: 4px 0; border-bottom: 2px solid transparent; }
.main-nav a:hover { color: var(--text); text-decoration: none; }
.main-nav a.active { color: var(--text); border-bottom-color: var(--cyan); font-weight: 600; }
.nav-right { display: flex; gap: 8px; }

.site-footer {
  border-top: 1px solid var(--border);
  padding: 20px 0;
  color: var(--muted);
  font-size: 14px;
}
.site-footer .container { display: flex; justify-content: space-between; gap: 16px; }
.feed-link { color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
}
.btn:hover { filter: brightness(1.07); text-decoration: none; }
.btn-sm { padding: 6px 12px; font-size: 14px; }
.btn-xs { padding: 4px 9px; font-size: 13px; }
.btn-lg { padding: 12px 22px; font-size: 16px; font-weight: 600; }
.btn-block { width: 100%; }
/* Secondary button on a dark panel, where btn-ghost's dark text would vanish. */
.btn-quiet {
  background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45);
}
.btn-quiet:hover { background: rgba(255, 255, 255, .1); filter: none; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface); }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--border); }
.btn-danger:hover { background: #fef2f2; }

/* ---------- Flash ---------- */
.flashes { margin-bottom: 20px; display: grid; gap: 8px; }
.flash {
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 15px;
}
.flash-success { border-color: #bbf7d0; background: #f0fdf4; color: var(--ok); }
.flash-danger  { border-color: #fecaca; background: #fef2f2; color: var(--danger); }
.flash-warning { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.err { color: var(--danger); font-size: 13px; display: block; margin: -6px 0 8px; }

/* ---------- Error pages ---------- */
.notice-page { text-align: center; padding: 80px 0 90px; max-width: 52ch; margin: 0 auto; }
.notice-page h1 { font-size: 34px; margin: 0 0 12px; }
.notice-page p { margin: 0 0 12px; }
.notice-actions { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }

/* ---------- Home ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius);
  padding: 56px 44px 48px;
  margin-bottom: 14px;
}

/* An equity curve drawn into the panel, not a photograph laid behind it: an inline
   SVG in the stylesheet, so there is no image to request, nothing to go stale, and it
   stays sharp on any display. It sits on the right half, clear of the text, and the
   ::after keeps it out of the flow — every child of .hero is lifted above it. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 62% auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 300' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2300a0df' stop-opacity='.28'/%3E%3Cstop offset='1' stop-color='%2300a0df' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 250 L50 238 L100 245 L150 210 L200 218 L250 175 L300 188 L350 140 L400 152 L450 105 L500 118 L550 65 L600 48 L600 300 L0 300 Z' fill='url(%23f)'/%3E%3Cpath d='M0 250 L50 238 L100 245 L150 210 L200 218 L250 175 L300 188 L350 140 L400 152 L450 105 L500 118 L550 65 L600 48' fill='none' stroke='%2300a0df' stroke-opacity='.5' stroke-width='2.5'/%3E%3C/svg%3E");
}
.hero > * { position: relative; z-index: 1; }
.hero-kicker {
  margin: 0 0 14px; font-size: 13px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--cyan);
}
.hero h1 {
  margin: 0 0 18px; font-size: 46px; line-height: 1.12;
  letter-spacing: -.02em; font-weight: 700;
}
.hero-lead {
  margin: 0 0 30px; max-width: 54ch;
  font-size: 18px; line-height: 1.6; color: #c7d6e4;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { margin: 22px 0 0; font-size: 14px; color: #9fb3c6; max-width: 52ch; }

/* The numbers sit directly under the hero as one unbroken row, so the eye reads
   them as a caption to it rather than as a section of their own. */
.stat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
}
.stat { padding: 18px 20px; border-left: 1px solid var(--border); }
.stat:first-child { border-left: 0; }
.stat b { display: block; font-size: 24px; line-height: 1.2; color: var(--text); }
.stat span { font-size: 13px; color: var(--muted); }

.home-section { margin-top: 52px; }
/* Keeps a section on the same reading measure as the prose above it, so a page that
   mixes full-width blocks with 760px text does not look ragged down the left. */
.home-section.narrow { max-width: 760px; }
.home-section > h2, .section-head h2 {
  margin: 0; font-size: 27px; letter-spacing: -.01em;
}
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.section-link { font-size: 15px; font-weight: 600; white-space: nowrap; }
.section-lead { margin: 10px 0 24px; max-width: 62ch; color: var(--muted); }
.home-section > h2 + .steps, .home-section > h2 + .plan-grid { margin-top: 24px; }

/* Numbered steps. The counter is drawn rather than listed so it can sit in the
   margin at a size the text does not have to make room for. */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 4px; }
.steps li {
  counter-increment: step;
  position: relative; padding: 16px 0 16px 52px;
  border-top: 1px solid var(--border);
}
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 16px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.steps b { display: block; margin-bottom: 4px; font-size: 17px; }
.steps p { margin: 0; font-size: 15px; }

.home-posts { display: grid; gap: 2px; }
.home-post { padding: 18px 0; border-top: 1px solid var(--border); }
.home-post h3 { margin: 2px 0 6px; font-size: 20px; line-height: 1.35; }
.home-post h3 a { color: var(--text); }
.home-post h3 a:hover { color: var(--accent); text-decoration: none; }

.cta-box {
  position: relative; overflow: hidden;
  margin-top: 56px; padding: 40px 36px; text-align: center;
  background: var(--navy); color: #fff; border-radius: var(--radius);
}
/* The same curve as the hero, but running the full width and fading out at both
   ends — the text here is centred, so a background weighted to one side would pull
   against it. */
.cta-box::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-repeat: no-repeat; background-position: center bottom;
  background-size: 100% 62%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2300a0df' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%2300a0df' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%2300a0df' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%2300a0df' stop-opacity='.45'/%3E%3Cstop offset='1' stop-color='%2300a0df' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 165 L100 150 L200 158 L300 128 L400 138 L500 104 L600 114 L700 82 L800 92 L900 58 L1000 68 L1100 36 L1200 24 L1200 200 L0 200 Z' fill='url(%23g)'/%3E%3Cpath d='M0 165 L100 150 L200 158 L300 128 L400 138 L500 104 L600 114 L700 82 L800 92 L900 58 L1000 68 L1100 36 L1200 24' fill='none' stroke='url(%23s)' stroke-width='2.5'/%3E%3C/svg%3E");
}
.cta-box > * { position: relative; z-index: 1; }
.cta-box h2 { margin: 0 0 10px; font-size: 27px; }
.cta-box p { margin: 0 auto 24px; max-width: 46ch; color: #c7d6e4; }

/* Three claims about how the testing is done, above the actual posts. */
.blog-points {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px; margin: 4px 0 30px;
}
.blog-points b { display: block; margin-bottom: 4px; font-size: 15px; }
.blog-points p { margin: 0; font-size: 14px; }

/* The review service is an offer, not a section of the site, so it sits in a tinted
   panel that stops the eye instead of continuing the white run down the page. */
.offer-box {
  border: 1px solid var(--border); border-left: 4px solid var(--cyan);
  border-radius: var(--radius); background: var(--surface);
  padding: 28px 30px;
}
.offer-body { max-width: 66ch; }
.offer-box h2 { margin: 6px 0 10px; font-size: 25px; }
.offer-box p { margin: 0 0 20px; }

/* Four services as clickable tiles on the home page. They are a menu, not the
   explanation — the explanation is on /services. */
.service-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 16px; margin: 4px 0 28px;
}
.service-card {
  display: block; padding: 18px 20px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text);
}
.service-card:hover { border-color: var(--accent); text-decoration: none; }
.service-card b { display: block; margin-bottom: 6px; font-size: 16px; color: var(--accent); }
.service-card span { font-size: 14px; color: var(--muted); }

/* The full catalogue. One column: these are read one at a time, and a two-column
   grid would invite comparing prices that are not on the page. */
.service-list { max-width: 760px; margin-top: 44px; display: grid; gap: 4px; }
.service { padding: 26px 0; border-top: 1px solid var(--border); }
.service:first-child { border-top: 0; padding-top: 8px; }
.service h2 { margin: 4px 0 12px; font-size: 25px; }
.service p { margin: 0 0 12px; font-size: 17px; }
.service p:last-of-type { margin-bottom: 0; }
.service-linked .btn { margin-top: 16px; }

/* ---------- Long-form pages (reviews) ---------- */
.hero-slim { padding: 44px 44px 40px; }
.hero-slim h1 { font-size: 40px; }

/* Same measure as a blog post: this page is read, not scanned. */
.prose { max-width: 720px; margin-top: 44px; font-size: 17px; }
.prose h2 { font-size: 25px; margin: 40px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose .steps { margin-top: 14px; }
.prose .steps p { font-size: 16px; }

.ticks, .crosses { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 12px; }
.ticks li, .crosses li { position: relative; padding-left: 30px; }
.ticks li::before, .crosses li::before {
  position: absolute; left: 0; top: 0; font-weight: 700; font-size: 17px;
}
.ticks li::before { content: "✓"; color: var(--ok); }
.crosses li::before { content: "✕"; color: var(--danger); }

.contact-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* ---------- Blog ---------- */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.page-head h1 { margin: 0; font-size: 30px; }
.search { display: flex; gap: 8px; }
.search input {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 14px;
}

.tagbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.tag {
  padding: 4px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  color: var(--muted);
  background: var(--surface);
}
.tag:hover { text-decoration: none; color: var(--text); }
.tag.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.tag-sm { font-size: 12px; padding: 3px 9px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.post-list { display: grid; gap: 8px; }
.post-card {
  display: flex;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
.post-card .thumb { flex: 0 0 180px; }
.post-card .thumb img {
  width: 180px; height: 120px; object-fit: cover; border-radius: var(--radius);
  display: block; border: 1px solid var(--border);
}
.post-card-body { flex: 1; min-width: 0; }
.post-card h2 { margin: 0 0 6px; font-size: 21px; line-height: 1.35; }
.post-card h2 a { color: var(--text); }
.post-card h2 a:hover { color: var(--accent); text-decoration: none; }
.meta { color: var(--muted); font-size: 13px; margin: 0 0 8px; }
.summary { margin: 0; color: #374151; }

.pagination {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  padding: 28px 0;
}

/* ---------- Post ---------- */
.post { max-width: 760px; }
.post h1 { font-size: 34px; line-height: 1.25; margin: 0 0 8px; }
.post .cover {
  width: 100%; border-radius: var(--radius); margin: 20px 0;
  border: 1px solid var(--border);
}
.post-content { font-size: 17px; }
.post-content h2 { font-size: 25px; margin-top: 34px; }
.post-content h3 { font-size: 20px; margin-top: 28px; }
.post-content img { max-width: 100%; border-radius: var(--radius); }
.post-content pre {
  background: #0f172a; color: #e2e8f0; padding: 14px 16px;
  border-radius: var(--radius); overflow-x: auto; font-size: 14px;
}
.post-content code {
  background: var(--surface); padding: 2px 5px; border-radius: 4px;
  font-size: 0.9em; font-family: Consolas, "Courier New", monospace;
}
.post-content pre code { background: none; padding: 0; color: inherit; }
.post-content blockquote {
  margin: 20px 0; padding: 4px 18px;
  border-left: 3px solid var(--accent); color: var(--muted);
}
.post-content table { border-collapse: collapse; width: 100%; font-size: 15px; }
.post-content th, .post-content td { border: 1px solid var(--border); padding: 8px 12px; }
.post-content th { background: var(--surface); }

.related { margin: 40px 0; padding-top: 20px; border-top: 1px solid var(--border); }
.related h3 { margin: 0 0 10px; font-size: 17px; }
.related ul { margin: 0; padding-left: 18px; }

/* ---------- Products ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.product-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); overflow: hidden;
}
.product-card:hover { border-color: var(--accent); }
.product-thumb {
  display: block; aspect-ratio: 16 / 10; background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-thumb-empty {
  display: flex; align-items: center; justify-content: center; height: 100%;
  font-size: 30px; font-weight: 700; color: var(--muted); letter-spacing: .05em;
}
.product-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.product-card h2 { margin: 2px 0 6px; font-size: 19px; line-height: 1.3; }
.product-card h2 a { color: var(--text); }
.product-card h2 a:hover { color: var(--accent); text-decoration: none; }
.product-card .summary { font-size: 14px; }
.product-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid var(--border);
}

.platforms { display: flex; gap: 6px; margin: 12px 0 0; }
.platform {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  padding: 3px 8px; border-radius: 5px; border: 1px solid var(--border);
}
.platform-on { background: var(--accent-soft); border-color: #b6d6ea; color: var(--accent); }
.platform-off { background: var(--surface); color: var(--muted); text-decoration: line-through; }

.product-head { margin-bottom: 20px; }
.product-head h1 { font-size: 34px; line-height: 1.2; margin: 4px 0 6px; }
.product-head .lead { margin: 0; font-size: 18px; }
.product .cover {
  width: 100%; max-width: 760px; border-radius: var(--radius);
  border: 1px solid var(--border); margin: 24px 0;
}
/* The article is the page, so it gets the same measure as a blog post. */
.product-article { max-width: 760px; font-size: 17px; }

.install-strip {
  padding: 16px 18px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.install-builds { display: flex; gap: 12px; flex-wrap: wrap; }
.install-builds .build { flex: 1; min-width: 200px; }
.install-note { margin: 14px 0 0; font-size: 14px; }
.included { font-size: 13px; font-weight: 600; color: var(--accent); }
.product-side { position: sticky; top: 86px; }
.side-box {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 18px;
}
.side-box h3 { margin: 22px 0 10px; font-size: 15px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); }
.price-big { margin: 0 0 14px; font-size: 26px; font-weight: 700; }

.build-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.build {
  padding: 12px 14px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--bg);
}
.build-off { opacity: .65; }
.build-name { font-weight: 600; margin-bottom: 8px; }
.build-name .muted { font-weight: 400; margin-left: 4px; }

.build-editor {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 14px 16px;
}
.build-editor h3 { margin: 0 0 12px; font-size: 16px; }
.build-editor input[type=file] { margin-top: 6px; font-size: 14px; }
.section-title { font-size: 20px; margin: 28px 0 4px; }

/* ---------- Plans ---------- */
.plan-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px; margin-bottom: 12px; align-items: stretch;
}
.plan {
  position: relative; display: flex; flex-direction: column;
  padding: 20px 18px; text-align: center;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg);
}
.plan h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.plan-price { margin: 0 0 2px; font-size: 32px; font-weight: 700; line-height: 1.1; }
.plan .btn { margin-top: auto; }
.plan p.small { margin: 0 0 16px; }
.plan-best { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.plan-flag {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}

.pricing {
  margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--border);
}
.pricing h2 { margin: 0 0 4px; font-size: 24px; }
.pricing > p { margin: 0 0 20px; max-width: 560px; }

.pay-method {
  margin: 10px 0; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg);
}
.pay-method .btn { float: right; }
.pay-address {
  margin-top: 6px; padding: 8px 10px; background: #0f172a; color: #e2e8f0;
  border-radius: 6px; font-family: Consolas, "Courier New", monospace;
  font-size: 13px; word-break: break-all; user-select: all;
}
.pay-ref {
  font-family: Consolas, "Courier New", monospace; font-size: 12px;
  word-break: break-all; color: var(--muted);
}
.paid-form {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border);
}
.paid-form h3 { margin: 0 0 12px; font-size: 15px; }

.order-box { max-width: 560px; margin-bottom: 24px; }
.order-ref {
  margin: 10px 0 6px; font-size: 30px; letter-spacing: .08em;
  font-family: Consolas, "Courier New", monospace;
}

/* ---------- Account ---------- */
.sub-box { max-width: 560px; margin-bottom: 12px; }
.sub-box .price-big { margin: 10px 0 6px; }
.sub-box p:last-child { margin-bottom: 0; }
.payment-note {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--accent-soft); border: 1px solid #bfdbfe; color: #1e3a8a;
  font-size: 14px; white-space: pre-wrap;
}
.setup { max-width: 640px; padding-left: 20px; }
.setup li { margin-bottom: 8px; }

/* ---------- Form / Admin ---------- */
.auth-box { max-width: 420px; margin: 40px auto; }
.auth-box h1 { font-size: 26px; margin: 0 0 16px; }

label { display: block; margin-bottom: 14px; font-size: 14px; font-weight: 600; }
label.checkbox { font-weight: 400; display: flex; align-items: center; gap: 8px; }
input[type=text], input[type=password], input[type=search], input[type=url], select, textarea {
  width: 100%;
  padding: 9px 12px;
  margin-top: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  background: #fff;
  color: var(--text);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent-soft); border-color: var(--accent);
}
textarea { resize: vertical; }
select { height: 40px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: start; }
.grid-3 small, .grid-2 small { display: block; margin-top: 4px; font-weight: 400; line-height: 1.4; }

.stats { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.stat {
  flex: 1; min-width: 120px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.stat b { display: block; font-size: 24px; line-height: 1.2; }
.stat span { font-size: 13px; color: var(--muted); }

.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td {
  text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.table th { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.row-actions form { margin: 0; }

.badge { font-size: 12px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.badge-ok { background: #f0fdf4; color: var(--ok); border: 1px solid #bbf7d0; }
.badge-draft { background: var(--surface); color: var(--muted); border: 1px solid var(--border); }
.badge-warn { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

/* Category label above the post title */
.kicker {
  display: inline-block; margin-bottom: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent);
}
.kicker:hover { text-decoration: none; opacity: .8; }
.lead { margin-top: -8px; margin-bottom: 20px; max-width: 640px; }

/* ---------- Editor ---------- */
.post-form { max-width: 100%; }
.editor { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.editor-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px; background: var(--surface); border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.editor-label { font-size: 14px; font-weight: 600; }
.editor-tools { display: flex; gap: 4px; flex-wrap: wrap; }
.editor-tools button {
  border: 1px solid var(--border); background: #fff; color: var(--text);
  border-radius: 6px; padding: 4px 10px; font-size: 13px; cursor: pointer;
  font-family: inherit;
}
.editor-tools button:hover { background: var(--accent-soft); border-color: var(--accent); }
.editor-body textarea {
  border: 0; border-radius: 0; margin: 0;
  font-family: Consolas, "Courier New", monospace; font-size: 14.5px; line-height: 1.7;
}
.editor-body textarea:focus { outline: none; }
.preview-pane { padding: 16px 18px; border-top: 1px solid var(--border); background: #fff; }

/* ---------- Tabs ---------- */
.tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border); margin-bottom: 22px;
}
.tabs .tab {
  border: 1px solid transparent; border-bottom: none; background: none;
  padding: 9px 16px; font: inherit; font-size: 15px; color: var(--muted);
  cursor: pointer; border-radius: var(--radius) var(--radius) 0 0;
  margin-bottom: -1px;
}
.tabs .tab:hover { color: var(--text); background: var(--surface); }
.tabs .tab.active {
  color: var(--text); font-weight: 600; background: var(--bg);
  border-color: var(--border); border-bottom: 1px solid var(--bg);
}

/* ---------- Share panels ---------- */
.share {
  padding: 18px 20px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.share-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.share-head h3 { margin: 0 0 4px; font-size: 17px; }
.share .counter {
  font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.share .counter.over { color: var(--danger); font-weight: 700; }
.share .counter.warn { color: #92400e; }
.share textarea {
  margin-top: 6px; background: #fff; font-size: 15px; line-height: 1.5;
}
.share-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px;
}
.share p.small { margin: 10px 0 0; }
.share-item { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.share-item:first-of-type { margin-top: 8px; }
.share-item label { margin: 0; font-size: 14px; }
.share-item .hint { margin-left: 4px; }
.recommended {
  margin-top: 10px; padding: 10px 12px; border-radius: var(--radius);
  background: var(--accent-soft); color: #1e3a8a; border: 1px solid #bfdbfe;
}

/* ---------- API keys ---------- */
.inline-form {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  margin-bottom: 24px; padding: 16px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface);
}
.inline-form label { flex: 1; min-width: 260px; margin: 0; }
.inline-form small { display: block; margin-top: 4px; font-weight: 400; }
.token {
  margin: 10px 0; padding: 10px 12px; background: #0f172a; color: #e2e8f0;
  border-radius: var(--radius); font-size: 13px; overflow-x: auto;
  user-select: all;
}
.snippet {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px; font-size: 13px;
  overflow-x: auto; line-height: 1.5;
}

.form-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 18px; flex-wrap: wrap;
}
.form-footer label { margin: 0; }

/* ---------- Profile ---------- */
.side-box + .side-box { margin-top: 18px; }
.side-box h2 { margin: 0 0 12px; font-size: 18px; }
.side-box form { margin: 0; }

/* The delete box has to read as a different kind of thing to the two above it,
   or it is just a third form on a page of forms. */
.danger-box { border-color: #f3c9c9; background: #fefafa; }
.danger-box h2 { color: var(--danger); }
.danger-box summary {
  cursor: pointer; font-weight: 600; color: var(--danger);
  padding: 8px 0; user-select: none;
}
.danger-box summary:hover { text-decoration: underline; }
.danger-box details[open] summary { margin-bottom: 10px; }

/* Four numbers across is too many for a tablet, but two rows of two still reads as
   a block. It only collapses to one column on a phone. */
@media (max-width: 780px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--border); }
  .hero { padding: 42px 28px 36px; }
  .hero h1, .hero-slim h1 { font-size: 36px; }
  .hero-lead { font-size: 17px; }
  .blog-points { grid-template-columns: 1fr; gap: 16px; }
  .service-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .post-card { flex-direction: column; }
  .post-card .thumb, .post-card .thumb img { width: 100%; flex: none; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .product-layout { grid-template-columns: 1fr; }
  .product-side { position: static; }
  .header-inner { height: auto; padding: 12px 0; flex-wrap: wrap; gap: 12px; }
  .table th:nth-last-child(2), .table td:nth-last-child(2) { display: none; }

  .hero, .hero-slim { padding: 34px 22px 30px; }
  .hero h1, .hero-slim h1 { font-size: 30px; }
  .hero-actions .btn { width: 100%; text-align: center; }
  .offer-box { padding: 22px 20px; }
  .stat-strip { grid-template-columns: 1fr; }
  .stat { border-left: 0; border-top: 1px solid var(--border); }
  .stat:first-child { border-top: 0; }
  .cta-box { padding: 32px 22px; }
  .cta-box .btn { width: 100%; }
}