/* Charting Desk landing page (Kaolin). Tokens come from the approved Kaolin theme. No web fonts, no
   gradients, no blur, no scroll animation. Motion is limited to hover states, the demo search and quiet price flashes. */
:root {
  color-scheme: light;
  --bg: #f7f8fa; --chrome: #eff1f4; --raised: #ffffff; --hover: #e6e9ee; --sel: rgba(37, 99, 200, .10);
  --line: #dfe3e9; --line-2: #cdd3dc; --fg: #1a1f27; --fg-2: #525c6a; --fg-3: #616975;
  --accent: #2563c8; --on-accent: #ffffff; --up: #1a7552; --down: #b6403d; --kbd: #e9ecf0;
  --c-up: #238a61; --c-dn: #c24845; --ind-1: #b37a1a; --ind-2: #2f78b7;
  --frame-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 40px 80px -40px rgba(30, 36, 48, .30), 0 12px 24px -16px rgba(30, 36, 48, .14);
  --pop-shadow: 0 28px 60px -24px rgba(30, 30, 40, .28), 0 2px 6px rgba(30, 30, 40, .06);
  --font: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1160px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16.5px/1.65 var(--font); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.skip { position: absolute; inset-inline-start: 12px; top: -48px; z-index: 50; background: var(--raised); color: var(--fg); padding: 8px 14px; border-radius: 6px; border: 1px solid var(--line-2); }
.skip:focus { top: 12px; }
.up { color: var(--up); } .dn { color: var(--down); }
kbd { font: 500 11.5px var(--font); color: var(--fg-2); background: var(--kbd); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; padding: 0 6px; }

/* Brand mark (theme-aware: follows currentColor) */
.mark { display: block; color: var(--fg); flex: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15.5px; letter-spacing: -.012em; white-space: nowrap; }

/* Market strip (sample data) */
.tape { border-bottom: 1px solid var(--line); background: var(--chrome); }
.tape .wrap { display: flex; align-items: center; height: 34px; }
.tape .quotes { display: flex; flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
.tape .q { display: flex; gap: 9px; align-items: center; padding-block: 0; padding-inline: 16px; height: 34px; white-space: nowrap; font-size: 12.5px; border-inline-end: 1px solid var(--line); }
.tape .q:first-child { padding-inline-start: 0; }
.tape .s { font-weight: 600; } .tape .p { color: var(--fg-2); }
.tape .sample { flex: none; font-size: 12px; color: var(--fg-3); padding-inline-start: 16px; }
@keyframes flashUp { from { background: color-mix(in srgb, var(--up) 16%, transparent); } }
@keyframes flashDn { from { background: color-mix(in srgb, var(--down) 16%, transparent); } }
.fu { animation: flashUp 900ms cubic-bezier(.2, .8, .2, 1); } .fd { animation: flashDn 900ms cubic-bezier(.2, .8, .2, 1); }

/* Header */
.head { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid transparent; transition: border-color 80ms linear, background-color 80ms linear; }
.head.scrolled { background: var(--chrome); border-color: var(--line); }
.nav { height: 66px; display: flex; align-items: center; gap: 30px; }
.links { display: flex; gap: 26px; font-size: 14.5px; color: var(--fg-2); }
.links a:hover, .signin:hover { color: var(--fg); }
.grow { flex: 1; }
.signin { font-size: 14.5px; color: var(--fg-2); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: 999px; font: 600 15px var(--font); border: 1px solid transparent; transition: filter 80ms linear, background-color 80ms linear; white-space: nowrap; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { filter: brightness(.95); }
.btn-ghost { border-color: var(--line-2); color: var(--fg); background: var(--raised); }
.btn-ghost:hover { background: var(--hover); }
.btn-sm { height: 36px; padding: 0 16px; font-size: 14px; }

/* Hero */
.hero { display: grid; grid-template-columns: 1.02fr 1fr; gap: 64px; align-items: center; padding-top: 88px; padding-bottom: 72px; }
.over { font-size: 14px; color: var(--fg-3); margin: 0 0 18px; }
h1 { font-size: clamp(38px, 4.8vw, 60px); line-height: 1.02; letter-spacing: -.035em; font-weight: 600; margin: 0; }
.lede { font-size: 19px; color: var(--fg-2); max-width: 600px; margin: 24px 0 0; }
.ctas { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.fine { font-size: 13.5px; color: var(--fg-3); margin: 18px 0 0; }

/* Animated symbol search */
.search { background: var(--raised); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--pop-shadow); overflow: hidden; }
.search .in { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 18px; border-bottom: 1px solid var(--line); font-size: 16.5px; }
.search .in svg { color: var(--fg-3); flex: none; }
.search .in .q { flex: 1; }
.search .caret { display: inline-block; width: 1.5px; height: 19px; background: var(--accent); vertical-align: -4px; margin-inline-start: 1px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.search .res { height: 192px; overflow: hidden; }
.search .gl { font-size: 12px; font-weight: 600; color: var(--fg-3); padding-block: 10px 4px; padding-inline: 18px; letter-spacing: .01em; }
.search .r { display: grid; grid-template-columns: 84px 1fr 88px 66px; align-items: center; height: 38px; padding: 0 18px; font-size: 14px; }
.search .r .s { font-weight: 600; } .search .r mark { background: none; color: var(--accent); }
.search .r .n { color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-inline-end: 10px; }
.search .r .v { display: none; }
.search .r .p, .search .r .c { text-align: end; }
.search .r.act { background: var(--sel); box-shadow: inset 2px 0 0 var(--accent); }
.search .ft { display: flex; gap: 18px; align-items: center; padding: 11px 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--fg-3); }
.search .ft .cnt { margin-inline-start: auto; }

/* Product on the table */
.table { background: var(--chrome); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 64px 0 36px; }
.frame { border-radius: 12px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--frame-shadow); background: var(--raised); }
.frame .bar { height: 30px; display: flex; align-items: center; gap: 7px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.frame .bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.frame .bar span { margin-inline-start: 12px; font-size: 12px; color: var(--fg-3); }
.frame img { width: 100%; aspect-ratio: 1440 / 900; }

/* Sections */
section.block { padding-top: 128px; }
/* Review tweak: 20% less space above What it does / Why it exists / Pricing / Questions. */
#about, #product, #why, #pricing, #faq { padding-top: calc(128px * 0.8); }
.center { text-align: center; }
.kick { font-size: 14px; color: var(--accent); font-weight: 600; margin: 0 0 12px; }
h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -.03em; margin: 0; font-weight: 600; }
.sub { color: var(--fg-2); font-size: 18px; margin: 16px auto 0; max-width: 620px; }
.feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.feat article { background: var(--raised); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.feat canvas { display: block; width: 100%; height: 186px; background: var(--bg); border-bottom: 1px solid var(--line); }
.feat .b { padding: 22px 24px 26px; }
.feat h3 { font-size: 18px; margin: 0 0 6px; font-weight: 600; letter-spacing: -.01em; }
.feat p { margin: 0 0 14px; color: var(--fg-2); font-size: 15px; }
.feat ul { margin: 0; padding: 0; list-style: none; font-size: 14.5px; }
.feat li { padding: 7px 0; border-top: 1px solid var(--line); }
.learn { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 30px; border-radius: 12px; background: var(--chrome); border: 1px solid var(--line); flex-wrap: wrap; }
.learn h3 { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
.learn p { margin: 0; color: var(--fg-2); max-width: 700px; }

.letter { max-width: 680px; margin: 0 auto; }
.letter p { font-size: 19px; line-height: 1.65; color: var(--fg-2); margin: 0 0 20px; }
.letter p.first { font-size: 24px; line-height: 1.5; color: var(--fg); letter-spacing: -.01em; }
.principles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: calc(56px * 1.2); }
.principles > div { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 26px; border-radius: 12px; border: 1px solid var(--line); background: var(--raised); }
.principles svg { color: var(--accent); }
.principles h3 { font-size: 17px; margin: 0 0 4px; font-weight: 600; }
.principles p { margin: 0; color: var(--fg-2); font-size: 15px; }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; align-items: stretch; }
.plan { display: flex; flex-direction: column; padding: 30px; border-radius: 12px; border: 1px solid var(--line); background: var(--raised); }
.plan.patron { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--pop-shadow); }
.plan h3 { font-size: 16px; font-weight: 600; margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.price { display: flex; align-items: baseline; gap: 8px; margin: 20px 0 6px; }
.price b { font-size: 44px; letter-spacing: -.035em; font-weight: 600; line-height: 1; }
.price span { color: var(--fg-3); font-size: 14.5px; }
.plan .d { color: var(--fg-2); font-size: 15px; margin: 0 0 22px; }
.plan ul { list-style: none; margin: 0 0 28px; padding: 0; flex: 1; font-size: 14.5px; }
.plan li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; padding: 6px 0; }
.plan li svg { color: var(--up); margin-top: 5px; }
.plan li.inh { display: block; color: var(--fg-3); font-size: 13.5px; }
.plan .note { font-size: 13px; color: var(--fg-3); margin: -12px 0 18px; }
.plan .btn { width: 100%; }
.seg { display: inline-flex; background: var(--chrome); border-radius: 999px; padding: 3px; border: 1px solid var(--line); }
.seg button { border: 0; background: transparent; color: var(--fg-2); font: 500 12.5px var(--font); padding: 4px 11px; border-radius: 999px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--raised); color: var(--fg); box-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
[data-bill="month"] .y, [data-bill="year"] .m { display: none !important; }

.faq { max-width: 760px; margin: 48px auto 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 4px; font-size: 17px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { color: var(--fg-3); flex: none; transition: transform 140ms cubic-bezier(.2, .8, .2, 1); }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq p { margin: 0 4px 22px; color: var(--fg-2); }

.closing { margin-top: 128px; text-align: center; padding: 96px 0; background: var(--chrome); border-top: 1px solid var(--line); }
.closing h2 { font-size: clamp(32px, 4vw, 52px); line-height: 1.05; }
.closing p { color: var(--fg-2); margin: 16px 0 30px; font-size: 18px; }
.foot { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; padding: 48px 28px 32px; font-size: 14px; color: var(--fg-2); }
.foot .brand { color: var(--fg); }
.foot .tag { margin: 12px 0 0; color: var(--fg-3); max-width: 320px; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.foot h2 { margin: 0 0 12px; font-size: 13px; color: var(--fg-3); font-weight: 600; letter-spacing: 0; line-height: 1.4; }
.foot a:hover { color: var(--fg); }
.langs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--fg-3); border-top: 1px solid var(--line); padding-top: 18px; }
.langs a[aria-current="page"] { color: var(--fg); font-weight: 600; }
.legal { grid-column: 1 / -1; font-size: 13px; color: var(--fg-3); margin: 0; padding-bottom: 24px; }

/* RTL: flip the few values logical properties cannot express. */
[dir="rtl"] .tape .quotes { -webkit-mask-image: linear-gradient(270deg, #000 90%, transparent); mask-image: linear-gradient(270deg, #000 90%, transparent); }
[dir="rtl"] .search .r.act { box-shadow: inset -2px 0 0 var(--accent); }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 64px; }
  .feat, .plans, .principles { grid-template-columns: 1fr; }
  .links { display: none; }
  .foot { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 20px; }
  .signin { display: none; }
  .search .r { grid-template-columns: 80px 1fr 64px; } .search .r .n { display: none; }
  .search .ft span:nth-child(2) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-iteration-count: 1 !important; }
}