/* ═══════════════════════════════════════════════════════════════════════════
   sk-type.css — the type scale, and the section header that uses it
   ───────────────────────────────────────────────────────────────────────────
   OWNS:      the --sk-fs-* scale and the .sk-sec section header.
   REQUIRES:  sk-tokens.css.
   NEVER:     `!important`.

   THE PROBLEM THIS SOLVES
   A phone rendered 25 distinct font sizes on the home page. They were not a
   scale, they were rem fractions accumulated across 36 breakpoints in
   landing.css: 23.2, 15.2, 14.72, 14.4, 13.6, 13.5, 13.28, 12.8, 12.48, 12.16,
   11.84, 11.52, 9.92. Four of those are under the 12px functional floor.

   THE SCALE BELOW IS NOT NEW
   It is the scale the page already used for most of its text: 12, 13, 14, 15,
   17, 24, 28. 85% of the text was already on it. This snaps the strays onto the
   scale that was already dominant rather than imposing a different one, so the
   page changes as little as possible while becoming consistent.

   WHY A COMPONENT AND NOT AN OVERRIDE
   `.section-title` is 1.45rem `!important` at ≤767 and 1.35rem `!important` at
   ≤360; `.section-subtitle` is 0.9rem `!important`; `.section-tag` renders at
   11.2px. None of them can be corrected from a new file without `!important`,
   which the guardrail test forbids and which is the arms race this whole layer
   exists to avoid. So the elements are re-classed, exactly as the navbar, the
   buttons and the hero price line were. The legacy rules stay in landing.css,
   unused, and are recorded in the retirement ledger.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* 12px is the functional floor: anything a reader reads sits at or above
       it (UI_STANDARDS Part 3). Nothing below it belongs in this scale. */
    --sk-fs-meta:  0.75rem;     /* 12 — labels, chips, captions   */
    --sk-fs-sm:    0.8125rem;   /* 13 — dense body, secondary     */
    --sk-fs-body:  0.875rem;    /* 14 — body                      */
    --sk-fs-lead:  0.9375rem;   /* 15 — lead paragraphs           */
    --sk-fs-h3:    1.0625rem;   /* 17 — card titles               */
    --sk-fs-h2:    1.5rem;      /* 24 — section titles on mobile  */
    --sk-fs-h1:    1.75rem;     /* 28 — page titles on mobile     */
}

/* ── The section header ────────────────────────────────────────────────────
   Replaces .section-header / .section-tag / .section-title / .section-subtitle.
   Same shape as the original, so no section moves; only the sizes change, and
   only where they were off the scale. */
.sk-sec {
    text-align: center;
    margin-bottom: 20px;
}

.sk-sec__tag {
    display: inline-block;
    margin-bottom: 14px;
    padding: 5px 14px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, #EEF2FF, #E0E7FF);
    /* Was 0.7rem, which renders at 11.2px, under the floor. */
    font-size: var(--sk-fs-meta);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
}

.sk-sec__title {
    margin: 0;
    /* Fluid on desktop, exactly as before. The mobile step is set below rather
       than left to a chain of !important overrides. */
    font-size: clamp(1.65rem, 3.2vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.15;
    color: var(--text-main);
}

/* A <div>, not a <p>, and deliberately so. landing.css carries
   `#features p:not(.section-subtitle)` and the same for #how-it-works, forcing
   14px `!important` on every paragraph that is not the OLD subtitle class.
   Renaming the class made our subtitle match that rule, which would have left
   two sections at 14px while the other seven sat at 16.8px. A div cannot match
   `p:not(...)`, so this escapes it without an !important war. The <h2> above
   still carries the heading semantics. */
.sk-sec__sub {
    max-width: 600px;
    margin: 8px auto 0;
    font-size: 1.05rem;
    font-weight: 450;
    line-height: 1.7;
    color: var(--text-muted);
}

/* ── Dark sections ─────────────────────────────────────────────────────────
   landing.css restyled the legacy classes to white inside .pain-section and
   .final-cta-section. Renaming without reproducing these would have shipped
   near-black text on a near-black background, which is the single worst thing
   that could go wrong in a rename this wide. */
.pain-section .sk-sec__title { color: #fff; }
.pain-section .sk-sec__sub   { color: rgba(255, 255, 255, 0.5); }
.pain-section .sk-sec__tag {
    background: rgba(199, 210, 254, 0.14);
    color: #c7d2fe;
}

.final-cta-section .sk-sec__title { color: #fff; }
.final-cta-section .sk-sec__sub   { color: rgba(255, 255, 255, 0.6); }

/* The button sat directly against .sk-sec__sub with nothing between them —
   no rule anywhere set a gap, because the normal .sk-sec pattern is always
   followed by a grid that supplies its own top margin, and this section has
   no grid. Reads as the button touching the copy rather than a CTA. */
.final-cta-section .sk-btn { margin-top: 28px; }

/* Branded, not flat: both dark sections now share the same crafted gradient
   family the hero and ads page already use (#0f172a → indigo), rather than
   final-cta-section being the only one with real depth while pain-section
   sat on a single flat colour. Pain stays the darker, more subdued half of
   the pair — it is naming the problem, not making the pitch — and final-cta
   keeps its brighter, more purple close, already the answer to it. */
.pain-section {
    background: linear-gradient(165deg, #0a0e1a 0%, #141130 55%, #1e1b4b 100%);
}

.ads-bottom-cta .sk-sec__title { color: #fff; }

/* The fake address bar in the hero showcase rendered at 11.84px, under the
   floor, at every width rather than only on a phone. The floor is not a mobile
   rule, so neither is this correction. */
.showcase__path { font-size: var(--sk-fs-meta); }

/* The ads page's secondary "or book a 20-minute demo" link sat under a
   permanent underline — a deliberate choice at the time, since colour alone
   is a weak affordance on the dark CTA background it sits on. The founder's
   later instruction was blanket: no resting-state underline anywhere. Moving
   it to hover/focus keeps the distinction for anyone who can't see colour
   without leaving a line under it at rest. */
.ads-demo-link { text-decoration: none; }
.ads-demo-link:hover,
.ads-demo-link:focus-visible { text-decoration: underline; }

/* ── The step badge counter ────────────────────────────────────────────────
   It rendered at 9.92px, the smallest text on the site and well under the
   floor. Its old class carried five `!important` declarations, which landing.css
   documents as necessary because an older top-level rule kept turning the
   number into a 48px disc on top of the icon.

   Re-classing sidesteps that entirely: none of those rules can reach this
   element, so everything is declared once, plainly, with no `!important` at
   all. The circle grows 22 to 24px so 12px type sits in it without crowding. */
.sk-stepnum {
    position: absolute;
    top: -4px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 2px solid var(--bg-surface);
    border-radius: 50%;
    background: var(--primary);
    font-size: var(--sk-fs-meta);
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

@media (max-width: 767px) {
    .sk-sec { margin-bottom: 18px; }
    .sk-sec__title { font-size: var(--sk-fs-h2); }      /* was 23.2 */
    .sk-sec__sub   { font-size: var(--sk-fs-lead); }    /* was 14.4 */
}

/* ── Product page eyebrow + feature tag ──────────────────────────────────────
   Found in the full-site responsive sweep, not introduced by it: two more
   pills under the floor, both on every /product/<slug>/ page.

   `.prod-eyebrow` is 13px at rest but drops to 10.56px `!important` at ≤767 —
   a mobile-only violation. `.feature-tag` is 10.4px `!important` at every
   width, from an unrelated rule at landing.css:2247 that also happens to match
   this class name. Both need re-classing, not overriding, for the same reason
   `.sk-stepnum` above did: `!important` cannot be beaten from here without one
   of our own, which the guardrail test forbids.

   `.sk-eyebrow` still reads `--app` / `--app-bg` from the ancestor
   `.prod-hero[data-app]` — those are custom properties, so they inherit
   regardless of the element's class name and nothing here needs to redeclare
   them. `.sk-feature-tag` has no such ancestor, so its five-app colour map is
   copied over unchanged from `.feature-tag[data-app=...]` in landing.css. */
.sk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    background: var(--app-bg);
    color: var(--app);
    font-size: var(--sk-fs-sm);       /* 13 — was 13 at rest, 10.56 !important at ≤767 */
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sk-feature-tag {
    display: inline-block;
    padding: 5px 14px;
    border-radius: var(--radius-full);
    color: var(--primary);
    background: var(--primary-light);
    font-size: var(--sk-fs-meta);     /* 12 — was 10.4 !important at every width */
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.sk-feature-tag[data-app="crm"]       { color: #4f46e5; background: #eef2ff; }
.sk-feature-tag[data-app="tasks"]     { color: #1d4ed8; background: #eff6ff; }
.sk-feature-tag[data-app="invoice"],
.sk-feature-tag[data-app="invoicing"] { color: #047857; background: #ecfdf5; }
.sk-feature-tag[data-app="tickets"]   { color: #c2410c; background: #fff7ed; }
.sk-feature-tag[data-app="hr"]        { color: #a21caf; background: #fdf4ff; }
.sk-feature-tag[data-app="ai"],
.sk-feature-tag[data-app="synq"]      { color: #6d28d9; background: #f5f3ff; }

/* ═══════════════════════════════════════════════════════════════════════════
   STRAYS THAT NEEDED NO RE-CLASSING
   Everything below is set without `!important` in landing.css, so it can be
   corrected in place from here. Each line snaps one fractional size onto the
   scale; none of them changes a size by more than a pixel or two.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    /* Pricing card feature rows were 0.85rem, the single most repeated stray on
       the page at 21 occurrences. */
    .pricing-features li { font-size: var(--sk-fs-body); }

    /* The cost table's supporting figures: 12.16, 12.48 and 13.28. */
    .cmp-range   { font-size: var(--sk-fs-meta); }
    .cmp-basis   { font-size: var(--sk-fs-meta); }
    .cmp-seats   { font-size: var(--sk-fs-sm); }

    /* Product grid taglines were 13.5px. */
    .product-module-tagline { font-size: var(--sk-fs-body); }

    /* Mid page CTA strip: 20.8 and 14.4. */
    .mid-cta-strip h3 { font-size: 1.25rem; }
    .mid-cta-strip p  { font-size: var(--sk-fs-body); }

    /* Final CTA subtitle was 14.72. */
    .final-cta-section .sk-sec__sub { font-size: var(--sk-fs-body); }

    /* The rest of the strays, each snapped to its nearest scale step. Named
       individually rather than swept with a broad selector, so nothing is
       resized by accident. */
    .cmp-sources           { font-size: var(--sk-fs-meta); }   /* 12.16 */
    .cmp-side__note        { font-size: var(--sk-fs-meta); }   /* 12.48 */
    .coming-soon-disclaimer{ font-size: var(--sk-fs-meta); }   /* 12.48 */
    .pricing-scale-note    { font-size: var(--sk-fs-meta); }   /* 12.48 */
    .pricing-note          { font-size: var(--sk-fs-sm); }     /* 12.8  */
    .cmp-seats__val        { font-size: var(--sk-fs-lead); }   /* 15.2  */
    .hero-sub-xl           { font-size: var(--sk-fs-lead); }   /* 15.2  */
    .cmp-side__amt         { font-size: var(--sk-fs-h2); }     /* 25.6  */
    .cmp-save__amt         { font-size: var(--sk-fs-h1); }     /* 27.2  */
    .pricing-features li span { font-size: var(--sk-fs-body); }/* 13.6  */
    .value-prop-item span     { font-size: var(--sk-fs-body); }/* 13.6  */
    .cmp-save__per span       { font-size: var(--sk-fs-sm); }  /* 13.28 */
}

/* ── Four strays deliberately left alone ───────────────────────────────────
   `.hero-sub-xl` 15.2, `.mid-cta-strip h3` 20.8, `.mid-cta-strip p` 14.4 and
   `.product-module-tagline` 13.5 are each set with `!important` in landing.css,
   so correcting them means re-classing four more element groups. Every one of
   them is within about a pixel of its scale step and none is under the floor,
   so the change would be invisible while the surgery would be real. They are
   recorded in the retirement ledger and get corrected when those sections are
   rebuilt, not before. */