/* echoclip.link - same colours as the Echo app */
:root {
  --bg:#0d0d10; --panel:#16161a; --panel2:#1e1e23; --line:#26262c;
  --text:#f5f5f7; --muted:#a0a0ab; --dim:#6b6b76;
  --accent:#7c5cff; --accent2:#9d85ff; --accent-rgb:124,92,255;
  --grad:linear-gradient(135deg,#8b6cff 0%,#6a4cf5 55%,#4f7bff 100%);
  --ok:#34d399; --radius:14px;
}
/* themes (picked with the palette button, remembered in this browser) */
[data-theme="ocean"]   { --accent:#2fa8e0; --accent2:#7cc9f0; --accent-rgb:47,168,224;  --grad:linear-gradient(135deg,#4cc3f0 0%,#2f8fe0 55%,#3b5cf0 100%); }
[data-theme="ember"]   { --accent:#f07a1a; --accent2:#ffa154; --accent-rgb:240,122,26;  --grad:linear-gradient(135deg,#ffa154 0%,#f07a1a 55%,#e0484a 100%); }
[data-theme="emerald"] { --accent:#2fbf86; --accent2:#6fd9ab; --accent-rgb:47,191,134;  --grad:linear-gradient(135deg,#6fd9ab 0%,#2fbf86 55%,#1d9a9a 100%); }
[data-theme="crimson"] { --accent:#d0505a; --accent2:#e8838a; --accent-rgb:208,80,90;   --grad:linear-gradient(135deg,#e8838a 0%,#d0505a 55%,#a3306e 100%); }
[data-theme="rose"]    { --accent:#e0609e; --accent2:#f29ac4; --accent-rgb:224,96,158;  --grad:linear-gradient(135deg,#f29ac4 0%,#e0609e 55%,#9b5be0 100%); }
[data-theme="slate"]   { --accent:#8a96a8; --accent2:#c3ccd8; --accent-rgb:138,150,168; --grad:linear-gradient(135deg,#c3ccd8 0%,#8a96a8 55%,#5d6a7c 100%); }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font:16px/1.6 "Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
h1, h2, h3 { font-family:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,sans-serif; letter-spacing:-.02em; line-height:1.15; }
a { color:var(--accent2); text-decoration:none; }
a:hover { text-decoration:underline; }
:focus-visible { outline:2px solid var(--accent2); outline-offset:3px; border-radius:6px; }
.wrap { max-width:1080px; margin:0 auto; padding:0 20px; }

/* header */
header { position:sticky; top:0; z-index:10; background:#0d0d10e6; backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
header .wrap { display:flex; align-items:center; gap:20px; height:64px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--text); font-weight:700; font-size:18px; }
.brand:hover { text-decoration:none; }
.logo { width:34px; height:34px; border-radius:10px; background:var(--grad); display:grid; place-items:center; box-shadow:0 6px 18px rgba(var(--accent-rgb),.33), inset 0 1px 0 #ffffff40; flex:none; }
.logo svg { width:22px; height:22px; }
nav { margin-left:auto; display:flex; align-items:center; gap:22px; font-size:15px; }
nav a { color:var(--muted); }
nav a:hover, nav a.on { color:var(--text); text-decoration:none; }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 20px; border-radius:12px; font-weight:600; font-size:15px; border:1px solid var(--line); background:var(--panel2); color:var(--text); cursor:pointer; font-family:inherit; }
.btn { transition:transform .15s, background .15s, box-shadow .15s, filter .15s; }
.btn:hover { text-decoration:none; background:#26262c; transform:translateY(-1px); }
.btn:active { transform:none; }
.btn.primary { background:var(--grad); border-color:transparent; box-shadow:0 8px 24px rgba(var(--accent-rgb),.25); }
.btn.primary:hover { filter:brightness(1.08); }
.btn svg { width:18px; height:18px; flex:none; }
.btn.small { height:36px; padding:0 14px; font-size:14px; }

/* hero */
.hero { padding:88px 0 64px; text-align:center; position:relative; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:-200px 0 auto; height:520px; background:radial-gradient(closest-side,rgba(var(--accent-rgb),.2),transparent); pointer-events:none; }
.hero h1 { font-size:clamp(36px,6vw,60px); max-width:780px; margin:0 auto 18px; position:relative; }
.hero h1 span { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.lead { font-size:clamp(17px,2.2vw,20px); color:var(--muted); max-width:620px; margin:0 auto 32px; position:relative; }
.dl { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; position:relative; }
.dl-note { color:var(--dim); font-size:13.5px; margin-top:16px; position:relative; }

/* sections */
section { padding:64px 0; }
section h2 { font-size:clamp(28px,4vw,38px); margin-bottom:12px; }
section .sub { color:var(--muted); max-width:640px; margin-bottom:36px; font-size:17px; }
.center { text-align:center; }
.center .sub { margin-left:auto; margin-right:auto; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px; transition:transform .18s, border-color .18s, box-shadow .18s; }
.card:hover { transform:translateY(-3px); border-color:rgba(var(--accent-rgb),.45); box-shadow:0 14px 34px rgba(0,0,0,.35), 0 0 0 1px rgba(var(--accent-rgb),.15); }
.card:hover .ico { background:rgba(var(--accent-rgb),.22); }
.plan { transition:transform .18s, border-color .18s; } .plan:hover { transform:translateY(-3px); border-color:rgba(var(--accent-rgb),.45); }
.mock .clip { transition:transform .18s, border-color .18s; } .mock .clip:hover { transform:translateY(-3px) scale(1.02); border-color:rgba(var(--accent-rgb),.5); }
.card h3 { font-size:18px; margin-bottom:8px; display:flex; align-items:center; gap:10px; }
.card p { color:var(--muted); font-size:15px; }
.ico { width:36px; height:36px; border-radius:10px; background:rgba(var(--accent-rgb),.12); color:var(--accent2); display:grid; place-items:center; flex:none; }
.ico svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* app mock (hero picture) */
.mock { max-width:880px; margin:56px auto 0; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:14px; box-shadow:0 30px 80px #00000080; position:relative; text-align:left; }
.mock .bar { display:flex; gap:6px; margin-bottom:12px; }
.mock .bar i { width:10px; height:10px; border-radius:50%; background:#2c2c33; }
.mock .clips { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }
.mock .clip { border-radius:12px; overflow:hidden; background:var(--panel2); border:1px solid var(--line); }
.mock .thumb { aspect-ratio:16/9; position:relative; }
.mock .thumb b { position:absolute; right:8px; bottom:8px; font-size:11.5px; background:#000a; padding:1px 6px; border-radius:6px; font-weight:600; }
.mock .meta { padding:9px 11px; font-size:13px; }
.mock .meta small { display:block; color:var(--dim); font-size:12px; }
.t1 { background:linear-gradient(135deg,#3b2a7a,#1d4d7a); } .t2 { background:linear-gradient(135deg,#7a2a4d,#3b2a7a); }
.t3 { background:linear-gradient(135deg,#1d5a4d,#1d3b7a); } .t4 { background:linear-gradient(135deg,#7a5a1d,#7a2a3b); }

/* steps */
.steps { counter-reset:s; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.steps .card::before { counter-increment:s; content:counter(s); display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--grad); font-weight:700; font-size:14px; margin-bottom:14px; }

/* pricing */
.toggle { display:inline-flex; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:4px; margin-bottom:28px; }
.toggle button { border:0; background:none; color:var(--muted); font:inherit; font-size:14px; font-weight:600; padding:8px 16px; border-radius:9px; cursor:pointer; }
.toggle button.on { background:var(--panel2); color:var(--text); box-shadow:inset 0 0 0 1px var(--line); }
.toggle button em { font-style:normal; color:var(--ok); font-size:12.5px; margin-left:4px; }
.plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; text-align:left; }
.plan { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; display:flex; flex-direction:column; }
.plan.best { border-color:rgba(var(--accent-rgb),.55); box-shadow:0 0 0 1px rgba(var(--accent-rgb),.33), 0 16px 40px rgba(var(--accent-rgb),.13); }
.plan .tag { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent2); min-height:18px; }
.plan h3 { font-size:30px; margin:6px 0 2px; }
.plan .price { font-size:17px; color:var(--text); font-weight:600; }
.plan .price small { color:var(--dim); font-weight:400; }
.plan ul { list-style:none; margin:18px 0 0; display:grid; gap:8px; font-size:14.5px; color:var(--muted); }
.plan li::before { content:"✓"; color:var(--ok); font-weight:700; margin-right:8px; }
.fine { color:var(--dim); font-size:13.5px; margin-top:20px; }

/* text pages (terms, privacy) */
.doc { max-width:760px; margin:0 auto; padding:56px 20px 80px; }
.doc h1 { font-size:clamp(32px,5vw,44px); margin-bottom:8px; }
.doc .updated { color:var(--dim); font-size:14px; margin-bottom:36px; }
.doc h2 { font-size:22px; margin:36px 0 10px; }
.doc p, .doc li { color:#d4d4dc; font-size:16px; }
.doc p + p { margin-top:12px; }
.doc ul { margin:10px 0 0 22px; display:grid; gap:6px; }
.doc table { width:100%; border-collapse:collapse; margin-top:12px; font-size:15px; }
.doc th, .doc td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; color:#d4d4dc; }
.doc th { color:var(--text); font-weight:600; background:var(--panel); }
.tablewrap { overflow-x:auto; }

/* faq */
details { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 20px; }
details + details { margin-top:10px; }
summary { cursor:pointer; font-weight:600; }
details p { color:var(--muted); margin-top:10px; font-size:15px; }

/* footer */
footer { border-top:1px solid var(--line); padding:36px 0 48px; color:var(--dim); font-size:14px; }
footer .wrap { display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; }
footer nav { margin-left:auto; gap:20px; flex-wrap:wrap; }
footer nav a { color:var(--muted); }

@media (max-width:640px) {
  header nav a.hide-s { display:none; }
  nav { gap:16px; }
  .hero { padding:56px 0 40px; }
  section { padding:48px 0; }
  footer nav { margin-left:0; }
}

/* eyebrow label above headings */
.eyebrow { font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent2); margin-bottom:10px; }
.hero .eyebrow { position:relative; }

/* stat strip (big number + label) */
.stats { display:grid; grid-template-columns:repeat(4,1fr); background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); margin:40px auto 0; max-width:880px; position:relative; text-align:left; }
.stats div { padding:18px 22px; }
.stats div + div { border-left:1px solid var(--line); }
.stats b { display:block; font-size:28px; line-height:1.1; color:var(--accent2); font-family:"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif; letter-spacing:-.02em; }
.stats small { color:var(--muted); font-size:13.5px; }
@media (max-width:640px) { .stats { grid-template-columns:1fr 1fr; } .stats div:nth-child(3) { border-left:0; } .stats div:nth-child(n+3) { border-top:1px solid var(--line); } }

/* light-by-design comparison */
.compare { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.compare .card ul { list-style:none; display:grid; gap:10px; margin-top:12px; }
.compare li { color:var(--muted); font-size:15px; padding-left:26px; position:relative; }
.compare li::before { position:absolute; left:0; top:0; font-weight:700; }
.compare .us { border-color:rgba(var(--accent-rgb),.45); background:linear-gradient(160deg,rgba(var(--accent-rgb),.10),var(--panel) 60%); }
.compare .us li::before { content:"✓"; color:var(--ok); }
.compare .them li::before { content:"–"; color:var(--dim); }
.compare h3 small { font-weight:500; color:var(--dim); font-size:13px; margin-left:auto; }
@media (max-width:720px) { .compare { grid-template-columns:1fr; } }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.chip { font-size:13px; font-weight:600; padding:4px 11px; border-radius:999px; background:rgba(var(--accent-rgb),.12); color:var(--accent2); border:1px solid rgba(var(--accent-rgb),.3); }

/* theme picker */
.themebtn { width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:var(--panel); color:var(--muted); display:grid; place-items:center; cursor:pointer; transition:color .15s, border-color .15s; }
.themebtn:hover { color:var(--text); border-color:rgba(var(--accent-rgb),.5); }
.themebtn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.themes { position:absolute; right:20px; top:60px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px; box-shadow:0 20px 50px rgba(0,0,0,.5); display:grid; grid-template-columns:repeat(4,64px); gap:8px; z-index:20; }
.themes[hidden] { display:none; }
.themes p { grid-column:1/-1; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.themes button { border:1px solid var(--line); background:var(--bg); border-radius:10px; padding:8px 6px 6px; cursor:pointer; color:var(--muted); font:inherit; font-size:11.5px; display:grid; gap:6px; justify-items:center; transition:border-color .15s, transform .15s; }
.themes button:hover { transform:translateY(-2px); border-color:var(--dim); }
.themes button.on { border-color:var(--text); color:var(--text); }
.themes i { width:34px; height:20px; border-radius:6px; display:block; }
header .wrap { position:relative; }

/* drifting particles behind the hero (off when the visitor prefers less motion) */
#sky { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.55; }
.compare .card ul.plain li::before { content:"✓"; color:var(--accent2); }
.compare .note { color:var(--dim); font-size:14px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
section[id] { scroll-margin-top:72px; }

/* hero picture: a small, accurate copy of Echo's Library screen */
.app { max-width:960px; margin:56px auto 0; display:grid; grid-template-columns:190px 1fr; grid-template-rows:auto 1fr; background:var(--bg); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 30px 80px #00000080; text-align:left; position:relative; font-size:12.5px; }
.app svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.arail { background:#0a0a0c; border-right:1px solid var(--line); padding:14px 10px; display:flex; flex-direction:column; gap:2px; }
.abrand { display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; padding:0 6px 12px; }
.logo.sm { width:26px; height:26px; border-radius:8px; } .logo.sm svg { width:17px; height:17px; }
.anav, .aflt { display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:8px; color:var(--muted); border:1px solid transparent; position:relative; }
.anav.on { background:rgba(var(--accent-rgb),.10); border-color:rgba(var(--accent-rgb),.22); color:var(--text); }
.anav.on::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:2px; border-radius:0 3px 3px 0; background:var(--accent); }
.anav.on svg { color:var(--accent2); }
.aflt.on { background:var(--panel); color:var(--text); }
.aflt em { margin-left:auto; font-style:normal; color:var(--dim); font-size:11px; } .aflt.on em { color:var(--accent2); }
.aflt u { text-decoration:none; width:16px; height:16px; border-radius:5px; background:var(--panel2); color:var(--accent2); font-size:10px; font-weight:700; display:grid; place-items:center; }
.alab { font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); padding:12px 9px 4px; }
.astat { margin-top:auto; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px; display:grid; gap:3px; }
.astat b { display:flex; align-items:center; gap:7px; font-size:12px; } .astat b i { width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok); }
.astat small { color:var(--muted); font-size:11px; } .astat .ok { color:var(--ok); }
.amain { padding:14px 16px 16px; background:radial-gradient(600px 220px at 70% -80px, rgba(var(--accent-rgb),.10), transparent 70%); min-width:0; }
.atop, .atool { display:flex; align-items:center; gap:8px; }
/* title bar across the whole window, like Echo 2.0: logo + page name, recorder pill, hotkeys, Record / Save clip, window buttons */
.atop { grid-column:1 / -1; padding:8px 8px 8px 12px; border-bottom:1px solid var(--line); background:linear-gradient(90deg,rgba(var(--accent-rgb),.08),transparent 45%),#0b0b0e; }
.atop h4 { display:flex; align-items:center; gap:8px; font-size:15px; margin:0 2px 0 0; padding-right:10px; border-right:1px solid var(--line); }
.aplain { display:grid; place-items:center; width:26px; height:26px; color:var(--muted); }
.awin { display:flex; gap:2px; margin-left:2px; padding-left:8px; border-left:1px solid var(--line); color:var(--muted); }
.awin i { display:grid; place-items:center; width:26px; height:24px; } .awin svg { width:12px; height:12px; }
.apill { display:flex; align-items:center; gap:5px; border:1px solid var(--line); border-radius:99px; padding:3px 9px; color:var(--muted); font-size:11px; white-space:nowrap; }
.apill i { width:6px; height:6px; border-radius:50%; background:var(--ok); }
kbd { font:600 10px/1 inherit; font-family:inherit; background:var(--panel2); border:1px solid var(--line); border-radius:4px; padding:2px 4px; color:var(--text); }
.agrow { flex:1; }
.abtn { display:flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--panel); border-radius:8px; padding:5px 10px; font-weight:600; white-space:nowrap; }
.abtn .rec { width:7px; height:7px; border-radius:50%; background:#fb5c7c; }
.abtn.pri { background:var(--grad); border-color:transparent; box-shadow:0 4px 14px rgba(var(--accent-rgb),.3); }
.atool { margin:0 0 4px; color:var(--muted); font-size:11.5px; }
.aname { display:flex; align-items:center; gap:4px; color:var(--text); font-weight:600; font-size:14px; padding:3px 6px; margin-left:-6px; border-radius:7px; }
.aname svg { width:12px; height:12px; }
.atool > span { white-space:nowrap; }
.asearch { display:flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--panel); border-radius:8px; padding:5px 10px; width:160px; color:var(--dim); } .asearch svg { width:12px; height:12px; }
.agroup { font-weight:700; font-size:13px; margin:10px 0 8px; } .agroup em { font-style:normal; color:var(--dim); font-weight:400; margin-left:4px; }
.agrid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mclip { border:1px solid var(--line); background:var(--panel); border-radius:10px; overflow:hidden; transition:transform .18s, border-color .18s; }
.mclip:hover { transform:translateY(-3px); border-color:rgba(var(--accent-rgb),.5); }
.mthumb { aspect-ratio:16/9; position:relative; }
.mthumb b { position:absolute; right:6px; bottom:6px; font-size:10.5px; background:#000c; padding:1px 5px; border-radius:5px; }
.mthumb em { position:absolute; left:7px; top:5px; font-style:normal; color:#ffd23f; font-size:13px; }
.mmeta { display:flex; align-items:center; gap:6px; padding:8px 9px; }
.mmeta > div { min-width:0; flex:1; }
.mmeta strong { display:block; font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mmeta small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mmeta small { color:var(--dim); font-size:10.5px; }
/* same layout as the app: [copy | ▾] group + star at the right edge, all on one line */
.mact { display:flex; align-items:center; gap:4px; color:var(--muted); flex:none; }
.mact i { display:grid; place-items:center; width:22px; height:22px; border-radius:6px; }
.mact svg { width:12px; height:12px; }
.mcopy { display:flex; align-items:center; border:1px solid var(--line); border-radius:7px; }
.mcopy .mch { width:14px; } .mcopy .mch svg { width:9px; height:9px; stroke-width:2.6; }
.mstar.on { color:#ffd23f; } .mstar.on svg { fill:#ffd23f; stroke:#ffd23f; }
.mgame { position:absolute; left:6px; top:6px; width:16px; height:16px; border-radius:5px; background:#000a; color:var(--accent2); font-size:9.5px; font-weight:700; display:grid; place-items:center; }
.mcld { position:absolute; right:6px; top:6px; font-size:9.5px; background:#000c; padding:1px 5px; border-radius:5px; }
.mcld.only { background:rgba(var(--accent-rgb),.85); color:#fff; }
.mtag { position:absolute; left:6px; bottom:6px; font-size:9.5px; font-weight:600; background:rgba(var(--accent-rgb),.85); color:#fff; padding:1px 5px; border-radius:5px; }
.afilter { display:flex; align-items:center; gap:5px; border:1px dashed var(--line); border-radius:99px; padding:3px 10px; color:var(--muted); }
.alab span { float:right; font-size:12px; color:var(--dim); }
.apill svg, .abtn svg { width:12px; height:12px; }
.t1 { background:radial-gradient(circle at 30% 70%,#e0a24a55,transparent 45%),linear-gradient(160deg,#4a6fa5,#1f2f4a 60%,#2b3a2a); }
.t2 { background:radial-gradient(circle at 70% 40%,#ff465566,transparent 40%),linear-gradient(160deg,#5b2a3a,#1d1a2e 70%); }
.t3 { background:radial-gradient(ellipse at 50% 90%,#2fbf8655,transparent 55%),linear-gradient(170deg,#2a5aa8,#122a4a 65%,#1b3a2a); }
@media (max-width:820px) { .app { grid-template-columns:1fr; } .arail { display:none; } .agrid { grid-template-columns:1fr 1fr; } .agrid .mclip:nth-child(3) { display:none; } .apill { display:none; } .asearch { display:none; } .awin, .aplain, .atool .aico, .atool .abtn:nth-last-child(2) { display:none; } .atool .abtn:last-child { display:none; } }

/* conveniences grid */
.conv { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:4px 28px; }
.ci { display:flex; gap:14px; padding:14px 10px; border-radius:12px; transition:background .18s; }
.ci:hover { background:var(--panel); }
.ci b { display:block; font-size:15.5px; margin-bottom:2px; }
.ci small { color:var(--muted); font-size:14px; line-height:1.5; }

/* "bring your own" gets the same weight as Echo Cloud, in green */
.compare .byo { --by:52,211,153; border-color:rgba(var(--by),.45); background:linear-gradient(160deg,rgba(var(--by),.10),var(--panel) 60%); }
.compare .byo:hover { border-color:rgba(var(--by),.7); box-shadow:0 14px 34px rgba(0,0,0,.35), 0 0 0 1px rgba(var(--by),.2); }
.compare .byo ul.plain li::before { color:#34d399; }
.compare .byo .ico { background:rgba(var(--by),.14); color:#34d399; }
.free { margin-left:8px; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#34d399; background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.35); border-radius:99px; padding:2px 9px; }
.byobtn { background:rgba(52,211,153,.14); border-color:rgba(52,211,153,.45); color:#d1fae5; }
.byobtn:hover { background:rgba(52,211,153,.24); }
.ecbtn { background:rgba(var(--accent-rgb),.14); border-color:rgba(var(--accent-rgb),.45); color:var(--text); }
.ecbtn:hover { background:rgba(var(--accent-rgb),.24); }
.t4 { background:radial-gradient(circle at 60% 60%,#f0b84e44,transparent 45%),linear-gradient(160deg,#3a4a6a,#1a2236 65%); }
.t5 { background:radial-gradient(circle at 35% 45%,#9b7be055,transparent 45%),linear-gradient(160deg,#2a2440,#141320 70%); }
.t6 { background:radial-gradient(circle at 65% 55%,#ff465544,transparent 40%),linear-gradient(160deg,#3a2a40,#1a1622 70%); }
@media (max-width:820px) { .mact { display:none; } }

/* changelog page */
.changes { max-width:780px; margin:28px auto 0; text-align:left; }
/* changelog (chat 28): latest card + versions grouped by day, tagged parts, filter buttons */
.changes { max-width:820px; }
.cfilter { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 22px; }
.cfilter button { font:inherit; font-size:13px; color:var(--muted); background:var(--panel); border:1px solid var(--line); border-radius:99px; padding:5px 14px; cursor:pointer; }
.cfilter button:hover { color:var(--text); }
.cfilter button.on { color:var(--text); background:rgba(var(--accent-rgb),.16); border-color:rgba(var(--accent-rgb),.45); }
.changes article { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 20px; margin-bottom:10px; }
.changes article[hidden], .changes li[hidden], .cday[hidden] { display:none; }
.clatest { border-color:rgba(var(--accent-rgb),.45) !important; box-shadow:0 10px 40px rgba(var(--accent-rgb),.12); padding:22px 24px !important; margin-bottom:28px !important; }
.chead { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.chead b { font-size:16px; } .clatest .chead b { font-size:20px; }
.chead time { margin-left:auto; color:var(--dim); font-size:13px; }
.chead .new { font-size:11px; font-weight:600; color:var(--accent2); border:1px solid rgba(var(--accent-rgb),.5); border-radius:99px; padding:1px 8px; }
.changes ul { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.changes li { display:flex; align-items:baseline; gap:8px; color:var(--muted); line-height:1.5; }
.clatest li { color:var(--text); }
.tg { flex:none; font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; border-radius:6px; padding:1px 6px; position:relative; top:-1px; }
.tg.new { color:var(--accent2); background:rgba(var(--accent-rgb),.14); }
.tg.fix { color:#f0a35a; background:rgba(240,163,90,.13); }
.tg.linux { color:#e8c547; background:rgba(232,197,71,.12); }
.tg.windows { color:#5ab0f0; background:rgba(90,176,240,.13); }
.cday { font-size:13px; font-weight:600; color:var(--dim); text-transform:uppercase; letter-spacing:.06em; margin:22px 0 10px; }
.cnote { margin-top:18px; font-size:13px; }
@media (max-width:640px) { .changes article { padding:14px; } .changes li { flex-wrap:wrap; } }

/* /download page */
.dlpage { padding:72px 0 40px; }
.dlgrid { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.dlgrid .card { display:flex; flex-direction:column; }
.dlgrid .card p { flex:1; margin-bottom:16px; }
.dlgrid .card .btn { align-self:flex-start; }
.dlpage + section { padding-top:24px; }
.dlpage ~ section { padding:32px 0; }
.dl-note .noads { color:var(--muted); font-weight:600; }

/* homepage app preview: try the buttons (nothing really happens - a note points to the download) */
.app .mcopy i, .app .mstar, .app .mx, .app .abtn, .app .mmenu button { cursor:pointer; }
.mact i:hover, .mcopy i:hover { background:var(--panel2); color:var(--text); }
.mact .mx { max-width:0; opacity:0; overflow:hidden; margin-right:-4px; transition:max-width .2s, opacity .2s, margin .2s; }   /* -4px: hidden ones take no gap */
.mclip:hover .mact .mx, .mclip.menu .mact .mx { max-width:22px; opacity:1; margin-right:0; }
.mclip:hover .mmeta strong { text-overflow:clip; }
.mx.del:hover { color:#fb5c7c; }
.abtn:hover { border-color:var(--muted); } .abtn.pri:hover { filter:brightness(1.1); }
.mmenu { position:absolute; z-index:5; width:260px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:5px; box-shadow:0 14px 40px #000b; font-size:12px; }
.mmenu[hidden] { display:none; }
.mmenu button { display:flex; align-items:center; gap:8px; width:100%; padding:6px 8px; border:0; background:none; color:var(--text); font:inherit; border-radius:7px; text-align:left; }
.mmenu button:hover { background:var(--panel2); }
.mmenu button small { margin-left:auto; color:var(--dim); font-size:10.5px; }
.mmenu button.main { font-weight:600; }
.mmenu .chips { display:flex; gap:4px; padding:0 8px 6px; margin:0; justify-content:flex-start; }
.mmenu .chips button { width:auto; padding:2px 8px; border:1px solid var(--line); border-radius:99px; font-size:10.5px; color:var(--muted); }
.mmenu .chips button.on { border-color:rgba(var(--accent-rgb),.6); color:var(--accent2); }
.mmenu hr { border:0; border-top:1px solid var(--line); margin:5px 2px; }
.mmenu p { color:var(--dim); font-size:10px; letter-spacing:.08em; text-transform:uppercase; margin:4px 8px 2px; }
.atoasts { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:flex; flex-direction:column; gap:6px; align-items:center; z-index:6; pointer-events:none; width:max-content; max-width:92%; }
.atoast { pointer-events:auto; background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:9px 12px; box-shadow:0 10px 30px #000a; font-size:12.5px; color:var(--muted); display:flex; gap:10px; align-items:center; opacity:0; transform:translateY(10px); transition:opacity .2s, transform .2s; }
.atoast.on { opacity:1; transform:none; }
.atoast b { color:var(--text); font-weight:600; }
.atoast a { white-space:nowrap; font-weight:600; color:var(--accent2); text-decoration:none; }
.app .amain { position:relative; }

/* "Switching is easy": import from other clippers */
.switch { display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; }
.switch .sub { margin-bottom:22px; }
.ticks { list-style:none; padding:0; margin:0 0 18px; display:grid; gap:12px; }
.ticks li { position:relative; padding-left:30px; color:var(--muted); font-size:15.5px; }
.ticks li b { color:var(--text); }
.ticks li::before { content:"✓"; position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:11.5px; font-weight:700; color:#fff; background:var(--grad); }
.switch .hint { color:var(--dim); font-size:14px; } .switch .hint b { color:var(--muted); font-weight:600; }
.impmock { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:8px 20px 12px; box-shadow:0 24px 60px #0007; font-size:13px; }
.impmock .imt { font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--dim); font-weight:700; padding:12px 0 4px; }
.imr { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #ffffff0d; }
.imr:last-child { border-bottom:0; }
.imr > div { flex:1; min-width:0; } .imr b { display:block; font-weight:600; } .imr small { color:var(--dim); font-size:12px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.imr > span { border:1px solid var(--line); background:var(--panel2); border-radius:9px; padding:6px 14px; font-weight:600; font-size:12.5px; }
.imr.run b { color:var(--accent2); }
.imr i { display:block; height:5px; border-radius:99px; background:var(--panel2); margin-top:8px; overflow:hidden; }
.imr i u { display:block; height:100%; width:62%; background:var(--grad); border-radius:99px; animation:impgo 6s ease-in-out infinite alternate; }
@keyframes impgo { from { width:38%; } to { width:86%; } }
@media (prefers-reduced-motion: reduce) { .imr i u { animation:none; } }
@media (max-width:820px) { .switch { grid-template-columns:1fr; gap:28px; } }

/* first-visit tour (site.js, chat 21) */
.wtinv{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);opacity:0;z-index:80;display:flex;align-items:center;gap:10px;background:var(--panel,#16161a);border:1px solid rgba(124,92,255,.45);border-radius:14px;padding:10px 10px 10px 16px;box-shadow:0 18px 50px #000a;font-size:14px;transition:.3s}
.wtinv.on{opacity:1;transform:translate(-50%,0)}
.wtinv i{font-style:normal;color:var(--muted,#a0a0ab)}
.wtinv button{border:0;border-radius:10px;height:34px;padding:0 14px;font:inherit;font-weight:600;cursor:pointer}
.wtgo{background:linear-gradient(135deg,#8b6cff,#6a4cf5 55%,#4f7bff);color:#fff}
.wtno{background:none;color:var(--muted,#a0a0ab);padding:0 10px!important}
.wtour{position:fixed;inset:0;z-index:90;pointer-events:none}
.wtbub{pointer-events:auto}
.wthole{position:fixed;border-radius:16px;box-shadow:0 0 0 9999px rgba(5,5,8,.78),0 0 0 2px #8b6cff;transition:all .35s ease;pointer-events:none}
.wtbub{position:fixed;width:340px;max-width:calc(100vw - 32px);background:var(--panel,#16161a);border:1px solid var(--line,#26262c);border-radius:16px;padding:16px 18px;box-shadow:0 24px 60px #000c;transition:top .35s,left .35s}
.wtk{display:block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9d85ff;margin-bottom:6px}
.wtbub b{font-size:17px;display:block}
.wtbub p{color:var(--muted,#a0a0ab);font-size:14px;line-height:1.5;margin:6px 0 14px}
.wtbtns{display:flex;gap:8px;align-items:center}.wtn{flex:1;color:var(--muted,#a0a0ab);font-size:12.5px}
.wtbtns button{border:1px solid var(--line,#26262c);border-radius:10px;height:36px;padding:0 14px;font:inherit;font-weight:600;cursor:pointer;background:var(--panel2,#1e1e23);color:inherit}
.wtbtns .wtnext{background:linear-gradient(135deg,#8b6cff,#6a4cf5 55%,#4f7bff);border-color:transparent;color:#fff}

/* hero: switch between the interactive preview and a real screenshot */
.viewsw { display:inline-flex; gap:4px; margin:48px auto 0; padding:4px; background:var(--panel); border:1px solid var(--line); border-radius:999px; }
.viewsw button { font:inherit; font-size:13px; color:var(--muted); background:none; border:0; padding:6px 14px; border-radius:999px; cursor:pointer; }
.viewsw button[aria-selected="true"] { background:rgba(var(--accent-rgb),.16); color:var(--text); }
.viewsw + .realshot, .viewsw ~ .app { margin-top:14px; }
.realshot { display:block; width:100%; max-width:960px; height:auto; margin:14px auto 0; border:1px solid var(--line); border-radius:16px; box-shadow:0 30px 80px #00000080; }
.realshot[hidden], .app[hidden] { display:none; }

/* preview status card + toolbar like the app (chat 28) */
.astat .abar { display:block; height:4px; border-radius:2px; background:var(--panel2); overflow:hidden; margin-top:3px; }
.astat .abar i { display:block; width:6%; height:100%; background:var(--grad); }
.aacct { display:flex; align-items:center; gap:8px; border-top:1px solid var(--line); margin-top:6px; padding-top:8px; }
.aacct > i { width:24px; height:24px; border-radius:50%; background:var(--panel2); color:var(--muted); display:grid; place-items:center; flex:none; } .aacct > i svg { width:12px; height:12px; }
.aacct b { display:block; font-size:11.5px; } .astat .aacct small { display:block; color:var(--accent2); font-size:10.5px; }
.abtn.aico { padding-left:7px; padding-right:7px; }

/* 2.0: measured Echo vs Medal (index.html #light) */
.measure { margin-top:16px; }
.measure table { width:100%; border-collapse:collapse; margin:12px 0 10px; font-size:15px; }
.measure th { text-align:left; color:var(--muted); font-weight:600; font-size:13px; padding:6px 10px; }
.measure td { padding:8px 10px; border-top:1px solid rgba(255,255,255,.08); color:var(--muted); }
.measure tr.us td { color:var(--text); }
.measure tr.us b { color:rgb(var(--accent-rgb)); }
.measure .how { color:var(--muted); font-size:13px; line-height:1.55; }

/* hero: link down to the measured Echo vs Medal table */
.vsmedal { display:flex; width:fit-content; max-width:100%; flex-wrap:wrap; justify-content:center; gap:6px; align-items:center; margin:22px auto 0; padding:9px 18px; border-radius:999px; border:1px solid rgba(var(--accent-rgb),.45); background:rgba(var(--accent-rgb),.12); color:var(--muted); font-size:14.5px; text-decoration:none; position:relative; transition:background .15s, border-color .15s; }
.vsmedal b { color:var(--accent2); }
.vsmedal:hover { background:rgba(var(--accent-rgb),.22); border-color:var(--accent); }
#vs-medal { scroll-margin-top:90px; }