/* ============================================
   RESET & BASE
   ============================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'DM Sans',system-ui,sans-serif;
  color:#0a0a0a;
  line-height:1.65;
  background:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5{font-family:'Playfair Display',Georgia,serif;font-weight:600;letter-spacing:-0.025em;line-height:1.15}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 32px}

/* ============================================
   CSS VARIABLES
   ============================================ */
:root{
  --indigo:#635bff;
  --indigo-hover:#5851e6;
  --indigo-soft:rgba(99,91,255,0.08);
  --indigo-glow:rgba(99,91,255,0.15);
  --pink:#e8368f;
  --violet:#a855f7;
  --near-black:#0a0a0a;
  --text-secondary:#52525b;
  --text-tertiary:#71717a;
  --border:#e4e4e7;
  --border-light:#f4f4f5;
  --bg-subtle:#fafafa;
  --radius:12px;
  --radius-lg:16px;
  /* Square theme colors */
  --sq-pink:#e8368f;
  --sq-violet:#a855f7;
  --sq-indigo:#635bff;
  --sq-teal:#14b8a6;
  --sq-amber:#f59e0b;
  --sq-rose:#f43f5e;
}

/* ============================================
   INTERSECTION SQUARES
   ============================================ */
.sq{
  position:absolute;width:8px;height:8px;
  border-radius:2px;z-index:10;pointer-events:none;
  border:1px solid var(--border);
  background:#fff;
}
.sq--pink{background:var(--sq-pink);border-color:var(--sq-pink)}
.sq--violet{background:var(--sq-violet);border-color:var(--sq-violet)}
.sq--indigo{background:var(--sq-indigo);border-color:var(--sq-indigo)}
.sq--teal{background:var(--sq-teal);border-color:var(--sq-teal)}
.sq--amber{background:var(--sq-amber);border-color:var(--sq-amber)}
.sq--rose{background:var(--sq-rose);border-color:var(--sq-rose)}
/* Positioning helpers */
.sq--tl{top:-4px;left:-4px}
.sq--tr{top:-4px;right:-4px}
.sq--bl{bottom:-4px;left:-4px}
.sq--br{bottom:-4px;right:-4px}

/* ============================================
   FULL-BLEED HORIZONTAL RULES
   ============================================ */
.full-bleed-rule{
  position:relative;
  border-top:1px solid var(--border);
}
.full-bleed-rule::before{
  content:'';position:absolute;top:-1px;left:50%;
  transform:translateX(-50%);
  width:100vw;height:0;
  border-top:1px solid var(--border);
  pointer-events:none;
}
/* Hide the element's own border since the pseudo handles full-bleed */
.full-bleed-rule{border-top:none}

/* ============================================
   NAVIGATION
   ============================================ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .3s,box-shadow .3s;
  height:72px;
}
nav.scrolled{
  border-bottom-color:var(--border);
  box-shadow:0 1px 8px rgba(0,0,0,0.04);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:72px;max-width:1200px;margin:0 auto;padding:0 32px;
}
.nav-logo{
  font-family:'Playfair Display',Georgia,serif;font-size:22px;font-weight:700;
  color:var(--near-black);letter-spacing:-0.03em;
  display:flex;align-items:center;gap:8px;
}
.nav-logo-mark{
  /* The owl is a tall portrait silhouette (501x671), so height drives the
     sizing and width follows — never set both, or the bird distorts. */
  height:34px;width:auto;display:block;
}
.nav-links{display:flex;gap:36px;align-items:center}
.nav-links a{font-size:15px;color:var(--text-secondary);font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--near-black)}
.nav-right{display:flex;align-items:center;gap:16px}
.nav-signin{font-size:15px;color:var(--text-secondary);font-weight:500;transition:color .2s}
.nav-signin:hover{color:var(--near-black)}

/* Buttons */
.btn-primary{
  background:var(--indigo);color:#fff;border:none;border-radius:9999px;
  padding:11px 26px;font-size:15px;font-weight:600;cursor:pointer;
  transition:all .2s;font-family:inherit;display:inline-flex;align-items:center;gap:6px;
}
.btn-primary:hover{background:var(--indigo-hover);transform:translateY(-1px);box-shadow:0 6px 20px rgba(99,91,255,0.35)}
.btn-ghost{
  background:transparent;color:var(--near-black);border:1.5px solid var(--border);
  border-radius:9999px;padding:10px 26px;font-size:15px;font-weight:600;
  cursor:pointer;transition:all .2s;font-family:inherit;display:inline-flex;align-items:center;gap:6px;
}
.btn-ghost:hover{border-color:var(--near-black);background:var(--near-black);color:#fff}
.btn-large{padding:14px 36px;font-size:16px}

/* ============================================
   HERO
   ============================================ */
.hero{
  position:relative;padding:180px 0 100px;overflow:hidden;
  background:#fff;
}
.hero-glow{
  position:absolute;top:-200px;left:50%;transform:translateX(-50%);
  width:1000px;height:800px;
  background:radial-gradient(ellipse at center,rgba(232,54,143,0.08) 0%,rgba(168,85,247,0.06) 30%,rgba(99,91,255,0.04) 60%,transparent 80%);
  pointer-events:none;
  animation:heroGlow 8s ease-in-out infinite alternate;
}
@keyframes heroGlow{
  0%{opacity:0.8;transform:translateX(-50%) scale(1)}
  50%{opacity:1;transform:translateX(-50%) scale(1.05)}
  100%{opacity:0.85;transform:translateX(-50%) scale(0.98)}
}
.hero-glow-orb{
  position:absolute;border-radius:50%;pointer-events:none;filter:blur(80px);
  animation:orbFloat 10s ease-in-out infinite alternate;
}
.hero-glow-orb.orb-pink{
  width:400px;height:400px;top:60px;left:15%;
  background:radial-gradient(circle,rgba(232,54,143,0.12),transparent 70%);
}
.hero-glow-orb.orb-violet{
  width:500px;height:500px;top:20px;right:10%;
  background:radial-gradient(circle,rgba(168,85,247,0.1),transparent 70%);
  animation-delay:-3s;
}
.hero-glow-orb.orb-indigo{
  width:350px;height:350px;bottom:40px;left:40%;
  background:radial-gradient(circle,rgba(99,91,255,0.1),transparent 70%);
  animation-delay:-6s;
}
@keyframes orbFloat{
  0%{transform:translate(0,0)}
  33%{transform:translate(15px,-10px)}
  66%{transform:translate(-10px,15px)}
  100%{transform:translate(5px,-5px)}
}
.hero-content{position:relative;text-align:center;z-index:2}
.hero-label{
  display:inline-block;
  font-family:'DM Sans',sans-serif;
  font-size:12px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--indigo);margin-bottom:28px;
}
.hero h1{
  font-size:clamp(48px,6.5vw,82px);font-weight:700;
  line-height:1.05;margin-bottom:24px;
  max-width:900px;margin-left:auto;margin-right:auto;
  letter-spacing:-0.035em;
}
.gradient-text{
  background:linear-gradient(135deg,var(--pink) 0%,var(--violet) 40%,var(--indigo) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero .sub{
  font-size:19px;color:var(--text-secondary);max-width:560px;
  margin:0 auto 32px;line-height:1.65;font-weight:400;
}
.hero-code{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--near-black);color:#a1a1aa;
  border-radius:10px;padding:14px 24px;font-size:14px;
  font-family:'JetBrains Mono',monospace;margin-bottom:36px;
  border:1px solid #27272a;
}
.hero-code .prompt{color:#71717a}
.hero-code .cmd{color:#e4e4e7}
.hero-code .pkg{color:#a78bfa}
.hero-code-copy{
  background:transparent;border:1px solid #3f3f46;border-radius:6px;
  color:#a1a1aa;padding:4px 10px;font-size:12px;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-weight:500;transition:all .2s;
}
.hero-code-copy:hover{background:#27272a;color:#e4e4e7}
.hero-ctas{display:flex;gap:16px;justify-content:center;align-items:center}

/* ============================================
   STATS BAR
   ============================================ */
.stats-bar{
  position:relative;padding:0;margin:0;
}
.stats-bar::before,.stats-bar::after{
  content:'';position:absolute;left:0;right:0;height:0;
  border-top:1px solid var(--border);
}
.stats-bar::before{top:0}
.stats-bar::after{bottom:0}
.stats-inner{
  display:flex;align-items:stretch;
  position:relative;
  border-left:1px solid var(--border);
  border-right:1px solid var(--border);
}
.stat-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:36px 24px;gap:6px;
  border-right:1px solid var(--border);
  /* .fade-up's transform makes this a stacking context, trapping the .sq dots
     below .stats-bar::after — z-index lifts the whole item above that rule. */
  position:relative;z-index:2;
}
.stat-item:last-child{border-right:none}
.stat-value{
  font-family:'Playfair Display',Georgia,serif;font-size:28px;font-weight:700;
  color:var(--near-black);letter-spacing:-0.03em;
}
.stat-label{font-size:14px;color:var(--text-tertiary);font-weight:500}
.stat-kicker{
  font-size:11px;font-weight:600;letter-spacing:0.09em;text-transform:uppercase;
  color:var(--text-tertiary);opacity:0.75;margin-bottom:2px;
}
.stat-kicker--ours{color:var(--indigo);opacity:1}

/* Crosshair embellishments removed — replaced by .sq colored squares */

/* ============================================
   SECTION LABELS
   ============================================ */
.section-label{
  font-family:'DM Sans',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--indigo);margin-bottom:16px;display:block;
}
.section-heading{text-align:center;margin-bottom:64px}
.section-heading h2{font-size:clamp(32px,4vw,48px);font-weight:600;margin-bottom:16px}
.section-heading p{font-size:18px;color:var(--text-secondary);max-width:560px;margin:0 auto;line-height:1.65}

/* ============================================
   FEATURE GRID (BENTO)
   ============================================ */
.features{padding:120px 0;background:#fff}
.feature-grid-wrap{
  position:relative;
}
/* Full-bleed top and bottom rules for the feature grid */
.feature-grid-wrap::before,.feature-grid-wrap::after{
  content:'';position:absolute;left:50%;transform:translateX(-50%);
  width:100vw;height:0;border-top:1px solid var(--border);
  pointer-events:none;
}
.feature-grid-wrap::before{top:0}
.feature-grid-wrap::after{bottom:0}
/* Middle horizontal rule (between row 1 and 2) */
.feature-grid-rule{
  position:absolute;left:50%;transform:translateX(-50%);
  width:100vw;height:0;border-top:1px solid var(--border);
  pointer-events:none;z-index:1;
}
.feature-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-radius:0;
  position:relative;
  /* Left and right outer borders handled by first/last column cells */
}
.feature-cell{
  padding:40px 36px;
  border:1px solid var(--border);
  margin-top:-1px;margin-left:-1px;
  position:relative;
}
/* First row — no negative top margin */
.feature-cell:nth-child(-n+3){margin-top:0}
/* First column — no negative left margin */
.feature-cell:nth-child(3n+1){margin-left:0}
.feature-icon{
  width:48px;height:48px;margin-bottom:20px;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;
  background:var(--indigo-soft);
  color:var(--indigo);
}
.feature-icon svg{width:24px;height:24px}
.feature-cell .section-label{margin-bottom:10px;font-size:10px}
.feature-cell h3{
  font-size:20px;font-weight:600;margin-bottom:10px;
  letter-spacing:-0.02em;
}
.feature-cell p{font-size:14px;color:var(--text-secondary);line-height:1.65}

/* ============================================
   FEATURE SPOTLIGHT (ALTERNATING)
   ============================================ */
.spotlight{padding:120px 0;background:#fff}
.spotlight-section{
  padding:80px 0;
  position:relative;
}
/* Full-bleed rule at top of each spotlight section */
.spotlight-section::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:100vw;height:0;border-top:1px solid var(--border);
  pointer-events:none;
}
.spotlight-inner{
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
}
.spotlight-section:nth-child(even) .spotlight-inner{direction:rtl}
.spotlight-section:nth-child(even) .spotlight-inner > *{direction:ltr}
.spotlight-text .section-label{text-align:left}
.spotlight-text h3{font-size:32px;font-weight:600;margin-bottom:16px;letter-spacing:-0.025em}
.spotlight-text p{font-size:16px;color:var(--text-secondary);line-height:1.7;margin-bottom:20px}
.spotlight-text ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.spotlight-text ul li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:15px;color:var(--text-secondary);
}
.spotlight-text ul li svg{flex-shrink:0;margin-top:3px;color:var(--indigo)}
.spotlight-visual{
  background:var(--bg-subtle);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:32px;
  min-height:320px;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
/* UI mock illustrations */
.ui-mock{width:100%;max-width:380px}
.ui-mock-bar{
  display:flex;align-items:center;gap:6px;margin-bottom:16px;padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.ui-mock-dot{width:8px;height:8px;border-radius:50%;background:var(--border)}
.ui-mock-title{font-size:12px;font-weight:600;color:var(--text-tertiary);margin-left:8px}
.ui-mock-line{
  height:8px;border-radius:4px;background:var(--border-light);margin-bottom:8px;
}
.ui-mock-line.w60{width:60%}
.ui-mock-line.w80{width:80%}
.ui-mock-line.w45{width:45%}
.ui-mock-line.w70{width:70%}
.ui-mock-line.accent{background:linear-gradient(90deg,rgba(232,54,143,0.15),rgba(99,91,255,0.15))}
.ui-mock-card{
  background:#fff;border:1px solid var(--border);border-radius:10px;
  padding:16px;margin-top:12px;
}
.ui-mock-badge{
  display:inline-block;font-size:10px;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:4px;margin-bottom:8px;
}
.ui-mock-badge.green{background:#dcfce7;color:#16a34a}
.ui-mock-badge.amber{background:#fef3c7;color:#d97706}
.ui-mock-badge.red{background:#fee2e2;color:#dc2626}
.ui-mock-badge.blue{background:var(--indigo-soft);color:var(--indigo)}
.ui-mock-source{
  display:flex;align-items:center;gap:8px;font-size:11px;
  color:var(--text-tertiary);padding:8px 0;
  border-top:1px solid var(--border-light);margin-top:8px;
}
.ui-mock-source-dot{width:6px;height:6px;border-radius:50%;background:var(--indigo);flex-shrink:0}
.ui-mock-meter{
  height:6px;border-radius:3px;background:var(--border-light);overflow:hidden;margin-top:4px;
}
.ui-mock-meter-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--indigo),var(--violet))}
.ui-mock-gap-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0;border-bottom:1px solid var(--border-light);
  font-size:12px;color:var(--text-secondary);
}
.ui-mock-gap-item:last-child{border-bottom:none}
.ui-mock-gap-count{
  font-size:11px;font-weight:600;color:var(--pink);
  background:rgba(232,54,143,0.08);padding:2px 8px;border-radius:4px;
}

/* ============================================
   CODE BLOCK
   ============================================ */
.code-section{padding:120px 0;background:#fff}
.code-panel{
  max-width:900px;margin:0 auto;
  background:#0f0f0f;border-radius:var(--radius-lg);
  border:1px solid #27272a;overflow:hidden;
  box-shadow:0 25px 60px rgba(0,0,0,0.15);
  position:relative;
}
/* Squares are added via HTML .sq elements */
.code-topbar{
  display:flex;align-items:center;gap:8px;
  padding:16px 24px;border-bottom:1px solid #1f1f1f;
}
.code-dot{width:10px;height:10px;border-radius:50%}
.code-dot.r{background:#ff5f57}
.code-dot.y{background:#febc2e}
.code-dot.g{background:#28c840}
.code-filename{
  font-size:13px;color:#71717a;font-family:'JetBrains Mono',monospace;
  margin-left:12px;
}
.code-body{
  padding:28px 28px 32px;font-family:'JetBrains Mono',monospace;
  font-size:13.5px;line-height:1.85;overflow-x:auto;
  white-space:pre;
}
.code-body .comment{color:#6b7280}
.code-body .keyword{color:#c084fc}
.code-body .string{color:#34d399}
.code-body .func{color:#60a5fa}
.code-body .var{color:#e4e4e7}
.code-body .method{color:#fbbf24}
.code-body .class{color:#f472b6}
.code-body .punct{color:#71717a}
.code-body .num{color:#fb923c}

/* ============================================
   PRICING
   ============================================ */
.pricing{padding:120px 0;background:var(--bg-subtle);position:relative}
/* Full-bleed top rule for pricing */
.pricing::before{
  content:'';position:absolute;top:0;left:0;right:0;
  border-top:1px solid var(--border);
}
.pricing-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  max-width:1000px;margin:0 auto;
  border:1px solid var(--border);position:relative;
}
.pricing-card{
  padding:40px 36px;border-right:1px solid var(--border);
  background:#fff;position:relative;
  transition:box-shadow .3s;
}
.pricing-card:last-child{border-right:none}
.pricing-card.featured{
  background:linear-gradient(180deg,rgba(99,91,255,0.03),rgba(99,91,255,0.01));
  box-shadow:0 0 0 1px var(--indigo) inset;
  z-index:1;
}
.pricing-card.featured::before{
  content:'Most Popular';
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--indigo);color:#fff;
  font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
  padding:4px 14px;border-radius:9999px;white-space:nowrap;
}
.pricing-tier{
  font-family:'DM Sans',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--indigo);margin-bottom:12px;display:block;
}
.pricing-price{
  font-family:'Playfair Display',Georgia,serif;font-size:48px;font-weight:700;
  letter-spacing:-0.03em;margin-bottom:4px;
}
.pricing-price span{font-size:16px;font-weight:400;color:var(--text-tertiary)}
.pricing-desc{font-size:14px;color:var(--text-tertiary);margin-bottom:28px;line-height:1.5}
.pricing-btn{
  width:100%;display:flex;justify-content:center;
  margin-bottom:28px;
}
.pricing-btn .btn-primary,.pricing-btn .btn-ghost{width:100%;justify-content:center}
.pricing-features{list-style:none;display:flex;flex-direction:column;gap:12px}
.pricing-features li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:14px;color:var(--text-secondary);line-height:1.5;
}
.pricing-features li svg{flex-shrink:0;margin-top:2px;color:var(--indigo)}

/* ============================================
   CTA BANNER
   ============================================ */
.cta-banner{
  padding:120px 0;background:#fff;
  text-align:center;position:relative;
}
.cta-banner::before{
  content:'';position:absolute;top:0;left:0;right:0;
  border-top:1px solid var(--border);
}
.cta-banner h2{
  font-size:clamp(36px,4.5vw,56px);font-weight:700;
  margin-bottom:20px;letter-spacing:-0.035em;
}
.cta-banner p{
  font-size:18px;color:var(--text-secondary);margin-bottom:36px;
  max-width:480px;margin-left:auto;margin-right:auto;
}

/* ============================================
   FOOTER
   ============================================ */
footer{
  padding:48px 0;
  border-top:1px solid var(--border);
  background:var(--bg-subtle);
}
.footer-inner{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1200px;margin:0 auto;padding:0 32px;
}
.footer-logo{
  font-family:'Playfair Display',Georgia,serif;font-size:18px;font-weight:700;
  color:var(--near-black);letter-spacing:-0.03em;
}
.footer-links{display:flex;gap:28px}
.footer-links a{font-size:14px;color:var(--text-tertiary);transition:color .2s}
.footer-links a:hover{color:var(--near-black)}
.footer-tagline{font-size:13px;color:var(--text-tertiary)}

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */
.fade-up{
  opacity:0;transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
}
.fade-up.visible{opacity:1;transform:translateY(0)}
.fade-up-delay-1{transition-delay:.1s}
.fade-up-delay-2{transition-delay:.2s}
.fade-up-delay-3{transition-delay:.3s}
.fade-up-delay-4{transition-delay:.4s}
.fade-up-delay-5{transition-delay:.5s}

/* ============================================
   RESPONSIVE
   ============================================ */
@media(max-width:900px){
  .nav-links{display:none}
  .feature-grid{grid-template-columns:1fr}
  .feature-cell{border-right:none!important}
  .feature-cell:last-child{border-bottom:none}
  .spotlight-inner{grid-template-columns:1fr;gap:40px}
  .spotlight-section:nth-child(even) .spotlight-inner{direction:ltr}
  .pricing-grid{grid-template-columns:1fr}
  .pricing-card{border-right:none!important;border-bottom:1px solid var(--border)}
  .pricing-card:last-child{border-bottom:none}
  .stats-inner{flex-direction:column}
  .stat-item{border-right:none!important;border-bottom:1px solid var(--border)}
  .stat-item:last-child{border-bottom:none}
  .footer-inner{flex-direction:column;gap:20px;text-align:center}
  .footer-links{flex-wrap:wrap;justify-content:center}
}
@media(max-width:600px){
  .hero h1{font-size:36px}
  .hero-code{font-size:12px;padding:10px 16px;flex-wrap:wrap}
  .hero-ctas{flex-direction:column}
  .container{padding:0 20px}
}

/* ============================================
   ADDITIONS — SERVICE POSITIONING
   ============================================ */

/* Nav: active page + service CTA */
.nav-links a{position:relative;transition:color .2s}
.nav-links a.active{color:var(--near-black);font-weight:600}
.nav-links a.active::after{
  content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--indigo);border-radius:2px;
}

/* Hero support copy */
.hero-note{
  font-size:13px;color:var(--text-tertiary);margin-top:20px;
  display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;
}
.hero-note .dot{width:6px;height:6px;border-radius:50%;background:var(--sq-teal);flex-shrink:0}

/* Proof strip — small honest credibility line */
.proof-strip{
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:var(--bg-subtle);padding:22px 0;
}
.proof-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:12px 28px;text-align:center;
}
.proof-item{
  display:flex;align-items:center;gap:9px;
  font-size:13.5px;color:var(--text-secondary);
}
.proof-item svg{color:var(--indigo);flex-shrink:0}

/* Lead-in prose block */
.prose-block{max-width:720px;margin:0 auto}
.prose-block p{font-size:17px;color:var(--text-secondary);line-height:1.75;margin-bottom:18px}
.prose-block p:last-child{margin-bottom:0}
.prose-block strong{color:var(--near-black);font-weight:600}

/* Numbered process steps */
.process{padding:120px 0;background:#fff;position:relative}
.process::before{content:'';position:absolute;top:0;left:0;right:0;border-top:1px solid var(--border)}
.process-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--border);position:relative;
}
.process-step{
  padding:36px 30px;border-right:1px solid var(--border);
  position:relative;background:#fff;
}
.process-step:last-child{border-right:none}
.process-num{
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;
  letter-spacing:0.12em;color:var(--indigo);margin-bottom:14px;display:block;
}
.process-step h3{font-size:19px;font-weight:600;margin-bottom:10px;letter-spacing:-0.02em}
.process-step p{font-size:14px;color:var(--text-secondary);line-height:1.6}
.process-when{
  font-size:12px;color:var(--text-tertiary);margin-top:14px;padding-top:12px;
  border-top:1px solid var(--border-light);font-weight:500;
}

/* Chat transcript panel (reuses .code-panel shell) */
.transcript{padding:28px;display:flex;flex-direction:column;gap:18px}
.chat-turn{display:flex;flex-direction:column;gap:8px;max-width:88%}
.chat-turn.user{align-self:flex-end;align-items:flex-end}
.chat-who{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.12em;
  text-transform:uppercase;color:#71717a;
}
.chat-bubble{
  border-radius:12px;padding:14px 18px;font-size:14.5px;line-height:1.65;
  background:#1a1a1a;border:1px solid #27272a;color:#d4d4d8;
}
.chat-turn.user .chat-bubble{
  background:linear-gradient(135deg,rgba(232,54,143,0.16),rgba(99,91,255,0.16));
  border-color:rgba(99,91,255,0.35);color:#f4f4f5;
}
.chat-cite{
  display:flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:11px;color:#8b8b95;
  padding:7px 0 0;
}
.chat-cite .pin{width:6px;height:6px;border-radius:50%;background:var(--sq-teal);flex-shrink:0}
.chat-cite a{color:#a1a1aa;border-bottom:1px dotted #52525b}
.chat-meta{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;
}
.chat-chip{
  font-size:10px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:5px;
  background:rgba(99,91,255,0.14);color:#a5a0ff;border:1px solid rgba(99,91,255,0.25);
}
.chat-chip.warn{background:rgba(245,158,11,0.12);color:#fbbf24;border-color:rgba(245,158,11,0.25)}

/* Comparison table — same grid language as .process-grid / .pricing-grid:
   1px frame, full-strength column dividers, white cells, .sq corner dots.
   Border and dots live on .compare-wrap so the inner scroller can't clip them. */
.compare-wrap{
  max-width:1000px;margin:0 auto;
  border:1px solid var(--border);background:#fff;position:relative;
}
/* overflow-y must be stated: a non-visible overflow-x computes the other axis
   to auto, giving a phantom vertical scroller that reserves a scrollbar
   gutter over the right column and its dots. */
.compare-scroll{overflow-x:auto;overflow-y:hidden}
table.compare{
  border-collapse:collapse;table-layout:fixed;
  width:100%;min-width:640px;font-size:14px;
}
table.compare th,table.compare td{border-right:1px solid var(--border)}
table.compare th:last-child,table.compare td:last-child{border-right:none}
table.compare th{
  text-align:left;font-family:'DM Sans',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--text-tertiary);padding:20px 26px;
  border-bottom:1px solid var(--border);
}
table.compare th.hl{color:var(--indigo)}
table.compare td{
  padding:20px 26px;border-bottom:1px solid var(--border);
  color:var(--text-secondary);line-height:1.6;vertical-align:top;
}
table.compare tr:last-child td{border-bottom:none}
table.compare td.row-label{color:var(--near-black);font-weight:600}
table.compare td.hl,table.compare th.hl{background:rgba(99,91,255,0.035)}
table.compare td.hl{color:var(--near-black)}

/* Inline source citations */
.cite-note{
  font-size:12.5px;color:var(--text-tertiary);line-height:1.6;
  max-width:900px;margin:14px auto 0;
}
.cite-note a{color:var(--text-secondary);border-bottom:1px solid var(--border)}
.cite-note a:hover{color:var(--indigo);border-bottom-color:var(--indigo)}
.sup{
  font-size:10px;vertical-align:super;color:var(--indigo);font-weight:600;
  font-family:'DM Sans',sans-serif;
}

/* Engagement badge override */
.pricing-card.featured[data-badge]::before{content:attr(data-badge)}
.pricing-note{
  font-size:13px;color:var(--text-tertiary);text-align:center;
  max-width:620px;margin:28px auto 0;line-height:1.6;
}

/* Contact */
.contact{padding:120px 0;background:#fff;position:relative}
.contact::before{content:'';position:absolute;top:0;left:0;right:0;border-top:1px solid var(--border)}
.contact-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;
  max-width:1000px;margin:0 auto;
}
.contact-text h2{font-size:clamp(30px,3.6vw,42px);font-weight:600;margin-bottom:18px;letter-spacing:-0.03em}
.contact-text p{font-size:16.5px;color:var(--text-secondary);line-height:1.7;margin-bottom:18px}
.contact-direct{
  border-top:1px solid var(--border);margin-top:28px;padding-top:24px;
  display:flex;flex-direction:column;gap:12px;
}
.contact-direct a{
  display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;
  color:var(--near-black);
}
.contact-direct a svg{color:var(--indigo);flex-shrink:0}
.contact-direct a:hover{color:var(--indigo)}

.contact-form{
  background:var(--bg-subtle);border:1px solid var(--border);
  border-radius:0;padding:32px;position:relative;
}
.form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.form-row label{
  font-size:12px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--text-tertiary);
}
.form-row input,.form-row textarea,.form-row select{
  font-family:'DM Sans',sans-serif;font-size:15px;color:var(--near-black);
  background:#fff;border:1px solid var(--border);border-radius:0;
  padding:12px 14px;width:100%;transition:border-color .2s,box-shadow .2s;
}
.form-row textarea{resize:vertical;min-height:110px;line-height:1.6}
.form-row input:focus,.form-row textarea:focus,.form-row select:focus{
  outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px var(--indigo-glow);
}
.form-submit{width:100%;justify-content:center}
.form-privacy{font-size:12px;color:var(--text-tertiary);margin-top:14px;line-height:1.55;text-align:center}
.form-privacy a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.form-privacy a:hover{color:var(--text-secondary)}
/* Google's floating badge is hidden; the disclosure link under the form
   carries the attribution their terms require in its place. */
.grecaptcha-badge{visibility:hidden}

/* Honeypot — off-screen, never focusable */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Contact form — error and thank-you states */
.form-status{
  font-size:13.5px;line-height:1.55;margin-top:14px;padding:12px 14px;
  border:1px solid var(--sq-rose);border-radius:0;
  background:rgba(244,63,94,0.05);color:var(--sq-rose);
}
.form-submit[disabled]{opacity:.6;cursor:default;pointer-events:none}
/* Sent: the thanks panel becomes the whole form box. The form's own border
   carries the indigo, so there's no doubled 1px line where the two would meet,
   and the .sq corner dots still sit on top of it. */
.contact-form.is-sent{padding:0;background:#fff;border-color:var(--indigo)}
.form-thanks{padding:52px 28px;text-align:center}
.form-thanks h3{font-size:22px;margin-bottom:8px;color:var(--near-black)}
.form-thanks p{font-size:14.5px;color:var(--text-secondary);line-height:1.6}

@media(max-width:900px){
  .process-grid{grid-template-columns:1fr}
  .process-step{border-right:none;border-bottom:1px solid var(--border)}
  .process-step:last-child{border-bottom:none}
  .contact-grid{grid-template-columns:1fr;gap:40px}
  .chat-turn{max-width:100%}
}

/* Engagement — term pricing */
.pricing-then{
  font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;
  color:var(--indigo);margin:-2px 0 6px;
}
.pricing-alt{
  font-size:12.5px;color:var(--text-tertiary);line-height:1.5;margin-bottom:20px;
}
.terms-strip{
  max-width:1000px;margin:32px auto 0;
  border:1px solid var(--border);background:#fff;
  display:grid;grid-template-columns:repeat(4,1fr);
}
.terms-item{padding:22px 24px;border-right:1px solid var(--border)}
.terms-item:last-child{border-right:none}
.terms-item dt{
  font-size:10.5px;font-weight:600;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--indigo);margin-bottom:8px;
}
.terms-item dd{margin:0;font-size:14px;color:var(--text-secondary);line-height:1.55}
@media(max-width:900px){
  .terms-strip{grid-template-columns:1fr 1fr}
  .terms-item{border-bottom:1px solid var(--border)}
  .terms-item:nth-child(2n){border-right:none}
  .terms-item:nth-last-child(-n+2){border-bottom:none}
}
@media(max-width:600px){
  .terms-strip{grid-template-columns:1fr}
  .terms-item{border-right:none!important;border-bottom:1px solid var(--border)}
  .terms-item:last-child{border-bottom:none}
}
.pricing-price .pre{
  display:block;font-family:'DM Sans',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--text-tertiary);margin-bottom:2px;
}

/* ============================================
   TWO DEPLOYMENTS
   ============================================ */
.deploy{padding:120px 0;background:var(--bg-subtle);position:relative}
.deploy::before{content:'';position:absolute;top:0;left:0;right:0;border-top:1px solid var(--border)}
.deploy-grid{
  display:grid;grid-template-columns:1fr 1fr;
  border:1px solid var(--border);background:#fff;
  max-width:1020px;margin:0 auto;position:relative;
}
.deploy-col{padding:38px 36px;border-right:1px solid var(--border)}
.deploy-col:last-child{border-right:none}
.deploy-tag{
  display:inline-block;font-family:'DM Sans',sans-serif;
  font-size:10.5px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  padding:4px 10px;border-radius:5px;margin-bottom:18px;
}
.deploy-tag.inward{background:var(--indigo-soft);color:var(--indigo)}
.deploy-tag.outward{background:rgba(232,54,143,0.08);color:var(--pink)}
.deploy-col h3{font-size:25px;font-weight:600;margin-bottom:12px;letter-spacing:-0.025em}
.deploy-col > p{font-size:15.5px;color:var(--text-secondary);line-height:1.7;margin-bottom:22px}
.deploy-col ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:24px}
.deploy-col ul li{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:var(--text-secondary);line-height:1.5}
.deploy-col ul li svg{flex-shrink:0;margin-top:3px}
.deploy-col.inward ul li svg{color:var(--indigo)}
.deploy-col.outward ul li svg{color:var(--pink)}
.deploy-who{
  border-top:1px solid var(--border-light);padding-top:16px;
  font-size:13.5px;color:var(--text-tertiary);line-height:1.55;
}
.deploy-who b{color:var(--text-secondary);font-weight:600}

/* ============================================
   TABS
   ============================================ */
.tabs{display:flex;gap:8px;justify-content:center;margin-bottom:26px;flex-wrap:wrap}
.tab{
  font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;
  padding:9px 20px;border-radius:9999px;cursor:pointer;
  border:1px solid var(--border);background:#fff;color:var(--text-secondary);
  transition:background .2s,color .2s,border-color .2s;
}
.tab:hover{border-color:var(--text-tertiary);color:var(--near-black)}
.tab[aria-selected="true"]{background:var(--near-black);color:#fff;border-color:var(--near-black)}
.tab:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
.tabpanel[hidden]{display:none}

@media(max-width:900px){
  .deploy-grid{grid-template-columns:1fr}
  .deploy-col{border-right:none;border-bottom:1px solid var(--border)}
  .deploy-col:last-child{border-bottom:none}
}

/* ============================================
   ENGAGEMENT — CONSOLIDATED CTA
   ============================================ */
.engage-cta{
  max-width:1000px;margin:36px auto 0;
  border:1px solid var(--border);background:#fff;
  padding:38px 36px;text-align:center;position:relative;
}
.engage-cta h3{
  font-size:clamp(22px,2.4vw,28px);font-weight:600;
  letter-spacing:-0.025em;margin-bottom:12px;
}
.engage-cta p{
  font-size:16px;color:var(--text-secondary);line-height:1.7;
  max-width:640px;margin:0 auto 26px;
}
.engage-cta-note{
  font-size:13px!important;color:var(--text-tertiary)!important;
  max-width:600px;margin:24px auto 0!important;line-height:1.6;
  padding-top:20px;border-top:1px solid var(--border);
}