/* ===== OrgPlease marketing — design system tokens ===== */
:root{
  --bg:#FCFCFB; --surface:#FFFFFF; --surface-2:#FAFAF9; --paper:#F4F2EC;
  --ink:#0C0E0D; --ink-2:#3A403C; --muted:#828983; --line:#ECEAE4; --hairline:#F1EFE9;
  --accent:#2F9461; --accent-ink:#1F6E48; --forest:#1C5E41; --accent-tint:#E9F3EC; --accent-2:#7BC9A2;
  --e1:0 1px 2px rgba(12,14,13,.04), 0 10px 22px -16px rgba(12,14,13,.22);
  --e2:0 1px 2px rgba(12,14,13,.05), 0 18px 40px -20px rgba(12,14,13,.30);
  --e3:0 2px 6px rgba(12,14,13,.05), 0 60px 100px -45px rgba(12,14,13,.45);
  --maxw:1200px;
}
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
body{ margin:0; font-family:"Geist",system-ui,sans-serif; background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; position:relative; }
/* faint grain — premium tell */
body::before{ content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.mono{font-family:"JetBrains Mono",monospace}
.serif-i{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400}
a{text-decoration:none;color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
/* buttons */
.btn{font-family:inherit;font-weight:600;border-radius:12px;cursor:pointer;border:1px solid transparent;
  display:inline-flex;align-items:center;gap:9px;transition:transform .15s, background .15s, border-color .15s;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(28,94,65,.25),0 8px 20px -10px rgba(47,148,97,.55)}
.btn-primary:hover{background:var(--accent-ink)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-sm{font-size:14px;padding:9px 16px}.btn-md{font-size:14.5px;padding:11px 20px}.btn-lg{font-size:15px;padding:14px 26px}
/* type scale */
h1,h2,h3{margin:0;letter-spacing:-.02em}
.display{font-size:clamp(40px,8.2vw,80px);line-height:.97;letter-spacing:-.035em;font-weight:700}
.eyebrow{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* ===== responsive ===== */
/* The decorative glow is a fixed 1180px ellipse; keep it from forcing horizontal
   scroll on narrow viewports without clipping the (narrower) product frame. */
.hero-stage{ overflow-x:clip; }

/* The mobile hero PNG is a tight CEO + 2-reports crop (802x610). Show it at its
   natural aspect so all three cards stay fully legible — no forced crop. */
@media (max-width:767px){
  .product-frame-img{ width:100%; height:auto; display:block; }
}

@media (max-width:860px){
  /* hide secondary nav links; keep logo + auth actions */
  .nav-links{ display:none !important; }
}

@media (max-width:720px){
  .wrap{ padding:0 20px; }
  .hero{ padding-top:36px !important; }
  .hero-sub{ font-size:17px !important; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ justify-content:center; }
  .hero-stage{ margin-top:36px !important; padding-bottom:56px !important; }
}

/* ===== Phase 2 — section primitives ===== */
.v2-section{ padding:clamp(38px,5.4vw,72px) 0; }
.v2-dark .eyebrow{ color:var(--accent-2); }
.v2-head-sub{ color:var(--ink-2); }
/* On dark bands the sub must be light for AA contrast (was --ink-2, ~1.8:1). */
.v2-dark .v2-head-sub{ color:rgba(246,244,236,.82); }
.v2-head + *{ margin-top:29px; }
/* feature rows */
.v2-frow{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(32px,5vw,72px); align-items:center; }
.v2-frow + .v2-frow{ margin-top:clamp(34px,4.8vw,62px); }
.v2-frow.flip .v2-frow-copy{ order:2; }
.v2-bullets{ list-style:none; padding:0; margin:18px 0 0; display:flex; flex-direction:column; gap:10px; }
.v2-bullets li{ position:relative; padding-left:26px; font-size:15.5px; color:var(--ink-2); }
.v2-bullets li::before{ content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700; }
.v2-badge{ margin-left:10px; font-size:10px; background:var(--accent-tint); color:var(--accent-ink); border:1px solid #D7EADE; border-radius:999px; padding:2px 8px; letter-spacing:.04em; }
@media (max-width:820px){ .v2-frow{ grid-template-columns:1fr; gap:28px; } .v2-frow.flip .v2-frow-copy{ order:0; } }
/* how-it-works steps */
.v2-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.v2-step-img{ margin-bottom:18px; }
.v2-step-n{ font-size:12px; letter-spacing:.16em; color:var(--accent-ink); }
@media (max-width:820px){ .v2-steps{ grid-template-columns:1fr; gap:36px; } }
/* more-features tile grid (3 → 2 → 1) */
.v2-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.v2-tile{ padding:24px; border-radius:16px; background:var(--surface);
  border:1px solid var(--line); box-shadow:var(--e1); }
.v2-tile-chip{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:11px;
  background:var(--accent-tint); color:var(--accent-ink); border:1px solid #D7EADE; margin-bottom:16px; }
.v2-tile-t{ font-size:17px; font-weight:600; letter-spacing:-.01em; margin:0 0 6px; }
.v2-tile-d{ font-size:14.5px; line-height:1.55; color:var(--ink-2); margin:0; }
@media (max-width:820px){ .v2-tiles{ grid-template-columns:1fr 1fr; gap:16px; } }
@media (max-width:520px){ .v2-tiles{ grid-template-columns:1fr; } }
/* collaboration role chips (on dark) */
.v2-roles{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:32px; }
.v2-role{ display:inline-flex; align-items:center; gap:9px; padding:9px 16px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); font-size:14.5px; color:var(--bg); }
.v2-role strong{ font-weight:600; }
.v2-role-dot{ width:8px; height:8px; border-radius:999px; flex-shrink:0; }
/* pricing teaser tiers */
.v2-tiers{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.v2-tier{ position:relative; padding:24px; border-radius:16px; background:var(--surface);
  border:1px solid var(--line); box-shadow:var(--e1); display:flex; flex-direction:column; }
.v2-tier .btn{ width:100%; justify-content:center; margin-top:auto; }
.v2-tier.pop{ border-color:var(--accent); box-shadow:var(--e2); }
.v2-tier-flag{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  background:var(--accent); color:#fff; padding:4px 12px; border-radius:999px; }
@media (max-width:820px){ .v2-tiers{ grid-template-columns:1fr 1fr; gap:16px; } }
@media (max-width:520px){ .v2-tiers{ grid-template-columns:1fr; } }
/* FAQ accordion */
.v2-faq{ max-width:760px; margin:0 auto; border-top:1px solid var(--line); }
.v2-faq-item{ border-bottom:1px solid var(--line); }
.v2-faq-q{ width:100%; padding:22px 0; display:flex; align-items:center; justify-content:space-between;
  background:transparent; border:0; cursor:pointer; text-align:left; font-family:inherit;
  font-size:18px; font-weight:500; letter-spacing:-.01em; color:var(--ink); }
.v2-faq-icon{ color:var(--muted); flex-shrink:0; margin-left:16px; font-size:22px; line-height:1; }
.v2-faq-a{ padding:0 0 22px; font-size:15.5px; line-height:1.6; color:var(--ink-2); max-width:660px; }
/* footer */
.v2-footer{ background:var(--ink); color:var(--bg); padding:80px 0 32px; }
.v2-footer-grid{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:40px; margin-bottom:56px; }
.v2-footer-link{ color:rgba(246,244,236,.75); font-size:14px; transition:color .15s; }
.v2-footer-link:hover{ color:#fff; }
.v2-footer-bottom{ padding-top:24px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
@media (max-width:820px){ .v2-footer-grid{ grid-template-columns:1fr 1fr; gap:32px; } .v2-footer-brand{ grid-column:1 / -1; } }
@media (max-width:520px){ .v2-footer-grid{ grid-template-columns:1fr; } }

/* ===== sticky CTA — fixed top bar, slides in once the hero scrolls away =====
   Hidden by default (off-screen + non-interactive). motion.js adds .visible. */
.v2-sticky-cta{ position:fixed; top:0; left:0; right:0; z-index:200;
  background:rgba(252,252,251,.86); backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line); box-shadow:0 8px 24px -18px rgba(12,14,13,.4);
  transform:translateY(-100%); opacity:0; pointer-events:none; visibility:hidden;
  transition:transform .35s cubic-bezier(.22,.61,.36,1), opacity .35s ease, visibility 0s linear .35s; }
.v2-sticky-cta.visible{ transform:translateY(0); opacity:1; pointer-events:auto; visibility:visible;
  transition:transform .35s cubic-bezier(.22,.61,.36,1), opacity .35s ease, visibility 0s; }
.v2-sticky-inner{ height:60px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.v2-sticky-logo{ display:inline-flex; align-items:center; }
@media (max-width:520px){
  .v2-sticky-inner{ height:54px; }
  .v2-sticky-inner .btn{ font-size:13.5px; padding:8px 13px; }
}

/* Scroll-reveal targets stay visible by default — motion.js only hides+animates
   them when GSAP/ScrollTrigger is actually running (failsafe: nothing can stick
   hidden if the ticker is throttled). */
.v2-head, .v2-frow, .v2-step, .v2-tier, .v2-tile, .v2-plan, .v2-cmp{ opacity:1; }

@media (prefers-reduced-motion:reduce){
  /* No slide for the sticky CTA — it simply appears past the hero. */
  .v2-sticky-cta{ transition:none; }
  .v2-sticky-cta.visible{ transition:none; }
}

/* ===== Phase 3 — pricing page ===== */
/* Billing toggle — segmented control */
.v2-toggle{ display:inline-flex; align-items:center; gap:4px; padding:4px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:999px; }
.v2-toggle button{ font-family:inherit; font-size:14px; font-weight:600; letter-spacing:-.01em;
  padding:9px 22px; border:0; border-radius:999px; cursor:pointer; color:var(--muted);
  background:transparent; transition:background .15s, color .15s, box-shadow .15s; }
.v2-toggle button:hover{ color:var(--ink-2); }
.v2-toggle button.on{ background:var(--surface); color:var(--ink);
  box-shadow:0 1px 2px rgba(12,14,13,.06), 0 6px 14px -10px rgba(12,14,13,.35); }

/* Plan cards — 4-col grid → 2 → 1 */
.v2-tiers-full{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:stretch; }
@media (max-width:980px){ .v2-tiers-full{ grid-template-columns:repeat(2,1fr); gap:16px; } }
@media (max-width:560px){ .v2-tiers-full{ grid-template-columns:1fr; } }

.v2-plan{ position:relative; display:flex; flex-direction:column;
  padding:28px 24px 30px; border-radius:18px; background:var(--surface);
  border:1px solid var(--line); box-shadow:var(--e1);
  transition:transform .2s ease, box-shadow .2s ease; }
/* Popular tier — dominant: accent border, lift, deeper shadow */
.v2-plan.pop{ border:1.5px solid var(--accent); box-shadow:var(--e2); transform:translateY(-6px); }
@media (max-width:980px){ .v2-plan.pop{ transform:none; } }

.v2-plan-flag{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  background:var(--accent); color:#fff; padding:4px 12px; border-radius:999px; }

.v2-plan-name{ font-size:18px; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
.v2-plan-tag{ margin:6px 0 0; font-size:13.5px; line-height:1.45; color:var(--muted); min-height:38px; }
.v2-plan-price{ display:flex; align-items:flex-end; gap:5px; margin-top:20px; }
.v2-plan-amt{ font-size:48px; font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--ink); }
.v2-plan-suffix{ font-size:15px; font-weight:500; color:var(--muted); margin-bottom:7px; }
.v2-plan-note{ margin-top:7px; font-size:12.5px; line-height:1.3; color:var(--accent-ink); min-height:17px; }
.v2-plan-limit{ margin-top:2px; font-size:12.5px; color:var(--muted); }
.v2-plan-cta{ width:100%; justify-content:center; margin-top:22px; }
.v2-plan-feats{ margin-top:24px; padding-top:24px; border-top:1px solid var(--line); }
.v2-plan-feats li{ font-size:13.5px; line-height:1.45; }

/* Comparison table — "Compare all features" expand/collapse */
.v2-cmp-toggle-row{ display:flex; justify-content:center; margin-top:8px; }
.v2-cmp-toggle{ font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent-ink); background:transparent; border:1px solid var(--line);
  border-radius:999px; padding:11px 22px; cursor:pointer; display:inline-flex; align-items:center; gap:9px;
  transition:background .15s, border-color .15s; }
.v2-cmp-toggle:hover{ background:var(--surface-2); border-color:var(--accent); }
.v2-cmp-toggle .chev{ font-size:13px; transition:transform .2s ease; }
.v2-cmp-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); }

/* Horizontal-scroll container so columns don't crush on mobile */
.v2-cmp-scroll{ margin-top:34px; }
@media (max-width:720px){ .v2-cmp-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:14px; } }

.v2-cmp{ width:100%; border-collapse:collapse; font-size:14px; }
@media (max-width:720px){ .v2-cmp{ min-width:660px; } }
.v2-cmp thead th{ position:sticky; top:0; z-index:2; background:var(--bg); text-align:center;
  font-size:13px; font-weight:700; letter-spacing:-.01em; color:var(--ink); padding:14px 16px 16px;
  border-bottom:1px solid var(--line); }
.v2-cmp thead th:first-child{ text-align:left; }
.v2-cmp thead th.v2-cmp-teamcol{ color:var(--accent-ink); }
.v2-cmp-grouprow td{ padding:22px 16px 8px; }
.v2-cmp-group{ font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); }
.v2-cmp tbody td{ padding:13px 16px; border-bottom:1px solid var(--hairline);
  text-align:center; color:var(--ink-2); font-size:14px; }
.v2-cmp tbody td:first-child{ text-align:left; color:var(--ink); font-weight:500; }
.v2-cmp .v2-cmp-yes{ color:var(--accent); font-weight:700; font-size:16px; }
.v2-cmp .v2-cmp-no{ color:#C4C9C4; }
/* Team column subtly tinted to echo the popular tier */
.v2-cmp .v2-cmp-teamcol{ background:var(--accent-tint); }
/* Darker check inside the tinted Team column for a cleaner AA margin on tint. */
.v2-cmp td.v2-cmp-teamcol .v2-cmp-yes{ color:var(--accent-ink); }
.v2-cmp thead th.v2-cmp-teamcol{ background:var(--accent-tint); border-bottom-color:#D7EADE;
  border-radius:10px 10px 0 0; }
.v2-cmp-grouprow td.v2-cmp-teamcol{ background:var(--accent-tint); }

/* ===== Phase 4 — contact page ===== */
.v2-contact-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(32px,5vw,64px);
  align-items:start; margin-top:clamp(40px,5vw,56px); }
@media (max-width:820px){ .v2-contact-grid{ grid-template-columns:1fr; gap:40px; } }

/* form */
.v2-form{ display:flex; flex-direction:column; gap:20px; }
.v2-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:520px){ .v2-form-row{ grid-template-columns:1fr; } }
.v2-field{ display:flex; flex-direction:column; gap:7px; }
.v2-label{ font-size:14px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.v2-input{ font-family:inherit; font-size:15px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:12px; padding:12px 14px; width:100%;
  transition:border-color .15s, box-shadow .15s; -webkit-appearance:none; appearance:none; }
.v2-input::placeholder{ color:var(--muted); }
.v2-input:hover{ border-color:#D9D6CD; }
.v2-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint); }
.v2-input:focus-visible{ outline:none; }
.v2-textarea{ min-height:160px; resize:vertical; line-height:1.55; }
/* native select caret */
select.v2-input{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23828983' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; }
.v2-form-error{ padding:12px 16px; border-radius:10px; background:#FBEDED; border:1px solid #F2CFCF;
  font-size:14px; line-height:1.5; color:#A4322B; }
.v2-form-submit{ width:100%; justify-content:center; }
.v2-form-submit:disabled{ opacity:.7; cursor:default; }
.v2-spinner{ width:16px; height:16px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  border-radius:999px; display:inline-block; animation:v2-spin .7s linear infinite; }
@keyframes v2-spin{ to{ transform:rotate(360deg); } }
/* success state */
.v2-form-success{ padding:56px 40px; text-align:center; background:var(--accent-tint);
  border:1px solid #D7EADE; border-radius:18px; }
.v2-form-success-mark{ width:56px; height:56px; border-radius:999px; background:var(--accent); color:#fff;
  display:grid; place-items:center; margin:0 auto 20px; font-size:24px; }

/* info column */
.v2-contact-card{ padding:22px 24px; border-radius:16px; background:var(--surface-2);
  border:1px solid var(--line); }
.v2-contact-card-label{ font-size:11px; font-weight:600; letter-spacing:.14em; color:var(--accent-ink); }
.v2-contact-list{ list-style:none; padding:0; margin:24px 0 0; display:flex; flex-direction:column; gap:20px; }
.v2-contact-list-t{ font-size:14.5px; font-weight:600; color:var(--ink); margin-bottom:4px; }
.v2-contact-list-d{ font-size:13.5px; line-height:1.55; color:var(--muted); }

/* ===== Phase 4 — legal prose (Privacy / Terms / Security) ===== */
.v2-prose{ max-width:720px; margin:0 auto; }
.v2-prose-head{ padding-bottom:36px; margin-bottom:44px; border-bottom:1px solid var(--line); }
.v2-prose-updated{ margin:18px 0 0; font-size:13px; letter-spacing:.04em; color:var(--muted); }
.v2-prose-section{ margin-bottom:44px; }
.v2-prose-section:last-child{ margin-bottom:0; }
.v2-prose-h2{ font-size:21px; font-weight:700; letter-spacing:-.02em; color:var(--ink);
  margin:0 0 16px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.v2-prose-h3{ font-size:15.5px; font-weight:600; color:var(--ink); margin:22px 0 8px; }
.v2-prose-p{ font-size:15.5px; line-height:1.72; color:var(--ink-2); margin:0 0 14px; }
.v2-prose-p:last-child{ margin-bottom:0; }
.v2-prose-p strong, .v2-prose-box strong, .v2-prose li strong{ color:var(--ink); font-weight:600; }
.v2-prose a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px;
  text-decoration-thickness:1px; }
.v2-prose a:hover{ color:var(--accent); }
.v2-prose-ul, .v2-prose-ol{ margin:4px 0 14px; padding-left:22px; display:flex; flex-direction:column; gap:9px; }
.v2-prose-ul li, .v2-prose-ol li{ font-size:15.5px; line-height:1.6; color:var(--ink-2); }
.v2-prose-ul li::marker{ color:var(--muted); }
.v2-prose-box{ background:var(--surface-2); border:1px solid var(--line); border-radius:14px;
  padding:20px 24px; margin:14px 0; font-size:14.5px; line-height:1.65; color:var(--ink-2); }
/* security pillar cards */
.v2-prose-cards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px; }
@media (max-width:560px){ .v2-prose-cards{ grid-template-columns:1fr; } }
.v2-prose-card{ background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:22px 24px; }
.v2-prose-card-icon{ font-size:22px; margin-bottom:12px; }
.v2-prose-card-t{ font-size:15px; font-weight:700; color:var(--ink); margin:0 0 6px; }
.v2-prose-card-d{ font-size:14px; line-height:1.6; color:var(--muted); margin:0; }
/* security checklist */
.v2-prose-checks{ list-style:none; padding:0; margin:8px 0 0; display:flex; flex-direction:column; gap:12px; }
.v2-prose-checks li{ display:flex; gap:12px; align-items:flex-start; font-size:15.5px; line-height:1.6; color:var(--ink-2); }
.v2-prose-check{ width:22px; height:22px; border-radius:999px; background:var(--accent-tint); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; margin-top:1px; }

/* ===== Phase 4 — blog index cards ===== */
.v2-blog-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px;
  margin-top:clamp(40px,5vw,56px); }
@media (max-width:760px){ .v2-blog-grid{ grid-template-columns:1fr; gap:18px; } }
.v2-blog-card{ display:flex; flex-direction:column; padding:28px 28px 26px; border-radius:18px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--e1);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.v2-blog-card:hover{ transform:translateY(-3px); box-shadow:var(--e2); border-color:#D7EADE; }
.v2-blog-card:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:3px; }
.v2-blog-meta{ font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent-ink); margin-bottom:16px; }
.v2-blog-meta .dot{ opacity:.45; margin:0 7px; }
.v2-blog-title{ font-size:23px; font-weight:700; letter-spacing:-.02em; line-height:1.18;
  color:var(--ink); margin:0; }
.v2-blog-title .sub{ color:var(--muted); font-weight:400; }
.v2-blog-excerpt{ font-size:15px; line-height:1.6; color:var(--ink-2); margin:14px 0 0; }
.v2-blog-read{ margin-top:22px; font-size:14.5px; font-weight:600; color:var(--accent-ink);
  display:inline-flex; align-items:center; gap:6px; }
.v2-blog-card:hover .v2-blog-read{ color:var(--accent); }

/* ===== Phase 4 — blog article (v2 chrome over reused body) ===== */
.v2-article{ max-width:720px; margin:0 auto; }
.v2-article-head{ padding-bottom:34px; margin-bottom:40px; border-bottom:1px solid var(--line); }
.v2-article-meta{ font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent-ink); margin-bottom:18px; }
.v2-article-meta .dot{ opacity:.45; margin:0 7px; }
.v2-article-title{ font-size:clamp(32px,5vw,48px); font-weight:700; letter-spacing:-.035em;
  line-height:1.05; margin:0; color:var(--ink); }
.v2-article-sub{ font-family:"Instrument Serif",serif; font-style:italic; font-weight:400;
  font-size:21px; line-height:1.4; color:var(--muted); margin:14px 0 0; }
/* reused article prose body — match the v2 reading rhythm */
.v2-article-body{ font-size:16.5px; line-height:1.72; color:var(--ink-2); }
.v2-article-body p{ margin:0 0 22px; }
.v2-article-body h2{ font-size:25px; font-weight:700; letter-spacing:-.02em; line-height:1.2;
  margin:48px 0 16px; color:var(--ink); }
.v2-article-body h3{ font-size:19px; font-weight:600; letter-spacing:-.01em;
  margin:34px 0 12px; color:var(--ink); }
.v2-article-body a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px;
  text-decoration-thickness:1px; }
.v2-article-body a:hover{ color:var(--accent); }
.v2-article-body strong{ color:var(--ink); font-weight:600; }
.v2-article-body em{ font-style:italic; }
.v2-article-body ul, .v2-article-body ol{ margin:0 0 22px; padding-left:24px;
  display:flex; flex-direction:column; gap:9px; }
.v2-article-body li{ font-size:16.5px; line-height:1.65; color:var(--ink-2); }
.v2-article-body li strong{ color:var(--ink); }
.v2-article-body hr{ border:0; border-top:1px solid var(--line); margin:40px 0; }
.v2-article-body table{ width:100%; border-collapse:collapse; margin:24px 0; font-size:15px; }
.v2-article-body th, .v2-article-body td{ padding:11px 14px; border-bottom:1px solid var(--line);
  text-align:left; vertical-align:top; color:var(--ink-2); }
.v2-article-body th{ background:var(--accent-tint); color:var(--accent-ink); font-weight:600;
  border-bottom:1px solid #D7EADE; }
/* inline code + code blocks (how-to posts that show CSV/snippets) */
.v2-article-body code{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:.86em;
  background:rgba(13,15,16,.06); padding:.12em .4em; border-radius:4px; color:var(--ink); }
.v2-article-body pre{ background:rgba(13,15,16,.045); border:1px solid var(--line);
  border-radius:10px; padding:16px 18px; overflow-x:auto; margin:24px 0; }
.v2-article-body pre code{ background:none; padding:0; font-size:13.5px; line-height:1.7;
  color:var(--ink-2); white-space:pre; }
/* end-of-article CTA */
.v2-article-cta{ margin-top:48px; padding:36px 32px; border-radius:18px; text-align:center;
  background:var(--accent-tint); border:1px solid #D7EADE; }
.v2-article-cta h3{ font-size:22px; font-weight:700; letter-spacing:-.02em; margin:0 0 8px; color:var(--ink); }
.v2-article-cta p{ font-size:15px; line-height:1.55; color:var(--ink-2); margin:0 auto 22px; max-width:440px; }