/* try.ekron.ai, on the Ekron tokens: semantic colors only, square corners, no shadows, Space Grotesk. */

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 400 14px/20px var(--font-sans); background: var(--surface); color: var(--text); }
a { color: var(--brand); }
a:hover { color: var(--action-hover); }
h1, h2, h3, p { margin: 0; }
img { max-width: 100%; }

.top { height: var(--topbar-height); display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-5); background: var(--surface-brand); color: var(--text-on-brand); }
.top img.mark { height: 24px; }
.top .title { font: 700 16px/24px var(--font-sans); }
.top .right { margin-left: auto; display: flex; gap: var(--space-4); align-items: center; }
.top a { color: var(--text-on-brand); text-decoration: none; }
.top a:hover, .top a.on { text-decoration: underline; color: var(--text-on-brand); }

.wrap { max-width: var(--content-width); margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-8); }
.narrow { max-width: 640px; }
.stack > * + * { margin-top: var(--space-5); }
.stack-sm > * + * { margin-top: var(--space-2); }
.row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.row > form, .spread > form { margin: 0; }
.spread { display: flex; gap: var(--space-3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cols { display: grid; gap: var(--space-5); grid-template-columns: 2fr 1fr; }
/* A grid column grows to fit a wide table unless it may shrink: then the table scrolls in its own box. */
.cols > * { min-width: 0; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }
.show-phone { display: none; }
@media (max-width: 600px) {
  .hide-phone { display: none; }
  .show-phone { display: block; }
}

.panel { background: var(--surface-raised); border: 1px solid var(--line); padding: var(--space-5); }
.panel.tint { background: var(--surface-tint); border-color: var(--surface-tint-strong); }
.panel.brand { background: var(--surface-brand); color: var(--text-on-brand); border-color: var(--surface-brand); }
.panel.brand a { color: var(--text-on-brand); }
.panel.attention { background: var(--attention-soft); border-color: var(--attention-soft); }
.panel.critical { background: var(--critical-soft); border-color: var(--critical-soft); }

.type-title { font: 700 24px/32px var(--font-sans); letter-spacing: -0.2px; }
.type-figure { font: 700 28px/32px var(--font-sans); }
.type-heading { font: 700 16px/24px var(--font-sans); }
.type-small { font: 400 12px/16px var(--font-sans); }
.type-small-strong { font: 500 12px/16px var(--font-sans); }
.strong { font-weight: 500; }
.muted { color: var(--text-muted); }
.secondary { color: var(--text-secondary); }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: 13px; }

/* No clear logo on their site: their name, set plainly. */
.wordmark { display: inline-block; font: 700 18px/24px var(--font-sans); letter-spacing: 0.2px; padding: var(--space-3) var(--space-4); border: 1px solid var(--line-strong); background: var(--surface-raised); }
.logo { max-height: 56px; max-width: 200px; object-fit: contain; background: var(--white); padding: var(--space-2); border: 1px solid var(--line); }
.logo.on-dark { background: var(--surface-brand); border-color: var(--surface-brand); }

.btn { display: inline-flex; align-items: center; justify-content: center; height: var(--control-height); padding: 0 var(--space-4); border: 1px solid var(--action); background: var(--action); color: var(--on-action); font: 500 14px/20px var(--font-sans); cursor: pointer; text-decoration: none; border-radius: 0; }
.btn:hover { background: var(--action-hover); border-color: var(--action-hover); color: var(--on-action); }
.btn.secondary { background: var(--surface-raised); color: var(--action); }
.btn.secondary:hover { background: var(--surface-tint); color: var(--action-hover); }
.btn.quiet { background: transparent; border-color: transparent; color: var(--action); padding: 0 var(--space-2); }
.btn[disabled], .btn.disabled { background: var(--surface-tint-strong); border-color: var(--surface-tint-strong); color: var(--text-muted); cursor: not-allowed; }
.btn.big { height: var(--control-height-touch); font-size: 16px; padding: 0 var(--space-5); }
.btn.full { width: 100%; }

input[type=text], input[type=email], input[type=number], input[type=password], input[type=search], input:not([type]), select, textarea {
  font: 400 14px/20px var(--font-sans); color: var(--text); background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: 0; padding: 5px var(--space-2); min-height: var(--control-height);
}
textarea { width: 100%; min-height: 220px; padding: var(--space-2); resize: vertical; }
input:focus, select:focus, textarea:focus, .btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
label { display: block; }
label > span { display: block; font: 500 12px/16px var(--font-sans); color: var(--text-secondary); margin-bottom: var(--space-1); }
input.qty { width: 72px; }
input.price { width: 96px; }
input.wide, select.wide { width: 100%; }

.tag { display: inline-flex; align-items: center; gap: 6px; height: var(--tag-height); padding: 0 var(--space-2); font: 500 12px/16px var(--font-sans); background: var(--surface-tint); color: var(--text-secondary); white-space: nowrap; }
.tag::before { content: ""; width: var(--tag-marker); height: var(--tag-marker); background: currentColor; }
.tag.positive { background: var(--positive-soft); color: var(--positive); }
.tag.attention { background: var(--attention-soft); color: var(--attention); }
.tag.critical { background: var(--critical-soft); color: var(--critical); }
.tag.plain::before { display: none; }

table { width: 100%; border-collapse: collapse; background: var(--surface-raised); }
th { text-align: left; font: 500 12px/16px var(--font-sans); color: var(--text-secondary); height: var(--column-header-height); padding: 0 var(--space-3); border-bottom: 1px solid var(--line); background: var(--surface-tint); }
td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); vertical-align: middle; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.sample td { color: var(--text-secondary); }
tr.removed td { color: var(--text-muted); text-decoration: line-through; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); }
.table-wrap table { border: 0; }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { padding: 2px var(--space-2); background: var(--surface-tint); border: 1px solid var(--surface-tint-strong); font: 500 12px/16px var(--font-sans); }

.feature { display: flex; flex-direction: column; gap: var(--space-2); }
.feature .lock { font: 500 12px/16px var(--font-sans); color: var(--text-muted); }
.address { font: 700 18px/24px var(--font-sans); word-break: break-all; }
.facts li { margin-bottom: var(--space-2); }
.facts { padding-left: var(--space-5); margin: 0; }
.steps { padding-left: var(--space-5); margin: var(--space-2) 0 0; }
.steps li { margin-bottom: var(--space-1); }
details > summary { cursor: pointer; font-weight: 500; }
.notice { padding: var(--space-3) var(--space-4); background: var(--surface-tint); border-left: 4px solid var(--brand); }
.notice.attention { background: var(--attention-soft); border-left-color: var(--attention); }
.notice.critical { background: var(--critical-soft); border-left-color: var(--critical); }
.footer { margin-top: var(--space-7); padding-top: var(--space-4); border-top: 1px solid var(--line); color: var(--text-muted); font: 400 12px/16px var(--font-sans); }
.email-body { white-space: pre-wrap; font: 400 14px/20px var(--font-sans); }
.figure-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-3); }
.figure-row .panel { padding: var(--space-4); }

/* The buyer's page is a phone page first. */
.phone { max-width: 480px; margin: 0 auto; padding: var(--space-4) var(--space-4) var(--space-7); }
.phone .line { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.phone input.qty { width: 80px; min-height: var(--control-height-touch); font-size: 16px; }
.phone textarea, .phone input, .phone select { font-size: 16px; min-height: var(--control-height-touch); }
.phone .btn { height: var(--control-height-touch); font-size: 16px; }
.total { font: 700 20px/28px var(--font-sans); }

/* The pitch view: a few big numbers, readable across a room. */
.pitch-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .pitch-grid { grid-template-columns: repeat(2, 1fr); } }
.pitch-figure { padding: var(--space-5); }
.pitch-number { font: 700 48px/56px var(--font-sans); letter-spacing: -0.5px; margin-top: var(--space-2); color: var(--brand); font-variant-numeric: tabular-nums; }

/* The prospect page leads with their team: the one thing to click. */
.team-hero { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-6); flex-wrap: wrap; }
.team-hero > .stack-sm { flex: 1 1 420px; }
.team-hero-title { font: 700 26px/32px var(--font-sans); letter-spacing: -0.2px; }
/* More specific than ".panel.brand a", which makes links white on the green panel. */
.panel.brand a.team-hero-btn { background: var(--surface-raised); color: var(--action); border-color: var(--surface-raised); height: 52px; padding: 0 var(--space-6); font-size: 17px; font-weight: 600; }
.panel.brand a.team-hero-btn:hover { background: var(--surface-tint); color: var(--action-hover); border-color: var(--surface-tint); }
@media (max-width: 600px) { .team-hero { padding: var(--space-5); } .team-hero-title { font-size: 21px; line-height: 28px; } .team-hero-btn { width: 100%; } }

/* The VC journey */
.vc-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.vc-step .type-heading { font-size: 16px; }

/* An inbox's message view, for the email preview */
.inbox { background: var(--surface-raised); border: 1px solid var(--line); }
.inbox-head { padding: var(--space-5) var(--space-6) var(--space-4); border-bottom: 1px solid var(--line); }
.inbox-subject { font: 400 22px/28px var(--font-sans); margin-bottom: var(--space-4); }
.inbox-meta { display: flex; gap: var(--space-3); align-items: center; }
.inbox-avatar { width: 40px; height: 40px; display: grid; place-items: center; background: var(--surface-brand); color: var(--text-on-brand); font: 700 16px/20px var(--font-sans); border-radius: 50%; }
.inbox-time { margin-left: auto; }
.inbox-body { padding: var(--space-5) var(--space-6) var(--space-6); white-space: pre-wrap; font: 400 15px/23px Arial, Helvetica, sans-serif; color: #222; }
.inbox-body a { color: #1a5fd0; }