/* Tierux — shared design system + theme layer. The token NAMES below are the canonical contract every marketing page (and the inline styles in index.html) consume. :root holds the default theme (ember-dark); each [data-theme="…"] block re-skins the whole site by overriding the same names. Apply a theme with etc. Themes: ember-dark (default) · agent-console · paper-docs · daylight · midnight-violet · editorial-cream */ :root{ /* surfaces (900 = page bg → 700 = raised) */ --ink-900:#0b0e14; --ink-850:#0d1119; --ink-800:#11161f; --ink-750:#161c27; --ink-700:#1b2230; --inset:rgba(255,255,255,.06); /* lines */ --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --line-3:rgba(255,255,255,.2); /* text */ --text-hi:#f4f6fa; --text:#b6bfcc; --text-lo:#8e99ab; --text-faint:#758092; /* primary accent */ --accent:#ff5e00; --accent-2:#ff9c66; --accent-ink:#331200; --accent-text:var(--accent); --accent-glow:rgba(255,94,0,.10); --accent-line:rgba(255,94,0,.28); /* secondary / data accent (gold) */ --violet:#ffd166; --violet-2:#ffe8b3; --violet-glow:rgba(255,209,102,.10); --violet-text:var(--violet); --grad-from:var(--accent); --grad-to:var(--violet); /* semantic */ --ok:#4fe5a3; --warn:#f4c14e; --danger:#f26d7d; /* buttons */ --btn-bg:rgba(255,255,255,.04); --btn-bg-hover:rgba(255,255,255,.08); --btn-primary-bg:var(--accent); --btn-primary-fg:var(--accent-ink); /* page atmosphere */ --page-glow:radial-gradient(820px 520px at -6% -10%,var(--accent-glow),transparent 60%); /* radii */ --r-xs:5px; --r-sm:8px; --r:11px; --r-lg:15px; /* shadow */ --shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px -24px rgba(0,0,0,.8); --shadow-pop:0 1px 0 rgba(255,255,255,.05) inset,0 30px 70px -28px rgba(0,0,0,.85); /* type */ --sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif; --display:"Bricolage Grotesque",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,"SF Mono","Fira Code",monospace; } /* B · agent-console — all-mono, square, green */ [data-theme="agent-console"]{ --ink-900:#0a0d0b; --ink-850:#0c100d; --ink-800:#0f1411; --ink-750:#131a15; --ink-700:#182019; --inset:rgba(214,255,231,.08); --line:rgba(214,255,231,.13); --line-2:rgba(214,255,231,.22); --line-3:rgba(214,255,231,.3); --text-hi:#e8f2ec; --text:#b9c8bf; --text-lo:#7d9186; --text-faint:#6d8276; --accent:#4fe5a3; --accent-2:#7ff0bd; --accent-ink:#06231a; --accent-text:var(--accent); --accent-glow:rgba(79,229,163,.10); --accent-line:rgba(79,229,163,.3); --violet:#ffd166; --violet-2:#ffe8b3; --violet-glow:rgba(79,229,163,.08); --violet-text:var(--violet); --btn-bg:rgba(214,255,231,.05); --btn-bg-hover:rgba(214,255,231,.09); --page-glow:none; --r-xs:2px; --r-sm:3px; --r:3px; --r-lg:4px; --sans:var(--mono); --display:var(--mono); } /* C · paper-docs — warm light reading surface */ [data-theme="paper-docs"]{ --ink-900:#faf9f7; --ink-850:#f4f1ea; --ink-800:#ffffff; --ink-750:#f0ece3; --ink-700:#e9e4da; --inset:rgba(20,24,33,.05); --line:#e8e4dc; --line-2:#d9d4c9; --line-3:#c8c2b4; --text-hi:#1d2433; --text:#3f4a5c; --text-lo:#66707f; --text-faint:#6a7283; --accent:#ff5e00; --accent-2:#c05000; --accent-ink:#331200; --accent-text:#c74900; --accent-glow:rgba(255,94,0,.06); --accent-line:#ffd9bd; --violet:#b8860b; --violet-2:#8a6508; --violet-glow:rgba(184,134,11,.05); --violet-text:#8f680a; --grad-from:var(--accent-text); --grad-to:var(--violet-text); --ok:#0f8a5f; --warn:#b8860b; --danger:#c0392b; --btn-bg:#ffffff; --btn-bg-hover:#f4f1ea; --btn-primary-bg:var(--accent); --btn-primary-fg:var(--accent-ink); --page-glow:none; --shadow:0 1px 2px rgba(20,24,33,.04),0 8px 24px -16px rgba(20,24,33,.12); --shadow-pop:0 2px 6px rgba(20,24,33,.06),0 20px 50px -24px rgba(20,24,33,.18); } /* D · daylight — cooler full light-mode */ [data-theme="daylight"]{ --ink-900:#fdfcfa; --ink-850:#f6f4ef; --ink-800:#ffffff; --ink-750:#f1eee8; --ink-700:#eae6de; --inset:rgba(22,32,46,.05); --line:#e9e5dd; --line-2:#d9d4c9; --line-3:#c6bfb0; --text-hi:#16202e; --text:#414c5e; --text-lo:#66707f; --text-faint:#6c7486; --accent:#ff5e00; --accent-2:#c05000; --accent-ink:#331200; --accent-text:#c74900; --accent-glow:rgba(255,94,0,.06); --accent-line:#ffd9bd; --violet:#b8860b; --violet-2:#8a6508; --violet-glow:rgba(184,134,11,.05); --violet-text:#966d09; --grad-from:var(--accent-text); --grad-to:var(--violet-text); --ok:#0f8a5f; --warn:#b8860b; --danger:#c0392b; --btn-bg:#ffffff; --btn-bg-hover:#f6f4ef; --btn-primary-bg:var(--accent); --btn-primary-fg:var(--accent-ink); --page-glow:none; --shadow:0 1px 2px rgba(20,24,33,.05),0 8px 24px -16px rgba(20,24,33,.1); --shadow-pop:0 2px 6px rgba(20,24,33,.07),0 20px 50px -24px rgba(20,24,33,.16); } /* E · midnight-violet — dark, violet accent, rounder */ [data-theme="midnight-violet"]{ --ink-900:#0c0b14; --ink-850:#100e1a; --ink-800:#14131f; --ink-750:#1a1828; --ink-700:#201d30; --inset:rgba(197,187,255,.08); --line:rgba(197,187,255,.10); --line-2:rgba(197,187,255,.18); --line-3:rgba(197,187,255,.26); --text-hi:#eceaf6; --text:#b5b0cc; --text-lo:#8d87a8; --text-faint:#817c9e; --accent:#8b7cf7; --accent-2:#b3a8ff; --accent-ink:#171040; --accent-text:var(--accent); --accent-glow:rgba(139,124,247,.16); --accent-line:rgba(139,124,247,.3); --violet:#5eead4; --violet-2:#99f6e4; --violet-glow:rgba(94,234,212,.10); --violet-text:var(--violet); --btn-bg:rgba(197,187,255,.05); --btn-bg-hover:rgba(197,187,255,.10); --page-glow:radial-gradient(620px 420px at 12% -6%,rgba(139,124,247,.16),transparent 62%); --r:12px; --r-lg:16px; } /* F · editorial-cream — big type, hairline grid, ink buttons */ [data-theme="editorial-cream"]{ --ink-900:#f5f1e8; --ink-850:#efe9dc; --ink-800:#f5f1e8; --ink-750:#eae3d4; --ink-700:#e2dac9; --inset:rgba(23,21,18,.06); --line:#d8d2c4; --line-2:#c2bbaa; --line-3:#a89f8c; --text-hi:#171512; --text:#45403a; --text-lo:#726b63; --text-faint:#766d61; --accent:#e04f00; --accent-2:#b84100; --accent-ink:var(--text-hi); --accent-text:#c14400; --accent-glow:transparent; --accent-line:var(--text-hi); --violet:#b8860b; --violet-2:#8a6508; --violet-glow:transparent; --violet-text:#8d6608; --grad-from:var(--accent-text); --grad-to:var(--violet-text); --ok:#1d7a4f; --warn:#b8860b; --danger:#b23b2e; --btn-bg:transparent; --btn-bg-hover:#efe9dc; --btn-primary-bg:var(--text-hi); --btn-primary-fg:var(--ink-900); --page-glow:none; --r-xs:0; --r-sm:0; --r:0; --r-lg:0; --shadow:none; --shadow-pop:none; } *{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{font-family:var(--sans);color:var(--text);background:var(--ink-900);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.5;} body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--page-glow);} ::selection{background:var(--accent-line);color:var(--text-hi);} a{color:inherit;} .wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 36px;} .narrow{max-width:880px;} /* nav */ .site-nav{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:24px 36px;display:flex;align-items:center;justify-content:space-between;gap:16px;} .brand{display:flex;align-items:center;gap:10px;text-decoration:none;} .logo{width:32px;height:32px;border-radius:9px;background:linear-gradient(150deg,var(--accent),var(--violet) 70%);display:grid;place-items:center;box-shadow:0 6px 18px -6px var(--accent-glow),0 0 0 1px rgba(255,255,255,.12) inset;flex:none;} .logo svg{width:15px;height:15px;} .brand-name{font-size:15px;font-weight:700;color:var(--text-hi);letter-spacing:-.01em;} .brand-sub{font-family:var(--mono);font-size:9px;color:var(--text-faint);letter-spacing:.08em;text-transform:uppercase;margin-top:1px;} .nav-links{display:flex;align-items:center;gap:22px;} .nav-links a{font-size:13.5px;color:var(--text-lo);text-decoration:none;transition:color .15s;} .nav-links a:hover,.nav-links a.on{color:var(--text-hi);} @media(max-width:680px){.nav-links .hide-sm{display:none;}} /* buttons */ .btn{font-family:var(--sans);font-size:13.5px;font-weight:600;cursor:pointer;border-radius:var(--r-sm);padding:10px 18px;border:1px solid var(--line-2);background:var(--btn-bg);color:var(--text);display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:all .15s;white-space:nowrap;text-decoration:none;} .btn:hover{background:var(--btn-bg-hover);border-color:var(--line-3);color:var(--text-hi);} .btn.primary{background:var(--btn-primary-bg);color:var(--btn-primary-fg);border-color:transparent;box-shadow:0 8px 20px -12px var(--accent-glow);} .btn.primary:hover{filter:brightness(1.06);} .btn.lg{padding:13px 24px;font-size:15px;} .btn.sm{padding:7px 13px;font-size:12.5px;} /* page header */ .page-head{position:relative;z-index:1;text-align:center;padding:54px 0 14px;} .eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);background:var(--accent-glow);border:1px solid var(--accent-line);border-radius:20px;padding:5px 13px;margin-bottom:18px;} .page-head h1{font-family:var(--display);font-size:40px;line-height:1.06;font-weight:800;letter-spacing:-.03em;color:var(--text-hi);margin-bottom:14px;} .page-head h1 .grad{background:linear-gradient(120deg,var(--grad-from),var(--grad-to));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} .page-head p{font-size:16px;color:var(--text-lo);max-width:620px;margin:0 auto;line-height:1.6;} .sec-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);text-align:center;margin:48px 0 22px;} @media(max-width:560px){.page-head h1{font-size:30px;}} /* pricing */ .pricing-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;align-items:start;} .price-card{background:var(--ink-800);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow);} .price-card.feat{border-color:var(--accent-line);box-shadow:0 0 0 1px var(--accent-line),var(--shadow);} .price-card .pc-tag{align-self:flex-start;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);background:var(--accent-glow);border:1px solid var(--accent-line);border-radius:20px;padding:3px 9px;} .price-card .pc-name{font-size:17px;font-weight:700;color:var(--text-hi);} .price-card .pc-price{font-size:38px;font-weight:800;color:var(--text-hi);letter-spacing:-.03em;line-height:1;font-family:var(--display);} .price-card .pc-price span{font-size:14px;font-weight:500;color:var(--text-faint);font-family:var(--sans);} .price-card .pc-desc{font-size:13px;color:var(--text-lo);line-height:1.5;min-height:38px;} .price-card ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:4px;} .price-card li{display:flex;gap:9px;font-size:13px;color:var(--text);line-height:1.4;} .price-card li svg{width:16px;height:16px;color:var(--accent-text);flex:none;margin-top:1px;} /* generic feature/info cards */ .card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;} .info-card{background:var(--ink-800);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow);} .info-card h3{font-size:15.5px;font-weight:700;color:var(--text-hi);margin-bottom:7px;} .info-card p{font-size:13.5px;color:var(--text-lo);line-height:1.55;} /* code blocks (docs) */ .code{position:relative;background:var(--ink-800);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:16px 18px;margin:12px 0;overflow-x:auto;} .code pre{font-family:var(--mono);font-size:12.5px;line-height:1.7;color:var(--text-hi);margin:0;white-space:pre;} .code .c{color:var(--text-faint);} .code .k{color:var(--accent-text);} .code .s{color:var(--ok);} .doc-step{display:flex;gap:16px;padding:20px 0;border-top:1px solid var(--line);} .doc-step:first-of-type{border-top:none;} .doc-step .num{width:32px;height:32px;border-radius:9px;background:var(--accent-glow);border:1px solid var(--accent-line);display:grid;place-items:center;font-family:var(--mono);font-weight:700;color:var(--accent-text);flex:none;} .doc-step .body{flex:1;min-width:0;} .doc-step h3{font-size:16px;font-weight:700;color:var(--text-hi);margin-bottom:5px;} .doc-step p{font-size:13.5px;color:var(--text-lo);line-height:1.55;} .doc-step code{font-family:var(--mono);font-size:12px;background:var(--inset);padding:1px 5px;border-radius:4px;color:var(--accent-2);} /* comparison table */ .cmp{position:relative;z-index:1;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--ink-800);} .cmp table{width:100%;border-collapse:collapse;font-size:13.5px;} .cmp th,.cmp td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;} .cmp thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);background:var(--ink-850);} .cmp thead th.us{color:var(--accent-text);} .cmp tbody tr:last-child td{border-bottom:none;} .cmp td:first-child{color:var(--text-hi);font-weight:600;width:38%;} .cmp .yes{color:var(--ok);} .cmp .no{color:var(--text-faint);} .cmp .partial{color:var(--warn);} /* non-color status cue (WCAG 1.4.1): a shape prefix so yes/no/partial read without relying on colour */ .cmp .yes::before{content:"\2713\00a0";font-weight:700;} .cmp .no::before{content:"\2715\00a0";font-weight:700;} .cmp .partial::before{content:"~\00a0";font-weight:700;} .cmp-note{font-size:11.5px;color:var(--text-faint);margin-top:12px;text-align:center;} @media(max-width:620px){.cmp{overflow-x:auto;}.cmp table{font-size:12px;}.cmp th,.cmp td{padding:11px 12px;}} /* CTA band + footer */ .cta-band{position:relative;z-index:1;margin:56px 0 0;text-align:center;background:linear-gradient(135deg,var(--accent-glow),transparent 70%);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:40px 24px;} .cta-band h2{font-family:var(--display);font-size:26px;font-weight:700;color:var(--text-hi);letter-spacing:-.02em;margin-bottom:8px;} .cta-band p{font-size:14px;color:var(--text-lo);margin-bottom:22px;} .site-footer{position:relative;z-index:1;border-top:1px solid var(--line);margin-top:60px;padding:22px 36px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:1080px;margin-left:auto;margin-right:auto;} .site-footer-copy{font-size:12px;color:var(--text-faint);} .site-footer-links{display:flex;gap:14px 20px;flex-wrap:wrap;} .site-footer-links a{font-size:12px;color:var(--text-lo);text-decoration:none;transition:color .15s;} .site-footer-links a:hover{color:var(--text-hi);} .faq details{border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--ink-800);margin-bottom:8px;} .faq summary{padding:14px 16px;cursor:pointer;font-size:14px;font-weight:600;color:var(--text-hi);list-style:none;display:flex;justify-content:space-between;align-items:center;} .faq summary::-webkit-details-marker{display:none;} .faq summary::after{content:"+";color:var(--text-faint);font-size:18px;} .faq details[open] summary::after{content:"–";} .faq .fa{padding:0 16px 14px;font-size:13.5px;color:var(--text-lo);line-height:1.6;}