/*
 * EditorialCrest Bloggers — public site + auth pages (Phase 2).
 *
 * Clean, modern, calm, creator-oriented SaaS styling. No external assets,
 * no large frameworks. All user-facing copy is localized server-side.
 */

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-tint: #eef1f5;
  --text: #17202b;
  --muted: #5c6673;
  --border: #d8dee6;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-tint: #e8f0fe;
  --accent: #0f766e;
  --danger: #b91c1c;
  --ok: #166534;
  --warn: #92400e;
  --radius: 10px;
  --shadow-sm: 0 1px 2px rgba(23, 32, 43, 0.06);
  --shadow-md: 0 6px 18px rgba(23, 32, 43, 0.08);
  --maxw: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ------------------------------------------------------------------ header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(6px);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 60px;
}

.brand {
  font-weight: 750;
  font-size: 1.02rem;
  color: var(--text);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand small {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 1.15rem;
}

.main-nav .nav-link {
  color: var(--text);
  font-weight: 500;
  font-size: 0.95rem;
}

.main-nav .nav-link:hover { color: var(--primary); text-decoration: none; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
}

.nav-cta-outline {
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--surface);
}

.nav-cta-outline:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }

.nav-cta-fill {
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
}

.nav-cta-fill:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; text-decoration: none; }

.header-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.header-toggle .bar {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text);
  border-radius: 2px;
}

.header-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.header-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* The inline language switcher shares this row with the main navigation, so
   the navigation collapses into the toggle panel earlier than it otherwise
   would: below this width the four links plus both calls to action no longer
   fit beside the brand and the switcher without overflowing. */
@media (max-width: 1040px) {
  .header-toggle { display: flex; }
  .main-nav {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0.85rem 1.25rem 1rem;
    box-shadow: var(--shadow-md);
  }
  .main-nav:not(.is-open) { display: none; }
  .main-nav .nav-cta { justify-content: center; }
  .main-nav .nav-link { padding: 0.45rem 0; }
}

/* -------------------------------------------------- public language switcher */
/* A visitor-local choice for the public pages only; it never touches the
   account language. It sits inline in the header row rather than in a second
   bar, which keeps the top of the page to a single 60px band and leaves the
   hero closer to the fold. The pill group is the smallest target that still
   meets the 24px minimum for touch, and it shrinks further on narrow screens
   without ever forcing the row to wrap. */

.lang-switcher {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 0 0 auto;
}

.lang-list {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0.15rem;
  background: var(--surface-tint);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.lang-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 26px;
  padding: 0.18rem 0.42rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.lang-pill:hover {
  background: var(--surface);
  color: var(--primary-dark);
  text-decoration: none;
}

.lang-pill.is-current,
.lang-pill[aria-current="true"] {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.35);
}

.lang-pill:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .lang-pill { transition: none; }
}

/* Below this width the switcher stays inline but shrinks again, and the brand
   is allowed to truncate so the row can never overflow horizontally. */
@media (max-width: 560px) {
  .header-row { gap: 0.5rem; }
  .brand {
    font-size: 0.92rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .brand small { display: none; }
  .lang-list { padding: 0.1rem; gap: 0.05rem; }
  .lang-pill { min-width: 28px; min-height: 24px; padding: 0.14rem 0.3rem; font-size: 0.68rem; }
}

/* ------------------------------------------------- dev-only email notice */
/* Shown only when the local dev sink is actually active, so a reader can never
   mistake a local capture for a real outbound email. It appears on the public
   auth pages as well as inside the app, so it lives in the base stylesheet.

   The block is deliberately short: a headline, one honest line, the outbox link
   and a collapsed explanation. The long, page-specific wording lives inside the
   <details> so it costs nothing until it is asked for. */

.dev-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  background: #f5f9ff;
  border: 1px solid #cfe0fd;
  border-left: 3px solid var(--primary);
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
  margin: 0 0 1rem;
}

.dev-notice-quiet {
  align-items: center;
  background: var(--surface-tint);
  border-color: var(--border);
  border-left-color: var(--muted);
}

.dev-notice-icon { flex: 0 0 auto; font-size: 0.95rem; line-height: 1.4; }

.dev-notice-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }

.dev-notice-title { font-size: 0.86rem; font-weight: 700; color: var(--primary-dark); }

.dev-notice-text { font-size: 0.83rem; color: var(--muted); margin: 0; }

.dev-notice-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  margin-top: 0.4rem;
}

.dev-notice-more { min-width: 0; }

.dev-notice-more > summary {
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary-dark);
  list-style: revert;
}

.dev-notice-more > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.dev-notice-more[open] > summary { margin-bottom: 0.35rem; }

.dev-notice-more .dev-notice-text { max-width: 62ch; }

.btn-dev {
  background: var(--surface);
  color: var(--primary-dark);
  border: 1px solid #bfd4fb;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.3rem 0.7rem;
}

.btn-dev:hover { background: var(--primary-tint); text-decoration: none; }

/* ------------------------------------------------------------------- forms */
.site-main { min-height: calc(100vh - 60px); }

.auth-wrap {
  max-width: 460px;
  margin: 2.5rem auto 3rem;
  padding: 0 1.25rem;
}

.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.6rem 1.6rem 1.7rem;
}

.auth-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}

.auth-sub {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 1.1rem;
}

.form label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: 0.95rem;
}

.form input[type="text"],
.form input[type="email"],
.form input[type="password"],
.form select {
  width: 100%;
  padding: 0.58rem 0.7rem;
  margin-top: 0.3rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.98rem;
  background: var(--surface);
  color: var(--text);
}

.form input:focus, .form select:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}

.form .btn { margin-top: 1.15rem; }

.inline-form { display: inline; }

.hint { color: var(--muted); font-size: 0.83rem; margin-top: 0.3rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.58rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.btn:hover { text-decoration: none; }

.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

.btn-secondary { border-color: var(--primary); color: var(--primary); background: var(--surface); }
.btn-secondary:hover { background: var(--primary-tint); }

.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: #fdecec; }

.btn-lg { padding: 0.72rem 1.4rem; font-size: 1rem; }

.link-button {
  border: none;
  background: none;
  padding: 0;
  color: var(--primary);
  cursor: pointer;
  font-size: 0.95rem;
}

.button-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.alert {
  border-radius: 8px;
  padding: 0.65rem 0.9rem;
  margin: 0.9rem 0;
  font-size: 0.92rem;
}

.alert-error { background: #fdecec; color: var(--danger); border: 1px solid #f5c2c2; }
.alert-info { background: var(--primary-tint); color: var(--primary-dark); border: 1px solid #c5d9ff; }
.alert-warn { background: #fdf3e3; color: var(--warn); border: 1px solid #f4dcb4; }

.field-error { color: var(--danger); font-size: 0.85rem; margin-top: 0.3rem; }

.badge {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge-ok { background: #dcfce7; color: var(--ok); }
.badge-warn { background: #fef3c7; color: var(--warn); }
.badge-muted { background: var(--surface-tint); color: var(--muted); }
.badge-primary { background: var(--primary-tint); color: var(--primary-dark); }
/* ``badge-info`` and ``badge-locked`` are emitted by the Social Accounts state
   machine (bloggers.social.states.STATE_BADGE). Without them the two states that
   most need to be told apart — "you can connect this" and "this is not built
   yet" — rendered as unstyled inline text, which is exactly how a card stopped
   reading as a card. */
.badge-info { background: var(--primary-tint); color: var(--primary-dark); border: 1px solid #cfe0fd; }
.badge-locked { background: var(--surface-tint); color: var(--muted); border: 1px dashed var(--border); }
/* ``badge-error`` is the one state a publication must never leave ambiguous: a
   destination that refused the post. It is a distinct hue *and* a distinct
   class, because the word on the badge is what carries the meaning — the colour
   is only there to make the word findable while scanning. */
.badge-error { background: #fee2e2; color: var(--danger); }

.details { border-collapse: collapse; width: 100%; }
.details th, .details td { text-align: left; padding: 0.5rem 0.5rem; border-bottom: 1px solid var(--border); }
.details th { color: var(--muted); font-weight: 600; white-space: nowrap; }
.details tr:last-child th, .details tr:last-child td { border-bottom: none; }

.secret-box {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #0f172a;
  color: #dbeafe;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  overflow-wrap: anywhere;
  font-size: 0.9rem;
}

.secret-uri { font-size: 0.8rem; }

.codes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.5rem;
}

.codes-list code {
  font-size: 1.02rem;
  letter-spacing: 0.06em;
}

/* ------------------------------------------------------------------ hero */
.hero {
  padding: 3.2rem 0 2.4rem;
  background: linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3rem;
  align-items: center;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.hero h1 {
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 1.1rem 0 1rem;
}

.hero p.lead {
  color: var(--muted);
  font-size: 1.06rem;
  max-width: 34rem;
  margin: 0 0 1.6rem;
}

.hero-cta { display: flex; gap: 0.85rem; flex-wrap: wrap; }

.hero-note {
  margin-top: 1.1rem;
  color: var(--muted);
  font-size: 0.85rem;
}

/* --------------------------------------------------------- hero mockup UI */
.mockup {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.mockup-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-tint);
}

.mockup-dot { width: 9px; height: 9px; border-radius: 50%; background: #c6ccd4; }
.mockup-dot:first-child { background: #f2b8b5; }
.mockup-dot:nth-child(2) { background: #f4e0a7; }
.mockup-dot:nth-child(3) { background: #b7e0c2; }

.mockup-title {
  margin-left: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.05em;
}

.mockup-body { padding: 1.1rem 1.1rem 1.25rem; }

.mockup-field {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
  font-size: 0.85rem;
  color: var(--muted);
  background: var(--bg);
  min-height: 74px;
}

.mockup-author {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.35rem;
}

.mockup-text { display: block; line-height: 1.5; }

.mockup-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.1rem 0 0.5rem;
}

.mockup-networks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.mockup-network {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem 0.3rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--muted);
}

.mockup-previews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}

.mockup-preview {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 0.6rem;
  background: var(--surface);
}

.mockup-preview-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text);
}

.mockup-preview-text {
  margin-top: 0.4rem;
  font-size: 0.68rem;
  color: var(--muted);
  line-height: 1.4;
}

.mockup-preview-ph { height: 34px; border-radius: 6px; background: var(--surface-tint); margin-top: 0.4rem; }

.mockup-preview-meta { display: flex; gap: 0.25rem; margin-top: 0.45rem; }

.mock-chip {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 5px;
  background: var(--surface-tint);
  border: 1px solid var(--border);
  font-size: 0.62rem;
  font-weight: 600;
  font-style: normal;
  color: var(--muted);
}

.mockup-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.1rem;
  justify-content: flex-end;
}

.mockup-actions .btn { font-size: 0.85rem; padding: 0.48rem 0.95rem; }

/* ----------------------------------------------------------------- sections */
.section { padding: 3.4rem 0; }

.section-alt { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.section-head { max-width: 40rem; margin: 0 auto 2.2rem; text-align: center; }

.section-head h2 {
  font-size: 1.7rem;
  letter-spacing: -0.015em;
  margin: 0 0 0.5rem;
}

.section-head p { color: var(--muted); margin: 0; }

/* --------------------------------------------------------------- networks */
.networks-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.9rem;
}


/* Icons are inlined SVG on a 24x24 viewBox and coloured with `currentColor`. */

.net-icon {
  display: block;
  flex: 0 0 auto;
}

/* Brand mark treatment.
   The mark is what makes a platform recognisable, so it gets a little more
   care than a plain icon: the tile lifts, the ring picks up the platform's own
   colour, and a single restrained highlight sweeps across on hover. The sweep
   is a short, low-contrast pass and is skipped entirely for reduced motion —
   it is decoration, never a signal. */

.network-mark {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-tint);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

/* The highlight is a pseudo-element rather than a background image so nothing
   is fetched and it inherits the tile's own border radius. */
.network-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  pointer-events: none;
}

.network-tile {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.network-tile:hover {
  border-color: #c3ccd8;
  box-shadow: var(--shadow-md);
}

.network-tile:hover .network-mark {
  transform: translateY(-2px);
  border-color: currentColor;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 6px 16px -6px currentColor;
}

.network-tile:hover .network-mark::after { transform: translateX(120%); transition: transform 0.5s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .network-mark, .network-tile { transition: none; }
  .network-tile:hover .network-mark { transform: none; }
  .network-tile:hover .network-mark::after { transform: none; }
}

.network-tile .network-name { font-weight: 600; font-size: 0.94rem; }

.network-tile .network-state {
  display: block;
  font-size: 0.74rem;
  color: var(--muted);
}

/* ------------------------------------------------------------- walkthrough */
.carousel {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
}

.carousel-viewport { overflow: hidden; border-radius: 14px; }

.carousel-track {
  display: flex;
  transition: transform 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track { transition: none; }
}

.carousel-slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 0 0.35rem;
}

.carousel-inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  min-height: 270px;
}

.carousel-step {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-dark);
  background: var(--primary-tint);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
}

.carousel-inner h3 { margin: 0.85rem 0 0.5rem; font-size: 1.25rem; }

.carousel-inner p { color: var(--muted); font-size: 0.95rem; margin: 0 0 1.1rem; }

.mock-app { border: 1px solid var(--border); border-radius: 8px; background: var(--bg); padding: 1rem; }

.mock-app-line { height: 10px; border-radius: 5px; background: #dfe4ea; margin-bottom: 0.6rem; }
.mock-app-line.short { width: 55%; }
.mock-app-line.tiny { width: 30%; background: #c8d3e0; }
.mock-app-row { display: flex; gap: 0.5rem; margin-top: 0.8rem; flex-wrap: wrap; }
.mock-app-chip {
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

/* ------------------------------------------------ walkthrough mock windows */
/* Each slide is a small, believable product screen: window chrome, a primary
   work area and a narrow settings rail. Everything is CSS — no images, no
   empty white rectangles. */

.mock-window {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.mock-window:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.mock-window-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.65rem;
  background: var(--surface-tint);
  border-bottom: 1px solid var(--border);
}

.mock-window-dot { width: 7px; height: 7px; border-radius: 50%; background: #c6ccd4; }
.mock-window-dot:first-child { background: #f0b6b3; }
.mock-window-dot:nth-child(2) { background: #f0dda6; }
.mock-window-dot:nth-child(3) { background: #b6dcbf; }

.mock-window-name {
  margin-left: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.mock-window-pill {
  margin-left: auto;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--muted);
}

.mock-window-pill.ok { background: #dcfce7; border-color: #bbf7d0; color: var(--ok); }

.mock-window-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  gap: 0.7rem;
  padding: 0.7rem;
}

.mock-window-foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
  padding: 0.5rem 0.7rem 0.65rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

/* generic skeleton bits ---------------------------------------------------- */
.mock-line { display: block; height: 7px; border-radius: 4px; background: #d9dfe6; }
.mock-line.thin { height: 5px; background: #e4e9ef; }
.mock-line.w22 { width: 22%; }
.mock-line.w24 { width: 24%; }
.mock-line.w28 { width: 28%; }
.mock-line.w30 { width: 30%; }
.mock-line.w35 { width: 35%; }
.mock-line.w40 { width: 40%; }
.mock-line.w44 { width: 44%; }
.mock-line.w45 { width: 45%; }
.mock-line.w50 { width: 50%; }
.mock-line.w52 { width: 52%; }
.mock-line.w55 { width: 55%; }
.mock-line.w58 { width: 58%; }
.mock-line.w60 { width: 60%; }
.mock-line.w65 { width: 65%; }

.mock-paragraph {
  height: 7px;
  border-radius: 4px;
  background: #dde3ea;
  margin: 0.4rem 0 0;
}

.mock-paragraph.short { width: 62%; }
.mock-paragraph.xs { height: 5px; margin-top: 0.3rem; }
.mock-paragraph.accent { background: #cfe0fd; }

.mock-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c7d7f8, #dfe9fd);
  flex: 0 0 auto;
}

.mock-avatar.sm { width: 14px; height: 14px; }

.mock-field {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.65rem;
}

.mock-field-head { display: flex; align-items: center; gap: 0.45rem; }

.mock-field-head .mock-lines {
  display: grid;
  gap: 3px;
  flex: 1;
}

.mock-media { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.55rem; }

/* The tiles carry a real glyph and caption rather than being blank rectangles,
   so the walkthrough shows that a post can hold photo and video. */
.mock-media-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 52px;
  height: 40px;
  border-radius: 6px;
  background: linear-gradient(140deg, #dbe6fb, #eef3fd);
  border: 1px solid var(--border);
  color: #5b6b80;
}

.mock-media-tile.alt { background: linear-gradient(140deg, #e6edf6, #f4f7fb); }

.mock-media-glyph { font-size: 0.8rem; line-height: 1; }

.mock-media-label { font-size: 0.55rem; font-weight: 600; letter-spacing: 0.02em; }

.mock-add {
  width: 44px;
  height: 40px;
  border-radius: 6px;
  border: 1px dashed #c3ccd8;
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  cursor: default;
}

/* settings rail ------------------------------------------------------------ */
.mock-side {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.mock-side-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.15rem;
}

.mock-select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.25rem 0.4rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text);
  background: var(--bg);
}

.mock-counter { margin-top: auto; font-size: 0.62rem; color: var(--muted); }

.mock-stat { font-size: 0.72rem; color: var(--muted); }
.mock-stat b { font-size: 0.95rem; color: var(--text); }

.mock-meter {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: var(--surface-tint);
  overflow: hidden;
}

.mock-meter i { display: block; height: 100%; background: var(--primary); border-radius: 999px; }

.mock-mini { margin: 0.1rem 0 0; font-size: 0.62rem; line-height: 1.4; color: var(--muted); }

.mock-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.45rem; }

/* slide 1 — composer ------------------------------------------------------- */
.mock-btn {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
}

.mock-btn.ghost { border: 1px solid var(--border); background: var(--surface); color: var(--muted); }
.mock-btn.solid { background: var(--primary); color: #fff; }

/* slide 2 — network picker ------------------------------------------------- */
.mock-netlist { display: grid; gap: 0.3rem; align-content: start; }

.mock-netrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0.35rem 0.45rem;
}

.mock-netrow.is-rest { background: var(--bg); }

.mock-net-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--surface-tint);
  flex: 0 0 auto;
}

.mock-net-text { display: grid; gap: 3px; flex: 1; min-width: 0; }

.mock-toggle {
  flex: 0 0 auto;
  width: 26px;
  height: 15px;
  border-radius: 999px;
  background: var(--primary);
  position: relative;
}

.mock-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
}

.mock-toggle.off { background: #cfd6de; }
.mock-toggle.off::after { right: auto; left: 2px; }

/* slide 3 — AI adapt ------------------------------------------------------ */
.mock-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }

.mock-diff-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem;
}

.mock-diff-col.is-adapted { border-color: #bfd4fb; background: #f6f9ff; }

.mock-diff-label {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

/* slide 4 — previews ------------------------------------------------------ */
.mock-previews { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }

.mock-preview-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
}

.mock-preview-head {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.3rem;
}

.mock-preview-user { display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.25rem; }

.mock-thumb {
  height: 24px;
  border-radius: 5px;
  background: linear-gradient(135deg, #dde7f8, #eff4fc);
  margin-top: 0.3rem;
}

.mock-preview-foot { display: flex; gap: 0.22rem; margin-top: 0.35rem; }

.mock-icon-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--surface-tint);
  border: 1px solid var(--border);
}

.mock-icon-dot.push { margin-left: auto; }

.mock-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.22rem; }

.mock-checks li {
  position: relative;
  padding-left: 0.85rem;
  font-size: 0.62rem;
  line-height: 1.35;
  color: var(--muted);
}

.mock-checks li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.62rem;
  font-weight: 800;
}

.mock-checks li.pass { color: var(--ok); }
.mock-checks li.pass::before { content: "✓"; }
.mock-checks li.warn { color: var(--warn); }
.mock-checks li.warn::before { content: "!"; }

/* slide 5 — schedule ------------------------------------------------------ */
.mock-cal { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem; }

.mock-cal-head { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.25rem; margin-bottom: 0.35rem; }

.mock-day {
  text-align: center;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.15rem 0;
  border-radius: 5px;
}

.mock-day.is-active { background: var(--primary-tint); color: var(--primary-dark); }

.mock-cal-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.25rem; }

.mock-slot {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.3rem 0.25rem;
  background: var(--bg);
  min-height: 46px;
}

.mock-slot.is-filled { background: var(--primary-tint); border-color: #bfd4fb; }

.mock-times { display: flex; flex-wrap: wrap; gap: 0.22rem; }

.mock-chip.is-on { background: var(--primary-tint); border-color: #bfd4fb; color: var(--primary-dark); }

/* slide 6 — publish history ------------------------------------------------ */
.mock-history { display: grid; gap: 0.3rem; align-content: start; }

.mock-hrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0.35rem 0.45rem;
}

.mock-hrow.is-muted { opacity: 0.72; }

.mock-status { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.mock-status.live { background: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14); }
.mock-status.done { background: var(--ok); }
.mock-status.pending { background: var(--warn); }
.mock-status.failed { background: var(--danger); }

.mock-htext { display: grid; gap: 2px; flex: 1; min-width: 0; }

/* Real post titles instead of placeholder bars: the history panel is the one
   place that shows what a finished entry looks like. */
.mock-htitle {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mock-hsub { font-size: 0.62rem; color: var(--muted); }

.mock-hicons { display: flex; gap: 0.2rem; align-items: center; }

.mock-metrics { display: grid; gap: 0.2rem; }

.mock-metric {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  font-size: 0.6rem;
  color: var(--muted);
}

.mock-metric b { font-size: 0.85rem; color: var(--text); }

@media (max-width: 560px) {
  .mock-window-body { grid-template-columns: 1fr; }
  .mock-side { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .mock-side-label { width: 100%; }
  .mock-counter, .mock-mini { margin-top: 0; width: 100%; }
  .mock-previews { grid-template-columns: repeat(2, 1fr); }
  .mock-diff { grid-template-columns: 1fr; }
  .mock-cal-grid, .mock-cal-head { grid-template-columns: repeat(3, 1fr); }
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.1rem;
}

.carousel-btn {
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 1.05rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.carousel-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.carousel-btn:disabled { opacity: 0.4; cursor: default; }

.carousel-dots { display: flex; gap: 0.45rem; }

.carousel-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--primary);
  background: transparent;
  cursor: pointer;
}

.carousel-dot[aria-current="true"], .carousel-dot.active { background: var(--primary); }

/* ---------------------------------------------------------------- features */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem 1.2rem 1.3rem;
  box-shadow: var(--shadow-sm);
  position: relative;
}

.feature-card h3 { margin: 0 0 0.4rem; font-size: 1.02rem; }

.feature-card p { margin: 0; color: var(--muted); font-size: 0.9rem; }

.feature-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--primary-tint);
  color: var(--primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  margin-bottom: 0.8rem;
}

.feature-lock {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--surface-tint);
  border: 1px solid var(--border);
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
}

/* ----------------------------------------------------------------- pricing */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: stretch;
}

.plan-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.4rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}

.plan-card.highlight { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--shadow-md); }

/* Planned plans are visually subordinate and explicitly not for sale: no
   highlight ring, a dashed edge, and a "coming soon" tag that reads as a
   status rather than as an offer. */
.plan-card.is-planned {
  border-style: dashed;
  box-shadow: none;
  background: linear-gradient(180deg, #ffffff, #fafbfd);
}

.plan-name {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.plan-tag {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface-tint);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
}

.plan-tag-soon {
  align-self: flex-start;
  color: var(--warn);
  background: #fef3c7;
  border-color: #fde68a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.plan-summary { margin: 0.7rem 0 0; font-size: 0.85rem; color: var(--muted); }

.plan-features { list-style: none; margin: 1.1rem 0 1.3rem; padding: 0; display: grid; gap: 0.5rem; }

.plan-features li {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  font-size: 0.9rem;
}

.plan-features .check { color: var(--ok); font-weight: 800; flex: 0 0 auto; }
.plan-features .cross { color: var(--danger); font-weight: 800; flex: 0 0 auto; }
.plan-features .dim { color: var(--muted); }

.plan-features-planned { font-size: 0.88rem; color: var(--text); }

.plan-note { margin: 0.6rem 0 0; font-size: 0.76rem; color: var(--muted); }

.plan-card .btn { margin-top: auto; }

/* -------------------------------------------------------------- AI explain */
.ai-explain {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.2rem;
  align-items: center;
}

.ai-sum {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.4rem;
  box-shadow: var(--shadow-sm);
}

.ai-equation {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  font-size: 0.95rem;
  font-weight: 700;
}

.ai-equation .plus { color: var(--muted); }

.ai-equation .plus, .ai-equation .equals { color: var(--muted); }

.ai-pill {
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-tint);
  white-space: nowrap;
}

.ai-pill.highlight { background: var(--primary-tint); border-color: var(--primary); color: var(--primary-dark); }

.ai-notes { margin-top: 1rem; display: grid; gap: 0.4rem; }

.ai-notes p { margin: 0; font-size: 0.92rem; color: var(--muted); }

/* ------------------------------------------------------------------- footer */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 2rem 0 2.4rem;
  margin-top: 1rem;
}

.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.85rem;
}

.footer-links { display: flex; gap: 1.1rem; flex-wrap: wrap; }

.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--primary); }

/* -------------------------------------------------------------- misc pages */
.page-head { padding: 2.2rem 0 0.2rem; }
.page-head h1 { margin: 0 0 0.3rem; font-size: 1.6rem; }
.page-head p { color: var(--muted); margin: 0; }

.center-note {
  max-width: 640px;
  margin: 2.5rem auto;
  padding: 1.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.center-note h1 { margin: 0 0 0.6rem; font-size: 1.35rem; }
.center-note p { color: var(--muted); }

/* --------------------------------------------------------------- responsive */
@media (max-width: 1024px) {
  .hero-grid { gap: 2rem; }
}

@media (max-width: 860px) {
  .hero { padding: 2.2rem 0 1.8rem; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero p.lead { max-width: none; }
  .networks-grid { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .ai-explain { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .networks-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .features-grid { grid-template-columns: 1fr; }
  .mockup-previews { grid-template-columns: 1fr; }
  .section { padding: 2.4rem 0; }
  .hero h1 { font-size: 1.85rem; }
  .auth-wrap { margin-top: 1.6rem; }
}