/* ============================================================
   WriteLex — brand stylesheet (front / blog / auth)
   Palette: ink navy, warm ivory, brass gold accent
   Type: Fraunces (display serif) + Inter (body sans)
   ============================================================ */

:root {
  --ink: #10233b;
  --ink-soft: #1c3350;
  --ivory: #f6f1e7;
  --ivory-deep: #ece3d2;
  --paper: #fbf8f2;
  --brass: #b07d3c;
  --brass-bright: #c8933f;
  --slate: #52627a;
  --line: #d8cdb8;
  --white: #ffffff;
  --success: #2c7a4b;
  --danger: #9a3b3b;
  --shadow: 0 18px 50px -28px rgba(16, 35, 59, 0.35);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

h1, h2, h3, h4, h5 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.wrap, .container { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 780px; margin: 0 auto; padding: 0 var(--gutter); }

section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section-sm { padding: clamp(2.5rem, 5vw, 4rem) 0; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(251, 248, 242, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav, .nav-wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 74px; gap: 1.5rem;
}
.brand { display: flex; align-items: baseline; gap: 2px; font-family: var(--serif); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; }
.brand .dot { color: var(--brass); }
.nav-main { flex: 1; display: flex; justify-content: center; }
.nav-links, .nav-list { display: flex; align-items: center; gap: 2.2rem; list-style: none; }
.nav-links a, .nav-list a, .nav-link { font-size: 0.95rem; font-weight: 500; color: var(--ink-soft); transition: color 0.2s; }
.nav-links a:hover, .nav-list a:hover, .nav-link:hover { color: var(--brass); }
.nav-drawer, .nav-backdrop { display: none; }
a.nav-cta {
  font-family: var(--sans); font-size: 0.85rem; font-weight: 600;
  background: var(--ink); color: var(--paper) !important;
  padding: 0.5rem 1.05rem; border-radius: 2px; transition: background 0.2s;
}
a.nav-cta:hover { background: var(--brass); color: var(--ink) !important; }
.nav-actions { display: flex; align-items: center; gap: 1rem; }
.nav-toggle, .menu-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; color: var(--ink); font-size: 1.4rem; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: 0.3s; }

/* User account dropdown (auth-aware nav) */
.user-menu { position: relative; }
.user-trigger {
  display: flex; align-items: center; gap: 0.6rem; background: none; border: 1px solid var(--line);
  border-radius: 999px; padding: 0.4rem 0.9rem 0.4rem 0.4rem; cursor: pointer; color: var(--ink);
}
.user-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--ivory);
  display: grid; place-items: center; font-family: var(--serif); font-size: 0.85rem; flex: 0 0 auto;
}
.user-name { font-size: 0.9rem; font-weight: 600; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-trigger i, .user-trigger svg { font-size: 1.1rem; transition: transform 0.2s; }
.user-menu.is-open .user-trigger i { transform: rotate(180deg); }
.user-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0; width: 220px; background: var(--white);
  border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); padding: 0.6rem;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: 0.18s ease;
}
.user-menu.is-open .user-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.user-top { padding: 0.5rem 0.7rem 0.7rem; border-bottom: 1px solid var(--line); margin-bottom: 0.4rem; font-size: 0.85rem; color: var(--slate); }
.user-links a { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.7rem; border-radius: 4px; font-size: 0.92rem; color: var(--ink-soft); }
.user-links a:hover { background: var(--ivory); color: var(--ink); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--sans); font-weight: 600;
  font-size: 0.98rem; padding: 0.85rem 1.7rem; border-radius: 2px;
  cursor: pointer; border: 1.5px solid transparent; transition: all 0.22s ease;
}
.btn-primary { background: var(--brass); color: var(--ink); }
.btn-primary:hover { background: var(--ink); color: var(--paper); }
.btn-ghost, .btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover, .btn-secondary:hover { background: var(--ink); color: var(--paper); }
.btn-light { background: var(--paper); color: var(--ink); }
.btn-light:hover { background: var(--brass); }

/* ---------- Hero ---------- */
.hero { background: var(--ink); color: var(--ivory); position: relative; overflow: hidden; padding: clamp(4rem, 9vw, 7rem) 0 clamp(4rem, 9vw, 6.5rem); }
.hero h1 { color: var(--ivory); font-size: clamp(2.6rem, 5.6vw, 4.3rem); font-weight: 400; margin-bottom: 1.5rem; }
.hero-grid, .hero-wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.eyebrow { display: inline-block; font-family: var(--sans); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; color: var(--brass-bright); margin-bottom: 1.4rem; }
.hero p.lead, .hero-copy p, .hero > .wrap > div > p { font-size: 1.14rem; color: #d5cdbd; max-width: 40ch; margin-bottom: 2.2rem; }
.hero-actions, .hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.hero-trust { font-size: 0.88rem; color: #a9b3c2; margin-bottom: 1.6rem; }
.hero-points { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.hero-points li { font-size: 0.92rem; color: #cdd4dd; display: flex; align-items: center; gap: 0.5rem; }
.hero-points li i { color: var(--brass-bright); }
.hero-meta { margin-top: 2.8rem; padding-top: 1.9rem; border-top: 1px solid rgba(255,255,255,0.14); display: flex; align-items: stretch; }
.hero-meta .stat { flex: 1; padding: 0 1.6rem; position: relative; }
.hero-meta .stat:first-child { padding-left: 0; }
.hero-meta .stat:last-child { padding-right: 0; }
.hero-meta .stat + .stat::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 1px; background: rgba(255,255,255,0.14); }
.hero-meta .stat b { font-family: var(--serif); font-size: 1.65rem; font-weight: 500; color: var(--ivory); display: block; line-height: 1.05; margin-bottom: 0.4rem; }
.hero-meta .stat span { font-size: 0.85rem; color: #a9b3c2; display: block; }

/* Hero editorial card + product demo panel */
.card, .proof-card, .demo-card, .hero-panel, .hero-visual > div {
  background: var(--paper); color: var(--ink); border-radius: 4px;
  box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,0.08);
}
.card { padding: 2rem; border-color: var(--line); box-shadow: none; }
.card-soft { background: var(--ivory); border-color: var(--ivory-deep); }
.proof-card, .demo-card, .hero-panel { padding: 0; overflow: hidden; }
.proof-card { padding: 2rem 2rem 1.6rem; }
.pc-head, .demo-top, .hero-topbar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid var(--line); margin-bottom: 1.3rem; }
.demo-top, .hero-topbar { background: var(--ivory); padding: 0.9rem 1.2rem; margin-bottom: 0; border-radius: 0; }
.hero-dots, .dots { display: flex; gap: 6px; }
.hero-dots span, .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); display: block; }
.hero-topbar .badge, .demo-top span { font-size: 0.8rem; color: var(--slate); font-weight: 500; }
.hero-topbar .badge { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--white); border: 1px solid var(--line); padding: 0.35rem 0.7rem; border-radius: 999px; color: var(--ink-soft); }
.pc-head b { font-family: var(--serif); font-size: 1.15rem; }
.pc-head em { font-style: normal; font-size: 0.78rem; color: var(--brass); font-weight: 600; }
.proof-line { display: flex; align-items: flex-start; gap: 0.8rem; margin-bottom: 1.1rem; font-size: 0.95rem; color: var(--slate); }
.proof-line b { color: var(--ink); font-weight: 600; }
.proof-foot { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 0.85rem; }
.proof-foot span { color: var(--slate); }
.proof-foot b { font-family: var(--serif); font-size: 1.3rem; color: var(--brass); }

.editor-input, .editor-output, .editor-meta, .hero-editor { padding: 1.5rem 1.4rem; }
.hero-editor { padding: 0; }
.editor-input, .editor-output, .editor-meta { border-bottom: 1px solid var(--line); }
.editor-meta { border-bottom: none; }
.editor-label { display: flex; justify-content: space-between; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; color: var(--slate); margin-bottom: 0.7rem; text-transform: uppercase; }
.editor-field { background: var(--ivory); border: 1px solid var(--line); border-radius: 4px; padding: 0.75rem 0.9rem; font-size: 0.95rem; font-weight: 600; }
.title-list { display: flex; flex-direction: column; gap: 0.5rem; }
.title-option { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.65rem 0.8rem; border-radius: 4px; border: 1px solid var(--line); font-size: 0.86rem; color: var(--slate); }
.title-option.active { border-color: var(--brass); color: var(--ink); background: var(--ivory); font-weight: 500; }
.title-option i { color: var(--brass); flex: 0 0 auto; margin-top: 2px; }
.editor-stats { display: flex; gap: 1rem; }
.stat-mini { flex: 1; text-align: center; background: var(--ivory); border-radius: 4px; padding: 0.8rem 0.5rem; }
.stat-mini strong { display: block; font-family: var(--serif); font-size: 1.2rem; color: var(--brass); }
.stat-mini span { font-size: 0.72rem; color: var(--slate); }

/* ---------- Section heads ---------- */
.section-head, .section-title-wrap { max-width: 640px; margin-bottom: clamp(2.2rem, 5vw, 3.4rem); }
.section-head .kicker, .section-head .eyebrow { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em; color: var(--brass); margin-bottom: 0.9rem; display: block; }
.section-head h2, .section-title { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 400; }
.section-head p, .section-copy { margin-top: 1.1rem; color: var(--slate); font-size: 1.1rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Value / feature grid ---------- */
.feature-grid, .feat-row, .features-grid-main, .usecase-grid, .usecases-main-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.feature-grid .cell, .feat-row .cell, .feature-block-card, .usecase-card, .usecase-detail-card {
  background: var(--paper); padding: 2.2rem 2rem; border-radius: 0; box-shadow: none; border: none;
}
.feature-grid .cell h3, .feat-row .cell h3, .feature-block-card h3, .usecase-card h3, .usecase-detail-card h3 { font-size: 1.28rem; margin-bottom: 0.7rem; font-weight: 500; }
.feature-grid .cell p, .feat-row .cell p, .feature-block-card p, .usecase-card p, .usecase-detail-card p { color: var(--slate); font-size: 0.98rem; }
.feature-grid .cell .num { font-family: var(--serif); font-size: 0.95rem; color: var(--brass); margin-bottom: 1.1rem; }
.ic, .feat-row .cell .ic, .feature-icon {
  width: 44px; height: 44px; border-radius: 4px; background: var(--ivory); display: grid; place-items: center; margin-bottom: 1.2rem;
  color: var(--brass); font-size: 1.3rem; flex: 0 0 auto;
}
.feature-detail-list, .usecase-detail-list { list-style: none; margin-top: 1rem; }
.feature-detail-list li, .usecase-detail-list li { font-size: 0.9rem; color: var(--ink-soft); padding: 0.35rem 0; display: flex; gap: 0.5rem; align-items: center; }
.feature-detail-list i, .usecase-detail-list i { color: var(--brass); }
.feature-block-top, .usecase-detail-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.feature-block-top .badge, .usecase-detail-top .badge, .contact-mini-card .badge, span.badge {
  font-size: 0.72rem; font-weight: 600; background: var(--ivory); border: 1px solid var(--line); color: var(--brass);
  padding: 0.3rem 0.65rem; border-radius: 999px; display: inline-flex; align-items: center; gap: 0.35rem;
}

/* ---------- Editorial two-col ---------- */
.editorial { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.editorial.alt { background: var(--ivory); }
.editorial-list { list-style: none; margin-top: 1.8rem; }
.editorial-list li { padding: 1.15rem 0; border-top: 1px solid var(--line); display: flex; gap: 1rem; }
.editorial-list li:last-child { border-bottom: 1px solid var(--line); }
.editorial-list li b { font-family: var(--serif); font-size: 1.08rem; font-weight: 500; color: var(--ink); display: block; margin-bottom: 0.2rem; }
.editorial-list li span { color: var(--slate); font-size: 0.95rem; }
.editorial-list .mk { color: var(--brass); font-family: var(--serif); font-size: 1.2rem; flex: 0 0 auto; line-height: 1.4; }

.value-wrap, .features-split-wrap, .usecases-split-wrap, .about-audience-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding: clamp(2rem, 4vw, 3rem); }
.value-list { list-style: none; display: flex; flex-direction: column; gap: 1.3rem; }
.value-list li { display: flex; gap: 1rem; align-items: flex-start; }
.value-list li i, .features-benefit-item i, .usecases-problem-item i { color: var(--brass); font-size: 1.3rem; flex: 0 0 auto; margin-top: 2px; }
.value-list li strong, .features-benefit-item strong, .usecases-problem-item strong { display: block; font-family: var(--serif); font-size: 1.05rem; font-weight: 500; margin-bottom: 0.2rem; }
.value-list li p, .features-benefit-item p, .usecases-problem-item p { color: var(--slate); font-size: 0.93rem; }
.features-benefit-stack, .usecases-problem-stack { display: flex; flex-direction: column; gap: 1.3rem; margin-top: 1.6rem; }
.features-benefit-item, .usecases-problem-item { display: flex; gap: 1rem; }
.features-side-panel, .usecases-side-panel, .insight-card { padding: clamp(1.8rem, 3vw, 2.4rem); }
.features-side-panel h3, .usecases-side-panel h3, .insight-card h3 { font-size: 1.35rem; margin: 0.9rem 0; font-weight: 500; }
.features-side-list, .usecases-side-list { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 0; }
.features-side-row, .usecases-side-row { display: flex; justify-content: space-between; padding: 0.8rem 0; border-top: 1px solid var(--line); font-size: 0.9rem; }
.features-side-row span, .usecases-side-row span { color: var(--slate); }
.features-side-row strong, .usecases-side-row strong { color: var(--brass); font-family: var(--serif); }
.insight-card a, .features-side-panel a, .usecases-side-panel a { margin-top: 1.4rem; }

/* ---------- Band (dark) ---------- */
.band { background: var(--ink); color: var(--ivory); }
.band h2, .band .section-title { color: var(--ivory); }
.band .section-head p, .band .section-copy { color: #b7c0cd; }

/* Steps */
.steps, .careers-culture-grid, .about-principles-grid, .features-category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.step, .careers-culture-card, .about-principle-card, .features-category-card { position: relative; }
.step .s-num, .careers-why-no, .about-timeline-step, .usecases-scenario-step { font-family: var(--serif); font-size: 2.6rem; color: var(--brass); line-height: 1; margin-bottom: 1rem; opacity: 0.9; }
.step h3 { color: var(--ivory); font-size: 1.35rem; margin-bottom: 0.6rem; font-weight: 500; }
.step p { color: #b3bccb; font-size: 0.97rem; }
.careers-culture-card, .about-principle-card, .features-category-card { text-align: left; }
.careers-culture-card h3, .about-principle-card h3, .features-category-card h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.careers-culture-card p, .about-principle-card p, .features-category-card p { color: var(--slate); font-size: 0.94rem; }

/* ---------- Comparison table ---------- */
.cmp, .compare-table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); font-size: 0.96rem; }
.compare-wrap { overflow-x: auto; }
.cmp th, .cmp td, .compare-table th, .compare-table td { padding: 1.05rem 1.4rem; text-align: left; border-bottom: 1px solid var(--line); }
.cmp thead th, .compare-table thead th { font-family: var(--sans); font-weight: 600; background: var(--ink); color: var(--ivory); }
.cmp thead th:last-child, .compare-table thead th:last-child { background: var(--brass); color: var(--ink); }
.cmp tbody tr:last-child td, .compare-table tbody tr:last-child td { border-bottom: 0; }
.cmp td.yes, .status-good { color: var(--success); font-weight: 600; }
.cmp td.no, .status-bad { color: var(--danger); }
.cmp td.wk, .status-warn { color: var(--slate); }
.cmp td:first-child, .compare-table td:first-child { font-weight: 500; color: var(--ink); }

/* ---------- Pricing ---------- */
.price-grid, .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; align-items: stretch; }
.plan, .price-card { background: var(--white); border: 1px solid var(--line); border-radius: 4px; padding: 2.3rem 2rem; display: flex; flex-direction: column; box-shadow: none; }
.plan.feature, .price-card.featured { background: var(--ink); color: var(--ivory); border-color: var(--ink); position: relative; }
.plan.feature h3, .plan.feature .price, .price-card.featured .plan-name, .price-card.featured .price { color: var(--ivory); }
.plan .tag, .price-card .plan-sub { font-size: 0.85rem; font-weight: 500; color: var(--slate); margin-bottom: 0.8rem; }
.plan.feature .tag, .price-card.featured .plan-sub { color: #b7c0cd; }
.plan h3, .price-card .plan-name { font-size: 1.5rem; font-weight: 500; font-family: var(--serif); margin-bottom: 0.4rem; }
.plan .desc { font-size: 0.9rem; color: var(--slate); margin-bottom: 1.4rem; min-height: 2.6em; }
.plan.feature .desc { color: #b7c0cd; }
.plan .price, .price-card .price { font-family: var(--serif); font-size: 2.6rem; font-weight: 500; margin: 0.6rem 0 0.3rem; }
.plan .price small, .price-card .price span { font-family: var(--sans); font-size: 0.9rem; color: var(--slate); font-weight: 400; }
.plan.feature .price small, .price-card.featured .price span { color: #b7c0cd; }
.plan ul, .price-card .feature-list { list-style: none; margin: 1.5rem 0; flex-grow: 1; }
.plan ul li, .price-card .feature-list li { padding: 0.55rem 0 0.55rem 1.6rem; position: relative; font-size: 0.94rem; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 0.5rem; }
.price-card .feature-list li i { color: var(--brass); }
.plan.feature ul li, .price-card.featured .feature-list li { border-color: rgba(255,255,255,0.12); }
.plan ul li::before { content: "✓"; position: absolute; left: 0; color: var(--brass); font-weight: 700; }
.plan .badge, .price-badge { position: absolute; top: -12px; right: 1.6rem; background: var(--brass); color: var(--ink); font-size: 0.72rem; font-weight: 700; padding: 0.3rem 0.8rem; border-radius: 2px; letter-spacing: 0.02em; }
.trust-note { text-align: center; margin-top: 2rem; color: var(--slate); font-size: 0.95rem; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 780px; }
.faq-item, .faq-item.is-open { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q, .faq-button {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 1.5rem 0;
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  font-family: var(--serif); font-size: 1.2rem; font-weight: 500; color: var(--ink);
}
.faq-q .ico, .faq-button i { flex: 0 0 auto; font-size: 1.4rem; color: var(--brass); transition: transform 0.25s; }
.faq-item.open .faq-q .ico, .faq-item.is-open .faq-button i { transform: rotate(180deg); }
.faq-a, .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-a p, .faq-answer-inner { padding: 0 0 1.5rem; color: var(--slate); font-size: 1rem; max-width: 68ch; }
.faq-wrap { display: block; }

/* ---------- CTA band ---------- */
.cta-final, .cta-box, .about-cta-box, .features-cta-box, .usecases-cta-box, .trial-banner { background: var(--brass); color: var(--ink); text-align: center; border-radius: 6px; padding: clamp(2.5rem, 6vw, 4rem); }
section.cta-final, section .cta-box, section .about-cta-box, section .features-cta-box, section .usecases-cta-box { }
.cta-final h2, .cta-box h2, .about-cta-box h2, .features-cta-box h2, .usecases-cta-box h2 { color: var(--ink); font-size: clamp(1.9rem, 4.5vw, 3rem); font-weight: 400; max-width: 22ch; margin: 0 auto 1.2rem; }
.cta-final p, .cta-box p, .about-cta-box p, .features-cta-box p, .usecases-cta-box p { max-width: 56ch; margin: 0 auto 2rem; color: var(--ink-soft); font-size: 1.08rem; }
.cta-final .btn-ghost, .cta-box .btn-secondary { border-color: var(--ink); }
.trial-banner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: center; text-align: left; }
.trial-banner h2 { color: var(--ink); font-size: 2rem; margin-bottom: 0.8rem; }
.trial-points { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.trial-points li { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; }
.trial-points i { color: var(--ink); }
.subtext-center, .trust-note { text-align: center; color: var(--slate); margin-top: 2rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #c4cdd9; padding: clamp(3.5rem, 7vw, 5rem) 0 2rem; }
.footer-top, .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer-brand .brand { color: var(--ivory); font-size: 1.5rem; }
.footer-brand p { margin-top: 1rem; font-size: 0.93rem; color: #97a3b4; max-width: 32ch; }
.footer-brand .addr { margin-top: 1.3rem; font-size: 0.88rem; color: #97a3b4; line-height: 1.6; }
.footer-social { display: flex; gap: 1rem; margin-top: 1.2rem; }
.footer-social a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); display: grid; place-items: center; color: #b3bdca; transition: 0.2s; }
.footer-social a:hover { border-color: var(--brass-bright); color: var(--brass-bright); }
.footer-col h4 { font-family: var(--sans); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ivory); margin-bottom: 1.1rem; text-transform: uppercase; }
.footer-col ul, .footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.footer-col ul li a, .footer-links a { font-size: 0.92rem; color: #b3bdca; transition: color 0.2s; }
.footer-col ul li a:hover, .footer-links a:hover { color: var(--brass-bright); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 1.8rem; font-size: 0.85rem; color: #8593a6; flex-wrap: wrap; gap: 1rem; }
.footer-bottom-links { display: flex; gap: 1.4rem; }
.footer-bottom .socials, .footer-bottom-links a:hover { color: var(--brass-bright); }

/* ---------- Page hero (interior) ---------- */
.page-hero, .about-hero, .features-hero, .contact-hero, .usecases-hero, .careers-hero, .policy-page-section:first-child {
  background: var(--ink); color: var(--ivory); padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem);
}
.page-hero .eyebrow, .about-hero .eyebrow, .features-hero .eyebrow, .contact-hero .eyebrow, .usecases-hero .eyebrow, .careers-hero .eyebrow { margin-bottom: 1rem; }
.page-hero h1, .about-hero h1, .features-hero h1, .contact-hero h1, .usecases-hero h1, .careers-hero h1 { color: var(--ivory); font-size: clamp(2.1rem, 4.6vw, 3.3rem); font-weight: 400; max-width: 22ch; }
.page-hero p, .about-hero p, .features-hero p, .contact-hero p, .usecases-hero p, .careers-hero p { margin-top: 1.3rem; color: #c4ccd8; font-size: 1.1rem; max-width: 58ch; }
.text-gradient { color: var(--brass-bright); }
.about-hero-wrap, .features-hero-wrap, .contact-hero-wrap, .usecases-hero-wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.careers-hero-inner { max-width: 780px; margin: 0 auto; text-align: center; }
.careers-hero-inner .hero-cta { justify-content: center; }
.careers-hero-trust { text-align: center; color: #a9b3c2; font-size: 0.9rem; margin-top: 0.4rem; margin-bottom: 2rem; }
.careers-hero-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; border-top: 1px solid rgba(255,255,255,0.14); padding-top: 1.8rem; text-align: left; }
.careers-band-item strong { display: block; color: var(--ivory); font-family: var(--serif); font-size: 1.05rem; margin-bottom: 0.3rem; }
.careers-band-item span { color: #b3bccb; font-size: 0.88rem; }

/* Mini card grids inside hero panels (about/features/contact/usecases) */
.about-panel-grid, .about-mini-card, .features-flow, .contact-hero-grid, .contact-mini-card, .usecases-hero-grid, .usecases-mini-card { }
.about-panel-grid, .contact-hero-grid, .usecases-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.about-panel-top { padding: 0.9rem 1.2rem; background: var(--ivory); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 0.5rem; }
.about-mini-card, .contact-mini-card, .usecases-mini-card { background: var(--paper); padding: 1.5rem 1.3rem; }
.about-mini-icon, .contact-mini-icon, .usecases-mini-icon { display: inline-flex; width: 38px; height: 38px; border-radius: 4px; background: var(--ivory); color: var(--brass); align-items: center; justify-content: center; margin-bottom: 0.8rem; font-size: 1.1rem; }
.about-mini-card h3, .contact-mini-card h3, .usecases-mini-card h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.about-mini-card p, .contact-mini-card p, .usecases-mini-card p { font-size: 0.85rem; color: var(--slate); }
.features-flow { display: flex; flex-direction: column; gap: 0; padding: 1.2rem; }
.features-flow-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: 4px; border: 1px solid var(--line); background: var(--paper); }
.features-flow-item.is-active { border-color: var(--brass); background: var(--ivory); }
.features-flow-icon { width: 38px; height: 38px; border-radius: 4px; background: var(--white); color: var(--brass); display: grid; place-items: center; flex: 0 0 auto; }
.features-flow-item strong { display: block; font-size: 0.95rem; margin-bottom: 0.15rem; }
.features-flow-item span { font-size: 0.82rem; color: var(--slate); }
.features-flow-arrow { text-align: center; color: var(--brass); padding: 0.3rem 0; }

/* About stats / story / timeline */
.about-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.about-stat-card { text-align: center; padding: 2rem; }
.about-stat-number { display: block; font-family: var(--serif); font-size: 2.6rem; color: var(--brass); }
.about-stat-suffix { display: block; font-weight: 600; margin: 0.4rem 0 0.6rem; }
.about-stat-card p { color: var(--slate); font-size: 0.9rem; }
.about-story-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.about-story-copy { padding: clamp(1.8rem, 3vw, 2.6rem); }
.about-story-copy p { color: var(--slate); font-size: 1.02rem; margin-bottom: 1.1rem; }
.about-story-stack { display: flex; flex-direction: column; gap: 1.2rem; }
.about-story-card { display: flex; gap: 1rem; padding: 1.4rem; }
.about-story-icon { width: 40px; height: 40px; border-radius: 4px; background: var(--ivory); color: var(--brass); display: grid; place-items: center; flex: 0 0 auto; }
.about-story-card h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.about-story-card p { color: var(--slate); font-size: 0.9rem; }
.about-principles-wrap { display: grid; grid-template-columns: 0.9fr 1.6fr; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
.about-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.about-timeline-item { padding: 1.6rem; opacity: 0.6; transition: 0.25s; }
.about-timeline-item.is-active { opacity: 1; border-color: var(--brass); }
.about-timeline-content h3 { font-size: 1.05rem; margin: 0.6rem 0 0.4rem; }
.about-timeline-content p { color: var(--slate); font-size: 0.88rem; }
.about-audience-wrap { grid-template-columns: 1.2fr 1fr; padding: clamp(1.8rem, 3vw, 2.6rem); }
.about-audience-copy p { color: var(--slate); margin-bottom: 1rem; }
.about-audience-list { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.about-audience-pill { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--ivory); border: 1px solid var(--line); border-radius: 999px; padding: 0.5rem 1rem; font-size: 0.86rem; }
.about-audience-pill i { color: var(--brass); }

/* Positioning band (home) */
.positioning-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.point-stack { list-style: none; margin-top: 1.4rem; display: flex; flex-direction: column; gap: 0.7rem; }
.point-stack li { display: flex; align-items: center; gap: 0.6rem; }
.point-stack i { color: var(--brass); }

/* ---------- Prose (blog / about) ---------- */
.prose { max-width: 720px; margin: 0 auto; }
.prose p { margin-bottom: 1.4rem; color: var(--ink-soft); font-size: 1.08rem; line-height: 1.75; }
.prose h2 { font-size: 1.9rem; margin: 2.6rem 0 1.1rem; font-weight: 500; }
.prose h3 { font-size: 1.4rem; margin: 2rem 0 0.8rem; font-weight: 500; }
.prose ul, .prose ol { margin: 0 0 1.5rem 1.3rem; }
.prose li { margin-bottom: 0.6rem; color: var(--ink-soft); font-size: 1.05rem; }
.prose blockquote { border-left: 3px solid var(--brass); padding: 0.4rem 0 0.4rem 1.5rem; margin: 2rem 0; font-family: var(--serif); font-size: 1.3rem; font-style: italic; color: var(--ink); }
.prose a { color: var(--brass); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; }
.prose table th, .prose table td { border: 1px solid var(--line); padding: 0.7rem 1rem; text-align: left; }
.prose table th { background: var(--ivory); }

/* ---------- Blog listing / cards ---------- */
.post-grid, .blog-archive-grid, .blog-category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.post-card, .blog-post-card { background: var(--white); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s, border-color 0.2s; box-shadow: none; padding: 0; }
.post-card:hover, .blog-post-card:hover { border-color: var(--brass); transform: translateY(-3px); }
.post-card .pc-body, .blog-post-body { padding: 1.7rem; display: flex; flex-direction: column; flex-grow: 1; border: 0; }
.post-card .cat, .blog-meta-line { font-size: 0.78rem; font-weight: 600; color: var(--brass); margin-bottom: 0.8rem; }
.blog-meta-line { display: flex; justify-content: space-between; color: var(--slate); font-weight: 500; }
.blog-meta-line span:first-child a { color: var(--brass); }
.post-card h3, .blog-post-body h3 { font-size: 1.22rem; font-weight: 500; margin-bottom: 0.5rem; line-height: 1.28; }
.pc-author { font-size: 0.83rem; color: var(--slate); margin-bottom: 0.8rem; }
.pc-author a { color: var(--brass); font-weight: 600; }
.pc-author a:hover { text-decoration: underline; }
.post-card p, .blog-post-body p { font-size: 0.94rem; color: var(--slate); margin-bottom: 1.2rem; flex-grow: 1; }
.post-card .meta { font-size: 0.83rem; color: var(--slate); display: flex; justify-content: space-between; padding-top: 1rem; border-top: 1px solid var(--line); }
.post-card .read, .blog-read-link { color: var(--brass); font-weight: 600; font-size: 0.88rem; display: inline-flex; align-items: center; gap: 0.3rem; }
.blog-post-thumb { aspect-ratio: 16/10; overflow: hidden; background: var(--ivory); }
.blog-post-thumb img.banner-img { width: 100%; height: 100%; object-fit: cover; }

/* Blog archive — search lives in the hero, pill filters below, no sidebar */
.hero-search { display: flex; align-items: center; gap: 0.6rem; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; padding: 0.75rem 1.2rem; max-width: 420px; margin-top: 1.8rem; }
.hero-search i { color: var(--brass-bright); }
.hero-search input { flex: 1; border: 0; background: none; font-family: var(--sans); font-size: 0.98rem; color: var(--ivory); outline: none; }
.hero-search input::placeholder { color: #9aa6b8; }
.blog-archive-toolbar { margin-bottom: 2.6rem; padding: 0; background: none; border: none; }
.blog-category-pills { display: flex; flex-wrap: wrap; gap: 0.6rem; max-height: 6.2rem; overflow-y: auto; }
.blog-category-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid var(--line); background: var(--white); font-size: 0.85rem; color: var(--ink-soft); font-weight: 500; }
.blog-category-pill:hover { border-color: var(--brass); color: var(--brass); }
.blog-category-pill.active { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.blog-category-pill span { color: var(--brass); font-weight: 700; }
.blog-category-pill.active span { color: var(--brass-bright); }
.blog-newsletter-band { background: var(--ivory); border-radius: 6px; padding: clamp(1.6rem, 3vw, 2.4rem); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: clamp(2.5rem, 5vw, 4rem); }
.blog-newsletter-band h3 { font-size: 1.3rem; margin-bottom: 0.3rem; }
.blog-newsletter-band p { color: var(--slate); font-size: 0.95rem; }
.category-archive-layout { }

/* Article page — full-bleed, no boxed content card */
.blog-article-section { padding-top: clamp(3rem, 6vw, 4.5rem); }
.blog-article-head { max-width: 820px; margin: 0 auto 2.4rem; }
.blog-article-title { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 400; margin: 1rem 0 1.6rem; }
.blog-article-meta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.blog-article-author { display: flex; align-items: center; gap: 0.8rem; }
.blog-article-author-avatar { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: var(--ink); flex: 0 0 auto; }
.blog-article-author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.blog-article-author span { display: block; font-size: 0.78rem; color: var(--slate); }
.blog-article-author strong a { font-family: var(--serif); font-size: 1rem; color: var(--ink); }
.blog-article-meta-stack { display: flex; gap: 1.2rem; font-size: 0.85rem; color: var(--slate); }
.blog-article-meta-stack i { color: var(--brass); margin-right: 0.3rem; }
.blog-article-layout { display: grid; grid-template-columns: 240px 1fr; gap: 2.4rem; align-items: start; margin-top: 2.4rem; max-width: 980px; margin-left: auto; margin-right: auto; }
.blog-article-sidebar { position: sticky; top: 100px; }
.blog-article-sidebar-card { padding: 1.4rem; }
.blog-article-toc { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.55rem; }
.blog-article-toc a { font-size: 0.88rem; color: var(--slate); line-height: 1.4; }
.blog-article-toc a.active, .blog-article-toc a:hover { color: var(--brass); font-weight: 600; }
.blog-article-content { max-width: none; padding: 0; background: none; border: none; box-shadow: none; }
.blog-article-content h1 { font-size: 2rem; margin: 2.4rem 0 1.1rem; font-weight: 500; }
.blog-article-content h2 { font-size: 1.7rem; margin: 2.2rem 0 1rem; font-weight: 500; }
.blog-article-content h3 { font-size: 1.32rem; margin: 1.8rem 0 0.8rem; font-weight: 500; }
.blog-article-content h4, .blog-article-content h5, .blog-article-content h6 { font-size: 1.1rem; margin: 1.5rem 0 0.6rem; font-weight: 600; font-family: var(--sans); }
.blog-article-content p { margin-bottom: 1.3rem; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.75; }
.blog-article-content ul, .blog-article-content ol { margin: 0 0 1.4rem 1.3rem; }
.blog-article-content ul ul, .blog-article-content ol ol, .blog-article-content ul ol, .blog-article-content ol ul { margin: 0.5rem 0 0.5rem 1.3rem; }
.blog-article-content li { margin-bottom: 0.5rem; color: var(--ink-soft); line-height: 1.7; }
.blog-article-content a { color: var(--brass); text-decoration: underline; text-underline-offset: 3px; }
.blog-article-content strong, .blog-article-content b { color: var(--ink); font-weight: 700; }
.blog-article-content em, .blog-article-content i { font-style: italic; }
.blog-article-content u { text-decoration: underline; }
.blog-article-content s, .blog-article-content del, .blog-article-content strike { text-decoration: line-through; color: var(--slate); }
.blog-article-content mark { background: var(--ivory-deep); color: var(--ink); padding: 0.05em 0.2em; border-radius: 2px; }
.blog-article-content code { background: var(--ivory); color: var(--ink); padding: 0.15em 0.4em; border-radius: 3px; font-size: 0.9em; font-family: "SFMono-Regular", Consolas, Menlo, monospace; }
.blog-article-content pre { background: var(--ink); color: var(--ivory); padding: 1.2rem 1.4rem; border-radius: 4px; overflow-x: auto; margin: 0 0 1.4rem; }
.blog-article-content pre code { background: none; color: inherit; padding: 0; }
.blog-article-content blockquote { border-left: 3px solid var(--brass); padding: 0.4rem 0 0.4rem 1.5rem; margin: 2rem 0; font-family: var(--serif); font-size: 1.25rem; font-style: italic; color: var(--ink); }
.blog-article-content blockquote p:last-child { margin-bottom: 0; }
.blog-article-content hr { border: 0; border-top: 1px solid var(--line); margin: 2.4rem 0; }
.blog-article-content img { border-radius: 4px; margin: 0.5rem 0; }
.blog-article-content figure { margin: 1.8rem 0; }
.blog-article-content figure.image, .blog-article-content figure.table { margin: 1.8rem 0; }
.blog-article-content figure img { width: 100%; border-radius: 4px; }
.blog-article-content figcaption { text-align: center; font-size: 0.85rem; color: var(--slate); margin-top: 0.6rem; }
.blog-article-content .image-style-align-left, .blog-article-content .image-style-side { float: left; margin: 0.3rem 1.6rem 1rem 0; max-width: 45%; }
.blog-article-content .image-style-align-right { float: right; margin: 0.3rem 0 1rem 1.6rem; max-width: 45%; }
.blog-article-content .image-style-align-center { margin-left: auto; margin-right: auto; }
.blog-article-content table, .blog-article-content .table table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: 0.96rem; }
.blog-article-content table th, .blog-article-content table td { border: 1px solid var(--line); padding: 0.7rem 1rem; text-align: left; }
.blog-article-content table th { background: var(--ivory); font-weight: 600; }
.blog-article-content iframe { max-width: 100%; border-radius: 4px; margin: 1.6rem 0; }

/* Comments — full-width, separate from the article column */
.wn-cmt-section { padding: clamp(3rem, 6vw, 4.5rem) 0; background: var(--ivory); margin-top: clamp(2.5rem, 5vw, 4rem); }
.wn-cmt-section .wrap { max-width: 820px; }
.wn-cmt-section h3 { font-size: 1.7rem; margin-bottom: 1.6rem; }
.wn-cmt-compose { background: var(--white); border: 1px solid var(--line); border-radius: 4px; padding: 1.2rem; margin-bottom: 1.6rem; }
.wn-cmt-compose textarea, .wn-cmt-reply-compose textarea {
  width: 100%; min-height: 90px; border: 1px solid var(--line); border-radius: 3px; padding: 0.8rem;
  font-family: var(--sans); font-size: 0.96rem; line-height: 1.5; resize: vertical; margin-bottom: 0.8rem;
  background: var(--paper); color: var(--ink); display: block;
}
.wn-cmt-compose textarea:focus, .wn-cmt-reply-compose textarea:focus { outline: none; border-color: var(--brass); }
.wn-cmt-compose button, .wn-cmt-compose a button, .wn-cmt-reply-compose button {
  background: var(--brass); color: var(--ink); border: 0; padding: 0.6rem 1.3rem; border-radius: 2px;
  font-weight: 600; font-family: var(--sans); font-size: 0.92rem; cursor: pointer;
}
.wn-cmt-compose button:hover, .wn-cmt-reply-compose button:hover { background: var(--ink); color: var(--paper); }
.wn-cmt-card { border-top: 1px solid var(--line); padding: 1.4rem 0; }
.wn-cmt-author { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.7rem; }
.wn-cmt-author img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.wn-cmt-author h4 { font-size: 0.95rem; }
.wn-cmt-author span { font-size: 0.78rem; color: var(--slate); }
.wn-cmt-card p { color: var(--ink-soft); font-size: 0.97rem; margin-bottom: 0.5rem; }
.wn-cmt-login-hint, .wn-cmt-reply-trigger { font-size: 0.83rem; color: var(--brass); font-weight: 600; cursor: pointer; }
.wn-cmt-reply-compose { margin-top: 0.8rem; max-width: 480px; }
.wn-cmt-replies { margin-top: 1rem; padding-left: 2.2rem; display: flex; flex-direction: column; gap: 1rem; border-left: 2px solid var(--line); }
.wn-cmt-reply-item h5 { font-size: 0.88rem; }

/* Author profile page — dark hero, no cards */
.author-hero { background: var(--ink); color: var(--ivory); padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem); }
.author-hero-inner { display: flex; gap: clamp(1.6rem, 4vw, 2.6rem); flex-wrap: wrap; }
.author-hero-avatar { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; background: var(--ink-soft); flex: 0 0 auto; border: 3px solid rgba(255,255,255,0.12); }
.author-hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-hero-inner h1 { color: var(--ivory); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 400; margin-bottom: 0.6rem; }
.author-hero-role { color: var(--brass-bright); font-size: 0.95rem; font-weight: 600; margin-bottom: 0.8rem; display: flex; align-items: center; gap: 0.4rem; }
.author-hero-bio { color: #c4ccd8; font-size: 1.05rem; max-width: 58ch; margin-bottom: 1.1rem; }
.author-hero-meta { color: #a9b3c2; font-size: 0.88rem; margin-bottom: 1.4rem; }
.author-hero-meta i { color: var(--brass-bright); margin-right: 0.35rem; }
.author-hero-social { display: flex; gap: 0.9rem; }
.author-hero-social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; color: var(--ivory); font-size: 1.15rem; transition: 0.2s; }
.author-hero-social a:hover { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.btn-outline-light { background: transparent; color: var(--ivory); border-color: rgba(255,255,255,0.3); }
.btn-outline-light:hover { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.author-post { padding-top: clamp(3.5rem, 8vw, 6.5rem); }

/* Pagination (Bootstrap 4 markup from Laravel paginator) */
.paginator { margin-top: 2.6rem; display: flex; justify-content: center; }
.pagination { display: flex; list-style: none; gap: 0.4rem; }
.pagination li, .page-item { }
.pagination li a, .pagination li span, .page-link {
  display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 0.7rem;
  border: 1px solid var(--line); border-radius: 3px; color: var(--ink-soft); font-size: 0.9rem; background: var(--white);
}
.pagination li a:hover, .page-link:hover { border-color: var(--brass); color: var(--brass); }
.pagination li.active span, .page-item.active .page-link { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.pagination li.disabled span, .page-item.disabled .page-link { color: var(--line); }

/* ---------- Contact ---------- */
.contact-main-grid, .contact-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact-form-wrap, .form-card { padding: clamp(1.6rem, 4vw, 2.6rem); }
.contact-form-head { margin-bottom: 1.8rem; }
.contact-form-grid, .signup-form-grid, .careers-apply-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.contact-field, .field, .careers-field { margin-bottom: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.contact-field-full, .signup-field-full, .careers-field-full { grid-column: 1 / -1; }
.contact-field label, .field label, .careers-field label { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.contact-field input, .contact-field select, .contact-field textarea,
.field input, .field select, .field textarea,
.careers-field input, .careers-field select, .careers-field textarea,
.signup-field input {
  width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: 3px;
  font-family: var(--sans); font-size: 1rem; color: var(--ink); background: var(--paper);
  transition: border-color 0.2s;
}
.contact-field input:focus, .contact-field select:focus, .contact-field textarea:focus,
.field input:focus, .field select:focus, .field textarea:focus,
.careers-field input:focus, .careers-field textarea:focus,
.signup-field input:focus { outline: none; border-color: var(--brass); }
.contact-field textarea, .field textarea, .careers-field textarea { resize: vertical; min-height: 130px; }
.contact-form-actions, .careers-form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.contact-form-note, .careers-form-note, .form-note { font-size: 0.85rem; color: var(--slate); }
.contact-side-stack { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-info-card, .contact-response-card { padding: clamp(1.6rem, 3vw, 2rem); }
.contact-info-card h3, .contact-response-card h3 { font-size: 1.3rem; margin: 0.8rem 0; }
.contact-info-card p, .contact-response-card p { color: var(--slate); font-size: 0.94rem; margin-bottom: 1.2rem; }
.contact-info-list { display: flex; flex-direction: column; gap: 1rem; }
.contact-info-row { display: flex; gap: 0.9rem; align-items: flex-start; }
.contact-info-icon { width: 38px; height: 38px; border-radius: 4px; background: var(--ivory); color: var(--brass); display: grid; place-items: center; flex: 0 0 auto; }
.contact-info-row strong { display: block; font-size: 0.9rem; }
.contact-info-row span { font-size: 0.88rem; color: var(--slate); }
.contact-response-points { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.contact-response-points i { color: var(--brass); margin-right: 0.5rem; }
.contact-options-wrap { display: grid; grid-template-columns: 0.9fr 1.6fr; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
.contact-options-grid, .careers-culture-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.contact-option-card { padding: 1.8rem; }
.contact-option-card h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.contact-option-card p { color: var(--slate); font-size: 0.92rem; }

/* Alerts */
.alert { border-radius: 4px; padding: 0.9rem 1.2rem; margin-bottom: 1.5rem; font-size: 0.92rem; }
.alert-success { background: #eaf5ee; color: var(--success); border: 1px solid #bfe3cc; }
.alert-danger { background: #fbecec; color: var(--danger); border: 1px solid #eeb9b9; }

/* ---------- Legal / policy prose ---------- */
.policy-page-wrap { max-width: 860px; margin: 0 auto; }
.policy-page-card, .legal { padding: clamp(2rem, 4vw, 3rem); }
.policy-page-title, .legal h1 { font-size: 2.2rem; margin-bottom: 0.6rem; }
.policy-page-meta { color: var(--slate); font-size: 0.9rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); margin-bottom: 1.6rem; }
.policy-page-intro { color: var(--ink-soft); font-size: 1.05rem; margin-bottom: 0; }
.policy-page-content h2, .legal h2 { font-size: 1.45rem; margin: 2.2rem 0 0.9rem; font-weight: 500; }
.policy-page-content h3, .legal h3 { font-size: 1.1rem; margin: 1.5rem 0 0.6rem; font-weight: 600; font-family: var(--sans); }
.policy-page-content p, .legal p { margin-bottom: 1.1rem; color: var(--ink-soft); font-size: 1rem; line-height: 1.72; }
.policy-page-content ul, .legal ul { margin: 0 0 1.2rem 1.3rem; }
.policy-page-content li, .legal li { margin-bottom: 0.5rem; color: var(--ink-soft); font-size: 0.98rem; }

/* ---------- Signup / Login — form only, light section ---------- */
.auth-section { background: var(--ivory); padding: clamp(3.5rem, 8vw, 6rem) 0; }
.auth-head { text-align: center; max-width: 480px; margin: 0 auto 2.2rem; }
.auth-head .eyebrow { display: block; }
.auth-head h1 { font-size: clamp(1.8rem, 3.6vw, 2.3rem); font-weight: 400; margin-bottom: 0.6rem; }
.auth-head p { color: var(--slate); font-size: 1rem; }
.signup-form-card { background: var(--white); color: var(--ink); border-radius: 6px; box-shadow: var(--shadow); padding: clamp(1.8rem, 3vw, 2.6rem); border: 1px solid var(--line); max-width: 480px; margin: 0 auto; }
.signup-form-head { margin-bottom: 1.6rem; text-align: center; }
.signup-form-head h2 { font-size: 1.5rem; margin: 0.7rem 0 0.4rem; }
.signup-form-head p { color: var(--slate); font-size: 0.94rem; }
.signup-trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; max-width: 480px; margin: 1.8rem auto 0; }
.signup-trust-chip { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 0.5rem 1rem; font-size: 0.82rem; color: var(--ink-soft); }
.signup-trust-chip i { color: var(--brass); }
.signup-password-wrap { position: relative; }
.signup-password-wrap input { padding-right: 2.8rem !important; }
.signup-password-toggle { position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--slate); cursor: pointer; padding: 0.5rem; font-size: 1.1rem; }
.signup-check { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.86rem; color: var(--slate); grid-column: 1 / -1; }
.signup-check a { color: var(--brass); text-decoration: underline; }
.signup-submit { grid-column: 1 / -1; width: 100%; }
.signup-divider { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; color: var(--slate); font-size: 0.82rem; text-align: center; }
.signup-divider::before, .signup-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.signup-socials { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.signup-social-btn { display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.75rem; font-size: 0.9rem; }
.signup-login-text { grid-column: 1 / -1; text-align: center; font-size: 0.9rem; color: var(--slate); }
.signup-login-text a { color: var(--brass); font-weight: 600; }

/* ---------- Careers page ---------- */
.careers-culture-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.careers-culture-copy p, .careers-culture-text { color: var(--slate); font-size: 1.02rem; margin: 1rem 0; }
.careers-section-head-center { margin: 0 auto; text-align: center; max-width: 680px; }
.careers-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
.careers-why-card { padding: 1.8rem; }
.careers-why-card h3 { font-size: 1.15rem; margin: 0.6rem 0; }
.careers-why-card p { color: var(--slate); font-size: 0.92rem; }
.careers-jobs-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2rem; align-items: start; }
.careers-job-list { display: flex; flex-direction: column; gap: 1.4rem; }
.careers-job-card { padding: 1.8rem; }
.careers-job-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.careers-job-meta { display: flex; gap: 0.6rem; margin-bottom: 0.5rem; }
.careers-job-meta span { font-size: 0.74rem; font-weight: 600; background: var(--ivory); border: 1px solid var(--line); color: var(--brass); padding: 0.25rem 0.6rem; border-radius: 999px; }
.careers-job-card h3 { font-size: 1.25rem; }
.careers-job-card p { color: var(--slate); font-size: 0.94rem; }
.careers-jobs-side { display: flex; flex-direction: column; gap: 1.4rem; }
.careers-jobs-side-card { padding: 1.6rem; }
.careers-jobs-side-card h3 { font-size: 1.1rem; margin: 0.6rem 0; }
.careers-jobs-side-card p { color: var(--slate); font-size: 0.9rem; margin-bottom: 1rem; }
.careers-jobs-side-soft { background: var(--ivory); border-color: var(--ivory-deep); }
.careers-contact-anchor { scroll-margin-top: 100px; }
.careers-apply-box { margin-top: 3rem; padding: clamp(1.8rem, 3vw, 2.6rem); }
.careers-apply-copy { margin-bottom: 1.8rem; }

/* ---------- Trust strip ---------- */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--ivory); padding: 1.8rem 0; }
.trust-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.trust-inner .t-item { font-size: 0.92rem; color: var(--ink-soft); font-weight: 500; }
.trust-inner .t-item b { font-family: var(--serif); color: var(--brass); }

/* ---------- Pricing toggle ---------- */
.price-toggle { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 2.6rem; }
.price-toggle span { font-size: 0.95rem; font-weight: 600; color: var(--slate); transition: color 0.2s; }
.price-toggle span.active { color: var(--ink); }
.price-toggle .save { font-size: 0.75rem; background: var(--brass); color: var(--ink); padding: 0.2rem 0.55rem; border-radius: 2px; font-weight: 700; margin-left: 0.2rem; }
.switch { position: relative; width: 52px; height: 28px; background: var(--ink); border-radius: 999px; cursor: pointer; border: 0; flex: 0 0 auto; }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: var(--paper); border-radius: 50%; transition: transform 0.25s; }
.switch.annual .knob { transform: translateX(24px); }
.plan .price .per-annual, .price-card .price .per-annual { display: none; }
.price-grid.show-annual .plan .price .per-month,
.pricing-grid.show-annual .price-card .price .per-month { display: none; }
.price-grid.show-annual .plan .price .per-annual,
.pricing-grid.show-annual .price-card .price .per-annual { display: inline; }
.plan .billed .a, .price-card .billed .a { display: none; }
.price-grid.show-annual .plan .billed .m,
.pricing-grid.show-annual .price-card .billed .m { display: none; }
.price-grid.show-annual .plan .billed .a,
.pricing-grid.show-annual .price-card .billed .a { display: inline; }

/* ---------- 404 ---------- */
.error-404 { text-align: center; padding: clamp(3rem, 8vw, 6rem) 0; }
.error-404 h2 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 1rem; }
.error-404 p { color: var(--slate); margin-bottom: 2rem; }

/* ---------- Flow steps (connected pipeline) ---------- */
.flow, .process-grid { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 0; }
.process-grid { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.flow .node, .step-card { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 2rem 1.8rem; position: relative; display: flex; flex-direction: column; }
.step-no { font-family: var(--serif); font-size: 2.4rem; color: var(--brass); margin-bottom: 0.8rem; }
.flow .node .badge-num {
  position: absolute; top: -16px; left: 1.8rem; width: 34px; height: 34px; border-radius: 50%;
  background: var(--brass); color: var(--ink); display: grid; place-items: center; font-family: var(--serif);
  font-size: 1.05rem; font-weight: 600; border: 3px solid var(--paper);
}
.flow .node .node-ic { width: 40px; height: 40px; border-radius: 4px; background: var(--ivory); display: grid; place-items: center; margin: 0.6rem 0 1rem; color: var(--brass); }
.flow .node h3, .step-card h3 { font-size: 1.25rem; font-weight: 500; margin-bottom: 0.55rem; }
.flow .node p, .step-card p { color: var(--slate); font-size: 0.95rem; margin: 0; }
.flow .connector { display: grid; place-items: center; padding: 0 0.6rem; color: var(--brass); }
.band .flow .node { background: var(--ink-soft); border-color: rgba(255,255,255,0.14); }
.band .flow .node h3 { color: var(--ivory); }
.band .flow .node p { color: #b3bccb; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .about-hero-wrap, .features-hero-wrap, .contact-hero-wrap, .usecases-hero-wrap,
  .blog-article-layout,
  .contact-main-grid, .careers-jobs-layout, .about-story-grid, .about-principles-wrap,
  .contact-options-wrap, .value-wrap, .trial-banner, .positioning-wrap,
  .features-split-wrap, .usecases-split-wrap, .about-audience-wrap { grid-template-columns: 1fr; }
  .blog-article-sidebar { position: static; order: 2; }
  .flow, .process-grid { grid-template-columns: 1fr; }
  .flow .connector { transform: rotate(90deg); padding: 0.4rem 0; }
}
@media (max-width: 900px) {
  .hero-grid, .hero-wrap, .editorial, .about-timeline { grid-template-columns: 1fr; }
  .feature-grid, .feat-row, .features-grid-main, .usecase-grid, .usecases-main-grid,
  .steps, .careers-culture-grid, .about-principles-grid, .features-category-grid,
  .price-grid, .pricing-grid, .post-grid, .blog-archive-grid, .blog-category-grid,
  .about-stats-grid, .careers-why-grid, .contact-options-grid, .about-panel-grid,
  .contact-hero-grid, .usecases-hero-grid, .about-timeline, .careers-hero-band { grid-template-columns: 1fr 1fr; }
  .footer-top, .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-main { display: none; }
  .nav-drawer {
    display: flex; position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: min(84vw, 320px);
    background: var(--paper); flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: 0 var(--gutter) 2rem; border-left: 1px solid var(--line);
    transform: translateX(100%); transition: transform 0.3s ease; box-shadow: var(--shadow);
    overflow-y: auto; z-index: 100;
  }
  body.menu-open .nav-drawer { transform: translateX(0); }
  .nav-main-head { display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 0; margin-bottom: 1rem; border-bottom: 1px solid var(--line); }
  .nav-close { display: flex; background: none; border: 0; cursor: pointer; padding: 6px; font-size: 1.5rem; color: var(--ink); }
  .nav-drawer .nav-links, .nav-list { flex-direction: column; align-items: flex-start; gap: 1.2rem; width: 100%; }
  .nav-main-cta { display: block; margin-top: 1.8rem; }
  .nav-main-cta .btn { display: block; width: 100%; text-align: center; }
  .nav-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(16, 35, 59, 0.45); z-index: 90;
    opacity: 0; visibility: hidden; transition: opacity 0.3s ease;
  }
  body.menu-open .nav-backdrop { opacity: 1; visibility: visible; }
  .nav-toggle, .menu-toggle { display: block; }
  .hero-meta { padding-top: 1.5rem; }
  .hero-meta .stat { padding: 0 1rem; }
  .hero-meta .stat b { font-size: 1.35rem; }
  .hero-meta .stat span { font-size: 0.78rem; }
  .contact-form-grid, .signup-form-grid, .careers-apply-form { grid-template-columns: 1fr; }
  .signup-socials { grid-template-columns: 1fr; }
  .nav { flex-wrap: nowrap; }
  .nav-actions { gap: 0.6rem; }
  a.nav-cta { padding: 0.55rem 0.85rem; font-size: 0.82rem; white-space: nowrap; }
  .brand { font-size: 1.35rem; }
  .hero-search { max-width: none; }
  body.menu-open { overflow: hidden; }
}
@media (max-width: 560px) {
  .footer-top, .footer-grid { grid-template-columns: 1fr; }
  .hero-actions, .hero-cta { flex-direction: column; }
  .hero-actions .btn, .hero-cta .btn { text-align: center; }
  .feature-grid, .feat-row, .features-grid-main, .usecase-grid, .usecases-main-grid,
  .steps, .careers-culture-grid, .about-principles-grid, .features-category-grid,
  .price-grid, .pricing-grid, .post-grid, .blog-archive-grid, .blog-category-grid,
  .about-stats-grid, .careers-why-grid, .contact-options-grid, .about-panel-grid,
  .contact-hero-grid, .usecases-hero-grid, .about-timeline, .careers-hero-band { grid-template-columns: 1fr; }
  .trial-banner { text-align: center; }
  .trial-points { align-items: center; }
}