/* SimuXL website - shared styles.
   2026-09-18d: redesigned to be distinguishable from the CASTR site, which this file
   was previously modelled on. The old palette shared 11 of its 13 tokens, its hero
   gradient and its font stack with that site. Nothing here is navy.
   Palette: ink and graphite, one amber accent, warm paper ground. Fonts self-hosted. */

/* ========== FONTS (self-hosted; no external request) ========== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;          /* variable - fvar wght 100-900, verified */
  font-display: swap;
  src: url(fonts/inter-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;          /* variable - fvar wght 300-700, verified */
  font-display: swap;
  src: url(fonts/space-grotesk-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;              /* static */
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* the new palette */
    --ink:        #16191d;
    --graphite:   #2b3036;
    --mute:       #5c646e;
    --paper:      #ffffff;
    --ground:     #f5f4f0;
    --line:       #dcdcd6;
    --amber:      #b35c00;   /* 5.3:1 on paper - body-text safe */
    --amber-br:   #e08a1e;   /* for use on dark only */
    --pine:       #2f6b4a;   /* confirmation only, never a call to action */

    /* the old token names are kept and REPOINTED, because index.html, purchase.html
       and success.html each use some of them inline in markup. Removing a name would
       leave an unstyled element on a page nobody looked at. */
    --primary:       var(--graphite);
    --primary-light: var(--mute);
    --accent:        var(--amber);
    --accent-bright: var(--amber-br);
    --orange:        var(--amber);
    --green:         var(--pine);
    --green-hover:   #275a3e;
    --bg:            var(--paper);
    --card-bg:       var(--paper);
    --text:          var(--ink);
    --text-light:    var(--mute);
    --border:        var(--line);

    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --display: 'Space Grotesk', 'Inter', -apple-system, 'Segoe UI', Arial, sans-serif;
    --mono: 'IBM Plex Mono', Consolas, 'Cascadia Mono', 'Courier New', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--sans);
    color: var(--text);
    line-height: 1.68;
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--display); letter-spacing: -0.02em; font-weight: 700; }

a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .formula {
    font-family: var(--mono);
    background: var(--ground);
    padding: 0.12em 0.4em;
    border: 1px solid var(--line);
    border-radius: 3px;
    font-size: 0.88em;
    color: var(--ink);
    white-space: nowrap;
}

/* ========== NAV - one row, wordmark left, links right ========== */
nav {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 0 2rem;
    position: sticky;
    top: 0;
    z-index: 100;
}
.nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 2.2rem;
    min-height: 66px;
    position: relative;
}
.nav-logo {
    font-family: var(--display);
    color: var(--ink);
    font-weight: 700;
    font-size: 1.32rem;
    letter-spacing: -0.03em;
}
.nav-logo span { color: var(--amber); }
.nav-links {
    list-style: none;
    display: flex;
    gap: 1.7rem;
    align-items: center;
    margin-left: auto;
}
.nav-links a {
    color: var(--mute);
    font-size: 0.9rem;
    font-weight: 500;
}
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-links a.nav-cta {
    border: 1.5px solid var(--ink);
    color: var(--ink);
    padding: 0.42rem 1.05rem;
    border-radius: 2px;
    font-weight: 600;
}
.nav-links a.nav-cta:hover { background: var(--ink); color: var(--paper); }
.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--ink);
    font-size: 1.6rem;
    cursor: pointer;
    position: absolute;
    right: 0;
}
/* kept for any page that still carries the second row; rendered as a quiet utility strip */
.nav-row2 {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.6rem;
    padding: 0.35rem 0 0.55rem;
    border-top: 1px solid var(--line);
}
.nav-row2 a { color: var(--mute); font-size: 0.82rem; font-weight: 500; }
.nav-row2 a:hover { color: var(--ink); text-decoration: none; }

/* ========== HERO - asymmetric, no gradient, no dark slab ========== */
.hero {
    background: var(--paper);
    color: var(--text);
    max-width: 1200px;
    margin: 0 auto;
    padding: 4.4rem 2rem 4rem;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    column-gap: 3.2rem;
    align-items: center;
    text-align: left;
}
.hero-copy { grid-column: 1; }
.hero-kicker {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 1.1rem;
}
.hero h1 {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.07;
    margin: 0 0 1.2rem;
    max-width: 16ch;
}
.hero h1 span { color: var(--mute); }
.hero-sub {
    font-size: 1.05rem;
    color: var(--mute);
    max-width: 34rem;
    margin: 0 0 0.4rem;
}
.hero-formula {
    display: inline-block;
    margin: 1.6rem 0 1.5rem;
    padding: 0.7rem 1.1rem;
    background: var(--ground);
    border: 1px solid var(--line);
    border-left: 3px solid var(--amber);
    border-radius: 0 3px 3px 0;
    font-family: var(--mono);
    font-size: 0.95rem;
    color: var(--ink);
}
.hero-formula .arrow { color: var(--mute); margin: 0 0.55rem; font-family: inherit; }
.hero-buttons {
    display: flex;
    gap: 0.8rem;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 0.2rem;
}
.btn {
    display: inline-block;
    padding: 0.82rem 1.55rem;
    border-radius: 2px;
    font-weight: 600;
    font-size: 0.97rem;
    transition: background 0.16s, color 0.16s;
    text-decoration: none !important;
    border: 1.5px solid transparent;
    cursor: pointer;
    font-family: var(--sans);
}
.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary:hover { background: var(--graphite); border-color: var(--graphite); }
.btn-secondary { background: var(--paper); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--ink); }
.btn-outline { background: var(--paper); color: var(--amber); border-color: var(--amber); }
.btn-outline:hover { background: var(--amber); color: var(--paper); }
.version-badge {
    display: inline-block;
    margin-top: 1.15rem;
    padding: 0.3rem 0.8rem;
    background: var(--ground);
    border: 1px solid var(--line);
    border-radius: 2px;
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--mute);
}
.hero-renew { margin-top: 1.1rem; font-size: 0.87rem; color: var(--mute); }
.hero-renew a { color: var(--amber); }
.hero-screenshot {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 0;
    padding: 0;
    box-shadow: 0 20px 48px -30px rgba(0,0,0,0.45);
}
.hero-screenshot img { width: 100%; height: auto; display: block; border-radius: 0; }
.hero-caption {
    font-size: 0.79rem;
    color: var(--mute);
    padding: 0.7rem 0.9rem;
    text-align: left;
    background: var(--ground);
    border-top: 1px solid var(--line);
}

/* ========== SECTIONS ========== */
.section { padding: 4.4rem 2rem; max-width: 1200px; margin: 0 auto; }
.section-header { text-align: left; margin-bottom: 2.6rem; }
.section-header h2 { font-size: 2.05rem; color: var(--ink); margin-bottom: 0.55rem; }
.section-header p { font-size: 1.03rem; color: var(--mute); max-width: 46rem; margin: 0; }
.section-alt { background: var(--ground); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-alt .section { padding: 4.4rem 2rem; }

/* Three steps */
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 1.4rem; }
.step-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 0;
    border-top: 2px solid var(--amber);
    padding: 1.7rem;
    box-shadow: none;
}
.step-number {
    display: inline-block;
    width: auto; height: auto;
    background: none;
    color: var(--amber);
    border-radius: 0;
    font-family: var(--mono);
    font-size: 1.15rem;
    line-height: 1;
    letter-spacing: 0.04em;
    font-weight: 400;
    margin-bottom: 0.75rem;
}
.step-card h3 { color: var(--ink); font-size: 1.12rem; margin-bottom: 0.45rem; }
.step-card p { color: var(--mute); font-size: 0.94rem; }
.step-card code { white-space: normal; }

/* Feature grid - hairline lattice, numerals, no shadow, no emoji */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}
.feature-card {
    background: var(--paper);
    border: none;
    border-radius: 0;
    padding: 1.75rem 1.6rem;
    box-shadow: none;
    transition: background 0.16s;
}
.feature-card:hover { transform: none; box-shadow: none; background: var(--ground); }
.feature-icon {
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    color: var(--amber);
    margin-bottom: 0.85rem;
}
.feature-card h3 { font-size: 1.04rem; color: var(--ink); margin-bottom: 0.38rem; }
.feature-card p { font-size: 0.92rem; color: var(--mute); }

/* Distributions table */
.dist-table { width: 100%; border-collapse: collapse; background: var(--paper); border-radius: 0; overflow: hidden; box-shadow: none; border: 1px solid var(--line); }
.dist-table th, .dist-table td { padding: 0.78rem 1rem; text-align: left; border-bottom: 1px solid var(--line); font-size: 0.92rem; vertical-align: top; }
.dist-table th { background: var(--graphite); color: var(--paper); font-weight: 600; font-family: var(--display); letter-spacing: -0.01em; }
.dist-table tr:last-child td { border-bottom: none; }
.dist-table tbody tr:nth-child(even) { background: var(--ground); }
.dist-table code { white-space: nowrap; background: transparent; border: none; padding: 0; }
.tablewrap { overflow-x: auto; }

/* Promise cards */
.promise-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem; }
.promise-card { background: var(--ground); border: 1px solid var(--line); border-left: 3px solid var(--ink); border-radius: 0; padding: 1.5rem; }
.promise-card h3 { color: var(--ink); font-size: 1.08rem; margin-bottom: 0.45rem; }
.promise-card p { font-size: 0.94rem; color: var(--mute); }

/* Screenshot gallery */
.shots-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 1.7rem; }
.shot { background: var(--paper); border-radius: 0; padding: 0; box-shadow: none; border: 1px solid var(--line); }
.shot img { width: 100%; height: auto; display: block; border-radius: 0; border-bottom: 1px solid var(--line); }
.shot h4 { color: var(--ink); font-size: 1rem; margin: 0.85rem 1rem 0.2rem; }
.shot p { font-size: 0.87rem; color: var(--mute); margin: 0 1rem 0.95rem; }
.shot.wide { grid-column: 1 / -1; }

/* Pricing */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.4rem; align-items: start; }
.pricing-card { background: var(--paper); border-radius: 0; box-shadow: none; overflow: hidden; border: 1px solid var(--line); }
.pricing-header { background: var(--ink); color: var(--paper); padding: 1.5rem 1.5rem 1.25rem; text-align: left; }
.pricing-card.renewal .pricing-header { background: var(--graphite); }
.pricing-card.subscription .pricing-header { background: var(--mute); }
.pricing-header h3 { font-size: 1.16rem; margin-bottom: 0.3rem; font-weight: 600; }
.pricing-price { font-family: var(--display); font-size: 2.5rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; }
.pricing-note { font-size: 0.85rem; opacity: 0.8; }
.pricing-body { padding: 1.5rem; }
.pricing-body > p { text-align: left; color: var(--mute); margin-bottom: 1rem; font-size: 0.94rem; }
.pricing-features { list-style: none; margin-bottom: 1.2rem; }
.pricing-features li { padding: 0.38rem 0 0.38rem 1.6rem; position: relative; font-size: 0.92rem; color: var(--text); }
.pricing-features li::before { content: "\2014"; position: absolute; left: 0; color: var(--amber); font-weight: 700; }
.pricing-body .btn { display: block; text-align: center; width: 100%; }
.trial-note { font-size: 0.81rem; color: var(--mute); margin-top: 0.9rem; text-align: center; }
.pricing-band { text-align: left; margin-top: 2rem; color: var(--mute); font-size: 0.94rem; }

/* FAQ */
.faq-bg { background: var(--ground); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.6rem 2.6rem; }
.faq-q { border-top: 1px solid var(--line); padding-top: 1rem; }
.faq-q h4 { color: var(--ink); font-size: 1.01rem; margin-bottom: 0.3rem; }
.faq-q p { color: var(--mute); font-size: 0.93rem; }

/* Validation / About */
.vqa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.4rem; }
.vqa-card { background: var(--paper); border-radius: 0; padding: 1.5rem; border: 1px solid var(--line); box-shadow: none; }
.vqa-card h3 { color: var(--ink); font-size: 1.06rem; margin-bottom: 0.45rem; }
.vqa-card p { font-size: 0.92rem; color: var(--mute); }
.vqa-intro { max-width: 46rem; margin: -1.4rem 0 2rem; text-align: left; color: var(--mute); }
.about-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2.5rem; align-items: start; }
.about-text p { margin-bottom: 1rem; color: var(--text); }
.about-contact { background: var(--ground); border-radius: 0; padding: 1.5rem; border: 1px solid var(--line); }
.about-contact h3 { color: var(--ink); margin-bottom: 1rem; }
.contact-item { display: flex; gap: 0.7rem; align-items: flex-start; margin-bottom: 0.85rem; font-size: 0.94rem; }
.contact-icon { font-size: 1.1rem; }

/* Purchase page */
.page-header {
    background: var(--ground);
    border-bottom: 1px solid var(--line);
    color: var(--text);
    padding: 3rem 1rem 2.6rem;
    text-align: center;
}
.page-header h1 { font-size: 2.2rem; margin-bottom: 0.4rem; color: var(--ink); }
.page-header p { font-size: 1.02rem; color: var(--mute); max-width: 44rem; margin: 0 auto; }
.container { max-width: 1100px; margin: 0 auto; padding: 2.8rem 1rem; }
.form-group { margin-bottom: 1.05rem; }
.form-group label { display: block; font-weight: 600; margin-bottom: 0.32rem; font-size: 0.92rem; }
.form-group input {
    width: 100%; padding: 0.7rem 0.85rem; border: 1.5px solid var(--line); border-radius: 2px;
    font-size: 1rem; transition: border-color 0.16s; font-family: inherit; color: var(--ink); background: var(--paper);
}
.form-group input:focus { outline: none; border-color: var(--amber); }
.form-hint { font-size: 0.79rem; color: var(--mute); margin-top: 0.25rem; }
.buy-button {
    display: block; width: 100%; padding: 0.92rem; background: var(--ink); color: var(--paper);
    border: 1.5px solid var(--ink); border-radius: 2px; font-size: 1.04rem; font-weight: 700; cursor: pointer;
    transition: background 0.16s; font-family: var(--sans);
}
.buy-button:hover { background: var(--graphite); border-color: var(--graphite); }
.pricing-card.renewal .buy-button { background: var(--paper); color: var(--ink); }
.pricing-card.renewal .buy-button:hover { background: var(--ground); }
.pricing-card.subscription .buy-button { background: var(--paper); color: var(--ink); }
.pricing-card.subscription .buy-button:hover { background: var(--ground); }
.secure-note { text-align: center; font-size: 0.79rem; color: var(--mute); margin-top: 0.9rem; }
.agree-note { font-size: 0.79rem; color: var(--mute); margin: 0.5rem 0; text-align: center; }
.help-box {
    background: var(--ground); border: 1px solid var(--line); border-left: 3px solid var(--amber);
    padding: 0.9rem 1.1rem; border-radius: 0; margin-bottom: 1.2rem; font-size: 0.89rem;
}
.help-box strong { display: block; margin-bottom: 0.18rem; }
.warn-box { background: #fdf6ec; border: 1px solid #ecd9b8; border-left: 3px solid var(--amber-br); padding: 0.9rem 1.1rem; border-radius: 0; margin-bottom: 1.2rem; font-size: 0.89rem; }
.info-section { background: var(--paper); border: 1px solid var(--line); border-radius: 0; padding: 2rem; box-shadow: none; margin: 2rem 0; }
.info-section h3 { color: var(--ink); margin-bottom: 1rem; font-size: 1.18rem; }
.faq-item { margin-bottom: 1.15rem; }
.faq-item strong { display: block; margin-bottom: 0.18rem; }
.faq-item p { color: var(--mute); font-size: 0.93rem; }
.activation-steps { counter-reset: s; list-style: none; }
.activation-steps li { position: relative; padding-left: 2.3rem; margin-bottom: 0.9rem; font-size: 0.94rem; }
.activation-steps li::before {
    counter-increment: s; content: counter(s, decimal-leading-zero);
    position: absolute; left: 0; top: 0.25rem;
    font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em;
    color: var(--amber); font-weight: 400;
}

/* Footer */
footer { text-align: left; padding: 2.8rem 2rem; color: var(--mute); font-size: 0.86rem; border-top: 1px solid var(--line); background: var(--ground); }
footer > * { max-width: 1200px; margin-left: auto; margin-right: auto; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 1.2rem; margin-bottom: 1rem; }
.footer-links a { color: var(--mute); }
.footer-links a:hover { color: var(--ink); }

/* Responsive */
@media (max-width: 980px) {
    .hero {
        grid-template-columns: 1fr;
        row-gap: 0;
        padding: 3rem 2rem 3rem;
    }
    .hero-copy, .hero-screenshot { grid-column: 1; }
    .hero-screenshot { grid-row: auto; margin-top: 2.2rem; }
    .hero h1 { max-width: none; }
}
@media (max-width: 820px) {
    nav { padding: 0 1rem; }
    .nav-toggle { display: block; }
    .nav-links {
        display: none; position: absolute; top: 100%; left: -1rem; right: -1rem;
        background: var(--paper); border-bottom: 1px solid var(--line);
        flex-direction: column; gap: 0; padding: 0.5rem 1rem 1rem; align-items: flex-start;
    }
    .nav-links.active { display: flex; }
    .nav-links li { padding: 0.5rem 0; }
    .nav-row2 { display: none; }
    .nav-links.active ~ .nav-row2 { display: flex; flex-wrap: wrap; gap: 1rem; }
    .hero h1 { font-size: 2.1rem; }
    .hero-sub { font-size: 1rem; }
    .hero-formula { font-size: 0.9rem; white-space: normal; }
    .section { padding: 3rem 1rem; }
    .about-grid { grid-template-columns: 1fr; }
    .shots-grid { grid-template-columns: 1fr; }
    .page-header h1 { font-size: 1.7rem; }
    footer { padding: 2.2rem 1rem; }
}