/* Klyr marketing site — matches DESIGN.md tokens. */

@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&family=Geist:wght@400;500;600;700&family=General+Sans:wght@500;600;700&display=swap');

:root {
    --canvas: #0a0a0c;
    --canvas-elev-1: #15151a;
    --canvas-elev-2: #1d1d22;
    --border: #2a2a30;
    --text: #ededf0;
    --text-secondary: #a5a5af;
    --text-tertiary: #6c6c75;
    --accent: #F5C518;
    --success: #4ade80;
    --warning: #fbbf24;
    --danger: #f87171;
    --max: 1180px;
}

* { box-sizing: border-box; }
html, body {
    margin: 0;
    padding: 0;
    background: var(--canvas);
    color: var(--text);
    font-family: 'Geist', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body { line-height: 1.55; }
a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 120ms ease;
}
a:hover { border-bottom-color: var(--accent); }
code, .mono { font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }

/* Layout */
.shell { max-width: var(--max); margin: 0 auto; padding: 0 28px; }
nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 26px 0;
    border-bottom: 1px solid var(--border);
}
nav .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'General Sans', sans-serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.2px;
    color: var(--text);
}
nav .brand img { width: 32px; height: 32px; border-radius: 6px; }
nav ul {
    display: flex;
    gap: 26px;
    list-style: none;
    margin: 0;
    padding: 0;
}
nav ul a {
    color: var(--text-secondary);
    font-size: 14px;
    border-bottom: none;
}
nav ul a:hover { color: var(--text); }
.pro-pill {
    background: var(--accent);
    color: var(--canvas);
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    padding: 3px 6px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
}

/* Hero */
.hero {
    padding: 90px 0 70px;
    text-align: center;
}
.hero h1 {
    font-family: 'General Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(36px, 6vw, 72px);
    line-height: 1.05;
    letter-spacing: -2.5px;
    margin: 0 auto 22px;
    max-width: 820px;
}
.hero h1 .amber { color: var(--accent); }
.hero p.lede {
    font-size: 19px;
    color: var(--text-secondary);
    max-width: 620px;
    margin: 0 auto 32px;
}
.cta-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 8px;
    flex-wrap: wrap;
}
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Geist', sans-serif;
    font-weight: 600;
    font-size: 14px;
    padding: 12px 22px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
}
.btn-primary {
    background: var(--accent);
    color: var(--canvas);
}
.btn-primary:hover { filter: brightness(1.05); border-bottom: 1px solid transparent; }
.btn-secondary {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
}
.btn-secondary:hover { background: var(--canvas-elev-1); border-bottom-color: var(--border); }

/* Features grid */
section { padding: 70px 0; border-top: 1px solid var(--border); }
section h2 {
    font-family: 'General Sans', sans-serif;
    font-weight: 600;
    font-size: 36px;
    letter-spacing: -1px;
    margin: 0 0 12px;
}
section .section-lede {
    color: var(--text-secondary);
    font-size: 17px;
    margin-bottom: 44px;
    max-width: 600px;
}
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
}
.feature {
    background: var(--canvas-elev-1);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 24px;
}
.feature h3 {
    font-family: 'Geist', sans-serif;
    font-weight: 600;
    font-size: 16px;
    margin: 0 0 8px;
}
.feature p {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 0;
}
.feature .arrow { color: var(--accent); margin-right: 8px; font-family: 'Geist Mono', monospace; }

/* Screenshots */
.screens {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
    margin-top: 36px;
}
.screens figure {
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--canvas-elev-1);
}
.screens img { width: 100%; height: auto; display: block; }
.screens figcaption {
    padding: 14px 18px;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Pricing */
.price-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
    margin-top: 30px;
}
.price-card {
    background: var(--canvas-elev-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px;
}
.price-card.pro { border-color: var(--accent); }
.price-card .tier {
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 6px;
}
.price-card.pro .tier { color: var(--accent); }
.price-card h3 {
    font-family: 'General Sans', sans-serif;
    font-size: 28px;
    margin: 0 0 6px;
}
.price-card .price {
    font-family: 'Geist Mono', monospace;
    font-size: 32px;
    color: var(--text);
    margin-bottom: 22px;
}
.price-card .price small { color: var(--text-tertiary); font-size: 14px; }
.price-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}
.price-card ul li {
    padding: 7px 0;
    color: var(--text-secondary);
    font-size: 14px;
    border-bottom: 1px solid var(--border);
}
.price-card ul li::before {
    content: "→ ";
    color: var(--accent);
    font-family: 'Geist Mono', monospace;
}

/* Article (privacy / support copy) */
.article {
    max-width: 720px;
    margin: 0 auto;
    padding: 60px 0;
}
.article h1 {
    font-family: 'General Sans', sans-serif;
    font-size: 48px;
    letter-spacing: -1.5px;
    margin: 0 0 6px;
}
.article .meta {
    color: var(--text-tertiary);
    font-family: 'Geist Mono', monospace;
    font-size: 12px;
    margin-bottom: 40px;
}
.article h2 {
    font-family: 'Geist', sans-serif;
    font-size: 22px;
    font-weight: 600;
    margin-top: 42px;
    margin-bottom: 14px;
}
.article h3 {
    font-family: 'Geist', sans-serif;
    font-size: 16px;
    margin-top: 28px;
    margin-bottom: 10px;
}
.article p, .article li { font-size: 16px; color: var(--text); line-height: 1.7; }
.article p, .article ul, .article ol { margin: 0 0 18px; }
.article ul, .article ol { padding-left: 22px; }
.article ul li { margin-bottom: 6px; }
.article table {
    width: 100%;
    border-collapse: collapse;
    margin: 22px 0;
    font-size: 14px;
}
.article th, .article td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}
.article th { color: var(--text-tertiary); font-weight: 500; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.article code {
    background: var(--canvas-elev-1);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 14px;
    color: var(--accent);
}

/* Footer */
footer {
    border-top: 1px solid var(--border);
    padding: 40px 0 60px;
    color: var(--text-tertiary);
    font-size: 13px;
}
footer .row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}
footer a { color: var(--text-tertiary); border-bottom: none; }
footer a:hover { color: var(--text); }

/* Waitlist */
.waitlist-section {
    background: var(--canvas-elev-1);
    padding: 80px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.waitlist-section.waitlist-page {
    background: transparent;
    padding: 20px 0 60px;
    border: none;
}
.waitlist-shell {
    max-width: 620px;
    text-align: center;
}
.waitlist-shell h2 { font-size: 32px; margin-bottom: 12px; }
.waitlist-shell .section-lede { margin-bottom: 36px; }

.waitlist-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
    text-align: left;
    background: var(--canvas-elev-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
}
.waitlist-form input[type="email"],
.waitlist-form input[type="text"]:not(.hp),
.waitlist-form input[type="tel"] {
    width: 100%;
    padding: 13px 14px;
    font-family: inherit;
    font-size: 15px;
    background: var(--canvas);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: none;
    transition: border-color 120ms ease;
}
.waitlist-form input[type="email"]:focus,
.waitlist-form input[type="text"]:not(.hp):focus,
.waitlist-form input[type="tel"]:focus { border-color: var(--accent); }
.waitlist-form input:disabled { opacity: 0.5; }

.waitlist-form .checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}
.waitlist-form .checkbox input { margin-top: 3px; accent-color: var(--accent); }
.waitlist-form .checkbox input:disabled + span { opacity: 0.5; }

.waitlist-form .btn-primary {
    width: 100%;
    padding: 13px;
    font-size: 15px;
    margin-top: 4px;
}
.waitlist-form .btn-primary:disabled { opacity: 0.6; cursor: wait; }

.form-status {
    margin: 0;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
}
.form-status.success {
    background: rgba(74, 222, 128, 0.10);
    border: 1px solid rgba(74, 222, 128, 0.3);
    color: var(--success);
}
.form-status.error {
    background: rgba(248, 113, 113, 0.10);
    border: 1px solid rgba(248, 113, 113, 0.3);
    color: var(--danger);
}

.waitlist-tiny {
    margin-top: 18px;
    font-size: 12px;
    color: var(--text-tertiary);
    text-align: center;
}
.waitlist-tiny a { color: var(--text-tertiary); border-bottom: 1px solid var(--border); }
.waitlist-tiny a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Honeypot — visually hidden but still focusable for screen-reader
   politeness. Bots filling every input will populate this; the function
   silently 200s any submission where it's non-empty. */
.waitlist-form .hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Product-led landing page */
.landing{--ink:#f6f4ff;--muted:#aaa7ba;--violet:#9d7cff;overflow-x:hidden;background:#09080d}.landing .shell{max-width:1240px}.ambient{position:absolute;z-index:0;pointer-events:none;border-radius:50%}.ambient-one{width:780px;height:780px;left:50%;top:70px;transform:translateX(-50%);background:radial-gradient(circle,rgba(114,75,242,.22),transparent 68%)}.ambient-two{width:520px;height:520px;right:-220px;top:1050px;background:radial-gradient(circle,rgba(42,208,157,.13),transparent 68%)}
.landing-nav{position:relative;z-index:5;height:84px;padding:0 28px;border:0}.landing-nav .brand,.landing-footer .brand{border:0;font-size:23px}.landing-nav .brand img,.landing-footer .brand img{width:38px;height:38px;border-radius:10px;box-shadow:0 8px 28px rgba(82,63,255,.28)}.nav-links{display:flex;gap:32px}.nav-links a{color:#bbb8c8;font-size:14px;border:0}.nav-links a:hover{color:#fff}.nav-cta{color:#0b0910;background:#f4f2fa;padding:10px 17px;border-radius:999px;font-weight:600;font-size:13px;border:0}.nav-cta:hover{border:0;transform:translateY(-1px)}
.landing-hero{position:relative;z-index:1;text-align:center;padding-top:100px}.eyebrow,.kicker{color:#b9a7ff;font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:8px 13px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);border-radius:999px}.pulse{width:7px;height:7px;border-radius:50%;background:#62e6b3;box-shadow:0 0 0 5px rgba(98,230,179,.1)}.landing-hero h1{font-family:'General Sans',sans-serif;font-size:clamp(58px,8.2vw,108px);line-height:.94;letter-spacing:-.065em;margin:28px auto;max-width:1050px}.landing-hero h1 span{background:linear-gradient(105deg,#b89bff 10%,#f0bdff 48%,#7ddfcc 90%);-webkit-background-clip:text;background-clip:text;color:transparent}.landing-hero>p{max-width:660px;margin:0 auto;color:#b1aebe;font-size:19px;line-height:1.6}.hero-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:32px}.btn-large{padding:14px 24px;border-radius:999px;font-size:15px}.landing .btn-primary{background:linear-gradient(135deg,#af91ff,#8766ef);color:#fff;box-shadow:0 12px 40px rgba(132,91,239,.28)}.btn-glass{color:#fff;background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.12);backdrop-filter:blur(12px)}.play{font-size:10px}.hero-note{color:#706d7c;font-size:12px;margin:20px 0 58px}.hero-note span{padding:0 8px}
.hero-product{position:relative;max-width:1060px;margin:0 auto -70px;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:#17151d;padding:34px 9px 9px;box-shadow:0 50px 120px rgba(0,0,0,.55),0 0 0 7px rgba(255,255,255,.025)}.hero-product>img{display:block;width:100%;border-radius:10px}.product-glow{position:absolute;inset:-20%;z-index:-1;background:radial-gradient(circle,rgba(132,93,242,.25),transparent 58%)}.window-bar{position:absolute;height:34px;top:0;left:0;right:0;display:flex;align-items:center;gap:7px;padding:0 13px}.window-bar span{width:9px;height:9px;border-radius:50%;background:#44414a}.window-bar b{position:absolute;left:50%;transform:translateX(-50%);color:#817e89;font-size:11px;font-weight:500}.floating-card{position:absolute;display:flex;align-items:center;gap:11px;text-align:left;background:rgba(30,28,38,.88);border:1px solid rgba(255,255,255,.13);padding:13px 16px;border-radius:14px;box-shadow:0 18px 45px rgba(0,0,0,.4);backdrop-filter:blur(16px)}.floating-card i{font-style:normal;display:grid;place-items:center;width:29px;height:29px;border-radius:9px;color:#62e6b3;background:rgba(98,230,179,.12)}.floating-card strong,.floating-card small{display:block}.floating-card strong{font-size:12px}.floating-card small{color:#8d8998;font-size:10px;margin-top:2px}.floating-left{left:-48px;bottom:70px}.floating-right{right:-38px;top:110px}
.proof-strip{position:relative;padding:145px 0 70px;border:0;background:#111016}.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.proof-grid>div{min-height:104px;padding:18px 24px;border-left:1px solid #2d2a35;display:flex;flex-direction:column;justify-content:center}.proof-grid strong{font-size:30px;letter-spacing:-.04em}.proof-grid span{color:#817e8b;font-size:12px}.proof-text .apple{color:#b99dff;font-size:18px}.proof-text strong{font-size:16px;margin:3px 0}
.story-section{padding-top:150px}.section-heading h2{font-family:'General Sans',sans-serif;font-size:clamp(42px,5vw,70px);line-height:1.02;letter-spacing:-.055em;margin:14px 0 18px}.section-heading>p{color:var(--muted);max-width:580px;font-size:17px}.section-heading.centered{text-align:center}.section-heading.centered>p{margin-left:auto;margin-right:auto}.story-row{display:grid;grid-template-columns:.78fr 1.22fr;gap:74px;align-items:center;padding:115px 0}.story-row.reverse{grid-template-columns:1.22fr .78fr}.story-row.reverse .story-copy{order:2}.story-row.reverse .story-visual{order:1}.story-number{color:#746f80;font:12px 'Geist Mono',monospace}.story-copy h3{font-family:'General Sans',sans-serif;font-size:clamp(34px,4vw,52px);line-height:1.05;letter-spacing:-.045em;margin:18px 0}.story-copy>p{color:var(--muted);font-size:17px}.check-list{list-style:none;padding:0;margin:28px 0 0}.check-list li{padding:8px 0;color:#d7d4de;font-size:14px}.check-list li:before{content:'✓';color:#61dfae;margin-right:10px}.story-visual{border-radius:28px;padding:40px;min-width:0;overflow:hidden;position:relative}.story-visual img{width:110%;display:block;border-radius:12px;box-shadow:0 28px 60px rgba(0,0,0,.45)}.purple-card{background:radial-gradient(circle at 20% 10%,#7157b8,#262033 68%)}.gold-card{background:radial-gradient(circle at 80% 10%,#9b752a,#30281b 65%)}.gold-card img{margin-left:-10%}
.feature-pills{display:inline-flex;gap:4px;margin-top:22px;padding:4px;background:#1a181f;border:1px solid #292630;border-radius:9px}.feature-pills span{padding:7px 14px;color:#76717f;font-size:12px}.feature-pills .active{background:#9c7cff;color:#fff;border-radius:6px}.insight-card{background:linear-gradient(145deg,#18171e,#22202a);border:1px solid #2e2b36;padding:34px}.mini-chart-head{display:flex;justify-content:space-between;align-items:flex-start}.mini-chart-head small,.mini-chart-head strong{display:block}.mini-chart-head small{color:#777280;font:10px 'Geist Mono';letter-spacing:.12em}.mini-chart-head strong{font-size:28px;margin-top:6px}.mini-chart-head b{color:#827d8b;font-size:11px}.trend-chart{width:100%;margin-top:18px;overflow:visible}.trend-chart .grid{stroke:#32303a;stroke-width:1}.trend-chart .area{fill:url(#area)}.trend-chart .line{fill:none;stroke:#58e6b0;stroke-width:4;stroke-linecap:round}.trend-chart .points circle{fill:#15141a;stroke:#58e6b0;stroke-width:4}
.safety-band{background:#eeeaf8;color:#17131e;padding:130px 0;border:0}.safety-band .kicker{color:#7556c3}.safety-band .section-heading p{color:#625d69}.safety-layout{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}.text-link{display:inline-block;color:#6845c0;margin-top:14px;font-weight:600}.safety-stack{display:flex;flex-direction:column;gap:12px}.safety-item{display:flex;gap:20px;padding:24px;background:rgba(255,255,255,.62);border:1px solid rgba(60,45,80,.09);border-radius:16px}.safety-item>span{color:#8266ce;font:11px 'Geist Mono'}.safety-item strong{font-size:16px}.safety-item p{color:#6c6672;margin:5px 0 0;font-size:13px}
.pricing-section{padding-top:140px;padding-bottom:140px}.new-price-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:980px;margin:65px auto 0}.new-price-card{position:relative;padding:36px;border-radius:22px;background:#15141a;border:1px solid #292730}.new-price-card.featured{background:linear-gradient(145deg,#211b30,#16141b);border-color:#765db4;box-shadow:0 25px 80px rgba(97,65,167,.16)}.best-value{position:absolute;top:-13px;right:24px;padding:6px 10px;border-radius:99px;background:#a383f7;color:#fff;font:9px 'Geist Mono';letter-spacing:.08em}.price-top{display:flex;justify-content:space-between;gap:18px;align-items:start}.price-top span{color:#8f8a98;font:10px 'Geist Mono';letter-spacing:.12em}.price-top h3{font-size:23px;margin:6px 0 0}.new-price{font-size:28px;font-weight:600}.new-price-card>p{color:#938e9d;font-size:14px}.new-price-card ul{list-style:none;padding:15px 0;min-height:230px}.new-price-card li{color:#c2beca;padding:9px 0;border-bottom:1px solid #292630;font-size:13px}.new-price-card li:before{content:'✓';color:#7fe2ba;margin-right:10px}.btn-light{background:#f0edf5;color:#111}.new-price-card .btn{justify-content:center;width:100%}
.faq-section{padding:120px 28px;border-top:1px solid #201e26}.faq-grid{max-width:840px;margin:55px auto 0}.faq-grid details{border-bottom:1px solid #2c2933;padding:23px 4px}.faq-grid summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;font-size:17px;font-weight:500}.faq-grid summary::-webkit-details-marker{display:none}.faq-grid summary span{color:#9f82ea}.faq-grid details p{max-width:680px;color:#9893a2;margin:15px 0 0}.final-cta{padding:130px 0;text-align:center;border:0;background:radial-gradient(circle at 50% 30%,#40316b,#19151f 52%,#0e0c12 85%)}.cta-icon{width:72px;height:72px;border-radius:18px;margin-bottom:26px;box-shadow:0 20px 60px rgba(0,0,0,.4)}.final-cta h2{font-family:'General Sans';font-size:clamp(52px,7vw,86px);line-height:.98;letter-spacing:-.06em;margin:15px 0 20px}.final-cta p{color:#aca6b5}.btn-outline{color:#fff;border:1px solid rgba(255,255,255,.25)}
.landing-footer{padding:55px 0 30px;background:#09080d}.footer-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:45px}.footer-top p{color:#77727f}.footer-bottom{border-top:1px solid #211f26;padding-top:24px;display:flex;justify-content:space-between;color:#625e69;font-size:12px}.footer-bottom div{display:flex;gap:24px}
@media(max-width:900px){.nav-links{display:none}.floating-card{display:none}.proof-grid{grid-template-columns:1fr 1fr}.story-row,.story-row.reverse,.safety-layout{grid-template-columns:1fr;gap:42px}.story-row.reverse .story-copy{order:1}.story-row.reverse .story-visual{order:2}.new-price-grid{grid-template-columns:1fr}.story-row{padding:75px 0}}
@media(max-width:600px){.landing-nav{padding:0 18px}.landing-hero{padding-top:70px}.landing-hero h1{font-size:54px}.landing-hero>p{font-size:16px}.hero-product{margin-bottom:-35px;border-radius:12px;padding:25px 5px 5px}.proof-strip{padding-top:100px}.proof-grid{grid-template-columns:1fr 1fr}.proof-grid>div{padding:12px}.story-section{padding-top:95px}.story-visual{padding:18px;border-radius:18px}.safety-band{padding:90px 0}.new-price-card{padding:26px}.price-top{flex-direction:column}.footer-top,.footer-bottom{align-items:flex-start;flex-direction:column;gap:18px}.footer-bottom div{flex-wrap:wrap}.nav-cta{font-size:0}.nav-cta span{font-size:14px}}