/* RelayCTX Marketing — shared stylesheet · v3.4.1
   Tokens per relay-tokens.css v3.4.1 (teal-tinted surfaces). Outfit / Cormorant Garamond italic / JetBrains Mono.
   Shared across the multi-page marketing site (index, product, integrate, pricing). */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { background: #fff; color: var(--text); font-family: 'Outfit', system-ui, sans-serif; font-size: 16px; line-height: 1.65; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
ul { list-style: none; }
button { cursor: pointer; font: inherit; border: none; background: none; }

/* ── Tokens (relay-tokens.css v3.4.1 — teal-tinted) ── */
:root {
  --bg:#ffffff; --surface:#f5faf9; --panel:#edf7f5; --deep:#e2f0ec; --border:#daeee9; --border-hi:#b8dbd5;
  --text:#0f1f1e; --text-2:#446160; --text-muted:#8caaaa; --text-bright:#060f0f;
  --teal:#0d9488; --teal-dim:#ccfbf1; --indigo:#6366f1; --indigo-dim:#ede9fe;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Outfit',system-ui,sans-serif; --mono:'JetBrains Mono',monospace;
  --max:1120px; --nav-h:60px; --radius:8px;
}
.container { max-width: var(--max); margin: 0 auto; padding: 0 40px; }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; gap:6px; font-family:var(--sans); font-size:13px; font-weight:600; padding:8px 20px; border-radius:6px; cursor:pointer; transition:opacity .15s,border-color .15s,color .15s; white-space:nowrap; }
.btn-primary { background:var(--teal); color:#fff; border:1px solid var(--teal); }
.btn-primary:hover { opacity:.88; }
.btn-ghost { background:transparent; color:var(--text-2); border:1px solid var(--border-hi); }
.btn-ghost:hover { border-color:var(--teal); color:var(--text); }
.btn-lg { font-size:15px; padding:12px 32px; }

/* ── Animations ── */
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.85)} }
@keyframes fade-up { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
.animate-in { animation: fade-up .5s ease both; }
.delay-1{animation-delay:.08s} .delay-2{animation-delay:.16s} .delay-3{animation-delay:.24s}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} }

/* ── NAV ── */
nav { position:fixed; top:0; left:0; right:0; z-index:100; height:var(--nav-h); background:rgba(255,255,255,.96); border-bottom:1px solid var(--border); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.nav-inner { height:100%; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { display:flex; align-items:center; gap:9px; }
.nav-wordmark { font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:-.02em; color:var(--text-bright); }
.nav-links { display:flex; align-items:center; gap:2px; list-style:none; }
.nav-links a { font-size:13px; font-weight:400; color:var(--text-2); padding:6px 14px; border-radius:4px; transition:color .12s,background .12s; }
.nav-links a:hover { color:var(--text); background:var(--surface); }
.nav-links a.accent { color:var(--teal); font-weight:500; }
.nav-links a.active { color:var(--text); font-weight:500; }
.nav-actions { display:flex; gap:10px; align-items:center; }
.nav-login { font-size:13px; font-weight:400; color:var(--text-muted); padding:6px 12px; border-radius:4px; transition:color .12s; }
.nav-login:hover { color:var(--text); }

/* ── HERO ── */
.hero { padding: calc(var(--nav-h) + 88px) 0 0; }
.hero-inner { display:grid; grid-template-columns:1fr 400px; gap:80px; align-items:end; padding-bottom:72px; border-bottom:1px solid var(--border); }
.hero-eyebrow { display:flex; align-items:center; gap:8px; margin-bottom:28px; }
.pulse-dot { width:7px; height:7px; border-radius:50%; background:var(--teal); animation:pulse-dot 2s ease-in-out infinite; }
.hero-eyebrow-text { font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); }
.hero-headline { font-family:var(--serif); font-size:clamp(52px,6vw,88px); font-weight:300; font-style:italic; line-height:1; letter-spacing:-.01em; color:var(--text-bright); }
.hero-headline em { font-style:normal; color:var(--teal); }
.hero-right { padding-bottom:8px; }
.hero-sub { font-size:17px; font-weight:300; color:var(--text-2); line-height:1.75; margin-bottom:32px; }
.hero-actions { display:flex; gap:12px; align-items:center; margin-bottom:20px; }
.hero-note { font-family:var(--mono); font-size:11px; color:var(--text-muted); letter-spacing:.04em; }

/* ── Code figure ── */
.code-figure { padding:72px 0; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:center; gap:56px; }
.code-figure-label { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--text-muted); transform:rotate(-90deg); white-space:nowrap; flex-shrink:0; }
.code-figure-main { font-family:var(--mono); font-size:clamp(52px,7.5vw,100px); font-weight:600; letter-spacing:.15em; color:var(--teal); line-height:1; }
.code-figure-meta { display:flex; flex-direction:column; gap:10px; }
.code-meta-row { display:flex; align-items:center; gap:10px; }
.status-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.code-meta-text { font-family:var(--mono); font-size:12px; color:var(--text-2); }
.code-tag { display:inline-flex; align-items:center; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:3px 10px; border-radius:3px; margin-top:4px; }
.code-tag-indigo { color:var(--indigo); background:var(--indigo-dim); border:1px solid rgba(99,102,241,.2); }

/* ── Sub-page hero (product/pricing/etc.) ── */
.page-hero { padding: calc(var(--nav-h) + 72px) 0 0; }
.page-hero-inner { padding-bottom:56px; border-bottom:1px solid var(--border); }
.page-hero h1 { font-family:var(--serif); font-size:clamp(40px,5vw,68px); font-weight:300; font-style:italic; line-height:1.02; color:var(--text-bright); margin:18px 0 0; }
.page-hero h1 em { font-style:normal; color:var(--teal); }
.page-hero p { font-size:17px; font-weight:300; color:var(--text-2); line-height:1.75; max-width:560px; margin-top:18px; }

/* ── Section layout ── */
.section { padding:88px 0; border-bottom:1px solid var(--border); }
.section-head { display:flex; align-items:baseline; gap:24px; margin-bottom:60px; }
.section-eyebrow { font-family:var(--mono); font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.14em; color:var(--teal); flex-shrink:0; }
.section-title { font-family:var(--serif); font-size:clamp(32px,4vw,56px); font-weight:300; font-style:italic; line-height:1.05; color:var(--text-bright); }

/* ── Steps ── */
.steps-list { display:flex; flex-direction:column; }
.step-item { display:grid; grid-template-columns:80px 220px 1fr; align-items:baseline; gap:32px; padding:32px 0; border-top:1px solid var(--border); }
.step-item:last-child { border-bottom:1px solid var(--border); }
.step-num { font-family:var(--serif); font-size:44px; font-weight:300; font-style:italic; line-height:1; color:var(--teal); }
.step-num.indigo { color:var(--indigo); }
.step-name { font-size:18px; font-weight:600; color:var(--text-bright); line-height:1.3; }
.step-desc { font-size:15px; font-weight:300; color:var(--text-2); line-height:1.75; }

/* ── Integrate ── */
.integrate-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start; }
.feature-list { display:flex; flex-direction:column; gap:28px; }
.feature-item { display:flex; gap:18px; align-items:flex-start; }
.feature-accent { width:3px; min-height:52px; background:var(--teal); flex-shrink:0; border-radius:2px; }
.feature-accent.indigo { background:var(--indigo); }
.feature-name { font-size:15px; font-weight:600; color:var(--text-bright); margin-bottom:5px; }
.feature-desc { font-size:14px; font-weight:300; color:var(--text-2); line-height:1.65; }
.code-block { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:32px; }
.code-block pre { font-family:var(--mono); font-size:13px; color:var(--text-2); line-height:1.9; white-space:pre; overflow-x:auto; }
.ck { color:var(--teal); } .cv { color:var(--indigo); }

/* ── Pricing ── */
.pricing-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.plan { background:var(--bg); padding:36px 28px; display:flex; flex-direction:column; }
.plan.featured { background:var(--surface); }
.plan-name { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--text); margin-bottom:14px; }
.plan-price { font-family:var(--serif); font-size:44px; font-weight:300; font-style:italic; color:var(--text-bright); line-height:1; margin-bottom:4px; }
.plan-price-sub { font-size:12px; color:var(--text-muted); margin-bottom:20px; }
.plan-beta { display:inline-flex; align-self:flex-start; font-family:var(--mono); font-size:10px; font-weight:600; color:var(--teal); background:var(--teal-dim); border:1px solid rgba(13,148,136,.25); border-radius:3px; padding:2px 8px; letter-spacing:.08em; margin-bottom:20px; }
.plan-beta-hidden { visibility:hidden; }
.plan-divider { height:1px; background:var(--border); margin-bottom:20px; }
.plan-features { list-style:none; display:flex; flex-direction:column; gap:11px; flex:1; margin-bottom:28px; }
.plan-features li { font-size:13px; font-weight:300; color:var(--text-2); display:flex; gap:10px; align-items:baseline; line-height:1.5; }
.plan-features li::before { content:'—'; color:var(--teal); flex-shrink:0; font-weight:400; }
.plan-features li.off { color:var(--text-muted); } .plan-features li.off::before { color:var(--border-hi); }

/* ── Use cases ── */
.use-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.use-card { background:var(--bg); padding:40px 32px; }
.use-eyebrow { font-family:var(--mono); font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.12em; color:var(--text-muted); margin-bottom:16px; }
.use-title { font-family:var(--serif); font-size:28px; font-weight:300; font-style:italic; color:var(--text-bright); line-height:1.1; margin-bottom:14px; }
.use-desc { font-size:14px; font-weight:300; color:var(--text-2); line-height:1.7; }

/* ── CTA band ── */
.cta-band { padding:108px 0; text-align:center; }
.cta-band h2 { font-family:var(--serif); font-size:clamp(48px,6vw,80px); font-weight:300; font-style:italic; color:var(--text-bright); margin-bottom:20px; line-height:1; }
.cta-band h2 em { font-style:normal; color:var(--teal); }
.cta-band p { font-size:17px; font-weight:300; color:var(--text-2); margin-bottom:40px; max-width:420px; margin-left:auto; margin-right:auto; line-height:1.75; }
.cta-note { margin-top:18px; font-family:var(--mono); font-size:11px; color:var(--text-muted); letter-spacing:.04em; }

/* ── Footer ── */
footer { padding:64px 0 0; background:var(--surface); border-top:1px solid var(--border); }
.footer-top { display:flex; justify-content:space-between; gap:48px; flex-wrap:wrap; padding-bottom:48px; border-bottom:1px solid var(--border); margin-bottom:28px; }
.footer-brand-name { font-family:var(--sans); font-size:15px; font-weight:600; color:var(--text-bright); letter-spacing:-.02em; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.footer-desc { font-size:13px; font-weight:300; color:var(--text-muted); line-height:1.85; }
.footer-nav { display:flex; gap:56px; flex-wrap:wrap; }
.footer-col-head { font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--text-muted); margin-bottom:16px; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-links a { font-size:13px; font-weight:300; color:var(--text-2); transition:color .12s; }
.footer-links a:hover { color:var(--text); }
.footer-links a.accent { color:var(--teal); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding:20px 0 28px; }
.footer-legal { font-family:var(--mono); font-size:11px; color:var(--text-muted); }
.footer-legal .sep { margin:0 8px; color:var(--border-hi); }
.footer-version { font-family:var(--mono); font-size:11px; color:var(--text-muted); }

/* ── Responsive ── */
@media (max-width:960px){ .hero-inner{grid-template-columns:1fr;gap:48px} .step-item{grid-template-columns:60px 1fr} .step-desc{grid-column:2} .integrate-grid{grid-template-columns:1fr;gap:48px} .pricing-grid{grid-template-columns:1fr 1fr} .use-grid{grid-template-columns:1fr} }
@media (max-width:640px){ .container{padding:0 20px} .nav-links{display:none} .pricing-grid{grid-template-columns:1fr} .code-figure{flex-direction:column;gap:24px} .code-figure-label{transform:none} .section-head{flex-direction:column;gap:12px} .footer-top{flex-direction:column} .footer-nav{gap:32px} }


/* ── Placeholders (content / assets pending) ── */
.ph { border:1px dashed var(--border-hi); border-radius:var(--radius,8px); background:repeating-linear-gradient(45deg, var(--surface), var(--surface) 8px, var(--bg) 8px, var(--bg) 16px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:40px 32px; color:var(--text-muted); }
.ph-media { aspect-ratio:16 / 9; width:100%; padding:24px; }
.ph-icon { font-size:24px; opacity:.45; line-height:1; }
.ph-label { font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--text-2); }
.ph-sub { font-family:var(--mono); font-size:10px; letter-spacing:.03em; color:var(--text-muted); opacity:.85; max-width:360px; line-height:1.6; }

/* ── Mobile nav menu (JS-free <details> disclosure) ── */
.nav-menu { display:none; position:relative; }
.nav-menu-btn { list-style:none; display:flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--border); border-radius:6px; color:var(--text-2); cursor:pointer; transition:border-color .12s,color .12s; }
.nav-menu-btn::-webkit-details-marker { display:none; }
.nav-menu[open] .nav-menu-btn { border-color:var(--teal); color:var(--text); }
.nav-menu-panel { position:absolute; right:0; top:calc(100% + 10px); min-width:208px; background:var(--bg); border:1px solid var(--border); border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,.06); padding:8px; display:flex; flex-direction:column; gap:2px; z-index:200; }
.nav-menu-panel a { font-size:14px; font-weight:400; color:var(--text-2); padding:10px 14px; border-radius:6px; transition:background .12s,color .12s; }
.nav-menu-panel a:hover { background:var(--surface); color:var(--text); }
.nav-menu-panel a.accent { color:var(--teal); font-weight:500; }
.nav-menu-panel a.active { color:var(--text); font-weight:500; }

/* ── Denser layout on small screens ── */
@media (max-width:640px){
  .nav-menu { display:block; }
  .section { padding:56px 0; }
  .section-head { margin-bottom:40px; }
  .hero { padding:calc(var(--nav-h) + 48px) 0 0; }
  .hero-inner { padding-bottom:48px; }
  .page-hero { padding:calc(var(--nav-h) + 48px) 0 0; }
  .page-hero-inner { padding-bottom:40px; }
  .cta-band { padding:72px 0; }
  .code-figure { padding:48px 0; }
}

/* ── Reveal-on-scroll (armed by JS; content stays visible without JS / reduced-motion) ── */
.reveal-armed { opacity:0; transform:translateY(16px); transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); transition-delay:calc(var(--rv-i,0) * 80ms); }
.reveal-armed.reveal-in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal-armed { opacity:1 !important; transform:none !important; transition:none !important; } }

/* ── Use-cases flow strip (Create → Relay → Receive) ── */
.flow-strip { padding:52px 0; border-bottom:1px solid var(--border); }
.flow-track { position:relative; display:flex; align-items:flex-start; justify-content:space-between; max-width:640px; margin:0 auto; }
.flow-line { position:absolute; top:23px; left:54px; right:54px; height:1px; background:var(--border); z-index:0; }
.flow-packet { position:absolute; top:19px; left:50px; width:9px; height:9px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px var(--teal-dim); z-index:2; animation:flow-move 4.2s cubic-bezier(.65,0,.35,1) infinite; }
.flow-node { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:9px; }
.flow-dot { width:48px; height:48px; border-radius:12px; border:1px solid var(--border); background:var(--bg); display:grid; place-items:center; font-family:var(--mono); font-size:14px; font-weight:600; color:var(--text-2); }
.flow-dot.relay { color:var(--teal); border-color:rgba(13,148,136,.3); background:var(--teal-dim); }
.flow-label { font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
@keyframes flow-move { 0%{left:50px;opacity:0} 10%{opacity:1} 44%{left:calc(50% - 4px)} 56%{left:calc(50% - 4px)} 90%{opacity:1} 100%{left:calc(100% - 54px);opacity:0} }
@media (prefers-reduced-motion: reduce){ .flow-packet { animation:none; left:calc(50% - 4px); } }

/* ── Animated objects ── */
/* Home hero — Code lifecycle (awaiting → received, looping) */
.code-life { position:relative; height:18px; }
.code-life-state { position:absolute; inset:0; display:flex; align-items:center; gap:10px; }
.code-life-state .status-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.code-dot-amber { background:#d97706; }
.code-dot-green { background:var(--teal); }
.code-life .is-awaiting { animation:code-awaiting 6s ease-in-out infinite; }
.code-life .is-received { animation:code-received 6s ease-in-out infinite; }
.code-life .is-awaiting .code-dot-amber { animation:dot-amber 1.4s ease-in-out infinite; }
@keyframes code-awaiting { 0%,60%{opacity:1} 70%,94%{opacity:0} 100%{opacity:1} }
@keyframes code-received { 0%,60%{opacity:0} 70%,94%{opacity:1} 100%{opacity:0} }
@keyframes dot-amber { 0%,100%{box-shadow:0 0 0 0 rgba(217,119,6,.45)} 60%{box-shadow:0 0 0 5px rgba(217,119,6,0)} }
.code-figure-main { animation:code-glow 6s ease-in-out infinite; }
@keyframes code-glow { 0%,60%,100%{text-shadow:none} 72%{text-shadow:0 0 18px rgba(13,148,136,.55)} 86%{text-shadow:none} }

/* Home agents — packet travels the chain */
.agent-chain { position:relative; }
.chain-packet { position:absolute; top:16px; left:4%; width:8px; height:8px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px var(--teal-dim); z-index:3; animation:chain-travel 5s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes chain-travel { 0%{left:4%;opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{left:95%;opacity:0} }

/* Platform — Pulses heartbeat */
.pulse-beat { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--teal); margin-left:8px; vertical-align:middle; animation:heartbeat 1.9s ease-in-out infinite; }
@keyframes heartbeat { 0%,100%{transform:scale(1);opacity:1} 22%{transform:scale(1.5);opacity:.65} 38%{transform:scale(1)} 54%{transform:scale(1.32);opacity:.8} 70%{transform:scale(1)} }

@media (prefers-reduced-motion: reduce){
  .code-life .is-awaiting{opacity:1;animation:none} .code-life .is-received{opacity:0;animation:none}
  .code-figure-main, .code-dot-amber, .pulse-beat { animation:none !important; }
  .chain-packet { display:none !important; }
}