/* ─────────────────────────────────────────────────────────────────────────────
   Making forty-five tools look like one product.

   The suite's screens were written over months, each rendering the marketing
   site's furniture: a full-bleed gradient hero, then `.section { padding: 5rem 0 }`,
   then a 1140px centred container. That is right for a landing page read once by
   a stranger and wrong for a tool used forty times a day by somebody who already
   knows what it is — a third of a laptop screen is spent on a title before any
   work appears, and every screen announces itself as though you had just arrived.

   Rather than edit forty-five files and miss some, the shell restyles the
   furniture they already render. Every rule here is scoped under .app-shell, so
   the marketing site is untouched and keeps its hero exactly as it was.

   THE REFERENCE IS THE CRM. Chuck's words: "the new CRM looks good, make it all
   look like that." So: white surfaces, one hairline rule between regions, navy
   headings at a working size, red reserved for the thing that needs attention,
   and the content starting near the top of the window.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── The page header ──────────────────────────────────────────────────────── */

.app-shell .page-hero {
    /* Was a navy gradient 4.5rem tall. On a tool it is a title bar, not a hero. */
    background: #fff;
    color: var(--text, #16202e);
    border-bottom: 1px solid #e6eaf1;
    padding: 1.1rem 0 0.95rem;
    text-align: left;
}

.app-shell .page-hero .container {
    text-align: left;
}

.app-shell .page-hero h1 {
    color: var(--navy, #002868);
    font-size: 1.5rem;
    line-height: 1.2;
    margin: 0.1rem 0 0;
}

.app-shell .page-hero p {
    color: #5a6675;
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0.3rem 0 0;

    /* Long enough to read, short enough not to become a paragraph of marketing. */
    max-width: 62ch;
}

.app-shell .page-hero .hero-eyebrow {
    /* Gold on white is unreadable — it was legible only against the navy gradient
       this replaces. Red is the suite's other accent and holds up on white. */
    color: var(--red, #B22234);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* ── Content ──────────────────────────────────────────────────────────────── */

.app-shell .section {
    /* 5rem top and bottom is a landing page pacing itself. A tool has work to show. */
    padding: 1.35rem 0;
}

.app-shell .section + .section {
    padding-top: 0.35rem;
}

.app-shell .container {
    /* The rail already provides the left margin, and a 1140px column centred inside
       whatever is left of a 1920px screen strands the work in the middle with two
       empty gutters. Fill the space and cap it only where lines get too long to read. */
    max-width: 1400px;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

/* Section headings inside a tool are subheadings, not billboards. */
.app-shell .section-title {
    font-size: 1.2rem;
    margin-bottom: 0.4rem;
    text-align: left;
}

.app-shell .section-subtitle {
    font-size: 0.92rem;
    color: #5a6675;
    margin: 0 0 1rem;
    max-width: 70ch;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}

/* `.text-center` on a heading is a marketing instinct; inside a tool it puts the
   label a long way from the thing it labels. */
.app-shell .section .text-center {
    text-align: left;
}

/* A tinted band is how the marketing site separates one story from the next. In a
   tool it just makes half the screens grey and half of them white for no reason. */
.app-shell .section-light {
    background: transparent;
}

/* ── Surfaces ─────────────────────────────────────────────────────────────── */

.app-shell .card,
.app-shell .contact-form-wrap {
    border-radius: 10px;
    border: 1px solid #e6eaf1;
    box-shadow: none;
}

/* ── The CRM itself opts out ──────────────────────────────────────────────────
   It is already a full-bleed workspace with its own rail and record panel, and it
   renders no .page-hero, .section or .container at all — so nothing above applies
   to it. This is only here to say that is deliberate rather than an oversight:
   the CRM is the reference these rules are copying, not a page they correct. */

/* ── Phone ────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .app-shell .container {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .app-shell .page-hero {
        padding: 0.85rem 0 0.75rem;
    }

    .app-shell .page-hero h1 {
        font-size: 1.25rem;
    }
}

/* ── Paper ────────────────────────────────────────────────────────────────────
   A tool printed from inside the shell must put the tool on the paper and
   nothing else: no top bar, no rail, no footer, no phone tab bar.

   This is what lets a printable page keep the shell on screen. The call sheet —
   the one screen in the suite people actually print — used to set a bare
   PrintLayout instead, and the cost was paid on screen: opening it from the rail
   replaced the whole app with an unstyled page and a slim blue strip, so the
   suite appeared to end. Hiding the furniture at print time gets the clean sheet
   of paper without giving up the app to do it.

   `!important` because the chrome is styled from scoped stylesheets, which carry
   a higher specificity than a plain class selector here can. */
@media print {
    .app-nav,
    .app-rail,
    .app-tabs,
    .app-footer {
        display: none !important;
    }

    .app-shell {
        /* The rail is a grid column; with it hidden the grid has an empty track
           and the work starts an inch in from the edge of the page. */
        display: block !important;
        min-height: 0 !important;
        background: #fff !important;
    }

    .app-main {
        display: block !important;
    }
}