/* Design system.
   One scale, one palette, one set of shapes. Everything on the site is built from the tokens
   below so the pages agree with each other without each one restating the decisions. */

:root {
    /* Palette: a single blue carries every action, so what is clickable is never in doubt. */
    --ink:        #0f172a;
    --ink-soft:   #475569;
    --ink-faint:  #94a3b8;
    --line:       #e2e8f0;
    --surface:    #ffffff;
    --surface-2:  #f8fafc;
    --brand:      #1d4ed8;
    --brand-dark: #1e40af;
    --brand-soft: #eff6ff;
    --good:       #047857;
    --bad:        #b91c1c;
    --warn:       #b45309;

    /* Type: one family, a scale that steps rather than drifts. */
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --text-xs:  0.8125rem;
    --text-sm:  0.9375rem;
    --text-md:  1.0625rem;
    --text-lg:  1.375rem;
    --text-xl:  2rem;
    --text-2xl: 2.75rem;

    /* Space: multiples of a single step, so rhythm is consistent everywhere. */
    --s1: 0.25rem;
    --s2: 0.5rem;
    --s3: 0.75rem;
    --s4: 1rem;
    --s5: 1.5rem;
    --s6: 2rem;
    --s7: 3rem;
    --s8: 4.5rem;

    --radius:    10px;
    --radius-lg: 16px;
    --shadow:    0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.06);
    --measure:   68ch;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink:       #e2e8f0;
        --ink-soft:  #94a3b8;
        --ink-faint: #64748b;
        --line:      #1e293b;
        --surface:   #0b1220;
        --surface-2: #111a2e;
        --brand:     #60a5fa;
        --brand-dark:#3b82f6;
        --brand-soft:#12203a;
        --good:      #34d399;
        --bad:       #f87171;
        --shadow:    0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
    }
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font: var(--text-md)/1.65 var(--font);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 var(--s4); }
h1 { font-size: var(--text-2xl); font-weight: 800; }
h2 { font-size: var(--text-xl); font-weight: 700; margin-top: var(--s7); }
h3 { font-size: var(--text-lg); font-weight: 650; margin-top: var(--s5); }
p  { margin: 0 0 var(--s4); max-width: var(--measure); }
a  { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 var(--s5); }
.prose { max-width: var(--measure); }
.muted { color: var(--ink-soft); }
.small { font-size: var(--text-sm); }
.center { text-align: center; }

/* Header and footer ------------------------------------------------------ */

header.site {
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 10;
}
header.site .wrap { display: flex; align-items: center; gap: var(--s5); height: 68px; }
.brand { display: flex; align-items: center; gap: var(--s2); font-weight: 700; color: var(--ink); text-decoration: none; }
.brand img { width: 28px; height: 28px; }
header.site nav { margin-left: auto; display: flex; gap: var(--s5); }
header.site nav a { color: var(--ink-soft); text-decoration: none; font-size: var(--text-sm); }
header.site nav a:hover { color: var(--brand); }

footer.site { border-top: 1px solid var(--line); margin-top: var(--s8); padding: var(--s6) 0; color: var(--ink-soft); font-size: var(--text-sm); }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: center; }
footer.site nav { margin-left: auto; display: flex; gap: var(--s5); }
footer.site a { color: var(--ink-soft); text-decoration: none; }
footer.site a:hover { color: var(--brand); }

/* Hero ------------------------------------------------------------------- */

.hero { padding: var(--s8) 0 var(--s7); }
.hero h1 { max-width: 18ch; }
.hero .lead { font-size: var(--text-lg); color: var(--ink-soft); max-width: 52ch; }

/* Cards and panels ------------------------------------------------------- */

.card {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--s6);
    box-shadow: var(--shadow);
}
.panel { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); background: var(--surface-2); }

.grid { display: grid; gap: var(--s5); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Controls --------------------------------------------------------------- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    padding: var(--s3) var(--s5);
    border-radius: var(--radius);
    border: 1px solid var(--brand);
    background: var(--brand);
    color: #fff;
    font: 600 var(--text-md)/1 var(--font);
    text-decoration: none;
    cursor: pointer;
    transition: background 120ms ease, transform 60ms ease;
}
.button:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.button:active { transform: translateY(1px); }
.button.secondary { background: transparent; color: var(--brand); }
.button.secondary:hover { background: var(--brand-soft); }
.button.large { padding: var(--s4) var(--s6); font-size: var(--text-lg); }
.button[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Dropzone --------------------------------------------------------------- */

.drop {
    border: 2px dashed var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    padding: var(--s8) var(--s5);
    text-align: center;
    transition: border-color 120ms ease, background 120ms ease;
}
.drop:hover, .drop.over { border-color: var(--brand); background: var(--brand-soft); }
.drop input[type=file] { display: block; margin: var(--s4) auto 0; }
.drop-hint { margin: var(--s3) 0 0; }
.drop-hint.bad { color: var(--bad); }

/* Progress --------------------------------------------------------------- */

.bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--brand); transition: width 200ms ease; }

/* Pricing ---------------------------------------------------------------- */

.price { display: flex; align-items: baseline; gap: var(--s2); }
.price .amount { font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.03em; }
.price .unit { color: var(--ink-soft); }

table.bands { width: 100%; border-collapse: collapse; }
table.bands th, table.bands td { text-align: left; padding: var(--s3) var(--s2); border-bottom: 1px solid var(--line); }
table.bands th { color: var(--ink-soft); font-weight: 500; font-size: var(--text-sm); }
table.bands td:last-child, table.bands th:last-child { text-align: right; }

/* States ----------------------------------------------------------------- */

.notice { border-radius: var(--radius); padding: var(--s4) var(--s5); border: 1px solid var(--line); background: var(--surface-2); }
.notice.good { border-color: var(--good); background: color-mix(in srgb, var(--good) 8%, transparent); }
.notice.bad { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, transparent); }
.notice.warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); }

.steps { list-style: none; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; padding-left: var(--s7); position: relative; margin-bottom: var(--s5); }
.steps li::before {
    content: counter(step);
    position: absolute; left: 0; top: -2px;
    width: 32px; height: 32px; border-radius: 999px;
    background: var(--brand-soft); color: var(--brand);
    display: grid; place-items: center; font-weight: 700;
}

details.faq { border-bottom: 1px solid var(--line); padding: var(--s4) 0; }
details.faq summary { cursor: pointer; font-weight: 600; list-style: none; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; float: right; color: var(--ink-faint); }
details.faq[open] summary::after { content: "−"; }
details.faq p { margin-top: var(--s3); color: var(--ink-soft); }

@media (max-width: 640px) {
    :root { --text-2xl: 2rem; --text-xl: 1.5rem; }
    header.site nav { gap: var(--s4); }
    .hero { padding: var(--s6) 0; }
}