/* ==========================================================================
   Pledr — next-generation layer. Loaded after styles.css on every page.
   Motion is progressive: everything works without JS, and prefers-reduced-motion
   switches the animation off (see the bottom of this file).
   ========================================================================== */
:root {
  --bg: #fbfcff;
  --ink: #0f1320;
  --ink2: #566074;
  --line: #e3e8f2;
  --blue: #2f6fed;
  --violet: #7c4dff;
  --dark: #090e1e;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

html { scroll-padding-top: 96px; overflow-x: clip; }
body { background: var(--bg); color: var(--ink); overflow-x: clip; }
::selection { background: rgba(124, 77, 255, .22); }
:focus-visible { outline: 3px solid rgba(47, 111, 237, .55); outline-offset: 3px; border-radius: 8px; }

/* ---------- ambient background + scroll progress ---------- */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .6; will-change: transform; }
.aurora i:nth-child(1) { width: 62vmax; height: 62vmax; left: -18vmax; top: -24vmax; background: radial-gradient(circle, #c3d3ff, transparent 66%); animation: drift1 28s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { width: 56vmax; height: 56vmax; right: -16vmax; top: 10vmax; background: radial-gradient(circle, #d9ccff, transparent 66%); animation: drift2 34s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { width: 48vmax; height: 48vmax; left: 20vmax; bottom: -26vmax; background: radial-gradient(circle, #c9ecf6, transparent 66%); animation: drift3 30s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(14vmax, 10vmax) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-12vmax, 8vmax) scale(1.1); } }
@keyframes drift3 { to { transform: translate(10vmax, -12vmax) scale(1.2); } }
.progress { position: fixed; left: 0; top: 0; width: 100%; height: 3px; z-index: 9998; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--blue), var(--violet), var(--color-coral)); }

/* ---------- navigation: floating glass bar ---------- */
.nav {
  position: sticky; top: 12px; z-index: 60; margin: 12px auto 0; width: min(1140px, calc(100% - 28px));
  border-radius: 999px; background: rgba(255, 255, 255, .72); border: 1px solid rgba(222, 228, 242, .95);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 10px 30px -20px rgba(30, 45, 100, .4); transition: box-shadow .3s, background .3s;
}
.nav.scrolled { background: rgba(255, 255, 255, .9); box-shadow: 0 20px 44px -22px rgba(30, 45, 100, .5); }
.nav .wrap { max-width: none; padding: 0; }
.nav-inner { height: 60px; padding: 0 10px 0 24px; }
.nav-logo img { height: 32px; }
.nav-links a { position: relative; padding: 6px 0; color: var(--ink2); }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--blue), var(--violet)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease); }
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-toggle { display: none; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #f1f3f9; cursor: pointer; position: relative; }
.nav-toggle span { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .3s var(--ease), top .3s var(--ease); }
.nav-toggle span:nth-child(1) { top: 16px; } .nav-toggle span:nth-child(2) { top: 24px; }
.nav.open .nav-toggle span:nth-child(1) { top: 20px; transform: rotate(45deg); } .nav.open .nav-toggle span:nth-child(2) { top: 20px; transform: rotate(-45deg); }

/* ---------- buttons ---------- */
.btn { border-radius: 999px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s; }
.btn-lg { padding: 15px 28px; font-size: 16px; }
.btn-blue { background: linear-gradient(135deg, #3b78f2 0%, #5b5bf0 100%); color: #fff; border-color: transparent; box-shadow: 0 14px 30px -14px rgba(47, 111, 237, .75); }
.btn-blue:hover { transform: translateY(-2px); box-shadow: 0 20px 38px -14px rgba(47, 111, 237, .85); background: linear-gradient(135deg, #3b78f2 0%, #5b5bf0 100%); }
.btn-filled:hover { transform: translateY(-1px); }
.btn-ghost { background: rgba(255, 255, 255, .7); border: 1px solid var(--line); color: var(--ink); }
.btn-ghost:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 16px 30px -18px rgba(30, 45, 100, .45); }
.btn-ghost .play { width: 0; height: 0; margin-right: 10px; border-left: 11px solid var(--blue); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-18deg); }
.btn-shine:hover::after { left: 130%; transition: left .8s var(--ease); }

/* ---------- shared type helpers ---------- */
.grad { background: linear-gradient(100deg, #2f6fed 0%, #7c4dff 45%, #ef476f 92%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: gradShift 7s ease-in-out infinite alternate; }
@keyframes gradShift { to { background-position: 100% 0; } }
.eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }
.nx-section { position: relative; padding: clamp(72px, 9vw, 128px) 0; }
.nx-section.tint { background: linear-gradient(180deg, rgba(240, 244, 253, .85), rgba(247, 249, 255, .45)); }
.wrap.narrow { max-width: 860px; }
.nx-head { max-width: 780px; margin: 0 auto clamp(36px, 5vw, 64px); text-align: center; }
.nx-head h2 { font-size: clamp(32px, 4.5vw, 58px); line-height: 1.06; letter-spacing: -.03em; font-weight: 700; margin: 0 0 18px; }
.nx-head h3 { font-size: clamp(26px, 3vw, 36px); letter-spacing: -.02em; margin: 0 0 12px; }
.nx-head p { font-size: 18px; line-height: 1.65; color: var(--ink2); margin: 0 0 12px; }
.nx-head .coverage-line, .nx-head .mcp-explainer { font-size: 15px; }
.nx-head.compact { margin-bottom: 32px; }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(34px) scale(.985); filter: blur(6px); transition: opacity .9s var(--ease) var(--d, 0ms), transform .9s var(--ease) var(--d, 0ms), filter .9s var(--ease) var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; filter: none; }
.reveal.in.tilt { transition: transform .22s ease-out, box-shadow .35s, border-color .35s; }

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(40px, 6vw, 88px) 0 clamp(72px, 8vw, 130px); overflow: hidden; }
.hero .spot { position: absolute; inset: 0; background: radial-gradient(620px circle at var(--mx, 72%) var(--my, 28%), rgba(91, 91, 240, .13), transparent 62%); pointer-events: none; transition: background .15s; }
.hero-grid { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 4vw, 68px); align-items: center; }
.hero h1 { font-size: clamp(42px, 5.6vw, 80px); line-height: 1.03; letter-spacing: -.04em; font-weight: 700; margin: 22px 0 22px; }
.hero .sub { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65; color: var(--ink2); max-width: 34em; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 18px; }
.hero-note { font-size: 14px; color: var(--ink2); max-width: 36em; }
.w { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(10px); }
.rise { opacity: 0; transform: translateY(24px); }
body.is-ready .w { animation: wordIn .9s var(--ease) forwards; animation-delay: calc(var(--i) * 75ms); }
body.is-ready .rise { animation: rise 1s var(--ease) forwards; animation-delay: calc(var(--i) * 75ms); }
@keyframes wordIn { to { opacity: 1; transform: none; filter: none; } }
@keyframes rise { to { opacity: 1; transform: none; } }
.hero-visual { position: relative; perspective: 1500px; }
.hero-visual::before { content: ""; position: absolute; inset: 6% -8% -10% 8%; z-index: -1; background: conic-gradient(from var(--a), #7c4dff66, #2f6fed66, #ef476f55, #7c4dff66); filter: blur(64px); animation: rot 14s linear infinite; }
@keyframes rot { to { --a: 360deg; } }
.stage { position: relative; aspect-ratio: 16 / 9; border-radius: 30px; overflow: hidden; background: #eef2fb; box-shadow: 0 70px 110px -54px rgba(40, 60, 150, .6), 0 0 0 1px rgba(210, 218, 240, .95); transform: rotateY(var(--ry, -4deg)) rotateX(var(--rx, 2deg)); transition: transform .3s ease-out; }
.stage video { display: block; width: 100%; height: 100%; object-fit: cover; }
.scroll-cue { position: absolute; left: 50%; bottom: 22px; width: 26px; height: 42px; border: 2px solid #c3cbe0; border-radius: 16px; transform: translateX(-50%); }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--blue); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
.trust-strip { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 18px 0 0; padding: 0; font-size: 14px; color: var(--ink2); }
.trust-strip li { display: flex; align-items: center; gap: 8px; }

/* ---------- marquees ---------- */
.band { padding: 8px 0 clamp(40px, 6vw, 80px); }
.band-head { text-align: center; margin-bottom: 18px; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); margin-bottom: 14px; }
.marquee-track { display: flex; gap: 14px; width: max-content; animation: scrollx var(--dur, 40s) linear infinite; }
.marquee[data-reverse] .marquee-track { animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scrollx { to { transform: translateX(-50%); } }
.chip { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; background: rgba(255, 255, 255, .85); border: 1px solid var(--line); font-weight: 600; font-size: 16px; white-space: nowrap; box-shadow: 0 10px 24px -18px rgba(30, 45, 100, .4); }
.chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--blue)); }
.chip.q { font-weight: 450; font-size: 15px; color: var(--ink2); }

/* ---------- problem cards ---------- */
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pain-card { position: relative; padding: 36px 32px 34px; border-radius: 26px; background: rgba(255, 255, 255, .85); border: 1px solid var(--line); box-shadow: 0 30px 60px -44px rgba(30, 45, 100, .45); overflow: hidden; }
.pain-card:hover { border-color: #c9d6fb; box-shadow: 0 40px 70px -40px rgba(47, 111, 237, .45); }
.qmark { position: absolute; right: 22px; top: 6px; font-family: Georgia, serif; font-size: 110px; line-height: 1; color: var(--blue); opacity: .12; }
.pain-problem { font-size: 23px; line-height: 1.3; font-weight: 650; letter-spacing: -.015em; margin: 0 0 14px; max-width: 12em; }
.pain-fix { margin: 0; color: var(--ink2); line-height: 1.65; }

/* ---------- how it works ---------- */
.steps3 { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 8px; }
.step3 { position: relative; padding: 32px 28px 28px; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -46px rgba(30, 45, 100, .5); }
.step3:not(:last-child)::after { content: ""; position: absolute; top: 56px; right: -23px; width: 24px; height: 2px; background: linear-gradient(90deg, var(--blue), var(--violet)); z-index: 2; }
.step-num { display: inline-block; font-size: 15px; font-weight: 700; letter-spacing: .12em; background: linear-gradient(100deg, #2f6fed, #7c4dff); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.step3 h3 { font-size: 22px; letter-spacing: -.015em; margin: 10px 0 8px; }
.step3 p { margin: 0; color: var(--ink2); line-height: 1.6; font-size: 15.5px; }
.mini { margin-top: 22px; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: #fafbfe; font-size: 15px; min-height: 150px; }
.mini-prompt { line-height: 1.55; color: var(--ink); }
.mini-prompt .caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: var(--blue); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.mini-search { display: flex; flex-direction: column; justify-content: center; gap: 16px; color: var(--ink2); }
.mini-search .bar { height: 9px; border-radius: 9px; background: #e6eaf5; overflow: hidden; }
.mini-search .bar i { display: block; height: 100%; width: 0; border-radius: 9px; background: linear-gradient(90deg, var(--blue), var(--violet), var(--color-coral)); background-size: 200% 100%; }
.step3.in .mini-search .bar i { animation: fillbar 2.4s .5s var(--ease) forwards, shimmer 1.6s linear infinite; }
@keyframes fillbar { to { width: 100%; } } @keyframes shimmer { to { background-position: -200% 0; } }
.mini-search b { color: var(--ink); font-size: 17px; }
.dots { display: inline-flex; gap: 3px; margin-left: 6px; } .dots u { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); animation: bounce 1.2s ease-in-out infinite; } .dots u:nth-child(2) { animation-delay: .15s; } .dots u:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-5px); opacity: 1; } }
.mini-card { background: #fff; box-shadow: 0 18px 36px -26px rgba(30, 45, 100, .5); }
.mini-card .badge { display: inline-block; font-size: 12px; font-weight: 700; color: var(--blue); background: #e8efff; padding: 4px 9px; border-radius: 7px; margin-bottom: 8px; }
.mini-card strong { display: block; font-size: 16px; margin-bottom: 6px; }
.mini-card q { display: block; font-size: 13.5px; line-height: 1.55; color: #2a3140; border-left: 3px solid var(--blue); padding-left: 10px; quotes: none; }
.mini-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 12.5px; color: var(--ink2); }
.mini-foot .pdf { color: var(--blue); font-weight: 600; border: 1px solid #cfdaf7; border-radius: 999px; padding: 4px 10px; }

/* ---------- dark showcase ---------- */
.dark { background: radial-gradient(1100px 520px at 12% -6%, #1f3170 0%, transparent 60%), radial-gradient(900px 520px at 96% 104%, #3d1d72 0%, transparent 60%), var(--dark); color: #fff; overflow: hidden; }
.dark .nx-head p, .dark .coverage-line { color: #aeb8d3; }
.dark .eyebrow { color: #8fb0ff; }
.dark .grad { background-image: linear-gradient(100deg, #8fb0ff, #b79bff 50%, #ff8fb1); }
.showcase-video { position: relative; max-width: 1040px; margin: 0 auto clamp(64px, 8vw, 110px); border-radius: 32px; padding: 2px; background: conic-gradient(from var(--a), #2f6fed, #7c4dff, #ef476f, #2f6fed); animation: rot 9s linear infinite; }
.showcase-video::before { content: ""; position: absolute; inset: 4% 4% -6%; z-index: -1; border-radius: 40px; background: inherit; filter: blur(46px); opacity: .45; }
.showcase-video video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 30px; background: #eef2fb; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 22px; }
.stat { padding: 30px 28px; border-radius: 24px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13); }
.stat-num { font-size: clamp(38px, 5vw, 66px); font-weight: 700; letter-spacing: -.035em; line-height: 1; background: linear-gradient(100deg, #fff, #b7c8ff); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.stat-label { margin-top: 10px; color: #aeb8d3; font-size: 15px; }
.chart { position: relative; padding: 30px 24px 18px; border-radius: 26px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .11); }
.chart ul { display: flex; align-items: flex-end; gap: 6px; height: 270px; list-style: none; margin: 0; padding: 0; }
.chart li { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; }
.chart .bar { display: block; width: 100%; height: 0; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #92b3ff, #7c4dff); transition: height 1.1s var(--ease) calc(var(--k) * 26ms), filter .2s; }
.chart.in .bar { height: var(--h); }
.chart li:hover .bar { filter: brightness(1.35); }
.chart .yr { font-size: 11px; height: 14px; color: #8e98b6; }
.chart li:not(.show) .yr { visibility: hidden; }
.chart-tip { position: absolute; z-index: 5; left: 0; top: 0; padding: 8px 12px; border-radius: 10px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, -115%); transition: opacity .15s; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5); }
.coverage .coverage-line { margin-top: 22px; font-size: 14px; max-width: 70ch; }

/* ---------- audiences ---------- */
.who-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.who-card { position: relative; padding: 34px 30px; border-radius: 28px; background: #fff; border: 1px solid var(--line); overflow: hidden; box-shadow: 0 30px 60px -46px rgba(30, 45, 100, .5); }
.who-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 5px; background: var(--accent, var(--blue)); }
.who-card::after { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: var(--accent, var(--blue)); opacity: .08; filter: blur(20px); transition: opacity .4s, transform .5s var(--ease); }
.who-card:hover::after { opacity: .18; transform: scale(1.3); }
.who-role { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent, var(--blue)); margin: 0 0 8px; }
.who-card h3 { font-size: 24px; letter-spacing: -.02em; margin: 0 0 16px; }
.who-q { font-size: 16px; line-height: 1.6; color: #2a3140; padding: 16px 18px; border-radius: 16px; background: #f5f7fc; margin: 0 0 16px; }
.who-a { margin: 0; color: var(--ink2); line-height: 1.6; }

/* ---------- connect selector ---------- */
.connect { max-width: 1120px; margin: 0 auto; border-radius: 34px; background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--line); box-shadow: 0 60px 100px -56px rgba(40, 60, 150, .5); overflow: hidden; }
.tabs { display: flex; gap: 6px; padding: 10px; background: #f1f4fb; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 1; min-width: 124px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 12px; border: 0; border-radius: 22px; background: transparent; color: var(--ink2); font: inherit; cursor: pointer; transition: background .3s var(--ease), color .3s, box-shadow .3s, transform .3s var(--ease); }
.tab b { font-size: 16px; font-weight: 650; color: inherit; }
.tab small { font-size: 12px; opacity: .85; }
.tab:hover { color: var(--ink); transform: translateY(-1px); }
.tab[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 14px 28px -16px rgba(40, 60, 150, .55); }
.panel { display: grid; grid-template-columns: 1.22fr 1fr; gap: clamp(22px, 3.2vw, 48px); align-items: center; padding: clamp(22px, 3vw, 44px); }
.panel[hidden] { display: none; }
.panel:not([hidden]) { animation: panelIn .55s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.panel-video { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #eef2fb; box-shadow: 0 34px 64px -38px rgba(40, 60, 150, .6), 0 0 0 1px var(--line); }
.panel-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.replay { position: absolute; right: 12px; bottom: 12px; padding: 8px 14px; border: 0; border-radius: 999px; background: rgba(15, 19, 32, .78); color: #fff; font: 600 13px Inter, sans-serif; cursor: pointer; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
.panel-video:hover .replay, .replay:focus-visible { opacity: 1; transform: none; }
.status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; background: #e7f7ef; color: #11825a; font-size: 13px; font-weight: 600; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.panel h3 { font-size: clamp(26px, 3vw, 38px); letter-spacing: -.025em; margin: 16px 0 14px; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 12px; }
.steps li { counter-increment: s; position: relative; padding-left: 40px; line-height: 1.55; color: var(--ink2); font-size: 15.5px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -1px; width: 27px; height: 27px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.steps b { color: var(--ink); }
.panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 26px 0 14px; }
.link { color: var(--blue); font-weight: 600; text-decoration: none; }
.link:hover { text-decoration: underline; }
.guide { display: inline-block; color: var(--ink2); font-size: 14px; text-decoration: none; transition: color .2s, transform .2s; }
.guide:hover { color: var(--blue); transform: translateX(3px); }
.urlbar { max-width: 660px; margin: 34px auto 0; display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 22px; border-radius: 999px; background: #0f1320; color: #fff; box-shadow: 0 24px 44px -24px rgba(15, 19, 32, .7); }
.urlbar-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8e98b6; white-space: nowrap; }
.urlbar code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 15px; color: #fff; background: transparent; padding: 0; }
.urlbar .btn { background: #fff; color: var(--ink); }
.urlbar .btn:hover { background: #e9eefc; }
.tip-line, .signin-note { max-width: 660px; margin: 18px auto 0; text-align: center; color: var(--ink2); font-size: 14.5px; line-height: 1.65; }

/* ---------- pricing ---------- */
.price { max-width: 520px; margin: 0 auto; padding: 2px; border-radius: 34px; background: conic-gradient(from var(--a), #2f6fed, #7c4dff, #ef476f, #f5a623, #2f6fed); animation: rot 10s linear infinite; box-shadow: 0 50px 90px -50px rgba(124, 77, 255, .6); }
.price-inner { padding: 46px 40px 40px; border-radius: 32px; background: #fff; text-align: center; }
.price-name { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.price-amount { margin: 6px 0 22px; font-size: 92px; font-weight: 700; letter-spacing: -.045em; line-height: 1; background: linear-gradient(100deg, #2f6fed, #7c4dff 55%, #ef476f); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.price-list { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 14px; text-align: left; }
.price-list li { position: relative; padding-left: 32px; line-height: 1.5; color: #2a3140; }
.price-list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #e7f7ef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%2311825a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }

/* ---------- FAQ ---------- */
.faq-list details { margin: 0 0 12px; padding: 0 26px; border-radius: 20px; background: #fff; border: 1px solid var(--line); transition: border-color .3s, box-shadow .3s; }
.faq-list details:hover { border-color: #cbd8f7; }
.faq-list details[open] { border-color: #bccdf8; box-shadow: 0 28px 50px -36px rgba(47, 111, 237, .55); }
.faq-list summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-size: 18px; font-weight: 600; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #eef3ff; color: var(--blue); font-size: 22px; line-height: 29px; text-align: center; transition: transform .35s var(--ease), background .3s; }
.faq-list details[open] summary::after { transform: rotate(135deg); background: var(--blue); color: #fff; }
.faq-list details p { margin: 0; padding: 0 0 24px; color: var(--ink2); line-height: 1.75; animation: fadeDown .45s var(--ease); }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- what's next ---------- */
.next-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.next-item { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 26px 22px; border-radius: 24px; background: #fff; border: 1px solid var(--line); cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.next-item:hover { transform: translateY(-6px); border-color: #c9d6fb; box-shadow: 0 34px 56px -34px rgba(47, 111, 237, .5); }
.next-icon { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 15px; background: #f3f6fd; }
.next-name { font-size: 18px; font-weight: 650; letter-spacing: -.01em; }

/* ---------- footer ---------- */
.footer { margin-top: 0; padding-top: 70px; background: #090e1e; color: #b6bfd8; border-top: 0; }
.footer a { color: #aab4cf; } .footer a:hover { color: #fff; }
.footer h4 { color: #fff; }
.footer-brand > img { padding: 9px 16px; border-radius: 14px; background: #fff; }   /* only the no-JS fallback logo sits on a white pill */
.footer-bottom { color: #7f89a6; border-top: 1px solid rgba(255, 255, 255, .1); }
.footer-bottom a { color: #aab4cf; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 720px; margin: 0 auto; width: 100%; }
  .stage { transform: none !important; }
  .panel { grid-template-columns: 1fr; }
  .next-row { grid-template-columns: repeat(3, 1fr); }
  .scroll-cue { display: none; }
}
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav .pill { display: none; }
  .nav.open .nav-links { display: flex; flex-direction: column; gap: 4px; position: absolute; top: 68px; left: 0; right: 0; padding: 14px 24px; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(30, 45, 100, .5); }
  .nav.open .nav-links a { display: block; padding: 12px 0; font-size: 16px; }
  .pain-grid, .steps3, .who-grid, .stat-row { grid-template-columns: 1fr; }
  .step3:not(:last-child)::after { display: none; }
  .chart ul { gap: 3px; height: 200px; }
  .chart .yr { font-size: 9px; }
  .next-row { grid-template-columns: repeat(2, 1fr); }
  .urlbar { flex-wrap: wrap; border-radius: 26px; padding: 14px 16px; }
  .urlbar code { flex-basis: 100%; order: 3; }
}
@media (max-width: 520px) {
  .hero h1 { font-size: 40px; }
  .price-inner { padding: 36px 24px 30px; }
  .price-amount { font-size: 72px; }
  .tab { min-width: 108px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .w, .rise, .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .marquee-track { animation: none !important; flex-wrap: wrap; width: auto; justify-content: center; }
  .chart .bar { height: var(--h) !important; }
  .mini-search .bar i { width: 100% !important; }
}

/* ---------- sub pages (tutorial, docs, privacy, terms, changelog) ---------- */
.tut-hero { padding: clamp(48px, 7vw, 96px) 24px clamp(28px, 4vw, 48px); text-align: center; max-width: 880px; }
.tut-hero h1 { font-size: clamp(36px, 5.2vw, 66px); line-height: 1.05; letter-spacing: -.035em; font-weight: 700; margin: 0 0 18px; }
.tut-hero p { font-size: 18px; line-height: 1.65; color: var(--ink2); margin: 0 auto 10px; max-width: 40em; }
.tut-hero .tut-note { font-size: 13.5px; color: #8a93a8; }
.tut-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.tut-jump a { padding: 10px 20px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .8); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
.tut-jump a:hover { transform: translateY(-2px); border-color: #c4d2fa; box-shadow: 0 16px 28px -18px rgba(47, 111, 237, .6); }
.tut2 { padding: 14px 0; }
.tut2-card { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(22px, 3.4vw, 52px); align-items: center; padding: clamp(22px, 3vw, 40px); border-radius: 32px; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--line); box-shadow: 0 50px 90px -60px rgba(40, 60, 150, .55); }
.tut2-card.wide { grid-template-columns: 1fr 1.35fr; }
.tut2-video { aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #eef2fb; box-shadow: 0 30px 56px -36px rgba(40, 60, 150, .6), 0 0 0 1px var(--line); }
.tut2-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.tut2-copy h2 { font-size: clamp(28px, 3.2vw, 42px); letter-spacing: -.03em; margin: 14px 0 18px; }
.tut2-copy.intro p { color: var(--ink2); line-height: 1.7; font-size: 16px; }
.tut-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 14px; }
.tut-steps li { counter-increment: step; position: relative; padding-left: 42px; line-height: 1.6; color: var(--ink2); font-size: 15.5px; }
.tut-steps li::before { content: counter(step); position: absolute; left: 0; top: -1px; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.tut-steps b { color: var(--ink); }
.tut-steps code { background: #eef2fb; padding: 2px 7px; border-radius: 6px; font-size: .92em; }
.tut-steps a { color: var(--blue); }
.tut2 + .footer, .tut2:last-of-type { margin-bottom: 70px; }

.legal, main.doc {
  position: relative; max-width: 860px; margin: 36px auto 90px; padding: clamp(32px, 5vw, 60px) clamp(22px, 5vw, 56px) clamp(40px, 5vw, 64px);
  background: rgba(255, 255, 255, .85); border: 1px solid var(--line); border-radius: 32px; box-shadow: 0 50px 90px -64px rgba(30, 45, 100, .55);
  animation: rise .9s var(--ease) both;
}
.legal h1, main.doc h1 { font-size: clamp(34px, 4.6vw, 54px) !important; line-height: 1.05; letter-spacing: -.035em; font-weight: 700; }
.legal h2, main.doc h2 { letter-spacing: -.02em; }
.legal a, main.doc a { color: var(--blue); }

@media (max-width: 1020px) {
  .tut2-card, .tut2-card.wide { grid-template-columns: 1fr; }
}

/* long inline code and pre blocks must never push the page sideways on phones */
.legal code, main.doc code { overflow-wrap: anywhere; word-break: break-word; }
.legal pre, main.doc pre { max-width: 100%; overflow-x: auto; }

/* ==========================================================================
   v2 — animated logo + intro, controlled scrolling, full-screen sections
   ========================================================================== */
html { scroll-behavior: auto !important; }   /* scrolling is handled in next.js with a calmer, distance-aware curve */

/* ---------- animated logo in the title bar ---------- */
.logo-anim { display: inline-flex; align-items: flex-end; height: 32px; cursor: pointer; }
.logo-anim .lg { display: block; height: 100%; width: auto; transform-origin: 50% 100%; will-change: transform; }
html.intro-active .logo-anim .lg:not(.on) { visibility: hidden; }
.logo-anim.drop .lg { animation: lgDrop .95s cubic-bezier(.3, .7, .3, 1) both; animation-delay: calc(var(--i) * 110ms + 120ms); }
@keyframes lgDrop {
  0%   { opacity: 0; transform: translateY(-160%) rotate(-16deg) scale(.88, 1.22); }
  52%  { opacity: 1; transform: translateY(4%) rotate(2deg) scale(1.15, .78); }
  74%  { transform: translateY(-10%) rotate(-1deg) scale(.95, 1.08); }
  90%  { transform: translateY(1%) scale(1.03, .97); }
  100% { opacity: 1; transform: none; }
}
.logo-anim.wave .lg { animation: lgHop .85s cubic-bezier(.3, .7, .3, 1) both; animation-delay: calc(var(--i) * 80ms); }
@keyframes lgHop {
  0%   { transform: none; }
  28%  { transform: translateY(-36%) rotate(-4deg) scale(.92, 1.14); }
  58%  { transform: translateY(3%) scale(1.12, .84); }
  78%  { transform: translateY(-4%) scale(.98, 1.04); }
  100% { transform: none; }
}
.logo-anim .lg.land { animation: lgLand .5s cubic-bezier(.3, .7, .3, 1) both; }
@keyframes lgLand { 0% { transform: scale(1.12, .86); } 60% { transform: scale(.97, 1.06); } 100% { transform: none; } }

/* ---------- intro: the five letters drop in one by one, then fly into the title bar ---------- */
html.intro-active { overflow: hidden; }
#splash { position: fixed; inset: 0; z-index: 9999; background: transparent; pointer-events: auto; overflow: hidden; animation: spFailsafe 0s linear 8s forwards; }
@keyframes spFailsafe { to { opacity: 0; visibility: hidden; } }
#splash .sp-bg { position: absolute; inset: 0; background: radial-gradient(900px 600px at 28% 18%, #dbe6ff, transparent 62%), radial-gradient(800px 600px at 82% 82%, #e5daff, transparent 62%), #fbfcff; transition: opacity .9s ease; }
#splash.out .sp-bg { opacity: 0; }
.sp-word { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); display: flex; align-items: flex-end; height: clamp(88px, 13vw, 132px); }
.sp-l { position: relative; display: block; height: 100%; will-change: transform; }
.sp-l img { display: block; height: 100%; width: auto; opacity: 0; transform-origin: 50% 100%; }
.sp-l::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -13%; height: 10px; border-radius: 50%; background: radial-gradient(closest-side, rgba(40, 55, 110, .32), transparent); opacity: 0; transform: scale(.3); }
#splash.run .sp-l img { animation: spDrop 1s cubic-bezier(.3, .7, .3, 1) forwards; animation-delay: calc(var(--i) * 120ms + 150ms); }
#splash.run .sp-l::after { animation: spShadow 1s ease-out forwards; animation-delay: calc(var(--i) * 120ms + 150ms); }
@keyframes spDrop {
  0%   { opacity: 0; transform: translateY(-140%) rotate(-18deg) scale(.85, 1.28); }
  50%  { opacity: 1; transform: translateY(5%) rotate(3deg) scale(1.17, .76); }
  72%  { transform: translateY(-11%) rotate(-2deg) scale(.95, 1.09); }
  88%  { transform: translateY(2%) scale(1.04, .97); }
  100% { opacity: 1; transform: none; }
}
@keyframes spShadow { 0% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1.12); } 100% { opacity: .38; transform: scale(1); } }
#splash.out .sp-l::after { opacity: 0; transition: opacity .3s; animation: none; }
.sp-shine { position: absolute; left: 50%; top: 46%; width: clamp(280px, 42vw, 540px); height: clamp(88px, 13vw, 132px); transform: translate(-50%, -50%); overflow: hidden; pointer-events: none; }
.sp-shine::before { content: ""; position: absolute; top: -25%; bottom: -25%; left: -60%; width: 38%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .9), transparent); transform: skewX(-18deg); }
#splash.shine .sp-shine::before { animation: spSweep 1s ease-in-out forwards; }
@keyframes spSweep { to { left: 130%; } }
.sp-tag { position: absolute; left: 0; right: 0; top: calc(46% + clamp(72px, 9vw, 96px)); text-align: center; font-size: clamp(15px, 1.5vw, 19px); letter-spacing: -.005em; color: #566074; opacity: 0; transform: translateY(10px); transition: opacity .7s ease, transform .7s var(--ease); }
#splash.tag .sp-tag { opacity: 1; transform: none; }
#splash.out .sp-tag { opacity: 0; transition-duration: .3s; }
#splash.splash-done { display: none; }

/* ---------- every anchored section fills the screen when you land on it ---------- */
:root { --nav-h: 84px; }
.nx-section { padding-top: max(112px, 9vw); }
@media (min-width: 861px) and (min-height: 600px) {
  .nx-section { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
  .nx-section > .wrap { width: 100%; }
  .hero { min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h)); display: flex; align-items: center; }
  .hero .hero-grid { width: 100%; }
}
.tut2 { scroll-margin-top: 96px; }

@media (prefers-reduced-motion: reduce) {
  .logo-anim .lg, .sp-l img { opacity: 1 !important; transform: none !important; animation: none !important; }
  #splash { display: none !important; }
}

/* ==========================================================================
   v2b — fit-to-screen landings: each anchored section sizes itself to the viewport height,
   so after "Get Started" (or any nav link) the whole section is on screen with no extra scrolling.
   ========================================================================== */
.nx-notes { max-width: 760px; margin: clamp(18px, 3vh, 36px) auto 0; text-align: center; }
.nx-notes .coverage-line, .nx-notes .mcp-explainer { font-size: 14px; line-height: 1.6; color: var(--ink2); margin: 0 0 8px; }
@media (min-width: 861px) and (min-height: 600px) {
  .nx-section { padding-top: clamp(92px, 11.5vh, 120px); padding-bottom: clamp(24px, 5vh, 72px); }
  .nx-head { margin-bottom: clamp(18px, 3.6vh, 48px); }
  .nx-head h2 { font-size: clamp(28px, 5.8vh, 58px); margin-bottom: clamp(6px, 1.4vh, 18px); }
  .nx-head p { font-size: clamp(14px, 1.95vh, 18px); line-height: 1.55; margin-bottom: 6px; }
  .eyebrow { margin-bottom: clamp(6px, 1.2vh, 14px); }
  /* get started: URL bar + tabs + video + steps all on the first screen */
  #get-started .urlbar { margin: 0 auto clamp(14px, 2.4vh, 26px); padding: 7px 7px 7px 20px; }
  .connect .tabs { padding: clamp(6px, 1vh, 10px); }
  .tab { padding: clamp(8px, 1.5vh, 14px) 12px; }
  .panel { padding: clamp(14px, 2.6vh, 40px) clamp(20px, 3vw, 44px); grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 44px); }
  .panel-video { width: min(100%, calc((100vh - 380px) * 16 / 9)); }
  .panel h3 { font-size: clamp(22px, 3.6vh, 36px); margin: clamp(8px, 1.4vh, 16px) 0; }
  .steps { gap: clamp(7px, 1.3vh, 12px); } .steps li { font-size: clamp(13.5px, 1.8vh, 15.5px); }
  .panel-actions { margin: clamp(12px, 2vh, 26px) 0 8px; }
  /* pricing */
  .price-inner { padding: clamp(22px, 4vh, 46px) 40px clamp(20px, 3.6vh, 40px); }
  .price-amount { font-size: clamp(54px, 9vh, 92px); margin: 2px 0 clamp(10px, 2vh, 22px); }
  .price-list { gap: clamp(7px, 1.4vh, 14px); margin-bottom: clamp(14px, 2.6vh, 30px); }
  .price-list li { font-size: clamp(14px, 1.9vh, 16px); }
  /* FAQ */
  .faq-list details { margin-bottom: clamp(5px, .75vh, 12px); }
  .faq-list summary { padding: clamp(9px, 1.7vh, 22px) 0; font-size: clamp(15px, 2vh, 18px); }
  /* how it works */
  .step3 { padding: clamp(18px, 3vh, 32px) 26px; }
  .mini { margin-top: clamp(10px, 2vh, 22px); min-height: clamp(96px, 16vh, 150px); padding: clamp(10px, 1.8vh, 16px); }
  /* see it work: heading + video on the first screen, the stats and chart follow */
  .showcase-video { max-width: min(1040px, calc((100vh - 300px) * 16 / 9)); }
  /* who it's for, what's next */
  .who-card { padding: clamp(20px, 3.4vh, 34px) 30px; }
  .next-item { padding: clamp(18px, 3vh, 26px) 22px; }
}

/* v2c — fine-tune two sections so their first screen is complete on 768-900 px tall displays */
@media (min-width: 861px) and (min-height: 600px) {
  #showcase .nx-head { max-width: 980px; }
  .showcase-video { max-width: min(1040px, calc((100vh - 400px) * 16 / 9)); }
  .step3 h3 { font-size: clamp(17px, 2.6vh, 22px); margin: 6px 0; }
  .step3 p { font-size: clamp(13.5px, 1.8vh, 15.5px); }
  .mini { min-height: clamp(84px, 14vh, 150px); }
  .mini-card q { font-size: clamp(12px, 1.55vh, 13.5px); }
  #legal-detail .nx-head .mcp-status { margin-bottom: clamp(6px, 1.4vh, 16px) !important; }
}

/* v2d — very short displays (about 720-780 px tall): a slightly tighter FAQ so all eight questions fit on one screen */
@media (min-width: 861px) and (max-height: 790px) {
  .faq-list summary { padding: 9px 0; }
  .faq-list details { margin-bottom: 5px; }
  .faq-list summary::after { width: 26px; height: 26px; line-height: 25px; font-size: 20px; }
}

/* ==========================================================================
   v3 — live footer: animated logo, flowing gradient line, back-to-top, link motion
   ========================================================================== */
.footer { position: relative; overflow: hidden; }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #2f6fed, #7c4dff, #ef476f, #f5a623, #1fa97a, transparent); background-size: 200% 100%; animation: footLine 7s linear infinite; }
@keyframes footLine { to { background-position: -200% 0; } }
.footer::after { content: ""; position: absolute; left: -10%; top: -40%; width: 60%; height: 120%; background: radial-gradient(closest-side, rgba(91, 91, 240, .22), transparent); filter: blur(30px); animation: footGlow 14s ease-in-out infinite alternate; pointer-events: none; }
@keyframes footGlow { to { transform: translate(30%, 10%) scale(1.2); } }
.footer .wrap { position: relative; z-index: 1; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.footer-brand .footer-logo { height: 58px; padding: 6px 2px; }
.footer-logo .lg { filter: brightness(1.28) saturate(1.08) drop-shadow(0 0 16px rgba(160, 175, 255, .28)); }
.footer-logo.armed .lg { opacity: 0; }
.footer-tag { margin: 0; max-width: 22em; font-size: 15px; line-height: 1.55; color: #9aa5c2; }
.to-top { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); color: #dbe3fb !important; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .3s var(--ease), border-color .3s, transform .3s var(--ease); }
.to-top i { display: inline-block; font-style: normal; transition: transform .35s var(--ease); }
.to-top:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .34); transform: translateY(-2px); }
.to-top:hover i { transform: translateY(-4px); }
.footer-col a { position: relative; display: block; width: fit-content; transition: color .25s, transform .3s var(--ease); }
.footer-col a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: linear-gradient(90deg, #8fb0ff, #b79bff); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease); }
.footer-col a:hover { transform: translateX(4px); }
.footer-col a:hover::after { transform: scaleX(1); }
@media (max-width: 860px) { .footer-top { flex-direction: column; gap: 36px; } .footer-brand .footer-logo { height: 52px; } }
@media (prefers-reduced-motion: reduce) { .footer::before, .footer::after { animation: none !important; } .footer-logo.armed .lg { opacity: 1 !important; } }

/* the live footer letters never sit in a box, and on phones the dark footer runs under the sticky bar (no white strip) */
.footer-logo .lg { background: none; padding: 0; border-radius: 0; }
@media (max-width: 860px) { body.home { padding-bottom: 0 !important; } body.home .footer { padding-bottom: 92px; } }
/* ==========================================================================
   v4 — "Full step-by-step guide": a clear secondary call to action, not a faint text link
   ========================================================================== */
.guide { position: relative; display: inline-flex; align-items: center; gap: 11px; margin-top: 4px; padding: 11px 20px 11px 14px; overflow: hidden; border-radius: 999px;
  background: linear-gradient(135deg, rgba(47, 111, 237, .11), rgba(124, 77, 255, .13)); border: 1.5px solid rgba(47, 111, 237, .42);
  color: #1f4fc7; font-size: 15px; font-weight: 650; letter-spacing: -.005em; text-decoration: none;
  box-shadow: 0 10px 24px -16px rgba(47, 111, 237, .7); transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, color .3s, border-color .3s; }
.guide .g-ic { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #3b78f2, #6b4df0); box-shadow: 0 6px 14px -6px rgba(47, 111, 237, .9); }
.guide .g-ic::before { content: ""; position: absolute; left: 11px; top: 8px; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.guide b { display: inline-block; font-weight: 700; transition: transform .35s var(--ease); }
.guide::after { content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent); transform: skewX(-20deg); animation: guideShine 6.5s ease-in-out 2.5s infinite; }
@keyframes guideShine { 0%, 62% { left: -70%; } 85%, 100% { left: 140%; } }
.guide:hover { transform: translateY(-2px); color: #fff; background: linear-gradient(135deg, #3b78f2, #5b5bf0); border-color: transparent; box-shadow: 0 18px 32px -14px rgba(47, 111, 237, .85); }
.guide:hover .g-ic { background: #fff; box-shadow: none; }
.guide:hover .g-ic::before { border-left-color: #3b5bf0; }
.guide:hover b { transform: translateX(5px); }
.guide:focus-visible { outline: 3px solid rgba(47, 111, 237, .55); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .guide::after { animation: none; display: none; } }

/* v4b — on very short displays the guide button is a touch more compact so the whole Get Started screen still fits */
@media (min-width: 861px) and (max-height: 790px) {
  .guide { padding: 7px 15px 7px 10px; font-size: 14px; gap: 9px; margin-top: 0; }
  .guide .g-ic { width: 24px; height: 24px; }
  .guide .g-ic::before { left: 9px; top: 6.5px; border-left-width: 8px; border-top-width: 5.5px; border-bottom-width: 5.5px; }
  .panel-actions { margin-bottom: 2px; }
}

/* v8 — living title bar: entrance, travelling border light, sliding link highlight with scroll-spy, scroll progress inside the bar, pulsing early-access pill */
.nav { transform-origin: 50% 0; animation: navDrop .9s var(--ease) backwards; }
@keyframes navDrop { from { opacity: 0; transform: translateY(-26px) scale(.97); } to { opacity: 1; transform: none; } }
.nav.scrolled { transform: scale(.985); }
.nav::before { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: .75;
  background: conic-gradient(from var(--a), transparent 0 58%, #2f6fed 70%, #7c4dff 80%, #ef476f 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: rot 7s linear infinite; }
.nav.scrolled::before { opacity: 1; }
.nav::after { content: ""; position: absolute; left: 34px; right: 34px; bottom: 5px; height: 2px; border-radius: 2px; pointer-events: none; opacity: 0; transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
  background: linear-gradient(90deg, #2f6fed, #7c4dff, #ef476f); transition: opacity .35s; }
.nav.scrolled::after { opacity: .85; }
.nav-links { position: relative; gap: 4px; }
.nav-links a { padding: 8px 15px; border-radius: 999px; transition: color .25s; position: relative; z-index: 1; }
.nav-links a::after { display: none; }
.nav-links a.active { color: var(--ink); font-weight: 600; }
.nav-links li { animation: navItem .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms + 350ms); }
@keyframes navItem { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.nav-ind { position: absolute; top: 50%; left: 0; height: 36px; margin-top: -18px; width: 0; border-radius: 999px; pointer-events: none; z-index: 0; opacity: 0;
  background: linear-gradient(135deg, rgba(47, 111, 237, .14), rgba(124, 77, 255, .16)); box-shadow: inset 0 0 0 1px rgba(80, 100, 220, .18), 0 8px 18px -10px rgba(80, 90, 220, .55);
  transition: left .45s cubic-bezier(.3, 1.35, .45, 1), width .45s cubic-bezier(.3, 1.35, .45, 1), opacity .3s; }
.nav-ind.on { opacity: 1; }
.nav .pill { position: relative; overflow: hidden; animation: navItem .7s var(--ease) 1s both; }
.nav .pill::after { content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent); transform: skewX(-18deg); animation: pillSweep 4.5s ease-in-out 2s infinite; }
@keyframes pillSweep { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.nav .pill .dot { position: relative; }
.nav .pill .dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: dotPing 2.2s ease-out infinite; }
@keyframes dotPing { 0% { transform: scale(.4); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }
.nav-right .btn { animation: navItem .7s var(--ease) 1.15s both, ctaGlow 3.6s ease-in-out 3s infinite; }
@keyframes ctaGlow { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(47, 111, 237, 0); } 80% { box-shadow: 0 0 0 7px rgba(47, 111, 237, .22); } 95% { box-shadow: 0 0 0 14px rgba(47, 111, 237, 0); } }
@media (max-width: 860px) { .nav-ind { display: none; } .nav::after { left: 28px; right: 28px; } }
@media (prefers-reduced-motion: reduce) { .nav, .nav-links li, .nav .pill, .nav-right .btn { animation: none; } .nav::before, .nav .pill::after, .nav .pill .dot::after { animation: none; } .nav .pill::after, .nav .pill .dot::after { display: none; } .nav-ind { transition: none; } }

/* v11 — roadmap road + early-access card */
.road { position: relative; max-width: 1120px; margin: 0 auto; }
.road-track { position: absolute; left: 12.5%; right: 12.5%; top: 14px; height: 4px; border-radius: 4px; background: #dde4f5; overflow: hidden; }
.road-fill { position: absolute; inset: 0; border-radius: 4px; background: linear-gradient(90deg, #17a673 0%, #2f6fed 38%, #7c4dff 70%, #c7b7ff 100%); transform: scaleX(0); transform-origin: 0 50%; transition: transform 2.4s cubic-bezier(.4, .1, .2, 1) .25s; }
.road.in .road-fill { transform: scaleX(1); }
.road-stops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 22px); position: relative; }
.stop { position: relative; padding-top: 46px; }
.node { position: absolute; top: 0; left: 50%; width: 32px; height: 32px; margin-left: -16px; border-radius: 50%; background: #fff; border: 3px solid #cfd8ee; box-shadow: 0 6px 16px -8px rgba(40, 60, 150, .5); transform: scale(.6); opacity: 0; }
.road.in .node { animation: nodeOn .7s cubic-bezier(.3, 1.5, .5, 1) calc(var(--k) * .6s + .2s) forwards; }
.is-live .node { --nc: #17a673; } .is-build .node { --nc: #2f6fed; } .is-plan .node { --nc: #9aa6c6; }
@keyframes nodeOn { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; border-color: var(--nc); } }
.is-live .node::after, .is-build .node::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--nc); }
.is-build .node::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid #2f6fed; opacity: 0; animation: nodePing 2.2s ease-out 2.6s infinite; }
@keyframes nodePing { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }
.is-plan .node::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 2px dashed #9aa6c6; }
.rcard { height: 100%; box-sizing: border-box; padding: clamp(16px, 2.3vh, 24px) clamp(16px, 1.6vw, 22px); border-radius: 24px; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid #e0e6f4; box-shadow: 0 24px 40px -32px rgba(40, 60, 150, .5); display: flex; flex-direction: column; gap: 10px; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.rcard:hover { transform: translateY(-6px); border-color: #c2d1f6; box-shadow: 0 34px 54px -30px rgba(47, 111, 237, .55); }
.rcard.feat { position: relative; background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--a), #2f6fed, #7c4dff, #ef476f, #7c4dff, #2f6fed) border-box; border: 2px solid transparent; animation: rot 9s linear infinite; box-shadow: 0 34px 60px -34px rgba(124, 77, 255, .6); }
.rcard h3 { margin: 0; font-size: clamp(18px, 1.5vw, 21px); letter-spacing: -.01em; line-height: 1.2; }
.rcard h3 small { display: block; margin-top: 3px; font-size: 14px; font-weight: 600; color: var(--ink2); letter-spacing: 0; }
.rcard p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink2); }
.rcard ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; flex: 1; }
.rcard li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.45; color: var(--ink2); }
.rcard li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #2f6fed, #7c4dff); }
.chip { align-self: flex-start; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.chip.live { background: #e3f7ef; color: #0f8a5f; } .chip.build { background: #e8efff; color: #2f5fd0; } .chip.plan { background: #f0f1f7; color: #6b7385; }
.rlink { margin-top: auto; font-weight: 600; font-size: 14.5px; color: var(--blue); text-decoration: none; } .rlink b { display: inline-block; transition: transform .25s var(--ease); } .rlink:hover b { transform: translateX(4px); }
.rbtn { align-self: flex-start; margin-top: auto; padding: 10px 20px; border-radius: 999px; font-weight: 650; font-size: 14.5px; text-decoration: none; color: #fff; background: linear-gradient(135deg, #2f6fed, #7c4dff); box-shadow: 0 14px 26px -14px rgba(47, 111, 237, .8); transition: transform .25s var(--ease), box-shadow .25s; }
.rbtn:hover { transform: translateY(-2px); box-shadow: 0 20px 30px -14px rgba(47, 111, 237, .85); }
.rbtn.ghost { background: #fff; color: #2f5fd0; box-shadow: inset 0 0 0 1.5px #c9d6f7; } .rbtn.ghost:hover { box-shadow: inset 0 0 0 1.5px #2f6fed; }

.ea-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(22px, 3.4vw, 52px); align-items: center; max-width: 1060px; margin: 0 auto; }
.paper { padding: clamp(18px, 2.6vh, 26px); border-radius: 22px; background: #fff; border: 1px solid #e0e6f4; box-shadow: 0 40px 70px -40px rgba(40, 60, 150, .55); transform: rotate(-1.4deg); transition: transform .5s var(--ease); }
.ea-doc:hover .paper { transform: rotate(0); }
.paper-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px dashed #d8e0f2; }
.paper-top b { font-size: 16px; } .paper-top span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8a91a1; }
.paper-rows { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: clamp(8px, 1.5vh, 13px); }
.paper-rows li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ink); opacity: .35; }
.paper-rows i { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #cfd8ee; position: relative; }
.paper-rows i::after { content: ""; position: absolute; left: 6px; top: 3px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); }
.ea-doc.in .paper-rows li { animation: rowCycle 10s calc(var(--r) * .9s + .4s) infinite; }
.ea-doc.in .paper-rows i { animation: tickBg 10s calc(var(--r) * .9s + .4s) infinite; }
.ea-doc.in .paper-rows i::after { animation: tickMark 10s calc(var(--r) * .9s + .4s) infinite; }
@keyframes rowCycle { 0% { opacity: .35; transform: translateX(-6px); } 6%, 86% { opacity: 1; transform: none; } 96%, 100% { opacity: .35; transform: translateX(-6px); } }
@keyframes tickBg { 0% { background: transparent; border-color: #cfd8ee; } 7%, 86% { background: #17a673; border-color: #17a673; } 96%, 100% { background: transparent; border-color: #cfd8ee; } }
@keyframes tickMark { 0% { transform: rotate(45deg) scale(0); } 8%, 86% { transform: rotate(45deg) scale(1); } 96%, 100% { transform: rotate(45deg) scale(0); } }
.paper-foot { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 1px dashed #d8e0f2; font-size: 12.5px; color: #4b5365; }
.seal { flex: none; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8fb2ff, #2f6fed); box-shadow: 0 0 0 4px rgba(47, 111, 237, .15); }
.ea-doc.in .seal { animation: sealPulse 3s ease-in-out infinite; } @keyframes sealPulse { 50% { box-shadow: 0 0 0 9px rgba(47, 111, 237, 0); } }
.ea-fine { margin: 14px 4px 0; font-size: 12.5px; line-height: 1.5; color: #8a91a1; }

.ea-card { position: relative; padding: clamp(18px, 3vh, 30px); border-radius: 26px; background: #fff; border: 1px solid #e0e6f4; box-shadow: 0 40px 70px -40px rgba(40, 60, 150, .5); display: grid; gap: clamp(10px, 1.6vh, 16px); }
.ea-card fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } .ea-card legend, .ea-label { font-size: 13px; font-weight: 650; color: var(--ink2); padding: 0; margin-bottom: 7px; display: block; }
.ea-releases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; } .ea-releases legend { grid-column: 1 / -1; }
.chipcheck { position: relative; cursor: pointer; } .chipcheck input, .seg input { position: absolute; opacity: 0; pointer-events: none; }
.chipcheck span { display: block; height: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 16px; border: 1.5px solid #dbe3f5; font-weight: 650; font-size: 14px; line-height: 1.25; transition: all .25s var(--ease); }
.chipcheck small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: #7a8296; }
.chipcheck input:checked + span { border-color: #2f6fed; background: #eef3ff; box-shadow: 0 10px 22px -14px rgba(47, 111, 237, .8); }
.chipcheck:hover span { border-color: #a9bdf0; } .chipcheck input:focus-visible + span, .seg input:focus-visible + span { outline: 3px solid rgba(47, 111, 237, .5); outline-offset: 2px; }
.ea-input { width: 100%; box-sizing: border-box; padding: 13px 16px; border-radius: 14px; border: 1.5px solid #dbe3f5; font: inherit; font-size: 16px; background: #fbfcff; transition: border-color .2s, box-shadow .2s; }
.ea-input:focus { outline: 0; border-color: #2f6fed; box-shadow: 0 0 0 4px rgba(47, 111, 237, .15); background: #fff; }
.ea-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; } .seg label { cursor: pointer; }
.seg span { display: block; padding: 8px 13px; border-radius: 999px; border: 1.5px solid #dbe3f5; font-size: 13.5px; font-weight: 600; color: var(--ink2); transition: all .22s var(--ease); }
.seg input:checked + span { background: #12151c; border-color: #12151c; color: #fff; } .seg label:hover span { border-color: #a9bdf0; }
.ea-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ea-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--ink2); cursor: pointer; } .ea-consent input { margin-top: 3px; width: 17px; height: 17px; accent-color: #2f6fed; flex: none; } .ea-consent a { color: var(--blue); }
.ea-submit { position: relative; padding: 14px 22px; border: 0; border-radius: 999px; font: inherit; font-size: 16px; font-weight: 700; color: #fff; cursor: pointer; background: linear-gradient(135deg, #2f6fed, #7c4dff); box-shadow: 0 18px 30px -16px rgba(47, 111, 237, .85); transition: transform .25s var(--ease), box-shadow .25s; overflow: hidden; }
.ea-submit:hover { transform: translateY(-2px); } .ea-submit:disabled { opacity: .8; cursor: progress; transform: none; }
.ea-submit .spin { position: absolute; right: 22px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff; opacity: 0; } .ea-submit.loading .spin { opacity: 1; animation: spinr .7s linear infinite; } @keyframes spinr { to { transform: rotate(360deg); } }
.ea-msg { margin: 0; min-height: 18px; font-size: 13.5px; color: #d03a55; } .ea-msg.ok { color: #0f8a5f; }
.ea-done { position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; animation: fadeUp .6s var(--ease); }
.ea-done[hidden] { display: none; } .ea-done h3 { margin: 14px 0 6px; font-size: 24px; } .ea-done p { margin: 0; color: var(--ink2); line-height: 1.6; max-width: 340px; }
.ea-done .tick { width: 64px; height: 64px; border-radius: 50%; background: #17a673; position: relative; box-shadow: 0 0 0 10px rgba(23, 166, 115, .15); } .ea-done .tick::after { content: ""; position: absolute; left: 23px; top: 14px; width: 16px; height: 30px; border: solid #fff; border-width: 0 5px 5px 0; transform: rotate(45deg); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (min-width: 861px) and (max-height: 800px) { .rcard { gap: 7px; } .rcard p, .rcard li { font-size: 13.5px; } .rcard ul { gap: 5px; } .paper-rows li { font-size: 14px; } .ea-card { gap: 9px; } }
@media (max-width: 860px) {
  .road-track { left: 15px; right: auto; top: 16px; bottom: 16px; width: 4px; height: auto; }
  .road-fill { transform: scaleY(0); transform-origin: 50% 0; background: linear-gradient(180deg, #17a673, #2f6fed 40%, #7c4dff 75%, #c7b7ff); } .road.in .road-fill { transform: scaleY(1); }
  .road-stops { grid-template-columns: 1fr; gap: 16px; } .stop { padding: 0 0 0 48px; } .node { left: 0; top: 18px; margin-left: 0; }
  .ea-grid { grid-template-columns: 1fr; } .paper { transform: none; } .ea-two { grid-template-columns: 1fr; } .ea-releases { grid-template-columns: 1fr; } .chipcheck span { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .chipcheck small { margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .road-fill { transition: none; transform: none; } .node, .road.in .node { animation: none; opacity: 1; transform: none; } .rcard.feat, .is-build .node::before, .paper-rows li, .paper-rows i, .paper-rows i::after, .seal { animation: none !important; } .paper-rows li { opacity: 1; } .paper-rows i { background: #17a673; border-color: #17a673; } .paper-rows i::after { transform: rotate(45deg) scale(1); } }

/* v11b — early-access section fits one screen */
#early-access.nx-section { padding-top: calc(var(--nav-h) + 4px); padding-bottom: 16px; }
#early-access .nx-head.compact { margin-bottom: clamp(14px, 3vh, 28px); }
#early-access .nx-head h2 { font-size: clamp(28px, 4.4vh, 46px); margin-bottom: 8px; }
.ea-grid { grid-template-columns: .9fr 1.1fr; }
.ea-card { gap: clamp(8px, 1.3vh, 14px); padding: clamp(16px, 2.4vh, 28px) clamp(18px, 2vw, 28px); }
.ea-card legend, .ea-label { margin-bottom: 5px; }
.seg { gap: 5px; } .seg span { padding: 6px 11px; font-size: 13px; }
.chipcheck span { padding: 8px 11px; }
.ea-input { padding: 11px 15px; }
.ea-submit { padding: 13px 22px; }
@media (min-width: 861px) and (max-height: 820px) { #early-access .nx-head p, .ea-fine { display: none; } #early-access .nx-head .eyebrow { margin-bottom: 6px; } .paper-foot { margin-top: 12px; } }


/* ==========================================================================
   v13 - ChatGPT plugin: one-click install, illustrated by a looping CSS animation (no video file).
   The animation is decorative (the steps are written next to it), pauses when off screen, and is replaced
   by one still frame for visitors who prefer reduced motion.
   ========================================================================== */
.hero-link { color: var(--blue); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(47, 111, 237, .35); }
.hero-link:hover { border-bottom-color: var(--blue); }
.dir-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.dir-badges .dir-badge { margin-top: 0; }
.dir-badge-2 .dir-badge-dot { background: #d97757; box-shadow: 0 0 0 3px rgba(217, 119, 87, .18); }
.tut-alt { margin: 18px 0 0; padding: 14px 16px; border-radius: 16px; background: #f1f4fb; color: var(--ink2); font-size: 14.5px; line-height: 1.6; scroll-margin-top: 110px; }
.tut-alt b, .tut-alt code { color: var(--ink); }
.tut2-video .panel-video { border-radius: 0; box-shadow: none; }

.demo { --T: 20s; container-type: inline-size; background: radial-gradient(120% 90% at 18% 0%, #e7eeff 0%, #f3eeff 55%, #eef2fb 100%); }
.dm-win { position: absolute; inset: 7% 6% 8%; background: #fff; border-radius: 2.6cqw; overflow: hidden; color: var(--ink); font: 600 2.3cqw/1.35 Inter, system-ui, sans-serif; box-shadow: 0 2.6cqw 5.5cqw -2.4cqw rgba(40, 60, 150, .5), 0 0 0 1px var(--line); }
.dm-bar { height: 7.2cqw; display: flex; align-items: center; gap: 1.1cqw; padding: 0 2.4cqw; background: #f5f7fc; border-bottom: 1px solid var(--line); }
.dm-bar i { width: 1.45cqw; height: 1.45cqw; border-radius: 50%; background: #d5dbe9; }
.dm-url { margin-left: 1.6cqw; padding: .8cqw 2.2cqw; border-radius: 99px; background: #fff; border: 1px solid var(--line); font-weight: 500; color: var(--ink2); font-size: 2cqw; white-space: nowrap; }
.dm-body { position: absolute; inset: 7.2cqw 0 0; }
.dm-s { position: absolute; inset: 0; padding: 3.4cqw 4.2cqw; opacity: 0; animation: var(--T) ease infinite both; }
.dm-s1 { animation-name: dmS1; } .dm-s2 { animation-name: dmS2; } .dm-s3 { animation-name: dmS3; }
@keyframes dmS1 { 0% { opacity: 0; transform: translateY(1.6cqw); } 3%, 23% { opacity: 1; transform: none; } 27%, 100% { opacity: 0; transform: translateY(-1.6cqw); } }
@keyframes dmS2 { 0%, 25% { opacity: 0; transform: translateY(1.6cqw); } 29%, 47% { opacity: 1; transform: none; } 51%, 100% { opacity: 0; transform: translateY(-1.6cqw); } }
@keyframes dmS3 { 0%, 50% { opacity: 0; transform: translateY(1.6cqw); } 54%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }

.dm-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 1.5cqw 3cqw; border-radius: 99px; background: var(--ink); color: #fff; font-weight: 650; font-size: 2.2cqw; white-space: nowrap; }
.dm-app { display: flex; align-items: center; gap: 2.6cqw; }
.dm-logo { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: .5cqw; width: 8.4cqw; height: 8.4cqw; padding: 1.6cqw; border-radius: 2cqw; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.dm-logo i { width: 100%; aspect-ratio: 1; border-radius: 50%; background: #2f6fed; }
.dm-logo i:nth-child(2) { background: #f5b82e; transform: translateY(-35%); } .dm-logo i:nth-child(3) { background: #e8456b; }
.dm-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dm-name b { font-size: 3.1cqw; letter-spacing: -.02em; } .dm-name small { font-weight: 500; color: var(--ink2); font-size: 1.9cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-install { animation: dmPress var(--T) ease infinite both; }
.dm-install::after { content: ""; position: absolute; inset: -.7cqw; border-radius: 99px; border: .35cqw solid var(--blue); opacity: 0; animation: dmRing var(--T) ease-out infinite both; }
@keyframes dmPress { 0%, 17% { transform: none; background: var(--ink); } 19.5% { transform: scale(.93); background: var(--blue); } 22%, 100% { transform: none; background: var(--blue); } }
@keyframes dmRing { 0%, 6% { opacity: 0; transform: scale(1); } 9% { opacity: .65; } 16% { opacity: 0; transform: scale(1.22); } 100% { opacity: 0; } }
.dm-p { margin: 3.4cqw 0 0; font-weight: 500; color: var(--ink2); font-size: 2.3cqw; line-height: 1.5; max-width: 62cqw; }
.dm-facts { display: flex; flex-wrap: wrap; gap: 1.4cqw; margin-top: 3cqw; }
.dm-facts span { padding: .9cqw 2cqw; border-radius: 99px; background: #eef3ff; color: #2756c5; font-size: 1.9cqw; font-weight: 600; }

.dm-dialog { position: relative; width: 56cqw; margin: 2cqw auto 0; padding: 3.2cqw 3.6cqw 3.6cqw; border-radius: 2.4cqw; background: #fff; box-shadow: 0 2cqw 4cqw -1.6cqw rgba(40, 60, 150, .4), 0 0 0 1px var(--line); display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; text-align: center; }
.dm-dialog > b { font-size: 2.9cqw; letter-spacing: -.02em; }
.dm-sso { display: flex; align-items: center; justify-content: center; gap: 1.4cqw; width: 100%; padding: 1.4cqw 0; border-radius: 99px; border: 1px solid var(--line); font-size: 2.1cqw; }
.dm-sso em { font-style: normal; display: grid; place-items: center; width: 3cqw; height: 3cqw; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--line); color: #2f6fed; font-weight: 800; font-size: 1.9cqw; }
.dm-or { color: var(--ink2); font-weight: 500; font-size: 1.8cqw; }
.dm-dialog > :not(b):not(.dm-ok) { animation: dmDlgOut var(--T) ease infinite both; }
.dm-allow { background: var(--blue); animation-name: dmDlgOut, dmAllow; animation-duration: var(--T); animation-iteration-count: infinite; animation-fill-mode: both; }
@keyframes dmDlgOut { 0%, 40.5% { opacity: 1; } 43%, 100% { opacity: 0; } }
@keyframes dmAllow { 0%, 38% { transform: none; } 39.5% { transform: scale(.93); } 41%, 100% { transform: none; } }
.dm-ok { position: absolute; left: 0; right: 0; bottom: 5.4cqw; display: flex; align-items: center; justify-content: center; gap: 1.4cqw; color: #11825a; font-weight: 700; font-size: 2.6cqw; opacity: 0; animation: dmOk var(--T) ease infinite both; }
.dm-ok u { width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: #e7f7ef; position: relative; }
.dm-ok u::after { content: ""; position: absolute; left: 1.2cqw; top: .7cqw; width: .9cqw; height: 1.8cqw; border: solid #11825a; border-width: 0 .4cqw .4cqw 0; transform: rotate(45deg); }
@keyframes dmOk { 0%, 41.5% { opacity: 0; transform: scale(.9); } 44%, 48% { opacity: 1; transform: none; } 51%, 100% { opacity: 0; } }

.dm-user { margin-left: auto; width: fit-content; max-width: 66cqw; padding: 1.8cqw 2.6cqw; border-radius: 2.2cqw 2.2cqw .6cqw 2.2cqw; background: #eef3ff; color: #1d3f94; font-weight: 550; font-size: 2.1cqw; line-height: 1.45; animation: dmUser var(--T) ease infinite both; }
@keyframes dmUser { 0%, 54% { opacity: 0; transform: translateY(2cqw); } 58%, 100% { opacity: 1; transform: none; } }
.dm-reply { position: relative; margin-top: 2.6cqw; height: 21cqw; }
.dm-search { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 1.4cqw; padding: 1.2cqw 2.2cqw; border-radius: 99px; background: #f3f5fa; color: var(--ink2); font-weight: 600; font-size: 1.9cqw; animation: dmSearch var(--T) ease infinite both; }
.dm-search i { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; border: .35cqw solid #c5cde0; border-top-color: var(--blue); animation: dmSpin .8s linear infinite; }
@keyframes dmSpin { to { transform: rotate(360deg); } }
@keyframes dmSearch { 0%, 60% { opacity: 0; } 62%, 70% { opacity: 1; } 72%, 100% { opacity: 0; } }
.dm-card { position: absolute; inset: 0 0 auto 0; display: flex; flex-direction: column; gap: .9cqw; padding: 2.2cqw 2.8cqw; border-radius: 2cqw; background: #fff; box-shadow: 0 1.4cqw 3cqw -1.6cqw rgba(40, 60, 150, .4), 0 0 0 1px var(--line); animation: dmCard var(--T) ease infinite both; }
.dm-card b { font-size: 2.6cqw; letter-spacing: -.015em; }
.dm-card small { color: var(--ink2); font-weight: 600; font-size: 1.9cqw; }
.dm-held { font-weight: 500; color: var(--ink); font-size: 2.1cqw; line-height: 1.45; }
.dm-pdf { color: var(--blue); font-size: 1.9cqw; font-weight: 650; }
@keyframes dmCard { 0%, 71% { opacity: 0; transform: translateY(2cqw); } 75%, 100% { opacity: 1; transform: none; } }

.dm-cursor { position: absolute; left: 90%; top: 92%; width: 3.6cqw; height: 3.6cqw; opacity: 0; filter: drop-shadow(0 .5cqw .6cqw rgba(15, 19, 32, .3)); animation: dmCursor var(--T) ease-in-out infinite both; pointer-events: none; }
@keyframes dmCursor {
  0% { left: 90%; top: 92%; opacity: 0; transform: scale(1); }
  3% { opacity: 1; left: 88%; top: 86%; }
  15% { left: 79%; top: 20%; transform: scale(1); }
  19% { left: 79%; top: 20%; transform: scale(1); }
  19.8% { transform: scale(.78); }
  21.5% { left: 79%; top: 20%; transform: scale(1); }
  34% { left: 50%; top: 66%; transform: scale(1); }
  38.6% { left: 50%; top: 66%; transform: scale(1); }
  39.6% { transform: scale(.78); }
  41.2% { left: 50%; top: 66%; transform: scale(1); opacity: 1; }
  46% { opacity: 1; left: 56%; top: 74%; }
  49%, 100% { opacity: 0; left: 56%; top: 74%; }
}

.dm-tag { position: absolute; left: 3.2cqw; bottom: 1.8cqw; padding: .5cqw 1.5cqw; border-radius: 99px; background: rgba(255, 255, 255, .78); color: var(--ink2); font: 600 1.7cqw Inter, system-ui, sans-serif; box-shadow: 0 0 0 1px var(--line); }
.dm-paused .dm-win *, .dm-paused .dm-win *::after { animation-play-state: paused !important; }
.dm-reset .dm-win *, .dm-reset .dm-win *::after { animation: none !important; }
.dm-reset .dm-s { opacity: 0; }

@media (max-width: 560px) {
  .demo { aspect-ratio: 4 / 3; }
  .dm-win { inset: 5% 3% 9%; }
}
@container (max-width: 440px) {
  .dm-bar { height: 9cqw; } .dm-body { inset: 9cqw 0 0; }
  .dm-url { font-size: 2.8cqw; }
  .dm-s { padding: 4.2cqw 4.4cqw; }
  .dm-name b { font-size: 4.3cqw; } .dm-name small { display: none; }
  .dm-btn { font-size: 3.1cqw; padding: 2cqw 3.6cqw; }
  .dm-logo { width: 11cqw; height: 11cqw; padding: 2.2cqw; }
  .dm-p { font-size: 3.4cqw; max-width: none; margin-top: 4.4cqw; }
  .dm-facts { gap: 1.8cqw; margin-top: 4cqw; } .dm-facts span { font-size: 2.8cqw; padding: 1.2cqw 2.6cqw; }
  .dm-dialog { width: 78cqw; padding: 4cqw; gap: 2.4cqw; } .dm-dialog > b { font-size: 4.2cqw; } .dm-sso { font-size: 3.1cqw; padding: 2cqw 0; } .dm-sso em { width: 4.4cqw; height: 4.4cqw; font-size: 2.8cqw; }
  .dm-or { font-size: 2.6cqw; } .dm-ok { font-size: 3.8cqw; bottom: 9cqw; }
  .dm-user { font-size: 3.1cqw; max-width: 86cqw; padding: 2.4cqw 3.2cqw; }
  .dm-reply { height: 34cqw; margin-top: 3.6cqw; } .dm-search { font-size: 2.8cqw; padding: 1.8cqw 3cqw; }
  .dm-card { padding: 3cqw 3.4cqw; gap: 1.2cqw; } .dm-card b { font-size: 3.8cqw; } .dm-card small { font-size: 2.7cqw; } .dm-held { font-size: 3cqw; } .dm-pdf { font-size: 2.8cqw; }
  .dm-tag { font-size: 2.3cqw; bottom: 2.4cqw; left: 4cqw; }
}
@media (prefers-reduced-motion: reduce) {
  .demo .dm-s1, .demo .dm-s2, .demo .dm-cursor, .demo .dm-search, .demo .replay { display: none; }
  .demo .dm-s3, .demo .dm-s3 *, .demo .dm-win *, .demo .dm-win *::after { animation: none !important; }
  .demo .dm-s3, .demo .dm-user, .demo .dm-card { opacity: 1; transform: none; }
}

/* ===== v14: featured launch badge (ChatGPT plugin) ===== */
@property --fb-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.feat-badge {
  --fb-g: #10a37f;
  position: relative; display: inline-flex; align-items: center; margin: 0 0 18px; padding: 1.5px;
  border-radius: 999px; text-decoration: none; color: var(--color-text-primary, #0f172a);
  isolation: isolate; transition: transform 180ms ease;
  box-shadow: 0 6px 22px -8px rgba(16, 163, 127, .55), 0 0 0 0 rgba(16, 163, 127, .0);
  animation: fb-breathe 3.6s ease-in-out infinite;
}
.fb-ring {
  position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: conic-gradient(from var(--fb-a), #10a37f, #2f6fed, #8b5cf6, #2f6fed, #10a37f);
  animation: fb-spin 6s linear infinite;
}
.fb-in {
  position: relative; display: inline-flex; align-items: center; gap: 9px; border-radius: 999px;
  padding: 8px 14px 8px 8px; background: #fff; font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.fb-new {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff;
  background: linear-gradient(135deg, #10a37f, #0d8a6b); padding: 4px 9px; border-radius: 999px;
}
.fb-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--fb-g); box-shadow: 0 0 0 0 rgba(16, 163, 127, .5); animation: fb-ping 2.2s ease-out infinite; }
.fb-txt b { font-weight: 800; }
.fb-arrow { color: var(--fb-g); transition: transform 180ms ease; }
.fb-shine {
  position: absolute; inset: 1.5px; border-radius: inherit; overflow: hidden; pointer-events: none;
}
.fb-shine::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 38%; left: -50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: skewX(-18deg); animation: fb-shine 8s ease-in-out infinite;
}
.feat-badge:hover { transform: translateY(-1px); }
.feat-badge:hover .fb-arrow { transform: translateX(3px); }
.feat-badge:focus-visible { outline: 3px solid rgba(47, 111, 237, .55); outline-offset: 3px; }
.feat-badge.paused, .feat-badge.paused .fb-ring, .feat-badge.paused .fb-shine::after, .feat-badge.paused .fb-dot { animation-play-state: paused; }
/* after the launch period: settle into a calm static badge */
.feat-badge.calm { animation: none; box-shadow: 0 4px 14px -8px rgba(16, 163, 127, .5); }
.feat-badge.calm .fb-ring { animation: none; }
.feat-badge.calm .fb-shine, .feat-badge.calm .fb-dot { display: none; }
.feat-badge.calm .fb-new { display: none; }
.feat-badge.calm .fb-in { padding-left: 14px; }
@keyframes fb-spin { to { --fb-a: 360deg; } }
@keyframes fb-breathe { 0%, 100% { box-shadow: 0 6px 20px -8px rgba(16, 163, 127, .40), 0 0 0 0 rgba(16, 163, 127, 0); } 50% { box-shadow: 0 8px 30px -6px rgba(47, 111, 237, .55), 0 0 0 6px rgba(16, 163, 127, .10); } }
@keyframes fb-ping { 0% { box-shadow: 0 0 0 0 rgba(16, 163, 127, .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(16, 163, 127, 0); } }
@keyframes fb-shine { 0%, 62% { left: -50%; } 82%, 100% { left: 130%; } }
@supports not (background: conic-gradient(from 0deg, red, blue)) { .fb-ring { background: linear-gradient(120deg, #10a37f, #2f6fed, #8b5cf6); animation: none; } }
@media (max-width: 480px) { .fb-in { font-size: 13px; padding: 7px 12px 7px 7px; gap: 7px; } }
@media (prefers-reduced-motion: reduce) {
  .feat-badge, .fb-ring, .fb-dot { animation: none !important; }
  .fb-shine { display: none; }
  .feat-badge { box-shadow: 0 6px 22px -8px rgba(16, 163, 127, .55); }
  .fb-ring { background: linear-gradient(120deg, #10a37f, #2f6fed, #8b5cf6); }
}
.dir-badges .dir-badge-2 { background: transparent; border-color: transparent; color: var(--color-text-secondary); font-weight: 500; padding-left: 0; }
.dir-badges .dir-badge-2:hover { color: var(--color-text-primary); box-shadow: none; border-color: transparent; }

/* ===== v14: larger navigation bar + logo ===== */
:root { --nav-h: 98px; }
.nav { width: min(1260px, calc(100% - 28px)); top: 14px; }
.nav .nav-inner { height: 76px; padding: 0 12px 0 32px; }
.nav-logo img { height: 46px; }
.logo-anim { height: 46px; }
.nav-left { gap: 44px; }
.nav-links a { font-size: 15.5px; padding: 10px 17px; }
.nav-ind { height: 42px; margin-top: -21px; }
.nav .pill { font-size: 13.5px; padding: 8px 15px; }
.nav-right .btn { font-size: 15px; padding: 12px 22px; }
html { scroll-padding-top: 112px; }
@media (max-width: 860px) {
  .nav .nav-inner { height: 66px; padding: 0 10px 0 24px; }
  .nav-logo img, .logo-anim { height: 38px; }
  .nav.open .nav-links { top: 76px; }
  :root { --nav-h: 86px; }
}