/* ABOUTME: Slate & Signal v1 — the validation page's public landing-page theme (ADR-0024). */
/* ABOUTME: Long-form sales-letter look: one 700px column, headings and body in the Brand font; scoped to .slate-signal. */
/* The Brand font's self-hosted @font-face rules come with its colors from BrandStyle, in the page head. */

/* The theme owns everything inside its root. A public page also loads the site's style bundle for its
   header and footer, whose element rules (p, h1, a, table, button, the reset) must not restyle the
   sections: the root and every element under it revert to the browser defaults the theme is designed
   on, and the theme's own rules below, all more specific or later, apply on top. The revert weighs one
   class, so it only holds back the bundle's bare-element rules. Rules with attribute selectors,
   pseudo-classes or !important (the opt-in form's inputs, focus and hover states and submit button),
   and ::before/::after, still reach the sections; the opt-in form rules below override those
   explicitly. The inline editor (.ss-editing) is served without the site bundle and keeps its own
   cascade. */
.slate-signal:where(:not(.ss-editing)),
.slate-signal:where(:not(.ss-editing)) * {
    all: revert;
}

.slate-signal {
    /* The palette follows the color roles of the Brand the page wears. */
    --ss-ink: var(--md-sys-color-on-surface);
    --ss-body: var(--md-sys-color-on-surface-variant);
    --ss-muted: var(--md-sys-color-on-surface-variant);
    --ss-line: var(--md-sys-color-outline-variant);
    --ss-surface: var(--md-sys-color-surface);
    --ss-surface-alt: var(--md-sys-color-surface-container-low);
    --ss-signal: var(--md-sys-color-primary);
    /* Text in the signal color: the primary is only 3:1 against the surface, mixed toward the ink it reads at 4.5:1. */
    --ss-signal-text: color-mix(in srgb, var(--md-sys-color-primary) 65%, var(--md-sys-color-on-surface));
    --ss-secondary: var(--md-sys-color-inverse-surface);
    --ss-signal-ink: var(--md-sys-color-on-primary);
    --ss-max: 43.75rem;

    max-width: var(--ss-max);
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 4rem) clamp(1.25rem, 5vw, 1.5rem) clamp(4rem, 9vw, 6rem);
    color: var(--ss-ink);
    background: var(--ss-surface);
    font-family: var(--brand-font-family, system-ui, -apple-system, sans-serif);
    font-size: 1.1875rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* One continuous column; sections are separated by vertical rhythm, not by bands. */
.slate-signal > header,
.slate-signal > section { margin: 0; }
.slate-signal > section { margin-top: clamp(2.75rem, 6vw, 3.5rem); }

.slate-signal h1,
.slate-signal h2,
.slate-signal h3 {
    font-family: var(--brand-font-family, system-ui, -apple-system, sans-serif);
    color: var(--ss-ink);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 0.75rem;
}

.slate-signal h1 { font-size: clamp(2rem, 6vw, 3rem); font-weight: 800; line-height: 1.12; margin-bottom: 1.25rem; }
.slate-signal h2 { font-size: clamp(1.5rem, 4vw, 1.95rem); font-weight: 700; margin-bottom: 1.125rem; }
.slate-signal h3 { font-size: 1.08rem; font-weight: 700; }

/* Item titles keep their compact size whatever heading level the outline assigns them. */
.slate-signal .ss-item-title { font-size: 1.08rem; font-weight: 700; }

/* Visually hidden but exposed to assistive technology (e.g. the comparison table's accessible name). */
.slate-signal .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.slate-signal p { margin: 0 0 1.125rem; color: var(--ss-ink); }
/* A body slot is a container of sanitized paragraphs (bold/italic allowed); its <p> inherit the
   container's colour, so a context that recolours the body (e.g. the dark CTA) carries to the text. */
.slate-signal .ss-body { color: var(--ss-body); }
.slate-signal .ss-body p { color: inherit; margin: 0 0 1rem; }
.slate-signal .ss-body p:last-child { margin-bottom: 0; }

/* Hero — left aligned, on the plain page surface (no band). */
.slate-signal .ss-eyebrow {
    font-family: var(--brand-font-family, system-ui, -apple-system, sans-serif);
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ss-signal-text);
    margin: 0 0 0.875rem;
}
.slate-signal .ss-sub {
    font-size: clamp(1.1rem, 2.6vw, 1.32rem);
    font-weight: 500;
    color: var(--ss-muted);
    margin-bottom: 1.75rem;
}
.slate-signal .ss-badges {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}
.slate-signal .ss-badge {
    background: var(--ss-surface-alt);
    border: 1px solid var(--ss-line);
    border-radius: var(--brand-shape-full);
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ss-ink);
}

/* Comparison table — muted "old way" column, signal-coloured "Omumu way" column, ✕/✓ markers. */
.slate-signal .ss-compare-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
    font-size: 0.98rem;
}
.slate-signal .ss-compare-table th,
.slate-signal .ss-compare-table td {
    text-align: left;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--ss-line);
    vertical-align: top;
}
.slate-signal .ss-compare-table thead th {
    font-family: var(--brand-font-family, system-ui, -apple-system, sans-serif);
    font-weight: 700;
    font-size: 0.9rem;
}
.slate-signal .ss-compare-table thead th:nth-child(2) { color: var(--ss-muted); }
.slate-signal .ss-compare-table thead th:last-child { color: var(--ss-signal-text); }
.slate-signal .ss-compare-table tbody th { font-weight: 600; color: var(--ss-muted); }
.slate-signal .ss-compare-table tbody td:last-child { font-weight: 600; color: var(--ss-ink); }
.slate-signal .ss-compare-table tbody td:nth-child(2)::before { content: "\2715\00a0"; color: var(--md-sys-color-outline); font-weight: 700; }
.slate-signal .ss-compare-table tbody td:last-child::before { content: "\2713\00a0"; color: var(--ss-signal-text); font-weight: 700; }

/* How it works — numbered steps (semantic <ol>). */
.slate-signal .ss-steps {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: ss-step;
    display: grid;
    gap: 1.25rem;
}
.slate-signal .ss-step {
    counter-increment: ss-step;
    position: relative;
    padding-left: 3rem;
}
.slate-signal .ss-step::before {
    content: counter(ss-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--ss-signal);
    color: var(--ss-signal-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--brand-font-family, system-ui, -apple-system, sans-serif);
    font-weight: 700;
}

/* Proof */
.slate-signal .ss-testimonials { display: grid; gap: 1.25rem; margin-top: 0.5rem; }
.slate-signal .ss-testimonial {
    background: var(--ss-surface-alt);
    border-left: 4px solid var(--ss-signal);
    border-radius: 0 var(--brand-shape-medium) var(--brand-shape-medium) 0;
    padding: 1.25rem 1.5rem;
}
.slate-signal .ss-quote {
    margin: 0 0 0.5rem;
    font-family: var(--brand-font-family, system-ui, -apple-system, sans-serif);
    font-weight: 600;
    font-style: italic;
    color: var(--ss-secondary);
    font-size: 1.0625rem;
}
/* The quote wraps its sanitized copy in paragraphs; keep them inline with the quote's own styling. */
.slate-signal .ss-quote p { color: inherit; margin: 0; }
.slate-signal .ss-cite { margin: 0; color: var(--ss-muted); font-weight: 600; font-size: 0.9375rem; }

/* What you get — a checklist: signal-coloured ✓ bullet, hairline between items. */
.slate-signal .ss-deliverables {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}
.slate-signal .ss-deliverable {
    position: relative;
    padding: 0.85rem 0 0.85rem 2rem;
    border-bottom: 1px solid var(--ss-line);
}
.slate-signal .ss-deliverable:last-child { border-bottom: none; }
.slate-signal .ss-deliverable::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0.85rem;
    color: var(--ss-signal-text);
    font-weight: 700;
}
.slate-signal .ss-deliverable .ss-item-title { margin-bottom: 0.25rem; }
.slate-signal .ss-deliverable .ss-body:last-child { margin-bottom: 0; }

/* CTA — dark focal block, signal button. */
.slate-signal .ss-cta {
    text-align: center;
    background: var(--ss-secondary);
    color: var(--md-sys-color-inverse-on-surface);
    border-radius: var(--brand-shape-large);
    padding: 2.75rem 1.75rem;
}
.slate-signal .ss-cta h1,
.slate-signal .ss-cta h2,
.slate-signal .ss-cta h3 { color: var(--md-sys-color-inverse-on-surface); }
.slate-signal .ss-cta .ss-body { color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 80%, var(--md-sys-color-inverse-surface)); }
.slate-signal .ss-cta-action { margin-top: 1.5rem; }
.slate-signal .ss-cta-action a,
.slate-signal .ss-cta-action .omumu-buy-button {
    display: inline-block;
    background: var(--ss-signal);
    color: var(--ss-signal-ink);
    text-decoration: none;
    font-family: var(--brand-font-family, system-ui, -apple-system, sans-serif);
    font-weight: 700;
    font-size: 1.15rem;
    padding: 1.05rem 2.75rem;
    border-radius: var(--brand-shape-large);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--md-sys-color-primary) 35%, transparent);
    transition: transform 0.05s ease;
}
/* Hover keeps the resting colors, whose contrast holds for every Brand, and marks itself with an underline. */
.slate-signal .ss-cta-action a:hover { text-decoration: underline; }
.slate-signal .ss-cta-action a:active { transform: translateY(1px); }
.slate-signal .ss-cta-action a:focus-visible {
    outline: 3px solid var(--md-sys-color-inverse-on-surface);
    outline-offset: 2px;
}

/* FAQ — open disclosures separated by hairlines. */
.slate-signal .ss-faq-list { display: grid; gap: 0; margin-top: 0.5rem; }
.slate-signal .ss-faq-item {
    border-top: 1px solid var(--ss-line);
    padding: 1.25rem 0;
}
.slate-signal .ss-faq-item:first-child { border-top: none; padding-top: 0; }
.slate-signal .ss-faq-item summary {
    cursor: pointer;
    font-family: var(--brand-font-family, system-ui, -apple-system, sans-serif);
    font-weight: 600;
    font-size: 1.05rem;
}
.slate-signal .ss-faq-answer { margin-top: 0.5rem; color: var(--ss-muted); }
/* The answer wraps its sanitized copy in paragraphs; inherit the muted colour and tighten spacing. */
.slate-signal .ss-faq-answer p { color: inherit; margin: 0 0 0.5rem; }
.slate-signal .ss-faq-answer p:last-child { margin-bottom: 0; }

/* Skip link parity with the platform pattern, scoped here since this is a minimal page. */
.slate-signal-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--md-sys-color-inverse-surface);
    color: var(--md-sys-color-inverse-on-surface);
    padding: 0.5rem 1rem;
    z-index: 1000;
    text-decoration: none;
}
.slate-signal-skip-link:focus {
    left: 0;
}

/* Mobile */
@media (max-width: 520px) {
    .slate-signal { font-size: 1.125rem; }
    .slate-signal .ss-cta-action a { display: block; }
}

/* ---------------------------------------------------------------------------
   Letter (.ss-letter) — the long-form personal letter (LetterTemplate).
   The base theme is already a letter column, so this only demotes the
   from-block, which is address matter rather than a heading, and sets the
   postscript apart the way a P.S. sits below the signature on paper.
   --------------------------------------------------------------------------- */

.ss-letter > section.ss-letterhead {
    margin-top: 0;
    color: var(--ss-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.ss-letter > section.ss-letterhead p {
    margin: 0.15rem 0;
}

.ss-letter > section.ss-postscript {
    border-top: 1px solid var(--ss-line);
    padding-top: clamp(1.25rem, 3vw, 1.75rem);
}

/* ---------------------------------------------------------------------------
   Opt-in form. The platform injects this markup (.optin-form / .form-field)
   on any page whose CTA is an application rather than a purchase, and the
   site's stylesheets are reverted inside the theme — so the theme owns its look. Type and
   spacing come from the theme's own scale; the button's colour deliberately
   does not, because that is per-form data (FormStyling.buttonColor), carried
   inline as !important so the site's !important opt-in button rules cannot
   replace it. The site's attribute-selector input rules (height, focus ring) and
   its button hover/focus rules outrank the revert, so the rules below reset them.
   --------------------------------------------------------------------------- */

.slate-signal .optin-form-fields {
    display: grid;
    gap: 1.1rem;
}

.slate-signal .form-field label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 500;
    font-size: 1rem;
    color: var(--ss-ink);
}

.slate-signal .form-field input,
.slate-signal .form-field textarea,
.slate-signal .form-field select {
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: auto;
    min-height: 0;
    padding: 0.7rem 0.8rem;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ss-ink);
    background: var(--ss-surface);
    border: 1px solid var(--ss-line);
    border-radius: var(--brand-shape-medium);
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

.slate-signal .form-field input:focus,
.slate-signal .form-field textarea:focus,
.slate-signal .form-field select:focus {
    border: 1px solid var(--ss-signal);
    box-shadow: none;
}

.slate-signal .form-field input:focus-visible,
.slate-signal .form-field textarea:focus-visible,
.slate-signal .form-field select:focus-visible {
    border-color: var(--ss-signal);
    outline: 2px solid var(--ss-signal);
    outline-offset: 1px;
}

.slate-signal .form-field input::placeholder,
.slate-signal .form-field textarea::placeholder {
    color: var(--ss-muted);
}

.slate-signal .optin-form button[type="submit"] {
    display: block;
    width: 100%;
    margin-top: 1.4rem;
    padding: 0.95rem 1.25rem;
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ss-signal-ink) !important;
    border: 0;
    border-radius: var(--brand-shape-medium);
    cursor: pointer;
}

.slate-signal .optin-form button[type="submit"]:hover,
.slate-signal .optin-form button[type="submit"]:focus {
    outline: none;
    box-shadow: none;
}

.slate-signal .optin-form button[type="submit"]:focus-visible {
    outline: 2px solid var(--ss-ink);
    outline-offset: 2px;
}

.slate-signal .ss-optin-cta-reassurance {
    margin-top: 0.85rem;
    color: var(--ss-muted);
    font-size: 0.95rem;
}