/* ============================================================
   OPI ROBOTICS — Components  (BEM-ish naming)
   ============================================================ */

/* ---------- NAV — floating minimal bar → solid once sheet covers hero ---------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  padding: 22px var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  background:transparent; border-bottom:1px solid transparent;
}
.site-nav.is-solid{
  background:rgba(11,16,32,.78);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--border);
  padding-top:14px; padding-bottom:14px;
}
.wordmark{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.05rem; letter-spacing:-.01em; color:var(--text-1); }
/* Drop-in logo: /assets/brand/logo.<ext> replaces the CSS mark + text below. */
.wordmark__logo{ display:block; height:40px; width:auto; max-width:240px; }
/* The CSS mark + text are only a safety net: brand.js adds .no-logo if no image decodes. */
.wordmark .wordmark__mark, .wordmark .wordmark__text{ display:none; }
.wordmark.no-logo .wordmark__logo{ display:none; }
.wordmark.no-logo .wordmark__mark{ display:flex; }
.wordmark.no-logo .wordmark__text{ display:inline; }
@media (max-width:560px){ .wordmark__logo{ height:34px; max-width:190px; } }
.wordmark__mark{ width:26px; height:26px; border-radius:7px; background:conic-gradient(from 220deg, var(--p), var(--a), var(--p)); display:flex; align-items:center; justify-content:center; box-shadow:var(--glow-p); flex:none; }
.wordmark__mark::after{ content:""; width:8px; height:8px; border-radius:2px; background:var(--bg); transform:rotate(45deg); }

.nav-trigger{
  display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-full);
  padding:8px 8px 8px 18px; height:44px; cursor:pointer; color:var(--text-1);
}
.nav-trigger__label{ font-size:13.5px; font-family:var(--font-mono); letter-spacing:.04em; color:var(--text-2); }
.nav-trigger__icon{ width:28px; height:28px; border-radius:50%; background:var(--surface-raised); display:flex; align-items:center; justify-content:center; }
.nav-trigger__icon span{ display:block; width:12px; height:1.5px; background:var(--text-1); position:relative; }
.nav-trigger__icon span::before,.nav-trigger__icon span::after{ content:""; position:absolute; left:0; width:100%; height:100%; background:var(--text-1); }
.nav-trigger__icon span::before{ top:-4px; } .nav-trigger__icon span::after{ top:4px; }

/* ---------- Full-screen overlay index menu ----------
   Compact type + two-column index on wide screens, so all eight routes fit
   without scrolling. The panel uses `margin:auto` (not align-items:center)
   because a centred flex child gets its overflow clipped on short screens. */
.nav-overlay{
  position:fixed; inset:0; z-index:950; background:var(--bg-deep);
  opacity:0; visibility:hidden; display:flex; flex-direction:column;
  transition:opacity var(--dur-base) var(--ease-out-premium), visibility var(--dur-base);
}
.nav-overlay.is-open{ opacity:1; visibility:visible; }
.nav-overlay__top{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gutter); border-bottom:1px solid var(--border);
}
.nav-overlay__panel{
  flex:1 1 auto; min-height:0; display:flex;
  overflow-y:auto; overscroll-behavior:contain;
  padding:var(--sp-3) var(--gutter);
  transform:translateY(10px); transition:transform var(--dur-slow) var(--ease-out-premium);
}
.nav-overlay.is-open .nav-overlay__panel{ transform:translateY(0); }

.nav-index{ width:100%; margin:auto; display:grid; gap:0 var(--sp-5); }
@media (min-width:820px){ .nav-index{ grid-template-columns:1fr 1fr; } }
.nav-index li{ border-top:1px solid var(--border); }
.nav-index li:last-child{ border-bottom:1px solid var(--border); }
@media (min-width:820px){
  /* Close the seam at the foot of both columns. */
  .nav-index li:nth-last-child(2){ border-bottom:1px solid var(--border); }
}

.nav-index a{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:0 16px;
  padding:14px 6px; color:var(--text-2);
  transition:color var(--dur-fast) var(--ease-out-premium), padding-left var(--dur-fast) var(--ease-out-premium);
}
.nav-index a .idx{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em;
  color:var(--text-3); transition:color var(--dur-fast) var(--ease-out-premium);
}
.nav-index__text{ display:block; min-width:0; }
.nav-index__label{
  display:block; font-size:clamp(1.02rem,.96rem + .32vw,1.24rem);
  font-weight:600; letter-spacing:-.01em; line-height:1.25;
}
.nav-index__desc{
  display:block; margin-top:3px; font-size:12.5px; line-height:1.35;
  color:var(--text-3); font-weight:400; letter-spacing:0;
}
/* Chevron, drawn from borders so there is no icon-font dependency. */
.nav-index__arrow{
  width:7px; height:7px; border-top:1.5px solid var(--text-3); border-right:1.5px solid var(--text-3);
  transform:rotate(45deg) translateX(-2px); opacity:0;
  transition:opacity var(--dur-fast) var(--ease-out-premium), transform var(--dur-fast) var(--ease-out-premium);
}
@media (hover:hover){
  .nav-index a:hover{ color:var(--text-1); padding-left:12px; }
  .nav-index a:hover .idx{ color:var(--a); }
  .nav-index a:hover .nav-index__arrow{ opacity:1; transform:rotate(45deg) translateX(0); border-color:var(--a); }
}
.nav-index a:focus-visible{ color:var(--text-1); }
.nav-index a[aria-current="page"]{ color:var(--text-1); }
.nav-index a[aria-current="page"] .idx{ color:var(--a); }
.nav-index a[aria-current="page"] .nav-index__arrow{ opacity:1; border-color:var(--a); transform:rotate(45deg) translateX(0); }

/* Rows ease in one after another once the overlay opens. */
.nav-index li{ opacity:0; transform:translateY(6px); transition:opacity var(--dur-base) var(--ease-out-premium), transform var(--dur-base) var(--ease-out-premium); }
.nav-overlay.is-open .nav-index li{ opacity:1; transform:none; }
.nav-overlay.is-open .nav-index li:nth-child(1){ transition-delay:40ms; }
.nav-overlay.is-open .nav-index li:nth-child(2){ transition-delay:70ms; }
.nav-overlay.is-open .nav-index li:nth-child(3){ transition-delay:100ms; }
.nav-overlay.is-open .nav-index li:nth-child(4){ transition-delay:130ms; }
.nav-overlay.is-open .nav-index li:nth-child(5){ transition-delay:160ms; }
.nav-overlay.is-open .nav-index li:nth-child(6){ transition-delay:190ms; }
.nav-overlay.is-open .nav-index li:nth-child(7){ transition-delay:220ms; }
.nav-overlay.is-open .nav-index li:nth-child(8){ transition-delay:250ms; }

.nav-overlay__foot{
  flex:0 0 auto; padding:var(--sp-2) var(--gutter) var(--sp-3);
  border-top:1px solid var(--border);
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  color:var(--text-3); font-size:13px;
}
.nav-overlay__foot a{ color:var(--text-2); }
@media (hover:hover){ .nav-overlay__foot a:hover{ color:var(--text-1); } }
.nav-overlay__foot .nav-foot__spacer{ margin-left:auto; }

.nav-close{ width:40px; height:40px; border-radius:50%; border:1px solid var(--border-strong); background:transparent; color:var(--text-1); position:relative; cursor:pointer; flex:none; transition:background var(--dur-fast) var(--ease-out-premium); }
@media (hover:hover){ .nav-close:hover{ background:var(--surface); } }
.nav-close::before,.nav-close::after{ content:""; position:absolute; left:13px; right:13px; top:50%; height:1.5px; background:var(--text-1); }
.nav-close::before{ transform:rotate(45deg); } .nav-close::after{ transform:rotate(-45deg); }

/* The cookie banner sits above the overlay in z-order, so it would cover the
   menu's own sign-in links. Hide it for as long as the menu is open. */
body.nav-open .cookie-banner{ opacity:0; visibility:hidden; pointer-events:none; }

/* Short viewports: drop the descriptions and tighten the rhythm. */
@media (max-height:640px){
  .nav-index__desc{ display:none; }
  .nav-index a{ padding:10px 6px; }
  .nav-overlay__top{ padding:12px var(--gutter); }
}
@media (prefers-reduced-motion:reduce){
  .nav-overlay,.nav-overlay__panel,.nav-index li,.nav-index a,.nav-index__arrow{ transition:none; }
  .nav-index li{ opacity:1; transform:none; }
  .nav-overlay__panel{ transform:none; }
}

/* ---------- BUTTONS — no pill+arrow formula ---------- */
.btn{
  display:inline-flex; align-items:center; height:var(--ctrl-h-btn); border-radius:var(--r-sm);
  font-weight:600; font-size:15.5px; cursor:pointer; border:1px solid transparent; white-space:nowrap;
}
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn-primary{
  background:var(--p); color:#fff; padding:0;
}
.btn-primary .btn__cell{ padding:0 var(--ctrl-pad-x); display:flex; align-items:center; height:100%; }
.btn-primary .btn__cell + .btn__cell{ border-left:1px solid rgba(255,255,255,.25); }
.btn-ghost{ background:transparent; border-color:var(--border-strong); color:var(--text-1); padding:0 var(--ctrl-pad-x); }
.btn-text{ background:none; border:0; color:var(--text-1); padding:0; height:auto; position:relative; }
.btn-text::after{ content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform var(--dur-base) var(--ease-out-premium); }
@media (hover:hover){ .btn-text:hover::after{ transform:scaleX(1); } }
.btn-block{ width:100%; justify-content:center; }
.btn .spinner{ width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation:spin .7s linear infinite; margin-right:10px; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- ROW CARD — hairline list rows, not equal rounded grid ---------- */
.row-card{
  display:grid; grid-template-columns: 90px 1fr; gap:var(--sp-4); align-items:start;
  padding:var(--sp-4) var(--sp-2); border-top:1px solid var(--border);
}
.row-card:last-child{ border-bottom:1px solid var(--border); }
.row-card__idx{ font-family:var(--font-mono); font-size:14px; color:var(--a); padding-top:6px; }
.row-card__body h3{ margin-bottom:10px; }
.row-card__body p{ color:var(--text-2); max-width:60ch; }
@media (max-width:639px){ .row-card{ grid-template-columns:1fr; gap:var(--sp-1); } .row-card__idx{ padding-top:0; } }

.row-link{ display:inline-flex; align-items:center; gap:10px; color:var(--p-hover); font-weight:600; }
.row-link__arrow{ display:inline-block; transition:transform var(--dur-fast) var(--ease-out-premium); }

/* ---------- STAT / DATA CHIP ---------- */
.stat{ display:flex; flex-direction:column; gap:4px; }
.stat b{ font-size:clamp(2rem,1.6rem + 1.6vw,2.75rem); font-weight:700; letter-spacing:-.02em; }
.stat span{ color:var(--text-3); font-size:13.5px; font-family:var(--font-mono); }

/* ---------- BADGE ---------- */
.badge{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-family:var(--font-mono); padding:4px 10px; border-radius:var(--r-full); border:1px solid var(--border-strong); color:var(--text-2); }

/* ---------- FORM ---------- */
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:var(--sp-3); }
.field label{ font-size:13.5px; font-weight:600; color:var(--text-1); }
.field .hint{ font-size:13px; color:var(--text-3); }
.field .error-msg{ font-size:13px; color:var(--error); display:none; align-items:center; gap:6px; }
.field.has-error .error-msg{ display:flex; }
.field.has-error input{ border-color:var(--error); }
.field.is-valid input{ border-color:var(--success); }
.input-wrap{ position:relative; display:flex; align-items:center; }
input[type=text],input[type=email],input[type=password]{
  width:100%; height:var(--ctrl-h-input); background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--r-sm); color:var(--text-1); padding:0 16px; outline:none;
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast);
}
input::placeholder{ color:var(--text-3); }
input:focus{ border-color:var(--p); box-shadow:0 0 0 3px var(--p-focus-ring); }
.input-toggle{ position:absolute; right:14px; background:none; border:0; color:var(--text-3); cursor:pointer; padding:6px; }
.checkbox-row{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--text-2); }
.checkbox-row input{ width:18px; height:18px; margin-top:2px; accent-color:var(--p); flex:none; }
.checkbox-row a{ color:var(--text-1); text-decoration:underline; text-decoration-color:var(--border-strong); }

.strength-meter{ display:flex; gap:4px; margin-top:6px; }
.strength-meter i{ height:3px; flex:1; background:var(--border-strong); border-radius:2px; }
.strength-meter[data-level="1"] i:nth-child(1){ background:var(--error); }
.strength-meter[data-level="2"] i:nth-child(-n+2){ background:var(--warning); }
.strength-meter[data-level="3"] i:nth-child(-n+3){ background:var(--success); }
.strength-label{ font-size:12.5px; color:var(--text-3); margin-top:6px; }
.pw-checklist{ margin-top:8px; display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--text-3); }
.pw-checklist li{ display:flex; align-items:center; gap:6px; }
.pw-checklist li.met{ color:var(--success); }
.pw-checklist li .dot{ width:5px; height:5px; border-radius:50%; background:currentColor; }

/* OTP */
.otp-row{ display:flex; gap:10px; }
.otp-box{
  width:100%; height:56px; text-align:center; font-size:22px; font-family:var(--font-mono);
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-sm); color:var(--text-1);
}
.otp-box:focus{ border-color:var(--a); box-shadow:0 0 0 3px rgba(34,211,238,.2); }

/* ---------- COOKIE BANNER ---------- */
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:1500; max-width:560px;
  background:var(--surface-raised); border:1px solid var(--border-strong); border-radius:var(--r-md);
  padding:var(--sp-3); box-shadow:var(--elev-3);
  transform:translateY(120%); transition:transform var(--dur-slow) var(--ease-out-premium);
}
.cookie-banner.is-visible{ transform:translateY(0); }
/* On desktop the hero stats sit bottom-LEFT, so pin the consent banner to the
   right edge instead — otherwise it covers the hero figures on first visit. */
@media (min-width:900px){
  .cookie-banner{ left:auto; right:24px; bottom:24px; }
}
.cookie-banner p{ font-size:13.5px; color:var(--text-2); margin-bottom:var(--sp-2); }
.cookie-banner__actions{ display:flex; gap:10px; flex-wrap:wrap; }
.cookie-banner__actions .btn{ height:40px; font-size:13.5px; }

.cookie-modal{ position:fixed; inset:0; z-index:1600; display:none; align-items:flex-end; justify-content:center; background:rgba(4,6,13,.6); }
.cookie-modal.is-open{ display:flex; }
.cookie-modal__panel{ width:100%; max-width:560px; background:var(--surface-raised); border:1px solid var(--border-strong); border-radius:var(--r-lg) var(--r-lg) 0 0; padding:var(--sp-4); margin-bottom:0; max-height:80vh; overflow:auto; }
@media (min-width:640px){ .cookie-modal{ align-items:center; } .cookie-modal__panel{ border-radius:var(--r-lg); margin-bottom:var(--sp-4); } }
.cookie-toggle-row{ display:flex; align-items:center; justify-content:space-between; padding:var(--sp-2) 0; border-top:1px solid var(--border); gap:var(--sp-2); }
.switch{ position:relative; width:44px; height:26px; flex:none; }
.switch input{ opacity:0; width:44px; height:26px; position:absolute; cursor:pointer; margin:0; }
.switch .track{ position:absolute; inset:0; background:var(--border-strong); border-radius:var(--r-full); transition:background var(--dur-fast); }
.switch .thumb{ position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--text-1); transition:transform var(--dur-fast); }
.switch input:checked + .track{ background:var(--p); }
.switch input:checked ~ .thumb{ transform:translateX(18px); }
.switch input:disabled ~ .track{ background:var(--success); opacity:.5; }

/* ---------- FOOTER — directory slab, not 4-column grid ---------- */
/* The footer MUST be opaque and sit above .hero-stage (position:fixed, z-index:0).
   Without its own background the fixed hero canvas shows through the footer and
   the wordmark collides with the hero headline. Only .finale is intentionally
   transparent so the hero canvas can reappear for the ending reveal. */
.site-footer{
  position:relative;
  z-index:3;
  background:var(--bg-deep);
  border-top:1px solid var(--border);
  padding-top:var(--sp-8);
}
.footer-slab{ font-size:clamp(2.1rem, 11.2vw, 164px); font-weight:700; letter-spacing:-.035em; line-height:.92; color:var(--text-1); opacity:.94; white-space:nowrap; overflow:hidden; }
.footer-directory{ margin-top:var(--sp-6); display:flex; flex-direction:column; }
.footer-directory__row{ display:grid; grid-template-columns:180px 1fr; gap:var(--sp-3); padding:var(--sp-2) 0; border-top:1px solid var(--border); }
.footer-directory__label{ font-family:var(--font-mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); padding-top:4px; }
.footer-directory__links{ display:flex; flex-wrap:wrap; gap:var(--sp-3); }
.footer-directory__links a{ color:var(--text-2); font-size:14.5px; }
@media (hover:hover){ .footer-directory__links a:hover{ color:var(--text-1); } }
@media (max-width:639px){ .footer-directory__row{ grid-template-columns:1fr; gap:8px; } }
.footer-bottom{ margin-top:var(--sp-6); padding:var(--sp-3) 0; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:var(--sp-2); justify-content:space-between; color:var(--text-3); font-size:13px; }
.footer-bottom a{ color:var(--text-3); }
.footer-social{ display:flex; gap:var(--sp-2); }

/* ---------- PRICING MATRIX — table instead of 3-card grid ---------- */
.matrix-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.matrix{ width:100%; border-collapse:collapse; min-width:640px; }
.matrix th,.matrix td{ padding:16px 20px; border-top:1px solid var(--border); text-align:left; vertical-align:middle; }
.matrix thead th{ border-top:0; padding-bottom:20px; }
.matrix thead th.plan-head{ font-size:1.05rem; }
.matrix thead .plan-price{ display:block; font-family:var(--font-mono); color:var(--a); font-size:14px; margin-top:6px; font-weight:400; }
.matrix tbody th{ color:var(--text-2); font-weight:500; font-size:14.5px; width:38%; }
.matrix td{ font-size:14.5px; color:var(--text-2); text-align:center; }
.matrix td .yes{ color:var(--a); }
.matrix td .no{ color:var(--text-3); }
.matrix tfoot td{ padding-top:var(--sp-3); }

/* ---------- BLOG ---------- */
.blog-row{ display:grid; grid-template-columns: 140px 1fr; gap:var(--sp-4); padding:var(--sp-4) 0; border-top:1px solid var(--border); }
.blog-row:last-child{ border-bottom:1px solid var(--border); }
.blog-row time{ font-family:var(--font-mono); font-size:13px; color:var(--text-3); }
.blog-row h3{ margin-bottom:8px; }
.blog-row p{ color:var(--text-2); max-width:64ch; }
@media (max-width:639px){ .blog-row{ grid-template-columns:1fr; gap:6px; } }

.prose{ max-width:680px; font-size:1.0625rem; color:var(--text-2); }
.prose h2{ color:var(--text-1); margin-top:var(--sp-5); margin-bottom:var(--sp-2); font-size:1.6rem; }
.prose h3{ color:var(--text-1); margin-top:var(--sp-4); margin-bottom:var(--sp-1); }
.prose p{ margin-bottom:var(--sp-2); }
.prose ul{ margin-bottom:var(--sp-2); display:flex; flex-direction:column; gap:8px; }
.prose li{ padding-left:20px; position:relative; }
.prose li::before{ content:""; position:absolute; left:0; top:11px; width:6px; height:1px; background:var(--a); }
.prose blockquote{ border-left:2px solid var(--a); padding-left:var(--sp-2); color:var(--text-1); font-size:1.15rem; margin:var(--sp-3) 0; }

/* ---------- TOC ---------- */
.toc{ font-size:13.5px; }
.toc a{ display:block; padding:8px 0; color:var(--text-3); border-top:1px solid var(--border); }
.toc a:first-child{ border-top:0; }

/* ---------- TOOL ---------- */
.tool-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:var(--sp-5); align-items:start; }
@media (max-width:899px){ .tool-grid{ grid-template-columns:1fr; gap:var(--sp-4); } }
.tool-panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-4); }
.range-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.range-row output{ font-family:var(--font-mono); color:var(--a); font-size:14px; }
input[type=range]{ width:100%; accent-color:var(--p); height:32px; }
.result-line{ display:flex; align-items:baseline; justify-content:space-between; padding:14px 0; border-top:1px solid var(--border); }
.result-line:first-child{ border-top:0; }
.result-line b{ font-size:1.1rem; color:var(--text-1); }

/* ---------- AUTH ---------- */
.auth-grid{ display:grid; grid-template-columns:1fr 1fr; min-height:52dvh; gap:var(--sp-6); align-items:center; }
@media (max-width:899px){ .auth-grid{ grid-template-columns:1fr; gap:var(--sp-4); } }
.auth-card{ max-width:420px; }
.auth-aside{ color:var(--text-2); }
.auth-aside .stat{ margin-top:var(--sp-4); }

/* ---------- 404 ---------- */
.notfound{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-2); }
.notfound .code{ font-family:var(--font-mono); color:var(--a); font-size:15px; }