/* Row Relay landing page styles: clean, fast, SQL‑themed */
:root{
  --bg: #0d0d10;
  --panel: #121218;
  --text: #e9e9ef;
  --muted: #b6b6c4;
  --accent: #8b5cf6; /* violet */
  --accent2: #06b6d4; /* cyan */
  --success: #22c55e;
  --danger: #ef4444;
  --ring: rgba(139,92,246,.4);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text); background:var(--bg); line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto;}
.container{max-width:1100px; margin:0 auto; padding:0 20px}
.nav{position:fixed; top:0; left:0; right:0; z-index:1000; width:100%; backdrop-filter:saturate(140%) blur(10px); background:linear-gradient(180deg, rgba(13,13,16,.7), rgba(13,13,16,.4) 60%, rgba(13,13,16,0)); border-bottom:1px solid rgba(255,255,255,.06)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.nav + main{padding-top:65px}
.brand{display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:600}
.brand .logo{height:28px; width:auto}
.nav-links{display:flex; gap:18px; align-items:center}
.nav-links a{display:flex; align-items:center}
.nav a{color:var(--muted); text-decoration:none}
.nav a:hover{color:var(--text)}
.nav-toggle{display:none}
.cta{padding:8px 14px; border:1px solid rgba(255,255,255,.12); border-radius:999px}
.cta.primary{background:linear-gradient(135deg, var(--accent), var(--accent2)); color:#0b0b0e; font-weight:700; border:none}
.cta.large{padding:18px 28px; font-size:20px; font-weight:800; letter-spacing:.2px}
/* Extra-large CTA for hero */
.cta.xl{padding:22px 34px; font-size:22px; font-weight:800; letter-spacing:.2px}
.cta.with-icon{display:inline-flex; align-items:center; gap:12px}

/* Extra spacing to separate from chips */
.hero-copy .cta{margin-top:14px}

.hero{position:relative; overflow:hidden; padding:80px 0}
.hero-inner{display:grid; grid-template-columns: 1.2fr .8fr; gap:40px; align-items:center}
.hero-copy h1{font-size: clamp(36px, 6vw, 64px); line-height:1.05; margin:0 0 12px}
.hero-copy .accent{background:linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.sub{color:var(--muted); max-width:48ch}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 22px}
.badge{color:#0b0b0e; font-weight:600; background:linear-gradient(90deg, #c7d2fe, #a5f3fc); padding:6px 10px; border-radius:999px; font-size:12px}

/* Hero art card */
.hero-art{display:flex; justify-content:center}
/* New hero flow visual */
.flow-card{color:#0b0b0e; width:min(520px, 100%); border-radius:28px; padding:22px 22px 18px; border:1px solid rgba(0,0,0,.06);
  background:
    radial-gradient(120% 140% at 100% 100%, rgba(16,185,129,.14), rgba(255,255,255,.96) 60%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.92));
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  display:flex; flex-direction:column; align-items:stretch; gap:18px}
.pill{display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg, #ede9fe, #e9d5ff); color:#5b21b6; padding:8px 12px; border-radius:999px; font-weight:800; font-size:13px}
.query-box{
  position:relative;
  border:1px solid rgba(0,0,0,.06);
  border-radius:20px;
  padding:16px;
  box-shadow: inset 0 -8px 24px rgba(0,0,0,.05);
  background:
    linear-gradient(180deg, rgba(255,255,255,.8), rgba(245,247,250,.6)),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.04) 0, rgba(0,0,0,0.04) 1px, transparent 1px, transparent 20px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.035) 0, rgba(0,0,0,0.035) 1px, transparent 1px, transparent 24px);
}
.sql-line{margin-top:10px; font-weight:800; color:#334155; opacity:.95; font-size:14px; line-height:1.4; display:block; max-height:88px; overflow:hidden;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 100%);
}
.arrow{align-self:center; font-size:18px; color:#64748b; opacity:.9; margin:6px 0}
.destinations{display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; overflow:hidden;
  background:linear-gradient(180deg, rgba(248,250,252,.85), rgba(224,231,255,.72));
  border:1px solid rgba(0,0,0,.06); border-radius:20px; padding:12px 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 16px 28px rgba(0,0,0,.12)}
.dest-pill{display:flex; align-items:center; gap:10px; background:#dbeafe; color:#0b0b0e; padding:12px 14px; border-radius:16px; font-weight:800; font-size:14px; box-shadow:0 6px 16px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.6); max-width:100%}
.dest-pill img{width:20px; height:20px; object-fit:contain}
/* Larger Slack mark (hero only) */
.dest-pill img.logo-slack{width:60px; height:auto}

/* SQL background effect */
.sql-bg{position:absolute; inset: -10% -20% -10% -20%; pointer-events:none; background:
  radial-gradient(40% 40% at 20% 30%, rgba(139,92,246,.35), rgba(0,0,0,0) 60%),
  radial-gradient(35% 35% at 80% 20%, rgba(34,197,94,.25), rgba(0,0,0,0) 60%),
  radial-gradient(40% 35% at 60% 80%, rgba(6,182,212,.3), rgba(0,0,0,0) 60%);
  filter: blur(30px) saturate(120%);
}
.sql-bg::after{content:attr(data-code); position:absolute; inset:0; color:rgba(255,255,255,.06); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; white-space:pre; line-height:1.4; font-size:14px; mix-blend-mode:screen;}

.features{padding:60px 0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0))}
.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:28px}
.feature{background:var(--panel); border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:18px}
.feature h3{margin:0 0 6px}
.feature p{margin:0; color:var(--muted)}
@media (max-width: 900px){ .grid-3{grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 600px){ .grid-3{grid-template-columns: 1fr;} }

.waitlist{padding:70px 0}
.waitlist-form{display:grid; grid-template-columns: 1.6fr .8fr auto; gap:12px; margin-top:12px; grid-template-areas:
  "email role submit"
  "dbs dbs dbs"
  "outputs outputs outputs";}
.waitlist-form #email{grid-area: email}
.waitlist-form #role{grid-area: role}
.waitlist-form button.primary{grid-area: submit}
.waitlist-form #dbs{grid-area: dbs; min-height: 48px}
.outputs-group{grid-area: outputs; display:flex; flex-wrap:wrap; gap:12px; align-items:center; background:#0f0f14; border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:10px 12px}
.outputs-group legend{font-size:12px; color:var(--muted); padding:0 6px}
.outputs-group label{display:flex; align-items:center; gap:8px}
.waitlist-form input, .waitlist-form select{width:100%; background:#0f0f14; border:1px solid rgba(255,255,255,.12); color:var(--text); padding:12px 12px; border-radius:12px; outline:none}
.waitlist-form input:focus, .waitlist-form select:focus{border-color:var(--ring); box-shadow:0 0 0 4px var(--ring)}
.waitlist-cta{margin-top:24px; display:flex; flex-direction:column; align-items:center; gap:10px}
.waitlist-cta .cta.primary.large{display:inline-flex; align-items:center; justify-content:center; text-align:center; border-radius:999px; box-shadow:0 10px 30px rgba(0,0,0,.35); transition:transform .15s ease, box-shadow .15s ease}
.waitlist-cta .cta.primary.large:hover{transform:translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,.45)}
.waitlist-cta .cta.primary.large:active{transform:translateY(0)}
@media (max-width: 600px){
  .waitlist-cta .cta.primary.large{width:100%; max-width:420px}
}
.waitlist .fineprint{color:var(--muted); font-size:12px; margin-top:10px}
.form-msg{min-height:1.2em; color:var(--muted)}

.faq{padding:60px 0; border-top:1px solid rgba(255,255,255,.06)}
details{background:var(--panel); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:12px 16px; margin:10px 0}
summary{cursor:pointer; font-weight:600}
details p{color:var(--muted)}

.databases{padding:60px 0; border-top:1px solid rgba(255,255,255,.06)}
.db-grid{display:grid; grid-template-columns: repeat(5, minmax(160px, 1fr)); gap:16px; margin-top:16px}
.db-card{list-style:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:#ffffff; color:#0b0b0e; border:1px solid rgba(0,0,0,.08); border-radius:16px; padding:24px 16px; min-height:140px; box-shadow:0 6px 20px rgba(0,0,0,.15); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
.db-card:hover{transform:translateY(-3px); box-shadow:0 10px 26px rgba(0,0,0,.22); border-color:rgba(0,0,0,.18)}
.db-name{font-weight:800; text-align:center; color:#0b0b0e}
.db-logo{width:56px; height:auto; object-fit:contain}
/* Upsize specific logos that render small due to intrinsic whitespace */
.db-logo--mysql{width:110px}
.db-logo--sqlserver{width:104px}
.db-logo--redshift{width:120px}
.db-logo--snowflake{width:120px}

.footer{border-top:1px solid rgba(255,255,255,.06); padding:26px 0 40px}
.footer-inner{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px}
.brand-mini{display:flex; align-items:center; gap:10px}
.brand-mini .logo{height:22px; width:auto}
.links{display:flex; gap:14px}
.links a{color:var(--muted); text-decoration:none}
.links a:hover{color:var(--text)}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* Responsive */
@media (max-width: 900px){
  /* Hide navigation on mobile per request */
  .nav-toggle{display:none !important}
  .nav-links{display:none !important; position:static}
  .nav.open .nav-links{display:none !important}
  body.menu-open{overflow:auto}

  .hero-inner{grid-template-columns: 1fr; gap:24px}
  .waitlist-form{grid-template-columns: 1fr; grid-template-areas:
    "email" "role" "dbs" "outputs" "submit";}
  .db-grid{grid-template-columns: repeat(2, minmax(140px, 1fr));}
}

.outputs{padding:60px 0; border-top:1px solid rgba(255,255,255,.06)}
.out-grid{display:grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap:16px; margin-top:16px}
.out-card{list-style:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:#ffffff; color:#0b0b0e; border:1px solid rgba(0,0,0,.08); border-radius:16px; padding:24px 16px; min-height:140px; box-shadow:0 6px 20px rgba(0,0,0,.15); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
.out-card:hover{transform:translateY(-3px); box-shadow:0 10px 26px rgba(0,0,0,.22); border-color:rgba(0,0,0,.18)}
.out-logo{width:64px; height:auto; object-fit:contain}
.out-logo.logo-wide{width:96px}
.out-name{font-weight:800; text-align:center; color:#0b0b0e}

@media (max-width: 1100px){
  .out-grid{grid-template-columns: repeat(2, minmax(160px, 1fr));}
}
@media (max-width: 600px){
  .out-grid{grid-template-columns: 1fr;}
}

/* Pricing */
.pricing{padding:60px 0; border-top:1px solid rgba(255,255,255,.06)}
.plan-grid{display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; margin-top:16px}
.plan-card{background:var(--panel); border:1px solid rgba(255,255,255,.08); border-radius:14px; display:flex; flex-direction:column; overflow:hidden}
.plan-card .plan-head{padding:16px; border-bottom:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0))}
.plan-card.recommended .plan-head{background:linear-gradient(135deg, rgba(139,92,246,.15), rgba(6,182,212,.12))}
.plan-card.enterprise .plan-head{background:linear-gradient(135deg, rgba(139,92,246,.08), rgba(6,182,212,.06))}
.plan-card h3{margin:0 0 6px}
.price{display:flex; align-items:baseline; gap:6px; font-weight:800}
.price .amount{font-size:28px}
.price .per{color:var(--muted)}
.plan-card .note{color:var(--muted); font-size:12px}
.plan-features{list-style:none; margin:0; padding:12px 16px; display:flex; flex-direction:column; gap:8px}
.plan-features li{display:flex; align-items:center; gap:8px; color:var(--text)}
.plan-cta{padding:14px 16px; margin-top:auto; display:flex}
.plan-cta .cta{width:100%; text-align:center; font-weight:700}

/* subtle tooltip hint for hover text */
.hint{border-bottom:1px dotted rgba(255,255,255,.35); cursor:help; color:var(--muted)}

/* Scheduling section */
.scheduling{padding:70px 0}
.sched-card{margin-top:16px; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px}
.sched-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; align-items:start}
.builder{display:flex; flex-direction:column; gap:14px}
.group{display:flex; flex-direction:column; gap:8px}
.group.fine{opacity:.9}
.group-title{font-weight:700; color:var(--text)}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); color:var(--text); font-weight:700; font-size:13px}
.chip.active{outline:2px solid var(--ring); border-color:transparent}
.chip.subtle{color:var(--muted)}
.week{display:flex; gap:8px}
.day{padding:8px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.03); color:var(--muted); font-weight:800; font-size:12px}
.day.active{color:#0b0b0e; background:linear-gradient(90deg, #c7d2fe, #a5f3fc); border-color:transparent}
.preview{display:flex; flex-direction:column; gap:12px}
.preview-title{font-weight:700; color:var(--muted)}
.runs{display:flex; flex-wrap:wrap; gap:8px}
.run{display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:rgba(139,92,246,.12); color:#dcd7ff; border:1px solid rgba(139,92,246,.25); font-weight:700; font-size:12px}
.timeline-simple{display:grid; grid-template-columns: repeat(8, 1fr); gap:6px; padding:8px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01))}
.timeline-simple .tick{height:6px; background:rgba(255,255,255,.15); border-radius:6px; text-indent:-9999px}

@media (max-width: 1100px){
  .plan-grid{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 600px){
  .plan-grid{grid-template-columns: 1fr}
  .sched-grid{grid-template-columns: 1fr}
}