/* wp-content/mu-plugins/tssg-site/site.css */
/* Copyright (c) 2026 The Solo Software Group */

/*
 * Public marketing site for thesolosoftwaregroup.com.
 * Covers home, pricing, preview, legal, contact, and the FAQ band.
 *
 * STYLES.html is canonical. Every value below traces to a token in
 * its embedded design system block. No new colors, fonts, or radius
 * values without approval.
 *
 * Loaded from mu-plugins at wp_enqueue_scripts priority 999, so it
 * prints after everything the theme emits. That position plus
 * consistent .tssg-landing scoping is what earns the cascade
 * honestly instead of forcing it. See THEME INTEGRATION below for
 * the nine declarations that still need !important and why.
 */

/* ============================================================================
   TOKENS
   ============================================================================ */

:root {
    /* Brand */
    --navy:           #1B2D4F;
    --navy-mid:       #2D4470;
    --navy-deep:      #0D1829;
    --gold:           #C09A45;
    --gold-light:     #D4AF6A;
    --teal:           #4E8F8A;

    /* Surfaces */
    --fog:            #F5F7FA;
    --white:          #FFFFFF;
    --smoke:          #EEF1F6;

    /* Text */
    --text-primary:   #1A2740;
    --text-secondary: #5E6F87;
    --text-muted:     #9BA8BA;

    /* Status */
    --success:        #3A8E6E;
    --success-pale:   #E2F4EE;
    --error:          #B84040;
    --error-pale:     #FAEAEA;

    /* Typography */
    --font-ui:        'Outfit', 'Segoe UI', sans-serif;
    --font-display:   'Cormorant Garamond', Georgia, serif;

    /* Radius: badges, controls, panels */
    --radius-sm:      3px;
    --radius:         6px;
    --radius-lg:      10px;

    /* Elevation */
    --shadow-sm:      0 2px 8px rgba(27, 45, 79, 0.09);
    --shadow-md:      0 4px 18px rgba(27, 45, 79, 0.12);
    --shadow-focus:   0 0 0 3px rgba(45, 68, 112, 0.10);
    /* Screenshot lift, read against the navy plate behind it. */
    --shadow-shot:    0 4px 18px rgba(13, 24, 41, 0.35);

    /* Motion */
    --t-base:         0.15s ease;
}

/* ============================================================================
   THEME INTEGRATION

   The only !important in this file. Nine declarations across five
   rules, down from 452.

   A declaration keeps !important here only when it has to beat
   something we do not control and cannot out-specify:

   1. Inline styles written by third party JavaScript. An author
      !important declaration is the only thing in the cascade that
      beats a normal inline style, at any specificity.
   2. Selectors Kadence generates from Customizer settings. Those are
      deeply nested and change shape whenever settings are saved, so
      matching them by specificity means guessing at markup that is
      not ours and re-guessing after every save.
   3. Theme-rendered markup we are hiding, where being wrong shows up
      as a visible regression on every page rather than a subtle one.

   None of these live inside .tssg-landing. There is no wrapper to
   scope them to, which is precisely what makes them the exceptions.
   Everything below this section drops it.
   ============================================================================ */

/* Container constraints. Kadence emits the content width from
   Customizer settings, so the selector that sets it is generated and
   not stable. Full bleed bands cannot exist until it is off. */
.entry-content-wrap,
.entry-content,
.content-container,
.site-container .content-area,
.site-main .entry-content {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}

/* Page titles. Every landing page supplies its own hero, so the
   theme title is a duplicate heading. A title reappearing on all
   seven pages is the loud kind of regression. */
.home .entry-header,
.home .page-title,
.home .entry-title {
    display: none !important;
}

.page .entry-header,
.page .entry-title {
    display: none !important;
}

/* Header links. Kadence sets menu link color through a generated
   selector six classes deep. This is the "nuclear nav fix" from the
   original sheet, consolidated from five rules to two.

   The cleaner long term fix is to set these colors in Customizer >
   Header > Navigation and delete both rules. */
header a,
header a:visited,
header a:active,
#masthead a,
#masthead a:visited,
.site-header-wrap a,
.site-header-wrap a:visited {
    color: var(--white) !important;
}

header a:hover,
#masthead a:hover,
.site-header-wrap a:hover,
.site-header nav a:hover,
.site-header .current-menu-item a {
    color: var(--gold-light) !important;
}

/* Footer link states. Kadence paints visited and unvisited the same,
   so there is no signal for where you have been or where you are.
   :visited accepts colour only, and only fully opaque values, which
   is why these are flat tokens rather than an alpha. No !important:
   these are additive, not overrides, so ordinary specificity wins. */
.site-footer a:visited {
    color: var(--text-muted);
}

.site-footer .current-menu-item a,
.site-footer .current_page_item a {
    color: var(--gold);
}

/* reCAPTCHA v3 is invisible, so its badge is noise. Google's script
   writes the badge position as an inline style on the element, and
   an inline style loses only to an author !important. */
.grecaptcha-badge {
    visibility: hidden !important;
}

/* ============================================================================
   BASE
   ============================================================================ */

.tssg-landing {
    font-family: var(--font-ui);
    color: var(--text-primary);
    line-height: 1.6;
    max-width: 100%;
    overflow-x: hidden;
}

/*
 * Element level reset, not universal. `.tssg-landing *` scores 0,1,0
 * and loses to any theme rule that names an element, such as
 * `.entry-content p` at 0,1,1. That one miss is why the original
 * sheet needed !important on nearly every margin declaration.
 * Naming the elements scores 0,1,1, which ties those rules and wins
 * on load order. This rule is the reason the rest of the file is
 * clean.
 */
.tssg-landing h1,
.tssg-landing h2,
.tssg-landing h3,
.tssg-landing p,
.tssg-landing ul,
.tssg-landing li {
    margin: 0;
    padding: 0;
}

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

.tssg-landing img {
    max-width: 100%;
    height: auto;
}

/* Full bleed bands. 100vw against a centered container, with
   overflow-x hidden on the wrapper absorbing the scrollbar width. */
.tssg-landing .tssg-audience-bar,
.tssg-landing .tssg-hero,
.tssg-landing .tssg-features,
.tssg-landing .tssg-pillars,
.tssg-landing .tssg-pricing,
.tssg-landing .tssg-about,
.tssg-landing .tssg-pricing-hero,
.tssg-landing .tssg-preview-hero,
.tssg-landing .tssg-preview-body,
.tssg-landing .tssg-legal-hero,
.tssg-landing .tssg-legal-body,
.tssg-landing .tssg-contact-hero,
.tssg-landing .tssg-contact-body,
.tssg-landing .tssg-cross-link,
.tssg-landing .tssg-faq {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

/* ============================================================================
   AUDIENCE BAR

   Sits above the hero on the developer home page and points the wrong
   reader at the right page. One line, no button styling, so it never
   competes with the gold arrow CTA below it.
   ============================================================================ */

.tssg-landing .tssg-audience-bar {
    display: block;
    padding: 11px 20px;
    background: var(--navy-deep);
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.6);
    transition: background var(--t-base);
}

.tssg-landing .tssg-audience-bar strong {
    font-weight: 600;
    color: var(--gold-light);
}

.tssg-landing .tssg-audience-bar:hover {
    background: var(--navy);
}

.tssg-landing .tssg-audience-bar:focus-visible {
    outline: 2px solid var(--gold-light);
    outline-offset: -4px;
}

/* ============================================================================
   HERO BANDS

   One primitive, five heroes. Attached by selector list rather than a
   shared class so the pricing, legal, and contact pages inherit the
   token refresh and the orbs without any markup change.
   ============================================================================ */

.tssg-landing .tssg-hero,
.tssg-landing .tssg-pricing-hero,
.tssg-landing .tssg-preview-hero,
.tssg-landing .tssg-legal-hero,
.tssg-landing .tssg-contact-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 52px 20px 44px;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
}

/* Gold orb, top right. */
.tssg-landing .tssg-hero::before,
.tssg-landing .tssg-pricing-hero::before,
.tssg-landing .tssg-preview-hero::before,
.tssg-landing .tssg-legal-hero::before,
.tssg-landing .tssg-contact-hero::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -80px;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(192, 154, 69, 0.18) 0%, transparent 70%);
}

/* Teal orb, bottom left. */
.tssg-landing .tssg-hero::after,
.tssg-landing .tssg-pricing-hero::after,
.tssg-landing .tssg-preview-hero::after,
.tssg-landing .tssg-legal-hero::after,
.tssg-landing .tssg-contact-hero::after {
    content: '';
    position: absolute;
    bottom: -120px;
    left: -60px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(78, 143, 138, 0.15) 0%, transparent 70%);
}

/* Hero content sits above both orbs. */
.tssg-landing .tssg-hero-eyebrow,
.tssg-landing .tssg-hero h1,
.tssg-landing .tssg-pricing-hero h1,
.tssg-landing .tssg-preview-hero h1,
.tssg-landing .tssg-legal-hero h1,
.tssg-landing .tssg-contact-hero h1,
.tssg-landing .tssg-hero-sub,
.tssg-landing .tssg-hero .tssg-arrow-btn-group {
    position: relative;
    z-index: 1;
}

.tssg-landing .tssg-hero-eyebrow {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-bottom: 14px;
}

.tssg-landing .tssg-hero h1,
.tssg-landing .tssg-pricing-hero h1,
.tssg-landing .tssg-preview-hero h1,
.tssg-landing .tssg-legal-hero h1,
.tssg-landing .tssg-contact-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(28px, 5vw, 42px);
    font-weight: 500;
    line-height: 1.1;
    color: var(--white);
    margin-bottom: 12px;
}

/* The home hero carries the page, so it runs one step larger. */
.tssg-landing .tssg-hero h1 {
    font-size: clamp(32px, 6vw, 52px);
}

.tssg-landing .tssg-hero h1 em,
.tssg-landing .tssg-pricing-hero h1 em,
.tssg-landing .tssg-preview-hero h1 em,
.tssg-landing .tssg-legal-hero h1 em,
.tssg-landing .tssg-contact-hero h1 em {
    font-style: italic;
    color: var(--gold-light);
}

.tssg-landing .tssg-hero-sub {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.55);
    max-width: 540px;
    margin: 0 auto;
}

/* Space below the subhead only when a CTA follows it. */
.tssg-landing .tssg-hero .tssg-hero-sub {
    margin-bottom: 30px;
}

/* ============================================================================
   SECTIONS
   ============================================================================ */

.tssg-landing .tssg-section {
    max-width: 1080px;
    margin: 0 auto;
    padding: 48px 20px;
}

.tssg-landing .tssg-section-label {
    width: fit-content;
    margin: 0 auto 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--smoke);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.tssg-landing .tssg-section h2 {
    font-family: var(--font-display);
    font-size: clamp(26px, 4vw, 36px);
    font-weight: 500;
    line-height: 1.15;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 12px;
}

/* Display italic. One of the four places gold is earned. */
.tssg-landing .tssg-section h2 em {
    font-style: italic;
    color: var(--gold);
}

.tssg-landing .tssg-section-desc {
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-secondary);
    text-align: center;
    max-width: 560px;
    margin: 0 auto 36px;
}

/* ============================================================================
   CARDS

   White on a fog canvas, transparent border that resolves to smoke on
   hover, shadow-sm at rest and shadow-md on lift.
   ============================================================================ */

.tssg-landing .tssg-feature-card,
.tssg-landing .tssg-price-card,
.tssg-landing .tssg-preview-card {
    background: var(--white);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition:
        box-shadow var(--t-base),
        border-color var(--t-base),
        transform var(--t-base);
}

.tssg-landing .tssg-feature-card:hover,
.tssg-landing .tssg-price-card:hover,
.tssg-landing .tssg-preview-card:hover {
    border-color: var(--smoke);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* ============================================================================
   ARROW BUTTON

   The product's signature control, lifted from STYLES.html and
   prefixed for the site. Used exactly twice: the home hero CTA and
   the preview page close. Using it anywhere else spends the
   signature.
   ============================================================================ */

.tssg-landing .tssg-arrow-btn-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 340px;
}

.tssg-landing .tssg-arrow-btn-group--center {
    margin-left: auto;
    margin-right: auto;
}

.tssg-landing .tssg-arrow-btn {
    display: flex;
    align-items: stretch;
    height: 54px;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: box-shadow var(--t-base), transform var(--t-base);
}

.tssg-landing .tssg-arrow-btn:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.tssg-landing .tssg-arrow-btn:active {
    transform: translateY(0);
}

.tssg-landing .tssg-arrow-btn:focus-visible {
    outline: 2px solid var(--gold-light);
    outline-offset: 3px;
}

.tssg-landing .tssg-arrow-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    flex-shrink: 0;
}

/* The chevron point, clipped out of a rectangle and overlapped onto
   the label panel. */
.tssg-landing .tssg-arrow-icon::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -16px;
    width: 32px;
    z-index: 2;
    clip-path: polygon(0 0, 50% 50%, 0 100%);
}

.tssg-landing .tssg-arrow-icon svg {
    position: relative;
    z-index: 3;
    color: var(--white);
}

.tssg-landing .tssg-arrow-label {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 20px 0 26px;
    background: var(--navy);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white);
}

.tssg-landing .tssg-arrow-btn--gold .tssg-arrow-icon,
.tssg-landing .tssg-arrow-btn--gold .tssg-arrow-icon::after {
    background: var(--gold);
}

/* ============================================================================
   HOME: FEATURES
   ============================================================================ */

.tssg-landing .tssg-features {
    background: var(--fog);
}

.tssg-landing .tssg-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.tssg-landing .tssg-feature-card {
    padding: 26px 22px;
}

/* Teal, not gold. Six identical gold glyphs is decorative gold, and
   gold is reserved for the hero CTA, the featured plan, the display
   italic, and the eyebrow. */
.tssg-landing .tssg-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
    border-radius: var(--radius);
    background: var(--navy);
    color: var(--teal);
}

.tssg-landing .tssg-feature-card h3 {
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.tssg-landing .tssg-feature-card p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-secondary);
}

/* ============================================================================
   HOME: PILLARS

   Deliberately not cards. The page already has a card grid above and
   a card grid below, so the pillars read as a numbered band instead.
   ============================================================================ */

.tssg-landing .tssg-pillars {
    background: var(--white);
}

.tssg-landing .tssg-pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 24px;
}

/* Six pillars need a 300px floor to resolve to three columns. At the
   230px default they resolve to four and leave a two item orphan row. */
.tssg-landing .tssg-pillars-grid--wide {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.tssg-landing .tssg-pillar {
    padding-top: 16px;
    border-top: 2px solid var(--teal);
}

.tssg-landing .tssg-pillar-num {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    color: var(--teal);
    margin-bottom: 10px;
}

.tssg-landing .tssg-pillar h3 {
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.tssg-landing .tssg-pillar p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ============================================================================
   COMPARISON STRIP

   Sits above the plan grid on the developer page. Rows rather than a
   table: a three column table at 320px is unreadable, and the seat
   count has to be visible or the comparison is both misleading and
   weaker than the truth.
   ============================================================================ */

.tssg-landing .tssg-compare {
    max-width: 620px;
    margin: 0 auto 36px;
}

.tssg-landing .tssg-compare-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--smoke);
}

.tssg-landing .tssg-compare-row:last-child {
    border-bottom: none;
}

.tssg-landing .tssg-compare-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.tssg-landing .tssg-compare-seats {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted);
    margin-top: 2px;
}

.tssg-landing .tssg-compare-price {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-secondary);
    white-space: nowrap;
}

.tssg-landing .tssg-compare-price span {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
}

/* Our row. Gold left rule is the featured plan language reused, which
   is one of the four places gold is earned. */
.tssg-landing .tssg-compare-row--ours {
    border-bottom: none;
    border-left: 3px solid var(--gold);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--white);
}

.tssg-landing .tssg-compare-row--ours .tssg-compare-price {
    color: var(--navy);
}

.tssg-landing .tssg-compare-note {
    max-width: 620px;
    margin: 0 auto 36px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-muted);
    text-align: center;
}

/* ============================================================================
   CROSS PAGE LINK

   Points a reader at the page written in the other voice. One per
   page, at the end, never in navigation.
   ============================================================================ */

.tssg-landing .tssg-cross-link {
    padding: 32px 20px 40px;
    text-align: center;
    background: var(--fog);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.tssg-landing .tssg-cross-link a,
.tssg-landing .tssg-cross-link a:visited {
    font-weight: 600;
    color: var(--navy-mid);
    text-decoration: none;
}

.tssg-landing .tssg-cross-link a:hover {
    color: var(--gold);
}

/* ============================================================================
   PRICING GRID
   ============================================================================ */

.tssg-landing .tssg-pricing {
    background: var(--fog);
}

.tssg-landing .tssg-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
}

.tssg-landing .tssg-price-card {
    display: flex;
    flex-direction: column;
    padding: 34px 24px 30px;
    text-align: center;
}

/* Featured plan. The second of the four places gold is earned. */
.tssg-landing .tssg-price-card.tssg-featured {
    position: relative;
    border: 2px solid var(--gold);
}

.tssg-landing .tssg-price-card.tssg-featured:hover {
    border-color: var(--gold);
}

.tssg-landing .tssg-price-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 16px;
    border-radius: var(--radius-sm);
    background: var(--gold);
    color: var(--white);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tssg-landing .tssg-price-card h3 {
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.tssg-landing .tssg-price-amount {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--navy);
    margin-bottom: 4px;
}

.tssg-landing .tssg-price-amount span {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 400;
    color: var(--text-muted);
}

.tssg-landing .tssg-price-desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-secondary);
    margin-bottom: 22px;
}

.tssg-landing .tssg-price-features {
    flex-grow: 1;
    list-style: none;
    text-align: left;
    margin-bottom: 26px;
}

.tssg-landing .tssg-price-features li {
    position: relative;
    list-style: none;
    padding: 6px 0 6px 22px;
    border-bottom: 1px solid var(--smoke);
    font-size: 13px;
    color: var(--text-primary);
}

.tssg-landing .tssg-price-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--teal);
    opacity: 0.6;
}

/* Coming-soon states render as inert spans. The anchor rules below
   take over at Phase 5 when the Freemius links go live. */
.tssg-landing .tssg-price-btn {
    display: inline-block;
    padding: 12px 26px;
    border-radius: var(--radius);
    font-family: var(--font-ui);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    cursor: default;
    transition: background var(--t-base), transform var(--t-base);
}

.tssg-landing .tssg-price-btn-navy {
    background: var(--navy);
    color: var(--white);
}

.tssg-landing .tssg-price-btn-gold {
    background: var(--gold);
    color: var(--white);
}

.tssg-landing .tssg-price-btn-outline {
    background: transparent;
    color: var(--navy);
    border: 1.5px solid var(--navy);
}

/* Live plan buttons. State colors are pinned across every link state
   so theme link color never bleeds into a filled button. */
.tssg-landing a.tssg-price-btn,
.tssg-landing a.tssg-price-btn:visited {
    cursor: pointer;
}

.tssg-landing a.tssg-price-btn:hover {
    transform: translateY(-1px);
}

.tssg-landing a.tssg-price-btn-navy,
.tssg-landing a.tssg-price-btn-navy:visited,
.tssg-landing a.tssg-price-btn-navy:hover,
.tssg-landing a.tssg-price-btn-navy:focus,
.tssg-landing a.tssg-price-btn-navy:active {
    color: var(--white);
}

.tssg-landing a.tssg-price-btn-navy:hover {
    background: var(--navy-mid);
}

.tssg-landing a.tssg-price-btn-gold,
.tssg-landing a.tssg-price-btn-gold:visited,
.tssg-landing a.tssg-price-btn-gold:hover,
.tssg-landing a.tssg-price-btn-gold:focus,
.tssg-landing a.tssg-price-btn-gold:active {
    color: var(--white);
}

.tssg-landing a.tssg-price-btn-gold:hover {
    background: var(--gold-light);
}

/* Link from the home pricing band to the full pricing page. */
.tssg-landing .tssg-pricing-more {
    text-align: center;
    margin: 26px auto 0;
    font-size: 14px;
}

.tssg-landing .tssg-pricing-more a,
.tssg-landing .tssg-pricing-more a:visited {
    color: var(--navy-mid);
    font-weight: 600;
    text-decoration: none;
}

.tssg-landing .tssg-pricing-more a:hover {
    color: var(--gold);
}

/* Notes strip under the pricing page grid. */
.tssg-landing .tssg-pricing-notes {
    max-width: 680px;
    margin: 32px auto 0;
    text-align: center;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* ============================================================================
   HOME: ABOUT BAND
   ============================================================================ */

.tssg-landing .tssg-about {
    padding: 52px 20px;
    text-align: center;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
}

.tssg-landing .tssg-about h2 {
    font-family: var(--font-display);
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 500;
    color: var(--white);
    text-align: center;
    margin-bottom: 16px;
}

.tssg-landing .tssg-about h2 em {
    font-style: italic;
    color: var(--gold-light);
}

.tssg-landing .tssg-about p {
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.55);
    max-width: 600px;
    margin: 0 auto 8px;
}

.tssg-landing .tssg-about-note {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 22px;
}

/* ============================================================================
   PREVIEW PAGE
   ============================================================================ */

.tssg-landing .tssg-preview-body {
    background: var(--fog);
    padding: 44px 20px 64px;
}

.tssg-landing .tssg-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
}

.tssg-landing .tssg-preview-card {
    overflow: hidden;
}

/* Navy plate behind the shot so a phone capture reads as a device
   frame rather than a floating rectangle. */
.tssg-landing .tssg-preview-shot {
    display: flex;
    justify-content: center;
    padding: 16px 16px 0;
    background: var(--navy);
}

.tssg-landing .tssg-preview-shot img {
    max-height: 460px;
    object-fit: contain;
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: var(--shadow-shot);
}

.tssg-landing .tssg-preview-caption {
    padding: 18px 20px 22px;
}

.tssg-landing .tssg-preview-caption h3 {
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.tssg-landing .tssg-preview-caption p {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-secondary);
}

/* Work in progress notice. Sits under the grid as context, not above
   it as a disclaimer the reader hits before seeing anything. */
.tssg-landing .tssg-preview-notice {
    max-width: 720px;
    margin: 40px auto 0;
    padding: 14px 20px;
    border: 1px solid var(--smoke);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius);
    background: var(--white);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.55;
    color: var(--text-secondary);
    text-align: center;
}

.tssg-landing .tssg-preview-close {
    max-width: 720px;
    margin: 40px auto 0;
    text-align: center;
}

.tssg-landing .tssg-preview-close h2 {
    font-family: var(--font-display);
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.tssg-landing .tssg-preview-close p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-secondary);
    max-width: 520px;
    margin: 0 auto 26px;
}

/* ============================================================================
   CONTACT PAGE
   ============================================================================ */

.tssg-landing .tssg-contact-body {
    background: var(--fog);
    padding: 44px 20px 60px;
}

.tssg-landing .tssg-contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 960px;
    margin: 0 auto;
}

.tssg-landing .tssg-contact-info h2,
.tssg-landing .tssg-contact-form-wrap h2 {
    font-family: var(--font-ui);
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: left;
    margin-bottom: 22px;
}

.tssg-landing .tssg-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
}

.tssg-landing .tssg-contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: var(--radius);
    background: var(--white);
    border: 1px solid var(--smoke);
    font-size: 16px;
    color: var(--teal);
}

.tssg-landing .tssg-contact-label {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.tssg-landing .tssg-contact-link {
    font-size: 14px;
    color: var(--navy-mid);
    text-decoration: none;
    word-break: break-word;
}

.tssg-landing .tssg-contact-link:hover {
    color: var(--gold);
}

.tssg-landing .tssg-contact-text {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-secondary);
}

.tssg-landing .tssg-contact-hours {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--smoke);
}

.tssg-landing .tssg-contact-form-wrap {
    background: var(--white);
    border: 1px solid var(--smoke);
    border-radius: var(--radius-lg);
    padding: 28px 22px;
}

/* ============================================================================
   CONTACT FORM 7
   ============================================================================ */

.tssg-landing .tssg-contact-form-wrap .wpcf7 label {
    display: block;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.tssg-landing .tssg-contact-form-wrap .wpcf7 input[type="text"],
.tssg-landing .tssg-contact-form-wrap .wpcf7 input[type="email"],
.tssg-landing .tssg-contact-form-wrap .wpcf7 textarea {
    width: 100%;
    margin-top: 4px;
    padding: 10px 14px;
    border: 1.5px solid var(--smoke);
    border-radius: var(--radius);
    background: var(--white);
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--text-primary);
    transition: border-color var(--t-base), box-shadow var(--t-base);
}

/* Navy focus ring, per the design system. The previous gold ring was
   drift: gold is not a focus color anywhere in the product. */
.tssg-landing .tssg-contact-form-wrap .wpcf7 input[type="text"]:focus,
.tssg-landing .tssg-contact-form-wrap .wpcf7 input[type="email"]:focus,
.tssg-landing .tssg-contact-form-wrap .wpcf7 textarea:focus {
    outline: none;
    border-color: var(--navy-mid);
    box-shadow: var(--shadow-focus);
}

.tssg-landing .tssg-contact-form-wrap .wpcf7 input::placeholder,
.tssg-landing .tssg-contact-form-wrap .wpcf7 textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

.tssg-landing .tssg-contact-form-wrap .wpcf7 textarea {
    min-height: 140px;
    resize: vertical;
}

.tssg-landing .tssg-contact-form-wrap .wpcf7 input[type="submit"] {
    width: 100%;
    margin-top: 8px;
    padding: 13px 26px;
    border: none;
    border-radius: var(--radius);
    background: var(--navy);
    font-family: var(--font-ui);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--white);
    cursor: pointer;
    transition: background var(--t-base), transform var(--t-base);
}

.tssg-landing .tssg-contact-form-wrap .wpcf7 input[type="submit"]:hover {
    background: var(--navy-mid);
    transform: translateY(-1px);
}

.tssg-landing .tssg-contact-form-wrap .wpcf7-not-valid-tip {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--error);
    margin-top: 4px;
}

.tssg-landing .tssg-contact-form-wrap .wpcf7-not-valid {
    border-color: var(--error);
}

.tssg-landing .tssg-contact-form-wrap .wpcf7 .wpcf7-response-output {
    font-family: var(--font-ui);
    font-size: 13px;
    border-radius: var(--radius);
    padding: 12px 16px;
    margin: 16px 0 0;
}

.tssg-landing .tssg-contact-form-wrap .wpcf7 .wpcf7-response-output.wpcf7-mail-sent-ok {
    border-color: var(--success);
    background: var(--success-pale);
    color: var(--success);
}

.tssg-landing .tssg-contact-form-wrap .wpcf7 .wpcf7-response-output.wpcf7-validation-errors {
    border-color: var(--error);
    background: var(--error-pale);
    color: var(--error);
}

.tssg-landing .tssg-contact-form-wrap .wpcf7-spinner {
    display: block;
    margin: 12px auto 0;
}

/* ============================================================================
   LEGAL PAGES
   ============================================================================ */

.tssg-landing .tssg-legal-body {
    background: var(--white);
    padding: 44px 20px 64px;
}

.tssg-landing .tssg-legal-content {
    max-width: 720px;
    margin: 0 auto;
}

.tssg-landing .tssg-legal-content h2 {
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: left;
    margin: 36px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--smoke);
}

.tssg-landing .tssg-legal-content h3 {
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 20px 0 8px;
}

.tssg-landing .tssg-legal-content p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 14px;
}

.tssg-landing .tssg-legal-content p strong {
    font-weight: 600;
    color: var(--text-primary);
}

.tssg-landing .tssg-legal-content a,
.tssg-landing .tssg-legal-content a:visited {
    color: var(--navy-mid);
    text-decoration: none;
}

.tssg-landing .tssg-legal-content a:hover {
    color: var(--gold);
}

.tssg-landing .tssg-legal-footer {
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid var(--smoke);
}

.tssg-landing .tssg-legal-footer p {
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}

/* ============================================================================
   FAQ
   ============================================================================ */

.tssg-landing .tssg-faq {
    background: var(--white);
}

.tssg-landing .tssg-faq-item {
    max-width: 720px;
    margin: 0 auto;
    padding: 20px 0;
    border-bottom: 1px solid var(--smoke);
    text-align: left;
}

.tssg-landing .tssg-faq-item h3 {
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.tssg-landing .tssg-faq-item p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.tssg-landing .tssg-faq-item a,
.tssg-landing .tssg-faq-item a:visited {
    color: var(--navy-mid);
    text-decoration: none;
}

.tssg-landing .tssg-faq-item a:hover {
    color: var(--gold);
}

/* ============================================================================
   FOOTER DEVELOPER LINE

   Sits in the theme footer, not in page content, so it inherits the
   footer's own text color rather than declaring one. That keeps it
   readable whether the footer is light or dark.
   ============================================================================ */

.tssg-footer-dev {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.tssg-footer-dev p {
    font-family: var(--font-ui);
    font-size: 13px;
    line-height: 1.6;
    color: inherit;
    opacity: 0.8;
}

.tssg-footer-dev a,
.tssg-footer-dev a:visited {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--t-base);
}

.tssg-footer-dev a:hover {
    color: var(--gold);
}

/* ============================================================================
   RESPONSIVE

   Mobile first. The base above is the phone layout, which is the
   reader this site is built for. Every grid uses auto-fit with a
   minmax floor, so column counts resolve themselves and the queries
   below only handle spacing, the contact split, and hero scale.
   ============================================================================ */

@media (min-width: 600px) {

    .tssg-landing .tssg-hero,
    .tssg-landing .tssg-pricing-hero,
    .tssg-landing .tssg-preview-hero,
    .tssg-landing .tssg-legal-hero,
    .tssg-landing .tssg-contact-hero {
        padding: 64px 24px 56px;
    }

    .tssg-landing .tssg-hero {
        padding: 76px 24px 68px;
    }

    .tssg-landing .tssg-section {
        padding: 60px 24px;
    }

    .tssg-landing .tssg-about {
        padding: 60px 24px;
    }

    .tssg-landing .tssg-features-grid {
        gap: 20px;
    }

    .tssg-landing .tssg-pricing-grid,
    .tssg-landing .tssg-preview-grid {
        gap: 24px;
    }

    .tssg-landing .tssg-preview-body,
    .tssg-landing .tssg-contact-body,
    .tssg-landing .tssg-legal-body {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (min-width: 900px) {

    .tssg-landing .tssg-contact-grid {
        grid-template-columns: 1fr 1.4fr;
        gap: 44px;
    }

    .tssg-landing .tssg-pillars-grid {
        gap: 28px;
    }

    .tssg-landing .tssg-feature-card {
        padding: 28px 24px;
    }

    .tssg-landing .tssg-contact-form-wrap {
        padding: 32px 28px;
    }
}

@media (min-width: 1200px) {

    .tssg-landing .tssg-hero {
        padding: 92px 24px 84px;
    }

    .tssg-landing .tssg-section {
        padding: 72px 24px;
    }
}

/* Motion preference. Every transform in this file is a 1px lift, so
   removing them costs nothing and respects the setting. */
@media (prefers-reduced-motion: reduce) {

    .tssg-landing *,
    .tssg-landing *::before,
    .tssg-landing *::after {
        transition-duration: 0.01ms;
        animation-duration: 0.01ms;
    }

    .tssg-landing .tssg-arrow-btn:hover,
    .tssg-landing .tssg-feature-card:hover,
    .tssg-landing .tssg-price-card:hover,
    .tssg-landing .tssg-preview-card:hover,
    .tssg-landing a.tssg-price-btn:hover,
    .tssg-landing .tssg-contact-form-wrap .wpcf7 input[type="submit"]:hover {
        transform: none;
    }
}

/* ============================================================================
   INLINE LINK UNDERLINES


   Every inline link on the site was --navy-mid with no underline, sitting
   in --text-secondary body copy. That is #2D4470 against #5E6F87, which
   on a phone reads as slightly darker text rather than a link.

   Underlines go on links that sit inside a sentence. Standalone link
   lines keep no underline, because their position on their own line
   already makes them obviously clickable: .tssg-pricing-more and
   .tssg-contact-link are deliberately excluded.

   These rules match the specificity of the ones they override and sit
   later in the file, so they win on source order. No !important.

   The :visited variants are omitted on purpose. Browsers restrict
   :visited to colour properties only, so text-decoration on :visited is
   inert either way, and the base rule already covers visited links.
   ============================================================================ */

.tssg-landing .tssg-faq-item a,
.tssg-landing .tssg-legal-content a,
.tssg-landing .tssg-cross-link a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ============================================================================
   STATEMENT BAND

   The "why this exists" argument, between the hero and the pillars. No
   cards and no grid, because it is a claim rather than a list, and it
   sets the pillars up instead of competing with them.

   Full bleed declared inline rather than joining the shared selector
   list, so the rule can be pasted without editing anything above it.
   ============================================================================ */

.tssg-landing .tssg-statement {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    background: var(--fog);
}

.tssg-landing .tssg-statement .tssg-section {
    max-width: 760px;
}

.tssg-landing .tssg-statement p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.tssg-landing .tssg-statement p:last-child {
    margin-bottom: 0;
}

/* ============================================================================
   HEADER AND DRAWER FIXES

   Paste at the very end of site.css. Nothing to remove.
   ============================================================================ */

/* The white gap under the header. The container rule higher up kills
   padding-left and padding-right but never padding-top, so Kadence's
   content top spacing survives and pushes the first band down. Same
   selectors, all four sides. */
.entry-content-wrap,
.entry-content,
.content-container,
.site-container .content-area,
.site-main .entry-content {
    padding: 0 !important;
}

/* Mobile drawer links. The drawer renders outside <header>, so the
   header rules further up never reach it and Kadence colours it from
   its own generated selectors. */
#mobile-drawer a,
#mobile-drawer a:visited,
#mobile-drawer .menu-item a,
#mobile-drawer .menu-item a:visited,
.mobile-navigation a,
.mobile-navigation a:visited {
    color: var(--white) !important;
}

#mobile-drawer .current-menu-item a,
.mobile-navigation .current-menu-item a {
    color: var(--gold-light) !important;
}