*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --ink:#0f0d0a;
  --ink2:#2a2520;
  --muted:#6b6560;
  --faint:#9b9590;
  --bg:#faf8f4;
  --bg2:#f3f0ea;
  --bg3:#ebe7de;
  --amber:#c8820a;
  --amber-light:#fdf3e0;
  --rule:#d8d3c8;
  --serif:'Playfair Display',Georgia,serif;
  --sans:'IBM Plex Sans',sans-serif;
  --mono:'IBM Plex Mono',monospace;
}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;font-size:15px;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1080px;margin:0 auto;padding:0 32px;}

/* ── Navigation ── */
nav{
  background:var(--bg);
  border-bottom:1px solid var(--rule);
  padding:0 32px;
  display:flex;align-items:center;justify-content:space-between;
  height:60px;
  position:sticky;top:0;z-index:100;
}
.logo{font-family:var(--serif);font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-0.01em;}
.logo em{color:var(--amber);font-style:normal;}
.nav-links{display:flex;gap:24px;font-size:13px;color:var(--muted);font-weight:400;}
.nav-links a:hover{color:var(--ink);transition:color 0.2s;}
.nav-right{display:flex;gap:10px;align-items:center;}
.nav-signin{font-size:13px;color:var(--muted);padding:7px 14px;transition:color 0.2s;}
.nav-signin:hover{color:var(--ink);}
.nav-trial{
  background:var(--ink);color:var(--bg);
  padding:8px 18px;font-size:13px;font-weight:500;
  font-family:var(--sans);border-radius:4px;
  transition:background 0.2s;display:inline-block;
}
.nav-trial:hover{background:var(--ink2);}

/* ── Hero ── */
.hero{padding:72px 0 56px;border-bottom:1px solid var(--rule);}
.hero-inner{display:grid;grid-template-columns:1fr 420px;gap:64px;align-items:center;}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;color:var(--amber);
  letter-spacing:0.08em;text-transform:uppercase;
  border:1px solid #e8c97a;background:var(--amber-light);
  padding:4px 10px;border-radius:3px;margin-bottom:20px;
}
.hero-eyebrow-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--amber);animation:blink 1.8s infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.2}}
.hero h1{
  font-family:var(--serif);
  font-size:clamp(40px,5vw,60px);
  font-weight:900;
  line-height:1.05;
  letter-spacing:-0.025em;
  color:var(--ink);
  margin-bottom:20px;
}
.hero h1 span{color:var(--amber);}
.hero-desc{font-size:17px;color:var(--muted);line-height:1.75;font-weight:300;max-width:460px;margin-bottom:32px;}
.hero-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.hero-note{font-size:12px;color:var(--faint);margin-top:12px;}

/* ── Buttons ── */
.btn-fill{
  background:var(--amber);color:#fff;
  padding:13px 26px;border-radius:4px;
  font-size:14px;font-weight:600;
  border:none;cursor:pointer;font-family:var(--sans);
  transition:background 0.2s,transform 0.15s;
  display:inline-block;
}
.btn-fill:hover{background:#a86b06;transform:translateY(-1px);}
.btn-ghost{
  color:var(--ink);padding:12px 22px;border-radius:4px;
  font-size:14px;font-weight:500;
  border:1.5px solid var(--rule);
  cursor:pointer;font-family:var(--sans);
  transition:border-color 0.2s,background 0.2s;
  display:inline-block;background:transparent;
}
.btn-ghost:hover{border-color:var(--ink2);background:var(--bg2);}

/* ── Hero card ── */
.hero-card{
  background:var(--bg2);border:1px solid var(--rule);
  border-radius:6px;padding:28px;
}
.hero-card-title{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:20px;}
.flow-mini{display:flex;flex-direction:column;gap:12px;}
.flow-row{display:flex;align-items:center;gap:12px;}
.flow-icon{
  width:36px;height:36px;border-radius:4px;
  background:var(--bg3);border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;flex-shrink:0;
}
.flow-label{font-size:13px;font-weight:500;color:var(--ink2);}
.flow-sub{font-size:12px;color:var(--faint);}
.flow-arrow{color:var(--amber);font-size:12px;padding:4px 0 4px 12px;font-family:var(--mono);}
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px;}
.mini-stat{background:var(--bg);border:1px solid var(--rule);border-radius:4px;padding:12px 14px;}
.mini-stat-num{font-family:var(--mono);font-size:20px;font-weight:500;color:var(--ink);margin-bottom:2px;}
.mini-stat-label{font-size:11px;color:var(--faint);}

/* ── Sections ── */
.section{padding:72px 0;border-bottom:1px solid var(--rule);}
.section-label{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--faint);margin-bottom:8px;}
.section-title{font-family:var(--serif);font-size:clamp(26px,3.5vw,38px);font-weight:700;letter-spacing:-0.02em;color:var(--ink);margin-bottom:14px;line-height:1.15;}
.section-desc{font-size:15px;color:var(--muted);max-width:440px;font-weight:300;line-height:1.75;}

/* ── How it works ── */
.how-steps{display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid var(--rule);border-radius:6px;overflow:hidden;margin-top:48px;}
.how-step{padding:32px 28px;position:relative;}
.how-step+.how-step{border-left:1px solid var(--rule);}
.how-step-n{font-family:var(--serif);font-size:52px;font-weight:900;color:var(--bg3);line-height:1;margin-bottom:16px;}
.how-step-title{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:8px;}
.how-step-desc{font-size:13px;color:var(--muted);line-height:1.65;}
.how-step-tag{font-family:var(--mono);font-size:10px;color:var(--amber);letter-spacing:0.06em;text-transform:uppercase;margin-bottom:12px;}

/* ── Features ── */
.features-layout{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:48px;border:1px solid var(--rule);border-radius:6px;overflow:hidden;}
.feat{padding:28px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.feat:nth-child(2n){border-right:none;}
.feat:nth-last-child(-n+2){border-bottom:none;}
.feat-num{font-family:var(--mono);font-size:11px;color:var(--amber);margin-bottom:10px;}
.feat-title{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:6px;}
.feat-desc{font-size:13px;color:var(--muted);line-height:1.65;}

/* ── Changelog ── */
.new-grid{display:flex;flex-direction:column;gap:0;margin-top:48px;border:1px solid var(--rule);border-radius:6px;overflow:hidden;}
.new-row{display:flex;align-items:flex-start;gap:20px;padding:18px 24px;border-bottom:1px solid var(--rule);}
.new-row:last-child{border-bottom:none;}
.new-pill{font-family:var(--mono);font-size:10px;letter-spacing:0.06em;padding:3px 8px;border-radius:3px;flex-shrink:0;margin-top:2px;background:var(--amber-light);color:var(--amber);border:1px solid #e8c97a;}
.new-pill.upd{background:var(--bg2);color:var(--muted);border-color:var(--rule);}
.new-text{font-size:14px;color:var(--muted);}
.new-text strong{color:var(--ink);font-weight:600;}

/* ── Pricing ── */
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:48px;border:1px solid var(--rule);border-radius:6px;overflow:hidden;}
.price-col{padding:28px 24px;border-right:1px solid var(--rule);display:flex;flex-direction:column;}
.price-col:last-child{border-right:none;}
.price-col.featured{background:var(--ink);color:#fff;}
.price-col.featured .price-tier{color:#aaa9a4;}
.price-col.featured .price-amount{color:#fff;}
.price-col.featured .price-cents{color:#888;}
.price-col.featured .price-period{color:#888;}
.price-col.featured .price-rule{border-color:rgba(255,255,255,0.1);}
.price-col.featured .price-feat{color:#aaa;}
.price-col.featured .price-feat-check{color:#f0c040;}
.price-hot{font-family:var(--mono);font-size:10px;letter-spacing:0.08em;color:var(--amber);background:var(--amber-light);border:1px solid #e8c97a;padding:3px 8px;border-radius:3px;display:inline-block;margin-bottom:14px;width:fit-content;}
.price-tier{font-size:12px;font-weight:500;color:var(--muted);margin-bottom:10px;letter-spacing:0.03em;}
.price-amount{font-family:var(--serif);font-size:38px;font-weight:700;color:var(--ink);line-height:1;display:flex;align-items:baseline;gap:2px;}
.price-cents{font-size:18px;font-weight:400;color:var(--muted);}
.price-period{font-size:12px;color:var(--faint);margin-top:4px;}
.price-rule{border:none;border-top:1px solid var(--rule);margin:18px 0;}
.price-feat{font-size:13px;color:var(--muted);padding:4px 0;display:flex;gap:8px;}
.price-feat-check{color:var(--amber);font-size:12px;}
.price-feat.hl{color:var(--ink);font-weight:500;}
.price-feat.hl-inv{color:#fff;font-weight:500;}
.price-footnote{font-size:12px;color:var(--faint);text-align:center;margin-top:16px;}
.btn-price{
  margin-top:auto;padding-top:20px;
  display:block;width:100%;padding:11px;
  background:#fff;color:var(--ink);
  border:none;border-radius:4px;font-size:13px;font-weight:500;
  cursor:pointer;font-family:var(--sans);transition:background 0.2s;
}
.btn-price:hover{background:#e8e4dc;}
.btn-price-out{
  margin-top:auto;padding-top:20px;
  display:block;width:100%;padding:11px;
  background:transparent;color:var(--ink);
  border:1.5px solid var(--rule);border-radius:4px;font-size:13px;font-weight:500;
  cursor:pointer;font-family:var(--sans);transition:border-color 0.2s,background 0.2s;
}
.btn-price-out:hover{border-color:var(--ink);background:var(--bg2);}

/* ── Testimonials ── */
.reviews-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:48px;}
.review{border:1px solid var(--rule);border-radius:6px;padding:24px;transition:border-color 0.2s;}
.review:hover{border-color:var(--amber);}
.review-text{font-size:14px;color:var(--muted);line-height:1.75;margin-bottom:18px;font-style:italic;}
.review-author{display:flex;align-items:center;gap:10px;}
.review-init{
  width:32px;height:32px;border-radius:50%;
  background:var(--amber-light);color:var(--amber);
  font-family:var(--mono);font-size:11px;font-weight:500;
  display:flex;align-items:center;justify-content:center;
  border:1px solid #e8c97a;flex-shrink:0;
}
.review-name{font-size:13px;font-weight:600;color:var(--ink2);}

/* ── Footer ── */
footer{
  padding:32px;display:flex;align-items:center;
  justify-content:space-between;flex-wrap:wrap;gap:16px;
  border-top:1px solid var(--rule);background:var(--bg2);
}
.footer-logo{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--ink);}
.footer-logo em{color:var(--amber);font-style:normal;}
.footer-copy{font-size:12px;color:var(--faint);margin-top:2px;}
.footer-links{display:flex;gap:18px;font-size:12px;color:var(--muted);flex-wrap:wrap;}
.footer-links a:hover{color:var(--ink);transition:color 0.2s;}

/* ── Responsive ── */
@media(max-width:820px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-card{display:none;}
  .features-layout{grid-template-columns:1fr;}
  .feat{border-right:none!important;}
  .feat:nth-last-child(-n+2){border-bottom:1px solid var(--rule);}
  .feat:last-child{border-bottom:none;}
  .how-steps{grid-template-columns:1fr;}
  .how-step+.how-step{border-left:none;border-top:1px solid var(--rule);}
  .pricing-grid{grid-template-columns:1fr 1fr;}
  .price-col:nth-child(2){border-right:none;}
  .price-col:nth-child(3){border-top:1px solid var(--rule);}
  .price-col:nth-child(4){border-top:1px solid var(--rule);border-right:none;}
  .reviews-grid{grid-template-columns:1fr;}
  .nav-links{display:none;}
  footer{flex-direction:column;text-align:center;}
  .footer-links{justify-content:center;}
}
@media(max-width:480px){
  .wrap{padding:0 20px;}
  nav{padding:0 20px;}
  .pricing-grid{grid-template-columns:1fr;}
  .price-col{border-right:none!important;border-top:1px solid var(--rule);}
  .price-col:first-child{border-top:none;}
}

/* ===== Page layout ===== */
.page-layout {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

/* ===== Main content ===== */
.page-content {
  flex: 1 1 auto;
  min-width: 0;
}

/* ===== TOC sidebar ===== */
.toc-sidebar {
  flex: 0 0 260px;
}

/* Inner box */
.toc-inner {
  border-left: 3px solid rgba(0,0,0,0.08);
  padding-left: 1rem;
  font-size: 0.9rem;
}

/* Title */
.toc-title {
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 0.75rem;
}

/* Navigation */
.toc-nav ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.toc-nav ul ul {
  padding-left: 1rem;
  margin-top: 0.25rem;
}

.toc-nav li {
  margin: .25rem 0;
}

.toc-nav a {
  color: inherit;
  text-decoration: none;
  opacity: 0.85;
}

.toc-nav a:hover {
  text-decoration: underline;
  opacity: 1;
}

/* ===== Optional sticky behavior (SAFE) ===== */
@media (min-width: 1024px) {
  .toc-inner {
    position: sticky;
    top: 1.5rem;
  }
}

/* ===== Mobile ===== */
@media (max-width: 900px) {
  .page-layout {
    flex-direction: column;
  }

  .toc-sidebar {
    order: -1;
    width: 100%;
  }

  .toc-inner {
    border-left: none;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
  }
}

.nav-mobile-btn {
  display: none;
  font-size: 20px;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-mobile-panel {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  background: var(--bg);
  padding: 20px;
  display: none;
  flex-direction: column;
  gap: 12px;
  z-index: 300;
}

.nav-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  display: none;
  z-index: 250;
}

@media (max-width: 820px) {
  .nav-links { display: none; }
  .nav-mobile-btn { display: block; }
}

/* ─── Reset & base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

img { cursor: zoom-in; max-width: 100%; height: auto; display: block; border-radius: 6px; border: 1px solid var(--rule); }

/* ─── Docs layout shell ─────────────────────────────────────── */
.docs-shell {
  display: flex;
  min-height: calc(100vh - 60px);
}

/* ─── Left navigation sidebar ──────────────────────────────── */
.docs-nav {
  width: 260px;
  flex-shrink: 0;
  border-right: 1px solid var(--rule);
  background: var(--bg2);
  padding: 32px 0 48px;
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  overflow-y: auto;
}

.docs-nav::-webkit-scrollbar { width: 4px; }
.docs-nav::-webkit-scrollbar-track { background: transparent; }
.docs-nav::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 2px; }

.nav-section {
  padding: 0 20px;
  margin-bottom: 4px;
}

/* Section toggle button */
.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 8px 12px;
  border-radius: 5px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink2);
  cursor: pointer;
  text-align: left;
  letter-spacing: 0.01em;
  transition: background 0.15s, color 0.15s;
}

.nav-toggle:hover { background: var(--bg3); color: var(--ink); }

.nav-toggle-arrow {
  font-size: 10px;
  color: var(--faint);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.nav-toggle.open .nav-toggle-arrow { transform: rotate(180deg); }

/* Submenu links */
.nav-submenu {
  list-style: none;
  padding: 4px 0 8px 12px;
  display: none;
}

.nav-submenu.open { display: block; }

.nav-submenu li a {
  display: block;
  padding: 6px 12px;
  font-size: 12.5px;
  color: var(--muted);
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
  line-height: 1.4;
}

.nav-submenu li a:hover {
  background: var(--bg3);
  color: var(--ink);
}

.nav-submenu li a.active {
  background: var(--amber-light);
  color: var(--amber);
  font-weight: 500;
  border-left: 2px solid var(--amber);
  padding-left: 10px;
}

/* ─── Center content area ───────────────────────────────────── */
.docs-body {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 0;
}

.docs-content {
  flex: 1;
  min-width: 0;
  padding: 48px 52px;
  max-width: 820px;
}

/* ─── Right TOC sidebar ─────────────────────────────────────── */

.docs-toc {
  width: 200px;
  flex-shrink: 0;
  padding: 48px 16px;
  position: sticky;
  top: 60px;                 /* same top as left sidebar */
  height: calc(100vh - 60px);
  overflow-y: auto;
}

.docs-toc::-webkit-scrollbar {
  width: 4px;
}
.docs-toc::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 2px;
}



.toc-inner {
  position: static;
}

.toc-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  display: block;
}

/* All TOC links share a base style — no cascade surprises */
.toc-link-l1,
.toc-link-l2,
.toc-link-l3,
.toc-link-l4 {
  display: block;
  text-decoration: none !important;
  border-bottom: none !important;
  line-height: 1.45;
  transition: color 0.15s;
  white-space: normal;
  word-break: break-word;
}

.toc-link-l1 {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink2);
  padding: 4px 0;
  margin-bottom: 2px;
}

.toc-link-l1:hover { color: var(--amber); }

.toc-link-l2 {
  font-size: 12px;
  color: var(--muted);
  padding: 3px 0 3px 12px;
  border-left: 2px solid var(--rule) !important;
  margin-bottom: 1px;
  padding-left: 24px;
  text-indent: -12px;
}

.toc-link-l2:hover {
  color: var(--ink);
  border-left-color: var(--amber) !important;
}

.toc-link-l3 {
  font-size: 11.5px;
  color: var(--faint);
  padding: 2px 0 2px 24px;
  border-left: 2px solid var(--bg3) !important;
  margin-bottom: 1px;
  padding-left: 36px;
  text-indent: -12px;
}

.toc-link-l3:hover {
  color: var(--muted);
  border-left-color: var(--rule) !important;
}

.toc-link-l4 {
  font-size: 11px;
  color: var(--faint);
  padding: 2px 0 2px 36px;
  border-left: 2px solid var(--bg3) !important;
  margin-bottom: 1px;
}

.toc-link-l4:hover {
  color: var(--muted);
  border-left-color: var(--rule) !important;
}

/* strip list styling entirely */
.toc-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ─── Content typography ────────────────────────────────────── */
.docs-content h1 {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 36px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}

.docs-content h2 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: 44px 0 16px;
  padding-top: 4px;
}

.docs-content h2:first-of-type { margin-top: 0; }

.docs-content h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 28px 0 10px;
  letter-spacing: -0.005em;
}

.docs-content h4 {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink2);
  margin: 22px 0 8px;
  font-family: var(--mono);
  letter-spacing: 0.02em;
}

.docs-content p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 16px;
}

.docs-content a {
  color: var(--amber);
  border-bottom: 1px solid rgba(200, 130, 10, 0.3);
  transition: border-color 0.15s;
}

.docs-content a:hover { border-bottom-color: var(--amber); }

/* Step number indicators */
h3[id]::before {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--faint);
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}

/* Image blocks */
.img-block {
  margin: 24px 0 28px;
}

.img-block img {
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  transition: box-shadow 0.2s, transform 0.2s;
}

.img-block img:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}

/* Step label pill */
.step-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
  background: var(--amber-light);
  border: 1px solid #e8c97a;
  padding: 3px 10px;
  border-radius: 3px;
  margin-bottom: 10px;
  margin-top: 32px;
}

/* ─── Mobile / responsive ───────────────────────────────────── */
@media (max-width: 1100px) {
  .docs-toc { display: none; }
  .docs-content { max-width: 100%; }
}

@media (max-width: 768px) {
  .docs-nav {
    position: fixed;
    left: -260px;
    top: 60px;
    z-index: 200;
    transition: left 0.3s ease;
    height: calc(100vh - 60px);
    box-shadow: 4px 0 24px rgba(0,0,0,0.1);
  }
  .docs-nav.open { left: 0; }
  .docs-shell { display: block; }
  .docs-content { padding: 32px 24px; }

  .mobile-menu-btn {
    display: flex;
  }
}

.mobile-menu-btn {
  display: none;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--rule);
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 12px;
  cursor: pointer;
  margin: 16px 24px;
}

/* Overlay */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 190;
}

.nav-overlay.open { display: block; }

/* reveal animation */
.reveal-pending { opacity: 0; transform: translateY(14px); transition: opacity 0.45s ease, transform 0.45s ease; }
.reveal-visible { opacity: 1; transform: none; }

/* ── Bootstrap utility replacements ── */

/* Card */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  border: 1px solid rgba(0,0,0,.125);
  border-radius: .375rem;
}
.card-body {
  flex: 1 1 auto;
  padding: 1rem;
}
.card-body ul,
.card-body ol {
  padding-left: 1.5rem;
}

/* Border radius */
.rounded-5 { border-radius: 2rem !important; }

/* Background colors — uses --bs-bg-opacity so .bg-opacity-* works */
:root { --bs-bg-opacity: 1; }
.bg-warning        { background-color: rgba(255, 193,   7, var(--bs-bg-opacity)) !important; }
.bg-danger-subtle  { background-color: rgba(248, 215, 218, var(--bs-bg-opacity)) !important; }
.bg-success-subtle { background-color: rgba(209, 231, 221, var(--bs-bg-opacity)) !important; }

/* Opacity modifiers */
.bg-opacity-25 { --bs-bg-opacity: 0.25; }
.bg-opacity-50 { --bs-bg-opacity: 0.50; }
.bg-opacity-75 { --bs-bg-opacity: 0.75; }

/* Gradient overlay (matches Bootstrap's bg-gradient) */
.bg-gradient { background-image: linear-gradient(180deg, rgba(255,255,255,.15), rgba(0,0,0,0)) !important; }

/* Text */
.text-dark   { color: #212529 !important; }
.text-danger { color: #dc3545 !important; }
.fst-italic  { font-style: italic !important; }
.fw-bold     { font-weight: 700 !important; }

/* Table */
.table {
  width: 100%;
  margin-bottom: 1rem;
  vertical-align: top;
  border-collapse: collapse;
}
.table > :not(caption) > * > * {
  padding: 0.5rem;
}
.table-bordered {
  border: 1px solid #adb5bd;
}
.table-bordered td,
.table-bordered th {
  border: 1px solid #adb5bd;
  padding: 0.5rem;
}

/* Border utilities */
.border-top { border-top: 1px solid #dee2e6 !important; }

/* ── Modal ── */
.ca-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9000;
  align-items: center;
  justify-content: center;
}
.ca-modal-overlay.is-open {
  display: flex;
}
.ca-modal {
  background: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  padding: 2rem;
  max-width: 440px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  text-align: center;
}
.ca-modal-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: #1a1a1a;
}
.ca-modal-body {
  font-size: 0.95rem;
  color: #444444;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}
.ca-modal-btn {
  display: inline-block;
  padding: 8px 28px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
}
.ca-modal-btn-ok   { background: var(--amber); color: #fff; }
.ca-modal-btn-err  { background: #dc3545;      color: #fff; }

/* ── Partner cards ── */
.partner-card {
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 2rem;
  background: var(--bg2);
}
.partner-card-header {
  padding: 0.75rem 1.25rem;
  background: rgba(245, 185, 55, 0.15);
  border-bottom: 1px solid var(--rule);
}
.partner-card-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}
.partner-card-header h3 a {
  color: var(--ink);
  text-decoration: none;
}
.partner-card-header h3 a:hover {
  color: var(--amber);
}
.partner-card-body {
  padding: 1.25rem;
}

/* ── Contact page ── */
.contact-page {
  display: flex;
  justify-content: center;
  padding: 60px 24px 80px;
}
.contact-wrap {
  width: 100%;
  max-width: 680px;
}
.contact-wrap h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.contact-intro {
  color: var(--muted);
  margin-bottom: 2rem;
}
.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 560px) {
  .contact-form-row { grid-template-columns: 1fr; }
}
.contact-form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.25rem;
}
.contact-form-group label {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 6px;
}
.contact-input {
  padding: 9px 12px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg2);
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s;
  width: 100%;
  box-sizing: border-box;
}
.contact-input:focus {
  outline: none;
  border-color: var(--amber);
}
textarea.contact-input {
  resize: vertical;
}
.contact-captcha-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.contact-captcha-input {
  max-width: 200px;
}
.contact-refresh-btn {
  padding: 6px 14px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg2);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.contact-refresh-btn:hover {
  border-color: var(--amber);
  color: var(--ink);
}
.contact-send-btn {
  display: inline-block;
  padding: 10px 32px;
  background: var(--amber);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.contact-send-btn:hover { opacity: 0.85; }
.contact-message {
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 1.5rem;
  font-size: 14px;
  border: 1px solid transparent;
}
.contact-message-ok {
  background: rgba(209, 231, 221, 0.4);
  border-color: #a3cfbb;
  color: #0a3622;
}
.contact-message-error {
  background: rgba(248, 215, 218, 0.4);
  border-color: #f1aeb5;
  color: #58151c;
}

/* ── Auth pages (login / register) ── */
.auth-alert {
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 1.25rem;
  font-size: 14px;
  background: rgba(248, 215, 218, 0.4);
  border: 1px solid #f1aeb5;
  color: #58151c;
}
.auth-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 0.5rem;
}
.auth-link-forgot {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dashed var(--rule);
  transition: color 0.15s, border-color 0.15s;
}
.auth-link-forgot:hover {
  color: var(--ink);
  border-bottom-color: var(--muted);
}
.auth-footer-text {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  color: var(--muted);
  text-align: left;
}
.auth-link-signup {
  font-size: 14px;
  font-weight: 600;
  color: var(--amber);
  text-decoration: none;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--amber-light);
  transition: background 0.15s, color 0.15s;
}
.auth-link-signup:hover {
  background: var(--amber);
  color: #fff;
}