/* Lander.Public — editorial / type-led / asymmetric.
   Vanilla CSS, no framework. Theme variables are injected per-domain via
   <style> in _Layout.cshtml. The serif stack prefers system serifs that
   feel editorial (Charter, Iowan, Baskerville) before falling back to
   web-safe Times. Drop a self-hosted woff2 into /fonts/ and add an
   @font-face rule at the top to upgrade. */

:root {
    --primary: #423A8E;
    --secondary: #00CCCD;
    --background: #f8f9fa;
    --text: #333;
    --link: #423A8E;
    --button: #423A8E;
    --button-text: #fff;
    --card-bg: #fff;
    --form-bg: #1e3a8a;
    --form-text: #fff;

    --serif: "Charter", "Iowan Old Style", "Sitka Text", "Source Serif 4",
             "Apple Garamond", Baskerville, "Times New Roman", Times, serif;
    --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
             system-ui, sans-serif;

    --measure: 36rem;          /* readable line length cap */
    --gutter: clamp(1.25rem, 4vw, 3rem);
    --rule:   1px solid color-mix(in srgb, var(--text) 12%, transparent);
}

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

html, body {
    margin: 0;
    padding: 0;
    background: var(--background);
    color: var(--text);
    font-family: var(--serif);
    font-size: 18px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: color-mix(in srgb, var(--link) 70%, black); }

/* Asymmetric page grid: the masthead spans the whole viewport with a
   left-aligned ragged column. The lander column then sits at the same
   left margin, so the page reads top-to-bottom along one strong axis. */

.masthead {
    padding: 5rem var(--gutter) 1rem;
    border-bottom: var(--rule);
    max-width: 70rem;
    margin: 0 auto;
}
.masthead__eyebrow {
    margin: 0 0 .5rem;
    font-family: var(--sans);
    font-size: .7rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--primary) 75%, var(--text));
}
.masthead__domain {
    margin: 0;
    font-weight: 600;
    /* Size inversely proportional to character count so long names (e.g.
       24hourtradingroom.com — 21 chars) stay on one line at desktop. The
       --domain-len custom property is emitted on the <h1> by the Razor
       template; fallback of 12 covers any path that forgets it. At
       1280px viewport: len=10 → ~6rem (cap), len=12 → ~5rem, len=21 →
       ~2.86rem. Floor at 2.2rem keeps mobile readable; longer names
       wrap there, which is fine on a phone. */
    font-size: clamp(2.2rem, calc(75vw / var(--domain-len, 12)), 6rem);
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--primary);
    word-break: break-word;
}
.masthead__tagline {
    margin: 1rem 0 0;
    font-family: var(--sans);
    font-size: 1rem;
    letter-spacing: .02em;
    color: color-mix(in srgb, var(--text) 70%, transparent);
}
.masthead__lede {
    margin: .5rem 0 0;
    font-size: 1.1rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--text) 80%, transparent);
    max-width: var(--measure);
}
/* Intra-page jump nav — keeps the page above Seobility's "very few
   internal links" check on a single-page lander. Subtle by design;
   we don't want it competing with the masthead. */
.masthead__jump {
    margin: 1.25rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .85rem 1.5rem;
    font-size: .85rem;
    letter-spacing: .04em;
}
.masthead__jump a {
    color: color-mix(in srgb, var(--text) 65%, transparent);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 25%, transparent);
    padding-bottom: 1px;
}
.masthead__jump a:hover, .masthead__jump a:focus-visible {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.lander {
    max-width: 70rem;
    margin: 0 auto;
    padding: 2.5rem var(--gutter) 4rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3rem;
}

@media (min-width: 56rem) {
    .lander {
        /* Editorial grid — 12-track, asymmetric: pitch on the wide left,
           card on the narrower right, features below spans 8 cols left. */
        grid-template-columns: repeat(12, 1fr);
        column-gap: 2.5rem;
        row-gap: 4rem;
    }
    .pitch    { grid-column: 1 / span 7; }
    .card     { grid-column: 8 / span 5; grid-row: span 2; }
    .features { grid-column: 1 / span 8; }
}

/* Pitch block — sits at the left of the grid. Used to host the trust list. */
.pitch__text {
    margin: 0;
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    line-height: 1.45;
    max-width: var(--measure);
}

/* Trust block — three reassurance bullets, hardcoded on every domain page.
   The icon column is fixed-width so the bullets line up cleanly. */
.trust__heading {
    margin: 0 0 1.25rem;
    font-family: var(--sans);
    font-size: .8rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--text) 60%, transparent);
}
.trust__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1.5rem;
    max-width: var(--measure);
}
.trust__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
    font-size: 1.05rem;
    line-height: 1.5;
}
.trust__item strong {
    display: block;
    font-weight: 600;
    color: var(--text);
    margin-bottom: .15rem;
}
.trust__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    flex-shrink: 0;
}

/* Disclaimer note inside the offer / contact card (e.g. VAT line). */
.card__note {
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    font-family: var(--sans);
    font-size: .8rem;
    color: color-mix(in srgb, var(--text) 55%, transparent);
}

/* Card — for offer / contact / thanks. Pure white on warm cream lifts via a
   soft shadow rather than a heavy border. Editorial, not boxy. */
.card {
    background: var(--card-bg);
    border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.02),
        0 8px 24px -12px rgba(0, 0, 0, 0.12);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    align-self: start;
}
.card--thanks {
    border-color: color-mix(in srgb, var(--secondary) 50%, transparent);
}
.card__pre {
    margin: 0 0 .5rem;
    font-family: var(--sans);
    font-size: .7rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--text) 60%, transparent);
}
.card__title {
    margin: 0 0 1rem;
    font-weight: 500;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    letter-spacing: -0.01em;
}
.card__lede {
    margin: 0 0 1.5rem;
    color: color-mix(in srgb, var(--text) 80%, transparent);
}

.alert {
    margin: 0 0 1.25rem;
    padding: .85rem 1rem;
    border-left: 3px solid #c0392b;
    background: color-mix(in srgb, #c0392b 8%, transparent);
    color: #6b1f17;
    font-family: var(--sans);
    font-size: .9rem;
}

/* Form — sans-serif inputs (legibility) inside a serif page. */
.form {
    font-family: var(--sans);
}
.form__row { margin-bottom: 1.1rem; }
.form__row--inline { display: flex; flex-direction: column; gap: .35rem; }
.form__row--altcha { min-height: 4.5rem; }
.form__label {
    display: block;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--text) 70%, transparent);
    margin-bottom: .35rem;
}
.form__hint {
    font-size: .8rem;
    color: color-mix(in srgb, var(--text) 50%, transparent);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.form__group {
    display: flex;
    align-items: stretch;
    border-bottom: 2px solid var(--text);
}
.form__prefix {
    font-family: var(--serif);
    font-size: 1.4rem;
    color: var(--primary);
    padding: .35rem .5rem .35rem 0;
}
.form__input {
    width: 100%;
    border: 0;
    border-bottom: 2px solid color-mix(in srgb, var(--text) 30%, transparent);
    background: transparent;
    color: var(--text);
    font: inherit;
    padding: .55rem 0;
    border-radius: 0;
}
.form__input:focus {
    outline: none;
    border-color: var(--primary);
}
.form__input--amount {
    font-family: var(--serif);
    font-size: 1.6rem;
    border: 0;
    padding-left: 0;
}
.form__input--amount:focus { outline: none; }
.form__input--area {
    border: 2px solid color-mix(in srgb, var(--text) 30%, transparent);
    padding: .65rem .75rem;
    resize: vertical;
}
.form__input--area:focus { border-color: var(--primary); }

.form__actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}
.btn {
    display: inline-block;
    font-family: var(--sans);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .04em;
    padding: .75rem 1.6rem;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
}
.btn--primary {
    background: var(--button);
    color: var(--button-text);
}
.btn--primary:hover {
    background: color-mix(in srgb, var(--button) 80%, black);
}
.btn--primary:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.btn--ghost {
    background: transparent;
    color: var(--text);
    border-color: color-mix(in srgb, var(--text) 30%, transparent);
}
.btn--ghost:hover {
    border-color: var(--text);
}

.features {
    border-top: var(--rule);
    padding-top: 2rem;
}
.features__heading {
    margin: 0 0 1rem;
    font-family: var(--sans);
    font-size: .8rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--text) 60%, transparent);
}
.features__body {
    margin: 0;
    font-size: 1.1rem;
    max-width: var(--measure);
}

/* Site-wide brand header (logo + company name) — rendered above every page
   from SiteConfig. Dark strip so a white logo asset reads cleanly across all
   themes. Hardcoded (not theme-derived) because the logo asset itself is fixed;
   on dark themes the strip simply blends with the page background. */
.brand {
    background: #0F1115;
    color: #F5F5F4;
}
.brand__inner {
    max-width: 70rem;
    margin: 0 auto;
    padding: 1rem var(--gutter);
    display: flex;
    align-items: center;
}
.brand__logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.brand__logo img {
    max-height: 36px;
    width: auto;
    display: block;
}
.brand__name {
    font-family: var(--sans);
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .04em;
    color: var(--text);
    text-decoration: none;
}
.brand__name:hover { color: var(--primary); }

/* Site-wide brand footer — single line, copyright + legal links only.
   Address / phone / email deliberately omitted on the public lander to
   avoid spam scraping. The offer form is the contact path. */
.sitefoot {
    border-top: var(--rule);
    margin-top: 4rem;
    padding: 1.5rem var(--gutter);
    font-family: var(--sans);
    font-size: .85rem;
    color: color-mix(in srgb, var(--text) 60%, transparent);
}
.sitefoot__copy {
    max-width: 70rem;
    margin: 0 auto;
    text-align: center;
}
.sitefoot__copy a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
    padding-bottom: 1px;
}
.sitefoot__copy a:hover {
    color: var(--primary);
    border-color: var(--primary);
}
.sitefoot__sep {
    margin: 0 .5rem;
    color: color-mix(in srgb, var(--text) 30%, transparent);
}